/* ═══════════════════════════════════════════════════════════════════
   orangeferdi.at — "Front Panel"
   Gestaltungsidee: Die Seite ist ein Gerät, das ich selbst gebaut und
   selbst beschriftet habe. Gravierte Panel-Beschriftung, Typenschild,
   Lüftungsraster, Passermarken, Status-LEDs, Aufbau-Log, Host-Board.
   Jedes Gestaltungsmittel trägt eine echte Information.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Lenis (erforderlich, sonst greift Smooth Scroll nicht) ── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}


/* ══ 1 · Tokens ══════════════════════════════════════════════════ */
:root{
  /* Gehäuse — warmes Graphit, kein reines Schwarz */
  --void:#131211;          /* Seitengrund                    */
  --panel:#1B1917;         /* erhabene Fläche                */
  --panel-2:#221F1C;       /* Fläche in der Fläche           */
  --inset:#0E0D0C;         /* vertiefte Fläche (Fenster)     */

  /* Gravuren — warmgrau */
  --etch:#282522;
  --etch-2:#37332E;
  --etch-3:#4C4741;

  /* Beschriftung */
  --silk:#EEE9E2;          /* gebrochenes Weiß, leicht warm  */
  --silk-2:#B8B0A5;        /* Fließtext                      */
  --silk-3:#968E83;        /* Bezeichner, Sekundärdaten      */
  --silk-4:#857D72;        /* schwächste Stufe — AA auf --void */

  /* Signal — die eine laute Farbe */
  --sig:#F97C2C;
  --sig-hi:#FFA060;
  --sig-lo:rgba(249,124,44,.13);
  --sig-ln:rgba(249,124,44,.34);

  /* Status — semantisch, bewusst nicht der Akzent */
  --led:#7FC98A;
  --led-lo:rgba(127,201,138,.14);
  --led-off:#5A544C;
  --warn:#E2565B;

  --w:1240px;
  --rail:96px;             /* Bezeichnerspalte links         */
  --railgap:34px;

  --f-disp:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:80px}
body{
  background:var(--void);
  color:var(--silk);
  font-family:var(--f-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Feines Rastergewebe — Platinenkaro, sehr leise */
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:center top;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
b,strong{font-weight:600;color:var(--silk)}
::selection{background:var(--sig);color:#131211}

/* Raster-Glühen — die Leiterbahnen unter dem Zeiger leuchten auf.
   Liegt auf z-index:-1, also über dem Seitengrund und unter allem
   anderen: undurchsichtige Flächen decken es von selbst ab.        */
.glow{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .5s ease;contain:layout paint;
  background-image:
    radial-gradient(circle 230px at var(--mx,-500px) var(--my,-500px),
      rgba(249,124,44,.035),transparent 70%),
    linear-gradient(rgba(249,124,44,.3) 1px,transparent 1px),
    linear-gradient(90deg,rgba(249,124,44,.3) 1px,transparent 1px);
  background-size:auto,56px 56px,56px 56px;
  background-position:0 0,center var(--gy,0px),center var(--gy,0px);
  -webkit-mask-image:radial-gradient(circle 220px at var(--mx,-500px) var(--my,-500px),
    rgba(0,0,0,.82) 0,rgba(0,0,0,.4) 48%,transparent 78%);
  mask-image:radial-gradient(circle 220px at var(--mx,-500px) var(--my,-500px),
    rgba(0,0,0,.82) 0,rgba(0,0,0,.4) 48%,transparent 78%);
}
.glow.on{opacity:1}
/* ohne Zeiger oder bei reduzierter Bewegung: gar nicht erst rendern */
@media(hover:none),(prefers-reduced-motion:reduce){.glow{display:none}}

/* ══ 2 · Bausteine ═══════════════════════════════════════════════ */
.w{max-width:var(--w);margin:0 auto;padding:0 28px}

/* Lüftungsraster des Gehäuses — Deko, immer sehr leise */
.vent{
  position:absolute;pointer-events:none;
  background-image:radial-gradient(rgba(184,176,165,.42) .9px,transparent 1px);
  background-size:6px 6px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
  opacity:.24;
}

.fid{position:relative}

/* Fenster — jede Bildfläche ist ein vertieftes Sichtfenster */
.win{
  position:relative;overflow:hidden;background:var(--inset);
  border:1px solid var(--etch-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 0 34px rgba(0,0,0,.55);
}
.win img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .8s ease,transform 1s var(--ease),filter .5s ease;
}
.win img.ok{opacity:1}
a:hover .win img{transform:scale(1.028)}
/* leere Bildfläche — Schraffur wie im Plan: "Fläche noch zu füllen" */
.slot{
  display:grid;place-items:center;
  background-image:repeating-linear-gradient(45deg,
    rgba(184,176,165,.05) 0 1px,transparent 1px 9px);
}
.slot > span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--silk-4);text-align:center;
  line-height:2;padding:0 18px;
}

/* Status-LED */
.led{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--led);
  white-space:nowrap;
}
.led::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--led);box-shadow:0 0 0 3px var(--led-lo);flex:0 0 auto;
  animation:beat 3.4s ease-in-out infinite;
}
.led.dead{color:var(--silk-3)}
.led.dead::before{background:var(--led-off);box-shadow:none;animation:none}
@keyframes beat{0%,72%,100%{opacity:1}82%{opacity:.32}}

