/* assets/css/components/magazin.css
   ------------------------------------------------------------------
   MAGAZIN-RASTER — die Beitrags-Karten von „Bewusst leben".
   Ein großer Aufmacher, daneben bis zu drei kleine; die ganze Karte
   ist ein Link, Hover ist das Projekt-Muster „Lift" (kein Skew).

   Seit 08.08.2026 eine Komponente statt Seiten-CSS: dasselbe Raster
   steht auf `verbraucher.php` UND als Teaser-Block auf der Startseite
   (Markup: includes/magazin_raster_partial.php). Konditional geladen
   in header.php — nur diese zwei Seiten, kein globales Gewicht.
   Die Klassennamen hießen vorher `vb-magazin-*` („vb" = verbraucher);
   das passte nicht mehr, als die Startseite dazukam.
   ------------------------------------------------------------------ */

/* ==================================================================
   AUS DEM MAGAZIN — eigene Beiträge (Kategorie „Bewusst leben")
   Ein großer Aufmacher, daneben bis zu drei kleine. Die ganze Karte
   ist ein Link; Hover ist das Projekt-Muster „Lift" (kein Skew).
   ================================================================== */
/* KEIN align-items: start — die Spalten strecken sich auf gleiche Höhe.
   Mit start endete die Seitenspalte nach ihren zwei Karten und unter dem
   letzten kleinen Beitrag stand ein toter Weißraum bis zur Unterkante des
   Aufmachers (Tim-Befund 02.08.). */
.magazin-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.25rem;
}

/* Nach einem Block-Kopf (Startseite: „Bewusst leben" + „Alle Beiträge") braucht
   das Raster mehr Luft als eine Textzeile: Die Karten bringen Rahmen UND harten
   Schatten mit und klebten sonst am Trennstrich des Kopfes (Tim-Befund
   08.08.2026). Der Strich bleibt — er ist das Erkennungszeichen aller
   Block-Köpfe der Seite; nur der Abstand wächst.
   Die 0.25rem des Kopfes gelten weiter für Zeilen-Listen, dort ist die Nähe
   richtig. */
.tagesgruppe-kopf+.magazin-raster {
    margin-top: 1.5rem;
}

.magazin-spalte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Die kleinen Karten teilen die Spaltenhöhe unter sich auf. Der Luftgewinn
   landet im Bild (height:100% + contain, s. u.) und zwischen Teaser und
   „Beitrag lesen" (margin-top: auto) — nicht als Loch am Spaltenende. */
.magazin-spalte .magazin-karte {
    flex: 1 1 auto;
}

.magazin-karte {
    background: var(--bg-card);
    border: 2px solid var(--color-ink);
    box-shadow: 4px 4px 0 var(--color-ink);
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.magazin-karte:hover,
.magazin-karte:focus-within {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-ink);
}

.magazin-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-main);
    text-decoration: none;
}

/* Die Aquarelle sind quadratisch und stehen auf weißem Grund. Sie werden
   deshalb NICHT beschnitten (kein object-fit: cover, kein aspect-ratio) —
   ein Ausschnitt köpft sonst Figuren oder schneidet die Schultüte an.

   🚨 Die Bildbühne bleibt in BEIDEN Modi weiß — hier stand vorher
   `var(--color-white)`, und dieses Token ist im Dunkelmodus nicht weiß, sondern
   #27272a. Weil ein nicht passendes Bild mittig steht, blieb links und rechts
   (bzw. oben und unten) ein Streifen Bühne frei: hell gegen den weißen
   Aquarellgrund unsichtbar, dunkel dagegen ein deutlicher Rahmen ums Bild
   (Tim-Befund 10.08.2026). Die Vorlagen sind auf Weiß gemalt, also ist Weiß
   hier eine Eigenschaft des Bildes und keine Theme-Farbe. */
.magazin-bild {
    display: block;
    background: #fff;
}

.magazin-bild img {
    display: block;
    width: 100%;
    height: auto;
}

/* Aufmacher: Bild über dem Text, in der Höhe begrenzt und mittig.
   Ohne Begrenzung füllt das quadratische Aquarell die ganze Kartenbreite und
   drückt den Text unter die Falz (Tim 30.07.: „viel zu groß"). Begrenzt wird
   über die HÖHE, nicht über einen Ausschnitt — beschnitten wird nie
   (Stilrezept: köpft sonst Figuren). Der weiße Rand links und rechts fällt
   nicht auf, weil die Aquarelle ohnehin auf Weiß stehen. */
.magazin-karte--lead .magazin-bild {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid var(--color-ink);
}

.magazin-karte--lead .magazin-bild img {
    width: auto;
    max-width: 100%;
    max-height: 17rem;
}

/* Aufmacher MIT eigenem Lead-Zuschnitt (2:1 aus dem Bearbeiten-Modal): füllt
   die Karte randlos in voller Breite — sonst stünde der breite Zuschnitt durch
   den 17-rem-Deckel mit Leerraum links und rechts (Tim-Befund 03.08.). Der
   Deckel oben gilt weiter für Fallback-Bilder ohne Zuschnitt (Quadrate), die
   in voller Breite die Karte dominieren würden. Bei 2:1 ergibt volle Breite
   fast genau die alte Höhe. */
.magazin-karte--lead .magazin-bild--vollbreit img {
    width: 100%;
    max-height: none;
}

/* Einzelner Beitrag: eine Spalte, Aufmacher quer (Bild links, Text rechts).
   Ab dem zweiten Beitrag fällt diese Klasse weg und das Raster greift. */
