/*
 * Das Magazin im Beitragstext (resources/views/shop/magazin/beitrag.blade.php).
 *
 * WOHER DIESE DATEI KOMMT.
 * Der Beitragstext stammt aus WordPress und traegt Markup, das es im
 * uebrigen Shop nirgends gibt: gewoehnliche `<table>` ohne Klasse,
 * `.magazin-fotos`, `.magazin-seiten`/`.magazin-seite`, `a.lb-img`.
 * Das Astro-Projekt hat dafuer eigenes CSS mitgeliefert
 * (SBS_Astro/src/layouts/BaseLayout.astro, `<style is:global>` ab
 * Zeile 49). Beim Umzug ist der Text mitgekommen und dieses CSS nicht
 * -- deshalb sah der Beitrag „zerrupft" aus (Befund M.W., 19.10.2026).
 *
 * Die Regeln sind aus dem Astro-Block UEBERNOMMEN, nicht neu erfunden;
 * Abweichungen stehen unten jeweils dabei.
 *
 * 🚩 ALLES HAENGT AN `.post__body`, NICHT AN `.typography`.
 * Astro schrieb `.post__body table, .magazin-content table,
 * .typography table`. Dort war `.typography` gleichbedeutend mit
 * „Beitragstext". Hier ist es das NICHT: dieselbe Klasse steht in
 * shop/kategorie.blade.php (Zeile 134) ueber dem Kategorietext und in
 * magazin/uebersicht.blade.php + archiv.blade.php ueber den
 * Einleitungen. Wer `.typography table` schriebe, faerbte jede
 * Kategorietabelle des Shops mit um. `.post__body` steht genau an
 * einer Stelle -- am Beitragstext.
 *
 * Was hier bewusst FEHLT: `.produkt-card`, `.produkt-grid`,
 * `.magazin-produkte`. Das waren die im Astro-Build eingebackenen
 * Kacheln mit Preisstand 10.07.2026. Der Uebernahmebefehl schneidet
 * diesen Block heraus (MagazinUebernehmen::PRODUKTBLOCK, Zeile 84),
 * und die Vorlage setzt an seine Stelle die echte Shop-Kachel
 * `teile/produktkarte.blade.php` mit dem Preis von heute. Geprueft am
 * 19.10.2026 ueber alle 78 Beitraege: null Rest-`produkt-card`.
 * Ebenso fehlt `.cta-button*` -- die Klasse kommt in keinem der 78
 * Beitraege vor.
 */

/*
 * TABELLEN.
 *
 * Gemessen am 19.10.2026 auf
 * /magazin/how-to/alles-ums-thema-brennholz-ratgeber/ bei 1400 px:
 * Die Tabelle „Empfohlene Kreissaegeblaetter" war **214 px** breit in
 * einem 1296 px breiten Textblock, `th` hatte **1 px** Innenabstand
 * (Browser-Standard), keinen Rahmen und keine Hintergrundfarbe. Die
 * vier Spalten klebten aneinander -- genau das Bild aus dem Screenshot.
 *
 * Grund: `.typography` im Theme (style.css ab Zeile 4528) regelt
 * Absaetze, Listen, Bilder, Zitate -- aber keine Tabelle. Null Treffer
 * fuer `.typography table`.
 *
 * Soll ist der Stand des echten Magazins, dort gemessen: Tabelle auf
 * voller Textbreite (900 px von 900 px), Kopfzeile `rgb(10,63,103)`
 * auf Weiss, Innenabstand 8px/12px.
 */
.post__body table {
    border-collapse: collapse;
    display: table;
    font-size: .95rem;
    margin: 1.25rem 0;
    width: 100%;
}

.post__body th,
.post__body td {
    border: 1px solid #dbe2e8;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.post__body thead th {
    background: #0a3f67;
    border-color: #0a3f67;
    color: #fff;
    font-weight: 600;
}

.post__body tbody tr:nth-child(even) {
    background: #f5f8fa;
}

/*
 * Auf dem Handy rollen statt quetschen.
 *
 * ⚠️ Das ist die einzige Stelle, an der diese Datei ueber den
 * Astro-Stand hinausgeht. Dort steht der Kommentar „mobil scrollbar",
 * aber keine Regel dazu -- die vierspaltigen Tabellen (Produkt /
 * Eigenschaft / Ø / Art.-Nr.) werden im Original auf 375 px einfach
 * zusammengedrueckt, bis die Artikelnummer umbricht.
 *
 * `display: block` macht aus der Tabelle einen Rollkasten; die Zeilen
 * bilden darin weiter eine (anonyme) Tabelle, die Spalten bleiben also
 * untereinander ausgerichtet. Mit `nowrap` wird sie breiter als der
 * Kasten und `overflow-x` greift.
 */
@media (max-width: 575.98px) {
    .post__body table {
        display: block;
        overflow-x: auto;
    }

    .post__body th,
    .post__body td {
        white-space: nowrap;
    }
}

