/* Lukas Babbick · v7 final · Anthrazit, Grün, Blau, Lila · Schibsted Grotesk + Atkinson Hyperlegible Next */
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibstedgrotesk-latin-var.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/atkinsonhyperlegiblenext-latin-var.woff2) format("woff2");font-weight:200 800;font-display:swap}

/* ---------- Farben: Grün, Blau, Lila, Anthrazit ---------- */
:root{
  --bg:#F2F4F3; --bg-2:#E5EAE7; --card:#FFFFFF; --card-2:#F7F9F8;
  --ink:#16191C; --ink-2:#343A3F; --muted:#575F66; --line:#D7DDDA;
  --acc:#1D7A4E; --acc-ink:#16643F; --acc-soft:#E2F1E8;
  --blue:#2B5C9E; --purple:#6B4A9B;
  --l1:#1D7A4E; --l2:#2B5C9E; --l3:#6B4A9B; --l4:#3A4046;
  --deep:#23282D; --deep-2:#2F353B; --on-deep:#F1F3F2; --on-deep-2:#B9C1BE; --deep-acc:#7EDCA6;
  --head:"Schibsted Grotesk",system-ui,sans-serif; --body:"Atkinson Hyperlegible Next",system-ui,sans-serif;
  --head-w:800; --name-track:-.05em; --radius:12px;
  --shadow:0 0 0 1px rgba(22,25,28,.05),0 14px 34px -26px rgba(22,25,28,.4);
}
:root{--maxw:1200px; --pad:clamp(20px,5vw,56px); --ease:cubic-bezier(.22,.7,.2,1); --ease-o:cubic-bezier(.16,1,.3,1); --p:1}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3,h4{font-family:var(--head);font-weight:var(--head-w);letter-spacing:-.025em;line-height:1.08}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:22ch}
h3{font-size:1.3rem;letter-spacing:-.015em}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc-ink)}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:40rem}
section{padding:clamp(80px,11vw,150px) 0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:.5rem .9rem;border-radius:6px;z-index:99}
.skip:focus{left:8px}

.u{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease)}
.u:hover{background-size:0 1px;background-position:100% 100%}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
a:hover .arrow,a:focus-visible .arrow{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;padding:.8rem 1.25rem;border-radius:999px;background:var(--ink);color:var(--card);transition:transform .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px)}
.dark .btn{background:var(--on-deep);color:var(--deep)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* Randnotiz: aufrechte kleine Marke statt Schreibschrift */
.note{font-family:var(--head);font-weight:700;font-size:.82rem;letter-spacing:.01em;line-height:1.2;color:var(--acc-ink);background:var(--acc-soft);padding:.32rem .7rem;border-radius:999px;display:inline-block;transform:rotate(-2deg)}
.dark .note,.pillar.main .note{color:var(--deep);background:var(--deep-acc)}

/* Navigation */
.nav{position:sticky;top:0;z-index:40;color:var(--on-deep);background:color-mix(in srgb,var(--deep) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.brand{font-family:var(--head);font-weight:var(--head-w);font-size:1.35rem;letter-spacing:-.03em;text-decoration:none;}
.brand .b2{color:var(--deep-acc)}
.nav ul{display:flex;gap:1.8rem;list-style:none;font-size:.95rem}
.nav ul a{text-decoration:none;color:var(--on-deep-2);transition:color .2s}
.nav ul a:hover{color:var(--on-deep)}
.nav .cta{color:var(--deep-acc);font-weight:700}
.nav :focus-visible,.hero :focus-visible{outline-color:var(--deep-acc)}
@media(max-width:760px){.nav ul li:not(:last-child){display:none}.brand{font-size:1.2rem}}

/* Hero */
.hero{background:var(--deep);color:var(--on-deep);padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(8px,2vw,24px) 0}
.hey{font-size:1.1rem;color:var(--on-deep-2);margin-bottom:.4rem}
.name{font-size:clamp(3.4rem,9.2vw,8.6rem);line-height:.88;letter-spacing:var(--name-track);;font-weight:800}
.name .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;vertical-align:top}
.name .w > span{display:inline-block}
.name .w:last-child{color:var(--deep-acc)}
.claim{font-family:var(--head);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.22;letter-spacing:-.015em;margin-top:clamp(1.4rem,2.6vw,2.2rem);max-width:26ch}
.hero .what{margin-top:1rem;font-size:1.12rem;color:var(--on-deep-2);max-width:32rem}
.portrait{position:relative;overflow:hidden;border-radius:var(--radius)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:translateY(var(--py,0)) scale(1.06)}
.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,48px);color:var(--ink)}
.entry{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);text-decoration:none;font-weight:700;font-family:var(--head);transition:transform .25s var(--ease)}
.entry span{font-weight:500;color:var(--muted);font-size:.95rem;font-family:var(--body)}
.entry:hover{transform:translateY(-2px)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.portrait{max-width:420px;order:-1}.portrait img{aspect-ratio:1/1;object-position:50% 25%}.entries{grid-template-columns:1fr}}

