/* ══ STATION 6 · FRAGEN + FUSSZEILE — Aussehen (17.08.2026 abends) ═══════
   Die Hülle (Grund, Himmel, Horizont, Textplatz, Kopf, Stationsraster)
   kommt aus engine/portfolio-welt/welt.css über `.pf-welt`. Hier steht
   nur, was diese Station eigen hat: links das Fragezeichen (Drei-Bühne,
   Fläche `.fq-wesen` über der ganzen Sektion, Platzhalter `.fq-platz`),
   rechts die Liste, unten die Fußzeile aus Liquid Glass.

   Auftritt: alles hängt an `--pf-land` (Fall-Uhr, welt.mjs) — Liste
   gestaffelt über `--i`, Fußzeile zuletzt. Im Scrollmodus steht die
   Zahl auf 1. Kein `transition` auf diesen Wegen (stationen.css). */

.fragen { --fq-glas: rgba(20, 20, 26, .55); }

.fq-wesen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* ── Der Raum: Wesen links, Fragen rechts ────────────────────────────── */
.fq-raum {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
  min-height: 0;
}
.fq-platz {
  aspect-ratio: 1;
  width: min(100%, 420px);
  margin-inline: auto;
  min-height: 0;
  /* nur die Marke fürs Wesen — kein Rand, kein Grund */
}
.fq-liste {
  min-height: 0;
  display: block;
  /* ── DER KASTEN HÄNGT AN DERSELBEN UHR WIE SEIN INHALT (18.08.2026) ──
     URSACHE des Fehlers „beim Wechsel aus den Fragen bleibt das
     FAQ-Fenster stehen": die acht `.fq-frage` fahren an `--pf-land`
     hoch und runter, die Liste SELBST malte aber auch etwas — ihre
     Haarlinie oben (und im Stationsmodus die Rollleiste) — und das
     hing an gar nichts. Beim Aufstieg (`hoch`, 1,3 s) und ebenso beim
     Fall herein (2,55 s, bevor die Fragen landen) war der Inhalt
     längst weg, und die leere Linie stand als Fensterrahmen im Bild.
     WIRKUNG: die Linie kommt und geht jetzt mit der Landung. Ohne
     Staffelung — die `--i`-Treppe gehört den Fragen, der Rahmen ist
     einer für alle. `opacity` auf der Liste wäre der falsche Griff:
     sie würde sich mit der Deckkraft jeder Frage multiplizieren und
     die auf 10.08. justierte Staffelung verstellen. */
  --l: clamp(0, (var(--pf-land, 1) - .12) / .5, 1);
  border-top: 1px solid color-mix(in srgb, var(--linie) calc(var(--l) * 100%), transparent);
}
/* Innen-Scroller (Stationsmodus, flache Fenster): die Regie liest
   overflow-y und rollt beim Wechsel zurück; Höhe kommt aus dem Raster */
html.stationen .fq-liste {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Auch die Rollleiste an der Landung — sie ist das zweite, was die
     Liste selbst malt, und stünde sonst genauso allein im Übergang. */
  scrollbar-color: color-mix(in srgb, var(--haze) calc(var(--l) * 34%), transparent) transparent;
  padding-right: .35rem;
}

