/* ============================================================
   Schichtfix — FAQ-Seite (faq.html). Baut auf tokens.css auf:
   jede Farbe, jeder Radius und jeder Schatten kommt von dort.

   Charakter: ruhige helle Seite, Karten heben sich über weiße
   Fläche und weichen, blau getönten Schatten ab — keine Rahmen.
   Vordergrund auf Ocean ist immer Deep Blue. Links und Fokus
   auf hellem Grund sind Deep Blue, auf dem Kopfband Weiß.
   Zuerst für 375 px gebaut, breiter ab 900 px.
   ============================================================ */

.faq-seite {
  background: var(--surface-muted);
  --faq-rand: 20px;
  --faq-radius-feld: 16px;      /* Eingabefelder laut Designsystem §5.1 */
}

.faq-seite [hidden] { display: none !important; }

.faq-unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Fokus: 2 px Deep Blue mit 2 px Abstand, auf dem Kopfband Weiß --- */
.faq-seite :focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.faq-kopf :focus-visible { outline-color: var(--white); }

/* --- Links: Deep Blue und unterstrichen (Ocean trägt auf hellem Grund keinen Text) --- */
.faq-seite a { color: var(--blue-deep); }
.faq-seite a:hover { color: var(--blue-deep-800); }
.faq-text a, .faq-fuss a, .faq-hinweis-text a { text-decoration: underline; text-underline-offset: 3px; }

.faq-sprung {
  position: absolute; left: var(--faq-rand); top: -80px; z-index: 5;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--white); border-radius: var(--radius-pill); font-weight: 700;
}
.faq-sprung:focus { top: 12px; }

/* ============================================================
   Kopfband mit Suche
   ============================================================ */
.faq-kopf { background: var(--gradient-header); color: var(--white); }
.faq-kopf-innen { max-width: 1120px; margin: 0 auto; padding: 22px var(--faq-rand) 30px; }
.faq-kopf h1, .faq-suche, .faq-ohne-js { max-width: 824px; }

.faq-logo { display: inline-flex; align-items: center; min-height: 44px; }
.faq-logo img { display: block; height: 32px; width: auto; }

.faq-kopf h1 {
  margin: 26px 0 0; color: var(--white); font-weight: 900;
  font-size: clamp(31px, 6vw, 46px); line-height: 1.06; letter-spacing: -.025em;
}
.faq-unterzeile { margin: 12px 0 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--white); }

.faq-suche { position: relative; margin: 26px 0 0; }
.faq-suche input {
  display: block; width: 100%; height: 60px; margin: 0;
  padding: 0 56px 0 54px; border: 0; border-radius: var(--faq-radius-feld);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-pop);
  font: inherit; font-size: 17px; font-weight: 500;
  appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
}
.faq-suche input::placeholder { color: var(--ink-muted); opacity: 1; }
.faq-suche input::-webkit-search-cancel-button,
.faq-suche input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.faq-suche input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.faq-lupe {
  position: absolute; left: 18px; top: 18px; pointer-events: none;
  fill: none; stroke: var(--blue-deep); stroke-width: 2.2; stroke-linecap: round;
}
.faq-leeren {
  position: absolute; right: 8px; top: 8px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); background: var(--grey-warm); cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.faq-leeren svg { fill: none; stroke: var(--blue-deep); stroke-width: 2.4; stroke-linecap: round; }
.faq-leeren:hover { background: var(--line-cool); }
.faq-kopf .faq-leeren:focus-visible { outline-color: var(--blue-deep); outline-offset: -4px; }

/* Schmal in einer Zeile wischbar, damit die Antwort dicht unter dem Feld bleibt;
   mit Suchtext treten die Beispiele ganz zurück. */
.faq-beispiele {
  display: flex; gap: 10px; margin: 12px calc(var(--faq-rand) * -1) 0; padding: 4px var(--faq-rand);
  list-style: none; overflow-x: auto; scrollbar-width: none;
}
.faq-beispiele::-webkit-scrollbar { display: none; }
.faq-beispiele li { flex: 0 0 auto; }
.faq-sucht .faq-beispiele { display: none; }
.faq-pille {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-pill); background: var(--blue-deep-800);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.faq-seite a.faq-pille, .faq-seite a.faq-pille:hover { color: var(--white); }
.faq-pille:hover { background: var(--blue-deep); }

