/* ankestern interior · Website 26/27 · RNDM design studio
   Struktur: Fonts · Tokens · Basis · Header · Cursor · Startseite · Menü · Viewer · Motion · About · Rechtliches · Responsive */
/* Zoom Pro: WebFont-Lizenz ankestern interior (The Designers Foundry) – nur für die Domain ankestern.com */
/* Geist Mono und Host Grotesk lokal statt über Google Fonts (Datenschutz). Quelle: Fontsource, SIL Open Font License */
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/geist-mono-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/geist-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/host-grotesk-latin-ext-300-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/host-grotesk-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/host-grotesk-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/host-grotesk-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/host-grotesk-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/host-grotesk-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zoom Pro Normal";src:url("../assets/fonts/Zoom%20Pro%20Normal%20Medium.woff2") format("woff2"),url("../assets/fonts/Zoom%20Pro%20Normal%20Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
/* Zoom Pro Wide Light: dieselbe Webfont-Datei, die ankestern.com bereits live nutzt (CORS offen). Für den Livegang nach assets/fonts übernehmen. */
@font-face{font-family:"Zoom Pro Wide";src:url("../assets/fonts/ZoomPro-WideLight.woff2") format("woff2"), url("https://ankestern.com/static/fonts/zoom-pro/ZoomPro-WideLight.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Zoom Pro Compact";src:url("../assets/fonts/Zoom%20Pro%20Compact%20Light.woff2") format("woff2"),url("../assets/fonts/Zoom%20Pro%20Compact%20Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
:root{
  --downpipe:#567480; --orange:#FF8500; --brown:#9F7056; --mud:#4A4944; --black:#1D1D1B; --white:#F8F8F8; --pp:#ECEBE7;
  /* Flächen-Rollen (Wunsch Anke): Passepartout ist Hintergrund, Dirty White die Boxen */
  --bg:var(--pp); --box:var(--white); --hdr-bg:var(--bg);
  --sans:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --head:"Zoom Pro Normal", "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --copy:"Zoom Pro Compact", "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wide:"Zoom Pro Wide", "Host Grotesk", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pad:40px; --hdr:66px; --bar:76px;
  --ease:cubic-bezier(.7,0,.2,1);
  /* Motion-Tokens: alle Dauern und Kurven an einer Stelle */
  --e-out:cubic-bezier(.16,1,.3,1); --e-inout:cubic-bezier(.7,0,.2,1);
  --t-fast:.35s; --t-mid:.7s; --t-slow:1.1s; --stagger:70ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--black);-webkit-font-smoothing:antialiased;scrollbar-gutter:stable}
body{font-family:var(--copy);font-weight:300;font-size:20px;line-height:1.4}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
.mono{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.04em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);background:var(--hdr-bg);transition:background .3s,color .3s}
.hdr .logotype{width:214px;height:16px;fill:currentColor}
.hdr .logo{width:66px;height:30px;fill:currentColor;display:block}
.hdr .logo .ast{transform-box:view-box;transform-origin:86px 25px}
.hdr .right{justify-self:end;display:flex;gap:24px;align-items:center}
.hdr .lang{opacity:.75}
.hdr .lang b{font-weight:400;opacity:1}
.lang-sw{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-size:10px;letter-spacing:.04em;line-height:1;transition:color .2s,border-color .2s}
.lang-sw:hover{color:var(--orange);border-color:var(--orange)}
.ftr .soc .siegel{display:block;width:50px;height:50px;margin-right:4px;flex:none}
.ftr .soc .siegel img{width:100%;height:100%;filter:none}
.ftr .soc a.siegel:hover{opacity:.75}
.ftr .soc a.lang-sw{display:inline-grid;width:30px;height:30px}
.hdr .menu-btn{font-weight:500;font-size:20px}
body.menu-open .hdr{background:var(--downpipe);color:var(--white)}
body.menu-open .hdr .logo .ast{fill:var(--orange)}

/* ---------- CAD-Cursor ---------- */
@media (pointer:fine){ body.cad, body.cad *{cursor:none!important} }
#cad{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:200;--g:4px;filter:drop-shadow(0 0 1px rgba(29,29,27,.55));opacity:0;transition:opacity .2s}
body.cad #cad{opacity:1}
#cad i{position:absolute;background:var(--orange)}
#cad .l{height:1px;width:28px;top:0;right:var(--g)}
#cad .r{height:1px;width:28px;top:0;left:var(--g)}
#cad .t{width:1px;height:28px;left:0;bottom:var(--g)}
#cad .b{width:1px;height:28px;left:0;top:var(--g)}
#cad .c{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center}
#cad .c svg{display:block;overflow:visible}
#cad .lbl{position:absolute;left:16px;top:8px;white-space:nowrap;color:var(--orange);font-family:var(--mono);font-size:11px;letter-spacing:0}
#cad[data-m="box"]{--g:4px}
#cad:not([data-m="box"]){--g:10px}

/* ---------- Home ---------- */
main.home{padding-top:var(--hdr)}
.hero{position:relative;aspect-ratio:16/9;max-height:calc(100vh - var(--hdr));width:100%;overflow:hidden;background:var(--mud)}
.hero .hslides{position:absolute;inset:0}
.hero .hslides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero .hslides img.on{opacity:1}
.hero .hslides canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to bottom,rgba(29,29,27,0),rgba(29,29,27,.45));pointer-events:none}
.claim{position:absolute;left:var(--pad);bottom:48px;z-index:2;color:var(--white);font-family:var(--wide);font-weight:300;font-size:clamp(44px,7.2vw,104px);line-height:1.1;letter-spacing:-.01em}
.claim.blotted .claim-txt{position:absolute;opacity:0}
.claim canvas{display:block}

