/* Startseite, unverändert aus der Cloudflare-Fassung übernommen */
/* ==================================================================
   ENTWURF B · dieselben Texte, anderes Raster.
   Unterschiede zur laufenden Fassung:
     · 12-Spalten-Raster statt voller Breite
     · klebender Sequenzmarker je Abschnitt statt Instrumentenleiste
     · Capabilities als 2x2-Feld statt vier Zeilen
     · Prozess vertikal mit hängenden Nummern statt Querstreifen
     · Platten versetzt im Raster statt dreimal randlos
   ================================================================== */
:root{
  --base-900:#0B0F0E; --base-850:#0E1312; --base-800:#121817;
  --bone:#E9E2D6; --bone-2:#C3C0B6; --muted:#8A928C;
  --line:rgba(233,226,214,.13); --line-2:rgba(233,226,214,.07);
  --k:#BFD4EE; --k-soft:rgba(191,212,238,.16); --k-glow:rgba(191,212,238,.06);

  --f8:333ms; --f12:500ms; --f18:750ms; --f24:1000ms; --f36:1500ms;
  --ease-rack:cubic-bezier(.16,1,.3,1);

  --gut:clamp(20px,4.4vw,72px);
  --col-gap:clamp(14px,1.8vw,30px);
  --max:1620px;

  --fd:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fb:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wd:"wdth" 108; --wb:"wdth" 100;
  --fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--base-900);color:var(--bone);
  font-family:var(--fb);font-variation-settings:var(--wb);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 70% at 92% 0%,var(--k-glow),transparent 60%);
  transition:background var(--f36) linear;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--k);outline-offset:3px}
::selection{background:var(--k);color:var(--base-900)}

.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;
  opacity:.04;mix-blend-mode:screen;background-repeat:repeat;will-change:transform}

/* ---------- Display ---------- */
.nm,.h1,.st,.stl,.tri,.cn,.pt,.ch,.cby{
  font-family:var(--fd);font-variation-settings:var(--wd);
  font-weight:300;text-transform:uppercase;letter-spacing:.1em;
}
.h1 em,.st em,.ch em,.stl em{font-style:normal;color:var(--k);transition:color var(--f36) linear}

/* ---------- Raster ---------- */
.page{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.g{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--col-gap)}
@media (min-width:900px){ .g{grid-template-columns:repeat(12,1fr)} }

/* Spaltenhilfen */
.c-all{grid-column:1/-1}
@media (min-width:900px){
  .c-mark{grid-column:1/3}
  .c-body{grid-column:3/13}
  .c-text{grid-column:3/9}
  .c-side{grid-column:10/13}
  .c-wide{grid-column:3/12}
  .c-lead{grid-column:1/9}
  .c-data{grid-column:10/13}
}

/* ---------- Fortschrittslinie ---------- */
.prog{position:fixed;left:0;top:0;height:2px;z-index:90;background:var(--k);width:0;
  transition:background var(--f36) linear}

