/* ============================================================
   BLOCK: FAQ — Design Tokens
   Datei: page-builder/components/organisms/faq/block.css
   FAQ-Komponente (Nutzer-Vorgabe): eyebrow + Titel + Intro, danach
   Fragen/Antworten in zwei Darstellungen:
   - text (Default): zweispaltiges Raster aus Textabschnitten
     (Frage als h3 + Antwort), ab 992px zweispaltig, darunter einspaltig
   - cards: Karten mit Rahmen, natives <details>-Akkordeon (kein JS),
     Frage als <summary>, dezent ersetzter Marker (Plus rotiert bei
     geöffneter Karte um 45°).
   Schema.org-FAQPage-JSON-LD liefert render.php (unsichtbar).

   Fluid-Formeln exakt nach Theme-Funktion fluid-size($min,$max)
   (assets/scss/abstracts/_mixins.scss): clamp(min, min-20*f +
   100vw*f, max) mit f = (max-min)/100 [rem]. $customEase =
   cubic-bezier(0.22, 1, 0.36, 1) = Token var(--as-ease).
   Bootstrap-Breakpoints: lg = 992px, md = 768px.
   ============================================================ */
@import "../../../assets/tokens.css" layer(sdc-tokens);

/* ============================================================
   .as-faq — Sektion
   space-top/bottom-padding-large = fluid-size(50,100):
   clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem)  (50–100px)
   ============================================================ */
.as-faq {
    background: var(--as-color-white);
    padding-top: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
    padding-bottom: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
}

/* Hintergrund-Modifier (Schöndienst-Farbwelt) */
.as-faq--bg-neutral {
    background: var(--as-color-neutral);
}
.as-faq--bg-dark {
    background: var(--as-color-navy);
}

/* Kopfbereich (section-head-Molekül) auf dunklem Grund — Overrides
   für den Navy-Hintergrund (Eyebrow/Headline/Intro heller; Abweichung
   vom text-Block: Intro UND Eyebrow werden hier bewusst mitgeführt,
   sonst zu dunkel auf Navy). */
.as-faq--bg-dark .as-eyebrow {
    color: var(--as-color-accent-light);
}
.as-faq--bg-dark .as-headline {
    color: var(--as-color-white);
}
.as-faq--bg-dark .as-section-head__sub {
    color: #adadad;
}
.as-faq--bg-dark .as-section-head__intro {
    color: var(--as-color-light);
}

/* ============================================================
   FAQ-Liste — Raster beider Varianten
   ============================================================ */
.as-faq__list {
    display: grid;
    gap: clamp(1.875rem, 1.2159rem + 2.0625vw, 3.75rem);
}

/* text (Default): einspaltig als Basis, zweispaltig erst ab lg (≥992px) */
.as-faq--text .as-faq__list {
    grid-template-columns: 1fr;
}

/* cards: immer einspaltig (Akkordeon-Spalten sind unüblich), kompakter Abstand */
.as-faq--cards .as-faq__list {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 0.8579rem + 0.4375vw, 1.375rem);
}

/* ============================================================
   Textabschnitte (Variant "text")
   ============================================================ */
.as-faq--text .as-faq__item {
    padding-bottom: clamp(1.5rem, 1.2159rem + 0.8333vw, 2.125rem);
    border-bottom: 1px solid var(--as-color-border);
}

/* Frage (h3) — Sora SemiBold, accent-brand, fluid-size(18,22):
   clamp(1.125rem, 1.0625rem + 0.3125vw, 1.375rem) */
.as-faq__question {
    font-family: var(--as-font-sans);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.0625rem + 0.3125vw, 1.375rem);
    line-height: 1.4;
    color: var(--as-color-accent-brand);
    margin: 0 0 0.75rem;
}

/* Antwort — wie text-Block .as-text__body (fluid-size(14,16)) */
.as-faq__answer {
    font-family: var(--as-font-body);
    font-size: clamp(0.875rem, 0.8409rem + 0.1042vw, 1rem);
    letter-spacing: 0.01em;
    line-height: 1.875;
    color: var(--as-color-text);
}

.as-faq__answer p {
    margin: 0 0 1em;
}
.as-faq__answer p:last-child {
    margin-bottom: 0;
}
.as-faq__answer ul,
.as-faq__answer ol {
    margin: 0 0 1em;
    padding-left: 1.25rem;
}
.as-faq__answer a {
    color: var(--as-color-accent-brand);
    text-decoration: underline;
}
.as-faq__answer a:hover {
    color: var(--as-color-accent-light);
}