.intro{padding:96px var(--pad) 120px;display:grid;gap:28px}
.intro h2{font-family:var(--wide);font-weight:300;font-size:clamp(32px,4.2vw,60px);line-height:1.1}
.intro h2 .var{color:var(--orange)}
.intro p{font-size:28px;line-height:1.3;max-width:915px}

.sec{padding:0 var(--pad) 80px}
.sec-head{position:relative;display:flex;align-items:center;gap:10px;padding-top:14px;margin-bottom:40px;font-weight:500;font-size:20px}
.sec-head::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(74,73,68,.35);transform-origin:left center}
.js .sec-head[data-reveal]::before{transform:scaleX(0);transition:transform 1.4s var(--e-out) .1s}
.js .sec-head.in::before{transform:scaleX(1)}
.ast-ico{width:16px;height:16px;fill:var(--orange);flex:none}

/* Triaden */
.triads{display:grid;gap:8px}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{aspect-ratio:4/5;position:relative;overflow:hidden}
.slot.teaser img{width:100%;height:100%;object-fit:cover;scale:1.12;transition:transform .9s var(--ease)}
.triad.live:hover .slot.teaser img{transform:scale(1.03)}
.slot.dia{background:var(--box)}
.slot.dia .imgs{position:absolute;inset:24px 24px 56px}
.slot.dia .imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.slot.dia .imgs img.on{opacity:1}
.slot.dia .fig{position:absolute;left:24px;bottom:22px;color:var(--mud);font-family:var(--mono);font-size:11px}
.slot.dia .dots{position:absolute;right:24px;bottom:22px;display:flex;gap:6px;align-items:center}
.dots i{width:6px;height:6px;border:1px solid var(--orange);border-radius:50%;display:block}
.dots i.on{background:var(--orange)}
.dots .pz{display:none;gap:3px;margin-left:6px}
.dots .pz b{width:1px;height:8px;background:var(--mud);display:block}
.paused .dots .pz{display:flex}
.wipe{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(0 100% 0 0)}
.slot.info{color:var(--white);padding:28px 24px 24px;display:flex;flex-direction:column;justify-content:space-between;transition:filter .5s}
.triad.live:hover .slot.info{filter:brightness(1.06)}
.slot.info h3{font-weight:500;font-size:clamp(28px,2.8vw,40px);line-height:1.05;letter-spacing:-.01em;margin:16px 0}
.slot.info p{font-size:20px;line-height:1.4}
.plan{list-style:none}
.plan li{display:grid;grid-template-columns:120px 1fr;border-top:1px solid rgba(248,248,248,.28);padding:7px 0;font-size:13px;font-weight:500;line-height:1.3}
.plan li span{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.62}
.plan .open{color:var(--orange)}
.triad:not(.live) .slot.teaser,.triad:not(.live) .slot.info{cursor:default}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.services h4{font-weight:500;font-size:20px;margin:16px 0}
.services .n{color:var(--orange)}
.services p{font-size:20px;white-space:pre-line}

/* Kunden-Slider */
.clients{--logo-h:28px;overflow:hidden;margin-right:calc(var(--pad) * -1);-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 120px),transparent)}
.clients .track{display:flex;gap:72px;width:max-content;animation:marquee 60s linear infinite;align-items:center}
.clients:hover .track{animation-play-state:paused}
.clients img{height:var(--logo-h);width:auto;filter:grayscale(1) contrast(.9);opacity:.85}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Kontakt + Footer */
.contact{background:var(--downpipe);color:var(--white);padding:64px var(--pad);display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.contact h2{font-family:var(--wide);font-weight:300;font-size:60px;line-height:1.1}
.contact .data{font-size:26px;line-height:1.35;display:grid}
.contact .data a:hover{color:var(--orange)}
.ftr{display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad) 32px;color:var(--mud);gap:24px;flex-wrap:wrap}
.ftr .soc{display:flex;gap:20px;align-items:center}
.soc a{display:block;width:16px;height:16px}
.soc img{width:16px;height:16px;object-fit:contain}
.ftr .soc img{filter:brightness(0) opacity(.72)}
.ftr a:hover{color:var(--orange)}