/* Chip — Leistungsmerkmal, wie eine Anschlussbeschriftung */
.chip{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--silk-3);
  border:1px solid var(--etch-2);padding:3px 8px;white-space:nowrap;
  background:rgba(255,255,255,.012);
}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* Datenzeile unter Projekten */
.tline{
  margin-top:18px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--silk-3);line-height:1.9;
}
.dom{
  display:block;font-family:var(--f-mono);font-size:12px;font-weight:400;
  letter-spacing:.04em;color:var(--silk-3);margin-top:10px;
  transition:color .25s;
}
a:hover .dom{color:var(--sig)}

/* ══ 3 · Wortmarke ═══════════════════════════════════════════════ */
.wordmark,.wm-small{
  font-family:"Noto Sans","Arial Black",Arial,sans-serif;font-weight:900;
  font-synthesis:none;letter-spacing:-.015em;display:inline-block;white-space:nowrap;
}
.wordmark{font-size:clamp(34px,5.4vw,62px);line-height:1}
.wm-small{font-size:16px}
.wordmark .w1,.wm-small .w1,.wordmark .w2,.wm-small .w2{transition:color .38s var(--ease)}
.wordmark .w1,.wm-small .w1{color:var(--silk)}
.wordmark .w2,.wm-small .w2{color:var(--sig)}
.wordmark:hover .w1,.wm-small:hover .w1,
a:hover > .wordmark .w1,a:hover > .wm-small .w1{color:var(--sig)}
.wordmark:hover .w2,.wm-small:hover .w2,
a:hover > .wordmark .w2,a:hover > .wm-small .w2{color:var(--silk)}

/* ══ 4 · Navigation — Frontblende ════════════════════════════════ */
nav{
  position:fixed;inset:0 0 auto 0;z-index:70;
  background:rgba(19,18,17,.6);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);
  backdrop-filter:blur(26px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
nav.stuck{border-bottom-color:var(--etch);background:rgba(19,18,17,.72)}
/* Ohne Weichzeichner bliebe der Text über Inhalten unlesbar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav{background:rgba(19,18,17,.92)}
  nav.stuck{background:rgba(19,18,17,.96)}
}
.nv{
  max-width:var(--w);margin:0 auto;padding:13px 28px;
  display:flex;align-items:center;gap:22px;
}
.menu{
  margin-left:auto;display:flex;gap:2px;list-style:none;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--silk-3);
}
.menu a{position:relative;display:block;padding:6px 11px;transition:color .25s}
.menu a::before{
  content:"";position:absolute;left:11px;right:11px;bottom:1px;height:1px;
  background:var(--sig);transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease);
}
.menu a:hover{color:var(--silk)}
.menu a:hover::before,.menu a.active::before{transform:scaleX(1);transform-origin:left}
.menu a.active{color:var(--sig)}

/* Fortschritt — echte Zustandsanzeige, kein Zierrat */
.prog{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:transparent}
.prog i{
  display:block;height:100%;width:0;background:var(--sig);
  box-shadow:0 0 8px var(--sig-ln);transform-origin:left;
}

.nv-soc{display:flex;align-items:center;gap:8px}
.nv-soc a{
  display:grid;place-items:center;width:31px;height:31px;
  border:1px solid var(--etch-2);color:var(--silk-3);
  transition:color .3s,border-color .3s,background .3s;
}
.nv-soc a:hover{color:var(--sig);border-color:var(--sig-ln);background:var(--sig-lo)}
.nv-soc svg{width:14px;height:14px;fill:currentColor}

.burger{
  display:none;background:none;border:1px solid var(--etch-2);cursor:pointer;
  width:34px;height:31px;padding:0;position:relative;
}
.burger span{
  display:block;height:1px;background:var(--silk);width:15px;position:absolute;
  left:9px;transition:transform .3s var(--ease),opacity .3s;
}
.burger span:first-child{top:11px}
.burger span:last-child{bottom:11px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media(max-width:1080px){
  .burger{display:block;order:3}
  .nv-soc{margin-left:auto;order:2}
  .menu{
    position:fixed;inset:52px 0 auto 0;flex-direction:column;gap:0;
    background:rgba(19,18,17,.86);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
    max-height:0;overflow:hidden;font-size:12.5px;
    transition:max-height .45s var(--ease);border-bottom:1px solid transparent;
  }
  .menu.open{max-height:78vh;border-bottom-color:var(--etch)}
  .menu li{padding:0 28px}
  .menu a{padding:15px 0;border-bottom:1px solid var(--etch)}
  .menu a::before{display:none}
  .menu li:last-child a{border-bottom:0}
}

/* ══ 5 · Sektionsgerüst — Bezeichnerspalte + Bus ═════════════════ */
.sec,.story,.end{position:relative}
.rows{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 var(--railgap)}
/* der Bus: eine durchgehende Leitung am linken Rand des Inhalts */
.rail{
  position:relative;border-right:1px solid var(--etch-2);
  padding-top:6px;
}
.rail .r-id{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silk-2);display:block;line-height:1.5;
}
.rail .r-note{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--silk-4);display:block;margin-top:7px;line-height:1.6;
}
.body-col{min-width:0;padding-bottom:2px}

