/* =====================================================================
   BLACKOUT — Escape Room Höchst
   Landingpage / Countdown
   Aufbau:  1 Tokens · 2 Basis · 3 Effekte · 4 Hero · 5 Akte
            6 Bauteile · 7 Formular · 8 Footer · 9 Responsive · 10 A11y
   ===================================================================== */

/* --- 1 TOKENS -------------------------------------------------------- */
:root {
  /* Dunkelstufen */
  --void:      #050608;
  --pitch:     #08090d;
  --panel:     #0c0f15;
  --panel-2:   #11151d;
  --steel:     #1b212c;
  --steel-2:   #29323f;
  --edge:      #38414f;

  /* Notbeleuchtung */
  --amber:     #ffb225;
  --amber-hot: #ffd27a;
  --amber-dim: #6b4409;

  /* Alarm */
  --red:       #ff3730;
  --red-dim:   #5e1310;

  /* Strom */
  --volt:      #35e0f0;
  --volt-hot:  #b6f6ff;
  --volt-dim:  #0d4c55;

  --green:     #46d67f;

  /* Text */
  --text:      #dbe2ee;
  --muted:     #7f8b9e;
  --faint:     #4d576a;

  /* Typo */
  --f-display: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium",
               "Segoe UI", system-ui, sans-serif;
  --f-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular",
               Menlo, monospace;

  /* Maße */
  --wrap:      1140px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --sec-y:     clamp(5rem, 12vw, 9.5rem);
  --r:         3px;

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

/* --- 2 BASIS --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--amber-hot); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 760px); }

.muted { color: var(--muted); }

/* Farbiger Textakzent — wechselt je Akt von Amber zu Volt */
.hl { color: var(--amber); }
.hl--live { color: var(--volt); text-shadow: 0 0 28px rgba(53,224,240,.5); }

/* --- 3 EFFEKTE (Overlays) -------------------------------------------- */
.fx { position: fixed; inset: 0; pointer-events: none; }

.fx-noise {
  z-index: 60; opacity: .05; mix-blend-mode: overlay;
  background-image:
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size: 3px 3px;
  animation: noiseShift 1.1s steps(3) infinite;
}
@keyframes noiseShift {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-1px,1px); }
  66%  { transform: translate(1px,-1px); }
  100% { transform: translate(0,0); }
}

.fx-scanline {
  z-index: 61; opacity: .2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 2px,
    rgba(0,0,0,.3) 2px 3px
  );
}

.fx-vignette {
  z-index: 59;
  background:
    radial-gradient(120% 85% at 50% 0%,   rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0) 45%, rgba(0,0,0,.8)  100%);
}

/* Kurzer Totalausfall — wird per JS getriggert */
.fx-blackout {
  z-index: 70; background: #000; opacity: 0;
  transition: opacity 60ms linear;
}
.fx-blackout.is-out { opacity: .96; }

.fx-sparks { z-index: 58; width: 100%; height: 100%; }

/* --- 4 HERO ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  isolation: isolate;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(255,178,37,.09), transparent 65%),
    linear-gradient(180deg, var(--pitch), var(--void) 70%);
}

/* Notleuchte */
.hero__lamp {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(90vw, 780px); height: 62vh; z-index: -1;
}
.lamp__housing {
  width: 128px; height: 12px; margin: 0 auto;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, var(--steel-2), var(--steel));
  box-shadow: 0 3px 14px rgba(0,0,0,.85), inset 0 -2px 0 rgba(255,255,255,.05);
}
.lamp__cone {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(255,178,37,.28), rgba(255,178,37,0) 72%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  animation: lampFlicker 7s infinite steps(1);
  transform-origin: 50% 0;
}
@keyframes lampFlicker {
  0%,  6%  { opacity: 1;   }
  7%       { opacity: .18; }
  8%       { opacity: .95; }
  9%       { opacity: .3;  }
  10%, 47% { opacity: 1;   }
  48%      { opacity: .45; }
  49%      { opacity: 1;   }
  73%      { opacity: 1;   }
  74%      { opacity: .12; }
  75%      { opacity: .85; }
  76%,100% { opacity: 1;   }
}

