/* ============================================================
   EINBLENDUNG „AKTUELLES"

   Eigene Datei, damit seite.css unverändert aus base.html
   übernommen bleibt. Verwendet die dort gesetzten Farbwerte,
   passt sich also der Jahreszeit an.
   ============================================================ */

.einblendung {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28, 20, 12, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s ease-out;
}

.einblendung.offen { opacity: 1; }

.einblendung[hidden] { display: none; }

.einblendung-fenster {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--white, #fff);
    border-radius: var(--r-l, 26px);
    box-shadow: var(--sh-3, 0 20px 50px rgba(60, 44, 28, .3));
    padding: 34px 34px 30px;
    transform: translateY(14px) scale(.98);
    transition: transform .22s ease-out;
}

.einblendung.offen .einblendung-fenster {
    transform: translateY(0) scale(1);
}

.einblendung-schliessen {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-2, #5A4B3E);
    background: var(--paper-2, #F5EBDB);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.einblendung-schliessen:hover {
    background: var(--brand, #C05621);
    color: #fff;
}

.einblendung-inhalt {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
    align-items: center;
}

.einblendung-text h2 {
    margin: .3em 0 .4em;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.18;
}

.einblendung-text .lead { margin-bottom: .8em; }

.einblendung-text .mini-grid { margin-top: 18px; }

.einblendung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
}

.einblendung-bild {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-m, 18px);
    overflow: hidden;
    box-shadow: var(--sh-2, 0 8px 28px rgba(60, 44, 28, .12));
}
.einblendung-bild canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ablaufbalken am unteren Rand */
.einblendung-balken {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--line, #E8DCC7);
    border-radius: 0 0 var(--r-l, 26px) var(--r-l, 26px);
    overflow: hidden;
}
.einblendung-balken[hidden] { display: none; }
.einblendung-balken span {
    display: block;
    height: 100%;
    background: var(--brand, #C05621);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform linear;
}

/* ------------------------------------------------------------
   Schmale Bildschirme: nur das Wesentliche
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    .einblendung { padding: 12px; }

    .einblendung-fenster {
        padding: 26px 20px 22px;
        border-radius: var(--r-m, 18px);
    }

    .einblendung-inhalt { grid-template-columns: 1fr; gap: 0; }

    .nur-breit { display: none !important; }

    .einblendung-text h2 { font-size: 1.35rem; }
    .einblendung-knoepfe { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .einblendung,
    .einblendung-fenster,
    .einblendung-balken span { transition: none; }
}

/* ============================================================
   WARNUNG (seit Schritt 31)

   Ist unter Startseite → Aktuelles das Bild „Allgemeine Warnung“
   gewählt, wird der Abschnitt rot umrandet und trägt die Marke
   „⚠ Warnung“; ebenso die Einblendung beim ersten Besuch.
   ============================================================ */

.eyebrow.warnung-marke {
    color: #fff;
    background: #C62828;
}

.aktuelles-warnung .feature {
    padding: 28px;
    border-radius: var(--r-xl, 34px);
    background: linear-gradient(160deg, #FFF3F1, var(--white, #fff) 60%);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .85), var(--sh-2, 0 8px 28px rgba(60, 44, 28, .08));
}

@media (max-width: 560px) {
    .aktuelles-warnung .feature {
        padding: 18px;
    }
}

.einblendung-warnung .einblendung-fenster {
    box-shadow: 0 0 0 4px #C62828, var(--sh-3, 0 20px 50px rgba(60, 44, 28, .3));
}