@media(max-width:980px){
  .rows{grid-template-columns:1fr;gap:0}
  .rail{
    border-right:0;border-left:2px solid var(--sig);padding:0 0 0 12px;
    margin-bottom:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  }
  .rail .r-note{margin-top:0}
}

/* Sektionskopf */
.sec{padding:92px 0}
.sh{position:relative;margin-bottom:44px}
.sh h2{
  font-family:var(--f-disp);font-size:clamp(26px,3.4vw,38px);font-weight:700;
  letter-spacing:-.012em;line-height:1.08;text-wrap:balance;
}
/* Leiterbahn unter der Überschrift, läuft nach rechts aus */
.sh::after{
  content:"";display:block;margin-top:20px;height:1px;
  background:linear-gradient(90deg,var(--etch-3),var(--etch-2) 40%,var(--etch) 68%,transparent);
}

.intro-p{
  color:var(--silk-2);max-width:64ch;font-size:16.5px;margin-bottom:40px;
}

/* ── Server-Rack über dem Host-Board ───────────────────────────────
   Vier Einschübe, zwei davon aktiv — dieselbe Zählung wie daneben.
   Die LEDs flackern nur, solange das Rack im Bild ist.              */
.fig{
  width:clamp(112px,15vw,184px);height:auto;flex:0 0 auto;
  fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}
.fig .g-ln{stroke:var(--etch-3);transition:stroke .35s var(--ease)}
.fig .g-dim{stroke:var(--etch-2);transition:stroke .35s var(--ease)}
.fig .fill-led{fill:var(--led);stroke:none}
.fig .fill-dim{fill:var(--etch-2);stroke:none}
.fig-inline{align-self:flex-end;margin-left:auto;margin-bottom:-8px}
@media(max-width:600px){.fig{display:none}}

.fig.live .g-act{animation:fig-act 2.8s steps(1) infinite}
.fig .g-act-2{animation-delay:.85s}
@keyframes fig-act{0%,54%{opacity:1}58%{opacity:.18}64%{opacity:1}70%{opacity:.22}76%,100%{opacity:1}}

.fig:hover .g-ln{stroke:var(--silk-4)}
.fig:hover .g-dim{stroke:var(--etch-3)}

/* ══ 6 · Hero — Frontblende mit Typenschild ══════════════════════ */
header{padding:132px 0 84px;position:relative;overflow:hidden}
header .vent{
  top:96px;left:0;width:100%;height:180px;opacity:.1;
  -webkit-mask-image:radial-gradient(60% 90% at 12% 40%,#000,transparent);
  mask-image:radial-gradient(60% 90% at 12% 40%,#000,transparent);
}
.hero{
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);
  gap:56px;align-items:start;position:relative;
}
.hero-mark{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.hero-mark .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--etch-3),transparent)}
.hero h1{
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(31px,4.5vw,54px);line-height:1.07;letter-spacing:-.014em;
  max-width:19ch;text-wrap:balance;
}
.hero h1 .or{color:var(--sig)}
.hero .body{color:var(--silk-2);margin-top:22px;font-size:16.5px;max-width:60ch}
.hero .body + .body{margin-top:15px}

/* Einheit: Sichtfenster + graviertes Typenschild in einem Bauteil */
.unit{border:1px solid var(--etch-2);background:var(--panel);position:relative}
.unit-hd{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--etch);
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silk-3);
}
.portrait{
  aspect-ratio:2/3;border:0;
  box-shadow:inset 0 -96px 66px -46px rgba(19,18,17,.96);
}
.portrait img{object-position:center 18%;filter:grayscale(.42) contrast(1.05)}
.portrait:hover img{filter:grayscale(0) contrast(1)}
/* Kennzahlen — Zeile unter dem Text, wie ursprünglich */
.metaline{
  margin-top:32px;padding-top:22px;position:relative;
  display:flex;flex-wrap:wrap;gap:20px 40px;
}
.metaline::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--sig) 0 52px,var(--etch-3) 52px,var(--etch-2) 45%,var(--etch) 72%,transparent);
}
.mi{display:flex;align-items:center;gap:12px}
.mi svg{
  width:19px;height:19px;stroke:var(--sig);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}
.mi b{
  font-family:var(--f-disp);font-size:19px;font-weight:700;letter-spacing:-.008em;
  display:block;line-height:1.25;font-variant-numeric:tabular-nums;
}
.mi span{
  font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--silk-4);display:block;
}