/* Zahnräder */
.hero__gears { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gear { position: absolute; opacity: .34; will-change: transform; }
.gear path {
  fill: #232c3a;
  stroke: #333f52;
  stroke-width: 1.5;
  paint-order: stroke fill;
}
.gear--xl { width: min(62vw, 640px); aspect-ratio: 1; right: -16vw; top: -12vh; }
.gear--lg { width: min(40vw, 400px); aspect-ratio: 1; left: -9vw; bottom: -8vh; opacity: .3; }
.gear--md { width: min(24vw, 230px); aspect-ratio: 1; left: 12vw; top: 8vh; opacity: .24; }

/* Leiterbahnen */
.hero__circuit { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; opacity: .85; }
.circuit__lines path {
  fill: none; stroke: #202b3a; stroke-width: 1.5;
}
.circuit__nodes circle { fill: #2c3a4d; }
.circuit__pulse path {
  fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: .55;
  stroke-dasharray: 26 1000; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255,178,37,.8));
  animation: pulseRun 7s linear infinite;
}
.circuit__pulse path:nth-child(2) { animation-duration: 9s; animation-delay: -3s; }
@keyframes pulseRun {
  from { stroke-dashoffset: 1026; }
  to   { stroke-dashoffset: 0; }
}

.hero__inner { position: relative; text-align: center; max-width: 940px; width: 100%; }

/* Einschaltmoment: die Notbeleuchtung zündet wie eine Leuchtstoffröhre.
   Bewusst ohne JS-Abhängigkeit - sonst bliebe der Hero unsichtbar,
   falls das Skript nicht lädt. */
.hero__inner { animation: bootIn 1.5s .15s steps(1) both; }
.hero__lamp  { animation: bootIn 1.5s steps(1) both; }
@keyframes bootIn {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  16%  { opacity: 0; }
  26%  { opacity: 1; }
  30%  { opacity: 0; }
  38%  { opacity: .6; }
  44%  { opacity: 0; }
  60%  { opacity: 1; }
  64%  { opacity: .3; }
  100% { opacity: 1; }
}

/* Statuszeile */
.status-line {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  padding: .45rem .95rem;
  border: 1px solid var(--steel);
  border-radius: 100px;
  background: rgba(8,9,13,.6);
  backdrop-filter: blur(3px);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--alarm { background: var(--red); box-shadow: 0 0 9px var(--red); animation: blink 1.35s infinite; }
.dot--red   { background: #ff5f57; }
.dot--amber { background: #febc2e; }
.dot--green { background: #28c840; }
@keyframes blink { 0%,45% { opacity: 1; } 55%,100% { opacity: .18; } }

/* Wortmarke */
.wordmark { margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; }
.wordmark__word {
  display: block;
  /* Muss in einer Zeile stehen bleiben - die Buchstaben sind inline-block
     und wuerden sonst mitten im Wort umbrechen. */
  white-space: nowrap;
  font-size: clamp(2.3rem, 11.5vw, 10rem);
  letter-spacing: clamp(.02em, .45vw, .05em);
  line-height: .88;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255,178,37,.28),
    0 0 60px rgba(255,178,37,.16),
    0 6px 40px rgba(0,0,0,.9);
}
.ch { display: inline-block; }
.ch--flick1 { animation: chFlick 5.5s infinite steps(1); }
.ch--flick2 { animation: chFlick 8.3s .9s infinite steps(1); }
.ch--flick3 { animation: chFlick 6.9s 2.1s infinite steps(1); }
@keyframes chFlick {
  0%, 88%  { opacity: 1; color: #fff; }
  89%      { opacity: .25; color: var(--amber); }
  90%      { opacity: 1; }
  91%      { opacity: .1; }
  92%,100% { opacity: 1; }
}

.wordmark__sub {
  margin-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: clamp(.7rem, 1.6vw, .85rem);
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--faint);
  padding-left: .42em; /* optischer Ausgleich zum letter-spacing */
}

.hero__lede {
  margin: clamp(1.6rem, 4vh, 2.4rem) auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}
.hero__lede strong { color: var(--text); font-weight: 600; }

/* --- 5 COUNTDOWN ----------------------------------------------------- */
.countdown { margin-top: clamp(2rem, 5vh, 3.2rem); }

.countdown__panel {
  position: relative;
  display: inline-block;
  padding: clamp(1.1rem, 3vw, 1.9rem) clamp(1.1rem, 3.5vw, 2.4rem) 1rem;
  border: 1px solid var(--steel-2);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(28,34,45,.55), rgba(8,9,13,.9)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 26px 60px -22px rgba(0,0,0,.95);
}

.screw {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--edge), #10151d 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.screw::after {
  content: ""; position: absolute; inset: 2px 1px;
  border-top: 1px solid rgba(0,0,0,.75);
  transform: rotate(38deg); transform-origin: center;
}
.screw--tl { top: 7px; left: 7px; }
.screw--tr { top: 7px; right: 7px; }
.screw--bl { bottom: 7px; left: 7px; }
.screw--br { bottom: 7px; right: 7px; }

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.4rem, 1.6vw, 1.1rem);
}

