/* Häufige Fragen — zweispaltig ab 900 px, darunter eine Landschaft aus
   Clash-Deko.

   Kein JavaScript: Nummern über einen CSS-Zähler, Auf- und Zuklappen über das
   eingebaute <details>. Das bleibt mit Tastatur bedienbar und funktioniert
   auch, wenn ein Skript hängenbleibt. */

/* Unten Platz für die Landschaft. Ohne ihn stünden die Felsen hinter der
   letzten Frage — lesbar zwar (sie liegen dahinter), aber unsauber.
   Der Wert deckt das höchste Stück (bis 118 px) plus Luft auf jeder Breite. */
.faq-raster { display: grid; gap: clamp(24px, 4vw, 48px); }
.faq-kopf p { max-width: 36ch; margin-bottom: 20px; }

@media (min-width: 900px) {
  .faq-raster { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); align-items: start; }
  /* Doppelte Klasse statt ID: landing.css gibt allen Kindern von #faq
     `position: relative`, und dessen Selektor wiegt genauso schwer wie
     `#faq .faq-kopf`. Bei Gleichstand entscheidet die Ladereihenfolge — darauf
     will man nicht angewiesen sein. `.faq-kopf.faq-kopf` gewinnt eindeutig.
     96 px ist ungefähr die Höhe der schwebenden Leiste. */
  #faq .faq-kopf.faq-kopf { position: sticky; top: 96px; }
}

.faq-liste { display: grid; gap: 10px; counter-reset: faq; }

.faq {
  counter-increment: faq;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.faq:hover { border-color: var(--line-strong); }

/* Offen: andere Fläche, kräftigerer Rand, Markierung an der Kante.
   Innenschatten statt `border-left` — ein echter Rand würde den Text beim
   Öffnen um zwei Pixel verschieben. */
.faq[open] {
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: inset 2px 0 0 var(--ink);
}
/* `html.js .reveal` setzt `transition` neu und wiegt schwerer als `.faq` —
   hier zurückholen, sonst springen Hover und Offen-Zustand ohne Übergang. */
html.js .faq.reveal {
  transition: opacity .5s ease, transform .5s ease,
    border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.faq summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  /* 44 px Mindesthöhe: darunter trifft ein Finger die Zeile nicht zuverlässig. */
  min-height: 44px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: clamp(14.5px, 1.1vw, 16px);
  border-radius: var(--radius);
}
.faq summary::-webkit-details-marker { display: none; }
/* base.css setzt bei :focus-visible border-radius: 4px — hier zurückholen. */
.faq summary:focus-visible { border-radius: var(--radius); outline-offset: -3px; }

/* Nummer als reiner CSS-Zähler: kein Markup, kein Icon, keine Datei. */
.faq summary::before {
  content: counter(faq, decimal-leading-zero);
  font: 600 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color var(--t-fast);
}
.faq:hover summary::before, .faq[open] summary::before { color: var(--ink); }

/* Plus, das sich beim Öffnen zum Kreuz dreht.
   GEZEICHNET, nicht gesetzt: Als Schriftzeichen „+" sitzt das Glyph in seiner
   Zeile systematisch zu hoch — Schriften richten es an der Mathematik-Mitte
   aus, nicht an der Zeilenmitte. Kein `line-height` und kein `place-items`
   bekommt das zuverlässig gerade, und es sähe je nach Schrift anders aus.
   Zwei Farbbalken über `background-position: center` sind dagegen exakt
   mittig — der Bezugsrahmen ist der Innenkasten, und der liegt bei
   gleichmäßigem Rand genau in der Kreismitte. */
.faq summary::after {
  content: "";
  width: 26px; height: 26px;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background-color: transparent;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 10px 1.5px, 1.5px 10px;
  background-position: center;
  background-repeat: no-repeat;
  transition: rotate var(--t), background-color var(--t-fast), color var(--t-fast);
}
.faq:hover summary::after { color: var(--ink); background-color: var(--surface-3); }
.faq[open] summary::after { rotate: 45deg; color: var(--ink); background-color: var(--surface-3); }

/* Antwort: Haarlinie über die volle Kastenbreite, Text auf die Frage
   eingerückt. Die Bewegung läuft nur beim Öffnen — geschlossen steht der
   Inhalt auf `display: none`, die Keyframes beginnen also jedes Mal neu. */
.faq__a {
  border-top: 1px solid var(--line);
  padding: 14px 16px 18px 46px;
  animation: faq-auf var(--t) ease;
}
.faq__a p { margin: 0; font-size: 14.5px; max-width: 62ch; }
.faq__a p + p { margin-top: .7em; }
.faq__a a { color: var(--ink); text-underline-offset: 3px; }
/* `translate` statt `transform`: `.reveal` benutzt bereits `transform`. */
@keyframes faq-auf { from { opacity: 0; translate: 0 -6px; } }

@media (max-width: 560px) { .faq__a { padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { .faq__a { animation: none; } }


/* ── Dezente Deko in den Seitenrändern ─────────────────────────────────────
   Ein Stein links, ein Stein mit Busch rechts — mehr nicht. Sie stehen in der
   freien Randspalte NEBEN dem Inhalt, nie darüber: `right: 100%` bzw.
   `left: 100%` setzt sie außerhalb des Abschnitts, die Breite ist die
   Randspalte selbst. Das ist keine Frage der richtigen Pixelzahl, sondern der
   Geometrie — bei jeder Fensterbreite bleiben sie draußen.

   Rein dekorativ: `aria-hidden` am Element, `pointer-events: none` hier. */
.faq-deko {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 100% = Breite des Abschnitts. Bleibt exakt die freie Randspalte. */
  width: calc((100vw - 100%) / 2);
  max-width: none;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.faq-deko--links { right: 100%; }
.faq-deko--rechts { left: 100%; }
/* Links steht die Clanburg, rechts ein Felsen — zwei verschiedene Motive
   brauchen keine Spiegelung, um sich zu unterscheiden. */

.faq-deko img {
  display: block;
  /* min-width: 0 ist Pflicht: ohne das schrumpft ein Flex-Kind nie unter
     seine natuerliche Bildbreite, die Prozentangabe waere wirkungslos, und
     der Stein raegte in den Text. */
  min-width: 0;
  width: 62%;
  max-width: none;
  height: auto;
  /* Deutlich gedämpft: „dezent" heißt, dass die Steine erst auffallen, wenn
     man hinsieht. Die Renders sind für hellen Grund gebaut und wären sonst
     hellgraue Flecken neben dem Text. */
  opacity: .58;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .7)) brightness(.78) saturate(.8);
}

/* Unter 1280 px schrumpft die Randspalte unter 100 px — dort gibt es keinen
   freien Rand mehr zu schmücken, der Inhalt füllt die Breite. Ein Stein wäre
   dann entweder briefmarkengroß oder läge über dem Text. */
@media (max-width: 1279px) {
  .faq-deko { display: none; }
}