@media(max-width:900px){
  header{padding:112px 0 64px}
  .hero{grid-template-columns:1fr;gap:38px}
  .unit{max-width:430px}
  .portrait{aspect-ratio:3/2}
}

/* ══ 7 · Werdegang — Aufbau-Log des Stacks ═══════════════════════ */
.build{list-style:none;position:relative}
.step{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:38px;
  padding:26px 0 26px 30px;position:relative;
  border-bottom:1px solid var(--etch);
}
.step:first-child{border-top:1px solid var(--etch)}
/* Leiterbahn mit T-Abzweig */
.build::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--etch-2);
}
.step::before{
  content:"";position:absolute;left:0;top:41px;width:16px;height:1px;
  background:var(--etch-2);transition:background .3s;
}
.step::after{
  content:"";position:absolute;left:-3px;top:38px;width:7px;height:7px;
  background:var(--void);border:1px solid var(--etch-3);transition:border-color .3s,background .3s;
}
.step:hover::before{background:var(--sig-ln)}
.step:hover::after,.step.now::after{border-color:var(--sig);box-shadow:0 0 0 2px var(--sig-lo)}
.step .add{
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  color:var(--silk-4);display:block;margin-bottom:9px;
}
.step .add b{color:var(--sig);font-weight:500}
.step .tech{
  font-family:var(--f-disp);font-size:clamp(21px,2.5vw,27px);font-weight:700;
  letter-spacing:-.01em;line-height:1.1;transition:color .25s;
}
.step:hover .tech{color:var(--sig)}
.step .role{
  display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:var(--silk-4);margin-top:9px;
  line-height:1.7;
}
.step .why{color:var(--silk-2);font-size:15.8px;max-width:66ch}
.step .why .side{
  display:block;margin-top:12px;padding-left:13px;border-left:1px solid var(--sig-ln);
  font-size:14.5px;color:var(--silk-3);
}
@media(max-width:860px){
  .step{grid-template-columns:1fr;gap:12px;padding-left:24px}
  .step::before{top:33px;width:12px}
  .step::after{top:30px}
}

/* ══ 8 · Projekte — Bildschirm im Rahmen ═════════════════════════ */
.feat{display:block}
.feat .win{aspect-ratio:21/9}
.feat .cap{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border:1px solid var(--etch-2);border-top:0;padding:11px 15px;
  background:var(--panel);
}
.feat .cap .path{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;color:var(--silk-3);
  transition:color .25s;
}
.feat:hover .cap .path{color:var(--sig)}
.feat .cap .led{margin-left:auto}
.feat .under{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:44px;margin-top:34px;align-items:start;
}
.feat h3{
  font-family:var(--f-disp);font-size:clamp(30px,4.6vw,50px);font-weight:700;
  letter-spacing:-.022em;line-height:1;transition:color .25s;text-wrap:balance;
}
.feat:hover h3{color:var(--sig)}
.feat p{color:var(--silk-2);font-size:16.5px;max-width:62ch}
@media(max-width:860px){.feat .under{grid-template-columns:1fr;gap:20px}}

.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;
  align-items:center;margin-top:78px;padding-top:78px;border-top:1px solid var(--etch);
}
.split h3{
  font-family:var(--f-disp);font-size:clamp(25px,3.3vw,35px);font-weight:700;
  letter-spacing:-.016em;line-height:1.06;transition:color .25s;text-wrap:balance;
}
.split:hover h3{color:var(--sig)}
.split p{color:var(--silk-2);margin-top:16px;font-size:16px;max-width:60ch}
.split .win{aspect-ratio:16/10}
.split-vid{display:block}
@media(max-width:780px){.split{grid-template-columns:1fr;gap:26px;margin-top:54px;padding-top:54px}}