/* ---------- Linien ---------- */
.lines{padding-bottom:0}
.lines-head{margin-bottom:clamp(40px,5vw,64px)}
.lines-head .lead{margin-top:1rem}
.statements{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.st{position:relative;padding:0 1.2% 0 calc(3% + 18px);display:flex;flex-direction:column;--c:var(--l1)}
.st:nth-child(2){--c:var(--l2)} .st:nth-child(3){--c:var(--l3)} .st:nth-child(4){--c:var(--l4)}
.st::before{content:"";position:absolute;left:3%;top:.55rem;bottom:0;width:2.5px;margin-left:-1.25px;background:var(--c);border-radius:2px}
.st .dot{position:absolute;left:3%;top:.3rem;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--c);z-index:1}
.st-card{background:var(--card);border-radius:var(--radius);padding:1.3rem 1.3rem 1.2rem;box-shadow:var(--shadow);margin-bottom:2.6rem;flex:1}
.st q{font-family:var(--head);font-weight:var(--head-w);font-size:clamp(1.2rem,1.55vw,1.42rem);line-height:1.18;letter-spacing:-.02em;quotes:none;display:block;color:var(--ink)}
.st p{margin-top:.8rem;font-size:.95rem;color:var(--ink-2);line-height:1.6}
.st .tags{margin-top:.8rem;font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.merge{display:block;width:100%;height:200px;overflow:visible}
.merge path,.split path{fill:none;stroke-width:2.5;stroke-linecap:round}
.merge-m{display:none}

/* Werdegang: Hauptlinie mittig, Stationen zweigen links und rechts ab */
.career{list-style:none;position:relative;padding:30px 0 10px}
.career::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--acc);border-radius:2px;transform-origin:top;transform:scaleY(var(--p))}
.career-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stn{position:relative;width:50%;padding:0 0 0;margin-top:-34px}
.stn:first-of-type,.career-head + .stn{margin-top:0}
.stn .br{position:absolute;top:0;width:72px;height:44px;overflow:visible}
.stn .br path{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.stn.r{margin-left:50%}
.stn.r .br{left:0}
.stn.l .br{right:0;transform:scaleX(-1)}
.card-s{position:relative;background:var(--card);border-radius:var(--radius);padding:1rem 1.2rem 1.1rem;box-shadow:var(--shadow);max-width:30rem}
.stn.r .card-s{margin-left:72px}
.stn.l .card-s{margin-right:72px;margin-left:auto;text-align:left}
.stn .yr{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--acc-ink);text-transform:uppercase}
.stn h4{font-size:1.14rem;margin:.15rem 0 .3rem}
.stn p{font-size:.95rem;color:var(--ink-2)}
.stn .note{position:absolute;top:-13px;white-space:nowrap;z-index:3}
.stn.l .note{right:96px}
.stn.r .note{left:96px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.chips li{font-size:.8rem;font-weight:700;padding:.28rem .62rem;border-radius:999px;background:var(--acc-soft);color:var(--acc-ink)}
.stn.today{width:auto;margin:0;padding:34px 0 0;text-align:center}
.stn.today::before{left:50%;margin-left:-10px;top:14px;width:20px;height:20px;background:var(--acc);box-shadow:0 0 0 6px var(--bg)}
.stn.today .head{display:none}
.stn.today h4{font-size:1.45rem;margin-top:.4rem}
.stn.today p{margin:0 auto}
.today-box{position:relative;z-index:1;display:inline-block;background:var(--card);padding:.8rem 1.6rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.split-m{display:none}
.split{display:block;width:100%;height:110px}
.merge path,.split path,.merge-m path,.split-m path{stroke-dasharray:1;stroke-dashoffset:0}

/* Säulen */
.pillars-sec{padding-top:0}
.pillars{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:stretch}
.pillar-cell{padding:0 1.2%;display:flex}
.pillar{flex:1;display:flex;flex-direction:column;border-radius:var(--radius);padding:clamp(24px,2.6vw,36px);background:var(--card);box-shadow:var(--shadow);border-top:3px solid var(--acc);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pillar:hover{transform:translateY(-6px)}
.pillar h3{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:.5rem 0 .8rem}
.pillar > p{color:var(--ink-2);font-size:.98rem}
.pillar ul{list-style:none;margin:1.2rem 0 1.6rem;display:grid;gap:1rem}
.pillar li{font-size:.96rem;color:var(--ink-2);padding-left:1rem;border-left:2px solid var(--line)}
.pillar li strong{display:block;color:var(--ink);font-family:var(--head);font-weight:var(--head-w);font-size:1.02rem;letter-spacing:-.01em}
.pillar .go{margin-top:auto;font-weight:700;text-decoration:none;align-self:flex-start}
.pillar.main{background:var(--deep);color:var(--on-deep);border-top-color:var(--deep-acc);padding-top:clamp(32px,3.4vw,48px);padding-bottom:clamp(32px,3.4vw,48px)}
.pillar.main h3{font-size:clamp(2rem,3vw,2.6rem)}
.pillar.main .kicker{color:var(--deep-acc)}
.pillar.main > p,.pillar.main li{color:var(--on-deep-2)}
.pillar.main li{border-left-color:var(--deep-2)}
.pillar.main li strong{color:var(--on-deep)}
.pillar.main .note{margin:-.2rem 0 .8rem;align-self:flex-start}
.pillar .links{margin-top:auto;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.pillar .links a{font-weight:700;text-decoration:none}
.pillar.main .btn{background:var(--on-deep);color:var(--deep)}
.pillar.main :focus-visible{outline-color:var(--deep-acc)}

/* Stimmen und Ergebnisse */
.refs{padding-top:clamp(40px,6vw,90px)}
.refs-head{margin-bottom:2.2rem}
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stats li{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.4rem}
.stats b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;letter-spacing:-.04em;color:var(--acc)}
.stats span{display:block;margin-top:.4rem;font-weight:600;color:var(--ink-2)}
.stats-note{margin-top:.7rem;font-size:.85rem;color:var(--muted)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:2rem}
.quote{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 1.5rem 1.3rem;display:flex;flex-direction:column;border-top:3px solid var(--acc)}
.quote blockquote p{font-size:1rem;color:var(--ink-2);line-height:1.6}
.quote figcaption{margin-top:auto;padding-top:1.1rem;font-size:.88rem;color:var(--muted)}
.quote figcaption strong{display:block;font-family:var(--head);color:var(--ink);font-size:1rem}
.names{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.4rem}
.names ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 0;margin-top:.8rem;font-family:var(--head);font-weight:var(--head-w);font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.015em;color:var(--ink-2)}
.names li:not(:last-child)::after{content:"·";margin:0 .7rem;color:var(--acc)}
@media(max-width:860px){.stats,.quotes{grid-template-columns:1fr}}

/* Blueprints */
.dark{background:var(--deep);color:var(--on-deep)}
.dark .kicker{color:var(--deep-acc)}
.dark .lead{color:var(--on-deep-2)}
.bp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,60px)}
.bp-head h2{max-width:20ch}
.bp-card{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);background:var(--deep-2);border-radius:calc(var(--radius) + 4px);padding:clamp(24px,4vw,52px)}
.bp-card h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.bp-card p{color:var(--on-deep-2);margin-top:1rem;max-width:38rem}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2rem}
.facts li{font-size:.9rem;padding:.45rem .85rem;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep-acc) 50%,transparent);color:var(--on-deep)}
.facts b{color:var(--deep-acc);font-weight:700}
.diagram{--dg-fill:var(--deep);--dg-stroke:var(--deep-acc);--dg-text:var(--on-deep);--dg-sub:var(--on-deep-2);--dg-line:var(--on-deep-2);--dg-accent:var(--deep-acc)}
.diagram text{font-family:var(--body);fill:var(--dg-text);font-size:13px}
.diagram .sub{fill:var(--dg-sub);font-size:11px}
.diagram .t{font-family:var(--head);font-weight:700;font-size:14px}
.diagram .box{fill:var(--dg-fill);stroke:var(--dg-stroke);stroke-width:1.3}
.diagram .ln{fill:none;stroke:var(--dg-line);stroke-width:1.6}
.diagram .ln.dash{stroke-dasharray:5 5}
.diagram .acc{stroke:var(--dg-accent)}
.diagram .dot{fill:var(--dg-accent)}
.light .diagram,.diagram.light{--dg-fill:var(--card);--dg-stroke:var(--ink);--dg-text:var(--ink);--dg-sub:var(--muted);--dg-line:var(--ink-2);--dg-accent:var(--acc)}
.bp-card > div{display:grid;grid-template-columns:1fr auto;gap:0 3rem;align-items:end}
.bp-card > div > h3,.bp-card > div > p{grid-column:1}
.bp-card > div > .facts{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:flex-start;margin:0}
.bp-card > div > .btn{grid-column:2;margin-top:1.2rem;justify-self:start}
.arch-v{display:none}
@media(max-width:760px){.bp-card > div{display:block}.bp-card > div > .facts{flex-direction:row;margin:1.4rem 0 1.6rem}.arch-h{display:none}.arch-v{display:block;max-width:360px;margin:0 auto}}

