/* ============================================
   FEF-Consulting – Cookie-Banner und Einstellungs-Dialog
   ============================================
   Wird von index.html, impressum.html und datenschutz.html geladen.
   Klassennamen und IDs entsprechen exakt dem Bestand, damit
   assets/main.js unveraendert weiterarbeitet.
   ============================================ */

/* Eigene Box-Berechnung: die Rechtsseiten setzen box-sizing auf dem
   body-Element, die Startseite nicht. Ohne diese Regel rendern die
   Auswahlfelder je Seite unterschiedlich gross. */
.cookie-banner,
.cookie-banner *,
.cookie-banner *::before,
.cookie-banner *::after,
.cookie-modal,
.cookie-modal *,
.cookie-modal *::before,
.cookie-modal *::after {
    box-sizing: border-box;
    overflow-wrap: normal;
    hyphens: none;
}

/* Die Rechtsseiten setzen ihre Klasse auf das body-Element. Ohne diese
   Festlegungen erbten Banner und Dialog dort Zeilenhoehe, Silbentrennung
   und Schriftglaettung und saehen anders aus als auf der Startseite.
   Die Selektoren sind bewusst so spezifisch wie die der Rechtsseiten. */
.cookie-banner,
.cookie-modal {
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

.cookie-banner h1, .cookie-banner h2, .cookie-banner h3,
.cookie-banner p, .cookie-banner li, .cookie-banner strong,
.cookie-modal h1, .cookie-modal h2, .cookie-modal h3,
.cookie-modal p, .cookie-modal li, .cookie-modal strong {
    overflow-wrap: normal;
    hyphens: none;
}

.cookie-banner strong,
.cookie-modal strong {
    font-weight: 600;
    color: #090909;
}

.cookie-banner img,
.cookie-modal img {
    max-width: 100%;
}

.cookie-banner .cookie-text h3 {
    line-height: 1.35;
}

.cookie-modal .cookie-modal-header h3 {
    line-height: 1.3;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    border-top: 1px solid #dedede;
    box-shadow: 0 -2px 5px #00000005, 0 -7px 24px #0000000d;
    font-family: "Inter", "Inter Fallback", Arial, Helvetica, sans-serif;
    color: #090909;
}

.cookie-banner.hidden,
.fef-consent-entschieden .cookie-banner {
    display: none;
}

/* Der Banner steht fest am unteren Rand und scrollt deshalb nicht mit der
   Seite. Bei starker Textvergroesserung ohne Seitenzoom (Chrome-Mindest-
   schriftgroesse, Firefox "Nur Text zoomen") wuchs er oben aus dem Bild:
   bei doppelter Schriftgroesse lag die Ueberschrift 163 Pixel ueber dem
   oberen Rand und war nicht erreichbar, waehrend die Schaltflaechen
   klickbar blieben - eine Entscheidung ohne sichtbaren Erklaertext war
   damit moeglich. Derselbe Schutz, den der Dialog ueber max-height und
   overflow-y laengst hat. Solange der Banner ins Bild passt, aendert die
   Regel nichts. */
.cookie-banner {
    /* Hoehenbudget des Banners. Steht als Variable, weil Inhalt und
       Textbereich weiter unten damit rechnen; dvh folgt unten per
       @supports (Custom Properties pruefen keine Einheiten). */
    --banner-deckel: 100vh;

    max-height: var(--banner-deckel);
    overflow-y: auto;
    /* Ohne contain wandert jede Scroll- oder Wischbewegung, die das Ende
       des Bannertextes erreicht hat, an die Seite dahinter weiter. Die
       scrollt dann unbemerkt unter dem Banner weg, und nach dem
       Schliessen steht man an einer ganz anderen Stelle. Gemessen: nach
       zehn Radschritten ueber dem Bannertext stand die Seite 320 Pixel
       tiefer, obwohl der Text sein Ende schon nach dem ersten Schritt
       erreicht hatte. */
    overscroll-behavior: contain;
}

@supports (height: 1dvh) {
    .cookie-banner {
        --banner-deckel: 100dvh;
    }
}

.cookie-content {
    /* Der Innenabstand steht als Variable, weil die Obergrenze des
       Textbereichs weiter unten mit ihm rechnet. Der Mobilblock setzt
       nur noch diese Variable um. */
    --banner-innen: 22px;
    /* Der Banner klebt mit bottom:0 an der Unterkante. Auf Geraeten mit
       Gestenbalken - iPhone ohne Rahmen - liegen die untersten rund 34
       Pixel unter dem Balken. Ohne diesen Ausgleich sitzen die
       Zustimmungs-Schaltflaechen genau dort. Die Groesse geht weiter
       unten in die Obergrenze des Textbereichs ein, damit der Deckel
       trotzdem haelt. */
    --banner-innen-unten: max(var(--banner-innen), env(safe-area-inset-bottom));

    width: calc(100% - 64px);
    max-width: 1280px;
    margin-inline: auto;
    padding-block: var(--banner-innen) var(--banner-innen-unten);
    display: flex;
    align-items: center;
    gap: 32px;
    /* 1 Pixel fuer den Rahmen des Banners */
    max-height: calc(var(--banner-deckel) - 1px);
}

/* Reicht der Platz nicht, schrumpft der Text und wird scrollbar, waehrend
   die Schaltflaechen stehen bleiben. min-height: 0 ist noetig, weil ein
   Flex-Element sonst nicht unter seine Inhaltshoehe schrumpft.

   Die Obergrenze ist nicht ueberfluessig: im Zeilenlayout ab 901 Pixel
   steht align-items auf center. Ein zu hohes Element wird dort mittig
   zentriert, der Ueberstand verteilt sich zu gleichen Teilen nach oben
   und unten - und der obere Teil laesst sich nicht erscrollen, weil
   Scrollen nur den unteren Ueberstand freigibt. Gemessen bei 1000x700
   lag die Ueberschrift ueber den gesamten Scrollweg zwischen -91 und
   -643 Pixeln, also nie im Bild. Die Obergrenze verhindert, dass das
   Element ueberhaupt zu hoch wird. */
.cookie-banner .cookie-text {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(var(--banner-deckel) - 1px - var(--banner-innen) - var(--banner-innen-unten));
    /* Etwas Luft zum Rand, damit der Text nicht an der Kante klebt und
       der Scrollbalken ihn nicht beruehrt. */
    padding-right: 10px;
}

/* Reicht der Platz nicht, ist der Text scrollbar - dass darunter noch
   etwas steht, war bisher nur am Schnitt mitten im Wort zu erkennen.
   Die Klasse setzt das Skript NUR, wenn der Text tatsaechlich ueberlaeuft
   UND noch nicht bis ans Ende gescrollt wurde. Ein unbedingter Verlauf
   waere falsch: bei 1440x639 und 1440x500 passt der Text vollstaendig,
   gemessen 109 Pixel in 109 Pixeln. */
.cookie-banner .cookie-text.hat-mehr {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), #0000);
    mask-image: linear-gradient(#000 calc(100% - 26px), #0000);
}

.cookie-banner .cookie-text h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}

