/*
 * Consent -- Banner, Dialog, Platzhalter, dauerhafter Zugang.
 *
 * FESTE GESTALTUNG, DURCHGESETZT MIT !important
 * Entscheidung Joerg Kiefer, 29.08.2026. Diese Datei hat frueher jede
 * Farbe und jedes Mass aus dem Theme beziehungsweise dem Elementor-Kit
 * geerbt. Der Praxislauf hat gezeigt, warum das nicht traegt: Auf
 * waldgefuehl.com zog das Theme den Einstellungen-Link als gefuellte
 * dunkelgruene Flaeche hoch -- der Nebenweg sah damit praechtiger aus
 * als die beiden Entscheidungen, und genau das ist der Punkt, an dem
 * Gleichrangigkeit kippt. Dieselbe Sorte Uebergriff traf den farbigen
 * Schein unter den Schaltflaechen.
 *
 * Ein Einwilligungsbanner ist kein Gestaltungselement der Site. Es muss
 * auf 39 verschiedenen Themes gleich aussehen und gleich funktionieren,
 * und es muss belegbar bleiben, dass Akzeptieren und Ablehnen
 * gleichrangig sind. Deshalb gilt hier:
 *
 *   Schrift    12px, serifenlos, Zeilenhoehe 1.3, schwarz
 *   Flaechen   weiss
 *   Rahmen     schwarz, 1px
 *   Schalter   schwarz auf weiss, bei Beruehrung invertiert
 *
 * Alles mit !important. Die frueheren Variablenketten auf
 * --e-global-color-* sind bewusst entfernt und nicht auskommentiert
 * liegen geblieben.
 *
 * DAMIT SIND ZWEI HAUSREGELN FUER DIESE DATEI AUFGEHOBEN:
 * "keine Hex-Farben" und "Masse in em". Das ist kein Versehen und
 * gehoert nicht zurueckgebaut. Wer das aendert, holt sich die
 * Theme-Uebergriffe zurueck.
 *
 * WAS TROTZDEM NICHT SCHRUMPFT: die Klickflaechen. Sie stehen auf
 * festen 44px, nicht auf einem Vielfachen der Schriftgroesse -- bei
 * 12px waeren daraus 33px geworden, zu wenig zum Treffen auf dem Handy.
 */

.rb-consent,
.rb-consent-tab {
    /* Die Abdunkelung hinter Abfrage und Einstellungen. Ueber die
       Variable je Site ueberschreibbar, falls eine Site das braucht. */
    --rb-consent-overlay: var(--rb-overlay, rgba(0, 0, 0, 0.6));
}

/* Die eine Regel, die alles festnagelt. Sie trifft auch Beschriftungen,
   die ein Theme sonst mitfaerbt. */
.rb-consent,
.rb-consent *,
.rb-consent-tab {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #000 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.rb-consent[hidden],
.rb-consent__dialog[hidden],
.rb-consent__bar[hidden],
.rb-consent-tab[hidden] {
    display: none !important;
}

/* ---------- Ebene 1 ---------- */

.rb-consent__bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 99999;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff !important;
    border-block-start: 1px solid #000 !important;
}

.rb-consent__text {
    flex: 1 1 20em;
    margin: 0 !important;
    max-width: 60em;
}

.rb-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/*
 * Beide Entscheidungen sehen gleich aus. Das ist keine Nachlaessigkeit,
 * sondern die Anforderung aus 2.10 -- und der Grund, warum hier
 * !important steht: ein Theme, das nur eine der beiden hervorhebt,
 * kippt sie.
 */
.rb-consent .rb-consent__btn {
    padding: 8px 16px !important;
    min-height: 44px !important;
    min-width: 120px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
}

.rb-consent .rb-consent__btn:hover,
.rb-consent .rb-consent__btn:focus-visible {
    background: #000 !important;
    color: #fff !important;
}

/* Der Nebenweg bleibt ein Link und wird nie zur Flaeche. */
.rb-consent .rb-consent__link {
    padding: 8px 6px !important;
    min-height: 44px !important;
    background: none !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: underline !important;
    cursor: pointer;
}

/* Der Fokusring liegt aussen und bleibt damit auch auf der invertierten
   Schaltflaeche sichtbar -- daneben ist die weisse Karte. */
.rb-consent .rb-consent__btn:focus-visible,
.rb-consent .rb-consent__link:focus-visible,
.rb-consent .rb-consent__label input:focus-visible,
.rb-consent .rb-consent__platzhalter button:focus-visible,
.rb-consent-tab:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 2px !important;
}

/* ---------- Ebene 1 als verdeckende Abfrage ---------- */