/* ---------- Kopf ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background var(--f12) linear,border-color var(--f12) linear;
  border-bottom:1px solid transparent}
.top.is-stuck{background:rgba(11,15,14,.8);backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.top__in{max-width:var(--max);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:20px}
.nm{font-size:12px;line-height:1;letter-spacing:.2em;text-decoration:none;white-space:nowrap}
.nav{display:none;gap:clamp(16px,2vw,30px);margin-left:auto}
.nav a{font:500 10px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:6px 0;position:relative;transition:color var(--f8) linear}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--k);
  transition:right var(--f12) var(--ease-rack)}
.nav a:hover{color:var(--bone)} .nav a:hover::after{right:0}
@media (min-width:820px){ .nav{display:flex} }

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(130px,20vh,210px) clamp(56px,9vh,110px);overflow:hidden}
.hero__light{position:absolute;right:0;top:0;bottom:0;width:min(46%,760px);z-index:0}
.hero__light canvas{width:100%;height:100%;display:block}
.hero__light::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--base-900),transparent 42%,transparent 70%,rgba(11,15,14,.85))}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;
  opacity:0;transition:opacity var(--f36) linear;pointer-events:none}
.hero__vid.is-on{opacity:1}
.hero__mask{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity var(--f36) linear;
  background:
    linear-gradient(90deg,rgba(11,15,14,.95) 0%,rgba(11,15,14,.80) 32%,rgba(11,15,14,.22) 64%,rgba(11,15,14,.58) 100%),
    linear-gradient(180deg,rgba(11,15,14,.74),transparent 28%,transparent 60%,rgba(11,15,14,.94))}
.hero__vid.is-on ~ .hero__mask{opacity:1}
@media (max-width:900px){
  .hero__mask{background:
    linear-gradient(180deg,rgba(11,15,14,.55) 0%,rgba(11,15,14,.18) 26%,rgba(11,15,14,.62) 52%,rgba(11,15,14,.92) 78%,rgba(11,15,14,.97) 100%)}
}
.hero .page{position:relative;z-index:2}
.h1{font-size:clamp(1.5rem,4vw,3.3rem);line-height:1.2;margin:0;text-wrap:balance;will-change:transform}
.hero__sub{font-family:var(--fb);font-variation-settings:var(--wb);font-weight:400;
  font-size:clamp(1.05rem,2.1vw,1.7rem);line-height:1.26;letter-spacing:-.014em;
  margin:clamp(16px,2vw,26px) 0 0;color:var(--bone-2);max-width:34ch}
.hero__sub b{color:var(--k);font-weight:400;transition:color var(--f36) linear}
.hero__cta{margin-top:clamp(30px,4.5vw,52px)}

/* rechte Datenspalte statt Rollenzeile quer */
.data{border-top:1px solid var(--line);padding-top:14px;margin-top:clamp(34px,4vw,0)}
@media (min-width:900px){ .data{margin-top:.6em} }
.data dl{display:grid;grid-template-columns:1fr;gap:12px 0;margin:0}
.data dt{font:500 9px/1 var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.data dd{margin:5px 0 0;font:400 11px/1.55 var(--fm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.data dd:last-of-type{border-bottom:0}
.data dd b{color:var(--k);font-weight:500;transition:color var(--f36) linear}

.btn{display:inline-flex;align-items:center;gap:12px;
  font:500 11px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:16px 26px;border-radius:999px;border:1px solid var(--bone);
  color:var(--base-900);background:var(--bone);
  transition:background var(--f12) var(--ease-rack),color var(--f12) linear,
             border-color var(--f12) linear,transform var(--f12) var(--ease-rack)}
.btn:hover{background:var(--k);border-color:var(--k);transform:translateY(-2px)}
.btn i{width:14px;height:1px;background:currentColor;display:block;transition:width var(--f12) var(--ease-rack)}
.btn:hover i{width:24px}

/* ---------- Abschnitt mit klebendem Marker ---------- */
.seq{padding-block:clamp(70px,9vw,140px);border-top:1px solid var(--line-2);scroll-margin-top:80px}
.mark{display:flex;gap:14px;align-items:baseline;margin-bottom:26px}
@media (min-width:900px){
  .mark{position:sticky;top:96px;align-self:start;display:block;margin-bottom:0}
}
.mark__no{font:500 10px/1 var(--fm);letter-spacing:.26em;color:var(--k);display:block;
  transition:color var(--f36) linear}
.mark__k{font:400 10px/1 var(--fm);letter-spacing:.16em;color:var(--muted);display:block;
  margin-top:8px;font-variant-numeric:tabular-nums}
.mark__r{display:none;height:1px;background:var(--line);margin-top:16px}
@media (min-width:900px){ .mark__r{display:block} }

.st{font-size:clamp(1rem,2vw,1.7rem);line-height:1.3;margin:0;max-width:24ch;text-wrap:balance}
.sub{margin:16px 0 0;max-width:54ch;color:var(--bone-2)}

/* ---------- 01 Positionierung ---------- */
.stl{display:block;font-size:clamp(1.3rem,3.4vw,2.7rem);line-height:1.24;letter-spacing:.075em;margin:0}
.stl + .stl{margin-top:.1em}
.stmt__sub{margin:clamp(30px,4vw,54px) 0 0;max-width:44ch;
  font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.5;color:var(--bone-2)}
.stmt__cap{margin:16px 0 0;font:400 10px/1.8 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- 02 Triade ---------- */
.tri{font-size:clamp(1.7rem,5.6vw,4.2rem);line-height:1;letter-spacing:.06em;color:var(--bone)}
.triad{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(8px,1.4vw,22px);
  margin:0 0 clamp(34px,5vw,60px)}
.triad .tri:nth-child(3){color:var(--k);transition:color var(--f36) linear}
.tx{font-family:var(--fm);font-size:clamp(.9rem,2vw,1.6rem);line-height:1;color:var(--muted);
  transform:translateY(-.18em)}
.trio{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:760px){ .trio{grid-template-columns:repeat(3,1fr)} }
.trio__c{padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .trio__c{padding:22px clamp(16px,2vw,30px) 28px;border-bottom:0;border-left:1px solid var(--line)}
  .trio__c:first-child{padding-left:0;border-left:0}
}
.trio__k{font:500 10px/1 var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--k);
  margin:0 0 12px;transition:color var(--f36) linear}
.trio__c p{margin:0;color:var(--bone-2);max-width:32ch}
.note{margin:clamp(24px,3.5vw,40px) 0 0;max-width:50ch;color:var(--bone-2)}
.note b{color:var(--bone);font-weight:500}

/* ---------- 03 Capabilities als 2x2 ---------- */
.caps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media (min-width:760px){ .caps{grid-template-columns:1fr 1fr} }
.cap{position:relative;padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .cap{padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,38px) clamp(30px,3.4vw,44px)}
  .cap:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}
  .cap:nth-child(even){padding-right:0}
}
.cap::before{content:"";position:absolute;left:0;top:-1px;right:100%;height:1px;background:var(--k);
  transition:right var(--f18) var(--ease-rack)}
.cap:hover::before{right:0}
.cap__i{font:500 10px/1 var(--fm);letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:14px}
.cn{font-size:clamp(.9rem,1.4vw,1.12rem);line-height:1.4;margin:0 0 12px;transition:color var(--f12) linear}
.cap:hover .cn{color:var(--k)}
.cap p{margin:0;color:var(--bone-2);max-width:40ch}
.cap__t{margin:14px 0 0;font:400 10px/1.7 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- Platten im Raster ---------- */
.plate{position:relative;margin:0;overflow:hidden;background:var(--base-850);
  border:1px solid var(--line-2)}
.plate img{width:100%;height:110%;object-fit:cover;display:block;will-change:transform}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,14,.4),transparent 30%,transparent 64%,rgba(11,15,14,.74))}
.plate figcaption{position:absolute;z-index:2;right:14px;bottom:12px;
  font:500 9px/1 var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--bone-2);
  background:rgba(11,15,14,.34);backdrop-filter:blur(5px);padding:7px 11px;border:1px solid var(--line-2)}

.band{padding-block:clamp(10px,2vw,28px)}
/* 1 · randlos über die volle Breite */
.plate--bleed{aspect-ratio:2.39/1;border-inline:0;border-radius:0}
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
/* 2 und 3 · Dreierreihen im Raster */
.trip .g{row-gap:var(--col-gap)}
.sh{position:relative;margin:0;overflow:hidden;aspect-ratio:3/2;grid-column:1/-1;
  background:var(--base-850);border:1px solid var(--line-2)}
.sh img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.005);transition:transform var(--f36) var(--ease-rack),
  filter var(--f24) linear;filter:saturate(.96)}
.sh:hover img{transform:scale(1.035);filter:saturate(1.04)}
.sh::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,14,.26),transparent 34%,transparent 66%,rgba(11,15,14,.58))}
@media (min-width:900px){
  .trip .sh:nth-of-type(1){grid-column:1/5}
  .trip .sh:nth-of-type(2){grid-column:5/9}
  .trip .sh:nth-of-type(3){grid-column:9/13}
}
.plate video,.sh video{width:100%;height:100%;object-fit:cover;display:block}
.plate--bleed video{height:104%}
/* Einzelne versetzte Platte, rechte Rasterhälfte */
.one .sh{aspect-ratio:3/2}
@media (min-width:900px){ .trip.one .sh:nth-of-type(1){grid-column:5/13} }
.trip__k{grid-column:1/-1;margin:2px 0 0;text-align:right;
  font:400 10px/1.8 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- 04 About ---------- */
.lead{margin:0 0 1em;max-width:26ch;color:var(--bone);
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.34;letter-spacing:-.014em}
.lead em{font-style:normal;color:var(--k);transition:color var(--f36) linear}
.ab p{margin:0 0 1.05em;max-width:50ch;color:var(--bone-2)}
.portrait{position:relative;margin:0 0 24px;overflow:hidden;aspect-ratio:4/5;
  background:var(--base-850);border:1px solid var(--line-2)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,14,.3),transparent 32%,transparent 58%,rgba(11,15,14,.76))}
.portrait figcaption{position:absolute;left:13px;bottom:11px;z-index:2;
  font:500 9px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--bone-2)}
.place{font-family:var(--fd);font-variation-settings:var(--wd);font-weight:300;
  text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.85rem,1.3vw,1.02rem);
  line-height:1.6;margin:0;color:var(--bone);border-top:1px solid var(--line);padding-top:18px}
.place span{display:block;color:var(--muted)}
.facts{display:grid;gap:9px 16px;grid-template-columns:auto 1fr;margin:22px 0 0;
  font:400 10px/1.6 var(--fm);letter-spacing:.12em;text-transform:uppercase}
.facts dt{color:var(--muted)} .facts dd{margin:0;color:var(--bone-2);text-align:right}

/* ---------- 05 Prozess vertikal ---------- */
.steps{border-top:1px solid var(--line);counter-reset:s}
.step{display:grid;grid-template-columns:1fr;gap:6px clamp(20px,3vw,48px);
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);position:relative}
@media (min-width:760px){ .step{grid-template-columns:56px minmax(180px,.7fr) minmax(0,1.6fr);align-items:baseline} }
.step::before{content:"";position:absolute;left:0;top:-1px;right:100%;height:1px;background:var(--k);
  transition:right var(--f18) var(--ease-rack)}
.step:hover::before{right:0}
.step__n{font:500 10px/1 var(--fm);letter-spacing:.2em;color:var(--k);
  font-variant-numeric:tabular-nums;transition:color var(--f36) linear}
.pt{font-size:clamp(.82rem,1.2vw,1rem);line-height:1.5;margin:0}
.step p{margin:0;color:var(--bone-2);max-width:44ch}

/* ---------- 06 Kontakt ---------- */
.ch{font-size:clamp(1.35rem,3.6vw,2.9rem);line-height:1.22;letter-spacing:.08em;
  margin:0 0 clamp(18px,2.6vw,30px);max-width:22ch;text-wrap:balance}
.cline{margin:0 0 clamp(28px,4vw,46px);max-width:40ch;color:var(--bone-2);font-size:clamp(1rem,1.3vw,1.12rem)}
.avail{display:block;position:relative;text-decoration:none;margin:clamp(30px,4vw,50px) 0 0;
  padding:clamp(22px,2.8vw,30px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.avail::before{content:"";position:absolute;left:0;top:-1px;right:100%;height:1px;background:var(--k);
  transition:right var(--f18) var(--ease-rack)}
.avail:hover::before,.avail:focus-visible::before{right:0}
.avail__l{display:flex;align-items:center;gap:clamp(12px,2vw,20px);
  font-family:var(--fd);font-variation-settings:var(--wd);font-weight:300;
  text-transform:uppercase;letter-spacing:.11em;font-size:clamp(.88rem,1.7vw,1.3rem);line-height:1.4;
  color:var(--k);transition:color var(--f36) linear}
.avail__l i{flex:0 0 auto;width:26px;height:1px;background:currentColor;display:block;
  transition:width var(--f12) var(--ease-rack)}
.avail:hover .avail__l i{width:44px}
.avail__s{display:block;margin:13px 0 0;max-width:52ch;color:var(--bone-2);
  font-size:clamp(.94rem,1.1vw,1.02rem);line-height:1.55}
.cells{display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:1fr;margin-top:clamp(40px,5vw,70px)}
@media (min-width:700px){ .cells{grid-template-columns:repeat(3,1fr)} }
.cell{border-top:1px solid var(--line);padding-top:15px}
.cell h3{font:500 10px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.cell p{margin:0;font-size:.96rem;color:var(--bone-2)}
.cell a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line);
  transition:color var(--f8) linear,border-color var(--f8) linear}
.cell a:hover{color:var(--k);border-color:var(--k)}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line-2);padding-block:clamp(50px,7vw,90px) 40px}
.credit{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;
  padding-bottom:clamp(40px,5vw,66px)}
.cby{margin:0;letter-spacing:.24em;font-size:clamp(.8rem,1.5vw,1.08rem);line-height:1.5;color:var(--bone)}
.croles{margin:0;font:400 10px/1.9 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);max-width:70ch;text-wrap:balance}
.legal{display:flex;flex-wrap:wrap;gap:13px 26px;align-items:center;padding-top:22px;
  border-top:1px solid var(--line-2);font:400 10px/1.6 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.legal a{color:var(--muted);text-decoration:none;transition:color var(--f8) linear}
.legal a:hover{color:var(--bone)}
.legal .end{width:100%}
@media (min-width:820px){ .legal .end{width:auto;margin-left:auto} }

/* ---------- Reveals ---------- */
.anim .rv{opacity:.001;transform:translateY(18px);
  transition:opacity var(--f18) linear,transform var(--f24) var(--ease-rack)}
.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
  .grain{display:none}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}

/* ---------- Sprachumschalter DE · EN · IT ---------- */
.langs{display:flex;gap:2px;margin-left:auto}
.nav + .langs{margin-left:clamp(16px,2vw,30px)}
@media (max-width:819px){ .langs{margin-left:auto} }
.langs a{font:500 10px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--muted);padding:6px 6px;transition:color var(--f8) linear}
.langs a:hover{color:var(--bone)}
.langs a[aria-current="page"]{color:var(--k);transition:color var(--f36) linear}