.cd-cell {
  position: relative;
  min-width: 0;
  padding: clamp(.55rem, 1.6vw, .9rem) clamp(.3rem, 1.4vw, 1rem);
  border: 1px solid #1d2431;
  border-radius: 2px;
  background: linear-gradient(180deg, #0a0d13, #05070a);
  box-shadow: inset 0 0 22px rgba(0,0,0,.9);
}
/* Trennfuge wie bei Fallblatt-Anzeigen */
.cd-cell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 47%;
  height: 1px; background: rgba(0,0,0,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.035);
}

.cd-cell__value {
  display: block;
  font-family: var(--f-mono);
  font-size: clamp(1.7rem, 7.4vw, 4.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--amber);
  text-shadow: 0 0 16px rgba(255,178,37,.55), 0 0 44px rgba(255,178,37,.22);
  font-variant-numeric: tabular-nums;
}
.cd-cell--seconds .cd-cell__value { color: var(--amber-hot); }

.cd-cell__label {
  display: block; margin-top: .5rem;
  font-family: var(--f-mono);
  font-size: clamp(.52rem, 1.3vw, .64rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint);
}

.countdown__readout {
  display: flex; justify-content: center; gap: .7rem;
  margin-top: 1rem;
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.countdown__key { color: var(--faint); }
.countdown__val { color: var(--muted); }

.noscript-note { margin-top: 1rem; color: var(--muted); }

/* Scroll-Hinweis */
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .65rem;
  margin-top: clamp(2.2rem, 6vh, 3.6rem);
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--faint); text-decoration: none;
  transition: color .3s var(--ease);
}
.scroll-cue:hover { color: var(--amber); }
.scroll-cue__arrow {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--amber), transparent);
  animation: cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* --- 6 AKTE ---------------------------------------------------------- */
.act { position: relative; padding: var(--sec-y) 0; }

.act--incident { background: linear-gradient(180deg, var(--void), #070a0f 55%, var(--void)); }
.act--machine  { background: var(--pitch); overflow: hidden; }
.act--status   { background: linear-gradient(180deg, var(--void), #06090e); }
.act--signup   {
  background:
    radial-gradient(75% 55% at 50% 42%, rgba(53,224,240,.09), transparent 70%),
    linear-gradient(180deg, #06090e, var(--void));
}

/* dünne Trennlinie zwischen den Akten */
.act + .act::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(100% - var(--gutter) * 2, var(--wrap)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--steel), transparent);
}

.act__eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.6rem;
}
.act__num {
  color: var(--amber);
  padding: .2rem .5rem;
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  letter-spacing: .1em;
}
.act--signup .act__num { color: var(--volt); border-color: var(--volt-dim); }

.act__title {
  font-size: clamp(2.1rem, 6.4vw, 4.6rem);
  max-width: 18ch;
  margin-bottom: 1.6rem;
}
.act__title--center { max-width: none; text-align: center; margin-inline: auto; }

.act__text {
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.15rem);
}
.act__text--center { text-align: center; margin-inline: auto; }

/* --- Sektorentafel --------------------------------------------------- */
.grid-panel {
  margin-top: clamp(2.4rem, 6vw, 4rem);
  border: 1px solid var(--steel);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
  overflow: hidden;
}
.grid-panel__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--steel);
  background: rgba(255,255,255,.014);
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.grid-panel__title { color: var(--muted); }
.grid-panel__state { color: var(--green); transition: color .5s; }
.grid-panel__state.is-alarm { color: var(--red); }

.lamps {
  list-style: none; margin: 0; padding: 1.15rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
}
.lamp {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem;
  border: 1px solid #171d27;
  border-radius: 2px;
  background: #080b10;
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--muted);
}
.lamp__led {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--green);
  box-shadow: 0 0 10px rgba(70,214,127,.85);
  transition: background .35s, box-shadow .35s;
}
.lamp.is-down .lamp__led {
  background: var(--red-dim);
  box-shadow: 0 0 6px rgba(255,55,48,.5);
}
.lamp.is-down .lamp__name { color: var(--faint); text-decoration: line-through; }
.lamp.is-failing .lamp__led { animation: ledPanic .16s 5; }
@keyframes ledPanic {
  50% { background: var(--red); box-shadow: 0 0 16px var(--red); }
}