/* Persönlich */
.me-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,90px);align-items:center}
.me-grid img{border-radius:var(--radius);width:100%;aspect-ratio:4/5;object-fit:cover}
.me-grid .big{font-size:clamp(1.15rem,1.6vw,1.32rem);color:var(--ink-2);margin-top:1.4rem;max-width:36rem}
.finds{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2.2rem}
.finds li{background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);padding:1rem 1.1rem;font-size:.93rem;color:var(--ink-2)}
.finds strong{display:block;font-family:var(--head);color:var(--ink);font-size:1rem;margin:.15rem 0 .2rem}
.finds .yr{font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--acc-ink);text-transform:uppercase}
@media(max-width:860px){.me-grid{grid-template-columns:1fr}.me-grid img{max-width:460px}.finds{grid-template-columns:1fr}}

/* Kontakt */
.contact{background:var(--bg-2)}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,6vw,90px);align-items:center}
.contact h2{font-size:clamp(2.4rem,5vw,4rem)}
.contact .lead{margin:1.2rem 0 2rem}
.mail{font-family:var(--head);font-size:clamp(1.3rem,2.6vw,2rem);font-weight:var(--head-w);letter-spacing:-.02em;text-decoration:none;color:var(--acc-ink)}
.socials{list-style:none;display:flex;gap:1.5rem;margin-top:1.6rem;font-weight:600}
.contact figure{position:relative;max-width:340px;justify-self:end}
.contact figure img{border-radius:var(--radius);transform:rotate(2deg);aspect-ratio:3/4;object-fit:cover;width:100%}
.contact figure .note{position:absolute;left:-1.5rem;bottom:-1.2rem}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.contact figure{justify-self:start;max-width:260px}}

