/*
 * Einzelansicht einer FAQ-Frage.
 *
 * Gehoert zu ktw-faq.php und ktw-faq-vorlage.php und wird nur auf
 * body.single-avada_faq geladen.
 *
 * ------------------------------------------------------------------------------
 * WARUM EINE EIGENE BREITE
 *
 * Die Rumpfausgabe, die Avada ohne Inhaltsvorlage lieferte, hatte gar keine
 * Breitenbegrenzung: der Fliesstext lief bei 1460 Pixel Fensterbreite rechts
 * aus dem Bild. 68ch ist die Zeilenlaenge, bei der Fliesstext noch als Block
 * lesbar bleibt; darueber verliert das Auge beim Ruecksprung die Zeile.
 *
 * ------------------------------------------------------------------------------
 * WARUM DIE VERWEISE DREI KLASSEN TRAGEN
 *
 * Das dunkle Schema setzt `:root[data-ktw-schema="dunkel"] a { color: #7fb0f0 }`,
 * und das ist Spezifitaet (0,2,1). Jede Regel fuer einen Verweis in einem
 * Baustein muss darueber liegen, sonst gilt sie im hellen Schema und im
 * dunklen nicht.
 *
 * Die erste Fassung stand als `.ktw-faq__knopf--voll`, also (0,1,0). Im hellen
 * Schema sah das richtig aus. Im dunklen stand der gefuellte Knopf mit
 * #7fb0f0 auf #7fb0f0, gemessen 1,00:1, also Schrift in Flaechenfarbe. Der
 * Kontrastlauf hat es gefunden, das Auge im hellen Schema nie.
 *
 * `.ktw-faq .ktw-faq__blatt .ktw-faq__knopf` ist (0,3,0) und liegt damit
 * darueber, ohne dass irgendwo !important stehen muss. Wer hier eine Ebene
 * herausnimmt, bricht das dunkle Schema still.
 *
 * ------------------------------------------------------------------------------
 * WARUM KEINE FARBE FEST STEHT
 *
 * Jede Farbe hier kommt aus einer --awb-Variablen der Palette. Damit gilt sie
 * im hellen wie im dunklen Schema, ohne dass diese Datei in
 * ktw-dunkel-ableiten.py als Quelle auftauchen muss. Wer hier einen
 * Hexadezimalwert eintraegt, muss ihn dort nachtragen, sonst steht er im
 * dunklen Schema falsch.
 */

.ktw-faq {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 30px 96px;
}

.ktw-faq__blatt {
    max-width: 68ch;
}

/* ---------------------------------------------------------------- Der Weg */

.ktw-faq__weg {
    margin-bottom: 26px;
    color: var(--awb-color6);
    font-family: 'Interstate-Light', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.ktw-faq .ktw-faq__blatt .ktw-faq__weg a {
    color: var(--awb-color6);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ktw-faq .ktw-faq__blatt .ktw-faq__weg a:hover,
.ktw-faq .ktw-faq__blatt .ktw-faq__weg a:focus-visible {
    color: var(--awb-color5);
}

.ktw-faq__weg span {
    margin: 0 7px;
}

.ktw-faq__weg-hier {
    color: var(--awb-color7);
}

/* -------------------------------------------------------------- Die Frage */

/* Die Frage ist die Ueberschrift der Seite. Bis zum 28.08.2026 stand sie
   nirgends im Dokument, nur im <title>: fuer einen Screenreader begann die
   Seite mitten in der Antwort. */
.ktw-faq__frage {
    margin: 0 0 34px;
    color: var(--awb-color8);
    font-size: 40px;
    line-height: 1.18;
    text-wrap: balance;
}

@media (max-width: 640px) {
    .ktw-faq {
        padding: 34px 20px 64px;
    }
    .ktw-faq__frage {
        font-size: 30px;
    }
}

/* ------------------------------------------------------------- Die Antwort */

/* Der Inhalt kommt aus dem Avada-Builder und bringt eigene Abstaende mit.
   Hier wird nur begradigt, was ohne Container schief steht. */
.ktw-faq__antwort > .fusion-fullwidth,
.ktw-faq__antwort > .fusion-builder-row {
    padding-left: 0;
    padding-right: 0;
}

.ktw-faq__antwort p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------- Verwandte Fragen */

.ktw-faq__weiter {
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--awb-color3);
}

.ktw-faq__weiter-titel {
    margin: 0 0 18px;
    color: var(--awb-color7);
    font-size: 20px;
    line-height: 1.3;
}

.ktw-faq__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ktw-faq__liste li + li {
    margin-top: 2px;
}

.ktw-faq .ktw-faq__blatt .ktw-faq__liste a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--awb-color3);
    color: var(--awb-color5);
    font-family: 'Interstate-Light', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
}

.ktw-faq .ktw-faq__blatt .ktw-faq__liste a:hover,
.ktw-faq .ktw-faq__blatt .ktw-faq__liste a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------- Der Weg zur Hilfe */

.ktw-faq__hilfe {
    margin-top: 48px;
    padding: 28px 30px 30px;
    border: 1px solid var(--awb-color3);
    border-radius: 8px;
    background-color: var(--awb-color2);
}

.ktw-faq__hilfe-text {
    margin: 0 0 22px;
    color: var(--awb-color7);
    font-family: 'Interstate-Light', sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.ktw-faq__hilfe-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.ktw-faq .ktw-faq__blatt .ktw-faq__knopf {
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid var(--awb-color5);
    border-radius: 5px;
    color: var(--awb-color5);
    font-family: 'Interstate-Regular', sans-serif;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Der volle Knopf traegt --awb-color1 als Schrift. Das ist im hellen Schema
   Weiss und im dunklen der dunkle Grund, also in beiden Faellen der
   Gegenpol zum Akzent. Genau diese Doppelfunktion von color1 ist die Stelle,
   an der ein Fehler zuerst auftaucht, siehe den Kopf von ktw-dunkel.css. */
.ktw-faq .ktw-faq__blatt .ktw-faq__knopf--voll {
    background-color: var(--awb-color5);
    color: var(--awb-color1);
}

.ktw-faq .ktw-faq__blatt .ktw-faq__knopf:hover,
.ktw-faq .ktw-faq__blatt .ktw-faq__knopf:focus-visible {
    background-color: var(--awb-color5);
    color: var(--awb-color1);
}

.ktw-faq .ktw-faq__blatt .ktw-faq__knopf:focus-visible {
    outline: 2px solid var(--awb-color5);
    outline-offset: 2px;
}