/*
 * DAS AUFMACHERBILD -- bewusst NICHT uebernommen.
 *
 * Astro hat `.post__featured img { width:100%; max-height:460px;
 * object-fit:cover }`. Der Weg hierher ist gemessen und wieder
 * verworfen worden (19.10.2026):
 *
 * Im echten Magazin steht der Beitrag neben einer Seitenleiste, das
 * Bild ist dort 900 × 460 px. Im Neubau hat die Beitragsseite keine
 * Seitenleiste, und das Theme laesst den Aufmacher bei
 * `post--layout--full` ueber den Text hinauslaufen
 * (style.css Zeile 13249: `width: calc(100% + 380px)`, `left: -190px`).
 * Mit Astros Regel wird daraus 1676 × 460 px -- die Bilddatei ist aber
 * nur 1200 px breit und wuerde auf das 1,4-fache aufgeblasen und
 * oben/unten beschnitten.
 *
 * Der heutige Stand (1200 × 675 px, mittig, nicht hochskaliert) ist
 * besser als beide Varianten und war auch nicht Teil des Befunds.
 * Bleibt also, wie das Theme es meint.
 */

/*
 * WEITERE FOTOS IM BEITRAG (19 Bloecke in 78 Beitraegen: 7-mal ein
 * Foto, 12-mal zwei -- mehr kommt nicht vor).
 *
 * 🚩 ZWEI ABWEICHUNGEN VOM ASTRO-STAND, beide gemessen und noetig.
 *
 * Astro hat `grid-template-columns: repeat(auto-fit, minmax(240px,
 * 1fr))` und `img { width: 100% }`. Das passte dort, weil der
 * Beitragstext neben einer Seitenleiste steht: 900 px, bei zwei Fotos
 * also Zellen von 443 px. Die 31 Dateien sind 182 bis 900 px breit
 * (Median 734) -- `width: 100%` war dort in der Praxis immer ein
 * VERKLEINERN.
 *
 * Hier ist der Textblock 1296 px breit und hat keine Seitenleiste.
 * Dieselbe Regel 1:1 uebernommen, gemessen am 19.10.2026 auf
 * /magazin/how-to/alles-ums-thema-brennholz-ratgeber/: ein Foto von
 * 734 × 675 px wurde auf **1296 × 1192 px** aufgeblasen -- das
 * 1,77-fache, und mitten im Text hoeher als der Bildschirm. Schlimmer
 * als vorher.
 *
 * Deshalb:
 *   - Die Spalte wird bei 450 px gedeckelt. Das ist die Zellenbreite
 *     des echten Magazins, fuer die diese Fotos aufbereitet wurden.
 *   - `max-width` statt `width`. Ein 182 px breites Foto bleibt
 *     182 px breit, statt auf das Zweieinhalbfache zu wachsen.
 */
.post__body .magazin-fotos {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 450px));
    justify-content: start;
    margin: 1.5rem 0;
}

.post__body .magazin-fotos figure {
    margin: 0;
}

.post__body .magazin-fotos img {
    border-radius: 8px;
    height: auto;
    max-width: 100%;
}

/*
 * DIE ORIGINAL-MAGAZINSEITEN (39 von 78 Beitraegen).
 *
 * Der sichtbarste Schaden von allen: Ein Seitenscan ist 1190 × 1683 px
 * gross gemessen worden -- zwei davon am Beitragsende fuellen zwei
 * ganze Bildschirme. Im echten Magazin sind es Daumennaegel von 216 px
 * (vier Spalten in 900 px), die per Lichtkasten gross werden.
 */
.post__body .magazin-seiten {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin: 1rem 0;
}

.post__body .magazin-seite {
    margin: 0;
}

.post__body .magazin-seite img {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    height: auto;
    width: 100%;
}

.post__body .magazin-seite img,
.post__body .magazin-fotos img {
    cursor: zoom-in;
}

/*
 * DER LICHTKASTEN.
 *
 * 39 Beitraege enthalten `a.lb-img`. Ohne Gegenstueck fuehrt ein Klick
 * aus dem Shop heraus auf eine nackte JPEG-Datei -- schlechter als im
 * Original. Markup und Skript stehen in beitrag.blade.php.
 *
 * `#lb` statt `.lb`: Die zwei Buchstaben waeren im Shop-CSS ein zu
 * billiger Name.
 */
#lb {
    align-items: center;
    background: rgba(0, 0, 0, .9);
    cursor: zoom-out;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 99999;
}

#lb[hidden] {
    display: none;
}

#lb img {
    background: #fff;
    box-shadow: 0 6px 50px rgba(0, 0, 0, .5);
    max-height: 92vh;
    max-width: 92vw;
}

#lb .lb__close {
    color: #fff;
    cursor: pointer;
    font-size: 42px;
    line-height: 1;
    position: absolute;
    right: 24px;
    top: 12px;
}