.faq-ohne-js {
  margin: 24px 0 0; padding: 16px 20px; border-radius: var(--faq-radius-feld);
  background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.55;
}

/* ============================================================
   Hauptbereich
   ============================================================ */
.faq-haupt { max-width: 1120px; margin: 0 auto; padding: 30px var(--faq-rand) 0; }

.faq-haupt h2 {
  margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(22px, 3.4vw, 28px); color: var(--blue-deep);
}

/* --- Eintrag: Frage als Karte, Antwort klappt auf --- */
.faq-eintrag {
  margin: 10px 0 0; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm);
  scroll-margin-top: 16px;
}
.faq-frage {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none;
  border-radius: var(--radius-card);
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-frage h3 { margin: 0; flex: 1 1 auto; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; text-wrap: pretty; }
.faq-frage-block { flex: 1 1 auto; min-width: 0; }
.faq-thema { display: block; margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }

/* Pfeil: zeigt nach unten, offen nach oben, in Listen nach rechts */
.faq-pfeil {
  flex: 0 0 auto; width: 10px; height: 10px; margin: 0 4px 4px 0;
  border-right: 2.4px solid var(--blue-deep); border-bottom: 2.4px solid var(--blue-deep);
  transform: rotate(45deg); transition: transform 240ms var(--ease-out);
}
.faq-eintrag[open] > .faq-frage .faq-pfeil { transform: translateY(4px) rotate(-135deg); }

.faq-antwort { padding: 2px 20px 22px; }
.faq-eintrag[open] > .faq-antwort { animation: faqAuf 240ms var(--ease-out) both; }
@keyframes faqAuf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.faq-text { max-width: 44em; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.faq-text p { margin: 0 0 12px; text-wrap: wrap; }   /* „pretty“ aus tokens.css bricht schmale Spalten zu früh um */
.faq-text ul, .faq-text ol { margin: 0 0 12px; padding-left: 22px; }
.faq-text li { margin: 6px 0 0; }
.faq-text > :last-child { margin-bottom: 0; }
.faq-text strong { font-weight: 700; color: var(--blue-deep); }

.faq-dazu { margin: 22px 0 0; }
.faq-dazu-titel, .faq-rueckfrage-text, .faq-wege-titel {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--blue-deep);
}
.faq-dazu ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.faq-dazu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px;
  border-radius: var(--radius-pill); background: var(--surface-muted);
  font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.faq-dazu a:hover { background: var(--line-cool); }

/* --- Unter der Antwort: Rückfrage, Wege, Link kopieren --- */
.faq-werkzeuge { margin: 26px 0 0; }
.faq-rueckfrage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.faq-janein { display: flex; gap: 10px; }

/* Ruhige Fläche: warmer Ton, Schrift Deep Blue. Gewählt: Deep Blue mit weißer Schrift. */
.faq-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 72px; padding: 0 20px;
  border: 0; border-radius: var(--radius-pill); background: var(--grey-warm);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.faq-seite .faq-knopf { color: var(--blue-deep); }
.faq-knopf:hover { background: var(--line); }
.faq-seite .faq-knopf[aria-pressed="true"] { background: var(--blue-deep); color: var(--white); }

.faq-danke { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--blue-deep); }

.faq-wege { margin: 20px 0 0; }
.faq-wege-raster { display: grid; gap: 20px; margin: 14px 0 0; }
.faq-weg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.faq-weg-hinweis { margin: 0; max-width: 30em; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.faq-hauptknopf { min-height: 50px; padding: 0 26px; font-size: 16px; }
.faq-seite .faq-hauptknopf:hover { transform: none; }

.faq-kopieren { margin: 22px 0 0; background: var(--surface-muted); padding: 0 18px 0 14px; font-weight: 600; }
.faq-kopieren:hover { background: var(--line-cool); }
.faq-kopieren svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ============================================================
   Suchergebnis
   ============================================================ */
.faq-ergebnis { max-width: 824px; padding: 0 0 20px; }
.faq-verstanden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 15px; color: var(--ink-muted); }
.faq-verstanden-titel { font-weight: 600; }
.faq-marke {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px;
  border-radius: var(--radius-pill); background: var(--white);
  font-size: 14px; font-weight: 700; color: var(--blue-deep);
}
.faq-haupt .faq-ergebnis-titel { margin: 26px 0 0; font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--ink-muted); }
.faq-ergebnis > .faq-ergebnis-titel:first-of-type { margin-top: 0; }
.faq-beste { box-shadow: var(--shadow-card); }
.faq-beste > .faq-frage h3 { font-size: clamp(19px, 3vw, 22px); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }

.faq-hinweis {
  margin: 10px 0 0; padding: 24px 20px 26px; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm);
}
.faq-ergebnis > .faq-hinweis:not(:first-of-type), .faq-weitere + .faq-hinweis, .faq-beste + .faq-hinweis { margin-top: 26px; }
.faq-hinweis-text { margin: 8px 0 6px; max-width: 34em; font-size: 16.5px; line-height: 1.6; color: var(--ink); }

/* ============================================================
   Bestand: häufige Fragen, Kategorien
   ============================================================ */
.faq-haeufig ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.faq-haeufig a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 12px 20px; background: var(--white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm);
  font-size: 16.5px; font-weight: 700; line-height: 1.35; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease-out);
}
.faq-haeufig a:hover { box-shadow: var(--shadow-card); }
.faq-haeufig .faq-pfeil { transform: rotate(-45deg); margin: 0 4px 0 0; }

.faq-raster { margin: 34px 0 0; }

/* Schmal: Kategorien als waagerecht wischbare Pillen */
.faq-themen { margin: 0 calc(var(--faq-rand) * -1); }
.faq-themen ul {
  display: flex; gap: 8px; margin: 0; padding: 4px var(--faq-rand) 12px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.faq-themen ul::-webkit-scrollbar { display: none; }
.faq-themen li { flex: 0 0 auto; scroll-snap-align: start; }
.faq-themen a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--white);
  font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.faq-zahl { font-size: 13px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.faq-themen a[aria-current="true"] { font-weight: 800; }

.faq-kategorie { margin: 30px 0 0; scroll-margin-top: 16px; }
.faq-liste > .faq-kategorie:first-child { margin-top: 18px; }
.faq-kurz { margin: 8px 0 16px; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* ============================================================
   Fuß
   ============================================================ */
.faq-fuss { margin: 72px 0 0; padding: 0 var(--faq-rand) 40px; text-align: center; font-size: 14.5px; color: var(--ink-muted); }
.faq-fuss a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 600; }

/* ============================================================
   Breit
   ============================================================ */
@media (min-width: 640px) {
  .faq-wege-raster { grid-template-columns: 1fr 1fr; gap: 28px; }
  .faq-haeufig ul { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .faq-seite { --faq-rand: 28px; }
  .faq-kopf-innen { padding-top: 26px; padding-bottom: 48px; }
  .faq-suche input { height: 64px; font-size: 18px; }
  .faq-lupe { top: 20px; }
  .faq-leeren { top: 10px; }
  .faq-haupt { padding-top: 40px; }
  .faq-beispiele { flex-wrap: wrap; overflow: visible; }
  .faq-frage { padding: 16px 24px; }
  .faq-antwort { padding: 2px 24px 26px; }
  .faq-hinweis { padding: 28px 24px 30px; }

  .faq-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 44px; }
  .faq-themen { position: sticky; top: 20px; margin: 0; max-height: calc(100vh - 40px); overflow-y: auto; }
  .faq-themen ul { display: block; padding: 0; overflow: visible; }
  .faq-themen li + li { margin-top: 4px; }
  .faq-themen a { background: transparent; white-space: normal; padding: 8px 16px; line-height: 1.3; }
  .faq-themen a:hover { background: var(--line-cool); }
  .faq-themen a[aria-current="true"] { background: var(--white); box-shadow: var(--shadow-card-sm); }
  .faq-liste > .faq-kategorie:first-child { margin-top: 0; }
  .faq-kategorie { margin-top: 44px; }
}

/* ============================================================
   Ruhende Fassung
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .faq-eintrag[open] > .faq-antwort { animation: none; }
  .faq-pfeil, .faq-knopf, .faq-pille, .faq-haeufig a, .faq-themen a, .faq-dazu a, .faq-leeren { transition: none; }
}