/* =============================================================================
   Startseite - Hinweis zu Speicherung und Messung.

   Er sitzt unten und lässt die Seite frei: Ein Vorhang über der ganzen Fläche
   erzwingt eine Entscheidung, und eine erzwungene Einwilligung ist keine.
   Die Karte liegt über allem anderen, aber unter nichts Wichtigem - die Bühne
   bleibt sichtbar, der Text darüber lesbar.
   ============================================================================= */

.einwilligung {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0 16px 16px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.einwilligung[hidden] {
    display: none;
}

.einwilligung-karte {
    pointer-events: auto;
    width: min(1120px, 100%);
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund-gross);
    box-shadow: var(--schatten);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 26px;
    /* Auftritt aus dem unteren Rand. Nur transform und opacity, damit kein
       Bildaufbau nachgerechnet werden muss. */
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.5s var(--kurve), opacity 0.5s var(--kurve);
}

.einwilligung.sichtbar .einwilligung-karte {
    transform: translateY(0);
    opacity: 1;
}

.einwilligung-inhalt h2 {
    font-size: 1rem;
    margin-bottom: 3px;
}

.einwilligung-inhalt p {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--tinte-weich);
}

.einwilligung-inhalt a {
    color: var(--tanne-hell);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Beide Schaltflächen tragen dasselbe Gewicht: gleiche Größe, gleicher
   Rahmen, gleiche Farbe. Ein hervorgehobenes Ja neben einem blassen Nein
   wäre keine freiwillige Einwilligung. Eigene Klasse statt .knopf-leise:
   die ist für dunklen Grund gebaut und auf der hellen Karte unlesbar. */
.einwilligung-knöpfe {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.einwilligung-knopf {
    white-space: nowrap;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--tanne);
    background: transparent;
    border: 1.5px solid var(--tanne);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    transition: transform 0.25s var(--kurve), background 0.25s var(--kurve);
}

.einwilligung-knopf:hover {
    transform: translateY(-2px);
    background: rgba(14, 63, 47, 0.07);
}

/* Der Verweis im Fuß, über den sich die Entscheidung ändern lässt. Ohne ihn
   wäre die Einwilligung nicht widerrufbar. */
.einwilligung-ändern {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.einwilligung-ändern:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    /* Enger und kleiner: Auf dem Telefon liegt der Hinweis über dem unteren
       Bildrand, und jede eingesparte Zeile gibt die Seite darunter frei. */
    .einwilligung-karte {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }

    .einwilligung-inhalt p {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .einwilligung-knopf {
        padding: 9px 14px;
    }

    /* Untereinander statt nebeneinander: "Wiedererkennung erlauben" passt in
       keine halbe Telefonbreite und stand sonst über den Kartenrand hinaus.
       Beide bleiben gleich groß, damit die Wahl unbeeinflusst bleibt. */
    .einwilligung-knöpfe {
        flex-direction: column;
    }

    .einwilligung-knopf {
        width: 100%;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .einwilligung-karte {
        transition: none;
        transform: none;
        opacity: 1;
    }
}