.cookie-banner .cookie-text p,
.cookie-text p {
    font-size: 13px;
    line-height: 1.6;
    color: #595959;
    margin: 0;
}

.cookie-text a {
    color: #090909;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid #090909;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.cookie-btn.btn-primary {
    background: #090909;
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .cookie-btn.btn-primary:hover {
      background: #2b2b2b;
      border-color: #2b2b2b;
  }
}

.cookie-btn.btn-secondary {
    background: transparent;
    color: #090909;
}

@media (hover: hover) and (pointer: fine) {
  .cookie-btn.btn-secondary:hover {
      background: #f0f0f0;
  }
}

.cookie-banner a:focus-visible,
.cookie-banner button:focus-visible,
.cookie-banner .cookie-buttons button:focus-visible,
.cookie-modal a:focus-visible,
.cookie-modal button:focus-visible,
.cookie-modal .cookie-modal-content button:focus-visible,
.cookie-modal input:focus-visible + .cookie-checkbox {
    outline: 3px solid #111;
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .cookie-content {
        --banner-innen: 18px;

        width: calc(100% - 40px);
        flex-direction: column;
        align-items: stretch;
        gap: 18px;

    }

    .cookie-buttons {
        flex-wrap: wrap;
    }

    .cookie-btn {
        flex: 1 1 auto;
    }
}