/* ══ 9 · Websites — Host-Board ═══════════════════════════════════ */
.board-hd{
  display:flex;align-items:baseline;gap:10px 22px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:0;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silk-4);
}
.board-hd .n{color:var(--silk-2)}
.board{border-top:1px solid var(--etch-2)}
.host{
  display:grid;grid-template-columns:158px minmax(0,1fr);gap:0 26px;
  padding:22px 0;border-bottom:1px solid var(--etch);
  transition:background .3s;
}
.host:hover{background:linear-gradient(90deg,rgba(249,124,44,.045),transparent 62%)}
.host .win{grid-row:1/span 2;aspect-ratio:16/10;align-self:start}
.host .hd{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.host .fqdn{
  font-family:var(--f-mono);font-size:14px;font-weight:500;letter-spacing:.005em;
  color:var(--silk);transition:color .25s;
}
.host:hover .fqdn{color:var(--sig)}
.host .who{
  font-family:var(--f-disp);font-size:15px;font-weight:600;color:var(--silk-3);
  letter-spacing:.005em;
}
.host .led{margin-left:auto}
.host .yr{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--silk-4);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.host .bd{margin-top:9px}
.host p{color:var(--silk-2);font-size:15px;max-width:60ch}
.host .chips{margin-top:13px}
@media(max-width:720px){
  .host{grid-template-columns:1fr;gap:16px}
  .host .win{grid-row:auto;width:100%;max-width:320px}
  .host .led{margin-left:0}
}

/* ══ 10 · Community — abgeschaltete Einheiten ════════════════════ */
.story{
  background:var(--panel);
  border-top:1px solid var(--etch-2);border-bottom:1px solid var(--etch-2);
  padding:96px 0;overflow:hidden;
}
.story::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sig-ln) 22%,transparent 60%);
}
.story .sh::after{background:linear-gradient(90deg,var(--etch-3),var(--etch-2) 42%,transparent)}
.story .win{background:#0B0A09}

.ep.lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;
  align-items:start;padding-bottom:48px;margin-bottom:48px;
  border-bottom:1px solid var(--etch-2);
}
.ep.lead .win{aspect-ratio:16/10}
@media(max-width:900px){.ep.lead{grid-template-columns:1fr;gap:28px;padding-bottom:36px;margin-bottom:40px}}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sig);
  border:1px solid var(--sig-ln);background:var(--sig-lo);padding:5px 10px;
  margin-bottom:20px;
}
.num{
  font-family:var(--f-disp);font-weight:700;letter-spacing:-.03em;line-height:.85;
  color:var(--sig);font-variant-numeric:tabular-nums;
  font-size:clamp(44px,6vw,76px);
}
.ep.lead .num{font-size:clamp(54px,8.4vw,96px)}
.num small{
  display:block;margin-top:14px;font-family:var(--f-mono);font-size:10px;
  font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--silk-4);
  line-height:1.7;
}
.ep.off .num{color:var(--silk-2)}
.cnt{display:inline-block;font-variant-numeric:tabular-nums}

.eps-rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start}
@media(max-width:920px){.eps-rest{grid-template-columns:1fr;gap:52px}}
.ep .win{aspect-ratio:16/10;margin-bottom:24px}
/* Bot-Ausgaben — zwei Discord-Nachrichten, wie auf den Tisch geworfen */
.botstack{
  position:relative;aspect-ratio:16/10;margin-bottom:24px;overflow:hidden;
  border:1px solid var(--etch-2);background-color:var(--inset);
  background-image:repeating-linear-gradient(45deg,rgba(184,176,165,.05) 0 1px,transparent 1px 9px);
}
.botstack .bs{
  position:absolute;top:9%;width:44%;cursor:zoom-in;
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  transition:transform .45s var(--ease);
}
.botstack .bs:first-child{left:7%;transform:rotate(-4deg)}
.botstack .bs:last-child{right:7%;top:14%;transform:rotate(3deg)}
.botstack .bs img{display:block;width:100%;height:auto;border-radius:4px}
.botstack figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.botstack:hover .bs:first-child{transform:rotate(-6deg) translate(-4%,-2%)}
.botstack:hover .bs:last-child{transform:rotate(5deg) translate(4%,-2%)}
.botstack .bs:hover,.botstack .bs:focus-visible{z-index:2}
/* drei Nachrichten: zwei hochkant, die breite Auslosung quer darüber */
.botstack.trio .bs:first-child{left:6%;top:6%;width:38%}
.botstack.trio .bs:nth-child(2){right:6%;top:9%;width:38%;transform:rotate(3deg)}
.botstack.trio .bs:last-child{left:24%;right:auto;top:auto;bottom:9%;width:52%;transform:rotate(-1.5deg);z-index:1}
.botstack.trio:hover .bs:nth-child(2){transform:rotate(5deg) translate(4%,-2%)}
.botstack.trio:hover .bs:last-child{transform:rotate(-1deg) translateY(-4%)}
.botstack.trio .bs:hover,.botstack.trio .bs:focus-visible{z-index:3}
.ep h3{
  font-family:var(--f-disp);font-size:clamp(21px,2.5vw,26px);font-weight:700;
  letter-spacing:-.012em;margin-top:20px;transition:color .25s;
}
.ep.lead h3{font-size:clamp(27px,3.5vw,38px);margin-top:22px}
.ep:hover h3{color:var(--sig)}
.ep p{color:var(--silk-2);margin-top:14px;font-size:15.4px;max-width:62ch}
.ep.lead p{font-size:16.3px}
.roles{list-style:none;margin-top:15px;max-width:62ch}
.roles li{
  color:var(--silk-2);font-size:15px;padding-left:19px;position:relative;margin-bottom:11px;
}
.roles li::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--sig);
}
.ep .meta{
  margin-top:22px;padding-top:15px;border-top:1px solid var(--etch-2);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--silk-4);line-height:1.95;
}
.lnk{color:var(--sig);border-bottom:1px solid var(--sig-ln);transition:border-color .25s}
.lnk:hover{border-bottom-color:var(--sig)}

