/* =========================================================================
   Best Break – FAQ (/faq/, Template „faq")
   =========================================================================
   Bewusst als EIGENE Datei: wird nur von faq.php geladen und macht die Seite
   ohne Eingriff in style.css deploybar. Kann später gefahrlos ans Ende von
   style.css kopiert werden (dann in faq.php die <link>-Zeile entfernen).

   Baut auf Bestehendem auf und definiert nichts doppelt:
     .basic-flavor  liefert --basic-line / --basic-soft
     .basic-hero*   liefert den Hero (identisch zu Impressum/Datenschutz/AGB)
     .basic-body    liefert die Fließtext-Typografie der Antworten
   ========================================================================= */

/* ---------------------------------------------------------------------------
   SCHRIFTGRÖSSEN – abgeglichen mit Impressum / Datenschutz / AGB (Desktop)
   ---------------------------------------------------------------------------
   Basis ist html { font-size: 20px }, gemessene Ist-Werte der Rechtsseiten:

     h2  „Teil A/B"      2.5rem   50 px    romana 700
     h3  „Ziffer N"      1.45rem  29 px    romana 700
     p   Fließtext       1.1rem   22 px    sofia 300
     li  Listenpunkt     1.02rem  20.4 px  sofia 300
     TOC-Link            0.86rem  17.2 px  sofia 300
     h5  Kicker          0.7rem   14 px    sofia 700
     Badge               0.62rem  12.4 px  sofia 700

   Das FAQ übernimmt diese Stufen unverändert:
     Themenblock  = 1.875rem  (zwischen h2 und h3 – 50 px wäre über 19 Karten
                               erschlagend; 1.875rem ist die Stufe, die die
                               Rechtsseiten für h2 auf schmalen Screens nutzen)
     Frage        = 1.45rem   (exakt die h3-Stufe – die Frage IST die
                               Überschrift ihrer Antwort)
     Antwort      = keine eigene Größe → erbt .basic-body, damit <p> 22 px und
                               <li> 20.4 px ergeben, identisch zu den Rechtsseiten

   ACHTUNG, Fußangel: style.css enthält global „p { font-size: 1.1rem }" mit
   ABSOLUTEM Wert. Eine font-size am Container wirkt deshalb NICHT auf <p>,
   wohl aber auf <li> und nackten Text. Wer hier eine Container-Größe setzt,
   erzeugt genau dadurch unterschiedlich große Absätze und Listen. Also nicht
   tun – Textgrößen kommen ausschließlich aus .basic-body.
   --------------------------------------------------------------------------- */

.faq-flavor {
  --faq-radius: 16px;
  --faq-shadow: 0 8px 26px rgba(107, 105, 112, .07);
}

/* Themen-Akzente rotieren über die Bereichsfarben der Website. */
.faq-kat--rezepte, .faq-chip--rezepte { --faq-akzent: var(--color-rezepte);  --faq-akzent-soft: var(--color-rezepte-soft); }
.faq-kat--artikel, .faq-chip--artikel { --faq-akzent: var(--color-artikel);  --faq-akzent-soft: var(--color-artikel-soft); }
.faq-kat--uber,    .faq-chip--uber    { --faq-akzent: var(--color-uber);     --faq-akzent-soft: var(--color-uber-soft); }
.faq-kat--shop,    .faq-chip--shop    { --faq-akzent: var(--color-shop);     --faq-akzent-soft: var(--color-shop-soft); }

/* --- Grundgerüst ------------------------------------------------------- */

.faq-main {
  padding-top: clamp(34px, 4.5vw, 58px);
  padding-bottom: 7vh;
}

.faq-wrap {
  max-width: 820px;
  margin: 0 auto;
}

/* Intro (body der /faq/-Seite) – abgesetzte Karte, weil dort der Verweis auf
   die verbindlichen AGB steht. */
.faq-intro {
  background: var(--basic-soft);
  border: 1px solid var(--basic-line);
  border-radius: var(--faq-radius);
  padding: clamp(1.1rem, 1rem + .6vw, 1.6rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.faq-intro > :last-child { margin-bottom: 0; }

/* --- Werkzeugleiste: Suche + Alle auf-/zuklappen ------------------------ */
/* Im HTML mit [hidden]; faq.js blendet sie ein. Ohne JS bleibt die Seite
   vollständig nutzbar (alle Fragen sind normale <details>). */

.faq-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
}

.faq-tools[hidden] { display: none; }

.faq-suche {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
}

.faq-suche-icon {
  position: absolute;
  left: .85rem;
  display: inline-flex;
  color: var(--color-secondary);
  pointer-events: none;
}

.faq-suche-feld {
  width: 100%;
  height: 46px;
  padding: 0 2.4rem 0 2.6rem;
  border: 1px solid var(--basic-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--faq-shadow);
  font-family: var(--font-text);
  font-size: .86rem;
  font-weight: 300;
  color: var(--color-primary);
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.faq-suche-feld::placeholder { color: var(--color-secondary); opacity: 1; }
.faq-suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; }

.faq-suche-feld:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(107, 105, 112, .12);
}

.faq-suche-reset {
  position: absolute;
  right: .55rem;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--basic-soft);
  color: var(--color-primary);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
}

.faq-suche-reset:hover { background: var(--color-secondary); }
.faq-suche-reset[hidden] { display: none; }

