/* ==========================================================================
   JARII · Akt 4 (Vorbestell-Liste, Theme „Nacht“, Neon) und Akt 5 (FAQ) · Agent D
   Gehört zu src/partials/form.html, faq.html und assets/js/form.js.
   Nur Tokens aus tokens.css. Die Sektion #liste trägt data-theme="nacht",
   dadurch lesen alle var(--…) hier die Nacht-Werte.

   Kontraste Nacht (WCAG 2.x, berechnet 25.10.2026):
   - Röhre violet #A48CE0 auf surface-100 #0F1530: 6,3:1
   - Röhre sage   #9CC7AA auf surface-100 #0F1530: 9,5:1
     Beide liegen über 4,5:1, also auch ohne Leuchten (text-shadow fehlt, wird
     abgeschaltet oder vom Browser nicht unterstützt) gut lesbar. Das Leuchten
     ist reine Zugabe.
   - ink #F3EFE7 auf raised #1D2750: 12,6:1 · ink-muted #B4B8CC auf raised 7,3:1
   - violet (Link) auf raised 5,1:1 · Button-Text #141C3A auf violet 5,9:1
   - signal-alert #FF9A6B auf raised 6,9:1 (Fehlermeldung, immer mit Icon)
   - Feldrand ink 45 % über raised ergibt #7D8194: 3,7:1 zur Karte, 4,7:1 zur
     Feldfläche surface-100. WCAG 1.4.11 verlangt 3:1 für Bedienelemente; die
     Nacht-hairline (#2C3762, 1,25:1) reicht dafür nicht.
   - Aktiver Chip: Rand violet auf lilac-Nacht #3A2F63 4,2:1, Text ink 10,4:1.
   ========================================================================== */

/* --- Akt 4: Sektion -------------------------------------------------------- */
.liste__inner {
  display: grid;
  gap: var(--space-12);
}
/* Desktop: Röhren links, Karte rechts daneben (gleiches Raster wie die FAQ
   darunter). Untereinander bliebe ab 1024 px die rechte Hälfte leer und die
   Karte klebte links. Mobil und Tablet steht die Karte unter der Headline. */
@media (min-width: 1024px) {
  .liste__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    gap: var(--space-16);
    align-items: center;
  }
}

/* --- Neon-Röhren ------------------------------------------------------------
   Muster 6 (docs/21st-referenzen.md). Leuchten nur über text-shadow in der
   Röhrenfarbe, vier Lagen mit abnehmender Deckung. Kein Verlauf als Fläche
   (Markenbuch: keine Verläufe), der Hintergrund bleibt surface-100 Nacht.
   color-mix() mischt die Token-Farbe mit transparent; Browser ohne color-mix
   verwerfen die ganze text-shadow-Zeile und zeigen die Schrift ohne Leuchten,
   lesbar laut Kontrastwerten oben. */
.neon__tube {
  display: block;
  --tube: var(--violet);
  color: var(--tube);
  text-shadow:
    0 0 4px color-mix(in srgb, var(--tube) 85%, transparent),
    0 0 12px color-mix(in srgb, var(--tube) 60%, transparent),
    0 0 32px color-mix(in srgb, var(--tube) 38%, transparent),
    0 0 64px color-mix(in srgb, var(--tube) 20%, transparent);
}
.neon__tube--sage { --tube: var(--sage); }

/* Zustände, nur wenn form.js läuft (Klasse neon-js an der Sektion). Ohne
   JavaScript bleiben die Röhren einfach an.
   „Aus“ heißt Deckung 0,62 statt fast unsichtbar (Agent E, 25.10.2026):
   Lighthouse/axe meldete im Aus-Zustand 1,32:1 (violet) und 1,44:1 (sage).
   Mit 0,62 ergibt die Mischung über #0F1530 #6B5F9D (3,2:1) und #66837C
   (4,4:1); für 40 px fett reichen 3:1 (WCAG 1.4.3, große Schrift). Der
   Unterschied zum Leuchten bleibt durch den fehlenden Glow sichtbar. */
.neon-js .neon__tube { opacity: 0.62; text-shadow: none; }

/* Einschalten beim Hineinscrollen: etwa 1,2 s Flackern über opacity, dann an.
   Blitzschwelle (WCAG 2.3.1): höchstens drei Wechsel hell-dunkel pro Sekunde.
   Hier sind es zwei kurze Aussetzer (bei 18 % und 52 %) nach dem ersten
   Aufleuchten, die zweite Röhre startet 0,25 s später. */
