/* =====================================================================
   FAQ-Standard (2026-07-14) — Referenz = KI-Beratung (.beratung-faq-*).
   Verbindliche Spezifikation: SAIG-v3-intern/FAQ.md

   ACHTUNG, Referenz gewechselt: Bis 2026-07-12 galt die Agentur-FAQ
   (index / .home-faq) als Referenz. Jetzt gilt ki-beratung.html. Die
   Unterschiede waren real und diese Datei erzwang die FALSCHEN Werte:
     - Chevron rot #d91e18   -> Referenz ist GRAU rgba(16,24,32,.55)
     - Frage 15px            -> Referenz 15.5px
     - h2 clamp(32,4vw,52)   -> Referenz springt 34px -> 52px (Breakpoint)

   Grundsatz: Werte NICHT nachbauen, sondern ERBEN. Seiten sollen die
   Referenzklassen (.beratung-faq-section / .beratung-faq-grid) tragen,
   dann greift styles.css automatisch richtig — inklusive der Media-
   Queries. index.html macht das seit 2026-07-14, wissen.html schon länger.
   Absolute px-Werte hier hineinzuschreiben hiesse, gegen fünf Override-
   Ebenen in styles.css zu kämpfen und Mobile zu brechen (h2 ist dort
   34px, nicht 52px).

   Diese Datei macht deshalb nur noch das, was Vererbung nicht leisten
   kann: den Sektionsgrund gegen das Sektions-Ton-System durchsetzen.
   Wird als LETZTES Stylesheet eingebunden.
   ===================================================================== */

/* --- Sektionsgrund: überall der getönte Referenzgrund #f1f5f9 ---------
   Das Ton-System in styles.css zwingt Nicht-Allowlist-Sektionen auf
   Weiss (auf index.html sichtbar). Zwei ID-Ebenen (:not(#saig-x) +
   :not(#____never____)) plus späte Ladeposition schlagen das.
   background-image:none killt zusätzlich Gradient-Auflagen; das
   ::before-Overlay ist die bekannte Falle bei Sektionstönen. */
html body:not(#saig-x) :is(
  .beratung-faq-section,
  .dienste-faq-section,
  .pa-section.pa-faq,
  .term-section.term-faq,
  .pn-section.pn-faq,
  .pv-section.pv-faq,
  #faq.uc-detail,
  .ucd-faq-section
):not(#____never____) {
  background-color: #f1f5f9 !important;
  background-image: none !important;
}

html body:not(#saig-x) :is(
  .beratung-faq-section,
  .dienste-faq-section,
  .pa-section.pa-faq,
  .term-section.term-faq,
  .pn-section.pn-faq,
  .pv-section.pv-faq,
  #faq.uc-detail,
  .ucd-faq-section
):not(#____never____)::before {
  background: none !important;
  content: none !important;
}

/* =====================================================================
   Bespoke-Seiten an die Referenz ziehen.
   Diese sechs Seiten tragen NICHT die Referenzklassen, sondern eigene
   (.pa-faq, .term-faq, .pn-faq, .pv-faq, #faq.uc-detail, .ucd-faq-section).
   Bis sie umgestellt sind (siehe FAQ.md, offener Punkt), gleichen die
   folgenden Regeln die sichtbaren Komponenten an die Referenz an.
   Bewusst NICHT dabei: h2-Grösse. Die Referenz springt 34px -> 52px an
   einem Breakpoint; ein fester Wert hier würde Mobile brechen.
   ===================================================================== */

/* --- Kopf: Eyebrow zentriert auf Referenzmass (16px/700, 0.18em) ------
   Rot kommt NICHT von hier, sondern vom JS-Painter über die HTML-Klasse
   .text-swiss-red. Fehlt die Klasse, malt der Painter dunkel —
   potenzialanalyse.html (.pa-eyebrow) ist genau dieser Fall. */
:is(.pa-faq, .pn-faq, .pv-faq, .term-faq, #faq.uc-detail, .ucd-faq-section) :is(.pa-eyebrow, .pn-kicker, .pv-kicker, .term-kicker, .uc-detail__kicker, .ucd-kicker) {
  display: block !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  margin: 0 auto 14px !important;
}
:is(.pa-faq, .pn-faq, .pv-faq, .term-faq, #faq.uc-detail, .ucd-faq-section) h2:not(#____never____) {
  text-align: center !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#faq.uc-detail .uc-detail__lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
#faq.uc-detail .uc-detail__kicker .material-symbols-outlined { display: none !important; }

/* --- Karte: Referenz = #fbfcfd, 1px #dfe6ee, r12 --------------------- */
:is(.pa-faq, .pn-faq, .pv-faq, .term-faq, #faq.uc-detail, .ucd-faq-section) details:not(#____never____) {
  border: 1px solid #dfe6ee !important;
  background: #fbfcfd !important;
  border-radius: 12px !important;
}

/* --- Frage: Referenz = 15.5px/500 (nicht 15px, nicht 17/600) --------- */
:is(.pa-faq, .pn-faq, .pv-faq, .term-faq, #faq.uc-detail, .ucd-faq-section) details summary:not(#____never____) {
  font-size: 15.5px !important;
  font-weight: 500 !important;
}

/* --- Chevron: Referenz = expand_more, GRAU rgba(16,24,32,.55), 22px ---
   Vorher stand hier rot #d91e18 (= das Chevron der alten Referenz) und
   auf den Use-Case-Seiten keyboard_arrow_down in 26px. */
:is(.pa-faq, .pn-faq, .pv-faq, .term-faq, #faq.uc-detail, .ucd-faq-section) details summary::after {
  content: "expand_more" !important;
  font-family: 'Material Symbols Outlined' !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: rgba(16, 24, 32, .55) !important;
  -webkit-text-fill-color: rgba(16, 24, 32, .55) !important;
  transition: transform 0.2s ease !important;
}
:is(.pa-faq, .pn-faq, .pv-faq, .term-faq, #faq.uc-detail, .ucd-faq-section) details[open] summary::after {
  content: "expand_more" !important;
  transform: rotate(180deg) !important;
}

/* --- Kanonischer FAQ-Eyebrow (.beratung-*) rot erzwingen -----------------
   Der rote FAQ-Eyebrow bezieht seine Farbe sonst vom JS-Painter (Klasse
   .text-swiss-red). Auf painter-uebersprungenen Seiten (.ucd-page sowie
   .pn-/.pv-/.pl-/.pw-/.po-page) laeuft der Painter nicht → der globale
   Ueberschriften-Darkener (styles.css) faerbt den Eyebrow #191c1e (dunkel
   statt rot). Gemessen auf usecase-call-agent (2026-07-18): rgb(25,28,30).
   Diese Datei laedt zuletzt und erzwingt Rot per ID-Trick; auf Painter-
   Seiten wertgleich (Painter setzt dasselbe Rot). color UND -webkit-fill. */
html body:not(#saig-x) .beratung-faq-section .text-swiss-red:not(#____never____) {
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
}