@font-face{font-family:"Newsreader";src:url("../assets/fonts/newsreader-latin.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../assets/fonts/switzer-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url("../assets/fonts/switzer-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0c1a1c;--ink2:#14282b;--paper:#f3eee4;--sand:#e7dfcf;--brass:#d3b681;--brass-d:#7b5c2a;
  --txt:#14211f;--mut:#4f5b57;--ivory:#f1eadc;--ivory-m:#b9b7ab;
  --sx:clamp(20px,5vw,72px);--px:clamp(20px,5vw,72px);--ind:clamp(22px,4.4vw,64px);
  --serif:"Newsreader",Georgia,serif;--sans:"Switzer",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--txt);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
h1,h2,h3,.q{font-family:var(--serif);font-weight:400;font-optical-sizing:auto}

/* Header */
.hd{position:fixed;inset:0 0 auto 0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:18px var(--px);color:var(--ivory);transition:background .4s,color .4s,padding .4s,transform .5s var(--ease)}
.hd.is-solid{background:#0c1a1c;padding-block:12px}
.hd.is-up{transform:translateY(-101%)}
.hd__brand{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:.01em}
.hd__brand .tag{margin-left:8px}
.hd__e{color:var(--brass);flex:none}
.hd__nav{display:flex;gap:36px}
.hd__nav a{position:relative;padding:4px 0;color:#dcd8cb;transition:color .3s}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hd__nav a:hover{color:#fff}.hd__nav a:hover::after{transform:scaleX(1)}
.hd__cta{justify-self:end;color:var(--ivory)}
.hd__tag{font-style:normal;color:var(--brass);white-space:nowrap}

/* Aktionen: gesperrte Zeile mit Haarpfeil, nur der Abschluss ist ein Block */
.lab,.act,.btn,.kick,.tag,.ctl__l,.seg,.res__l dt,.res__k,.st,.dseg b,.arm dt,.hd__nav a,.story__k{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.act{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:44px;color:inherit;white-space:nowrap}
.act::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.act:hover::after{transform:scaleX(1)}
.ar{flex:none;transition:transform .55s var(--ease)}
.act:hover .ar,.story:hover .ar,.ft__m:hover .ar{transform:translate3d(6px,0,0)}
.act--d{color:var(--txt)}
.act--u::after{transform:none;background:none;border-bottom:1px dashed rgba(211,182,129,.7);height:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;background:var(--ink);border:1px solid var(--ink);color:var(--ivory);transition:background .45s var(--ease),color .45s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}

/* Bühne */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
main,.ft{position:relative;z-index:1}
.stage{position:relative;height:330vh;color:var(--ivory)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden}
.sky{display:none}
.no-gl .sky{display:block;position:absolute;right:0;bottom:30%;width:100vw;color:var(--brass);opacity:.8}
.hero{position:absolute;left:var(--px);right:var(--px);bottom:clamp(30px,6svh,60px);display:flex;justify-content:space-between;align-items:flex-end;gap:40px;will-change:opacity,transform}
.claim{font-size:min(6.5vw,12.8svh);line-height:1.02;letter-spacing:-.012em;text-shadow:0 2px 40px rgba(6,12,14,.6)}
.claim span{display:block}
.claim b{font-weight:400;color:#e3c48d}
.hero .hero__tag{display:none;margin-bottom:12px;color:var(--brass);width:max-content}
.hero__p{max-width:470px;margin-top:clamp(14px,2.4svh,24px);font-size:16.5px;line-height:1.42;color:#e8e2d4;text-shadow:0 1px 18px rgba(6,12,14,.8)}
.story{flex:none;width:clamp(250px,23vw,330px);display:block;padding-top:16px;border-top:1px solid rgba(241,234,220,.5);color:var(--ivory);text-shadow:0 1px 18px rgba(6,12,14,.8)}
.story__k{display:block;color:#ece6d8}
.story__t{display:block;font:400 clamp(26px,2.4vw,33px)/1.12 var(--serif);margin-top:10px}
.story__s{display:block;font-size:14.5px;line-height:1.4;color:#e8e2d4;margin-top:6px}
.story .act{margin-top:6px}
.beat{position:absolute;inset:0;--sx2:5%;pointer-events:none;opacity:0;visibility:hidden}
.beat__h{position:absolute;left:5%;top:9.4%;font:400 clamp(26px,3.2vw,46px)/1.05 var(--serif);letter-spacing:-.016em}
.arm{position:absolute;left:5%;right:5%;display:flex;gap:clamp(14px,1.6vw,26px);align-items:baseline;padding:2.6vh 0 0 2.5vw;margin:0}
.a1{top:19%}.a2{top:49%}.a3{top:79%}
.arm dd{font:400 min(8.6vw,13.2svh)/1 var(--serif);letter-spacing:-.012em;font-variant-numeric:lining-nums}
.arm dt{color:#e8e2d4}

/* Sections */
.sec{position:relative;padding:clamp(80px,9vw,130px) 0}
.sec--paper{background:var(--paper)}
.sec--sand{background:var(--sand)}
.sec--ink{background:var(--ink);color:var(--ivory)}
.sp{position:absolute;left:var(--sx);top:0;bottom:0;width:1.5px;background:var(--brass-d);transform-origin:top}
.sec--ink .sp{background:var(--brass)}
.sp--dash{background:repeating-linear-gradient(180deg,var(--brass-d) 0 7px,transparent 7px 14px)}
.in{position:relative;margin-left:calc(var(--sx) + var(--ind));margin-right:var(--px);max-width:1280px}
.kick{position:relative;color:var(--brass-d);margin-bottom:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sec--ink .kick{color:var(--brass)}
.tag{display:inline-flex;align-items:center;gap:10px}
.tag::before{content:"";width:22px;border-top:1px dashed currentColor}
.h-xl{font-size:clamp(46px,6.6vw,104px);line-height:1.02;letter-spacing:-.012em}
.lead{font-size:clamp(19px,1.7vw,24px);line-height:1.42;max-width:680px;margin-top:30px;color:var(--mut)}
.sec--ink .lead{color:#d6d2c5}

/* Draw */
.draw{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);background:var(--paper);padding:clamp(22px,3vw,46px);box-shadow:0 24px 60px -34px rgba(20,33,31,.32)}
.ctl{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.ctl__l{color:var(--mut)}
.seg{position:relative;min-height:40px;color:var(--mut);transition:color .3s}
.seg::after{content:"";position:absolute;left:0;right:.2em;bottom:6px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.seg:hover{color:var(--txt)}
.seg[aria-pressed=true]{color:var(--txt)}
.seg[aria-pressed=true]::after{transform:scaleX(1)}
.tree{--w:30px;--y:27px;position:relative}
.n{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;width:100%;min-height:54px;padding:8px 14px;border:1px solid transparent;font-size:15px;line-height:1.25;transition:border-color .35s,background .35s,color .35s,opacity .35s}
.n b{font:400 20px/1.15 var(--serif);letter-spacing:-.004em}
.n span{font-size:13.5px;color:var(--mut);white-space:nowrap}
.n--root{width:auto;display:inline-flex;background:var(--ink);color:var(--ivory);min-height:46px;padding:6px 18px}
.l1,.l2{position:relative;padding-left:var(--w);display:grid;gap:8px}
.l1{margin-top:0;padding-top:10px;margin-left:24px}
.l2{margin-top:8px}
.tree li{position:relative}
.tree li>.n{background:var(--ink2);color:var(--ivory)}
.tree li>.n span{color:#c9c5b7}
.tree li:not(.on)>.n{background:transparent;color:#2e3a37;border:1px dashed rgba(20,33,31,.42)}
.tree li:not(.on)>.n span{color:#4a5551}
.tree li:not(.on)>.n b::before{content:"+ ";color:var(--brass-d)}
.tree li:not(.on)>button.n:hover{border-color:var(--txt);color:var(--txt)}
.tree li>button.n{cursor:pointer}
.tree li::before{content:"";position:absolute;left:calc(var(--w) * -1);top:var(--y);width:var(--w);height:0;border-top:1.5px dashed rgba(20,33,31,.4)}
.lnk{position:absolute;left:calc(var(--w) * -1);top:calc(var(--y) - .25px);width:var(--w);height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.tree li.on>.lnk{transform:none}
.l1::before,.l2::before{content:"";position:absolute;left:0;top:0;bottom:calc(100% - var(--last,100%));width:0;border-left:1.5px dashed rgba(20,33,31,.4)}
.l1::after,.l2::after{content:"";position:absolute;left:-.25px;top:0;width:1.5px;height:100%;background:var(--ink);transform-origin:top;transform:scaleY(var(--tr,0));transition:transform .45s var(--ease)}
.l2 .n b{font-size:18px}
.l2 .n{min-height:48px}.l2{--y:24px}.l2 li::before,.l2 .lnk{top:var(--y)}
.hint{font-size:14px;color:var(--mut);margin-top:16px;margin-left:54px}
.draw__res{align-self:start;border-left:1.5px solid rgba(20,33,31,.16);padding-left:clamp(20px,3vw,44px)}
.res__k{color:var(--mut);margin-bottom:10px}
.res__d{font:400 clamp(64px,8.4vw,128px)/1 var(--serif);letter-spacing:-.024em;margin:4px 0 22px;overflow:hidden}
.res__d span{display:inline-block;transition:transform .32s var(--ease),opacity .32s}
.res__d span.out{transform:translateY(-40%);opacity:0}
.res__d span.in{transform:translateY(40%);opacity:0;transition:none}
.res__l>div{padding:12px 0;border-top:1px solid rgba(20,33,31,.14)}
.res__l dt{margin-bottom:3px}
.res__l dd{font-size:16px;color:var(--mut);line-height:1.42;min-height:2.84em}
#resAstraRow dd{min-height:0}
.res__a{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.res__n{font-size:15px;color:var(--mut);margin-top:14px;padding:10px 12px;background:var(--sand)}
.res__n b{font-weight:500;color:var(--txt)}
.days{grid-column:1/-1;padding-top:10px}
.days__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(10px,1.4vw,20px)}
.dseg{position:relative;padding-top:16px;min-width:0}
.dseg i{position:absolute;top:0;left:0;right:0;height:5px;background:var(--ink);transform-origin:left;transition:transform .5s var(--ease)}
.dseg::before{content:"";position:absolute;top:2px;left:0;right:0;border-top:1.5px dashed rgba(20,33,31,.4)}
.dseg:not(.on) i{transform:scaleX(0)}
.dseg b{display:block;line-height:1.5;letter-spacing:.14em;font-size:10.5px}
.dseg span{font-size:13.5px;color:#4a5551}

.stick{display:none}

/* ASTRA */
.ast{position:relative;height:122vh;color:var(--ivory)}
.pin--a{display:block;padding:clamp(84px,13svh,120px) var(--px) 0}
.pin--a .kick{margin-bottom:22px;color:var(--brass)}
.ast__b .act{color:var(--ivory)}
.q{font-size:min(7.8vw,14.4svh);line-height:1.05;letter-spacing:-.012em;text-shadow:0 2px 30px rgba(6,12,14,.7)}
.ast__b{position:absolute;left:var(--px);right:var(--px);bottom:clamp(30px,6svh,60px);display:flex;align-items:center;gap:28px;font-size:16.5px;line-height:1.4}
.ast__b p{max-width:560px}.ast__b .btn{flex:none}
.ast__b p{margin:0}.ast__b b{font-weight:500}
.sig__c{position:absolute;right:var(--px);bottom:clamp(44px,7.6svh,76px);font-size:13px;color:#b9bab0;margin:0}

/* WIP */
.sec--wip{padding-bottom:clamp(70px,9vw,120px)}
.wip{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,34px)}
.wip li{position:relative;display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px);border:1.5px dashed rgba(123,92,42,.55)}
.st{display:block;letter-spacing:.14em;font-size:10.5px;color:var(--brass-d)}
.st--t{color:var(--mut)}
.wip h3{font:400 clamp(25px,2.3vw,33px)/1.12 var(--serif);letter-spacing:-.008em;text-transform:none;margin-top:0;padding-top:clamp(28px,3vw,44px)}
.wip p{font-size:16px;line-height:1.45;color:var(--mut);margin-top:10px}

/* Footer */
.ft{background:var(--ink);color:#c3c1b4;padding:clamp(70px,9vw,120px) 0 calc(44px + env(safe-area-inset-bottom))}
.ft__h{font-size:clamp(42px,6vw,92px);line-height:1.04;letter-spacing:-.012em;color:var(--ivory);margin-bottom:26px}
.ft .in{margin-left:var(--px)}
.ft__m{display:inline-flex;align-items:center;gap:16px;font:400 clamp(20px,2.2vw,30px)/1.2 var(--serif);color:var(--ivory);padding-bottom:6px;border-bottom:1px solid rgba(211,182,129,.6);max-width:100%}
.ft__top{display:flex;gap:16px;align-items:flex-start;color:#dcd8cb;max-width:640px;font-size:15px;margin-top:clamp(48px,6vw,84px)}
.ft__top svg{color:var(--brass);flex:none}
.ft__l{margin-top:26px;font-size:13.5px;max-width:880px;color:#a9a99d;line-height:1.5}

/* Intro (CSS, läuft mit dem ersten Paint) */
@media (prefers-reduced-motion:no-preference){
  .js .hero__p,.js .story{animation:up 1s 1.5s var(--ease) backwards}
  .js [data-rise]{opacity:0;transform:translate3d(0,22px,0)}
  .js [data-arm]{transform:scaleX(0)}
}
@keyframes fade{from{opacity:0}}
@keyframes up{from{opacity:0;transform:translate3d(0,14px,0)}}

/* Laptop niedriger */
@media (max-width:1180px){
  .hd{grid-template-columns:1fr auto}.hd__nav{display:none}
  .wip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hd__cta{justify-self:end}
  .draw{grid-template-columns:minmax(0,1fr)}
  .draw__res{border-left:0;padding-left:0;border-top:1.5px solid rgba(20,33,31,.16);padding-top:24px}
}
/* Handy */
@media (max-width:640px){
  body{font-size:16.5px}
  .hd{padding:10px 14px;gap:8px}.hd__brand{font-size:13.5px;gap:8px}.hd__cta{font-size:10px;letter-spacing:.14em;min-height:40px}
  .pin:not(.pin--a)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,transparent,rgba(6,12,14,.5) 45%,rgba(6,12,14,.72));pointer-events:none;opacity:var(--scrim,1)}
  .hero{z-index:2}
  .beat{z-index:2}
  .claim{font-size:14vw;line-height:1.03}
  .claim span:first-child{max-width:6em;margin-bottom:.16em}
  .hero .hero__tag{display:inline-flex}
  .hero{bottom:18px}
  .hero{flex-direction:column;align-items:stretch;gap:16px}
  .hero__p{font-size:15.5px;margin-top:12px}
  .story{width:auto;padding-top:12px}
  .story__s{display:none}
  .story__t{font-size:25px;margin-top:6px}
  .beat__h{top:10%;font-size:27px;left:7%}
  .arm{left:7%;right:7%;display:block;padding:18px 0 0 12px}
  .arm dd{font-size:15vw}.arm dt{font-size:14px;padding:2px 0 0}
  .q{font-size:12.6vw;line-height:1.08}
  .ast__b{left:16px;right:16px;flex-direction:column;align-items:flex-start;gap:12px;bottom:44px;font-size:15px}
  .sig__c{left:16px;right:auto;bottom:16px;font-size:12px}
  .in{margin-right:16px;margin-left:calc(16px + 18px)}
  :root{--sx:16px;--ind:18px;--px:16px}
  .draw{padding:18px 14px;margin-left:-8px}
  .tree{--w:16px}.l1{margin-left:10px}.n{padding:8px 10px;flex-wrap:wrap;gap:0 10px}.n span{white-space:normal}
  .n b{font-size:18px}.l2 .n b{font-size:17px}
  .hint{margin-left:26px}
  .res__d{font-size:84px}
  .days__grid{grid-template-columns:1fr;row-gap:12px}
  .dseg{padding-top:0;padding-left:18px}
  .dseg i{left:0;top:2px;bottom:2px;right:auto;height:auto;width:4px;transform-origin:top}
  .dseg::before{top:2px;bottom:2px;right:auto;left:1px;border-top:0;border-left:1.5px dashed rgba(20,33,31,.35)}
  .dseg:not(.on) i{transform:scaleY(0)}
  .dseg b,.dseg span{display:block}
  .wip{grid-template-columns:minmax(0,1fr);gap:14px}
  .stick{display:flex;position:sticky;bottom:10px;z-index:3;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;padding:9px 14px;background:var(--ink);color:var(--ivory);font-size:14px}
  .stick b{font:400 25px/1 var(--serif)}
  .wip li{min-height:0;padding:14px}
  .wip h3{font-size:22px;padding-top:16px}
  .wip p{font-size:15px}
  .hd__tag{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){
  .stage{height:auto}.pin{position:relative}
  .stage .pin{height:auto;min-height:100svh}
  .hero{position:relative;left:auto;right:auto;bottom:auto;padding:60svh var(--px) 40px}
  .beat{position:relative;opacity:1;visibility:visible;inset:auto;padding:30px 0 60px}
  .arm,.beat__h{position:relative;top:auto;left:auto;right:auto;transform:none;padding-left:var(--px);padding-right:var(--px)}
  .ast{height:auto}.pin--a{height:auto;min-height:100svh;padding-bottom:120px}
}
.no-gl .beat{position:relative;opacity:1;visibility:visible;inset:auto}
.no-gl .stage{height:auto}.no-gl .pin{position:relative}