/* 38.5 AGENTUR.STUDIOS – Variante B (Claude-Design-Entwurf, 2026-11-04).
   Grundlage: 0daten/übergabe-04-11-26/03_WEBSITE/entwurf/*.dc.html – Werte 1:1.
   Ergänzt um die nicht entworfenen Seiten (Leistungen, News, Kontakt, Rechtliches)
   im selben System. */

@font-face{font-family:"Roboto Condensed";src:url("../fonts/roboto-condensed-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Condensed";src:url("../fonts/roboto-condensed-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Condensed";src:url("../fonts/roboto-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.heox-skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:#fff;color:#000;padding:12px 18px;font:700 15px/1 "Roboto Condensed",sans-serif}
.heox-skip-link:focus{top:16px}
.heox-main{display:block}
img{max-width:100%}
.s385{--or:#bf442c;--bl:#0a29af;--acc:#bf442c;--on-acc:#fff;min-height:100vh}

html{background:#000;scroll-behavior:smooth}
body{margin:0;background:#000}
a{color:inherit}a:hover{color:inherit}

/* ---------- Grundlagen ---------- */
.s385{container-type:inline-size;container-name:s;position:relative;background:#000;color:#fff;font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;--ease:cubic-bezier(.7,0,.2,1);--out:cubic-bezier(.2,.7,.2,1);--mute:rgba(255,255,255,.66);--line:rgba(255,255,255,.16);--lbl-gap:28px;--grad:linear-gradient(90deg in oklab,var(--or),var(--bl))}
.s385 *,.s385 *::before,.s385 *::after{box-sizing:border-box}
.s385 ::selection{background:var(--acc);color:var(--on-acc)}
.s385 a{text-decoration:none}
.s385 a:focus-visible,.s385 button:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.s385 :where(h1,h2,h3,p){margin:0}
.wrap{padding-inline:clamp(20px,4.4cqi,72px)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px)}
.ic{width:1em;height:1em;flex:none}
.lbl{display:flex;align-items:center;gap:14px;font-size:clamp(18px,1.45cqi,22px);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lbl i{width:1.87em;height:.95em;background:var(--grad);display:block;flex:none;transform-origin:left center;transition:transform 1.2s var(--out) .15s,opacity .8s ease .15s}
/* 38.5-Icon: die „385“ aus dem Logo als Maske mit Verlauf (James 2026-11-11, vorher Kringel) */
.lbl i,.ls-n i{-webkit-mask:url("../media/385/385-mask.svg") left center / contain no-repeat;mask:url("../media/385/385-mask.svg") left center / contain no-repeat}
.s385[data-live="1"] .lbl.rv:not([data-in="1"]) i,.s385[data-live="1"] .rv:not([data-in="1"]) .lbl i{transform:scale(.5);opacity:0}
.klist{list-style:none;margin:0;padding:0}
/* Aufzählung: kurzer Strich im Verlauf */
.klist li{position:relative;padding-left:1.35em}
.klist li::before{content:"";position:absolute;left:0;top:calc(.675em - 1px);width:.75em;height:2px;background:var(--grad)}
.h2{font-weight:700;font-size:clamp(44px,7.4cqi,124px);line-height:.9;letter-spacing:-.012em}
.txt{font-size:clamp(17px,1.32cqi,21px);line-height:1.55;font-weight:300}
/* Verlauf Orange → Blau als Textakzent */
/* Variante B: Schrift bleibt überall schwarz/weiß, Farbe nur als Hintergrund */
.acc-t,.w.acc,.claim .ln.acc span{color:inherit}

/* Reveal: nur aktiv, wenn die Seite wirklich scrollt */
.rv{transition:opacity 1s var(--out),transform 1.1s var(--out)}
.s385[data-live="1"] .rv:not([data-in="1"]){opacity:0;transform:translateY(48px)}

/* Wort-für-Wort-Verlauf beim Scrollen */
.w{transition:opacity .25s linear}
.s385[data-live="1"] .w{opacity:clamp(.17,calc((var(--p,1) * (var(--n) + 6) - var(--i)) / 6),1)}


/* Buttons: immer mit Unterstrich, Hover = Farbwischer */
.tl{display:inline-flex;align-items:center;gap:14px;font-size:clamp(18px,1.5cqi,24px);font-weight:700;letter-spacing:.02em;padding:8px 0;min-height:44px;position:relative}
.tl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.tl::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:1}
.tl .ic{transition:transform .5s var(--ease)}
.tl:hover::before,.tl:focus-visible::before{transform:scaleX(1)}
.tl:hover .ic{transform:translateX(8px)}
.tl.tl-l{font-size:clamp(22px,2.2cqi,34px);gap:18px}
.tl.tl-l::after,.tl.tl-l::before{height:3px}

/* ---------- Header ---------- */
.hdrw{position:sticky;top:0;height:0;z-index:60}
.hdr{position:absolute;top:0;left:0;right:0;transition:transform .6s var(--ease),background-color .4s ease}
.hdr-in{height:116px;display:flex;align-items:center;justify-content:space-between;transition:height .4s var(--ease)}
.hdr.is-solid,.hdr.is-hide{background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.is-solid .hdr-in,.hdr.is-hide .hdr-in{height:88px}
.hdr.is-hide{transform:translateY(-101%)}
.logo{display:block;line-height:0}
.logo img{height:68px;width:auto;display:block;transition:height .4s var(--ease)}
.hdr.is-solid .logo img{height:54px}
.nav{display:flex;align-items:center;gap:clamp(24px,3cqi,52px)}
.roll{display:block;overflow:hidden;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;padding-bottom:5px;position:relative}
.roll span{display:block;position:relative;transition:transform .5s var(--ease)}
.roll span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:#fff}
.roll:hover span{transform:translateY(-100%)}
.roll::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.roll.is-act::after{transform:scaleX(1)}
.roll.is-act span{color:#fff}
.burger{display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:#fff;font:700 14px/1 "Roboto Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:14px 0;min-height:44px;cursor:pointer}
.burger i{display:block;width:26px;height:10px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:2px;background:#fff;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i::before{top:0}.burger i::after{top:8px}
.hdr.is-menu .burger i::before{top:4px;transform:rotate(45deg)}
.hdr.is-menu .burger i::after{top:4px;transform:rotate(-45deg)}
.hdr.is-menu{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}

/* Ausklapp-Menü (Desktop + Mobil) */
.ov{display:flex;position:absolute;top:0;left:0;right:0;height:100vh;background:#000;z-index:-1;padding:clamp(120px,10cqi,150px) clamp(20px,4.4cqi,72px) clamp(32px,3cqi,48px);flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);pointer-events:none}
.ov.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.ov-nav{display:flex;flex-direction:column}
.ov-nav a{display:block;overflow:hidden;font-weight:700;font-size:min(7.2cqi,10vh);line-height:1.02;letter-spacing:-.01em;padding:6px 0 10px;transition:padding-left .6s var(--ease)}
.ov-nav a span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease),color .3s,background-size .6s var(--ease);background:var(--grad) left bottom / 0 5px no-repeat;padding-bottom:4px}
.ov.is-open .ov-nav a span{transform:none;transition-delay:calc(.25s + var(--d) * .07s),0s,0s}
.ov-nav a.is-act span,.ov-nav a:hover span{color:#fff;background-size:100% 5px}
.ov-nav a:hover{padding-left:1.4cqi}
.ov-foot{font-size:16px;line-height:1.6;color:var(--mute)}

/* ---------- Hero ---------- */
.hero{position:relative;height:clamp(640px,100vh,960px);overflow:hidden;background:#000;--mx:0;--my:0;--hp:0}
.slides{position:absolute;inset:0;animation:heroOpen 2.1s var(--ease) .1s both}
.slides-in{position:absolute;inset:-2%;transform:translate3d(calc(var(--mx) * -12px),calc(var(--my) * -8px + var(--hp) * 140px),0);transition:transform 1.4s var(--out)}
.slides-in > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.5) brightness(.55);animation:zoomOut 24s linear infinite}
/* gleicher Blau-Orange-Schimmer wie bei den Projekt-Kacheln */
.hero-fx{position:absolute;inset:0;background:linear-gradient(135deg in oklab,var(--or),var(--bl));mix-blend-mode:color;opacity:.38;pointer-events:none}
.slides-in > :nth-child(2){animation-name:zoomIn;animation-delay:6s}
.slides-in > :nth-child(3){animation-delay:12s}
.slides-in > :nth-child(4){animation-name:zoomIn;animation-delay:18s}
@keyframes heroOpen{from{clip-path:inset(12% 14% 22% 14%)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoomOut{0%{opacity:0;transform:scale(1.07)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes zoomIn{0%{opacity:0;transform:scale(1)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1.07)}100%{opacity:0;transform:scale(1.07)}}
.claim{position:absolute;left:0;right:0;bottom:150px;font-weight:700;text-transform:uppercase;font-size:calc(var(--cs) * 1cqi);line-height:.86;letter-spacing:-.018em;transform:translateY(calc(var(--hp) * -120px));opacity:calc(1 - var(--hp) * .9)}
.claim .ln{display:block;overflow:hidden;padding-bottom:.04em}
.claim .ln span{display:block;animation:lnUp 1.3s var(--ease) both;animation-delay:var(--d)}
.claim,.hb{z-index:2}
/* zarter Orange-Blau-Schleier am unteren Bildrand */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:var(--grad);opacity:.16;z-index:1;pointer-events:none;-webkit-mask:linear-gradient(to top,#000,transparent);mask:linear-gradient(to top,#000,transparent)}
@keyframes lnUp{from{transform:translateY(108%)}to{transform:none}}
.hb{position:absolute;left:0;right:0;bottom:40px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;animation:fadeUp 1.2s var(--out) 1.3s both}
.hb-txt{font-size:clamp(16px,1.3cqi,20px);line-height:1.45;color:rgba(255,255,255,.78);max-width:26em}
.hb-r{display:flex;align-items:center;gap:44px}
.prog{display:flex;gap:6px}
.prog i{display:block;width:44px;height:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:left;transform:scaleX(0);animation:pfill 24s linear infinite}
.prog i:nth-child(2)::after{animation-delay:6s}
.prog i:nth-child(3)::after{animation-delay:12s}
.prog i:nth-child(4)::after{animation-delay:18s}
@keyframes pfill{0%{transform:scaleX(0);opacity:1}25%{transform:scaleX(1);opacity:1}28%{transform:scaleX(1);opacity:0}100%{transform:scaleX(1);opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}}

/* ---------- Intro ---------- */
.intro{padding-block:clamp(110px,11cqi,190px) clamp(110px,11cqi,180px);position:relative;overflow:hidden;isolation:isolate}
.intro .lbl{grid-column:1 / span 11;padding:0 0 var(--lbl-gap)}
.intro-t{grid-column:1 / span 11;font-size:clamp(28px,3.55cqi,58px);line-height:1.17;font-weight:300;letter-spacing:-.005em}
.intro-t .w.acc{font-weight:400}
.intro-a{grid-column:1 / span 11;display:flex;gap:48px;margin-top:clamp(40px,4cqi,64px)}

/* ---------- Haltung (weiß) ---------- */
.white{background:#fff;color:#000;--mute:#555;--line:rgba(0,0,0,.14)}
.kraft{padding-block:clamp(100px,10cqi,180px) clamp(80px,8cqi,140px)}
/* Haltung + Was wir tun teilen sich einen Hintergrund, die Lichter laufen weich aus */
.wbox{position:relative;overflow:hidden;isolation:isolate}
.aur.wb i{width:58cqi}
.aur.wb i:nth-child(1){left:-16cqi;bottom:auto;top:-4cqi;animation-name:aur1wb}
@keyframes aur1wb{to{transform:translate(14cqi,-6cqi)}}
.aur.wb i:nth-child(2){right:-16cqi;top:-28cqi}
.kraft-t{font-weight:700;font-size:clamp(44px,6.6cqi,110px);line-height:.94;letter-spacing:-.015em;margin-top:var(--lbl-gap);max-width:15em}
.kraft-b{margin-top:clamp(48px,5cqi,84px)}
.kraft-b .txt{grid-column:7 / span 5;font-size:clamp(18px,1.45cqi,23px)}

/* ---------- Was wir tun ---------- */
.pil{padding-bottom:clamp(90px,9cqi,150px)}
.pil-h{display:flex;flex-direction:column;gap:var(--lbl-gap);padding-bottom:clamp(48px,5cqi,80px)}
.pil-h .h2{max-width:12em}
.row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px);align-items:center;padding-block:clamp(32px,3.2cqi,52px);isolation:isolate;cursor:default;transition:color .45s var(--ease)}
.row::before{content:"";position:absolute;inset:0 calc(clamp(20px,4.4cqi,72px) * -1);background:var(--grad);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.row:hover{color:var(--on-acc)}
.row:hover::before{transform:scaleY(1)}
.row-t{grid-column:1 / span 6;font-weight:700;font-size:clamp(40px,5.6cqi,92px);line-height:.95;letter-spacing:-.015em;transition:transform .6s var(--ease)}
.row:hover .row-t{transform:translateX(1.6cqi)}
.row-b{grid-column:7 / span 5;font-size:clamp(17px,1.3cqi,20px);line-height:1.55}
.row-ar{grid-column:12 / span 1;justify-self:end;font-size:30px;transform:rotate(-45deg);transition:transform .6s var(--ease)}
.row:hover .row-ar{transform:rotate(0)}
.pil-a{margin-top:clamp(40px,4cqi,64px)}

/* ---------- Arbeiten ---------- */
.works{padding-block:clamp(110px,11cqi,190px) clamp(90px,9cqi,150px);position:relative;overflow:hidden;isolation:isolate}
.aur.wk i:nth-child(1){left:auto;bottom:auto;right:-12cqi;top:-22cqi}
.aur.wk i:nth-child(2){right:auto;top:auto;left:-16cqi;bottom:-24cqi}
.works-h{align-items:end;margin-block:var(--lbl-gap) clamp(48px,5cqi,80px)}
.works-h .h2{grid-column:1 / span 7;font-size:clamp(56px,10cqi,160px)}
.works-h .side{grid-column:8 / span 5;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.works-h .side .txt{color:var(--mute)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tile{position:relative;aspect-ratio:4 / 3;background:#101010;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;color:#fff;transition:background-color .55s var(--ease),box-shadow .7s var(--ease);z-index:0}
.tile{isolation:isolate;background:#0d0d0d}
.tile:hover,.tile[data-on="1"]{box-shadow:0 0 56px -26px var(--pc);z-index:2}
/* wie Projekte-Seite: Projektbild, leichter Blau-Orange-Schimmer, Hover = Projektfarbe transparent */
.tile .p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.55);transform:scale(1.02);transition:filter .8s var(--ease),transform 1.4s var(--out);z-index:-3}
.tile .p-fx{position:absolute;inset:0;background:linear-gradient(135deg in oklab,var(--or),var(--bl));mix-blend-mode:color;opacity:.38;z-index:-2;transition:opacity .6s ease}
.tile .p-tint{position:absolute;inset:0;background:var(--pc);opacity:0;z-index:-1;transition:opacity .6s var(--ease)}
.tile:hover .p-img,.tile[data-on="1"] .p-img{filter:saturate(.9) brightness(.9);transform:scale(1.07)}
.tile:hover .p-fx,.tile[data-on="1"] .p-fx{opacity:0}
.tile:hover .p-tint,.tile[data-on="1"] .p-tint{opacity:.84}
.tile .t-logo{z-index:0}
.t-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .7s var(--out)}
.t-logo img{display:block;height:auto;max-height:52%;object-fit:contain}
.tile:hover .t-logo,.tile[data-on="1"] .t-logo{transform:scale(1.02)}
/* Branche unten links – wie auf der Projekte-Seite */
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));z-index:-1;pointer-events:none;transition:opacity .6s ease}
.tile:hover::after,.tile[data-on="1"]::after{opacity:0}
.t-br{position:absolute;left:22px;bottom:20px;font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:left}
.t-more{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .6s var(--out)}
.tile:hover .t-more,.tile[data-on="1"] .t-more{opacity:1;transform:none}
.works-a{margin-top:clamp(40px,4cqi,64px);display:flex;justify-content:flex-end}

/* ---------- Studios ---------- */
.studio{position:relative;height:clamp(620px,62cqi,940px);overflow:hidden}
.st-media{position:absolute;inset:0;clip-path:inset(calc((1 - var(--p,1)) * 9%) calc((1 - var(--p,1)) * 16%));transition:clip-path .15s linear}
.st-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:brightness(.5) saturate(.85);transform:scale(calc(1.22 - var(--p,1) * .22));transition:transform .15s linear}
.st-c{position:absolute;left:0;right:0;bottom:clamp(48px,5cqi,84px);align-items:end}
.st-c .lft{grid-column:1 / span 7}
.st-c .h2{margin-top:24px}
.st-c .rgt{grid-column:8 / span 5;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.st-top{position:absolute;top:clamp(40px,4cqi,64px);right:clamp(20px,4.4cqi,72px);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- News ---------- */
.news{padding-block:clamp(100px,10cqi,170px);position:relative;overflow:hidden;isolation:isolate}
.news-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block:var(--lbl-gap) clamp(40px,4cqi,64px)}
.news-h .h2{max-width:11em}
.nrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px);align-items:center;padding-block:clamp(26px,2.4cqi,38px)}
.nrow-d{grid-column:1 / span 2;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--mute)}
.nrow-t{grid-column:3 / span 9;font-size:clamp(22px,2.3cqi,38px);line-height:1.18;font-weight:400}
.nrow-t span{background:var(--grad) left bottom / 0 3px no-repeat;padding-bottom:2px;transition:background-size .6s var(--ease)}
.nrow:hover .nrow-t span,.nrow[data-on="1"] .nrow-t span{background-size:100% 3px}
.nrow-ar{grid-column:12 / span 1;justify-self:end;width:52px;height:52px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;transition:background-color .45s var(--ease),border-color .45s,color .45s}
.nrow:hover .nrow-ar,.nrow[data-on="1"] .nrow-ar{background:var(--grad);border-color:transparent;color:#fff}

/* ---------- CTA ---------- */
.cta{padding-block:clamp(120px,12cqi,200px) clamp(90px,9cqi,150px);position:relative;overflow:hidden;isolation:isolate}
/* Zwei weiche Lichter, Orange und Blau, die ineinander übergehen */
.aur{position:absolute;inset:0;z-index:-1;pointer-events:none}
.aur i{position:absolute;width:62cqi;aspect-ratio:1;border-radius:50%;filter:blur(110px);opacity:.2}
.aur i:nth-child(1){background:var(--or);left:-14cqi;bottom:-34cqi;animation:aur1 16s ease-in-out infinite alternate}
.aur i:nth-child(2){background:var(--bl);opacity:.34;right:-14cqi;top:-26cqi;animation:aur2 19s ease-in-out infinite alternate}
/* gespiegelte Lichter für Intro, auf Weiß sehr zart */
.aur.flip i:nth-child(1){left:auto;bottom:auto;right:-16cqi;top:-30cqi}
.aur.flip i:nth-child(2){right:auto;top:auto;left:-16cqi;bottom:-30cqi}
.white .aur i{opacity:.16;mix-blend-mode:multiply}
.white .aur i:nth-child(2){opacity:.12}
@keyframes aur1{to{transform:translate(16cqi,-10cqi)}}
@keyframes aur2{to{transform:translate(-18cqi,12cqi)}}
.cta-t{font-weight:700;font-size:10.4cqi;line-height:.9;letter-spacing:-.02em;margin-top:var(--lbl-gap)}
.cta-t span{display:block}
.cta-b{margin-top:clamp(48px,5cqi,80px);align-items:end}
.cta-b .txt{grid-column:1 / span 5;color:var(--mute)}
.cta-b .ct{grid-column:7 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:20px}

/* ---------- Footer ---------- */
.ft{position:relative;padding-top:clamp(56px,5cqi,84px);overflow:hidden}
.ft-g{row-gap:36px}
.ft-g > div{grid-column:auto}
.ft h3{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.ft p,.ft address{font-size:16px;line-height:1.65;font-style:normal}
.ft-cc{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left;transition:color .3s}
.ft-cc:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:4px}
.ft a{transition:color .3s}.ft a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:4px}
/* Logo so hoch wie die längste Textspalte (Social): oben bündig mit den Überschriften, unten mit „Facebook“ */
/* Logo + vier Textspalten gleichmäßig verteilt: zwischen allen Elementen derselbe Abstand */
.ft-g{display:flex;justify-content:space-between;align-items:flex-start;column-gap:32px}
.ft-logo a{display:block}.ft-logo a:hover{text-decoration:none}
.ft-logo img{display:block;height:126px;width:auto;max-width:none}
@container s (max-width:1100px){.ft-g{flex-wrap:wrap}.ft-g > div.ft-logo{flex:0 0 100%}.ft-logo img{height:88px}}
.ft-legal{margin-top:clamp(56px,6cqi,96px)}
.ft-legal{display:flex;justify-content:space-between;gap:16px;padding-block:24px 32px;font-size:13px;color:var(--mute)}
.ft-legal{align-items:flex-end}
.ft-c{display:flex;align-items:flex-end;gap:18px}
.ft-mb{display:block;height:60px;width:auto}


.tile:hover,.tile[data-on="1"]{background:var(--pc);box-shadow:0 0 56px -26px var(--pc);z-index:2}
/* ================= Projekte-Seite (Variante B) ================= */
.pintro{padding-block:clamp(150px,13cqi,220px) clamp(40px,4cqi,64px);position:relative;overflow:hidden;isolation:isolate}
.p-h1{font-weight:700;font-size:clamp(56px,10cqi,160px);line-height:.9;letter-spacing:-.015em;margin-top:var(--lbl-gap)}
.pintro .g12{margin-top:clamp(32px,3.2cqi,52px);align-items:end}
.pintro .txt{grid-column:1 / span 6;color:var(--mute)}
.pcount{grid-column:9 / span 4;justify-self:end;display:flex;align-items:baseline;gap:14px}
.pcount b{font-weight:700;font-size:clamp(64px,7.4cqi,118px);line-height:.85;letter-spacing:-.02em}
.pcount span{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pf{display:flex;flex-wrap:wrap;gap:4px clamp(28px,3.2cqi,52px);padding-block:8px 20px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3cqi,44px)}
.pf button{position:relative;background:none;border:0;color:var(--mute);font:700 clamp(15px,1.25cqi,19px)/1.3 "Roboto Condensed","Arial Narrow",sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:12px 0;min-height:44px;cursor:pointer;white-space:nowrap;transition:color .35s}
.pf button sup{font-size:10px;margin-left:5px;letter-spacing:.04em;opacity:.7}
.pf button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pf button:hover,.pf button.is-on{color:#fff}
.pf button.is-on::after{transform:scaleX(1)}
.pworks{padding-bottom:clamp(90px,9cqi,150px)}
/* gleichmäßiges Raster: Zellen 4:3, groß = 2×2, klein = 1×1 – lückenlos */
.pgrid{--cw:calc((100cqi - 2 * clamp(20px,4.4cqi,72px) - 6px) / 4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc(var(--cw) * .75);grid-auto-flow:row dense;gap:2px}
.ptile{position:relative;display:block;overflow:hidden;background:#0d0d0d;color:#fff;isolation:isolate;animation:pIn .8s var(--out) both}
@keyframes pIn{from{opacity:0;transform:translateY(24px)}}
.ptile.s-L{grid-column:span 2;grid-row:span 2}
.p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.6);transform:scale(1.02);transition:filter .8s var(--ease),transform 1.4s var(--out);z-index:-3}
/* ganz leichter Blau-Orange-Schimmer über dem Bild */
.p-fx{position:absolute;inset:0;background:linear-gradient(135deg in oklab,var(--or),var(--bl));mix-blend-mode:color;opacity:.38;z-index:-2;transition:opacity .6s ease}
/* Hover: Projektfarbe, leicht transparent, Bild schimmert durch */
.p-tint{position:absolute;inset:0;background:var(--pc);opacity:0;z-index:-1;transition:opacity .6s var(--ease)}
.ptile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));z-index:-1;pointer-events:none;transition:opacity .6s ease}
.ptile:hover .p-img,.ptile[data-on="1"] .p-img{filter:saturate(.9) brightness(.9);transform:scale(1.07)}
.ptile:hover .p-fx,.ptile[data-on="1"] .p-fx{opacity:0}
.ptile:hover .p-tint,.ptile[data-on="1"] .p-tint{opacity:.84}
.ptile:hover::after,.ptile[data-on="1"]::after{opacity:0}
.ptile .t-logo{z-index:0;transition:transform .7s var(--out)}
.ptile .t-logo img{width:var(--lw);max-height:42%}
.ptile.s-L .t-logo img{width:calc(var(--lw) * .62)}
.ptile:hover .t-logo,.ptile[data-on="1"] .t-logo{transform:scale(1.04)}
.p-meta{position:absolute;left:22px;right:76px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.p-meta b{align-self:flex-start;font-weight:700;font-size:clamp(17px,1.4cqi,22px);line-height:1.12;padding-bottom:3px;background:linear-gradient(#fff,#fff) left bottom / 0 2px no-repeat;transition:background-size .6s var(--ease)}
.ptile.s-L .p-meta b{font-size:clamp(22px,2.2cqi,34px)}
.p-meta small{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.p-meta i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .5s ease}
.ptile:hover .p-meta b,.ptile[data-on="1"] .p-meta b{background-size:100% 2px}
.ptile:hover .p-meta i,.ptile[data-on="1"] .p-meta i{max-height:2em;opacity:1}
.ptile.is-logo .p-meta b{display:none}
.p-go{position:absolute;right:20px;bottom:20px;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background-color .45s,border-color .45s,box-shadow .45s var(--ease),transform .6s var(--ease)}
.p-go path{transition:stroke-width .45s var(--ease)}
.ptile:hover .p-go,.ptile[data-on="1"] .p-go{border-color:#fff;box-shadow:inset 0 0 0 .6px #fff;transform:scale(1.1)}
.ptile:hover .p-go path,.ptile[data-on="1"] .p-go path{stroke-width:2.4}
/* ================= Projekt-Detailseite ================= */
.pd-hero{padding-block:clamp(140px,12cqi,200px) clamp(56px,5cqi,84px);position:relative;overflow:hidden;isolation:isolate}
.pd-back{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);min-height:44px;transition:color .3s}
.pd-back .ic{transition:transform .5s var(--ease)}
.pd-back:hover{color:#fff}
.pd-back:hover .ic{transform:translateX(-6px)}
.pd-hero .lbl{margin-top:clamp(28px,3cqi,48px)}
.pd-h1{font-weight:700;font-size:clamp(60px,10.4cqi,168px);line-height:.88;letter-spacing:-.02em;margin-top:var(--lbl-gap)}
.pd-claim{font-weight:300;font-size:clamp(26px,3cqi,48px);line-height:1.15;margin-top:clamp(18px,1.6cqi,28px);color:rgba(255,255,255,.86)}
.facts{margin-top:clamp(56px,5.5cqi,92px);border-top:1px solid var(--line);row-gap:28px}
.facts > div{grid-column:span 3;padding-top:22px}
.facts dt{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.facts dd{margin:0;font-size:clamp(17px,1.35cqi,21px);line-height:1.45}
.discs{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(32px,3cqi,48px)}
.discs span{position:relative;padding:9px 16px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;isolation:isolate}
.discs span::before{content:"";position:absolute;inset:0;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);z-index:-1}
.kv{position:relative;aspect-ratio:16 / 7;overflow:hidden}
.kv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p,1) * .14));transition:transform .15s linear}
.kv{clip-path:inset(0 calc((1 - var(--p,1)) * 8%));transition:clip-path .15s linear}
.ph{color:var(--mute);font-style:italic}
.stmt{padding-block:clamp(40px,4cqi,64px) clamp(90px,9cqi,150px)}
.stmt p{font-weight:300;font-size:clamp(30px,4.4cqi,70px);line-height:1.12;letter-spacing:-.01em;max-width:20em}
.svcs{padding-block:clamp(90px,9cqi,150px)}
.svc-g{row-gap:48px}
.svc{grid-column:span 3;padding-top:24px}
.svc h3{margin:0}
.svc .klist{margin-top:22px;display:flex;flex-direction:column;gap:10px;font-size:clamp(16px,1.25cqi,19px);line-height:1.35}
.work{padding-bottom:clamp(90px,9cqi,150px);position:relative;overflow:hidden;isolation:isolate;border-top:1px solid rgba(0,0,0,.08)}
.wk-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:clamp(90px,9cqi,150px) clamp(36px,3.4cqi,56px)}
.wk-h .h2{margin-top:var(--lbl-gap)}
.row-g{display:grid;gap:clamp(12px,1.6cqi,28px);margin-top:clamp(56px,6cqi,100px)}
.row-g:first-of-type{margin-top:0}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fig{margin:0}
.fig .im{position:relative;overflow:hidden;background:#ece9e4}
.fig .im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.fig:hover .im img{transform:scale(1.035)}
.fig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:16px;border-top:1px solid var(--line);margin-top:16px}
.fig figcaption b{font-weight:700;font-size:clamp(16px,1.3cqi,20px)}
.fig figcaption span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.a43 .im{aspect-ratio:4 / 3}.a34 .im{aspect-ratio:3 / 4}.a11 .im{aspect-ratio:1}
.brand{background:linear-gradient(120deg in oklab,color-mix(in oklab,var(--or) 9%,#fff),#fff 45%,#fff 55%,color-mix(in oklab,var(--bl) 9%,#fff));box-shadow:0 0 0 1px rgba(0,0,0,.06);color:#2b241c;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;aspect-ratio:21 / 8}
.brand .lg{display:flex;align-items:center;justify-content:center;padding:8%;border-right:1px solid rgba(0,0,0,.08);height:100%}
.brand .lg img{width:min(78%,420px);height:auto}
.brand .sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4cqi,22px);padding:0 9%}
.brand .sw div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b6157}
.brand .sw i{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--c)}
.res{padding-block:clamp(110px,11cqi,180px);position:relative;overflow:hidden;isolation:isolate}
.res .h2{margin-top:var(--lbl-gap);max-width:12em}
.kpis{margin-top:clamp(48px,5cqi,80px);row-gap:40px}
.kpi{grid-column:span 3;border-top:1px solid var(--line);padding-top:24px}
.kpi b{display:block;font-weight:700;font-size:clamp(52px,5.6cqi,92px);line-height:.9;letter-spacing:-.02em}
.kpi b em{font-style:normal;background:var(--grad) left bottom / 100% 3px no-repeat;padding-bottom:6px}
.kpi p{margin-top:18px;font-size:clamp(16px,1.25cqi,19px);line-height:1.45;color:var(--mute)}
.res .note{margin-top:28px;font-size:13px;color:var(--mute)}
.quote{margin-top:clamp(72px,7cqi,120px);grid-column:2 / span 10}
.quote blockquote{margin:0;font-weight:300;font-size:clamp(26px,2.9cqi,46px);line-height:1.2}
.quote blockquote::before{content:"„";display:block;font-weight:700;font-size:2.4em;line-height:.6;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.15em}
.quote cite{display:block;margin-top:24px;font-style:normal;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px);align-items:center;padding-block:clamp(56px,5cqi,84px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next .lbl{grid-column:1 / span 12;margin-bottom:var(--lbl-gap)}
.next-t{grid-column:1 / span 7;font-weight:700;font-size:clamp(40px,6.2cqi,100px);line-height:.92;letter-spacing:-.015em;transition:transform .6s var(--ease)}
.next:hover .next-t{transform:translateX(1.4cqi)}
.next-im{grid-column:8 / span 5;position:relative;aspect-ratio:4 / 3;overflow:hidden;isolation:isolate}
.next-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.6);transition:filter .8s var(--ease),transform 1.4s var(--out);z-index:-2}
.next-im::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg in oklab,var(--or),var(--bl));mix-blend-mode:color;opacity:.38;z-index:-1;transition:opacity .6s}
.next:hover .next-im img{filter:none;transform:scale(1.05)}
.next:hover .next-im::after{opacity:0}
.next-a{padding-block:clamp(36px,3.4cqi,56px) clamp(64px,7cqi,120px);display:flex;justify-content:flex-end}
/* ================= Kunden-Ebene: Corporate Design des Kunden ================= */
  .cd{--or:var(--k1);--bl:var(--k2);--grad:linear-gradient(90deg in oklab,var(--k1),color-mix(in oklab,var(--k1) 55%,var(--k2)))}
.pd-top{display:flex;justify-content:space-between;align-items:center;gap:24px}
.pd-cl{display:block;width:calc(clamp(96px,9cqi,150px) * var(--lf,1));height:auto}
.pd-h1 .k{color:var(--k1)}
.kv img{object-position:50% 28%}
/* Kampagnenprinzip – Band in Dunkelblau mit Kundenschrift */
.band{background:var(--k2);color:#fff;position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(100px,10cqi,170px);--line:rgba(255,255,255,.2);--mute:rgba(255,255,255,.74)}
.band::before{content:"";position:absolute;width:64cqi;aspect-ratio:1;border-radius:50%;background:var(--k1);filter:blur(130px);opacity:.3;right:-20cqi;top:-34cqi;z-index:-1}
.band-in{align-items:center;row-gap:64px}
.band-l{grid-column:1 / span 5}
.band-h{font-weight:700;font-size:clamp(40px,4.6cqi,76px);line-height:.95;letter-spacing:-.01em;margin-top:var(--lbl-gap)}
.band-l .txt{margin-top:22px;color:var(--mute);max-width:26em}
.band-rules{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line)}
.band-rules li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.band-rules span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.band-rules em{font-style:normal;font-weight:700;font-size:clamp(17px,1.35cqi,21px)}
.band-r{grid-column:7 / span 6;display:flex;flex-direction:column;align-items:flex-end}
.band-r.band-r-end{align-self:end}
.band-r-end .say-nav{margin-bottom:-12px}
/* Kampagnenzeilen in Original-Kundenschrift (Akko Bold, als Kontur) */
.say{width:100%;max-width:660px}
.say-v{display:grid}
.say-v svg{grid-area:1 / 1;display:block;width:100%;height:auto;fill:#fff;opacity:0;transform:translateY(5%);transition:opacity .55s var(--ease),transform .9s var(--out)}
.say-v svg.is-on{opacity:1;transform:none}
.say-s{display:block;width:100%;height:auto;fill:var(--k1)}
.say-lg{display:block;width:clamp(110px,10cqi,170px);height:auto;margin-top:clamp(32px,3.2cqi,52px)}
.say-nav{display:flex;gap:8px;margin-top:20px}
.say-nav button{position:relative;width:30px;height:44px;background:none;border:0;padding:0;cursor:pointer}
.say-nav button::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.28);transition:background-color .4s}
.say-nav button:hover::after{background:rgba(255,255,255,.6)}
.say-nav button.is-on::after{background:var(--k1)}
/* Leistungen: 4 Spalten inkl. Partner */
.svc-p{color:var(--mute)}
/* Einblicke nach Kanälen: nur Kanal-Titel */
/* Impressionen ohne Kanal-Überschriften (James 2026-11-12): Kanäle nur als unsichtbare h3 */
.work .row-g{margin-top:clamp(36px,3.6cqi,60px)}
.work .wk-h + h3 + .row-g{margin-top:0}
.a169 .im{aspect-ratio:16 / 9}.a32 .im{aspect-ratio:3 / 2}.abr .im{aspect-ratio:1819 / 1287}
.abr .im img{object-fit:contain}
/* Markenkarte */
.bcard{display:grid;grid-template-columns:1.05fr 1.5fr 1fr;min-height:clamp(300px,30cqi,470px);background:linear-gradient(120deg in oklab,color-mix(in oklab,var(--k1) 10%,#fff),#fff 48%,#fff 60%,color-mix(in oklab,var(--k2) 7%,#fff));box-shadow:0 0 0 1px rgba(0,0,0,.06);color:#181716}
.bcard > div{padding:clamp(28px,3cqi,52px);display:flex;flex-direction:column;justify-content:center}
.bcard > div + div{border-left:1px solid rgba(0,0,0,.08)}
.bc-lg{align-items:center}
.bc-lg img{width:min(80%,300px);height:auto;display:block}
.bc-h{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b6b6b;margin-bottom:20px}
.bc-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2cqi,18px)}
.bc-sw div{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.3}
.bc-sw i{display:block;aspect-ratio:1;background:var(--c);margin-bottom:8px}
.bc-sw b{font-weight:700;font-size:13px}
.bc-sw span{color:#6b6b6b;letter-spacing:.04em}
.bc-aa{display:block;width:clamp(96px,9cqi,150px);height:auto;fill:var(--k2)}
.bc-fn{margin-top:18px;font-size:14px;line-height:1.5;color:#4a4a4a}
.bc-fn b{display:block;font-weight:700;font-size:17px;color:#181716}
.bc-fn + .bc-fn{margin-top:10px}
.bc-fn.is-h b{font-size:clamp(19px,1.5cqi,23px);line-height:1.15;margin-bottom:2px}
.bc-fn.is-s b{font-size:15px}
.bc-fn.is-t b{font-weight:300}
/* ---------- Mobil ---------- */
@container s (max-width: 760px){
  .wrap{padding-inline:20px}
  .hdr-in{height:88px}
  .hdr.is-solid .hdr-in,.hdr.is-hide .hdr-in{height:72px}
  .logo img{height:48px}
  .hdr.is-solid .logo img{height:42px}
  .ov{padding:120px 20px 32px}
  .ov-nav a{font-size:15.5cqi}
  .ov-nav a:hover{padding-left:0}
  .hero{height:clamp(600px,100vh,800px)}
  .claim{bottom:190px;font-size:calc(var(--csm) * 1cqi)}
  .hb{flex-direction:column;align-items:stretch;bottom:28px;gap:22px}
  .hb-r{justify-content:space-between;gap:16px}
  .prog i{width:30px}
  .intro .lbl,.intro-t,.intro-a{grid-column:1 / -1}
  .intro .lbl{padding:0 0 var(--lbl-gap)}
  .intro-t{font-size:7.4cqi;line-height:1.22}
  .intro-a{flex-direction:column;align-items:flex-start;gap:12px}
  .kraft-t{font-size:11.6cqi}
  .kraft-b .txt{grid-column:1 / -1}
  .news-h{flex-direction:column;align-items:flex-start}
  .row{row-gap:14px;padding-block:28px}
  .row-t{grid-column:1 / span 10;font-size:11cqi}
  .row-ar{grid-column:11 / span 2;font-size:22px}
  .row-b{grid-column:1 / -1;font-size:17px}
  .row::before{inset:0 -20px}
  .works-h .h2,.works-h .side{grid-column:1 / -1}
  .works-h .h2{font-size:17cqi}
  .works-h .side{margin-top:24px}
  .tiles{grid-template-columns:minmax(0,1fr);gap:2px}
  .t-br{left:16px;bottom:14px;font-size:11px}
  .tile{aspect-ratio:16 / 10}
  .works-a{justify-content:flex-start}
  .studio{height:680px}
  .st-c .lft,.st-c .rgt{grid-column:1 / -1}
  .st-c .rgt{margin-top:24px}
  .st-c .h2{font-size:13cqi}
  .nrow{row-gap:10px}
  .nrow-d{grid-column:1 / -1}
  .nrow-t{grid-column:1 / span 10;font-size:6.2cqi}
  .nrow-ar{grid-column:11 / span 2;width:44px;height:44px}
  .cta-t{font-size:15.4cqi}
  .cta-b .txt,.cta-b .ct{grid-column:1 / -1}
  .cta-b .ct{margin-top:36px}
  .tl.tl-l{font-size:6.2cqi}
  .ft-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-g > div{grid-column:auto}
  .ft-g > div.ft-logo{grid-column:1 / -1}
  .ft-logo img{height:auto;width:120px}
  .ft-legal{flex-direction:column;align-items:flex-start}
  .ft-c{flex-direction:column;align-items:flex-start;gap:16px}
  /* Lichter mobil: größer und weniger weich gezeichnet, sonst verschwinden sie auf 390 px */
  .aur i,.aur.wb i{width:125cqi;filter:blur(64px)}
  .aur i:nth-child(1){left:-40cqi;bottom:-50cqi}
  .aur i:nth-child(2){right:-40cqi;top:-45cqi}
  .aur.flip i:nth-child(1),.aur.wk i:nth-child(1){left:auto;bottom:auto;right:-40cqi;top:-45cqi}
  .aur.flip i:nth-child(2),.aur.wk i:nth-child(2){right:auto;top:auto;left:-40cqi;bottom:-50cqi}
  .aur.wb i:nth-child(1){left:-45cqi;bottom:auto;top:28cqi}
  .aur.wb i:nth-child(2){right:-40cqi;top:-40cqi}
  .white .aur i{opacity:.2}
  .white .aur i:nth-child(2){opacity:.16}
  .pintro{padding-top:120px}
  .p-h1{font-size:17cqi}
  .pintro .txt,.pcount{grid-column:1 / -1}
  .pcount{justify-self:start;margin-top:28px}
  .pf{flex-wrap:nowrap;overflow-x:auto;gap:24px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .pf::-webkit-scrollbar{display:none}
  .pgrid{--cw:calc((100cqi - 40px - 2px) / 2);grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-meta{left:12px;right:46px;bottom:12px;gap:3px}
  .p-meta b{font-size:15px}
  .ptile.s-L .p-meta b{font-size:21px}
  .p-meta small{font-size:9.5px;letter-spacing:.1em}
  .p-meta i{display:none}
  .p-go{right:10px;bottom:10px;width:30px;height:30px;font-size:13px}
  .ptile .t-logo img{width:calc(var(--lw) * 1.3);max-height:46%}
  .ptile.s-L .t-logo img{width:calc(var(--lw) * .8)}
  .pd-hero{padding-top:110px}
  .pd-h1{font-size:15.4cqi}
  .pd-claim{font-size:7cqi}
  .facts > div{grid-column:span 6}
  .kv{aspect-ratio:4 / 3}
  .stmt p{font-size:7.4cqi}
  .svc{grid-column:span 6}
  .wk-h{flex-direction:column;align-items:flex-start}
  .r2{grid-template-columns:minmax(0,1fr)}
  .r3,.r4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .r3::-webkit-scrollbar,.r4::-webkit-scrollbar{display:none}
  .r3 .fig{flex:0 0 78%;scroll-snap-align:start}
  .r4 .fig{flex:0 0 78%;scroll-snap-align:start}
  .brand{grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
  .brand .lg{border-right:0;border-bottom:1px solid rgba(0,0,0,.08);padding:40px 12%}
  .brand .sw{padding:32px 8% 36px}
  .kpi{grid-column:span 6}
  .kpi b{font-size:11cqi}
  .quote{grid-column:1 / -1}
  .next-t,.next-im{grid-column:1 / -1}
  .next-im{margin-top:28px}
  .fig figcaption{flex-direction:column;gap:6px}
  .pd-cl{width:calc(84px * min(var(--lf,1), 1.8))}
  .band-l,.band-r{grid-column:1 / -1}
  .say{max-width:100%}
  .band-rules em{font-size:16px}
  .bcard{grid-template-columns:minmax(0,1fr)}
  .bcard > div + div{border-left:0;border-top:1px solid rgba(0,0,0,.08)}
  .bc-lg{padding-block:44px !important}
}

@media (prefers-reduced-motion: reduce){
  .s385 *,.s385 *::before,.s385 *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .s385[data-live="1"] .w{opacity:1}
}

/* ================= Ergänzte Seiten (im System der Variante B abgeleitet) ================= */

/* Seitenkopf für Unterseiten (wie Projekte-Intro) */
.pintro .lead{grid-column:1 / span 8;font-size:clamp(24px,2.6cqi,42px);line-height:1.22;font-weight:300;color:#fff}
.pintro.white .lead{color:#000}

/* Leistungen: Bereiche als große Zeilen mit Kringel-Listen */
.ls{padding-bottom:clamp(90px,9cqi,150px)}
.ls .rows{margin-top:0}
.ls-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px);row-gap:28px;padding-block:clamp(44px,4.4cqi,72px);isolation:isolate;transition:color .45s var(--ease)}
/* Gliederung über die Hover-Fläche (wie „Was wir tun“ auf der Startseite) */
.ls-row::before,.person::before{content:"";position:absolute;inset:0 calc(clamp(20px,4.4cqi,72px) * -1);background:var(--grad);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.ls-row:hover,.person:hover{color:#fff}
.ls-row:hover::before,.person:hover::before{transform:scaleY(1)}
.ls-row .klist li::before,.ls-n i{transition:background-color .45s var(--ease)}
.ls-row:hover .klist li::before,.ls-row:hover .ls-n i{background:#fff}
/* Icon mittig zur ersten Zeile des Bereichstitels */
.ls-n{grid-column:1 / span 1;display:flex;align-items:center;height:calc(clamp(40px,5.6cqi,92px) * .95);padding-top:.5cqi}
.ls-n i{display:block;width:clamp(40px,3.9cqi,62px);aspect-ratio:422 / 214;background:var(--grad)}
.ls-t{grid-column:2 / span 5;font-weight:700;font-size:clamp(40px,5.6cqi,92px);line-height:.95;letter-spacing:-.015em}
.ls-b{grid-column:7 / span 6;display:flex;flex-direction:column;gap:clamp(24px,2.4cqi,36px)}
.ls-b .txt + .txt{margin-top:-8px}
.ls-b .klist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(16px,2cqi,32px);font-size:clamp(16px,1.25cqi,19px);line-height:1.35;font-weight:400}
.studio .txt{color:rgba(255,255,255,.8);max-width:30em}
/* Jobs (abgeleitet, James 2026-11-13): Stellen als Zeilen wie „Was wir tun“ */
.jobs{padding-bottom:clamp(90px,9cqi,150px)}
.jobs .rows{margin-top:0}
.jobs .row-t{font-size:clamp(34px,4.6cqi,76px)}
.job-teaser{font-size:clamp(22px,2cqi,32px);line-height:1.3;font-weight:400}
@container s (max-width:760px){.jobs .row-t{font-size:9.6cqi}}
/* FAQ (abgeleitet, James 2026-11-12): Gruppen mit Label links, Fragen als <details> rechts, keine Linien, Hover-Fläche im Verlauf */
.fq{padding-bottom:clamp(90px,9cqi,150px)}
.fq-g{row-gap:20px;padding-block:clamp(36px,3.6cqi,60px)}
.fq-g > .lbl{grid-column:1 / span 4;align-self:start;padding-top:clamp(22px,2cqi,32px)}
.fq-l{grid-column:5 / span 8}
.fq-i summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,1.7cqi,28px) 0;font-weight:700;font-size:clamp(21px,2cqi,32px);line-height:1.15;letter-spacing:-.005em;cursor:pointer;list-style:none;isolation:isolate;transition:color .45s var(--ease)}
.fq-i summary::-webkit-details-marker{display:none}
.fq-i summary::before{content:"";position:absolute;inset:0 calc(clamp(12px,1.6cqi,28px) * -1);background:var(--grad);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.fq-i summary:hover::before,.fq-i summary:focus-visible::before{transform:scaleY(1)}
.fq-i summary:focus-visible{outline:0}
.fq-i summary i{position:relative;flex:none;width:22px;height:22px;transition:transform .5s var(--ease)}
.fq-i summary i::before,.fq-i summary i::after{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:currentColor}
.fq-i summary i::after{transform:rotate(90deg)}
.fq-i[open] summary i{transform:rotate(45deg)}
.fq-a{max-width:38em;padding:4px 0 clamp(22px,2.2cqi,36px);color:var(--mute)}
.fq-a > * + *{margin-top:.9em}
.fq-a a{color:#fff;background:var(--grad) left bottom / 100% 2px no-repeat;padding-bottom:2px}
.fq-a ul{list-style:none;padding:0}
.fq-a ul li{position:relative;padding-left:1.35em}
.fq-a ul li + li{margin-top:.5em}
.fq-a ul li::before{content:"";position:absolute;left:0;top:calc(.775em - 1px);width:.75em;height:2px;background:var(--grad)}
@container s (max-width:760px){
  .fq-g > .lbl,.fq-l{grid-column:1 / -1}
  .fq-g > .lbl{padding-top:0}
  .fq-i summary{font-size:5.6cqi;gap:16px}
  .fq-i summary::before{inset:0 -20px}
  .fq-i summary i{width:18px;height:18px}
  .fq-i summary i::before,.fq-i summary i::after{top:8px}
}

/* Arbeitsweise-Verweis bzw. Textabschnitte (Fließtext-Blöcke) */
.tb{padding-block:clamp(90px,9cqi,150px);position:relative;overflow:hidden;isolation:isolate}
.tb-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px);row-gap:20px;padding-block:clamp(36px,3.6cqi,60px);border-top:1px solid var(--line)}
.tb-row h2{grid-column:1 / span 5;font-weight:700;font-size:clamp(28px,2.6cqi,42px);line-height:1}
.tb-row .prose{grid-column:7 / span 6}

/* Fließtext (News-Beitrag, Rechtliches, Abschnitte) */
.prose{font-size:clamp(17px,1.32cqi,21px);line-height:1.6;font-weight:300}
.prose > * + *{margin-top:1.1em}
.prose h2{font-weight:700;font-size:clamp(26px,2.4cqi,38px);line-height:1.05;letter-spacing:-.01em;margin-top:1.8em}
.prose h3{font-weight:700;font-size:clamp(20px,1.7cqi,26px);line-height:1.15;margin-top:1.6em}
.prose strong,.prose b{font-weight:700}
.prose a{background:var(--grad) left bottom / 100% 2px no-repeat;padding-bottom:2px}
.prose a.tl{background:none;padding-bottom:8px}
.prose .prose-dl{margin-top:2.2em}
.prose ul{list-style:none;padding:0}
.prose ul li{position:relative;padding-left:1.6em}
.prose ul li + li{margin-top:.4em}
.prose ul li::before{content:"";position:absolute;left:0;top:calc(.8em - 1px);width:.75em;height:2px;background:var(--grad)}
.prose dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 28px;border-top:1px solid var(--line);padding-top:24px}
.prose dt{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:.35em}
.prose dd{margin:0}

/* News-Beitrag */
.art{padding-block:clamp(140px,12cqi,200px) clamp(90px,9cqi,150px);position:relative;overflow:hidden;isolation:isolate}
.art .pd-top + .lbl{margin-top:clamp(28px,3cqi,48px)}
.art-h1{font-weight:700;font-size:clamp(40px,5.4cqi,88px);line-height:.95;letter-spacing:-.015em;margin-top:var(--lbl-gap);max-width:16em}
.art-meta{margin-top:clamp(24px,2.4cqi,36px);font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--mute)}
.art-body{margin-top:clamp(56px,5.5cqi,92px);border-top:1px solid var(--line);padding-top:clamp(40px,4cqi,64px)}
.art-body .prose{grid-column:4 / span 7}
.art-body .prose > p:first-child{font-size:clamp(22px,2cqi,32px);line-height:1.3}
.art-col{grid-column:3 / span 8}
.t-name{font-weight:700;font-size:clamp(24px,2.4cqi,38px);line-height:1;padding:0 12%;text-align:center}
.art-nav{margin-top:clamp(56px,5.5cqi,92px);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* Kontakt */
.kt{padding-block:clamp(150px,13cqi,220px) clamp(90px,9cqi,150px);position:relative;overflow:hidden;isolation:isolate}
.kt .cta-t{font-size:clamp(56px,10.4cqi,168px)}
.kt-b{margin-top:clamp(48px,5cqi,80px);align-items:end;row-gap:40px}
.kt-b .txt{grid-column:1 / span 5}
.kt-b address{font-style:normal;color:var(--mute);margin-top:18px}
.kt-b .ct{grid-column:7 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.team{padding-block:clamp(100px,10cqi,170px);position:relative;overflow:hidden;isolation:isolate}
.team .h2{margin-top:var(--lbl-gap);max-width:12em}
.team-l{margin-top:clamp(48px,5cqi,80px)}
.person{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6cqi,28px);row-gap:10px;align-items:baseline;padding-block:clamp(26px,2.6cqi,40px);isolation:isolate;transition:color .45s var(--ease)}
.person h3{grid-column:1 / span 5;font-weight:700;font-size:clamp(30px,3.4cqi,56px);line-height:1;letter-spacing:-.01em}
.person .role{grid-column:6 / span 3;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.person .pc{grid-column:9 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:clamp(17px,1.32cqi,21px)}
.person .pc a{background:var(--grad) left bottom / 0 2px no-repeat;padding-bottom:2px;transition:background-size .6s var(--ease)}
.person .pc a:hover{background-size:100% 2px}
.person .role{transition:color .45s var(--ease)}
.person:hover .role{color:#fff}
.person:hover .pc a{background-image:linear-gradient(#fff,#fff)}
.wof{padding-block:clamp(100px,10cqi,170px);position:relative;overflow:hidden;isolation:isolate}
.wof-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-block:var(--lbl-gap) clamp(40px,4cqi,64px)}
.wof-h .txt{max-width:28em;color:var(--mute)}
.wof-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.wof-g figure{margin:0;position:relative;aspect-ratio:3 / 4;overflow:hidden;background:#0d0d0d}
.wof-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--out)}
.wof-g figure:hover img{transform:scale(1.04)}
.wof-g figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s var(--out)}
.wof-g figure:hover figcaption,.wof-g figure[data-on="1"] figcaption{opacity:1;transform:none}

/* Fehlerseite */
.err{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding-block:160px 90px;position:relative;overflow:hidden;isolation:isolate}

/* Video in Einblicken / Key Visual */
.fig .im video,.kv video{display:block;width:100%;height:100%;object-fit:cover}
.kv video{position:absolute;inset:0;transform:scale(calc(1.14 - var(--p,1) * .14));transition:transform .15s linear}
.a219 .im{aspect-ratio:21 / 9}
.r1{grid-template-columns:minmax(0,1fr)}
.pd-cl.has-bg{padding:clamp(10px,1cqi,16px);background:var(--lbg)}
.bc-lg.has-bg img{padding:6%;background:var(--lbg)}
.bc-fonts .bc-fn:first-of-type{margin-top:0}
.bc-aa-img{display:block;width:clamp(96px,9cqi,150px);height:auto;margin-bottom:6px}
.bc-sw.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:60%}
.bc-sw.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bcard.no-type{grid-template-columns:1.05fr 2.5fr}
.band-media{width:100%;display:block}
.band-media img{display:block;width:100%;height:auto}

@container s (max-width: 760px){
  .pintro .lead{grid-column:1 / -1;font-size:7cqi}
  .ls-n{grid-column:1 / -1;height:auto;padding-top:0}
  .ls-t{grid-column:1 / -1;font-size:12cqi}
  .ls-b{grid-column:1 / -1}
  .ls-b .klist{grid-template-columns:minmax(0,1fr)}
  .tb-row h2,.tb-row .prose{grid-column:1 / -1}
  .art-h1{font-size:10.4cqi}
  .art-body .prose,.art-col{grid-column:1 / -1}
  .prose dl{grid-template-columns:minmax(0,1fr)}
  .prose dt{padding-top:12px}
  .kt .cta-t{font-size:13.2cqi}
  .kt-b .txt,.kt-b .ct{grid-column:1 / -1}
  .person h3,.person .role,.person .pc{grid-column:1 / -1}
  .person h3{font-size:9cqi}
  .wof-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wof-g figcaption{opacity:1;transform:none;font-size:10px;padding:28px 10px 10px}
  .bc-sw.n2{max-width:none}
}

/* Band-Typ „zeilen" (wechselnde Kampagnenzeilen als Bild oder Text) */
.say-z .say-v > *{grid-area:1 / 1;display:block;margin:0;opacity:0;transform:translateY(5%);transition:opacity .55s var(--ease),transform .9s var(--out)}
.say-z .say-v > .is-on{opacity:1;transform:none}
.say-z .say-v img{width:100%;height:auto;max-height:clamp(120px,14cqi,220px);object-fit:contain;object-position:right center}
.say-z .say-v p{font-weight:700;font-size:clamp(40px,5.2cqi,84px);line-height:.95;letter-spacing:-.01em;text-align:right}
@container s (max-width: 760px){
  .say-z .say-v p{text-align:left;font-size:11cqi}
  .say-z .say-v img{object-position:left center}
}

/* Wall of Fame: 3 pro Reihe (Desktop), großzügige Fugen (James 2026-11-04) */
.wof-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4cqi,40px)}
.wof-g figure > a{position:absolute;inset:0;display:block;cursor:zoom-in}
.wof-g figure > a picture{display:contents}
.wof-g figcaption{pointer-events:none}

/* Lightbox (a[data-lb] innerhalb [data-lb-group]) */
.lb{position:fixed;inset:0;z-index:100;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.96);color:#fff;font-family:"Roboto Condensed","Arial Narrow",sans-serif;display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:opacity .4s ease}
.lb[open]{opacity:1}
.lb:not([open]){display:none}
.lb::backdrop{background:transparent}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,4.4vw,72px)}
.lb-count{font-size:13px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.66)}
.lb-close{display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:#fff;font:700 14px/1 "Roboto Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:14px 0;min-height:44px;cursor:pointer}
.lb-close i{display:block;width:22px;height:22px;position:relative}
.lb-close i::before,.lb-close i::after{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:#fff;transform:rotate(45deg)}
.lb-close i::after{transform:rotate(-45deg)}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(64px,7vw,120px)}
.lb-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;transition:opacity .35s ease}
.lb-stage img.is-loading{opacity:0}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:background-color .45s,border-color .45s}
.lb-nav:hover,.lb-nav:focus-visible{background:linear-gradient(90deg in oklab,#bf442c,#0a29af);border-color:transparent}
.lb-prev{left:clamp(8px,2vw,40px)}.lb-prev .ic{transform:rotate(180deg)}
.lb-next{right:clamp(8px,2vw,40px)}
.lb-cap{padding:18px clamp(20px,4.4vw,72px) 28px;text-align:center;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lb button:focus-visible{outline:2px solid #bf442c;outline-offset:4px}
@media (max-width: 760px){
  .lb-stage{padding:0 12px}
  .lb-nav{top:auto;bottom:-64px;transform:none;width:44px;height:44px}
  .lb-cap{padding-bottom:84px}
}
@media (prefers-reduced-motion: reduce){.lb,.lb-stage img{transition:none}}
@container s (max-width: 760px){
  .wof-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* Trennstriche nur, wo sie gliedern (James 2026-11-04): Listen-Zeilen
   (Was wir tun, News, Leistungen, Team, Band-Regeln) behalten ihre Linien;
   Bildunterschriften, Kanal-Titel, Eckdaten, Leistungsgruppen,
   Nächstes Projekt, Karte und Textkörper kommen ohne aus. */
.facts{border-top:0}
.facts > div{padding-top:0}
.svc{padding-top:0}
.fig figcaption{border-top:0;padding-top:0;margin-top:14px}
.fig figcaption.visually-hidden{margin:-1px;padding:0}
.next{border-top:0;border-bottom:0}
.work{border-top:0}
.art-body{border-top:0}
.prose dl{border-top:0;padding-top:0}

/* Markenkarte: Unterschrift im selben Abstand wie bei den Bildern */
.fig:has(> .bcard){gap:0}

/* Einblicke: Reihe mit gemischten Formaten (Spalten nach Seitenverhältnis) */
.row-g.mix{grid-template-columns:var(--cols)}
@container s (max-width: 760px){
  .row-g.mix.r2{grid-template-columns:minmax(0,1fr)}
}

/* Band „zeilen": alle Bildzeilen in derselben Box → gleiche Schriftgröße */
.say-z[style*="--zr"] .say-v img{aspect-ratio:var(--zr);height:auto}

/* Einblicke: Teilprojekt-Abschnitt (z. B. ElferCoaster) */
.ab-h{padding-top:clamp(120px,12cqi,200px);align-items:center}
.ab-t{max-width:52ch;margin-top:clamp(14px,1.4cqi,22px);font-size:clamp(17px,1.35cqi,21px);line-height:1.5;color:var(--mute)}
.ab-lg{display:block;width:clamp(140px,14cqi,240px);height:auto;flex:none}
@container s (max-width: 760px){
  .ab-h{align-items:flex-start}
  .ab-lg{width:120px;margin-top:4px}
}

/* Projekt-Eckdaten: gleiche Abstände zwischen den Angaben statt fester Spalten
   (sonst wirkt der Abstand nach kurzen Werten wie „Bergbahnen" zu groß). */
.facts{display:flex;flex-wrap:wrap;column-gap:clamp(40px,5.2cqi,96px)}
.facts > div{flex:0 1 auto}
@container s (max-width: 760px){
  .facts{display:grid;column-gap:20px}
}

/* Projekte ohne Einblicke: Bilder im eigenen Format, nicht angeschnitten */
.anat .im{aspect-ratio:var(--ar)}

/* Reihen ohne Unterschrift dazwischen: gleicher Abstand vertikal wie horizontal */
.work .row-g.tight{margin-top:clamp(12px,1.6cqi,28px)}

/* Nächstes Projekt: dieselbe Kachel wie in der Übersicht */
.next-tile{grid-column:8 / span 5}
.next-tile .ptile{aspect-ratio:4 / 3;animation:none}
a.next-t{color:inherit;text-decoration:none}
a.next-t:hover{transform:translateX(1.4cqi)}
@container s (max-width: 760px){
  .next-tile{grid-column:1 / -1;margin-top:28px}
}

/* Projekt-H1: lange Einzelwörter passen in eine Zeile (Werte aus case.php) */
.pd-h1[style*="--hd"]{font-size:min(clamp(60px,10.4cqi,168px),calc(var(--hd) * 1cqi))}
@container s (max-width: 760px){
  .pd-h1[style*="--hm"]{font-size:calc(var(--hm) * 1cqi)}
}

/* Band „zeilen" mit runden Stempeln/Buttons: größer ausspielen */
.say-z.sq .say-v img{max-height:clamp(170px,18cqi,280px)}
/* Scroll-Animation (ALIX): Bühne mit zwei Ebenen, Positionen in % der Bühne */
.sa-st{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--sa-bg,#161a1d);--sa-m:0}
.sa-l{position:absolute;display:block;height:auto;max-width:none;will-change:transform}
.sa-a{left:10.33%;top:17.81%;width:35.08%}
.sa-b{left:54.58%;top:29.12%;width:35.08%}
@container s (max-width:760px){.sa-st{aspect-ratio:3 / 4;--sa-m:1}.sa-a{left:18%;top:6.9%;width:64%}.sa-b{left:18%;top:60.96%;width:64%}}

/* Ton-Schalter für Videos mit Ton (startet stumm) */
.snd{position:absolute;right:clamp(10px,1.2cqi,18px);bottom:clamp(10px,1.2cqi,18px);z-index:2;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;color:#fff;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;isolation:isolate;overflow:hidden}
.snd::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:0;transition:opacity .35s var(--out)}
.snd:hover::before,.snd:focus-visible::before{opacity:1}
.snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.snd .snd-on{display:none}
.snd[aria-pressed="true"] .snd-on{display:inline}
.snd[aria-pressed="true"] .snd-off{display:none}
/* Key Visual 16:9 (Video ohne Anschnitt, auch mobil) */
.kv.k169{aspect-ratio:16 / 9}
@container s (max-width:760px){.kv.k169{aspect-ratio:16 / 9}}

/* Cookie-Banner (heox/kirby-cookiebanner, cookieconsent v3) im Stil der Variante B:
   schwarz, eckig, Roboto Condensed, Verlauf nur als Hover-Fläche. Steht außerhalb von .s385. */
#cc-main{--cc-font-family:"Roboto Condensed","Arial Narrow",sans-serif;--cc-modal-border-radius:0;--cc-btn-border-radius:0;--cc-pm-toggle-border-radius:0;
  --cc-bg:#000;--cc-primary-color:#fff;--cc-secondary-color:rgba(255,255,255,.72);--cc-link-color:#fff;
  --cc-btn-primary-bg:#fff;--cc-btn-primary-color:#000;--cc-btn-primary-border-color:#fff;--cc-btn-primary-hover-bg:#fff;--cc-btn-primary-hover-color:#fff;--cc-btn-primary-hover-border-color:transparent;
  --cc-btn-secondary-bg:transparent;--cc-btn-secondary-color:#fff;--cc-btn-secondary-border-color:rgba(255,255,255,.4);--cc-btn-secondary-hover-bg:transparent;--cc-btn-secondary-hover-color:#fff;--cc-btn-secondary-hover-border-color:#fff;
  --cc-separator-border-color:rgba(255,255,255,.16);--cc-toggle-on-bg:#fff;--cc-toggle-off-bg:rgba(255,255,255,.3);--cc-toggle-on-knob-bg:#000;--cc-toggle-off-knob-bg:#000;--cc-toggle-enabled-icon-color:#fff;--cc-toggle-disabled-icon-color:#000;
  --cc-toggle-readonly-bg:rgba(255,255,255,.3);--cc-toggle-readonly-knob-bg:#000;--cc-toggle-readonly-knob-icon-color:rgba(255,255,255,.6);
  --cc-cookie-category-block-bg:#161616;--cc-cookie-category-block-border:#161616;--cc-cookie-category-block-hover-bg:#202020;--cc-cookie-category-block-hover-border:#202020;--cc-cookie-category-expanded-block-hover-bg:#202020;
  --cc-overlay-bg:rgba(0,0,0,.7);--cc-footer-bg:#000;--cc-footer-color:rgba(255,255,255,.72);--cc-footer-border-color:rgba(255,255,255,.16)}
#cc-main .cm,#cc-main .pm{border:1px solid rgba(255,255,255,.22);box-shadow:none;font-weight:300}
#cc-main .cm__title,#cc-main .pm__title,#cc-main .pm__section-title{font-weight:700;letter-spacing:0}
#cc-main .cm__btn,#cc-main .pm__btn{font-weight:700;letter-spacing:.04em;background-image:none;transition:background-color .3s,color .3s,border-color .3s}
#cc-main .cm__btn:not(.cm__btn--secondary):hover,#cc-main .pm__btn:not(.pm__btn--secondary):hover{background:linear-gradient(90deg in oklab,#bf442c,#0a29af);color:#fff;border-color:transparent}
#cc-main a{text-decoration:underline;text-underline-offset:3px}

/* Überschriften in Groß-/Kleinschreibung (James 2026-11-13, löst die Versalien
   vom selben Tag ab) – auch der Claim der Startseite. Lange Wörter trennen nur
   an weichen Trennzeichen (U+00AD) im Feld. */
.claim{text-transform:none}
h1.p-h1,h1.art-h1,h1.cta-t{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}