/* ---------- Menü ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--downpipe);color:var(--white);display:grid;grid-template-columns:400px 1fr;padding:calc(var(--hdr) + 84px) var(--pad) 40px;gap:40px;transform:translateY(-100%);transition:transform .7s var(--ease);visibility:hidden}
body.menu-open .menu{transform:none;visibility:visible}
.menu .left{display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(248,248,248,.22);padding-right:40px;min-height:0}
.menu nav a{display:flex;align-items:flex-start;gap:14px;font-family:var(--wide);font-weight:300;font-size:44px;line-height:1.15}
/* Nummer und Asterisk sitzen mittig zur ersten Zeile, auch wenn ein Menüpunkt umbricht (--zl = Höhe einer Zeile) */
.menu nav{--zl:50.6px}
.menu nav a .ix{font-family:var(--mono);font-size:10px;line-height:12px;opacity:.55;width:18px;flex:none;margin-top:calc((var(--zl) - 12px) / 2)}
.menu nav a{transition:color .25s}
.menu nav a:hover{color:var(--orange)}
.menu nav a svg{width:18px;height:18px;flex:none;margin-top:calc((var(--zl) - 18px) / 2);fill:var(--orange);opacity:0;transform:rotate(-90deg);transition:opacity .25s,transform .6s var(--ease)}
.menu nav a:hover svg,.menu nav a:focus-visible svg{opacity:1;transform:none}
.menu .about{font-size:18px;opacity:.85;max-width:340px}
.menu .legal-links{display:flex;gap:18px;margin-top:22px;padding-left:32px}
.menu .left{justify-content:flex-start}
.menu .about{margin-top:auto}
.menu .legal-links a{opacity:.6}
.menu .legal-links a:hover{opacity:1;color:var(--orange)}
.menu .about p+p{margin-top:12px;opacity:1}
.menu .soc{display:flex;gap:20px;margin-top:20px}
.menu .right{display:flex;flex-direction:column;min-height:0}
.menu .idx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-right:19px} /* 19px = Scrollbar 3px + Abstand 16px, damit die Filter mit den Linien abschließen */
.filters{display:flex;gap:22px}
.filters button{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:6px}
.filters button.on{opacity:1}
.filters button.on::before{content:"";width:6px;height:6px;background:var(--orange)}
.filters button:hover{opacity:1}
.idx-wrap{flex:1;min-height:0;display:flex;gap:16px}
.idx{flex:1;overflow-y:auto;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-content:start}
.idx::-webkit-scrollbar{display:none}
.idx a{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(248,248,248,.22);padding:9px 0;font-weight:500;font-size:16px}
.idx a .ix{position:relative;font-family:var(--mono);font-weight:400;font-size:10px;width:22px;flex:none}
.idx a .ix b{font-weight:400;opacity:.5}
.idx a .nm{flex:1;white-space:nowrap}
.scr{display:inline-block;white-space:nowrap}
.idx a .meta{font-family:var(--mono);font-weight:400;font-size:10px;opacity:.55;text-transform:uppercase}
.idx a .star{position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;fill:var(--orange);opacity:0;transform:rotate(-72deg);transition:opacity .2s,transform .5s var(--ease)}
.idx a.live:hover .star,.idx a.live:focus-visible .star{opacity:1;transform:none}
.idx a.live:hover .ix b,.idx a.live:focus-visible .ix b{opacity:0}
.idx a.ph{opacity:.45}
.idx a.hide{display:none}
.sbar{width:3px;background:rgba(248,248,248,.18);position:relative}
.sbar i{position:absolute;left:0;top:0;width:3px;background:var(--orange);display:block}
.preview{position:fixed;width:144px;height:180px;z-index:60;pointer-events:none;opacity:0;transition:opacity .2s;background:var(--mud) center/cover no-repeat}

/* ---------- Projekt-Viewer ---------- */
.viewer{position:fixed;inset:0;z-index:20;background:var(--bg);overflow:hidden;display:none;touch-action:none}
body.v-open .viewer{display:block}
body.v-open main.home{display:none}
.vbody{position:absolute;inset:0}
/* Fläche neben dem Bild: Klick wechselt zum vorigen/nächsten Projekt (nur mit Maus) */
.vnav{position:absolute;inset:0}
.stage{pointer-events:none}
.stage .frame,.stage .vquote{pointer-events:auto}
html{overscroll-behavior-x:none}
.vleft{position:absolute;left:var(--pad);top:calc(var(--hdr) + 30px);width:320px}
.crumb{display:flex;align-items:center;gap:8px;color:var(--mud)}
.crumb .ast-ico{width:12px;height:12px}
.chev{display:inline-grid;place-items:center;width:18px;height:18px}
.chev svg{stroke:currentColor;fill:none;stroke-width:1}
.vleft h1{font-weight:500;font-size:64px;line-height:1;letter-spacing:-.02em;margin:10px 0 48px}
.copy{position:relative}
.copy .c{transition:opacity .45s,transform .55s var(--ease)}
.copy h2{font-weight:500;font-size:22px;margin-bottom:14px}
.copy p{font-size:20px}
.copy .lead{font-size:23px;line-height:1.35}
.copy .c.out{opacity:0;transform:translateY(-18px)}
.copy .c.in{opacity:0;transform:translateY(18px)}
.stage{position:absolute;left:400px;right:var(--pad);top:88px;bottom:calc(var(--bar) + 72px)}
.frame{position:absolute;overflow:hidden;will-change:transform}
.frame{display:flex;gap:8px}
.frame img{width:100%;height:100%;object-fit:cover;display:block;flex:none}
.frame img[hidden]{display:none}
.frame .wipe{background:var(--brown)}
.vcap{position:absolute;right:var(--pad);bottom:calc(var(--bar) + 40px);display:flex;align-items:center;gap:20px;color:var(--mud)}
.vcap .arrows{display:flex;gap:16px}
.vdots{position:absolute;bottom:calc(var(--bar) + 43px);transform:translateX(-50%);display:flex;gap:6px;align-items:center}
.vdots button{width:10px;height:10px;display:grid;place-items:center}
.vdots button i{width:6px;height:6px;border:1px solid var(--orange);border-radius:50%;display:block}
.vdots button.on i{background:var(--orange)}
.vdots .pz{display:flex;gap:3px;margin-left:8px;padding:2px}
.vdots .pz b{width:1px;height:9px;background:var(--mud);display:block}
.vdots.paused .pz b{background:var(--orange)}
.vbar{position:absolute;left:0;right:0;bottom:0;height:var(--bar);background:var(--box);color:var(--black);display:flex;align-items:center;padding:0 var(--pad);z-index:5}
.vbar .prog{position:absolute;left:0;top:-2px;height:2px;background:var(--orange);transition:width .6s var(--ease)}
.vbar .ast-ico{margin-right:24px}
.vbar .fields{flex:1;display:flex;transition:opacity .35s}
.vbar .f{flex:1;padding:0 16px;display:grid;gap:4px}
.vbar .f+.f{border-left:1px solid rgba(29,29,27,.18)}
.vbar .f span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--mud)}
.vbar .f b{font-weight:500;font-size:13px}
.vbar .pnav{display:flex;align-items:center;gap:12px;padding-left:24px}
.sweep{position:absolute;inset:0 0 var(--bar) 0;background:var(--brown);z-index:4;transform:translateX(100%);pointer-events:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--black);color:var(--white);padding:10px 16px;z-index:300;opacity:0;transition:.3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}


/* Headlines und Daten in Zoom Pro Normal Medium, Copy in Zoom Pro Compact Light */
.sec-head,.slot.info h3,.services h4,.vleft h1,.copy h2,.hdr .menu-btn,.plan li b,.vbar .f b,.idx a .nm,.contact .data{font-family:var(--head);font-weight:500}
.contact .data{font-weight:500}
/* ---------- Responsive (Grundstock) ---------- */


/* ---------- Motion: Ladesequenz, Reveals, Menü ---------- */
.js .hero .hslides{clip-path:inset(100% 0 0 0);transform:scale(1.06);transition:clip-path var(--t-slow) var(--e-inout),transform 1.8s var(--e-out)}
.js .hero::after{opacity:0;transition:opacity var(--t-slow) .5s}
.js .claim{opacity:0;transform:translateY(24px);transition:opacity var(--t-mid) .65s,transform var(--t-slow) .65s var(--e-out)}
.js .intro>*{opacity:0;transform:translateY(24px);transition:opacity var(--t-mid),transform var(--t-slow) var(--e-out)}
.js .intro>*:nth-child(1){transition-delay:.9s}.js .intro>*:nth-child(2){transition-delay:1s}
.loaded .hero .hslides{clip-path:inset(0 0 0 0);transform:none}
.loaded .hero::after{opacity:1}
.loaded .claim,.loaded .intro>*{opacity:1;transform:none}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity var(--t-mid) var(--d,0ms),transform var(--t-slow) var(--e-out) var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .sec-head .ast-ico{transform:rotate(-72deg);transition:transform var(--t-slow) var(--e-out) .15s}
.js .sec-head.in .ast-ico{transform:none}
.menu nav a,.menu .about,.menu .idx-head,.menu .idx a{opacity:0;transform:translateY(16px);transition:opacity var(--t-fast),transform var(--t-mid) var(--e-out)}
body.menu-open .menu nav a,body.menu-open .menu .about,body.menu-open .menu .idx-head,body.menu-open .menu .idx a{opacity:1;transform:none}
body.menu-open .menu nav a:nth-child(1){transition-delay:.25s}
body.menu-open .menu nav a:nth-child(2){transition-delay:.31s}
body.menu-open .menu nav a:nth-child(3){transition-delay:.37s}
body.menu-open .menu nav a:nth-child(4){transition-delay:.43s}
body.menu-open .menu nav a:nth-child(5){transition-delay:.49s}
body.menu-open .menu .idx-head{transition-delay:.4s}
body.menu-open .menu .about{transition-delay:.55s}
.idx a.ph{opacity:0}
body.menu-open .idx a.ph{opacity:.45}

