/* ==========================================================================
   FAQ-Spalten (Ergänzung 2026-09)
   --------------------------------------------------------------------------
   Die Website hatte drei Aussehen für dieselbe Sache: das Akkordeon mit dem
   `.faq`-Skin auf `/preise`, dasselbe Akkordeon mit dem `.det-faq`-Skin auf
   den sechzehn Lösungsseiten und auf `/kontakt` zwei Spalten aus Karten mit
   immer offenen Antworten und einem Plus-Zeichen ohne Funktion.

   Seit 2026-09 rendert überall `src/legacy/faq.jsx`. Die zwei Skins des
   Exports bleiben, was sie sind (Schriftgrößen, Tonfarbe im offenen
   Zustand); hier steht nur, wie viele Spalten die Liste hat, für beide
   Präfixe gleich. Die Export-Dateien bleiben unangetastet.

   Ein- oder zweispaltig hängt am Varianten-Schalter (`chesterFaqSpalten`),
   ausgeliefert wird seit 2026-09-13 eine Spalte. Die zweispaltige Fassung
   bleibt im Schalter, ihre Regeln stehen weiter unten.

   Die Zellen einer Zeile sind gleich hoch (Grid-Default), damit die
   Trennlinien beider Spalten auf einer Höhe liegen. Der zweite Eintrag steht
   oben in der rechten Spalte und braucht deshalb dieselbe Linie, die
   `:first-child` der linken Spalte bekommt.
   ========================================================================== */

/* Geometrie, für beide Skins dieselbe. Der `.det-faq`-Skin stand im Export
   auf `margin: 0` und beginnt damit an der linken Container-Kante, der
   `.faq`-Skin auf `margin: 0 auto` und lag dadurch 160px eingerückt. Auf
   `/kontakt` und `/preise` ergab das drei linke Kanten in einer Sektion:
   Container bei 120, Liste bei 280, zentrierte Überschrift bei 360. Die
   Liste steht jetzt überall bündig, der Kopf mit `.faq-head` darüber. */
.faq,
.det-faq {
  max-width: 880px;
  margin: 0;
}

/* Kopf der FAQ-Sektion, dieselben Maße wie `.det-sec-head` auf den
   Lösungsseiten, damit Überschrift und Liste auf einer Kante sitzen. */
.faq-head {
  max-width: 820px;
  margin-bottom: 48px;
  text-align: left;
}

.faq-zwei,
.det-faq-zwei {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
}

/* Der `.faq`-Skin steht sonst in einer 760px-Spalte und ist auf 22px
   gesetzt, das ist für eine halbe Breite zu groß. */
.faq-zwei { max-width: 1100px; }
.faq-zwei .faq-item:nth-child(2) { border-top: 1px solid var(--border-1); }
.faq-zwei .faq-q h3 { font-size: 19px; }
.faq-zwei .faq-a p { font-size: 15px; }

/* Der `.det-faq`-Skin trägt seine Linie oben und schließt mit einer unteren
   am letzten Eintrag. In zwei Spalten ist „der letzte" nur einer von zwei,
   die untere Linie gehört deshalb an das letzte Element jeder Spalte. */
.det-faq-zwei { max-width: 1100px; }
.det-faq-zwei .det-faq-item:last-child { border-bottom: 0; }
.det-faq-zwei .det-faq-item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--border-1); }
/* Ungerade Anzahl: der vorletzte steht links unten, der letzte rechts oben
   daneben in derselben Zeile. Dann trägt nur der letzte die Schlusslinie. */
.det-faq-zwei .det-faq-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }