/* =========================================================================
   Einwilligung: Korrekturen am Banner und Gestaltung der Platzhalter für
   Einbettungen, die erst nach Einwilligung laden.

   Diese Datei wird NACH main.css eingebunden. Das ist nötig, weil die
   globalen Regeln des Sitepackages in die Extension w52_consent
   hineinwirken - deren eigenes consent.css steht im Head davor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Banner
   ------------------------------------------------------------------------- */

/* Das Sitepackage ersetzt global alle Checkboxen: die echte Box wandert aus
   dem sichtbaren Bereich, das Kästchen zeichnet ein Pseudo-Element am Label
   auf fester Höhe (top: 1.25em). Im Banner passt das nicht zur Zeilenhöhe -
   das Kästchen saß über der Beschriftung. Hier auf die Mitte des Labels
   bezogen, damit beides auf einer Linie liegt. */
#w52-consent-banner [type="checkbox"]:checked + label::before,
#w52-consent-banner [type="checkbox"]:not(:checked) + label::before,
#w52-consent-banner [type="checkbox"]:checked + label::after,
#w52-consent-banner [type="checkbox"]:not(:checked) + label::after {
    top: 50%;
}

/* main.css setzt "table { border-style: solid }" ohne Breite - der Browser
   zeichnet daraus einen rund 3px starken Rahmen in Textfarbe. In den
   Cookie-Tabellen soll nur das feine Raster der Zellen stehen bleiben. */
#w52-consent-banner .w52-consent__table table {
    border: 0;
}

/* -------------------------------------------------------------------------
   Platzhalter für externe Einbettungen
   ------------------------------------------------------------------------- */

.consent-embed {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* Gleiches Seitenverhältnis wie das Video: der Platzhalter belegt exakt
       den Platz, den der Player später einnimmt - die Seite springt nicht. */
    aspect-ratio: 16 / 9;
}

.consent-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.consent-embed__notice {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(4px, 1.2vw, 14px);
    padding: clamp(8px, 3vw, 26px);
    overflow: auto;
    background: #f2f2f2;
    border: 1px solid #c8c8c8;
}

.consent-embed__notice[hidden] {
    display: none;
}

.consent-embed__title {
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(0.8rem, 2.2vw, 1.15rem);
    color: #10069f;
}

.consent-embed__text {
    margin: 0;
    line-height: 1.32;
    font-size: clamp(0.62rem, 1.7vw, 0.85rem);
}

.consent-embed__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.consent-embed__button {
    min-height: clamp(32px, 9vw, 40px);
    padding: 0 clamp(0.7em, 2.5vw, 1.1em);
    border: 2px solid #10069f;
    background: #10069f;
    color: #fff;
    font: inherit;
    font-size: clamp(0.62rem, 1.7vw, 0.85rem);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.consent-embed__button:hover,
.consent-embed__button:focus-visible {
    background: #fff;
    color: #10069f;
}

.consent-embed__button--secondary {
    background: #fff;
    color: #10069f;
}

.consent-embed__button--secondary:hover,
.consent-embed__button--secondary:focus-visible {
    background: #10069f;
    color: #fff;
}

.consent-embed__button:focus-visible {
    outline: 2px solid #10069f;
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Platzhalter mit Vorschaubild

   Das Bild liegt beim Inhaltselement "Video (YouTube)" lokal vor - es wurde
   beim Speichern einmalig vom Server geholt. Der Besucher laedt also nichts
   von Google, solange er nicht einwilligt.
   ------------------------------------------------------------------------- */

.consent-embed__notice--poster {
    /* Grundfarbe, solange das Bild noch nicht gezeichnet ist. */
    background: #10069f;
    border-color: #10069f;
}

.consent-embed__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Schneidet die schwarzen Balken der 4:3-Varianten von YouTube weg. */
    object-fit: cover;
    z-index: 0;
}

/* Abdunklung, damit Text und Schaltflaechen unabhaengig vom Bildmotiv
   ausreichend Kontrast haben (WCAG 1.4.3). */
.consent-embed__notice--poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.82));
    z-index: 1;
}

.consent-embed__notice--poster > p {
    position: relative;
    z-index: 2;
}

.consent-embed__notice--poster .consent-embed__title,
.consent-embed__notice--poster .consent-embed__text {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.consent-embed__notice--poster .consent-embed__button {
    border-color: #fff;
    background: #fff;
    color: #10069f;
    text-shadow: none;
}

.consent-embed__notice--poster .consent-embed__button--secondary {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.consent-embed__notice--poster .consent-embed__button:hover,
.consent-embed__notice--poster .consent-embed__button:focus-visible {
    background: #10069f;
    color: #fff;
}

.consent-embed__notice--poster .consent-embed__button--secondary:hover,
.consent-embed__notice--poster .consent-embed__button--secondary:focus-visible {
    background: #fff;
    color: #10069f;
}

.consent-embed__notice--poster .consent-embed__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Platzhalter der Anfahrtskarte

   Die Karte ist kein iframe: Leaflet baut sie direkt in #map. Der Platzhalter
   legt sich deshalb ueber denselben Container, dessen Hoehe aus default.less
   kommt (550px, in den Media Queries weniger). position: relative steht hier
   und nicht dort, weil nur der Platzhalter es braucht - Leaflet setzt es sich
   beim Start ohnehin selbst.

   Die Klassen .consent-embed__* sind dieselben wie beim Video, nur ohne die
   feste Kachel von 16:9 - die Hoehe gibt die Karte vor.
   ------------------------------------------------------------------------- */

#map {
    position: relative;
}

.consent-embed__notice--map {
    /* Die Flaeche deckt die ganze Karte ab, der Inhalt steht mittig darin. */
    align-items: center;
    text-align: center;
}

/* Ueber die volle Kartenbreite waeren die Zeilen zu lang zum Lesen. */
.consent-embed__notice--map > * {
    max-width: 46em;
}

.consent-embed__notice--map .consent-embed__actions {
    justify-content: center;
}