/* ── Eine Frage ─────────────────────────────────────────────────────── */
.fq-frage {
  --i: 0;
  --l: clamp(0, (var(--pf-land) - .12 - var(--i) * .055) / .5, 1);
  border-bottom: 1px solid var(--linie);
  opacity: var(--l);
  translate: 0 calc((1 - var(--l)) * 14px);
}
.fq-knopf {
  appearance: none;
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding: .85rem .2rem .85rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 clamp(.98rem, 1.15vw, 1.08rem)/1.3 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: -.005em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease);
}
.fq-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.fq-nr {
  font: 400 .68rem/1 'Space Mono', monospace;
  letter-spacing: .12em;
  color: var(--ink-dim);
  opacity: .8;
  translate: 0 1px;
}
.fq-text { text-wrap: pretty; }
/* das Zeichen: ein Plus aus zwei Haarlinien, offen wird es zum Minus */
.fq-zeichen {
  position: relative;
  width: 30px; height: 30px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  flex: none;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fq-zeichen::before, .fq-zeichen::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1px;
  background: var(--ink);
  translate: -50% -50%;
  transition: rotate .36s var(--ease), opacity .3s var(--ease);
}
.fq-zeichen::after { rotate: 90deg; }
.fq-frage.offen .fq-zeichen::after { rotate: 0deg; opacity: 0; }
.fq-frage.offen .fq-zeichen { border-color: var(--linie-hell); background: rgba(255, 255, 255, .06); }
@media (hover: hover) {
  .fq-knopf:hover .fq-zeichen { border-color: var(--linie-hell); }
  .fq-knopf:hover .fq-nr { color: var(--ink); opacity: 1; }
}
/* Antwort: Rasterzeile 0fr → 1fr, keine gemessene Höhe */
.fq-antwort {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .36s var(--ease);
}
.fq-antwort > div { min-height: 0; overflow: clip; }
.fq-antwort p {
  margin: 0;
  padding: 0 2.6rem 1.15rem 2.05rem;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.fq-frage.offen .fq-antwort { grid-template-rows: 1fr; }
.fq-frage.offen .fq-antwort p { opacity: 1; translate: 0 0; transition-delay: .08s; }

/* ══ DIE FUSSZEILE — eine Bar aus Liquid Glass ══════════════════════════
   Dieselbe Sprache wie Kopf und Knöpfe: Glas mit Lichtkante oben,
   backdrop-filter über dem lebenden Himmel. Seit 17.08. abends EINE ZEILE
   (Jordan: „deutlich schlanker, lieber in die Länge als in die Höhe, eher
   wie ne Bar"): Marke · Kontakt · Rechtliches · ©, als Pille. Die Gruppen
   trennt ein Punkt (::before), keine Spaltentitel — was ein Link ist,
   erkennt man am Wort. Bricht die Zeile um, brechen ganze Gruppen, nie ein
   Name von seiner Nummer. Keine USt-IdNr., keine Adresse — das steht im
   Impressum, einen Klick weit. */
.fuss {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  opacity: clamp(0, (var(--pf-land) - .5) / .45, 1);
  translate: 0 calc((1 - clamp(0, (var(--pf-land) - .5) / .45, 1)) * 12px);
}
.fuss-glas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 18.08.2026: enger als vorher (2rem), seit die Bar eine dritte Gruppe
     trägt — vier Gruppen plus © passen bei 1280 px sonst nicht in die
     eine Zeile, die sie sein soll. */
  gap: .25rem clamp(.55rem, 1.1vw, .9rem);
  min-height: 48px;
  padding: .35rem clamp(.9rem, 1.4vw, 1.05rem) .35rem clamp(1rem, 1.5vw, 1.15rem);
  border: 1px solid var(--linie);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
    var(--fq-glas);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
          backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 24px 60px -30px rgba(0, 0, 0, .9);
}
.fuss-logo {
  display: inline-flex;
  /* `baseline`, damit das kleine AGENCY auf derselben Linie steht wie
     SPARWEB und nicht auf Mitte-Mitte hochrutscht. Was das kostet, steht
     im Block „Der Schriftzug sitzt mittig" weiter unten. */
  align-items: baseline;
  gap: .45rem;
  min-height: 34px;
  font: 500 .8rem/1 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.fuss-logo b { font-weight: 600; }
.fuss-logo i { font-style: normal; font-size: .58rem; letter-spacing: .3em; color: var(--ink-dim); }
.fuss-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(.55rem, 1.1vw, .9rem);
}
/* Der Trennpunkt vor jeder Gruppe — nicht vor der ersten (die Marke
   steht für sich) und seit 18.08.2026 nicht mehr vor dem © (das Zeichen
   trennt selbst, und die 17 px entschieden über eine zweite Zeile).

   KEIN `margin-right` (18.08.2026): der Punkt ist das erste Flex-Kind
   seiner Gruppe, und die Gruppe hat schon dieselbe Spaltenfuge wie die
   Bar. Ein Zuschlag machte daraus die doppelte Fuge — der Punkt klebte
   an der VORIGEN Gruppe statt zwischen beiden zu stehen (14 px links,
   30 px rechts). Ohne ihn steht links wie rechts eine Fuge. */