/*
 * Nur aktiv, wenn das Profil `overlay_until_choice` auf true setzt --
 * die Klasse kommt aus dem Profil, nicht aus einer Site-Einstellung.
 *
 * Die Grenze zur unzulaessigen Cookiewall haelt nicht das Overlay,
 * sondern der Inhalt darauf: Ablehnen steht auf derselben Ebene, in
 * derselben Groesse und mit derselben Gestaltung wie Akzeptieren.
 */
.rb-consent--overlay::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--rb-consent-overlay);
}

.rb-consent--overlay .rb-consent__bar {
    /* Zentriert statt am unteren Rand: inset 0 plus auto-Rand setzt die
       Karte in beide Richtungen in die Mitte, ohne Transform. */
    inset: 0;
    margin: auto;
    width: min(420px, calc(100% - 24px));
    height: fit-content;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border: 1px solid #000 !important;
    border-radius: 3px;
}

.rb-consent--overlay .rb-consent__actions {
    justify-content: flex-start;
}

/*
 * Der Textabsatz darf in der Spalte NICHT mehr wachsen.
 *
 * In der Zeile ist `flex: 1 1 20em` eine Mindestbreite -- steht die
 * Karte als Spalte, wird daraus eine Mindest-HOEHE, und zwischen Text
 * und Schaltflaechen klafft eine leere Flaeche. Genau das war am
 * 29.08.2026 auf waldgefuehl.com zu sehen.
 */
.rb-consent--overlay .rb-consent__text {
    flex: 0 0 auto;
    max-width: none;
}

/* ---------- Ebene 2 ---------- */

/*
 * Der Rahmen ist abgedunkelt, nicht flaechig eingefaerbt. Vorher stand
 * hier die Hintergrundfarbe des Panels -- damit wurde der ganze
 * Bildschirm weiss und das Panel war darin nicht mehr abgesetzt.
 */
.rb-consent__dialog {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--rb-consent-overlay);
}

/*
 * Kompakt gehalten, damit die vier Kategorien samt Schaltflaechen auf
 * einen Blick passen und niemand im Fenster scrollen muss.
 */
.rb-consent__panel {
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 3px;
    padding: 16px;
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.rb-consent__titel {
    margin: 0 0 8px !important;
    font-weight: 700 !important;
}

.rb-consent__gruppe {
    margin-block-end: 8px;
    padding-block-end: 8px;
    border-block-end: 1px solid #000 !important;
}

/* Die letzte Gruppe braucht weder Trennlinie noch Abstand nach unten --
   direkt darunter stehen die Schaltflaechen. */
.rb-consent__gruppe:last-of-type {
    margin-block-end: 14px;
    padding-block-end: 0;
    border-block-end: none !important;
}

.rb-consent__label {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    min-height: 44px !important;
}

.rb-consent__name {
    font-weight: 700 !important;
}

.rb-consent__beschreibung,
.rb-consent__hinweis {
    margin: 2px 0 0 24px !important;
}

/* ---------- Platzhalter fuer sichtbare Dienste ---------- */

.rb-consent__platzhalter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    min-height: 96px;
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 3px;
}

.rb-consent__platzhalter p {
    margin: 0 !important;
}

/* ---------- Dauerhafter Zugang ---------- */

/*
 * Der Reiter klebt unten rechts an der Kante und steht teilweise unter
 * ihr. Bei Mausberuehrung ODER Tastaturfokus faehrt er vollstaendig
 * heraus -- der Fokus-Zweig ist keine Zugabe: ohne ihn waere der
 * Bedienweg mit der Tastatur ein Ziel, das man nicht sieht.
 */
.rb-consent-tab {
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 20px;
    z-index: 99997;
    padding: 8px 14px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-block-end: none !important;
    border-start-start-radius: 3px;
    border-start-end-radius: 3px;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transform: translateY(45%);
    transition: transform 0.15s ease-out;
}

.rb-consent-tab:hover,
.rb-consent-tab:focus-visible {
    transform: translateY(0);
}

/*
 * Auf Touch gibt es kein Hover. Ein halb verstecktes Ziel waere dort
 * dauerhaft halb verdeckt und dazu ein zu kleines Tippziel -- also steht
 * der Reiter vollstaendig heraus.
 */
@media (hover: none) {
    .rb-consent-tab {
        transform: none;
        min-height: 44px !important;
    }
}

/* Kleine Displays: die Leiste darf nicht die halbe Seite fuellen. */
@media (max-width: 640px) {
    .rb-consent__bar {
        flex-direction: column;
        align-items: stretch;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Dieselbe Falle wie beim Overlay: in der Spalte waeren die 20em
       Flex-Basis eine Mindesthoehe. */
    .rb-consent__text {
        flex: 0 0 auto;
        max-width: none;
    }

    .rb-consent__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rb-consent .rb-consent__btn,
    .rb-consent .rb-consent__link {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-consent *,
    .rb-consent-tab {
        transition: none !important;
    }
}