/**
 * glattt FAQ — Aussehen der drei Darstellungen.
 *
 * Grundsatz: Das Plugin legt WEDER Schriftart NOCH Farben fest.
 * - Schrift: durchgehend `font-family: inherit`. Fragen stehen in einem <h3>
 *   und erben damit die Überschriftenschrift des Themes, Antworten die
 *   Fließtextschrift. Bei Knöpfen und Eingabefeldern muss `inherit` ausdrücklich
 *   stehen — dort erben Browser von sich aus nicht.
 * - Farben: alles leitet sich aus der geerbten Textfarbe ab (currentColor +
 *   color-mix). Der Akzent kommt aus der Theme-Variablen --glattt-gold und
 *   fällt sonst auf das glattt-Gold zurück.
 *
 * Eine bewusste Ausnahme: die Mint-Pille (.gfaq-cta--pille). Mint ist auf
 * glattt.com die Handlungsfarbe — dieselbe wie beim Buchen-Knopf und beim
 * schwebenden Beratungs-Knopf. Über „Aussehen des Call-to-Action“ lässt sie
 * sich auf den geerbten Akzent umstellen.
 *
 * Kein backdrop-filter (Rendering-Kosten), keine Icon-Fonts, keine Webfonts.
 */

.glattt-faq {
    /* Akzent: erst Theme-Variablen, dann glattt-Gold */
    --gfaq-akzent:        var(--glattt-gold, var(--nectar-accent-color, #E1B520));
    /* Gold trägt als Textfarbe nicht (1,9:1 auf Weiß) — abgedunkelt sind es 5,9:1 */
    --gfaq-akzent-text:   color-mix(in srgb, var(--gfaq-akzent) 62%, #000);
    --gfaq-akzent-weich:  color-mix(in srgb, var(--gfaq-akzent) 16%, transparent);
    --gfaq-akzent-warm:   color-mix(in srgb, var(--gfaq-akzent) 26%, transparent);

    --gfaq-linie:         color-mix(in srgb, currentColor 15%, transparent);
    --gfaq-linie-stark:   color-mix(in srgb, currentColor 24%, transparent);
    --gfaq-leise:         color-mix(in srgb, currentColor 72%, transparent);
    --gfaq-flaeche:       color-mix(in srgb, currentColor 3%, transparent);
    --gfaq-flaeche-stark: color-mix(in srgb, currentColor 6%, transparent);

    --gfaq-mint:      #BCEEE2;
    --gfaq-mint-hell: #CDF3EA;
    --gfaq-mint-tief: #14544A;

    --gfaq-radius: 14px;
    --gfaq-tempo:  .35s;

    font-family: inherit;
    color: inherit;
    box-sizing: border-box;
}

.glattt-faq *,
.glattt-faq *::before,
.glattt-faq *::after {
    box-sizing: border-box;
}

/* Auf dunklen Sektionen muss der Akzent aufhellen statt abzudunkeln. */
.glattt-faq--hell {
    --gfaq-akzent-text:  color-mix(in srgb, var(--gfaq-akzent) 82%, #fff);
    --gfaq-akzent-weich: color-mix(in srgb, var(--gfaq-akzent) 22%, transparent);
}

/* Nur für Screenreader — Salient bringt .screen-reader-text nicht überall mit. */
.glattt-faq .gfaq-versteckt {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Der Knopf einer Frage.

   Salient gestaltet <button> im Inhaltsbereich mit — Fläche, Innenabstand,
   Radius, Großschreibung. Deshalb steht hier ein vollständiger Reset. Die
   !important sind kein Übermut: Salient setzt Buttons u. a. über
   `.container-wrap button` und schlägt damit eine reine Klassenregel.
   ---------------------------------------------------------------------- */

/**
 * Die Frage steht in einem <h3>: Damit erbt sie die ÜBERSCHRIFTENSCHRIFT des
 * Themes (bei glattt.com Playfair Display). Deren GRÖSSE wird hier bewusst
 * zurückgesetzt — die Größe bestimmt der FAQ-Bereich, die Schriftart das Theme.
 *
 * Warum drei Klassen und !important: Salient setzt die Größe über
 * `body h3, .row .col h3, … { font-size: 36px }`. `.row .col h3` hat die
 * Spezifität 0,2,1 und schlägt damit eine Regel wie `.glattt-faq .gfaq-frage`
 * (0,2,0) — live standen die Fragen deshalb in 36 px, bei 22 px Grundschrift.
 * Die Kette hier liegt mit 0,3,0 darüber; !important fängt zusätzlich
 * Theme-Optionen ab, die Salient später als Inline-Block ausgibt.
 */
.glattt-faq .gfaq-eintrag .gfaq-frage {
    margin: 0;
    padding: 0;
    font-size: 1em !important;
    font-weight: inherit;
    line-height: 1.35 !important;
    letter-spacing: normal;
    text-transform: none;
}

/* Im Register laufen die Fragen in der Fließtextschrift: Eine lange Liste
   liest sich als Verzeichnis besser als in der Serifenschrift. `inherit` holt
   die Schrift vom Bereich, nicht vom Theme-h3 — es steht also weiterhin kein
   Schriftname im Plugin. */
.glattt-faq--register .gfaq-eintrag .gfaq-frage {
    /* Fließtextschrift statt Serife: Eine Liste aus 17 Fragen liest sich als
       Verzeichnis, nicht als 17 Überschriften. Die Größe bleibt Textgröße —
       die Frage darf nie kleiner sein als ihre eigene Antwort. */
    font-family: inherit;
}

.glattt-faq .gfaq-knopf {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
    text-align: left;
    cursor: pointer;

    font-family: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.35;
    letter-spacing: normal !important;
    text-transform: none !important;

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: color .2s ease;
}

.glattt-faq .gfaq-knopf:hover,
.glattt-faq .gfaq-knopf:focus {
    background: none !important;
    box-shadow: none !important;
}

.glattt-faq .gfaq-knopf:focus-visible {
    outline: 2px solid var(--gfaq-akzent);
    outline-offset: 3px;
}

.glattt-faq .gfaq-titel {
    flex: 1;
    text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Der Klappteil. Die Höhe wird über grid-template-rows animiert — damit
   braucht es keine gemessene Pixelhöhe und der Inhalt darf beliebig lang sein.
   ---------------------------------------------------------------------- */

.glattt-faq .gfaq-inhalt {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--gfaq-tempo) cubic-bezier(.4, 0, .2, 1);
}

.glattt-faq .gfaq-eintrag.ist-offen > .gfaq-inhalt {
    grid-template-rows: 1fr;
}

.glattt-faq .gfaq-inhalt-innen {
    overflow: hidden;
}

.glattt-faq .gfaq-text {
    color: var(--gfaq-leise);
    /* Eine Spur unter der Frage — auf glattt.com sind das 20,9 px bei 22 px
       Grundschrift. Sonst steht die Antwort größer da als die Frage. */
    font-size: .95em;
    line-height: 1.7;
}

/* Lesebreite: begrenzt die Zeile auf rund 68 Zeichen. Lange Zeilen ermüden
   beim Lesen, weil das Auge den Zeilenanfang schlechter wiederfindet — in
   breiten Spalten also sinnvoll, in schmalen wirkungslos. Standard ist die
   volle Breite; umschaltbar am Element unter „Textbreite“. */
.glattt-faq--lesebreite .gfaq-text {
    max-width: 68ch;
}

.glattt-faq .gfaq-text > *:first-child { margin-top: 0; }
.glattt-faq .gfaq-text > *:last-child  { margin-bottom: 0; }

/* Listen und Links in der Antwort bleiben bewusst unangetastet: Sie sollen
   aussehen wie Fließtext auf dem Rest der Seite. */

/* -------------------------------------------------------------------------
   Call-to-Action — drei Ausprägungen
   ---------------------------------------------------------------------- */

.glattt-faq .gfaq-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.15rem;
    font-family: inherit;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: gap .2s ease, background .2s ease, transform .2s ease;
}

.glattt-faq .gfaq-cta:hover { gap: .75rem; }

.glattt-faq .gfaq-cta-pfeil {
    flex: none;
    width: .8em; height: .8em;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
}

.glattt-faq .gfaq-cta--link {
    color: var(--gfaq-akzent-text);
    padding-bottom: .25rem;
    border-bottom: 1.5px solid var(--gfaq-akzent);
}

.glattt-faq .gfaq-cta--pille {
    /* Die einzige feste Farbe im Plugin — siehe Kopf der Datei.
       Salient rundet alle Knöpfe selbst; der Radius steht hier trotzdem
       ausdrücklich, damit die Pille auch ohne Salient eine Pille ist. */
    background: var(--gfaq-mint);
    color: var(--gfaq-mint-tief);
    padding: .6rem 1.15rem;
    border: 1.5px solid var(--gfaq-mint-tief);
    border-radius: 999px;
}

.glattt-faq .gfaq-cta--pille:hover {
    background: var(--gfaq-mint-hell);
    transform: translateY(-1px);
}

.glattt-faq .gfaq-cta--flaeche {
    background: var(--gfaq-akzent-weich);
    color: var(--gfaq-akzent-text);
    padding: .5rem .9rem;
    border-radius: 8px;
}

.glattt-faq .gfaq-cta--flaeche:hover {
    background: var(--gfaq-akzent-warm);
}

/* =========================================================================
   Darstellung 1 — Linie
   ========================================================================= */

.glattt-faq--linie .gfaq-eintrag {
    border-top: 1px solid var(--gfaq-linie);
}

.glattt-faq--linie .gfaq-eintrag:last-child {
    border-bottom: 1px solid var(--gfaq-linie);
}

.glattt-faq--linie .gfaq-knopf {
    align-items: baseline;
    gap: 1.25rem;
    padding: 1.4rem 0;
    font-size: 1.15em;
    font-weight: 700;
}

.glattt-faq--linie .gfaq-knopf:hover { color: var(--gfaq-akzent-text); }

.glattt-faq--linie .gfaq-text { padding-bottom: 1.9rem; }

/* Plus wird zu Minus: Nur der senkrechte Balken dreht sich in die Waagerechte.
   Den ganzen Marker zu drehen ergäbe einen schrägen Strich statt eines Minus. */
.glattt-faq--linie .gfaq-kreuz {
    flex: none;
    position: relative;
    align-self: center;
    /* In em, nicht in px: Die Seite läuft mit 22 px Grundschrift, ein festes
       18-px-Plus sähe daneben verloren aus. */
    width: .9em; height: .9em;
}

.glattt-faq--linie .gfaq-kreuz::before,
.glattt-faq--linie .gfaq-kreuz::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--gfaq-akzent);
    transform: translateY(-50%);
}

.glattt-faq--linie .gfaq-kreuz::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform var(--gfaq-tempo) cubic-bezier(.4, 0, .2, 1);
}

.glattt-faq--linie .gfaq-eintrag.ist-offen .gfaq-kreuz::after {
    transform: translateY(-50%) rotate(0deg);
}

/* =========================================================================
   Darstellung 2 — Karte
   ========================================================================= */

.glattt-faq--karte .gfaq-liste {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.glattt-faq--karte .gfaq-eintrag {
    position: relative;
    overflow: hidden;
    background: var(--gfaq-flaeche);
    border: 1px solid var(--gfaq-linie);
    border-radius: var(--gfaq-radius);
    transition: border-color .25s ease, box-shadow .25s ease;
}

/* Goldkante links — fährt beim Öffnen herunter */
.glattt-faq--karte .gfaq-eintrag::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--gfaq-akzent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--gfaq-tempo) cubic-bezier(.4, 0, .2, 1);
}

