/* ══ STATION 5 · FRAGEN — Aussehen (07.11.2026) ═══════════════════════════
   Eine LESE-Station: kein eigener Himmel, keine Lichter, kein Wesen. Der
   Grund ist der ruhige CSS-Verlauf der Seite, das Circuit-Netz bleibt
   hier aus (index.html `aus: { 5: true }`). Wer hier ankommt, will eine
   Antwort lesen — alles Bewegte stünde dem im Weg.

   LINKS der Kopf, der stehen bleibt: Überschrift, ein Satz, und der Weg
   für die Frage, die nicht dabei ist (Mail, WhatsApp). RECHTS die Liste
   in drei Themen-Gruppen; im Stationsmodus ein eigener Scroller
   (`data-scroller` im Markup — die Regie gibt ihm die Geste).

   Die Fußzeile (.fuss) bleibt in fragen.css und wohnt weiter in dieser
   Station: im Stationsmodus gibt es kein „nach der letzten Sektion".
   Ihre Sichtbarkeit hing an der Landeuhr der Welt (`--pf-land`) — die
   gibt es hier nicht mehr, deshalb unten ausdrücklich `opacity: 1`.

   Handy (≤ 720 px): engine/mobil/mobil.css, Abschnitt 8.
──────────────────────────────────────────────────────────────────────── */

.fragen {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12svh, 8rem) 0 clamp(2rem, 5svh, 3rem);
}
.fragen .fuss { opacity: 1; translate: none; margin-top: clamp(2.4rem, 6svh, 4rem); }

.fl-raster {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 6rem);
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}

/* ── Der Kopf ──────────────────────────────────────────────────────── */
.fl-kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--haze);
}
.fl-kicker::after {
  content: '';
  width: clamp(2rem, 6vw, 4.5rem);
  height: 1px;
  background: linear-gradient(to right, var(--haze), transparent);
}
.fl-kopf h2 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.9vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink);
}
.fl-sub {
  max-width: 26rem;
  margin: 1.1rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}
/* Die Frage, die nicht dabei ist. Kein Kasten — eine Haarlinie und zwei
   Wege, damit der Kopf leicht bleibt. */
.fl-offen {
  max-width: 26rem;
  margin: clamp(1.8rem, 5svh, 3rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.fl-offen p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.fl-offen p b { display: block; margin-bottom: .2rem; color: var(--ink); font-weight: 500; }
.fl-wege {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}
.fl-wege .knopf { min-height: 44px; padding-inline: 1.15rem; font-size: .72rem; }

/* ── Die Liste ─────────────────────────────────────────────────────── */
.fl-liste { min-width: 0; }
.fl-gruppe + .fl-gruppe { margin-top: clamp(1.8rem, 4.5svh, 2.6rem); }
.fl-thema {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linie-hell);
  font: 400 .68rem/1.2 'Space Mono', ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.fl-anzahl { color: var(--ink-dim); opacity: .7; letter-spacing: .1em; }

/* Eine Frage. Innenrand + negativer Außenrand: der Text fluchtet mit der
   Themenzeile, und die Fläche der OFFENEN Frage hat trotzdem Luft. */
.fl-frage {
  margin-inline: -.95rem;
  padding-inline: .95rem;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  transition: background-color .3s var(--ease), border-radius .3s var(--ease);
}
.fl-frage.offen {
  border-radius: 14px;
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, .04);
}
/* die Haarlinie ÜBER einer offenen Frage gehört ihr nicht mehr */
.fl-frage:has(+ .fl-frage.offen) { border-bottom-color: transparent; }

.fl-knopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 58px;
  padding: .95rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 1rem/1.4 'Space Grotesk', sans-serif;
  letter-spacing: -.003em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.fl-text { text-wrap: pretty; }
.fl-knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

.fl-zeichen {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), rotate .35s var(--ease);
}
.fl-zeichen::before, .fl-zeichen::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  border-radius: 1px;
  background: var(--ink);
  transition: rotate .35s var(--ease), opacity .25s var(--ease);
}
.fl-zeichen::after { rotate: 90deg; }
.fl-frage.offen .fl-zeichen { background: var(--ink); border-color: var(--ink); }
.fl-frage.offen .fl-zeichen::before { background: #050506; }
.fl-frage.offen .fl-zeichen::after { rotate: 0deg; opacity: 0; }

/* Die Antwort klappt über die Zeilenhöhe auf (0fr → 1fr) — ohne
   gemessene Pixelhöhe, also auch bei umbrechendem Text richtig. */
.fl-antwort {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.fl-antwort > div { min-height: 0; overflow: clip; }
.fl-antwort p {
  max-width: 62ch;
  margin: 0;
  padding: 0 3rem 1.2rem 0;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-dim);
  opacity: 0;
  translate: 0 -4px;
  transition: opacity .3s var(--ease), translate .38s var(--ease);
}
.fl-frage.offen .fl-antwort { grid-template-rows: 1fr; }
.fl-frage.offen .fl-antwort p { opacity: 1; translate: 0 0; transition-delay: .06s; }

@media (hover: hover) and (pointer: fine) {
  .fl-frage:not(.offen):hover { background: rgba(255, 255, 255, .02); }
  .fl-knopf:hover .fl-zeichen { border-color: var(--ink); }
}

/* ══ STATIONSMODUS ══════════════════════════════════════════════════════
   Zeilen: Raster (der Rest) · Fußzeile. Der Kopf steht, die Liste rollt.
   Unten blendet die Liste weich aus — der Hinweis, dass es weitergeht. */
html.stationen .fragen {
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: calc(var(--st-kopf) * .52 + clamp(.5rem, 2svh, 1.5rem));
}
html.stationen .fragen .fuss { margin-top: clamp(1rem, 2.5svh, 1.8rem); }
html.stationen .fl-raster { height: 100%; min-height: 0; }
html.stationen .fl-kopf { align-self: start; padding-top: .2rem; }
html.stationen .fl-liste {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .2rem 1.1rem 2.2rem 1rem;
  margin-right: -1.1rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--haze) 34%, transparent) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.4rem), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 2.4rem), transparent);
}

/* ══ TABLET (721–960): eine Spalte, der Kopf über der Liste ═══════════ */
@media (max-width: 960px) {
  .fl-raster { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; max-width: 720px; }
  .fl-sub, .fl-offen { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-frage, .fl-zeichen, .fl-zeichen::before, .fl-zeichen::after,
  .fl-antwort, .fl-antwort p { transition: none; }
}