footer{background:var(--deep);color:var(--on-deep-2);padding:44px 0 56px;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
footer a{color:var(--on-deep)}



/* ---------- Animation (nur mit JS und ohne reduzierte Bewegung) ---------- */
/* 1. Name gleitet aus einer Maske, Porträt blendet über (Crossfade mit Clip) */
.anim .name .w > span{transform:translateY(105%);transition:transform 1.1s var(--ease-o)}
.anim .name .w:last-child > span{transition-delay:.12s}
.anim.ready .name .w > span{transform:none}
.anim .portrait{clip-path:inset(12% 8% 12% 8% round var(--radius));opacity:0;transition:clip-path 1.3s var(--ease-o) .15s,opacity .9s ease .15s}
.anim .portrait img{filter:saturate(.4);transition:filter 1.6s ease .3s}
.anim.ready .portrait{clip-path:inset(0 0 0 0 round var(--radius));opacity:1}
.anim.ready .portrait img{filter:none}
/* 2. Blöcke blenden weich ein */
.anim .rv{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.anim .rv.in{opacity:1;transform:none;filter:none}
/* 3. Werdegang: Linie wächst mit dem Scrollen, ein Lichtpunkt führt, Äste zeichnen sich, Karten blenden über */
.anim .st::before{transform-origin:top;transform:scaleY(var(--sp,1))}
.anim .career::after{content:"";position:absolute;left:50%;top:calc(var(--p)*100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent),0 0 24px 4px color-mix(in srgb,var(--acc) 35%,transparent);opacity:calc(1 - var(--p)*var(--p)*var(--p))}
.anim .stn .br path{stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease)}
.anim .stn.on .br path{stroke-dashoffset:0}
.anim .stn .node,.anim .stn.today::before{transform:scale(0);transition:transform .45s var(--ease-o)}
.anim .stn.on .node,.anim .stn.today.on::before{transform:none}
.anim .stn .sbr path{stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) .75s}
.anim .stn.on .sbr path{stroke-dashoffset:0}
.anim .stn .sub-card,.anim .edu .edu-box{opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .8s var(--ease) .95s,transform .8s var(--ease-o) .95s,filter .8s var(--ease) .95s}
.anim .edu .edu-box{transition-delay:.1s}
.anim .stn.on .sub-card,.anim .edu.on .edu-box{opacity:1;transform:none;filter:none}
.anim .stn .card-s,.anim .stn .note,.anim .today-box{opacity:0;transform:translateY(12px) scale(.985);filter:blur(5px);transition:opacity .8s var(--ease) .28s,transform .8s var(--ease-o) .28s,filter .8s var(--ease) .28s}
.anim .stn.on .card-s,.anim .stn.on .note,.anim .stn.on .today-box{opacity:1;transform:none;filter:none}
.anim .stn.on .note{transform:rotate(-2deg)}