/* Serverseitiger Inhalt: für Crawler und ohne JavaScript, sonst ausgeblendet */
.ssr{padding:calc(var(--hdr) + 24px) var(--pad) 40px;max-width:900px}
.ssr img{max-width:320px;height:auto;margin:12px 0}
.js .ssr{display:none}

/* ---------- About ---------- */
main.about{display:none;padding-top:var(--hdr)}
body.about-open main.about{display:block}
body.about-open main.home,body.v-open main.about{display:none}
.ab-top{padding:96px var(--pad) 120px;display:grid;grid-template-columns:1fr 2fr;gap:8px}
.ab-top .portrait{position:relative;overflow:hidden;aspect-ratio:3/4;background:transparent center/cover no-repeat}
.ab-top .portrait .por-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-top .portrait .wipe{position:absolute;inset:0;background:var(--brown);clip-path:inset(100% 0 0 0);pointer-events:none}
/* Name mit E-Mail: färbt sich bei Hover, Klick öffnet das Mailprogramm */
.ab-top h1 .mailname{color:inherit;text-decoration:none;transition:color .25s}
.ab-top h1 .mailname:hover,.ab-top h1 .mailname:focus-visible{color:var(--orange)}
/* Glitch beim Hover (Prinzip wie RNDM-Übersicht): zwei versetzte Kopien in Downpipe und Brown, Original zittert leicht.
   Versätze in em, damit sie mit der Schriftgröße mitwachsen. */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;opacity:0;pointer-events:none;mix-blend-mode:multiply}
