/*
 * Pressespiegel — mitgelieferte Grundgestaltung.
 *
 * Reines CSS, kein Build. Jede Angabe kommt als `var(… , Rückfall)`; die
 * Werte selbst stehen NICHT auf dem Wurzelelement. Sonst gewönne die
 * mitgelieferte Datei über die Projektwerte, sobald sie später geladen wird.
 *
 * Rückfälle sind Bootstrap-Variablen, wo es welche gibt — damit stimmen
 * heller und dunkler Modus ohne eigenes Zutun.
 */

/*
 * ⛔ DER ABSTAND NACH UNTEN GEHÖRT AN DAS ELEMENT SELBST. Content Blocks
 *   rendern OHNE die Hülle des SiteKits: die Klasse
 *   `.ot-content-element-margin-bottom`, die jedem anderen Inhaltselement
 *   seinen Abstand gibt, erreicht sie nicht. 🛠 Befund Axel, 14.09.2026:
 *   „Abstand unten passt nicht" — gemessen 0 px zwischen der letzten Karte
 *   und dem folgenden Band.
 *
 *   Der Rückfall hier ist ein brauchbarer Eigenwert; das Projekt setzt die
 *   Variable auf seinen eigenen Rhythmus.
 */
.cb-pressespiegel {
    margin-block-end: var(--cb-pressespiegel-abstand-unten, 2.5rem);
}

.cb-pressespiegel-titel-block {
    margin-block-end: var(--cb-pressespiegel-titel-abstand, 1rem);
}

.cb-pressespiegel-einleitung {
    max-inline-size: var(--cb-pressespiegel-text-max, 46rem);
    margin-block-end: var(--cb-pressespiegel-einleitung-abstand, 2rem);
    color: var(--cb-pressespiegel-einleitung-farbe, var(--bs-secondary-color));
}

/*
 * Die Zeitleiste.
 *
 * Die senkrechte Linie ist ein Pseudoelement der Liste, kein eigenes Markup:
 * Sie trägt keine Bedeutung, sondern zeigt nur, dass die Einträge eine Folge
 * bilden. Im Dokument steht dafür `ol`.
 */