.grid-panel__meter {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--steel);
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.meter__label { color: var(--faint); flex: none; }
.meter__track {
  flex: 1; height: 6px; border-radius: 100px;
  background: #05070a; overflow: hidden;
  box-shadow: inset 0 0 0 1px #171d27;
}
.meter__fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--amber), var(--green));
  transition: width 1.6s var(--ease);
}
.meter__value { color: var(--amber); flex: none; min-width: 5.5ch; text-align: right; }

/* --- Maschinenraum --------------------------------------------------- */
.machine__gears { position: absolute; inset: 0; pointer-events: none; }
.gear--m1 { width: min(46vw, 460px); aspect-ratio: 1; right: -10vw;  top: 6vh;    opacity: .3; }
.gear--m2 { width: min(26vw, 250px); aspect-ratio: 1; right: 16vw;   top: 34vh;   opacity: .26; }
.gear--m3 { width: min(58vw, 560px); aspect-ratio: 1; left: -18vw;   bottom: -8vh; opacity: .22; }

.cards {
  list-style: none; margin: clamp(2.4rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--steel);
  border: 1px solid var(--steel);
  border-radius: var(--r);
  overflow: hidden;
}
.card {
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--panel);
  transition: background .4s var(--ease);
}
.card:hover { background: var(--panel-2); }
.card__icon { display: block; width: 34px; height: 34px; margin-bottom: 1.1rem; }
.card__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--amber); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.card:hover .card__icon svg { stroke: var(--amber-hot); }
.card__title { font-size: 1.22rem; margin-bottom: .55rem; }
.card__text { color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* --- Konsole / Fortschritt ------------------------------------------- */
.console {
  margin-top: clamp(2.4rem, 6vw, 3.6rem);
  border: 1px solid var(--steel);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.95);
  overflow: hidden;
}
.console__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--steel);
  background: var(--panel-2);
}
.console__name {
  margin-left: .6rem;
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .14em; color: var(--faint);
}

.bars { list-style: none; margin: 0; padding: clamp(1.2rem, 3vw, 1.9rem); display: grid; gap: 1.15rem; }
.bar {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr auto;
  align-items: center; gap: 1rem;
  font-family: var(--f-mono); font-size: .76rem;
}
.bar__label { color: var(--muted); }
.bar__track {
  height: 8px; border-radius: 100px; background: #05070a;
  box-shadow: inset 0 0 0 1px #171d27; overflow: hidden;
}
.bar__fill {
  display: block; height: 100%; width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  box-shadow: 0 0 12px rgba(255,178,37,.5);
  transition: width 1.5s var(--ease);
}
.bars.is-live .bar__fill { width: calc(var(--val) * 1%); }
.bar[style*="--val:100"] .bar__fill {
  background: linear-gradient(90deg, var(--volt-dim), var(--volt));
  box-shadow: 0 0 12px rgba(53,224,240,.55);
}
.bar__pct { color: var(--amber); min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }

.console__note {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1.2rem;
  border-top: 1px solid var(--steel);
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--muted);
}
.caret {
  width: 7px; height: 14px; flex: none;
  background: var(--amber);
  animation: blink 1.1s steps(1) infinite;
}

/* --- 7 FORMULAR ------------------------------------------------------ */
.terminal {
  margin-top: clamp(2.4rem, 6vw, 3.4rem);
  border: 1px solid var(--steel-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:
    0 0 0 1px rgba(53,224,240,.06),
    0 40px 90px -38px rgba(0,0,0,.95);
  overflow: hidden;
}
.terminal__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--steel);
  background: rgba(255,255,255,.02);
}
.terminal__leds { display: flex; gap: .35rem; }
.terminal__leds i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--volt-dim);
  animation: ledCycle 2.4s infinite;
}
.terminal__leds i:nth-child(2) { animation-delay: .3s; }
.terminal__leds i:nth-child(3) { animation-delay: .6s; }
@keyframes ledCycle {
  0%, 70%, 100% { background: var(--volt-dim); box-shadow: none; }
  20%           { background: var(--volt); box-shadow: 0 0 10px var(--volt); }
}
.terminal__title {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .14em; color: var(--faint);
}