.glattt-faq--karte .gfaq-eintrag:hover  { border-color: var(--gfaq-linie-stark); }
.glattt-faq--karte .gfaq-eintrag.ist-offen { border-color: var(--gfaq-linie-stark); }
.glattt-faq--karte .gfaq-eintrag.ist-offen::before { transform: scaleY(1); }

.glattt-faq--karte .gfaq-knopf {
    padding: 1.15rem 1.35rem;
    font-size: 1.05em;
    font-weight: 700;
}

/* Der Antworttext steht bündig unter der Frage — ohne Innenabstand liefe er
   sonst unter die Goldkante am linken Kartenrand. */
.glattt-faq--karte .gfaq-text {
    padding: 0 1.35rem 1.35rem;
}

.glattt-faq--karte .gfaq-pfeil {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6em; height: 1.6em;
    border-radius: 50%;
    background: var(--gfaq-akzent-weich);
    transition: transform var(--gfaq-tempo) cubic-bezier(.4, 0, .2, 1), background .25s ease;
}

.glattt-faq--karte .gfaq-pfeil svg {
    width: .62em; height: .62em;
    stroke: var(--gfaq-akzent-text);
    stroke-width: 2.4;
    fill: none;
}

.glattt-faq--karte .gfaq-eintrag.ist-offen .gfaq-pfeil {
    transform: rotate(180deg);
    background: var(--gfaq-mint);
}