.fuss-gruppe::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-dim);
  opacity: .55;
}
.fuss nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: .74rem;
  color: var(--ink-dim);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color .22s var(--ease);
}
@media (hover: hover) { .fuss nav a:hover, .fuss-logo:hover { color: var(--ink); } }
.fuss nav a:focus-visible, .fuss-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fuss-klein {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 auto;
  min-height: 34px;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
  opacity: .8;
  white-space: nowrap;
}

/* ── DER SCHRIFTZUG SITZT MITTIG AUF DER ZEILE (18.08.2026) ─────────────
   Jordan: „SPARWEB AGENCY sitzt zu weit oben." Er saß rund 10 px über der
   Mitte der Links daneben, und zwar aus Bauart, nicht aus Nachlässigkeit:
   In einem Flex-Behälter mit `align-items: baseline` liegt die
   Baseline-Gruppe am CROSS-START der Zeile — die Luft, die `min-height:
   34px` zusätzlich aufspannt, fällt vollständig nach UNTEN. Die Links
   nebenan stehen mit `center` in ihren 34 px und damit tiefer.

   `align-items: center` wäre der falsche Ausweg: dann zentriert sich das
   kleine AGENCY gegen das große SPARWEB und verliert die gemeinsame
   Grundlinie — genau das, was hier nicht passieren soll.

   Also bleibt `baseline`, und zentriert wird die ZEILE: mit `flex-wrap:
   wrap` gibt es eine echte Flex-Zeile, und `align-content: center` setzt
   sie in die Mitte der 34 px. Metrikfrei — kein abgezählter
   Innenabstand, der beim nächsten Schriftwechsel wieder danebenläge.

   Nur ab 721 px: unter 720 px gilt das eigene Handy-System
   (engine/mobil/), und dort wird die Bar ohnehin neu gesetzt. */
@media (min-width: 721px) {
  .fuss-logo { flex-wrap: wrap; align-content: center; }
}

/* ══ STATIONSMODUS ══════════════════════════════════════════════════════
   Zeilen: Kopf · Raum (der Rest) · Fußzeile — das Raster kommt aus
   .pf-welt (auto minmax(0,1fr) auto). Der Raum füllt und zentriert. */
html.stationen .fq-raum { height: 100%; align-content: center; }
html.stationen .fq-platz { width: min(100%, 36svh, 420px); }

/* ══ SCROLLMODUS / HANDY ═══════════════════════════════════════════════ */
@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  .fq-frage { --l: 1; translate: none; opacity: 1; }
  /* Der Rahmen der Liste steht im Blätterbetrieb einfach da (siehe den
     Fall-Kommentar oben) — hier gibt es keine Landung, an der er hinge. */
  .fq-liste { --l: 1; }
  .fuss { opacity: 1; translate: none; }
  .fq-raum { grid-template-columns: 1fr; gap: 1rem; padding-inline: 0; }
  .fq-platz { width: min(60vw, 260px); }
  .fuss { padding-inline: 0; }
  /* Die Bar bricht in Gruppen um und wird zur abgerundeten Kachel;
     der Trennpunkt entfällt, das © rutscht in eine eigene Zeile. */
  .fuss-glas { border-radius: 22px; padding: .6rem 1.1rem; gap: .2rem 1.2rem; }
  .fuss-gruppe::before { display: none; }
  .fuss-klein { margin-left: 0; flex-basis: 100%; white-space: normal; }
  .fq-knopf { min-height: 52px; font-size: 1rem; }
  .fq-antwort p { padding-right: 1rem; font-size: .95rem; }
}
@media (max-width: 520px) {
  .fuss-gruppe { flex-basis: 100%; }
  .fuss nav a { min-height: 44px; }
}