.signup { padding: clamp(1.4rem, 4vw, 2.2rem); }
.signup__prompt {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: .74rem;
  color: var(--faint); margin-bottom: 1.1rem;
}
.signup__prompt .caret { background: var(--volt); }

.signup__row { display: flex; gap: .6rem; flex-wrap: wrap; }

.signup__input {
  flex: 1 1 16rem; min-width: 0;
  padding: .95rem 1.1rem;
  font-family: var(--f-mono); font-size: .95rem;
  color: var(--text);
  background: #05070a;
  border: 1px solid var(--steel-2);
  border-radius: 2px;
  transition: border-color .25s, box-shadow .25s;
}
.signup__input::placeholder { color: #3d4657; }
.signup__input:focus {
  outline: none;
  border-color: var(--volt);
  box-shadow: 0 0 0 1px var(--volt), 0 0 26px -4px rgba(53,224,240,.55);
}
.signup__input:user-invalid { border-color: var(--red); }

.btn {
  position: relative;
  flex: 0 0 auto;
  padding: .95rem 1.9rem;
  font-family: var(--f-display); font-size: 1rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--void);
  background: var(--amber);
  border: none; border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: background .25s, transform .12s, box-shadow .25s;
}
.btn:hover  { background: var(--amber-hot); box-shadow: 0 0 30px -6px rgba(255,178,37,.75); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn__text { position: relative; z-index: 1; }
.btn__glow {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-100%);
}
.btn:hover .btn__glow { animation: sweep .7s var(--ease); }
@keyframes sweep { to { transform: translateX(100%); } }

/* Erfolgszustand: Strom ist zurück */
.signup.is-done .btn { background: var(--volt); }
.signup.is-done .signup__prompt .caret { animation: none; }

.signup__msg {
  min-height: 1.4rem; margin-top: 1rem;
  font-family: var(--f-mono); font-size: .8rem;
}
.signup__msg.is-ok  { color: var(--volt); }
.signup__msg.is-err { color: var(--red); }

.signup__legal {
  margin-top: 1.1rem;
  font-size: .78rem; line-height: 1.55;
  color: var(--faint);
}

/* Honeypot — off-screen statt display:none, damit Bots ihn ausfüllen */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* --- 8 FOOTER -------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--steel);
  background: var(--pitch);
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.footer__inner {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  font-size: .9rem;
}
.footer__mark {
  display: block;
  font-family: var(--f-display); font-size: 1.5rem;
  letter-spacing: .16em; color: var(--text);
}
.footer__tag {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.footer__col { font-style: normal; color: var(--muted); line-height: 1.75; }
.footer__h {
  display: block; margin-bottom: .55rem;
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--faint);
}
.footer__col a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--steel-2); }
.footer__col a:hover { color: var(--amber); border-color: var(--amber-dim); }
.footer__note {
  grid-column: 1 / -1;
  padding-top: 1.6rem; border-top: 1px solid var(--steel);
  font-size: .78rem; color: var(--muted);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* --- 9 REVEAL & RESPONSIVE ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease) var(--d, 0ms),
              transform .8s var(--ease) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__label { grid-column: 1; }
  .bar__pct   { grid-column: 2; }
  .bar__track { grid-column: 1 / -1; }
  .countdown__panel { display: block; width: 100%; }
  .footer__note { flex-direction: column; }
}

@media (max-width: 420px) {
  .countdown__grid { grid-template-columns: repeat(2, 1fr); }
  .signup__row { flex-direction: column; }
  .btn { width: 100%; }
}

/* --- 10 ZUGÄNGLICHKEIT ----------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; translate: -50% 0; top: -4rem;
  z-index: 100;
  padding: .7rem 1.2rem;
  background: var(--amber); color: var(--void);
  font-family: var(--f-mono); font-size: .8rem;
  text-decoration: none; border-radius: 0 0 3px 3px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Wer weniger Bewegung will, bekommt die Story ohne Zappeln. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fx-noise, .fx-scanline, .fx-sparks { display: none; }
  .lamp__cone { opacity: 1; }
  .hero__inner, .hero__lamp { opacity: 1 !important; animation: none !important; }
  .fx-blackout { display: none; }
  .bars .bar__fill { width: calc(var(--val) * 1%); }
}

/* Sehr helle Umgebung / erzwungene Farben */
@media (forced-colors: active) {
  .fx { display: none; }
  .cd-cell__value, .bar__pct { color: CanvasText; }
}