.glattt-faq--karte .gfaq-eintrag.ist-offen .gfaq-pfeil svg {
    stroke: var(--gfaq-mint-tief);
}

/* =========================================================================
   Darstellung 3 — Register
   ========================================================================= */

.glattt-faq--register .gfaq-register {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

/* Ohne min-width: 0 sprengt die Themenleiste am Handy die Spalte, statt in
   sich zu scrollen — die Rasterspalte wächst dann auf die Breite ihres Inhalts. */
.glattt-faq--register .gfaq-register > * {
    min-width: 0;
}

@media (min-width: 820px) {
    .glattt-faq--register .gfaq-register {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 2.75rem;
    }
}

.glattt-faq .gfaq-themen {
    display: flex;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.glattt-faq .gfaq-themen li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Salient setzt eigene Aufzählungspunkte per ::before — die haben in einer
   Themenleiste nichts zu suchen. */
.glattt-faq .gfaq-themen li::before,
.glattt-faq .gfaq-themen li::marker {
    content: none;
}

@media (max-width: 819px) {
    .glattt-faq .gfaq-themen {
        overflow-x: auto;
        padding-bottom: .5rem;
        scrollbar-width: thin;
    }
    .glattt-faq .gfaq-themen li { flex: none; }
}

@media (min-width: 820px) {
    .glattt-faq .gfaq-themen {
        position: sticky;
        top: 5rem;
        flex-direction: column;
    }
}

.glattt-faq .gfaq-thema {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .85rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;

    font-family: inherit !important;
    font-size: .95em;
    font-weight: 400;
    letter-spacing: normal !important;
    text-transform: none !important;

    color: var(--gfaq-leise);
    background: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: background .2s ease, color .2s ease;
}

.glattt-faq .gfaq-thema:hover {
    color: inherit;
    background: var(--gfaq-flaeche-stark) !important;
}

.glattt-faq .gfaq-thema[aria-pressed="true"] {
    color: inherit;
    font-weight: 700;
    background: var(--gfaq-flaeche-stark) !important;
}

.glattt-faq .gfaq-thema:focus-visible {
    outline: 2px solid var(--gfaq-akzent);
    outline-offset: 2px;
}

@media (min-width: 820px) {
    .glattt-faq .gfaq-thema {
        border-radius: 0 !important;
        border-left: 2px solid transparent !important;
    }
    .glattt-faq .gfaq-thema[aria-pressed="true"] {
        background: none !important;
        border-left-color: var(--gfaq-akzent) !important;
    }
    .glattt-faq .gfaq-thema:hover {
        background: none !important;
        color: inherit;
    }
}

.glattt-faq .gfaq-zahl {
    margin-left: auto;
    font-size: .8em;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* --- Suchfeld --- */

.glattt-faq .gfaq-suche {
    position: relative;
    margin-bottom: 1.25rem;
}

/* Zwei Klassen plus !important, weil Salient über
   `.container-wrap input[type="search"] { padding: 16px }` (0,2,1) greift —
   ohne das steht die Lupe live im Platzhaltertext. Maße in em, damit das Feld
   mit der Schriftgröße des Themes wächst. */
.glattt-faq .gfaq-suche .gfaq-suchfeld {
    width: 100%;
    /* Eingabefelder erben Schrift und Farbe nicht von allein. */
    font: inherit !important;
    color: inherit;
    padding: .65em 1em .65em 2.4em !important;
    background: transparent;
    border: 1px solid var(--gfaq-linie) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.glattt-faq .gfaq-suche .gfaq-suchfeld::placeholder {
    color: currentColor;
    opacity: .5;
}

.glattt-faq .gfaq-suche .gfaq-suchfeld:focus {
    outline: 0;
    border-color: var(--gfaq-akzent) !important;
    box-shadow: 0 0 0 3px var(--gfaq-akzent-weich) !important;
}

.glattt-faq .gfaq-lupe {
    position: absolute;
    left: .95em; top: 50%;
    transform: translateY(-50%);
    width: .8em; height: .8em;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    opacity: .5;
    pointer-events: none;
}

/* --- Liste im Register --- */

.glattt-faq--register .gfaq-eintrag {
    border-bottom: 1px solid var(--gfaq-linie);
}

.glattt-faq--register .gfaq-eintrag:first-child {
    border-top: 1px solid var(--gfaq-linie);
}

/* Beim Filtern verschwindet ein Eintrag samt seinem oberen Rand — sonst
   stünde eine doppelte Linie da, wo etwas ausgeblendet wurde. */
.glattt-faq--register .gfaq-eintrag[hidden] {
    display: none;
}

.glattt-faq--register .gfaq-knopf {
    padding: 1.05rem 0;
    font-weight: 700;
}

.glattt-faq--register .gfaq-knopf:hover .gfaq-titel {
    color: var(--gfaq-akzent-text);
}

.glattt-faq--register .gfaq-chev {
    flex: none;
    display: grid;
    place-items: center;
    width: .8em; height: .8em;
    transition: transform .3s ease;
}

.glattt-faq--register .gfaq-chev svg {
    width: .8em; height: .8em;
    stroke: var(--gfaq-akzent);
    stroke-width: 2.2;
    fill: none;
}

.glattt-faq--register .gfaq-eintrag.ist-offen .gfaq-chev {
    transform: rotate(180deg);
}

.glattt-faq--register .gfaq-text {
    padding-bottom: 1.4rem;
}

.glattt-faq .gfaq-leer {
    padding: 2rem 0;
    color: var(--gfaq-leise);
}

/* Treffer in der Frage */
.glattt-faq .gfaq-treffer {
    background: var(--gfaq-akzent-weich);
    color: inherit;
    padding: 0 .1em;
    border-radius: 2px;
}

/* Hinweis, den nur die Redaktion sieht (keine Frage erfasst). */
.gfaq-hinweis {
    padding: .75rem 1rem;
    border-left: 3px solid var(--glattt-gold, #E1B520);
    background: rgba(0, 0, 0, .03);
    font-size: .9em;
}

@media (prefers-reduced-motion: reduce) {
    .glattt-faq *,
    .glattt-faq *::before,
    .glattt-faq *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}