/* Auf niedrigen Anzeigen - kleine Geraete hochkant, jedes Handy quer -
   nahm der Banner bis zu 83 Prozent der Bildschirmhoehe ein und legte
   sich damit ueber das geoeffnete Menue: bei 320x480 und bei 568x320
   waren alle vier Menuepunkte verdeckt, bei 320x568 und 667x375 zwei
   davon, darunter der Weg zum Erstgespraech. Ab 640 Pixel Hoehe tritt
   das nicht auf, deshalb greift die Grenze auch nur darunter.
   Gestaltung, Text und Groesse des Banners auf allen uebrigen Anzeigen
   bleiben unveraendert; hier wird nur das Hoehenbudget begrenzt, und der
   Text wird innerhalb des Banners scrollbar. */
@media (max-height: 639px) {
    .cookie-banner {
        --banner-deckel: 55vh;
    }

    @supports (height: 1dvh) {
        .cookie-banner {
            --banner-deckel: 55dvh;
        }
    }
}

/* Der Erklaertext ist ein schrumpfbares Flex-Element, die Schaltflaechen
   sind es nicht. Reicht das Hoehenbudget nicht fuer beides, gab der Text
   nach - bis auf null. Gemessen bei 320x256, also 400 Prozent Seitenzoom
   auf einem 1280x1024-Bildschirm und damit die Messgroesse von
   WCAG 2.2 AA 1.4.10: 0 von 255 Pixeln Text im Bild, und KEIN Bedienweg
   dorthin, weil clientHeight 0 war und es damit nichts zu scrollen gab -
   weder mit Rad noch mit Finger. "Alle akzeptieren" blieb dabei voll
   bedienbar: eine Einwilligung ohne jede sichtbare Information.
   Gemessen ebenso bei 342x192, 320x200, 360x225, 455x256 und 480x270.

   Die Untergrenze kehrt das um: reicht der Platz nicht, waechst der Inhalt
   jetzt ueber das Hoehenbudget hinaus, und der Banner selbst wird scrollbar
   (er hat dafuer bereits max-height und overflow-y). Der Text steht dann
   wieder da, die Schaltflaechen sind eine Wischbewegung entfernt. Wo der
   Platz reicht - auf jedem gewoehnlichen Handy - aendert die Regel nichts.

   Bewusst in Pixeln, nicht in em: bei dreifacher Textgroesse wuechse eine
   em-Angabe mit und schoebe die Schaltflaechen unnoetig weit nach unten.
   44 Pixel sind bei jeder Textgroesse mindestens eine volle Zeile, und der
   Rest bleibt erscrollbar. */
.cookie-banner .cookie-text {
    min-height: 44px;
}

/* Einstellungs-Dialog */
.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    /* flex-start statt center, dazu margin-block:auto am Inhalt: solange
       Platz ist, zentriert das genauso: die automatischen Aussenabstaende
       teilen den freien Raum. Reicht der Platz NICHT, beginnt der Dialog
       oben und der Hintergrund scrollt - bei center waere der obere
       Ueberstand unerreichbar. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    background: #090909b3;
    font-family: "Inter", "Inter Fallback", Arial, Helvetica, sans-serif;
    color: #090909;
}

.cookie-modal.active {
    display: flex;
}

.cookie-modal-content {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    margin-block: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px #00000008, 0 24px 60px #00000026;
}

/* Auf sehr niedrigen Sichtfeldern traegt der innere Bildlauf nicht mehr.
   Gemessen bei 342x192 - 400 Prozent Seitenzoom auf einem verbreiteten
   1366x768-Notebook: Kopf 124 plus Koerper 48 plus Fusszeile 131 ergeben
   303 Pixel in einem Kasten von 172. Kopf und Fusszeile sind Flex-Kinder
   mit eigenem Inhalt und koennen nicht darunter schrumpfen; nur der
   Koerper gab nach. Der Ueberstand wurde ueber den Kasten hinaus
   gezeichnet und war mit keinem Bedienweg erreichbar - "Einstellungen
   speichern" lag 47 Pixel unter der Bildkante, zwoelf Radschritte
   aenderten daran nichts, und focus() holte ihn nicht ins Bild. Damit war
   fuer Maus und Finger keine abgestufte Einwilligung mehr moeglich.
   Hier scrollt deshalb der Dialog als Ganzes. */
@media (max-height: 420px) {
    .cookie-modal-content {
        max-height: none;
    }

    .cookie-modal-body {
        overflow-y: visible;
    }
}

.cookie-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    border-bottom: 1px solid #ededed;
}