/* ══ 11 · Sticker — Druckplatten ═════════════════════════════════ */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mg{
  position:relative;aspect-ratio:1;border:1px solid var(--etch-2);
  background:var(--panel-2);overflow:hidden;
}
.mg img{
  width:100%;height:100%;object-fit:contain;padding:22px;opacity:0;
  transition:opacity .8s ease,transform .8s var(--ease);
}
.mg img.ok{opacity:1}
.mg.photo img{object-fit:cover;padding:0}
.mg:hover img{transform:scale(1.045)}
/* Bildunterschrift als Leiste — gilt für Sticker und Galerie */
.mg figcaption,.ph figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:9px 13px;
  border-top:1px solid rgba(238,233,226,.08);background:rgba(19,18,17,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--silk);
}
/* Motiv sitzt ganz unten im Foto: Beschriftung als Leiste unter dem Bild statt darüber */
.mg.cap-below{display:flex;flex-direction:column}
.mg.cap-below img{flex:1 1 auto;min-height:0;height:auto}
.mg.cap-below figcaption{position:static;background:var(--panel-2)}
/* Letzte Kachel: Link aufs Instagram-Highlight */
.mg.ig{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;
  padding:22px 18px;text-align:center;color:var(--silk-2);
  transition:border-color .25s,color .25s;
}
/* Hintergrund: der Sticker am Mast, darüber ein Verlauf für den Text */
.mg.ig::before,.mg.ig::after{content:"";position:absolute;inset:0;z-index:0}
.mg.ig::before{
  background:url(sticker/highlight-hintergrund.webp) 50% 100%/130% auto no-repeat;
  transition:transform .8s var(--ease);
}
.mg.ig::after{background:linear-gradient(to top,rgba(19,18,17,.94) 0,rgba(19,18,17,.7) 30%,transparent 58%)}
.mg.ig:hover::before{transform:scale(1.045)}
.mg.ig > *{position:relative;z-index:1}
.mg.ig svg{width:26px;height:26px;fill:currentColor;color:var(--sig)}
.mg.ig .ig-t{font-family:var(--f-disp);font-size:20px;font-weight:700;color:var(--silk)}
.mg.ig .ig-s{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--silk-3)}
.mg.ig:hover{border-color:var(--sig-ln)}
.mg.ig:hover .ig-t{color:var(--sig)}
@media(max-width:860px){.mgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mgrid{grid-template-columns:1fr}}

/* ══ 12 · Bilderstreifen ═════════════════════════════════════════ */
.strip{
  display:flex;gap:14px;overflow-x:auto;padding:8px 28px 18px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-color:var(--etch-3) var(--inset);scrollbar-width:thin;
}
.strip{scroll-padding-inline:28px}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-track{background:var(--inset)}
.strip::-webkit-scrollbar-thumb{background:var(--etch-3)}
.ph{
  flex:0 0 auto;width:min(78vw,400px);aspect-ratio:3/2;position:relative;
  overflow:hidden;background:var(--inset);border:1px solid var(--etch);
  scroll-snap-align:start;
}
.ph img{
  width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1);
  transition:opacity .8s ease,filter .55s ease,transform .8s var(--ease);
}
.ph img.ok{opacity:1}
.ph:hover img{filter:grayscale(0);transform:scale(1.035)}
/* Pfeiltasten — nur am Desktop. Dort fällt der Scrollbalken weg,
   am Handy bleibt Wischen. Bauart wie die Social-Tasten in der Navi. */
