/* Shifting Tomorrow · Startseite und gemeinsame Basis (Entwurf B3, 17.10.2026) */
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--pine:#123b34;--dark:#0d302a;--mint:#d5eadb;--paper:#f7f9f6;--ink:#17392f;--muted:#3f5a50;--soft:#e8efe9;--line:#cbd5cd;--ease:cubic-bezier(.23,1,.32,1);--cycle:9s;--start:1.6s;--hdr:88px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main,footer{overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.chapter :focus-visible,.contact :focus-visible,.about :focus-visible,.fmt.mgmt :focus-visible{outline-color:var(--mint)}
[id]{scroll-margin-top:96px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4.4vw,64px)}
.nw{white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--pine);color:var(--paper);padding:10px 16px;border-radius:6px;font-weight:650}
.skip:focus{top:12px}

/* Buttons und Links */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border:0;border-radius:6px;background:var(--pine);color:var(--paper);font:650 16px/1.2 Manrope,Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease),background-color .16s ease}
.btn:active,.button:active{transform:scale(.97)}
.btn.sm,.button.small{min-height:44px;padding:10px 18px;font-size:14px}
.btn.light,.button.light{background:var(--mint);color:var(--pine)}
.btn svg{width:16px;height:16px}
.link,.text-link{font-weight:650;font-size:16px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-underline-offset .16s var(--ease)}
@media (hover:hover){.link:hover,.text-link:hover{text-underline-offset:9px}.btn:hover,.button:hover{background:#1f5146}.btn.light:hover,.button.light:hover{background:#e6f2e9}}

/* Header: bleibt beim Scrollen sichtbar, wird kompakter */
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);transition:box-shadow .3s ease}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;gap:32px;height:var(--hdr)}
.hdr .brand{display:block;flex:none}
.hdr .brand img{display:block;width:72px;height:72px;transition:width .3s var(--ease),height .3s var(--ease)}
.hdr.is-scrolled .brand img{width:56px;height:56px}
.hdr nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px;font-weight:600}
.hdr nav a:not(.btn),.ftr ul a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:8px;text-decoration-color:transparent;transition:text-decoration-color .2s ease,text-underline-offset .2s var(--ease)}
.hdr nav a:not(.btn){padding:12px 0}
@media (hover:hover){.hdr nav a:not(.btn):hover,.ftr ul a:hover{text-decoration-color:currentColor;text-underline-offset:5px}}
.hdr nav .btn{display:none}
.hdr-ctrl{display:flex;align-items:center;gap:16px}
.lang{display:flex;gap:2px;background:var(--soft);border-radius:6px;padding:3px}
.lang a{min-width:38px;min-height:36px;display:grid;place-items:center;font-size:14px;font-weight:700;border-radius:4px;color:var(--pine)}
.lang a[aria-current]{background:var(--pine);color:var(--paper)}
.menu-toggle{display:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--pine);font:650 14px Manrope,Arial,sans-serif;cursor:pointer}
@media (max-width:1060px){
 .hdr-in{gap:12px;justify-content:space-between;height:72px}
 .hdr .brand img{width:56px;height:56px}
 .hdr.is-scrolled .brand img{width:48px;height:48px}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:104px}
 .hdr-ctrl .btn{display:none}
 .hdr nav{position:absolute;left:0;right:0;top:100%;margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:8px clamp(20px,4.4vw,64px) 24px;box-shadow:0 1px 0 var(--line),0 24px 40px -24px rgba(13,48,42,.25);font-size:18px}
 .hdr nav.open{display:flex}
 .hdr nav a:not(.btn){padding:14px 0;border-bottom:1px solid var(--soft)}
 .hdr nav .btn{display:inline-flex;margin-top:20px;align-self:flex-start}
}
@media (max-width:420px){.hdr-ctrl{gap:8px}.lang a{min-width:34px}}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(calc(100svh - var(--hdr) - 112px),820px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:-10%;z-index:-2;background:radial-gradient(38% 52% at 72% 48%,#dcefe2,rgba(220,239,226,.6) 45%,transparent 75%),radial-gradient(30% 40% at 18% 70%,rgba(213,234,219,.45),transparent 70%);animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translate(-2%,1.5%) scale(1.04)}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:center;width:100%;padding-block:32px 40px}
.pos{margin:0 0 32px;font-size:16px;font-weight:650;color:var(--pine);display:flex;align-items:center;gap:12px}
.pos::before{content:"";width:28px;height:2px;background:var(--pine);transform-origin:left;animation:grow .9s var(--ease) .1s both}
@keyframes grow{from{transform:scaleX(0)}}
.hero h1{margin:0;font-weight:500;font-size:clamp(40px,4.6vw,66px);line-height:1.04;letter-spacing:-.048em;color:var(--ink)}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .l>span{display:inline-block;animation:lineup 1s var(--ease) both}
.hero h1 .l:nth-child(2)>span{animation-delay:.12s}
@keyframes lineup{from{transform:translateY(105%)}}
.hero .lead{margin:32px 0 0;font-size:20px;line-height:1.5;max-width:40ch}
.hero .actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:40px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s var(--ease) .35s both}.rise.d2{animation-delay:.45s}
.ringbox{position:relative;justify-self:end;width:min(100%,440px,60svh);aspect-ratio:1;display:grid;place-items:center}
.sweep{position:absolute;inset:-14%;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(213,234,219,0) 64%,rgba(213,234,219,.9) 78%,rgba(255,255,255,.85) 80%,transparent 81%);filter:blur(22px);opacity:.75;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ringbox .big{width:100%;height:auto;display:block;position:relative}
.reveal{-webkit-mask:conic-gradient(#000 var(--sweep),transparent 0);mask:conic-gradient(#000 var(--sweep),transparent 0);animation:sweep 1.5s cubic-bezier(.65,0,.35,1) .15s forwards}
@keyframes sweep{to{--sweep:360deg}}
.orbit{position:absolute;inset:-6%;width:112%;height:112%;overflow:visible}
.orbit circle{fill:none}
.orbit .track{stroke:rgba(18,59,52,.16);stroke-width:1}
.orbit .arc{stroke:var(--pine);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:26 334;stroke-dashoffset:-202;opacity:0;animation:travel var(--cycle) var(--ease) var(--start) infinite,appear .6s ease var(--start) forwards}
@keyframes appear{to{opacity:1}}
@keyframes travel{0%,28%{stroke-dashoffset:-202}33%,61%{stroke-dashoffset:-167}66%,94%{stroke-dashoffset:-132}100%{stroke-dashoffset:-202}}
.note{position:absolute;display:flex;align-items:center;gap:16px;transform:translate(-100%,-50%);text-align:right;opacity:0;animation:fadein .6s ease forwards}
.note .pt{order:2;flex:none;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--pine);margin-right:-5px;animation:dot var(--cycle) ease infinite}
.note b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.25;color:var(--muted);animation:label var(--cycle) ease infinite}
.note small{display:block;font-size:14px;font-weight:500;color:var(--muted);line-height:1.35;white-space:nowrap;opacity:.85;animation:sub var(--cycle) ease infinite}
@keyframes fadein{to{opacity:1}}
@keyframes dot{0%,30%{background:var(--pine);box-shadow:0 0 0 5px rgba(18,59,52,.14),0 0 0 1.5px var(--pine)}36%,100%{background:var(--paper);box-shadow:0 0 0 0 rgba(18,59,52,0),0 0 0 1.5px var(--pine)}}
@keyframes label{0%,30%{color:var(--ink)}36%,100%{color:var(--muted)}}
@keyframes sub{0%,30%{opacity:1}36%,100%{opacity:.85}}
.n1{left:6.6%;top:19.6%;animation-delay:var(--start)}.n2{left:-3%;top:50%;animation-delay:calc(var(--start) + .15s)}.n3{left:6.6%;top:80.4%;animation-delay:calc(var(--start) + .3s)}
.n1 .pt,.n1 b,.n1 small{animation-delay:var(--start)}
.n2 .pt,.n2 b,.n2 small{animation-delay:calc(var(--start) + 3s)}
.n3 .pt,.n3 b,.n3 small{animation-delay:calc(var(--start) + 6s)}
@media (min-width:901px) and (max-width:1400px){
 .hero .wrap{grid-template-columns:minmax(0,1fr) auto}
 .ringbox{width:clamp(280px,30vw,400px);margin-left:150px}
 .hero h1{font-size:clamp(38px,4.3vw,60px)}
 .note{gap:12px}.note b{font-size:15px}.note small{font-size:13px}
}
/* Ring folgt der Maus (site.js setzt .is-live), Themen sind Links */
.note{color:inherit}
.note .lbl{display:block}
.note:focus-visible{outline-offset:6px}
.ringbox.is-live .orbit .arc{animation:none;opacity:1}
.ringbox.is-live .sweep{animation:none}
.ringbox.is-live .note .pt,.ringbox.is-live .note b,.ringbox.is-live .note small{animation:none;transition:color .25s ease,opacity .25s ease,background-color .25s ease,box-shadow .25s ease}
.ringbox.is-live .note b{color:var(--muted)}
.ringbox.is-live .note small{opacity:.85}
.ringbox.is-live .note .pt{background:var(--paper);box-shadow:0 0 0 1.5px var(--pine)}
.ringbox.is-live .note.on b{color:var(--ink)}
.ringbox.is-live .note.on small{opacity:1}
.ringbox.is-live .note.on .pt{background:var(--pine);box-shadow:0 0 0 6px rgba(18,59,52,.14),0 0 0 1.5px var(--pine)}
.ringbox.has-target{cursor:pointer}

/* Kundenlogos */
.strip{padding-block:8px 56px}
.logos{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr));align-items:center;gap:24px}
.logos .cap{margin:0;font-size:14px;font-weight:600;color:var(--muted);max-width:18ch;line-height:1.35}
.logos img{display:block;justify-self:center;width:auto;filter:brightness(0);opacity:.62;transition:opacity .25s ease}
.logos .db{height:34px}.logos .bdf{height:22px}.logos .cariad{height:15px}.logos .air{height:21px}.logos .bahn{height:28px;filter:grayscale(1) contrast(2.2);mix-blend-mode:multiply}
@media (hover:hover){.logos img:hover{opacity:1}}