.glitch::before{color:var(--downpipe)}
.glitch::after{color:var(--brown)}
.mailname:hover .glitch,.mailname:focus-visible .glitch{animation:gl-core .6s steps(2) infinite}
.mailname:hover .glitch::before,.mailname:focus-visible .glitch::before{opacity:.8;animation:gl-a .85s steps(2) infinite}
.mailname:hover .glitch::after,.mailname:focus-visible .glitch::after{opacity:.7;animation:gl-b .72s steps(2) infinite}
@keyframes gl-core{0%,100%{transform:translate(0,0)}20%{transform:translate(.005em,-.005em)}40%{transform:translate(-.005em,.005em)}60%{transform:translate(.005em,.005em)}80%{transform:translate(-.005em,0)}}
@keyframes gl-a{0%{transform:translate(-.015em,-.005em);clip-path:inset(4% 0 62%)}25%{transform:translate(-.025em,.005em);clip-path:inset(48% 0 22%)}50%{transform:translate(-.010em,.010em);clip-path:inset(12% 0 70%)}75%{transform:translate(-.030em,-.010em);clip-path:inset(66% 0 8%)}100%{transform:translate(-.015em,-.005em);clip-path:inset(30% 0 40%)}}
@keyframes gl-b{0%{transform:translate(.015em,.005em);clip-path:inset(58% 0 12%)}25%{transform:translate(.025em,-.010em);clip-path:inset(8% 0 68%)}50%{transform:translate(.010em,-.005em);clip-path:inset(72% 0 4%)}75%{transform:translate(.030em,.010em);clip-path:inset(24% 0 52%)}100%{transform:translate(.015em,.005em);clip-path:inset(40% 0 30%)}}
/* Zwei weitere Kopien: Blau (Downpipe) und Hellgrau (Passepartout), deckend, damit sie über dem Orange sichtbar werden */
.glitch2{position:relative;display:inline-block}
.glitch2::before,.glitch2::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;opacity:0;pointer-events:none}
.glitch2::before{color:var(--downpipe)}
.glitch2::after{color:var(--pp)}
.mailname:hover .glitch2::before,.mailname:focus-visible .glitch2::before{opacity:.75;animation:gl-c .9s steps(2) infinite}
.mailname:hover .glitch2::after,.mailname:focus-visible .glitch2::after{opacity:.6;animation:gl-d 1.1s steps(2) infinite}
@keyframes gl-c{0%{transform:translate(.020em,-.007em);clip-path:inset(18% 0 70%)}25%{transform:translate(-.010em,.005em);clip-path:inset(62% 0 26%)}50%{transform:translate(.025em,0);clip-path:inset(36% 0 52%)}75%{transform:translate(-.020em,-.005em);clip-path:inset(80% 0 6%)}100%{transform:translate(.010em,.007em);clip-path:inset(6% 0 82%)}}
@keyframes gl-d{0%{transform:translate(-.010em,0);clip-path:inset(44% 0 48%)}25%{transform:translate(.015em,.005em);clip-path:inset(10% 0 84%)}50%{transform:translate(-.025em,-.005em);clip-path:inset(70% 0 22%)}75%{transform:translate(.010em,0);clip-path:inset(28% 0 64%)}100%{transform:translate(-.015em,.005em);clip-path:inset(54% 0 38%)}}
@media (prefers-reduced-motion:reduce){.glitch,.glitch::before,.glitch::after,.glitch2::before,.glitch2::after{animation:none!important}.glitch::before,.glitch::after,.glitch2::before,.glitch2::after{opacity:0!important}}
.team-nav{display:inline-flex;align-items:center;gap:8px;margin-left:4px}
.team-nav[hidden]{display:none}
.ab-person{transition:opacity .35s,transform .5s var(--e-out)}
.ab-person.raus{opacity:0;transform:translateX(calc(var(--dir,1) * -24px))}
.ab-person.rein{opacity:0;transform:translateX(calc(var(--dir,1) * 24px));transition:none}
.ab-nur-erste{transition:opacity .4s}
.ab-nur-erste.weg,#abZitat.weg{display:none}
.ab-top .txt{padding-left:40px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.ab-top h1{font-family:var(--head);font-weight:500;font-size:clamp(56px,7.8vw,112px);line-height:1;letter-spacing:-.02em;margin:14px 0}
.ab-top .role{font-family:var(--wide);font-weight:300;font-size:28px;line-height:1.18}
.ab-top .lead{font-size:28px;line-height:1.3;max-width:820px}
.stations{list-style:none}
.stations li{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:baseline;border-top:1px solid rgba(74,73,68,.2);padding:16px 0 20px}
.stations .d{color:var(--orange)}
.stations .o{display:block;margin-top:6px;color:var(--mud)}
.stations h3{font-family:var(--head);font-weight:500;font-size:20px;line-height:1.25;padding-right:24px}
.stations p{font-size:18px;line-height:1.4}
.ab-quote{background:var(--box);padding:96px var(--pad);margin-bottom:96px}
.ab-quote blockquote,.vquote blockquote{font-family:var(--wide);font-weight:300;font-size:clamp(34px,4.2vw,60px);line-height:1.18}
.vquote blockquote{font-size:clamp(44px,5.8vw,92px);line-height:1.1}
.vquote cite{display:block;font-style:normal;font-family:var(--head);font-weight:500;font-size:20px;margin-top:24px;opacity:0;transition:opacity .6s .6s}
.vquote cite span{display:block;font-family:var(--copy);font-weight:300;font-size:18px;margin-top:4px}
.vquote.words-in cite{opacity:1}
.ab-quote cite{display:block;font-style:normal;font-family:var(--head);font-weight:500;font-size:20px;margin-top:24px}
.w{display:inline-block;opacity:0;transform:translateY(.25em);transition:opacity .6s,transform .7s var(--ease)}
.words-in .w{opacity:1;transform:none}
.sec-head .cnt{margin-left:auto;font-weight:400}
.press{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.press a{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(74,73,68,.2);padding:11px 0}
.press a .ix{width:24px;color:var(--mud);opacity:.6;flex:none}
.press a .t{flex:1;font-family:var(--head);font-weight:500;font-size:17px;line-height:1.25}
.press a .s{color:var(--mud);white-space:nowrap}
.press a .s.pdf{color:var(--orange)}
.press a:hover .t{color:var(--orange)}
.press a.more{display:none}
.press.all a.more{display:flex}
.press-toggle{margin-top:16px;display:inline-flex;gap:8px;align-items:center}
.press-toggle .ast-ico{fill:var(--orange);stroke:none;width:12px;height:12px;transition:transform .5s var(--e-out)}
.press-toggle:hover .ast-ico{transform:rotate(72deg)}
.press-toggle:hover{color:var(--orange)}
.press-toggle svg{stroke:currentColor;fill:none;transition:transform .3s}
.press.all + .press-toggle svg{transform:rotate(180deg)}
/* Pressekontakt am Ende des Presse-Blocks: untereinander, ohne Linie (nach Figma) */
.press-kontakt{display:grid;grid-template-columns:1fr;gap:16px;margin-top:41px}
.press-kontakt .k-titel{color:var(--orange)}
.press-kontakt p{font-size:18px;line-height:1.45;white-space:pre-line}
.press-kontakt a{display:inline-block;margin-top:6px;font-size:18px;line-height:1.45}
.press-kontakt a:hover{color:var(--orange)}
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.partners a{display:grid;gap:6px;padding-top:4px}
.partners b{font-family:var(--head);font-weight:500;font-size:24px}
.partners a:hover b{color:var(--orange)}
/* ---------- Impressum-Overlay ---------- */
.legal{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .6s}
.legal .dim{position:absolute;inset:0;background:rgba(29,29,27,.45);opacity:0;transition:opacity .4s}
.legal .panel{position:absolute;top:0;right:0;bottom:0;width:min(904px,100%);background:var(--box);overflow-y:auto;padding:28px var(--pad) 60px;transform:translateX(100%);transition:transform .6s var(--ease)}
body.legal-open .legal{visibility:visible;transition:none}
body.legal-open .legal .dim{opacity:1}
body.legal-open .legal .panel{transform:none}
.legal .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px}
.legal .tabs{display:flex;gap:22px}
.legal .tabs a{opacity:.6;display:flex;align-items:center;gap:6px}
.legal .tabs a.on{opacity:1}
.legal .tabs a.on::before{content:"";width:6px;height:6px;background:var(--orange)}
.legal .close{font-family:var(--head);font-weight:500;font-size:20px}
.legal h2{font-family:var(--wide);font-weight:300;font-size:44px;line-height:1.1;margin-bottom:40px}
.legal .row{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;border-top:1px solid rgba(29,29,27,.18);padding:16px 0 22px}
.legal .row span{color:var(--orange)}
.legal .row p{font-size:18px;line-height:1.45;white-space:pre-line}
.legal .row a{color:var(--orange)}
.legal .draft{color:var(--orange);margin:-24px 0 32px}
/* Projekte „nur per Link“: kein Zähler, kein Projektwechsel */
body.v-solo [data-proj]{display:none}

/* ---------- Zitat im Viewer ---------- */
.vquote{position:absolute;left:0;right:0;bottom:0;display:none}
.vquote.on{display:block}
@media (max-width:900px){
  .ab-top{grid-template-columns:1fr;padding:32px var(--pad) 64px;gap:24px}
  .ab-top .txt{padding-left:0}
  .ab-top .role{font-size:22px}
  .ab-top .lead{font-size:19px}
  .stations li{grid-template-columns:1fr;gap:6px}
  .ab-quote{padding:56px var(--pad);margin-bottom:56px}
  .press,.partners,.press-kontakt{grid-template-columns:1fr}
  .press-kontakt{margin-top:32px;gap:12px}
  .press-kontakt a{font-size:16px}
  .press-kontakt p{font-size:16px}
  .vquote blockquote{font-size:32px}
  .vquote cite{font-size:17px;margin-top:14px}
  .legal .top{margin-bottom:32px}
  .legal .tabs{gap:14px}
  .legal .row{grid-template-columns:1fr;gap:6px}
  .legal h2{font-size:32px}
}
.tcap,.vinfo,.vdim{display:none}
@media (max-width:900px){
  :root{--pad:16px;--hdr:56px;--bar:48px}
  body{font-size:17px}
  .hdr .logotype{width:130px;height:10px}
  .hdr .logo{width:44px;height:20px}
  .hdr .lang{display:none}
  .hdr .menu-btn{font-size:16px}
  .hero{aspect-ratio:4/5;max-height:none}
  .claim{font-size:46px;line-height:1.05;bottom:24px;right:var(--pad)}
  .intro{padding:48px var(--pad) 64px;gap:18px}
  .intro h2{font-size:28px}
  .intro p{font-size:19px}
  .sec{padding-bottom:56px}
  .sec-head{font-size:18px;margin-bottom:24px}
  /* Triaden: horizontal wischen */
  .triads{gap:32px;margin:0 calc(var(--pad) * -1)}
  .triad{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad);scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .triad::-webkit-scrollbar{display:none}
  .triad .slot{flex:0 0 calc(100vw - 56px);scroll-snap-align:start}
  .slot.dia .imgs{inset:16px 16px 48px}
  .slot.dia .fig{left:16px;bottom:18px}
  .slot.dia .dots{display:none}
  .slot.info{padding:22px 18px 18px}
  .slot.info h3{font-size:30px;margin:12px 0}
  .slot.info p{font-size:17px}
  .plan li{grid-template-columns:100px 1fr;font-size:12px;padding:6px 0}
  .tcap{display:flex;justify-content:space-between;align-items:center;padding:12px var(--pad) 0}
  .tcap b{font-family:var(--head);font-weight:500;font-size:16px;margin-right:10px}
  .tcap .tdots{display:flex;gap:5px}
  .tcap .tdots i{width:6px;height:6px;border:1px solid var(--orange);border-radius:50%;display:block}
  .tcap .tdots i.on{background:var(--orange)}
  .services{grid-template-columns:1fr;gap:22px}
  .services h4{font-size:18px;margin:8px 0}
  .services p{font-size:17px}
  .clients{--logo-h:38px}
  .clients .track{gap:64px;animation-duration:80s}
  .contact{padding:40px var(--pad);flex-direction:column;gap:16px}
  .contact h2{font-size:40px}
  .contact .data{font-size:18px}
  .ftr{flex-direction:column;align-items:flex-start;gap:14px;padding:20px var(--pad) 28px}
  .ftr .soc{order:-1}
  /* Menü: scrollt als Ganzes */
  .menu{display:flex;flex-direction:column;overflow-y:auto;padding:calc(var(--hdr) + 32px) var(--pad) 40px}
  .menu nav{order:1}.menu .legal-links{order:1;padding-left:28px;margin:0 0 32px}.menu .about{margin-top:40px}.menu .right{order:2;flex-shrink:0;min-height:auto}.menu .about{order:3;flex-shrink:0}.menu nav{flex-shrink:0}
  .menu .left{border:0;padding:0;display:contents}
  .menu nav{margin-bottom:32px}
  .menu nav a{font-size:32px;gap:10px}
  .menu nav{--zl:36.8px}
  .menu .right{display:block}
  .menu .about{margin-top:40px;font-size:17px}
  .idx-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px;text-align:left;padding-right:0!important}
  .idx-head>span{align-self:flex-start}
  .filters{gap:18px;overflow-x:auto;max-width:100%;scrollbar-width:none;padding-bottom:4px}
  .filters button{white-space:nowrap}
  .idx-wrap{display:block}
  .idx{display:block;overflow:visible}
  .sbar,.preview{display:none}
  /* Viewer: untereinander */
  .viewer{--st:140px;--sh:min(calc(100vw - 2 * var(--pad)),50vh)}
  .vleft{left:var(--pad);right:var(--pad);top:calc(var(--hdr) + 14px);width:auto}
  .vleft h1{font-size:36px;margin:6px 0 0}
  .stage{left:var(--pad);right:var(--pad);top:var(--st);bottom:auto;height:var(--sh)}
  .vcap{left:var(--pad);right:var(--pad);top:calc(var(--st) + var(--fh, var(--sh)) + 10px);bottom:auto;justify-content:space-between}
  .vcap .arrows .chev{width:32px;height:32px}
  .vdots{top:calc(var(--st) + var(--fh, var(--sh)) + 12px);bottom:auto}
  /* Text unten ausgerichtet, direkt über der Infoleiste; der Raum darüber gehört dem Bild */
  .copy{position:fixed;left:var(--pad);right:var(--pad);top:calc(var(--st) + var(--fh, var(--sh)) + 46px);bottom:calc(var(--bar) + 16px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
  .copy h2{font-size:18px;margin-bottom:8px}
  .copy p{font-size:16px;line-height:1.42}
  .copy .lead{font-size:17px;line-height:1.42}
  .vbar{height:auto;min-height:var(--bar);flex-wrap:wrap;padding:0 var(--pad);align-items:stretch}
  .vbar>.ast-ico{display:none}
  .vbar .fields{order:-1;flex:0 0 100%;flex-direction:column;display:none;padding:20px 0 8px}
  .vbar.open .fields{display:flex}
  .vbar .f{padding:9px 0;grid-template-columns:120px 1fr;align-items:baseline;border-top:1px solid rgba(29,29,27,.18)}
  .vbar .f+.f{border-left:0}
  .vbar .f b{font-size:14px}
  .vinfo{display:flex;align-items:center;gap:8px;height:var(--bar);flex:1}
  .vinfo .ast-ico{width:14px;height:14px}
  .vbar .pnav{height:var(--bar);padding-left:0}
  .vbar .pnav .chev{width:32px;height:32px}
  .vdim{display:block;position:absolute;inset:0;background:rgba(29,29,27,.35);z-index:4;opacity:0;pointer-events:none;transition:opacity .3s}
  .viewer.info-open .vdim{opacity:1;pointer-events:auto}
  .sweep{bottom:var(--bar)}
}
@media (prefers-reduced-motion:reduce){
  .js .sec-head[data-reveal]::before{transform:none!important}
  .slot.teaser img{scale:1}
  .js .hero .hslides,.js .claim,.js .intro>*,.js [data-reveal],.menu nav a,.menu .about,.menu .idx-head,.menu .idx a{opacity:1!important;transform:none!important;clip-path:none!important}
  *{transition-duration:.01ms!important;animation:none!important}
}

/* ---------- Auszeichnungen: Badges im Viewer + Konfetti ---------- */
.badges{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:20px}
/* Badges: feste Breite, Höhe ergibt sich aus dem Bild (auch Hochformate), Hintergrund transparent */
.badge{width:72px;background:transparent}
.badge img{display:block;width:100%;height:auto}
.badge.ph{height:72px;display:grid;place-items:center;text-align:center;padding:6px;overflow:hidden;border:1px dashed rgba(74,73,68,.35)}
.badge.ph span{font-family:var(--mono);font-size:8px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--mud)}
#confetti{position:fixed;inset:0;z-index:30;pointer-events:none}
/* Handy: wenig Platz unter dem Text, daher Höhe begrenzen; Hochformate werden schmaler statt höher */
@media (max-width:900px){ .badge{width:auto} .badge img{width:auto;height:auto;max-width:52px;max-height:60px} .badge.ph{width:52px;height:52px} .badges{margin-top:12px;gap:8px} .badges.many .badge img{max-width:40px;max-height:46px} .badges.many .badge.ph{width:40px;height:40px} .badges.many{gap:6px} }