/* ========================================================================
   CLAUDE: Platzhalter fuer einwilligungspflichtige Einbettungen
   CLAUDE: Erzeugt von inc/consent.php, freigeschaltet von assets/js/cookie-consent.js
   CLAUDE: Steht dort, wo sonst der Drittanbieter-iframe stuende (Video, Karte)
   ======================================================================== */

/* CLAUDE: Grundflaeche. Eigenes 16:9-Verhaeltnis, damit der Platzhalter auch
   CLAUDE: ausserhalb eines Video-Containers nicht in sich zusammenfaellt.
   CLAUDE: Anpassen: aspect-ratio aendern, wenn ein Anbieter anders formatiert. */
.lhi-consent-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--lhi-radius-md);
    background-color: var(--lhi-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CLAUDE: Im Video-Container (layout.css: padding-hack, height 0) muss der
   CLAUDE: Platzhalter absolut fuellen - sonst haette die Flaeche keine Hoehe. */
.lhi-video-container .lhi-consent-embed {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

/* CLAUDE: Vorschaubild liegt als Theme-Asset vor - es wird NICHT vom Anbieter
   CLAUDE: geladen, sonst waere die Sperre wirkungslos. Abgedunkelt, damit der
   CLAUDE: Text darueber den Kontrast fuer WCAG AA erreicht. */
.lhi-consent-embed__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.45);
}

/* CLAUDE: Textebene ueber dem Bild. Zentriert, mit Innenabstand fuer Mobil. */
.lhi-consent-embed__inhalt {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--lhi-space-md);
    max-width: 34rem;
    color: var(--lhi-color-bg);
    font-family: var(--lhi-font-sans);
}

/* CLAUDE: Abspiel-Symbol als reine Zierde - aria-hidden im Markup. */
.lhi-consent-embed__symbol {
    display: block;
    margin: 0 auto var(--lhi-space-sm);
    width: 3.5rem;
    height: 3.5rem;
    color: var(--lhi-color-gold);
}

/* CLAUDE: Titel der Einbettung, damit der Besucher weiss, was ihn erwartet. */
.lhi-consent-embed__titel {
    margin: 0 0 var(--lhi-space-xs);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lhi-color-white);
}

/* CLAUDE: Der Knopf, der genau diese eine Einbettung nachlaedt.
   CLAUDE: Mindesthoehe 44px = Touch-Ziel nach Apple HIG. */
.lhi-consent-embed__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: var(--lhi-space-sm) 0;
    padding: 0.625rem 1.5rem;
    font-family: inherit;
    font-size: var(--lhi-font-size-sm);
    font-weight: 600;
    color: var(--lhi-color-white);
    background-color: var(--lhi-color-gold);
    border: 2px solid var(--lhi-color-gold);
    border-radius: var(--lhi-radius-sm);
    cursor: pointer;
    transition: background-color var(--lhi-transition-fast), border-color var(--lhi-transition-fast);
}

.lhi-consent-embed__knopf:hover,
.lhi-consent-embed__knopf:focus {
    background-color: var(--lhi-color-secondary);
    border-color: var(--lhi-color-secondary);
}

.lhi-consent-embed__knopf:focus-visible {
    outline: 2px solid var(--lhi-color-white);
    outline-offset: 2px;
}

/* CLAUDE: Rechtlicher Hinweis - nennt den Anbieter und verlinkt den Datenschutz.
   CLAUDE: Kleiner gesetzt, aber bewusst nicht unter 0.8125rem (Lesbarkeit). */
.lhi-consent-embed__hinweis {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--lhi-color-bg);
}

.lhi-consent-embed__hinweis a {
    color: var(--lhi-color-gold-light);
    text-decoration: underline;
}

.lhi-consent-embed__hinweis a:hover,
.lhi-consent-embed__hinweis a:focus {
    color: var(--lhi-color-white);
}

/* CLAUDE: Mobil - weniger Innenabstand, kleineres Symbol, damit auf schmalen
   CLAUDE: Geraeten Titel, Knopf und Hinweis gemeinsam in die 16:9-Flaeche passen. */
@media (max-width: 600px) {
    .lhi-consent-embed__inhalt {
        padding: var(--lhi-space-sm);
    }

    .lhi-consent-embed__symbol {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: var(--lhi-space-xs);
    }

    .lhi-consent-embed__titel {
        font-size: 0.9375rem;
    }

    .lhi-consent-embed__knopf {
        margin: var(--lhi-space-xs) 0;
    }

    .lhi-consent-embed__hinweis {
        font-size: 0.75rem;
    }
}

/* CLAUDE: Reduzierte Bewegung - Uebergaenge abschalten, Zustand bleibt sichtbar. */
@media (prefers-reduced-motion: reduce) {
    .lhi-consent-embed__knopf {
        transition: none;
    }
}