/* ---------- Mobil ---------- */
@media(max-width:1099px){
  .statements{grid-template-columns:1fr;--g:62px}
  .st{padding:0 0 0 var(--g);max-width:46rem}
  .st-card{margin-bottom:1.4rem}
  .st::before,.st .dot{display:none}
  .st:nth-child(1){background:linear-gradient(var(--l1),var(--l1)) 11px 14px/2.5px calc(100% - 14px) no-repeat}
  .st:nth-child(2){background:linear-gradient(var(--l1),var(--l1)) 11px 0/2.5px 100% no-repeat,linear-gradient(var(--l2),var(--l2)) 21px 14px/2.5px calc(100% - 14px) no-repeat}
  .st:nth-child(3){background:linear-gradient(var(--l1),var(--l1)) 11px 0/2.5px 100% no-repeat,linear-gradient(var(--l2),var(--l2)) 21px 0/2.5px 100% no-repeat,linear-gradient(var(--l3),var(--l3)) 31px 14px/2.5px calc(100% - 14px) no-repeat}
  .st:nth-child(4){background:linear-gradient(var(--l1),var(--l1)) 11px 0/2.5px 100% no-repeat,linear-gradient(var(--l2),var(--l2)) 21px 0/2.5px 100% no-repeat,linear-gradient(var(--l3),var(--l3)) 31px 0/2.5px 100% no-repeat,linear-gradient(var(--l4),var(--l4)) 41px 14px/2.5px calc(100% - 14px) no-repeat}
  .st .mdot{position:absolute;top:7px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2.5px var(--c);z-index:1}
  .st:nth-child(1) .mdot{left:6px}.st:nth-child(2) .mdot{left:16px}.st:nth-child(3) .mdot{left:26px}.st:nth-child(4) .mdot{left:36px}
  .anim .statements::after{content:"";position:absolute;left:0;width:50px;top:calc(var(--sp,1)*100%);bottom:0;background:var(--bg)}
  .merge{display:none}
  .merge-m{display:block;width:60px;height:60px;overflow:visible}
  .merge-m path{fill:none;stroke-width:2.5;stroke-linecap:round}
  .career::before,.anim .career::after{left:27px}
  .career{padding-top:20px}
  .stn,.stn.r,.stn.l{width:auto;margin:0 0 16px;padding:0 0 0 27px}
  .stn.r::before,.stn.l::before{left:21px;right:auto;top:27px}
  .stn .br,.stn.r .br,.stn.l .br{left:27px;right:auto;transform:none;width:40px;height:32px}
  .stn.r .card-s,.stn.l .card-s{margin:0 0 0 40px;max-width:none}
  .stn .note,.stn.l .note,.stn.r .note{position:relative;top:auto;left:auto;right:auto;display:inline-block;margin:0 0 .5rem 40px;white-space:normal}
  .stn.today{padding:20px 0 0 54px;text-align:left}
  .stn.today::before{left:17px;margin-left:0;top:22px}
  .today-box{padding:.8rem 1.1rem}
  .split{display:none}
  .split-m{display:block;width:60px;height:40px}
  .split-m path{fill:none;stroke-linecap:round}
  .contact figure .note{left:.4rem}
  .pillars{grid-template-columns:1fr;gap:16px}
  .pillar-cell{padding:0}
  .pillar-cell.c2{order:-1}
}
.st .mdot{display:none}
@media(max-width:1099px){.st .mdot{display:block}}