.magazin-raster--solo {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 901px) {
    .magazin-raster--solo .magazin-karte--lead .magazin-link {
        flex-direction: row;
        align-items: stretch;
    }

    .magazin-raster--solo .magazin-karte--lead .magazin-bild {
        flex: 0 0 38%;
        border-bottom: none;
        border-right: 2px solid var(--color-ink);
    }

    /* Das Bild passt sich der Texthöhe an, statt die Karte in die Länge zu
       ziehen: contain statt cover — es wird kleiner, aber nie beschnitten.
       Der weiße Rand fällt nicht auf, weil die Aquarelle auf Weiß stehen. */
    /* width/max-height hier ausdrücklich, damit die Höhenbegrenzung des
       Aufmachers (17 rem, siehe oben) die Solo-Variante nicht mitzieht:
       Quer gelegt darf das Bild höher sein, es steht neben dem Text. */
    .magazin-raster--solo .magazin-karte--lead .magazin-bild img {
        width: 100%;
        height: 100%;
        max-height: 360px;
        object-fit: contain;
    }

    .magazin-raster--solo .magazin-karte--lead .magazin-text {
        justify-content: center;
        gap: 0.6rem;
        padding: 1.6rem 1.9rem;
    }

    .magazin-raster--solo .magazin-karte--lead .magazin-anriss {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }

    /* Ohne zweite Spalte gibt es nichts auszurichten — der Link sitzt direkt
       unter dem Teaser statt am Kartenfuß. */
    .magazin-raster--solo .magazin-karte--lead .magazin-mehr {
        margin-top: 0.2rem;
    }
}

/* Genau zwei Beiträge: zwei gleichwertige Karten in einer Reihe.
   Übergangs-Layout, bis genug Beiträge für das eigentliche Raster da sind
   (Tim 30.07.). Beide Karten rendern als „lead", deshalb braucht es hier nur
   die Spaltenteilung — alles andere erben sie von der Aufmacher-Regel oben. */
.magazin-raster--duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Kleine Karten: quadratisches Vorschaubild links neben dem Text.
   So bleibt das Bild vollständig und die Seitenspalte kompakt. */
.magazin-karte--small .magazin-link {
    flex-direction: row;
    align-items: stretch;
}

.magazin-karte--small .magazin-bild {
    flex: 0 0 auto;
    width: 116px;
    border-right: 2px solid var(--color-ink);
}

/* Das Bild füllt die Höhe der Karte, statt oben zu kleben: Sonst endet das
   Bild nach 116 px, der Trennstrich (border-right) läuft aber weiter bis zum
   Kartenfuß und steht als abgebrochener Balken im Weißraum (Tim-Befund
   30.07.). Mit height:100% + contain trägt die Spalte ihren Strich über die
   ganze Höhe, und das Aquarell wird dabei nicht beschnitten.

   WICHTIG — Breite in Prozent, NIE noch einmal den Pixelwert der Spalte:
   `box-sizing: border-box` zieht den 2-px-Trennstrich von den 116 px ab, das
   Bild hat also 114 px Platz. Stand es hier erneut auf 116 px, ragte es genau
   2 px über die Kante und übermalte den Strich mit dem weißen Aquarellgrund —
   und zwar nur dort, wo das Bild wirklich Pixel setzt. Übrig blieben oben und
   unten zwei Strichreste (Tim-Befund 31.07.: „wieder komische Striche").
   Prozent hält den Zusammenhang auch im 420-px-Block, wo die Spalte schmaler
   wird. */
.magazin-karte--small .magazin-bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.magazin-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.2rem;
}

.magazin-datum {
    font-size: var(--schrift-1);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.magazin-titel {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    font-size: var(--schrift-6);
    text-wrap: balance;
}

.magazin-karte--small .magazin-titel {
    font-size: 1.08rem;
}

.magazin-anriss {
    font-size: var(--schrift-3);
    line-height: 1.55;
    /* Auf wenige Zeilen klemmen, damit die Spalten gleichmäßig bleiben */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.magazin-karte--small .magazin-anriss {
    font-size: 0.86rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.magazin-mehr {
    /* align-self, sonst streckt der Flex-Container den Span auf die ganze
       Kartenbreite — die gelbe Hover-Markierung liefe dann weit über den Text
       hinaus (Tim-Befund 28.07.). */
    align-self: flex-start;
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: var(--schrift-2);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.magazin-karte:hover .magazin-mehr,
.magazin-karte:focus-within .magazin-mehr {
    background: var(--color-yellow);
    color: var(--color-text-on-yellow);
}

/* Tastatur-Fokus muss sichtbar bleiben (die Karte selbst ist kein Fokus-Ziel) */
.magazin-link:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 2px;
}

/* Ohne Bild trägt der Titel die Karte */
.magazin-karte--ohne-bild .magazin-titel {
    font-size: var(--schrift-6);
}

.magazin-karte--small.magazin-karte--ohne-bild .magazin-titel {
    font-size: var(--schrift-4);
}

/* Mobile First: unter 900px stapelt alles in eine Spalte */
@media (max-width: 900px) {
    .magazin-raster {
        grid-template-columns: minmax(0, 1fr);
    }

    .magazin-karte--lead .magazin-titel {
        font-size: var(--schrift-5);
    }
}

/* Sehr schmale Geräte: das Vorschaubild würde den Titel erdrücken.
   Nur die SPALTE wird schmaler — das Bild darin steht auf 100 % und zieht
   automatisch mit (siehe Kommentar oben: eigener Pixelwert am Bild übermalt
   den Trennstrich). */
@media (max-width: 420px) {
    .magazin-karte--small .magazin-bild {
        width: 88px;
    }
}