.cookie-modal .cookie-modal-header h3 {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
}

.cookie-modal-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #595959;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .cookie-modal-close:hover {
      color: #090909;
      background: #f0f0f0;
  }
}

.cookie-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
}

.cookie-modal .cookie-modal-body > p,
.cookie-modal-body > p {
    font-size: 13px;
    line-height: 1.65;
    color: #595959;
    margin: 0 0 22px;
}

.cookie-option {
    padding: 18px 0;
    border-top: 1px solid #ededed;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.cookie-option-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

.cookie-option-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1.5px solid #757575;
    border-radius: 5px;
    background: #fff;
    transition: background .15s ease, border-color .15s ease;
}

.cookie-option-label input[type="checkbox"]:checked + .cookie-checkbox {
    background: #090909;
    border-color: #090909;
}

.cookie-option-label input[type="checkbox"]:checked + .cookie-checkbox::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cookie-option-label input[type="checkbox"]:disabled:checked + .cookie-checkbox,
.cookie-option-label input[type="checkbox"]:disabled + .cookie-checkbox {
    background: #757575;
    border-color: #757575;
    cursor: not-allowed;
}

.cookie-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #595959;
    background: #f0f0f0;
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.cookie-modal .cookie-option-desc,
.cookie-option-desc {
    font-size: 13px;
    line-height: 1.65;
    color: #595959;
    margin: 0;
}

.cookie-modal .cookie-option-service,
.cookie-option-service {
    font-size: 12px;
    line-height: 1.6;
    color: #595959;
    margin: 8px 0 0;
}

/* Zwei Wege aus dem Dialog: ablehnen und speichern. Der Widerruf muss so
   einfach sein wie die Erteilung - ohne den Knopf hier kostete die
   Zustimmung einen Klick und der Widerruf vier (Fusslink oeffnen, zwei
   Kaestchen abwaehlen, speichern). Beide Knoepfe stehen auf derselben
   Ebene, wie im Banner auch. */
.cookie-modal-footer {
    padding: 18px 28px 24px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid #ededed;
}

@media (max-width: 560px) {
    .cookie-modal-content {
        max-height: 90vh;
    }

    .cookie-modal-header,
    .cookie-modal-body,
    .cookie-modal-footer {
        padding-inline: 18px;
    }

    /* NUR die Fusszeile. Der Kopfbereich ist ebenfalls ein Flex-Element
       (Ueberschrift links, Schliessen-Knopf rechts) und wurde von der
       Regel oben mitgedreht: gemessen sass das Kreuz dann auf jedem Handy
       ueber der Ueberschrift und war 244 bis 484 Pixel breit statt 31, der
       Kopf wuchs von 83 auf 124 Pixel. Bei 480x320 frass er damit 43
       Prozent der gesamten Dialoghoehe.

       In der Fusszeile ist das Umbrechen dagegen gewollt: nebeneinander
       wuerde "Einstellungen speichern" gequetscht. column-reverse haelt
       das Speichern oben, weil es der haeufigere Weg ist. */
    .cookie-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cookie-option-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Ohne Skripte laesst sich der Banner nicht schliessen und der genaue
   Platzausgleich unten laeuft nicht. Damit die Fusszeile trotzdem
   erreichbar bleibt, haelt das Stilblatt dann fest Platz frei. Gemessene
   Bannerhoehen ohne Skript:
   398 px bei 320 px Breite, 356 px bei 390 px, 203 px bei 768 px,
   154 px ab 1440 px. Laufen Skripte, ersetzt die genaue Messung diesen
   Wert und die Regel greift nicht. */
html:not(.fef-js) footer,
html:not(.fef-js) .footer {
    padding-bottom: 420px;
}

@media (min-width: 481px) {
    html:not(.fef-js) footer,
    html:not(.fef-js) .footer {
        padding-bottom: 240px;
    }
}

@media (min-width: 1000px) {
    html:not(.fef-js) footer,
    html:not(.fef-js) .footer {
        padding-bottom: 190px;
    }
}

@media print {
    .cookie-banner,
    .cookie-modal {
        display: none !important;
    }

    /* Der Platz, den der Banner im Fussbereich freihaelt, wird im Druck
       nicht gebraucht. */
    footer {
        padding-bottom: 0 !important;
    }

    html {
        scroll-padding-bottom: 0 !important;
    }
}