/* Unterseiten */
.sub-hero{padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,80px)}
.sub-hero h1{font-size:clamp(2rem,4.6vw,3.8rem);max-width:18ch;margin-top:.8rem}
.sub-hero .lead{margin-top:1.4rem}
.back{font-size:.95rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,80px);align-items:start}
.two img{border-radius:var(--radius);width:100%}
@media(max-width:860px){.two{grid-template-columns:1fr}.two img{max-width:440px}}
.prose{max-width:44rem}
.prose h2{margin-bottom:1.1rem}
.prose h3{margin:2.2rem 0 .6rem}
.prose p{color:var(--ink-2);margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.2rem;color:var(--ink-2)}
.prose li{margin-bottom:.45rem}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:2rem}
.card{background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);padding:1.4rem 1.5rem}
.card h3{font-size:1.12rem;margin-bottom:.4rem}
.card p{color:var(--ink-2);font-size:.96rem}
.card .tool{display:block;margin-top:.6rem;font-size:.8rem;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.part{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px);margin-top:clamp(40px,5vw,64px)}
.part .num{font-family:var(--head);font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.shot{margin-top:2rem;border-radius:var(--radius);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,36px);overflow:hidden}
.shot svg{width:100%;height:100%}
figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted)}
.diagram-wrap{background:var(--deep);border-radius:var(--radius);padding:clamp(16px,3vw,36px);margin-top:1.6rem}
.legal-page .box{background:var(--card);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:1.6rem;border-left:4px solid var(--acc)}
.legal-page .prose h2{font-size:1.3rem;margin:2rem 0 .5rem;max-width:none}
@media(max-width:760px){
  .shot{aspect-ratio:auto;overflow-x:auto;justify-content:flex-start;padding:18px}
  .shot svg{min-width:640px;height:auto}
}

/* ---------- v7 final: Symbole, Stamm, Zweige ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.st-i{width:28px;height:28px;color:var(--c);margin-bottom:.7rem}
.k-i{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:.45rem}
.pillar.main .k-i{color:var(--deep-acc)}
/* Knoten mit Symbol auf dem Stamm */
.stn .node{position:absolute;top:25px;width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--acc),0 0 0 5px var(--bg);color:var(--acc);display:grid;place-items:center;z-index:3}
.stn .node .i{width:18px;height:18px}
.stn.r .node{left:-17px}
.stn.l .node{right:-17px}
/* Zweite Ebene: was aus einer Station entstand */
.sub{position:relative;margin-top:10px;max-width:24rem}
.stn.r .sub{margin-left:104px}
.stn.l .sub{margin-right:104px;margin-left:auto}
.sbr{position:absolute;top:-10px;width:36px;height:40px;overflow:visible}
.sbr path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.stn.r .sbr{left:-26px}
.stn.l .sbr{right:-26px;transform:scaleX(-1)}
.sub-card{position:relative;z-index:1;display:flex;gap:.75rem;align-items:flex-start;background:var(--card-2);border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px var(--line);padding:.75rem .95rem .8rem}
.sub-i{width:20px;height:20px;color:var(--acc);margin-top:.15rem}
.sub-card h5{font-family:var(--head);font-weight:var(--head-w);font-size:.98rem;letter-spacing:-.015em;line-height:1.2;margin:.05rem 0 .2rem}
.sub-card p{font-size:.88rem;color:var(--ink-2)}
.card-s{z-index:2}
/* Ausbildung als Marken direkt auf dem Stamm */
.edu{position:relative;z-index:2;display:flex;justify-content:center;margin:26px 0}
.edu + .stn{margin-top:0}
.edu-box{background:var(--deep);color:var(--on-deep);border-radius:var(--radius);padding:.7rem 1.1rem .8rem;text-align:center;max-width:300px;box-shadow:0 0 0 5px var(--bg)}
.edu.wide .edu-box{max-width:440px}
.edu-i{width:22px;height:22px;color:var(--deep-acc);margin:0 auto .3rem;display:block}
.edu .yr{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--deep-acc)}
.edu h4{font-size:1.05rem;margin:.1rem 0 .2rem;color:var(--on-deep)}
.edu p{font-size:.86rem;color:var(--on-deep-2);line-height:1.45}
.edu .chips{justify-content:center}
.edu .chips li{background:var(--deep-2);color:var(--on-deep)}
@media(max-width:1099px){
  .stn .node,.stn.r .node,.stn.l .node{left:10px;right:auto;top:25px}
  .stn .sub,.stn.r .sub,.stn.l .sub{margin:10px 0 0 70px;max-width:none}
  .stn .sbr,.stn.r .sbr,.stn.l .sbr{left:-24px;right:auto;transform:none}
  .edu{justify-content:flex-start;margin:22px 0;padding-left:6px}
  .edu-box,.edu.wide .edu-box{text-align:left;max-width:none;width:100%}
  .edu-i{margin:0 0 .3rem}
  .edu .chips{justify-content:flex-start}
}