.cb-pressespiegel-liste {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: var(--cb-pressespiegel-abstand, 1rem);

    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-pressespiegel-liste::before {
    content: "";
    position: absolute;
    inset-block: var(--cb-pressespiegel-linie-einzug, 1.6rem);
    inset-inline-start: var(--cb-pressespiegel-linie-position, 3.25rem);

    inline-size: var(--cb-pressespiegel-linie-staerke, 2px);

    background: var(--cb-pressespiegel-linie-farbe, var(--bs-border-color));
}

.cb-pressespiegel-eintrag {
    position: relative;

    display: grid;
    grid-template-columns: var(--cb-pressespiegel-datum-breite, 6.5rem) 1fr;
    gap: var(--cb-pressespiegel-spalten-abstand, 1.25rem);
    align-items: start;
}

/* Der Punkt auf der Linie. */
.cb-pressespiegel-eintrag::before {
    content: "";
    position: absolute;
    inset-block-start: var(--cb-pressespiegel-punkt-oben, 1.35rem);
    inset-inline-start: var(--cb-pressespiegel-punkt-position, 2.9rem);
    z-index: 1;

    inline-size: var(--cb-pressespiegel-punkt-groesse, .7rem);
    block-size: var(--cb-pressespiegel-punkt-groesse, .7rem);

    background: var(--cb-pressespiegel-punkt-farbe, var(--bs-border-color));
    border: var(--cb-pressespiegel-punkt-rand, 3px solid var(--bs-body-bg));
    border-radius: 50%;

    transition: background-color .2s ease, transform .2s ease;
}

/* --- Datum ---------------------------------------------------------------- */

.cb-pressespiegel-datum {
    display: flex;
    flex-direction: column;
    align-items: end;

    padding-block-start: var(--cb-pressespiegel-datum-oben, .75rem);

    text-align: end;
}

.cb-pressespiegel-tag {
    color: var(--cb-pressespiegel-tag-farbe, var(--bs-emphasis-color));
    font-size: var(--cb-pressespiegel-tag-groesse, 1.75rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cb-pressespiegel-monat {
    color: var(--cb-pressespiegel-monat-farbe, var(--bs-body-color));
    font-size: var(--cb-pressespiegel-monat-groesse, .95rem);
    font-weight: 600;
    line-height: 1.2;
}

.cb-pressespiegel-jahr {
    color: var(--cb-pressespiegel-jahr-farbe, var(--bs-secondary-color));
    font-size: var(--cb-pressespiegel-jahr-groesse, .8rem);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* --- Karte ---------------------------------------------------------------- */

/*
 * ⚠ `position: relative` ist Pflicht: Der gestreckte Verweis legt sich über
 *   den nächsten positionierten Vorfahren. Fehlt einer hier, deckt er die
 *   ganze Liste ab — und nur noch der letzte Eintrag wäre anklickbar.
 */
.cb-pressespiegel-karte {
    position: relative;

    padding: var(--cb-pressespiegel-karte-innen, 1rem 3rem 1rem 1.25rem);

    background: var(--cb-pressespiegel-karte-grund, var(--bs-body-bg));
    border: var(--cb-pressespiegel-karte-rand, 1px solid var(--bs-border-color));
    border-radius: var(--cb-pressespiegel-karte-radius, 4px);

    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cb-pressespiegel-medium {
    margin: 0;
    color: var(--cb-pressespiegel-medium-farbe, var(--bs-emphasis-color));
    font-size: var(--cb-pressespiegel-medium-groesse, .95rem);
    font-weight: 700;
    line-height: 1.3;
}

/*
 * Steht keine Überschrift zur Verfügung, trägt diese Zeile den Verweis. Sie
 * wird dann so groß wie sonst die Überschrift — sie IST hier die Überschrift.
 */
.cb-pressespiegel-medium-allein {
    font-size: var(--cb-pressespiegel-schlagzeile-groesse, 1.05rem);
}

.cb-pressespiegel-einordnung {
    margin: .1rem 0 0;
    color: var(--cb-pressespiegel-einordnung-farbe, var(--bs-secondary-color));
    font-size: var(--cb-pressespiegel-einordnung-groesse, .82rem);
    line-height: 1.35;
}

.cb-pressespiegel-schlagzeile {
    margin: .45rem 0 0;
    font-size: var(--cb-pressespiegel-schlagzeile-groesse, 1.05rem);
    line-height: 1.35;
}

.cb-pressespiegel-verweis {
    color: var(--cb-pressespiegel-verweis-farbe, var(--bs-link-color));
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

/*
 * Das Zeichen für „führt aus dem Haus".
 *
 * ⚠ Es ist Zierrat (`aria-hidden`): Dass alle Einträge nach außen führen,
 *   steht einmal im Einleitungstext. An jedem Eintrag wäre es für eine
 *   Sprachausgabe neunmal derselbe Satz.
 */
.cb-pressespiegel-aus-dem-haus {
    position: absolute;
    inset-block-start: var(--cb-pressespiegel-zeichen-oben, 1.1rem);
    inset-inline-end: var(--cb-pressespiegel-zeichen-rechts, 1.1rem);

    color: var(--cb-pressespiegel-zeichen-farbe, var(--bs-secondary-color));
    font-size: var(--cb-pressespiegel-zeichen-groesse, .85rem);
    line-height: 1;

    transition: color .2s ease, transform .2s ease;
}

/* --- Beim Überfahren und beim Tasten -------------------------------------- */

.cb-pressespiegel-eintrag:hover .cb-pressespiegel-karte,
.cb-pressespiegel-eintrag:focus-within .cb-pressespiegel-karte {
    border-color: var(--cb-pressespiegel-karte-rand-aktiv, var(--bs-link-color));
    box-shadow: var(--cb-pressespiegel-karte-schatten, 0 .35rem 1rem rgb(0 0 0 / 8%));
    transform: translateY(-2px);
}

.cb-pressespiegel-eintrag:hover::before,
.cb-pressespiegel-eintrag:focus-within::before {
    background: var(--cb-pressespiegel-punkt-farbe-aktiv, var(--bs-link-color));
    transform: scale(1.25);
}

.cb-pressespiegel-eintrag:hover .cb-pressespiegel-aus-dem-haus,
.cb-pressespiegel-eintrag:focus-within .cb-pressespiegel-aus-dem-haus {
    color: var(--cb-pressespiegel-zeichen-farbe-aktiv, var(--bs-link-color));
    transform: translate(2px, -2px);
}

/* --- Schmale Schirme ------------------------------------------------------ */

/*
 * Unter 36rem steht das Datum über der Karte, die Zeitleiste entfällt. Eine
 * senkrechte Linie neben einer fast bildschirmbreiten Karte kostet Platz,
 * ohne etwas zu zeigen.
 */
@media (max-width: 35.999rem) {

    .cb-pressespiegel-liste::before,
    .cb-pressespiegel-eintrag::before {
        display: none;
    }

    .cb-pressespiegel-eintrag {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .cb-pressespiegel-datum {
        flex-direction: row;
        align-items: baseline;
        gap: .35rem;

        padding-block-start: 0;

        text-align: start;
    }

    .cb-pressespiegel-tag {
        font-size: 1.05rem;
    }

    .cb-pressespiegel-monat,
    .cb-pressespiegel-jahr {
        font-size: .95rem;
    }
}

/* WCAG 2.3.3: Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {

    .cb-pressespiegel-karte,
    .cb-pressespiegel-eintrag::before,
    .cb-pressespiegel-aus-dem-haus {
        transition: none;
    }

    .cb-pressespiegel-eintrag:hover .cb-pressespiegel-karte,
    .cb-pressespiegel-eintrag:focus-within .cb-pressespiegel-karte,
    .cb-pressespiegel-eintrag:hover::before,
    .cb-pressespiegel-eintrag:focus-within::before,
    .cb-pressespiegel-eintrag:hover .cb-pressespiegel-aus-dem-haus,
    .cb-pressespiegel-eintrag:focus-within .cb-pressespiegel-aus-dem-haus {
        transform: none;
    }
}