@keyframes neon-flicker {
  0%   { opacity: 0.62; }
  8%   { opacity: 1; }
  18%  { opacity: 0.25; }
  26%  { opacity: 1; }
  52%  { opacity: 0.45; }
  58%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Danach sehr langsames Atmen: Deckung 0,92 bis 1 über 4 s. Die Änderung ist
   so klein, dass sie nicht als Blinken wirkt; form.js pausiert sie, sobald die
   Sektion aus dem Bild ist (spart Akku, nichts läuft ungesehen weiter). */
@keyframes neon-breathe {
  from { opacity: 1; }
  to   { opacity: 0.92; }
}

.neon-js.is-lit .neon__tube {
  opacity: 1;
  text-shadow:
    0 0 4px color-mix(in srgb, var(--tube) 85%, transparent),
    0 0 12px color-mix(in srgb, var(--tube) 60%, transparent),
    0 0 32px color-mix(in srgb, var(--tube) 38%, transparent),
    0 0 64px color-mix(in srgb, var(--tube) 20%, transparent);
  animation:
    neon-flicker 1.2s linear both,
    neon-breathe 4s ease-in-out 1.2s infinite alternate;
}
.neon-js.is-lit .neon__tube--sage {
  animation:
    neon-flicker 1.2s linear 0.25s both,
    neon-breathe 4s ease-in-out 1.45s infinite alternate;
}
.neon-js.is-paused .neon__tube { animation-play-state: paused; }

/* Optionaler Modus data-neon="rgb": Farbton kreist in 12 s einmal herum.
   BEWUSST AUS (Attribut ist im HTML nicht gesetzt): Das Markenbuch erlaubt
   einen Akzent pro Ansicht und keine bunten Effekte, Standard sind die
   Markenfarben violet und sage. Einschalten: data-neon="rgb" an <section id="liste">. */
@keyframes neon-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
[data-neon="rgb"] .neon { animation: neon-hue 12s linear infinite; }

/* --- Karte (Muster 4) ------------------------------------------------------ */
.liste-card {
  display: grid;                 /* Formular und Erfolg in derselben Zelle */
  max-width: 640px;
  padding: var(--space-6);
  background-color: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) {
  .liste-card { padding: var(--space-8); }
}
.liste-card__form,
.liste-card__success {
  grid-area: 1 / 1;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

/* Erfolg verborgen, bis form.js is-done setzt. visibility statt display:none,
   damit der Erfolg seinen Platz in der Rasterzelle behält und die Karte beim
   Tausch gleich hoch bleibt. Verborgen heißt auch: nicht vorlesbar, nicht fokussierbar. */
.liste-card:not(.is-done) .liste-card__success,
.liste-card.is-done .liste-card__form {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.liste-card__success {
  align-self: center;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* Blur-in beim Erscheinen. Nur wenn form.js die Klasse blur-js setzt, sonst
   (kein JS, Skriptfehler) ist die Karte sofort sichtbar. Bei reduzierter
   Bewegung setzt form.js die Klasse gar nicht. Gestaffelt: Einleitung, dann
   Formular. */
.blur-js .liste-card,
.blur-js .liste-card__intro,
.blur-js .liste-form {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease);
}
.blur-js .liste-card__intro { transition-delay: 0.12s; }
.blur-js .liste-form { transition-delay: 0.24s; }
.blur-js.is-in .liste-card,
.blur-js.is-in .liste-card__intro,
.blur-js.is-in .liste-form {
  opacity: 1;
  filter: none;
  transform: none;
}

/* --- Formular -------------------------------------------------------------- */
.liste-card__intro { margin-bottom: var(--space-6); }

.liste-form {
  display: grid;
  gap: var(--space-6);
}

/* Segment als Kapsel-Chips. Das Radio liegt unsichtbar über dem ganzen Chip
   (Klickfläche = Chip), bleibt aber ein echtes Radio: Pfeiltasten wechseln,
   Screenreader sagen „Optionsfeld, 1 von 2“. */
.segment {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.segment__legend {
  padding: 0;
  margin-bottom: var(--space-3);
  color: var(--ink-muted);
}
.segment__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.segment__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: var(--radius-pill);
  background-color: var(--surface-100);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.segment__chip:hover { border-color: var(--ink); }
.segment__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Haken nur im aktiven Chip: Auswahl ist so nicht nur an der Farbe erkennbar
   (WCAG 1.4.1). Im inaktiven Chip hält ein leerer Kreis den Platz, damit die
   Chips beim Umschalten nicht springen. */
.segment__check {
  width: 1.125em;
  height: 1.125em;
  padding: 2px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: 50%;
  stroke: transparent;
  stroke-width: 3;
}
.segment__chip:has(.segment__input:checked) {
  background-color: var(--lilac);
  border-color: var(--violet);
}
.segment__chip:has(.segment__input:checked) .segment__check {
  background-color: var(--violet);
  border-color: var(--violet);
  stroke: var(--on-violet);
}
/* Fokus am Chip sichtbar, weil das Radio selbst unsichtbar ist */
.segment__chip:has(.segment__input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Textfelder */
.liste-field {
  display: grid;
  gap: var(--space-2);
}
.liste-field__label {
  font-weight: 600;
  color: var(--ink);
}
.liste-input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: var(--radius-pill);
  background-color: var(--surface-100);
  color: var(--ink);
  font-size: 1rem;              /* 16 px: iOS zoomt bei kleinerer Schrift ins Feld */
  line-height: 1.5;
}
.liste-input:hover { border-color: var(--ink); }
.liste-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* E-Mail und Button: unter 570 px gestapelt, beide volle Breite. Ab 570 px
   eine gemeinsame Kapsel (Muster 4), Rand und Fokus trägt dann die Kapsel. */
.liste-capsule {
  display: grid;
  gap: var(--space-3);
}
.liste-capsule__btn { width: 100%; min-height: 48px; }

@media (min-width: 570px) {
  .liste-capsule {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
    border-radius: var(--radius-pill);
    background-color: var(--surface-100);
  }
  .liste-capsule:hover { border-color: var(--ink); }
  .liste-capsule__input {
    min-height: 44px;
    border: 0;
    background-color: transparent;
    padding-inline: var(--space-4) var(--space-2);
  }
  .liste-capsule__input:focus-visible { outline: none; }
  .liste-capsule:has(.liste-capsule__input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .liste-capsule__btn { width: auto; min-height: 44px; }
}

/* Während des Sendens: aria-disabled statt disabled, damit der Fokus auf dem
   Button bleibt (ein deaktivierter Button verliert ihn in Chrome). form.js
   blockiert doppeltes Absenden selbst. */
.liste-capsule__btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
  transform: none;
}

.liste-note { color: var(--ink-muted); }
.liste-note .link,
.liste-card .link { color: var(--violet); font-weight: 500; }

/* Statusbereich leer = kein Platz; Fehlermeldung in signal-alert Nacht,
   immer mit Warn-Icon und Satz, nie nur Farbe. */
.liste-status:empty { display: none; }
.liste-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--signal-alert);
  border-radius: var(--radius-md);
  color: var(--signal-alert);
}
.liste-error .icon { margin-top: 2px; }
.liste-error .link { color: inherit; }

/* Honeypot aus dem Bild, aber nicht display:none (siehe form.html) */
.liste-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.liste-top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Akt 5: FAQ ------------------------------------------------------------ */
.faq__inner {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  /* Desktop: Überschrift links, Fragen rechts. Die Mitte bleibt ruhig. */
  .faq__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-16);
    align-items: start;
  }
}
.faq__list {
  border-top: 1px solid var(--hairline);
}
.faq__item {
  border-bottom: 1px solid var(--hairline);
}
.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--space-4) var(--space-12) var(--space-4) 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--violet); }