/* Leistungen */
.chapter{background:var(--pine);color:var(--paper);position:relative;overflow:hidden;isolation:isolate}
.chapter::before{content:"";position:absolute;width:900px;height:900px;right:-300px;top:-420px;border-radius:50%;border:1px solid rgba(213,234,219,.14);z-index:-1}
.chapter>.wrap{padding-block:clamp(88px,10vw,150px)}
.chapter .head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(56px,6vw,96px)}
.chapter h2,.projects h2,.tr-head h2,.about h2,.focus h2,.contact h2{margin:0;font-weight:500;font-size:clamp(34px,3.8vw,56px);line-height:1.05;letter-spacing:-.04em}
.chapter .head p{margin:0;font-size:20px;line-height:1.5;color:var(--mint);max-width:36ch}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.svc{display:flex;flex-direction:column;gap:18px;padding-top:28px;position:relative}
.svc svg{width:96px;height:96px;overflow:visible}
.svc svg .t{fill:none;stroke:rgba(213,234,219,.25);stroke-width:1.5}
.svc svg .a{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:40 320;transition:stroke-dashoffset .6s var(--ease)}
.svc:nth-child(1) svg .a{stroke-dashoffset:-195}.svc:nth-child(2) svg .a{stroke-dashoffset:-160}.svc:nth-child(3) svg .a{stroke-dashoffset:-125}
@media (hover:hover){.svc:hover svg .a{stroke-dashoffset:-240}}
.svc h3{margin:8px 0 0;font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.svc p{margin:0;font-size:16px;line-height:1.55;color:var(--mint)}
.svc .link{margin-top:auto;color:var(--paper);align-self:flex-start}
.scope{margin:clamp(48px,5vw,72px) 0 0;padding-top:28px;border-top:1px solid rgba(213,234,219,.2);font-size:16px;line-height:1.6;color:var(--mint);max-width:80ch}

/* Projekte */
.projects{background:var(--mint)}
.projects .wrap{padding-block:clamp(88px,10vw,150px)}
.projects h2{margin-bottom:clamp(48px,5vw,72px);max-width:18ch}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--paper);border-radius:6px;overflow:hidden}
.feature .body{padding:clamp(32px,4vw,64px)}
.live{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:650;color:var(--pine);margin:0 0 24px}
.live i{width:8px;height:8px;border-radius:50%;background:#1f8a5b;box-shadow:0 0 0 4px rgba(31,138,91,.15)}
.feature h3{margin:0;font-size:clamp(28px,2.8vw,40px);font-weight:600;line-height:1.12;letter-spacing:-.03em;max-width:22ch}
.feature .meta{margin:16px 0 24px;font-size:14px;font-weight:600;color:var(--muted)}
.feature .txt{margin:0;font-size:20px;line-height:1.55;max-width:52ch}
.phases{margin:36px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px;counter-reset:ph}
.phases li{display:grid;gap:6px;align-content:start;counter-increment:ph}
.phases b{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:700;color:var(--pine)}
.phases b::before{content:counter(ph);font-size:14px;font-weight:600;color:var(--muted)}
.phases span{font-size:16px;line-height:1.55}
.viz{background:var(--dark);position:relative;display:grid;place-items:center;min-height:420px;overflow:hidden;isolation:isolate}
.viz::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(40% 40% at 50% 50%,rgba(213,234,219,.18),transparent 70%)}
.viz svg{width:min(88%,440px);height:auto;overflow:visible}
.viz .ring{fill:none;stroke:rgba(213,234,219,.22);stroke-width:1}
.viz .prog{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:0 360;animation:fill 6s cubic-bezier(.65,0,.35,1) .4s infinite}
@keyframes fill{0%{stroke-dasharray:0 360}70%,92%{stroke-dasharray:270 360}100%{stroke-dasharray:270 360;opacity:0}}
.viz .node circle{fill:var(--dark);stroke:var(--mint);stroke-width:1.5}
.viz .node.now circle{fill:var(--mint)}
.viz text{fill:var(--mint);font:600 6.2px Manrope,Arial,sans-serif}
.viz .center{fill:var(--paper);font:600 8px Manrope,Arial,sans-serif;letter-spacing:-.02em}
.viz .center2{fill:rgba(213,234,219,.75);font:500 5.4px Manrope,Arial,sans-serif}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.case{background:rgba(247,249,246,.55);border-radius:6px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:14px;transition:background-color .3s ease}
.case h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.02em;max-width:22ch}
.case .meta{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.case p{margin:0;font-size:16px;line-height:1.55;max-width:56ch}
@media (hover:hover){.case:hover{background:var(--paper)}}
.more{margin-top:8px;background:rgba(247,249,246,.35);border-radius:6px;padding:4px clamp(28px,3vw,44px)}
.more summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-weight:650;font-size:16px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";flex:none;font-size:24px;font-weight:400;transition:transform .25s var(--ease)}
.more[open] summary::after{transform:rotate(45deg)}
.more p{margin:0 0 24px;max-width:70ch}

/* Trainings */
.trainings .wrap{padding-block:clamp(88px,10vw,150px)}
.tr-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.tr-head p{margin:0;font-size:20px;line-height:1.5;max-width:38ch}
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 8px;padding:0;list-style:none}
.aud li{border-radius:6px;background:var(--soft);padding:20px 24px;font-size:16px;font-weight:650;color:var(--pine);display:flex;align-items:center;gap:12px}
.aud li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pine);flex:none}
.formats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fmt{border-radius:6px;padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:16px}
.fmt h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.fmt .meta{margin:-8px 0 8px;font-size:14px;font-weight:600}
.fmt p{margin:0;font-size:16px;line-height:1.6;max-width:52ch}
.fmt.mgmt{background:var(--dark);color:var(--paper)}
.fmt.mgmt .meta,.fmt.mgmt p{color:var(--mint)}
.fmt.prax{background:var(--mint)}
.big5{margin-top:auto;padding-top:32px;display:flex;align-items:flex-end;gap:20px}
.big5 strong{white-space:nowrap;font-size:clamp(72px,8vw,128px);font-weight:500;letter-spacing:-.06em;line-height:.8;color:var(--pine)}
.big5 span{font-size:16px;font-weight:650;color:var(--pine);max-width:18ch;line-height:1.35;padding-bottom:6px}
.steps{margin:auto 0 0;padding:32px 0 0;display:grid;gap:8px;list-style:none}
.steps li{display:flex;align-items:center;gap:14px;border-radius:6px;background:rgba(213,234,219,.1);padding:14px 18px;font-size:16px;font-weight:650;color:var(--paper);line-height:1.35}
.steps li::before{content:"";flex:none;width:24px;height:2px;background:var(--mint)}
.tr-cta{display:inline-block;margin-top:36px}