.legal-page h1{font-size:clamp(2.2rem,7vw,3.6rem);overflow-wrap:normal;hyphens:manual;margin-bottom:1.6rem}

/* v7 release: footer + neue Seiten */
footer .wrap{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.3rem}
.foot-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin:0;padding:0}
.foot-nav a{font-weight:700}
.foot-meta{display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.legal-page .lead{font-size:1.12rem;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:11rem 1fr;gap:.55rem 1.4rem;margin:0 0 1.4rem}
.facts dt{font-weight:700;color:var(--ink)}
.facts dd{margin:0;color:var(--ink-2)}
.facts-weg{list-style:none;margin-left:0!important;border-left:2px solid var(--acc);padding-left:1.1rem}
.facts-weg li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem}
.facts-weg .yr{font-weight:700;color:var(--acc-ink)}
.legal-page .chips{margin:0 0 1.4rem}
.sitemap{list-style:none;margin-left:0!important;padding:0}
.sitemap > li{padding:.75rem 0;border-bottom:1px solid var(--line)}
.sitemap > li > a{font-weight:700;font-size:1.08rem}
.sitemap > li > span{display:block;color:var(--muted);font-size:.95rem}
.sitemap ul{list-style:none;margin:.4rem 0 0 1rem!important;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.95rem}
@media (max-width:640px){
  .facts{grid-template-columns:1fr;gap:.1rem}
  .facts dd{margin-bottom:.7rem}
  .facts-weg li{grid-template-columns:1fr;gap:0}
  }

/* v7 release: Kontaktformular */
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center}
.kform{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.2rem,3vw,1.8rem);max-width:40rem}
.kf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.kf{display:flex;flex-direction:column;margin-bottom:.9rem}
.kf label{font-weight:700;font-size:.92rem;margin-bottom:.35rem;color:var(--ink)}
.kf input,.kf textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--card-2);border:1.5px solid var(--line);border-radius:10px;padding:.7rem .85rem;width:100%}
.kf textarea{resize:vertical;min-height:8rem}
.kf input:focus,.kf textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.kf [aria-invalid="true"]{border-color:#B3261E}
.kf-err{color:#B3261E;font-size:.86rem;min-height:0;margin-top:.3rem}
.kf-err:empty{display:none}
.kf-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.kf-send{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;margin-top:.3rem}
.kf-send .btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.kf-send .btn[disabled]{opacity:.6;cursor:progress}
.kf-status{margin:0;font-weight:700;font-size:.95rem}
.kf-status.ok{color:var(--acc-ink)}
.kf-status.err{color:#B3261E}
.kf-note{margin:1rem 0 0;font-size:.86rem;color:var(--muted)}
.kf-alt{margin-top:1.3rem;color:var(--ink-2)}
.mail-s{font-weight:700;color:var(--acc-ink)}
.contact .kform{margin-top:.2rem}
@media(max-width:640px){.kf-row{grid-template-columns:1fr}}