.strip-wrap{position:relative}
.strip-nav{
  position:absolute;top:50%;z-index:3;width:42px;height:42px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(27,25,23,.86);color:var(--silk-2);
  border:1px solid var(--etch-3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(-50%);
  transition:opacity .25s,color .25s,border-color .25s,background .25s;
}
.strip-nav.prev{left:16px}
.strip-nav.next{right:16px}
.strip-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.strip-nav:hover{color:var(--sig);border-color:var(--sig-ln);background:rgba(27,25,23,.96)}
.strip-nav:active{transform:translateY(calc(-50% + 1px))}
.strip-nav.off{opacity:0;pointer-events:none}
.strip-nav[hidden]{display:none}
@media(hover:hover) and (pointer:fine){
  .strip.has-nav{scrollbar-width:none;padding-bottom:8px}
  .strip.has-nav::-webkit-scrollbar{display:none}
}
@media not ((hover:hover) and (pointer:fine)){.strip-nav{display:none}}

/* Klickbare Bilder in Sticker-Raster und Streifen */
.zoom{cursor:zoom-in}
.zoom:focus-visible{outline:1px solid var(--sig);outline-offset:3px}

/* ── Lightbox ── */
.lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:var(--inset);color:var(--silk);
  display:grid;grid-template-rows:auto minmax(0,1fr);
  overscroll-behavior:contain;
}
.lb:not([open]){display:none}
.lb::backdrop{background:transparent}
.lb[open]{animation:lbIn .22s var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-hd{
  display:flex;align-items:center;gap:18px;padding:14px 18px 14px 24px;
  border-bottom:1px solid var(--etch);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.lb-cap{color:var(--silk-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph figcaption a,.lb-cap a{color:inherit;text-transform:none;border-bottom:1px solid currentColor;transition:color .25s}
.ph figcaption a:hover,.lb-cap a:hover{color:var(--sig)}
.lb-n{color:var(--silk-4);margin-left:auto;font-variant-numeric:tabular-nums}
.lb-x,.lb-go{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  background:var(--panel);color:var(--silk-2);border:1px solid var(--etch-3);
  transition:color .25s,border-color .25s,opacity .25s;
}
.lb-x:hover,.lb-go:hover{color:var(--sig);border-color:var(--sig-ln)}
.lb-x svg,.lb-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.lb-stage{position:relative;min-height:0;touch-action:pan-y}
.lb-stage img{
  position:absolute;inset:24px 76px;margin:auto;
  max-width:calc(100% - 152px);max-height:calc(100% - 48px);
  border:1px solid var(--etch-2);background:var(--panel-2);
  transition:opacity .2s ease;
}
.lb-stage img.load{opacity:.35}
.lb-go{position:absolute;top:50%;transform:translateY(-50%)}
.lb-go.prev{left:18px}
.lb-go.next{right:18px}
.lb.single .lb-go,.lb.single .lb-n{display:none}
@media(max-width:700px){
  .lb-stage img{inset:14px 10px 80px;max-width:calc(100% - 20px);max-height:calc(100% - 94px)}
  .lb-go{top:auto;bottom:16px;transform:none}
  .lb-go.prev{left:calc(50% - 52px)}
  .lb-go.next{right:calc(50% - 52px)}
}

.vidframe{
  border:1px solid var(--etch-2);aspect-ratio:16/9;background:var(--inset);
  overflow:hidden;margin-top:34px;position:relative;
}
.vidframe iframe{width:100%;height:100%;border:0;display:block}

/* ══ 13 · Kontakt — Konfigurationsfeld ═══════════════════════════ */
.end{padding:96px 0 80px;border-top:1px solid var(--etch)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:44px}}

.frm{
  display:grid;gap:0;border:1px solid var(--etch-2);background:var(--panel);
}
.frm-hd{
  display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-bottom:1px solid var(--etch);
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silk-3);
}
.frm-bd{display:grid;gap:16px;padding:20px 18px 22px}
/* Turnstile-Widget — Platz reservieren, damit nichts springt */
.ts-wrap{padding:0 18px 18px;min-height:83px}
.fr{display:grid;gap:7px}
.fr label{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silk-4);
}
.fr input,.fr textarea{
  background:var(--inset);border:1px solid var(--etch-2);border-left:2px solid var(--etch-2);
  color:var(--silk);font-family:var(--f-mono);font-size:14px;line-height:1.6;
  padding:11px 13px;width:100%;
  transition:border-color .25s,background .25s;
}
.fr input::placeholder,.fr textarea::placeholder{color:var(--silk-4)}
.fr input:focus,.fr textarea:focus{
  outline:none;border-color:var(--etch-3);border-left-color:var(--sig);background:#0B0A09;
}
.fr textarea{resize:vertical;min-height:132px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm-ft{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--etch);background:rgba(255,255,255,.012);
}
.hint{font-size:13px;color:var(--silk-4);max-width:38ch;line-height:1.6}
.msg{
  display:none;margin:0 18px 18px;padding:12px 15px;font-size:14px;
  font-family:var(--f-mono);border-left:2px solid var(--etch-2);background:var(--inset);
}
.msg.ok{display:block;border-left-color:var(--led);color:var(--led)}
.msg.err{display:block;border-left-color:var(--warn);color:#F0999C}

.side-hd{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silk-4);
  padding-bottom:9px;border-bottom:1px solid var(--etch);margin-bottom:14px;display:block;
}
.direct{
  font-family:var(--f-mono);font-size:15px;font-weight:500;color:var(--sig);
  display:inline-block;border-bottom:1px solid transparent;transition:border-color .3s;
  word-break:break-all;
}
.direct:hover{border-bottom-color:var(--sig)}
.socs{display:grid;gap:1px;background:var(--etch);border:1px solid var(--etch);margin-top:2px}
.socs a{
  display:flex;align-items:center;gap:10px;background:var(--panel);padding:11px 14px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--silk-2);
  transition:color .25s,background .25s;
}
.socs a::after{content:"\2197";margin-left:auto;color:var(--silk-4);transition:color .25s}
.socs svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto}
.socs a:hover{color:var(--sig);background:var(--panel-2)}
.socs a:hover::after{color:var(--sig)}
.aside-blk + .aside-blk{margin-top:30px}

/* ══ 14 · Fußleiste — Typenschild ════════════════════════════════ */
footer{border-top:1px solid var(--etch);padding:22px 0 38px;background:var(--panel)}
.ft{
  max-width:var(--w);margin:0 auto;padding:0 28px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--silk-4);
}
.ft .sep{color:var(--etch-3)}
.ft .links{margin-left:auto;display:flex;gap:18px}
.ft a{transition:color .25s}
.ft a:hover{color:var(--sig)}
.ft .wm-small{font-size:11px;vertical-align:-1px}