/* Über mich */
.about{padding:0 8px 8px}
.about-panel{max-width:1440px;margin:0 auto;background:var(--dark);color:var(--paper);border-radius:6px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(48px,7vw,112px) clamp(20px,4.4vw,64px);position:relative;overflow:hidden;isolation:isolate}
.about-panel::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(213,234,219,.12),transparent);z-index:-1}
.about h2{margin-bottom:32px;line-height:1.06}
.about .lead{margin:0 0 20px;font-size:20px;line-height:1.5;max-width:44ch}
.about .sub{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--mint);max-width:58ch}
.sign{margin-top:32px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.sign b{font-size:16px;font-weight:650}
.sign span{color:var(--mint)}
.pf{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1;margin:0 auto}
.pf img{position:absolute;inset:9%;width:82%;height:82%;border-radius:50%;object-fit:cover}
.pf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf .t{fill:none;stroke:rgba(213,234,219,.22);stroke-width:1}
.pf .a{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:60 300;animation:spin 14s linear infinite;transform-origin:50% 50%}
.pf-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:32px 0 0}
.pf-facts.one{grid-template-columns:1fr}
.pf-facts div{background:rgba(213,234,219,.08);border-radius:6px;padding:18px 20px}
.pf-facts dt{font-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1}
.pf-facts dd{margin:8px 0 0;font-size:14px;color:var(--mint);line-height:1.4}