/* ============================================================
   Cards (Variant "cards") — natives details/summary-Akkordeon
   Karte: weiß, 1px Rahmen (Token), Radius 10px (Token), dezent
   aufklappbarer Hover-Schatten (Muster teaser-cards Editorial).
   ============================================================ */
.as-faq--cards .as-faq__item {
    background: var(--as-color-white);
    border: 1px solid var(--as-color-border);
    border-radius: var(--as-radius);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.as-faq--cards .as-faq__item[open] {
    border-color: var(--as-color-accent-brand);
    box-shadow: 0 14px 34px rgba(6, 40, 75, 0.1); /* Karten-Schatten wie teaser-cards */
}

/* Frage = summary (Akkordeon-Kopf): Default-Marker entfernen
   (list-style + ::-webkit-details-marker), eigener dezenter Marker
   über ::after (Plus → bei [open] 45° rotiert = ×). */
.as-faq--cards .as-faq__question {
    list-style: none;
    margin: 0;
    padding: clamp(1rem, 0.8579rem + 0.4375vw, 1.375rem) 3.25rem clamp(1rem, 0.8579rem + 0.4375vw, 1.375rem) clamp(1.25rem, 1.1193rem + 0.4167vw, 1.625rem);
    cursor: pointer;
    position: relative;
    color: var(--as-color-navy-deep);
    transition: color 0.3s ease;
}

.as-faq--cards .as-faq__question::-webkit-details-marker {
    display: none;
}

.as-faq--cards .as-faq__item:hover .as-faq__question,
.as-faq--cards .as-faq__item[open] .as-faq__question {
    color: var(--as-color-accent-brand);
}

.as-faq--cards .as-faq__question::after {
    content: "+";
    position: absolute;
    right: clamp(1rem, 0.8579rem + 0.4375vw, 1.375rem);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--as-font-sans);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--as-color-accent-brand);
    transition: transform 0.3s var(--as-ease);
}

.as-faq--cards .as-faq__item[open] .as-faq__question::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Tastatur-Bedienung sichtbar machen */
.as-faq--cards .as-faq__question:focus-visible {
    outline: 2px solid var(--as-color-accent-brand);
    outline-offset: -2px;
}

/* Antwort-Bereich in der Karte: Trennlinie unter der Frage */
.as-faq--cards .as-faq__answer {
    padding: 1rem clamp(1.25rem, 1.1193rem + 0.4167vw, 1.625rem) clamp(1.25rem, 1.1193rem + 0.4167vw, 1.625rem);
    border-top: 1px solid var(--as-color-border);
}

/* ============================================================
   Dunkler Hintergrund (--bg-dark)
   ============================================================ */
.as-faq--bg-dark .as-faq__question {
    color: var(--as-color-white);
}
.as-faq--bg-dark .as-faq__answer {
    color: var(--as-color-light);
}
.as-faq--bg-dark .as-faq__answer a {
    color: var(--as-color-accent-light);
}
.as-faq--bg-dark .as-faq__question::after {
    color: var(--as-color-accent-light);
}

.as-faq--bg-dark.as-faq--text .as-faq__item {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Karten auf Navy: navy-soft statt weiß, heller Rahmen */
.as-faq--bg-dark.as-faq--cards .as-faq__item {
    background: var(--as-color-navy-soft);
    border-color: rgba(255, 255, 255, 0.15);
}
.as-faq--bg-dark.as-faq--cards .as-faq__item[open] {
    border-color: var(--as-color-accent-light);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.as-faq--bg-dark.as-faq--cards .as-faq__answer {
    border-top-color: rgba(255, 255, 255, 0.15);
}
.as-faq--bg-dark.as-faq--cards .as-faq__item:hover .as-faq__question,
.as-faq--bg-dark.as-faq--cards .as-faq__item[open] .as-faq__question {
    color: var(--as-color-white);
}

/* ============================================================
   Responsive (Bootstrap-Breakpoints: lg = 992px, md = 768px)
   Zweispaltig NUR ab 992px (Variant text), darunter einspaltig.
   ============================================================ */
@media (min-width: 992px) {
    .as-faq--text .as-faq__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .as-faq--text .as-faq__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .as-faq__question {
        margin-bottom: 0.5rem;
    }
    .as-faq--text .as-faq__item {
        padding-bottom: 1.5rem;
    }
    .as-faq--cards .as-faq__question {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-right: 3rem;
    }
}