/*
 * Einwilligungsbanner (assets/js/consent.js).
 * -------------------------------------------------------------------------
 * #2263: Das Banner spritzte diese Regeln bis 09/2026 als <style>-Block per
 * JavaScript ein. Seit style-src ohne 'unsafe-inline' auskommt, waere dieser
 * Block blockiert. Ein per JS nachgeladenes <link rel="stylesheet"> faellt
 * dagegen unter style-src 'self' und bleibt erlaubt — ohne Nonce-Umweg und
 * ohne die Datei auf Seiten zu laden, auf denen kein Banner erscheint.
 */
.slup-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2147483000;
    max-width: 34rem;
    margin-left: auto;
    background: #fff;
    color: var(--ink, #0f1729);
    border: 1px solid var(--border, #e2ddd5);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: var(--sh-2, 0 2px 4px rgba(15,23,41,.05), 0 24px 56px -12px rgba(15,23,41,.18));
    font-family: var(--ff-b, 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: .9rem;
    line-height: 1.5;
}
.slup-consent strong { display: block; margin-bottom: .5rem; font-size: 1rem; color: var(--navy, #0f1729); }
.slup-consent p { margin: 0 0 .6rem; color: var(--ink-2, #3d4a60); }
/* Indigo (#4f46e5) war die einzige violette Flaeche der Site (Design-Audit A6):
   jetzt Navy mit Amber-Unterstreichung wie alle Inhaltslinks. */
.slup-consent a { color: var(--navy, #0f1729); font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber, #e8a020); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.slup-consent-actions { display: flex; gap: .6rem; margin-top: .75rem; }
/* Beide Knoepfe bewusst gleich (gleiche Klasse, gleiche Optik): Ablehnen muss
   so leicht sein wie Zustimmen (DSGVO / EDSA-Leitlinien 03/2022). */
.slup-consent-btn {
    flex: 1 1 0;
    min-height: 48px;
    padding: .6rem 1rem;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 99px;
    border: 1.5px solid var(--navy, #0f1729);
    background: #fff;
    color: var(--navy, #0f1729);
    cursor: pointer;
}
.slup-consent-btn:hover { background: var(--cream, #f7f4ef); }
.slup-consent-btn:focus-visible { outline: 2px solid var(--navy, #0f1729); outline-offset: 2px; }
.slup-consent-kurz { display: none; }

/* #4246: Solange das Banner offen ist, scrollt der Browser fokussierte
   Elemente ueber das Banner statt darunter (Hoehe setzt consent.js). */
html.slup-consent-offen { scroll-padding-bottom: calc(var(--slup-consent-h, 0px) + .5rem); }

/* #4199: Nach dem ersten Scrollen (oder auf Folgeseiten ohne Entscheidung)
   eingeklappte Leiste. Gleiche Aussagen wie die Handy-Kurzfassung (Google
   Analytics, Uebermittlung an Google, freiwillig, Datenschutz-Link), beide
   Knoepfe unveraendert gleich gross. Einklappen ist keine Einwilligung. */
.slup-consent--klein {
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 44rem;
    padding: .6rem .75rem .6rem 1rem;
    font-size: .85rem;
    line-height: 1.35;
}
.slup-consent--klein strong {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.slup-consent--klein .slup-consent-lang { display: none; }
.slup-consent--klein .slup-consent-kurz { display: inline; flex: 1 1 auto; margin: 0; line-height: inherit; }
.slup-consent--klein a { white-space: nowrap; }
.slup-consent--klein .slup-consent-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
.slup-consent--klein .slup-consent-btn { flex: 0 0 auto; min-width: 7.5rem; padding: .45rem 1rem; }
/* Handy: kompaktes Bottom-Sheet. Vorher (bis 40 % der Hoehe, ~270-300 px)
   lag es auf dem Hero-Knopf "Kostenlos starten" (Mobilpruefung
   11.10.2026). Jetzt Kurztext + Link + Knoepfe in 14 px (#4199: 375 x 812
   offen ~105 px, als Leiste ~100 px; vorher 124 px). Die sichtbare Kurzfassung
   beginnt mit der Frage; der Titel bleibt fuer Screenreader
   (aria-labelledby). */
@media (max-width: 600px) {
    .slup-consent {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        max-height: 40vh;
        overflow-y: auto;
        border-radius: 14px 14px 0 0;
        border-width: 1px 0 0;
        padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
        font-size: .875rem;
        line-height: 1.3;
    }
    .slup-consent strong {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .slup-consent .slup-consent-lang { display: none; }
    /* line-height: inherit — sonst setzt die Seiten-Regel fuer <p> (~1.7) die
       Zeilenhoehe und das Banner waechst um eine halbe Zeile je Zeile. */
    .slup-consent .slup-consent-kurz { display: inline; margin: 0; line-height: inherit; }
    .slup-consent a { white-space: nowrap; }
    .slup-consent-actions { margin-top: .5rem; }
    .slup-consent-btn { padding: .5rem 1rem; }
    /* Leiste am Handy: Text ueber den Knoepfen, Knoepfe wieder halbe-halbe. */
    .slup-consent--klein { display: block; padding: .4rem .75rem calc(.4rem + env(safe-area-inset-bottom)); font-size: .875rem; line-height: 1.3; }
    .slup-consent--klein .slup-consent-actions { display: flex; margin-top: .35rem; }
    .slup-consent--klein .slup-consent-btn { flex: 1 1 0; min-width: 0; }
}