/* Schwerpunkt Nachhaltigkeit */
.focus{background:var(--mint)}
.focus .wrap{padding-block:clamp(88px,10vw,150px)}
.focus-head{display:grid;gap:clamp(32px,4vw,56px);margin-bottom:clamp(40px,5vw,72px)}
.focus-head h2{max-width:22ch}
.focus-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);align-items:start}
.focus-copy p:first-child{grid-row:span 2}
.focus h2{line-height:1.06}
.focus-copy p{margin:0 0 16px;font-size:16px;line-height:1.6;max-width:56ch}
.focus-copy p:first-child{font-size:20px;font-weight:600;line-height:1.45}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,4fr) 48px;align-items:center;gap:24px;background:rgba(247,249,246,.55);border-radius:6px;padding:28px clamp(24px,3vw,40px);transition:background-color .3s ease}
.row .sec{font-size:14px;font-weight:650;color:var(--muted)}
.row h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.row p{margin:0;font-size:16px;line-height:1.5}
.arr{width:48px;height:48px;border-radius:50%;background:var(--pine);color:var(--paper);display:grid;place-items:center;transition:transform .3s var(--ease)}
.arr svg{width:18px;height:18px}
@media (hover:hover){.row:hover{background:var(--paper)}.row:hover .arr{transform:translateX(4px)}}
.archive{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}