/* Plus aus zwei Balken in violet (der eine Akzent dieser Ansicht). Offen
   dreht der senkrechte Balken weg und es bleibt ein Minus: der Zustand ist an
   der Form erkennbar, nicht an der Farbe. */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background-color: var(--violet);
  transition: transform var(--dur) var(--ease);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] > .faq__q::after { transform: rotate(0deg); }

.faq__a {
  padding: 0 var(--space-12) var(--space-6) 0;
  color: var(--ink-muted);
  max-width: 64ch;
}

/* --- Reduzierte Bewegung ----------------------------------------------------
   Kein Flackern, kein Atmen, kein Farbkreis, kein Blur-in: die Röhren leuchten
   ruhig, die Karte ist sofort da. base.css kürzt Animationen zwar global auf
   0,01 ms, hier wird es ausdrücklich abgeschaltet, damit kein Endzustand einer
   Keyframe-Folge (opacity 0,92) hängen bleibt. */
@media (prefers-reduced-motion: reduce) {
  .neon-js .neon__tube,
  .neon-js.is-lit .neon__tube,
  .neon-js.is-lit .neon__tube--sage {
    animation: none !important;
    opacity: 1;
    text-shadow:
      0 0 4px color-mix(in srgb, var(--tube) 85%, transparent),
      0 0 12px color-mix(in srgb, var(--tube) 60%, transparent),
      0 0 32px color-mix(in srgb, var(--tube) 38%, transparent),
      0 0 64px color-mix(in srgb, var(--tube) 20%, transparent);
  }
  [data-neon="rgb"] .neon { animation: none !important; }
  .blur-js .liste-card,
  .blur-js .liste-card__intro,
  .blur-js .liste-form {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .faq__q::before, .faq__q::after { transition: none; }
}

@media print {
  .neon__tube { text-shadow: none; }
  .liste-card { box-shadow: none; }
}