/* ==========================================================================
   Klick-Riegel fuer Einbettungen — fw-einbettungen
   docs/adr/0019-einbettungen-hinter-dem-klick.md
   ========================================================================== */

.fw-einbettung {
    --fw-einb-seiten: 16/9;
    --fw-einb-breite: 100%;

    margin: var(--fw-space-5, 2rem) 0;
    max-width: 100%;
}

/* --- Vorschauflaeche ------------------------------------------------------ */

.fw-einbettung__vorschau {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fw-space-2, 0.5rem);

    box-sizing: border-box;
    width: 100%;
    aspect-ratio: var(--fw-einb-seiten);
    padding: var(--fw-space-4, 1.5rem);

    background:
        linear-gradient(
            160deg,
            var(--fw-color-bg-tint, #f4f0f8) 0%,
            color-mix(in srgb, var(--fw-color-bg-tint, #f4f0f8) 60%, #fff) 100%
        );
    border: 1px solid var(--fw-color-border, #e5deec);
    border-radius: var(--fw-radius-md, 8px);

    color: var(--fw-color-text, #27292b);
    font-family: var(--fw-font-heading, system-ui, sans-serif);
    text-align: center;
}

/* Bilder sind im Fliesstext keine 16:9-Buehne — kompakt, in Originalbreite */
.fw-einbettung--img {
    max-width: var(--fw-einb-breite);
}

.fw-einbettung--img .fw-einbettung__vorschau,
.fw-einbettung--script .fw-einbettung__vorschau {
    aspect-ratio: auto;
    min-height: 0;
    padding: var(--fw-space-3, 1rem);
}

.fw-einbettung--audio .fw-einbettung__vorschau {
    aspect-ratio: auto;
    padding: var(--fw-space-4, 1.5rem);
}

/* --- Text ----------------------------------------------------------------- */

.fw-einbettung__art {
    margin: 0;
    font-size: var(--fw-text-sm, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fw-color-primary, #783594);
}

.fw-einbettung__titel {
    margin: 0;
    max-width: 40ch;
    font-family: var(--fw-font-body, Georgia, serif);
    font-size: var(--fw-text-lg, 1.25rem);
    line-height: 1.3;
    text-wrap: balance;
}

.fw-einbettung__hinweis {
    margin: 0;
    max-width: 52ch;
    font-size: var(--fw-text-sm, 0.875rem);
    line-height: 1.45;
    color: var(--fw-color-muted, #555);
}

/* --- Knopf ---------------------------------------------------------------- */

.fw-einbettung__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--fw-space-2, 0.5rem);

    margin: var(--fw-space-2, 0.5rem) 0;
    padding: 0.65rem 1.4rem;
    min-height: 44px;

    background: var(--fw-color-primary, #783594);
    border: 2px solid transparent;
    border-radius: var(--fw-radius-sm, 4px);

    color: #fff;
    font-family: inherit;
    font-size: var(--fw-text-base, 1rem);
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}

.fw-einbettung__knopf:hover {
    background: var(--fw-color-secondary, #5c2872);
}

.fw-einbettung__knopf:active {
    transform: translateY(1px);
}

.fw-einbettung__knopf:focus-visible {
    outline: 3px solid var(--fw-color-text, #27292b);
    outline-offset: 3px;
}

.fw-einbettung__zeichen {
    width: 0;
    height: 0;
    border-top: 0.45em solid transparent;
    border-bottom: 0.45em solid transparent;
    border-left: 0.75em solid currentColor;
}

.fw-einbettung--img .fw-einbettung__zeichen,
.fw-einbettung--script .fw-einbettung__zeichen {
    display: none;
}

/* --- Ersatz ohne JavaScript ----------------------------------------------- */

.fw-einbettung__ersatz {
    margin: 0;
    font-size: var(--fw-text-sm, 0.875rem);
}

.fw-einbettung__ersatzlink {
    color: var(--fw-color-primary, #783594);
}

/* --- Nach dem Klick -------------------------------------------------------- */

.fw-einbettung--geladen {
    display: block;
}

/* Der Fokus wandert nach dem Laden per Skript hierher; sichtbar nur fuer Tastaturnutzer,
   sonst steht nach jedem Mausklick ein lila Rahmen um das Video. */
.fw-einbettung--geladen:focus-visible {
    outline: 3px solid var(--fw-color-primary, #783594);
    outline-offset: 3px;
}

/* WordPress reserviert in `.wp-has-aspect-ratio` die Flaeche per ::before und legt das
   iframe absolut darueber. Mit dem Riegel stand die Vorschau unter einer leeren
   16:9-Flaeche, und nach dem Klick schrumpfte der Riegel auf 0 px unter dem Video.
   Der Riegel bringt sein Seitenverhaeltnis selbst mit. */
.wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .fw-einbettung)::before {
    content: none;
}

.wp-has-aspect-ratio .wp-block-embed__wrapper .fw-einbettung {
    margin: 0;
}

.wp-has-aspect-ratio .wp-block-embed__wrapper .fw-einbettung--geladen > iframe {
    position: static;
    height: auto;
}

.fw-einbettung--geladen > iframe,
.fw-einbettung--geladen > video {
    display: block;
    width: 100%;
    aspect-ratio: var(--fw-einb-seiten);
    height: auto;
    border: 0;
}

.fw-einbettung--geladen > audio {
    display: block;
    width: 100%;
}

.fw-einbettung--geladen > img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .fw-einbettung__knopf {
        transition: none;
    }

    .fw-einbettung__knopf:active {
        transform: none;
    }
}

@media (forced-colors: active) {
    .fw-einbettung__vorschau {
        border: 1px solid CanvasText;
    }

    .fw-einbettung__knopf {
        border-color: ButtonText;
    }
}