/* Kontakt */
.contact{background:var(--dark);color:var(--paper);position:relative;overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;width:1100px;height:1100px;right:-380px;bottom:-560px;border-radius:50%;border:1px solid rgba(213,234,219,.16);z-index:-1}
.contact::after{content:"";position:absolute;width:700px;height:700px;right:-180px;bottom:-360px;border-radius:50%;border:1px solid rgba(213,234,219,.1);z-index:-1}
.contact .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start;padding-block:clamp(88px,10vw,150px)}
.contact h2{line-height:1.02;letter-spacing:-.045em}
.contact .intro p{margin:28px 0 0;font-size:20px;line-height:1.5;color:var(--mint);max-width:36ch}
.contact .intro .btn{margin-top:36px}
.mail{display:block;width:fit-content;margin-top:24px;font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;overflow-wrap:anywhere}
.contact .loc{margin:40px 0 0;padding-top:24px;border-top:1px solid rgba(213,234,219,.2);font-size:16px;line-height:1.55;color:var(--mint);max-width:40ch}
.contact .loc b{color:var(--paper);font-weight:650}
.form{background:var(--pine);border-radius:6px;padding:clamp(28px,3.4vw,48px)}
.form h3{margin:0 0 8px;font-size:20px;font-weight:600}
.form label{display:block;font-size:14px;font-weight:600;margin:18px 0 8px}
.form input,.form textarea{width:100%;background:var(--dark);color:var(--paper);border:1px solid #6a8f84;border-radius:6px;padding:13px 14px;font:inherit;font-size:16px;transition:border-color .2s ease}
.form input:focus-visible,.form textarea:focus-visible{border-color:var(--mint);outline:2px solid var(--mint);outline-offset:1px}
.form textarea{min-height:120px;resize:vertical}
.form-note{font-size:14px;color:var(--mint);margin:18px 0}
#form-status{margin:16px 0 0;font-size:14px;color:var(--mint)}
#form-status:empty{display:none}

/* Footer: heller Abschluss, Tonwechsel statt Linien */
.ftr{background:var(--soft);color:var(--ink);overflow:hidden}
.ftr-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:clamp(32px,4vw,64px);padding-block:clamp(64px,7vw,104px) clamp(40px,4vw,56px)}
.ftr-brand{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ftr-brand .badge{display:block}
.ftr-brand .badge img{display:block;width:96px;height:96px}
.ftr-brand p{margin:0;font-size:16px;color:var(--muted);max-width:30ch;line-height:1.5}
.ftr h2{margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:0;color:var(--muted)}
.ftr ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:16px;font-weight:600}
.ftr-base{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding-block:0 8px;font-size:14px;color:var(--muted)}
.ftr-base p{margin:0}
.ftr-word{max-width:1440px;margin:clamp(24px,3vw,40px) auto -.2em;padding-inline:clamp(20px,4.4vw,64px);font-weight:600;font-size:clamp(44px,11vw,168px);line-height:1;letter-spacing:-.06em;color:#d3e3d7;white-space:nowrap;user-select:none}

/* Lesbarkeit und Grids */
.fmt,.case,.row,.row>*,.svc,.feature>*,.formats>*,.cases>*,.about-panel>*,.contact .wrap>*,.ftr-grid>*{min-width:0}

/* Scroll-Auftritte nur, wo der Browser es nativ kann; Inhalte bleiben sonst sichtbar */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .chapter .head,.projects h2,.feature,.cases>*,.more,.tr-head,.aud,.formats>*,.about-panel,.focus-head,.row,.contact .intro,.form,.strip{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .cases>*:nth-child(2),.formats>*:nth-child(2),.row:nth-child(2),.form{animation-range:entry 8% entry 63%}
  .svc{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .svc:nth-child(2){animation-range:entry 10% entry 70%}.svc:nth-child(3){animation-range:entry 20% entry 80%}
  .ftr-word{animation:wordin linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes enter{from{opacity:0;transform:translateY(40px)}}
  @keyframes wordin{from{transform:translateY(35%);opacity:.2}}
 }
}

/* Tablet und Mobil */
@media (max-width:900px){
 .hero{min-height:0}
 .hero .wrap{grid-template-columns:1fr;padding-block:24px 56px}
 .ringbox{width:min(78%,360px);order:-1;justify-self:center}
 .note{display:none}
 .logos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px;column-gap:16px}
 .logos .cap{grid-column:1/-1;max-width:none}
 .logos img{max-width:100%;height:auto!important}
 .logos .db{width:30px}.logos .bdf{width:92px}.logos .cariad{width:96px}.logos .air{width:88px}.logos .bahn{width:38px}
 .chapter .head,.trio,.tr-head,.formats,.aud,.steps,.about-panel,.focus-head,.contact .wrap,.feature,.cases{grid-template-columns:1fr}
 .phases{grid-template-columns:1fr}
 .viz{min-height:320px;order:-1}
 .viz svg{width:84%}.viz text{font-size:7.4px}
 .feature .txt{font-size:18px}
 .big5{flex-direction:column;align-items:flex-start;gap:22px}.big5 strong{font-size:88px;line-height:.95}.big5 span{max-width:none;padding-bottom:0}
 .pf{width:min(80%,320px)}
 .about-panel>div:last-child{order:-1}
 .pf-facts dt{font-size:32px}.pf-facts div{padding:16px}
 .row{grid-template-columns:1fr auto;gap:12px}.row .sec,.row p,.row h3{grid-column:1}.row .arr{grid-column:2;grid-row:1/span 3}
 .ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}
 .focus-copy{grid-template-columns:1fr}.focus-copy p:first-child{grid-row:auto}
}
@media (max-width:400px){.nw{white-space:normal}.chapter h2,.projects h2,.tr-head h2,.about h2,.focus h2,.contact h2{font-size:30px}.row h3{font-size:20px;hyphens:auto;overflow-wrap:break-word}.mail{font-size:15px}}
@media (max-width:360px){.pf-facts{grid-template-columns:1fr}.steps li{padding:14px 16px}.ftr-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .reveal{-webkit-mask:none;mask:none;animation:none}
 .rise,.hero::before,.sweep,.orbit .arc,.note .pt,.note b,.note small,.pos::before,.hero h1 .l>span,.live i,.viz .prog,.pf .a{animation:none}
 .orbit .arc{opacity:1}.note{animation:none;opacity:1}.note b{color:var(--ink)}.note small{opacity:1}
 .viz .prog{stroke-dasharray:270 360}
 .btn:active,.button:active{transform:none}
 .hdr .brand img{transition:none}
}