.faq-toggle-all {
  height: 46px;
  padding: 0 1.15rem;
  border: 1px solid var(--basic-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--faq-shadow);
  font-family: var(--font-text);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.faq-toggle-all:hover { background: var(--basic-soft); border-color: var(--color-secondary); }

/* --- Themen-Sprungmarken ------------------------------------------------ */

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .48rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--basic-line);
  background: #fff;
  color: var(--color-primary);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.faq-chip:hover,
.faq-chip:focus-visible {
  background: var(--faq-akzent-soft);
  border-color: var(--faq-akzent);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--color-primary);
}

.faq-chip.is-active {
  background: var(--faq-akzent-soft);
  border-color: var(--faq-akzent);
  font-weight: 700;
}

.faq-chip-icon { font-size: .95rem; line-height: 1; }

/* --- Themenblock -------------------------------------------------------- */

/* padding-bottom neutralisiert die globale Regel „section { padding-bottom: 2.5% }",
   damit der Abstand zwischen den Themenblöcken berechenbar bleibt. */
.faq-kat {
  padding-bottom: 0;
  scroll-margin-top: 110px;
}
.faq-kat + .faq-kat { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

.faq-kat-head { margin-bottom: 1rem; }

.faq-kat-titel {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: 0 0 .7rem;
  border-bottom: 2px solid var(--faq-akzent);
  font-family: var(--font-headline);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
}

.faq-kat-emoji { font-size: 1.15em; line-height: 1; }

.faq-kat-intro {
  margin-top: .9rem;
}
.faq-kat-intro > :last-child { margin-bottom: 0; }

/* --- Frage / Antwort (natives <details>, funktioniert ohne JS) ---------- */

.faq-liste {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.faq-item {
  border: 1px solid var(--basic-line);
  border-radius: var(--faq-radius);
  background: #fff;
  box-shadow: var(--faq-shadow);
  overflow: hidden;
  scroll-margin-top: 110px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item[open] { border-color: var(--faq-akzent); }
.faq-item.is-hit { border-color: var(--faq-akzent); }
.faq-item[hidden] { display: none; }

/* Zusammenklapp-Zeile */
.faq-frage {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.85rem, .75rem + .4vw, 1.15rem) clamp(1rem, .9rem + .5vw, 1.35rem);
  cursor: pointer;
  list-style: none;
  transition: background-color .18s ease;
}

.faq-frage::-webkit-details-marker { display: none; }
.faq-frage:hover { background: var(--faq-akzent-soft); }

.faq-frage:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -3px;
}

.faq-frage-text {
  font-family: var(--font-headline);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

/* Plus/Minus statt Chevron: bleibt auch ohne Icon-Font lesbar. */
.faq-frage-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--faq-akzent-soft);
  transition: background-color .2s ease, transform .25s ease;
}

.faq-frage-icon::before,
.faq-frage-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  border-radius: 1px;
  background: var(--color-primary);
  transition: transform .25s ease, opacity .2s ease;
}

.faq-frage-icon::after { transform: rotate(90deg); }

.faq-item[open] .faq-frage-icon { background: var(--faq-akzent); }
.faq-item[open] .faq-frage-icon::after { transform: rotate(0deg); opacity: 0; }

/* Antwort */
.faq-antwort {
  padding: 0 clamp(1rem, .9rem + .5vw, 1.35rem) clamp(1rem, .9rem + .5vw, 1.35rem);
  animation: faq-auf .22s ease;
}

.faq-antwort > :last-child { margin-bottom: 0; }

/* Die Antwort erbt .basic-body – dort haben h3/h4 Rahmen und große Abstände,
   die in einer Akkordeon-Karte fehl am Platz wären. */
.faq-antwort h3,
.faq-antwort h4 {
  margin: 1.1rem 0 .4rem;
  padding-top: 0;
  border-top: 0;
  font-size: 1.1rem;
}

@keyframes faq-auf {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- Zustände / Abschluss ----------------------------------------------- */

.faq-keine-treffer,
.faq-empty-state {
  margin: 2rem 0 0;
  padding: 1.4rem;
  border: 1px dashed var(--basic-line);
  border-radius: var(--faq-radius);
  text-align: center;
  font-weight: 300;
  color: #4D4D4D;
}

.faq-keine-treffer[hidden] { display: none; }

.faq-keine-treffer a,
.faq-empty-state a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 2px;
}

.faq-cta {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  border-radius: 20px;
  background: linear-gradient(120deg, #F4F2F6 0%, #FBF4EF 52%, #EFF3F1 100%);
  text-align: center;
}

.faq-cta-titel {
  margin: 0 0 .35rem;
  font-family: var(--font-headline);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-primary);
}

.faq-cta-text {
  margin: 0 auto 1.1rem;
  max-width: 46ch;
  font-weight: 300;
  color: #4D4D4D;
}

.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}

.faq-cta-btn:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  opacity: .92;
}

.faq-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Klein / Bewegung / Druck ------------------------------------------- */

@media (max-width: 800px) {
  .faq-frage-text { font-size: 1.3rem; }
  .faq-toggle-all { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-antwort { animation: none; }
  .faq-chip,
  .faq-frage-icon,
  .faq-frage-icon::before,
  .faq-frage-icon::after,
  .faq-cta-btn { transition: none; }
}

@media print {
  .faq-tools,
  .faq-nav,
  .faq-cta,
  .faq-frage-icon { display: none !important; }

  /* Alle Antworten ausgeben, unabhängig vom Aufklapp-Zustand */
  .faq-item { break-inside: avoid; box-shadow: none; }
  .faq-item > .faq-antwort { display: block !important; }
  .faq-antwort { animation: none; }
}