/* ══ 15 · Rechtsseiten ═══════════════════════════════════════════ */
.legal{padding:128px 28px 84px;max-width:840px}
.legal h1{
  font-family:var(--f-disp);font-size:clamp(32px,5vw,50px);font-weight:700;
  letter-spacing:-.02em;line-height:1.02;
}
.legal .stand{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silk-4);margin-top:14px;
}
.legal h2{
  font-family:var(--f-disp);font-size:clamp(19px,2.3vw,23px);font-weight:700;
  letter-spacing:-.008em;margin:46px 0 14px;padding-top:22px;border-top:1px solid var(--etch);
}
.legal h3{font-family:var(--f-disp);font-size:16.5px;font-weight:600;margin:26px 0 8px}
.legal p{color:var(--silk-2);margin-bottom:14px;max-width:70ch}
.legal ul{list-style:none;margin:8px 0 18px}
.legal li{color:var(--silk-2);padding-left:19px;position:relative;margin-bottom:9px;max-width:70ch}
.legal li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--sig)}
.legal a{color:var(--sig)}
.legal a:hover{text-decoration:underline;text-underline-offset:4px}
.fill{color:var(--sig);border-bottom:1px dashed var(--sig-ln);padding-bottom:1px}
.box{
  border:1px solid var(--etch-2);border-left:2px solid var(--sig);
  background:var(--panel);padding:20px 22px;margin:20px 0;
}
.box p:last-child{margin-bottom:0}
.backlink{
  display:inline-flex;align-items:center;gap:9px;margin-top:44px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--silk-3);transition:color .25s;
}
.backlink:hover{color:var(--sig)}

/* Projekt-Detailseiten — Rechtsseiten-Layout plus Kopfdaten */
.proj .lead{font-size:clamp(17px,1.8vw,19px);color:var(--silk-2);margin-top:16px;max-width:60ch}
.proj-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:22px 0 14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silk-3);
}
.legal .proj-meta a{color:var(--silk-3);transition:color .25s}
.legal .proj-meta a:hover{color:var(--sig);text-decoration:none}
.proj-shot{margin:34px 0 8px;aspect-ratio:16/10}
.proj-body img{max-width:100%;height:auto;border:1px solid var(--etch-2);margin:18px 0}
.proj-body ol{margin:8px 0 18px 20px;color:var(--silk-2)}
.proj-body ol li{padding-left:4px}
.proj-body ol li::before{content:none}
.proj-body blockquote{border-left:2px solid var(--sig);padding:4px 0 4px 18px;margin:18px 0}
.proj-body code{font-family:var(--f-mono);font-size:.9em;background:var(--panel);border:1px solid var(--etch-2);padding:1px 5px}
.proj-body pre{background:var(--inset);border:1px solid var(--etch-2);padding:16px 18px;overflow-x:auto;margin:18px 0}
.proj-body pre code{background:none;border:0;padding:0}
/* Tasten "Projekt ansehen" und "Abschicken" — gebaut wie der Rest des
   Panels: dünner Rahmen, Signal nur als Farbe, keine volle Fläche.
   Links die Durchkontaktierung aus Bus und Sektionsköpfen; unter dem
   Zeiger wird sie gefüllt, als würde Strom fließen.                   */
.btn-proj,.send{
  display:inline-flex;align-items:center;gap:11px;margin-top:24px;
  background:var(--sig-lo);color:var(--sig);
  border:1px solid var(--sig-ln);padding:10px 16px 10px 13px;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;
  transition:background .25s,border-color .25s,color .25s,transform .12s;
}
.btn-proj::before,.send::before{
  content:"";width:7px;height:7px;flex:0 0 auto;
  background:var(--void);box-shadow:inset 0 0 0 1.5px var(--sig);
  transition:background .25s,box-shadow .25s;
}
.btn-proj span{transition:transform .25s var(--ease)}
.btn-proj:hover,.feat:hover .btn-proj,.send:hover{
  background:rgba(249,124,44,.2);border-color:var(--sig);color:var(--sig-hi);
}
.btn-proj:hover::before,.feat:hover .btn-proj::before,.send:hover::before{
  background:var(--sig);box-shadow:0 0 0 3px var(--sig-lo);
}
.btn-proj:hover span,.feat:hover .btn-proj span{transform:translateX(3px)}
.btn-proj:active,.send:active{transform:translateY(1px)}
.send{margin-top:0}
.send:disabled{cursor:wait;opacity:.6}

/* ══ 16 · Bewegung & Zugänglichkeit ══════════════════════════════ */
/* Ruhezustand ist sichtbar: die Animation läuft aus dem sichtbaren
   Zustand heraus, nie in ihn hinein. Ohne JS bleibt alles lesbar.   */
@keyframes rise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.f.in{animation:rise .72s var(--ease) both}

:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;background:var(--sig);color:#131211;
  padding:10px 16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;
}
.skip:focus{left:8px;top:8px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .f.in{animation:none}
  .led::before{animation:none}
  .fig *{animation:none!important}
  .ph img{filter:none}
  *{transition-duration:.01ms!important}
}