/* ============================================================
   FOGSMOKE Blog — Uebersicht (/News) und Beitragsseiten
   Sitzung BLOG-SEITEN, 21.08.2026 (Auftrag Yunus)

   ABGRENZUNG zu fs-blog.css: Jene Datei gehoert der FOG STORY WALL
   auf der STARTSEITE und ist vollstaendig auf .fog-story-wall
   gescoped. DIESE Datei ist fuer die eigentlichen Blogseiten
   zustaendig — .blog-overview (/News) und .blog-details (Beitrag).
   Die beiden ueberschneiden sich nicht.

   Schriften ueber die Projekt-Tokens: "FS Display" (Anton, NUR
   Gewicht 400) und "FS Body" (DM Sans). Farben nach Farbsystem:
   Flaeche #f6f5f3, Kante #d9d9de, Haarlinie #e4e4e7, Text #111114,
   CTA #c90f88, Flaeche/Hover-Lila #830779.

   SPUR A — Sofortfixes. Spur B (Rahmen im RANDM-Stil) und die
   Inhalts-Migration C2 folgen in eigenen Abschnitten.
   ============================================================ */


/* ------------------------------------------------------------
   A1  Schwarzer Kasten im Beitragstext
   ------------------------------------------------------------
   URSACHE, belegt: plugins/knm_custom_code/frontend/css/custom.css
   Zeile 256 setzt GLOBAL

       header { background: #232323 !important; border-bottom: 0; }

   Der Beitrag "Nikotinshots dosieren & berechnen" verwendet im
   WYSIWYG semantisch <header> fuer den Einleitungsblock. Der erbt
   die Regel und rendert Text #252525 auf Grund #232323 —
   Kontrast 1,02:1, also komplett unlesbar. Zusaetzlich erbt das
   Element z-index 1020 (der Wert des Site-Kopfes).

   WARUM HIER !important STEHT: Das Plugin-CSS laedt NACH dem
   Theme-CSS und arbeitet selbst mit !important. Spezifitaet allein
   reicht nachweislich nicht — im Browser gegengetestet, es
   verlieren ALLE diese Varianten:
       article header                                   (0-0-2)
       .blog-details-content header                     (0-1-1)
       .blog-details-content header.affix               (0-2-1)
       .blog-details .blog-details-content header       (0-3-1)
   Das ist die dokumentierte Ausnahme von der Projektregel
   "Spezifitaet statt !important" (siehe Plugin-Landkarte).

   Die Plugin-Datei selbst bleibt unangetastet (Update-Sicherheit).

   NICHT betroffen: <footer>. Das Plugin styled nur header, der
   Autoren-<footer> mit eigenem Inline-Hintergrund bleibt exakt
   so, wie er gemeint ist. Deshalb steht er hier auch nicht drin.

   MERKREGEL FUER DIE REDAKTION: In Beitragstexten <div> statt
   <header>/<footer> verwenden. Das Theme styled Element-Tags
   global — dieselbe Falle hat die BLOG-Sitzung schon einmal in
   der Story Wall getroffen. */

.blog-overview header,
.blog-details-content header {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    position: static !important;
    z-index: auto !important;
    white-space: normal;
}


/* ------------------------------------------------------------
   A2  Fliesstext auf Lesegroesse
   ------------------------------------------------------------
   Stand vorher: 13,1 px mobil / 14,1 px Desktop bei Beitraegen
   von bis zu 17.000 px Seitenhoehe. Zu klein fuer Langtext.

   Die Groesse steht bewusst auf dem CONTAINER, nicht auf p/li:
   Der Kastentext der Redaktion steckt haeufig in span/strong ohne
   eigene Groesse — eine Regel auf p/li liess 112 solcher Elemente
   auf 13,1 px zurueck (gemessen). Ueber die Vererbung erwischt der
   Container sie alle.

   Bewusst OHNE !important: Nach der Inhalts-Migration C2 gibt es
   im Fliesstext keine konkurrierenden Inline-Groessen mehr. Was
   noch eigene Groessen traegt, sind Pillen und Ecken-Badges
   (<= 12 px) — und die sollen ihre Groesse behalten. */

.blog-details-content {
    font-size: 16px;
    line-height: 1.65;
}

@media (min-width: 992px) {
    .blog-details-content {
        font-size: 17px;
        line-height: 1.7;
    }
}


/* ------------------------------------------------------------
   A3  Tabellen: sichtbarer Scrollhinweis
   ------------------------------------------------------------
   Die Redaktion packt breite Tabellen (inline min-width: 650px)
   in einen Wrapper mit inline overflow-x: auto. Das funktioniert
   technisch — es gibt aber KEINEN Hinweis, dass man seitlich
   wischen kann; auf 333 px Spaltenbreite sieht die Tabelle
   einfach abgeschnitten aus.

   Klassische Scroll-Schatten-Technik: zwei weisse Deckflaechen
   (background-attachment: local) laufen beim Scrollen mit und
   geben die darunterliegenden Schatten frei — der Schatten
   erscheint also nur an der Seite, an der noch Inhalt liegt.
   Ueber den Attributselektor gegriffen, weil der Wrapper aus dem
   WYSIWYG kommt und keine Klasse hat. */

.blog-details-content div[style*="overflow-x"] {
    background:
        linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 70%) right center,
        radial-gradient(farthest-side at 0 50%, rgba(17, 17, 20, .18), rgba(17, 17, 20, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(17, 17, 20, .18), rgba(17, 17, 20, 0)) right center;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
    scrollbar-width: thin;
}


/* ============================================================
   SPUR B1 — Uebersicht /News als Magazin mit Aufmacher
   (Yunus 21.08.2026: "Magazin mit Leitbeitrag", Bilder werden
   ersetzt, Optik nach staerkster Wirkung)

   GRUNDSATZ: Alles rein ueber CSS. Die Blogkarten tragen die
   komplette BlogPosting-Microdata (itemprop headline, description,
   image, url, datePublished, commentCount ...). Ein neu
   geschriebenes preview.tpl wuerde sie stillschweigend verlieren —
   genau der Fehler, den die SEO-Tabuzone beschreibt. Deshalb
   bleibt der DOM unangetastet; was verschwinden soll, wird
   ausgeblendet, nicht entfernt (die Links bleiben crawlbar).

   ALLES hier ist auf .blog-overview gescoped. Dieselben Karten
   erscheinen auch auf der Startseite (Story Wall) und im
   Karussell am Beitragsende — die bleiben unberuehrt.
   ============================================================ */

.blog-overview {
    --fsb-lila:    #830779;
    --fsb-cta:     #c90f88;
    --fsb-tinte:   #111114;
    --fsb-flaeche: #f6f5f3;
    --fsb-kante:   #d9d9de;
    --fsb-haar:    #e4e4e7;
    --fsb-grau:    #5c5a60;
    --fsb-papier:  #ffffff;
}

/* ---------- B1.1  Seitenkopf ----------
   BEWUSST MINIMAL. Die H1 selbst gehoert `fs-pages.css` (Sitzung
   SEITEN): dort steht unter `#content > .container > h1` das
   projektweite Muster fuer Seitenueberschriften — FS Display,
   Versalien, 56px-Akzentstrich als ::after. Das ueberschreibe ich
   NICHT. Eine eigene Blogueberschrift waere nicht konsistenter,
   sondern der einzige Ausreisser im Shop.
   (Nebenbei: die Regel dort traegt eine ID und liegt bei 1-1-1 —
   dagegen kaeme ein Klassen-Selektor ohnehin nicht an.)

   Dazu kommt hier nur der Kicker ueber der Ueberschrift, als
   ::before, damit kein Markup entsteht.

   Die Farbe steht als Literal, NICHT als var(--fsb-lila): Die
   Tokens haengen an .blog-overview, die H1 ist deren Geschwister-
   Element und damit ausserhalb des Vererbungspfads. Genau daran
   ist der Kicker im ersten Anlauf schwarz geblieben. */

.container:has(+ .blog-overview) h1::before {
    content: "FOGSMOKE MAGAZIN";
    display: block;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2em;
    line-height: 1;
    color: #830779;
    margin: 0 0 10px;
}

/* ---------- B1.2  Filterzeile ----------
   Vorher: vier rohe Selects untereinander plus eine zweite
   Blaetterleiste plus Trennlinie — auf dem Handy ~950 px, bevor
   der erste Beitrag kam. Jetzt eine ruhige Leiste auf Flaeche. */

.blog-overview .blog-overview-main {
    background: var(--fsb-flaeche);
    border: 1px solid var(--fsb-haar);
    border-radius: 3px;
    padding: 12px 14px;
    margin: 22px 0 30px;
    align-items: center;
}

/* "Beitraege pro Seite" raus — steht jetzt fest auf 10 (Shopeinstellung
   news_anzahl_uebersicht). Ausgeblendet statt entfernt. */
.blog-overview .form-row > .col:has(#pagi_nItemsPerPage) {
    display: none;
}

/* Obere Blaetterleiste ausblenden: dieselben Links stehen unten
   noch einmal, im DOM bleiben sie hier fuer Crawler erhalten. */
.blog-overview .blog-overview-pagination {
    display: none;
}

.blog-overview .blog-overview-hr {
    display: none;
}

.blog-overview .blog-overview-main select.custom-select {
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--fsb-tinte);
    background-color: var(--fsb-papier);
    border: 1px solid var(--fsb-kante);
    border-radius: 2px;
    height: 42px;
    padding: 0 34px 0 14px;
}

.blog-overview .blog-overview-main select.custom-select:focus {
    border-color: var(--fsb-lila);
    box-shadow: 0 0 0 3px rgba(131, 7, 121, .14);
    outline: none;
}

/* ---------- B1.3  Raster ----------
   Aus der Bootstrap-Zeile wird ein echtes Raster. Die col-Klassen
   der Kinder muessen dafuer neutralisiert werden, sonst rechnen
   flex-basis und max-width dagegen. minmax(0,1fr) statt 1fr, sonst
   sprengen lange Woerter die Spalte. */

.blog-overview .blog-overview-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 0;
}

.blog-overview .blog-overview-preview > .blog-overview-preview-item {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}

@media (min-width: 576px) {
    .blog-overview .blog-overview-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (min-width: 992px) {
    .blog-overview .blog-overview-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }
}

/* ---------- B1.4  Karte ---------- */

.blog-overview .blog-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fsb-papier);
    border: 1px solid var(--fsb-kante);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}

.blog-overview .blog-preview:hover,
.blog-overview .blog-preview:focus-within {
    border-color: var(--fsb-lila);
    box-shadow: 0 10px 26px rgba(17, 17, 20, .10);
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .blog-overview .blog-preview { transition: none; }
    .blog-overview .blog-preview:hover { transform: none; }
}

/* Bildflaeche: fester Ausschnitt statt Briefkasten.
   ACHTUNG, bewusste Gegenentscheidung: Die BILDER-Sitzung hat am
   20.08. global `.newsbox-image img { object-fit: contain }` gesetzt,
   weil das Theme Motive mit eingebranntem Text beschnitt. Weil die
   Motive ersetzt werden (Ansage Yunus 21.08.), gilt auf der
   UEBERSICHT wieder cover — Startseite und Beitrags-Karussell
   behalten BILDERs Regel, mein Scope endet an .blog-overview. */
.blog-overview .newsbox-header {
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--fsb-flaeche);
}

.blog-overview .newsbox-image {
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-overview .newsbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 320ms ease-out;
}

.blog-overview .blog-preview:hover .newsbox-image img {
    transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
    .blog-overview .newsbox-image img,
    .blog-overview .blog-preview:hover .newsbox-image img {
        transition: none;
        transform: none;
    }
}

.blog-overview .newsbox-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 18px 20px;
}

/* Datum: aus dem grauen Kaestchen wird ein Kicker */
.blog-overview .badge-custom {
    display: inline-block;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--fsb-lila);
}

/* Kommentarblase ("0" auf jeder Karte) ausblenden — der Knoten mit
   itemprop="commentCount" bleibt im DOM erhalten. */
.blog-overview .blog-preview-comment {
    display: none;
}

.blog-overview .newsbox-headline {
    margin: 8px 0 10px;
}

.blog-overview .newsbox-headline a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.14;
    color: var(--fsb-tinte);
    text-decoration: none;
}

.blog-overview .blog-preview:hover .newsbox-headline a {
    color: var(--fsb-lila);
}

.blog-overview .item-box-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fsb-grau);
    margin: 0 0 14px;
}

/* Abschluss-Zeile der Karte: Pfeil als Leseanreiz, reine Deko */
.blog-overview .newsbox-body::after {
    content: "WEITERLESEN \2192";
    display: block;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--fsb-haar);
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--fsb-tinte);
}

.blog-overview .blog-preview:hover .newsbox-body::after {
    color: var(--fsb-lila);
}

/* ---------- B1.5  Aufmacher ----------
   Die erste Karte jeder Seite laeuft ueber die volle Breite und
   stellt Bild und Text nebeneinander. Bewusst pro Seite, nicht nur
   auf Seite 1: das braeuchte eine Template-Bedingung, und der DOM
   soll unangetastet bleiben. Liest sich als "Aufmacher der Seite". */

@media (min-width: 768px) {
    .blog-overview .blog-overview-preview > .blog-overview-preview-item:first-child {
        grid-column: 1 / -1;
    }

    .blog-overview .blog-overview-preview-item:first-child .blog-preview {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .blog-overview .blog-overview-preview-item:first-child .newsbox-image {
        aspect-ratio: auto;
        height: 100%;
        min-height: 320px;
    }

    .blog-overview .blog-overview-preview-item:first-child .newsbox-body {
        justify-content: center;
        padding: 34px 38px;
    }

    .blog-overview .blog-overview-preview-item:first-child .newsbox-headline a {
        -webkit-line-clamp: 3;
        font-size: clamp(26px, 2.6vw, 38px);
        line-height: 1.08;
    }

    .blog-overview .blog-overview-preview-item:first-child .item-box-description {
        -webkit-line-clamp: 4;
        font-size: 15px;
    }

    /* Der Aufmacher traegt zusaetzlich ein Etikett vor dem Datum */
    .blog-overview .blog-overview-preview-item:first-child .blog-preview-author::before {
        content: "AUFMACHER";
        display: inline-block;
        margin-right: 10px;
        padding: 3px 8px;
        background: var(--fsb-lila);
        color: #ffffff;
        font-family: "FS Body", "FS Text", Arial, sans-serif;
        font-weight: 700;
        font-size: 10px;
        letter-spacing: .16em;
    }
}

/* ---------- B1.6  Blaetterleiste unten ---------- */

.blog-overview .pagination-wrapper {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--fsb-haar);
}

/* ---------- B1.7  Filterleiste auf dem Handy ----------
   Bootstrap gibt den drei Selects unter 576px je col-12, also drei
   volle Zeilen (~380 px). Gemessen war das nach dem Umbau der
   groesste verbliebene Posten auf dem Weg zum ersten Beitrag.
   Zweispaltig: Sortierung + Monat nebeneinander, Kategorie darunter
   ueber die volle Breite. */

@media (max-width: 575.98px) {
    .blog-overview .blog-overview-main {
        padding: 10px;
        margin: 18px 0 24px;
    }

    .blog-overview .form-row {
        gap: 8px 8px;
    }

    .blog-overview .form-row > .col {
        flex: 0 0 calc(50% - 4px);
        max-width: calc(50% - 4px);
        padding: 0;
    }

    /* Kategorie (dritter Select) ueber die volle Breite */
    .blog-overview .form-row > .col:nth-child(3) {
        flex-basis: 100%;
        max-width: 100%;
    }

    .blog-overview .blog-overview-main select.custom-select {
        height: 40px;
        font-size: 12px;
        padding: 0 26px 0 10px;
    }
}


/* ============================================================
   SPUR B2 — Beitragsseite im RANDM-Stil
   Auch hier gilt: DOM unangetastet, alles ueber CSS.
   Gescoped auf .blog-details (der Container der Beitragsseite).
   ============================================================ */

.blog-details {
    --fsb-lila:    #830779;
    --fsb-tinte:   #111114;
    --fsb-flaeche: #f6f5f3;
    --fsb-kante:   #d9d9de;
    --fsb-haar:    #e4e4e7;
    --fsb-grau:    #5c5a60;
    --fsb-papier:  #ffffff;
}

/* ---------- B2.1  Artikelkopf ----------
   Vorher: H1 in DM Sans 22,75 px, ZENTRIERT — und damit kleiner als
   die Zwischenueberschriften und ohne jede Verbindung zum Rest des
   Shops. Anders als die Uebersichts-H1 gehoert diese hier NICHT
   fs-pages.css: dessen Regel greift nur auf `#content > .container
   > h1`, hier liegt die H1 aber eine Ebene tiefer in <article>.
   Deshalb baue ich sie nach demselben Muster nach — linksbuendig
   mit kurzem Akzentstrich, wie jede andere Seitenueberschrift. */

.blog-details article > h1 {
    position: relative;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 5.4vw, 46px);
    line-height: 1.06;
    text-align: left;
    color: var(--fsb-tinte);
    margin: 4px 0 16px;
    padding-bottom: 16px;
}

.blog-details article > h1::before {
    content: "FOGSMOKE MAGAZIN";
    display: block;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .2em;
    line-height: 1;
    color: var(--fsb-lila);
    margin: 0 0 12px;
}

.blog-details article > h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    background: var(--fsb-lila);
}

/* ---------- B2.2  Meta-Zeile ----------
   Datum und Kommentarzaehler standen zentriert unter der
   Ueberschrift. Jetzt linksbuendig als ruhige Kopfzeile. Der
   Kommentarknoten bleibt im DOM (itemprop commentCount), wird aber
   nicht mehr gezeigt — es gibt shopweit keine Kommentare. */

.blog-details .author-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--fsb-lila);
    margin: 0 0 26px;
}

.blog-details .author-meta .creation-date {
    margin-right: 0 !important;
}

.blog-details .author-meta a[href*="#comments"] {
    display: none;
}

/* ---------- B2.3  Hero, wenn der Beitrag eins gesetzt hat ---------- */

.blog-details .blog-details-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
    margin: 0 0 30px;
    background: var(--fsb-flaeche);
}

/* ---------- B2.4  Links im Beitragstext ----------
   Die Artikel-Linkfarbe war ein Blau (#185fa5) und steckte inline im
   Inhalt; mit der C2-Migration ist sie raus. Damit Links nicht auf
   die Theme-Farbe zurueckfallen, hier der Markenton — mit
   Unterstreichung, weil Farbe allein kein Linkmerkmal ist. */

.blog-details-content a:not(.btn):not([class*="badge"]) {
    color: var(--fsb-lila);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.blog-details-content a:not(.btn):not([class*="badge"]):hover {
    color: #c90f88;
}

/* ---------- B2.5  Abschluss "Aehnliche Beitraege" ----------
   Die Karten dort sind dieselbe Komponente wie in der Uebersicht,
   deshalb bekommen sie dieselbe Optik. Wie in B1.4 heisst das:
   cover statt BILDERs globalem contain — begrenzt auf das
   Blog-Karussell, die Startseiten-Story-Wall bleibt unberuehrt. */

.blog-details-hr {
    border: 0;
    border-top: 1px solid var(--fsb-haar);
    margin: 44px 0 26px;
}

.blog-details ~ * .slick-type-news,
.blog-details .slick-type-news {
    margin-bottom: 10px;
}

/* Die Ueberschrift ueber dem Karussell ist ein div.h2 mit dem Text
   "News" — Text bleibt, Optik wird Hausstil. */
.blog-details .h2,
.container.blog-details > .h2 {
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 3.4vw, 30px);
    line-height: 1.1;
    color: var(--fsb-tinte);
    margin: 0 0 20px;
}

.blog-details .slick-type-news .blog-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fsb-papier);
    border: 1px solid var(--fsb-kante);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.blog-details .slick-type-news .blog-preview:hover,
.blog-details .slick-type-news .blog-preview:focus-within {
    border-color: var(--fsb-lila);
    box-shadow: 0 10px 26px rgba(17, 17, 20, .10);
}

.blog-details .slick-type-news .newsbox-image {
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-details .slick-type-news .newsbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-details .slick-type-news .newsbox-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 16px 18px;
}

.blog-details .slick-type-news .badge-custom {
    display: inline-block;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--fsb-lila);
}

.blog-details .slick-type-news .blog-preview-comment {
    display: none;
}

.blog-details .slick-type-news .newsbox-headline {
    margin: 8px 0 8px;
}

.blog-details .slick-type-news .newsbox-headline a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "FS Display", "FS Text", sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.14;
    color: var(--fsb-tinte);
    text-decoration: none;
}

.blog-details .slick-type-news .item-box-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fsb-grau);
    margin: 0;
}

/* ==========================================================================
   B1.7  Aufmacher-Bildflaeche auf 16:9 — Sitzung BLOGBILDER, 27.08.2026
   --------------------------------------------------------------------------
   Grund: Die Aufmacher-Bildflaeche uebernahm ihre Hoehe vom Textblock
   (aspect-ratio auto + min-height 320). Bei 768 px ergab das 1,185:1 —
   bei 16:9-Motiven schnitt object-fit cover dort ein Drittel der BREITE
   weg. Nachgemessen an Beitrag 16: von FOGSMOKE RATGEBER blieb ATGEBER.
   Seit dem 27.08. sind die JTL-News-Bilder nativ 16:9 (1920x1080), also
   muss auch diese eine Flaeche 16:9 sein — alle anderen sind es laengst.
   Additiv ans Dateiende gehaengt, damit der Block B1.5 von BLOG-SEITEN
   unangetastet bleibt; Rueckbau = diesen Abschnitt loeschen.
   ========================================================================== */

/* Tablet hochkant: zweispaltig geht sich nicht aus, ohne das Bild zu
   quetschen — dort stapeln wie eine normale Karte, Bild oben in voller
   Breite. Der Aufmacher bleibt durch Groesse und Etikett erkennbar. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .blog-overview .blog-overview-preview-item:first-child .blog-preview {
        display: flex;
        flex-direction: column;
    }

    .blog-overview .blog-overview-preview-item:first-child .newsbox-image {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }

    .blog-overview .blog-overview-preview-item:first-child .newsbox-body {
        padding: 26px 28px;
    }
}

/* Ab 992 px bleibt es zweispaltig. Das Bild gibt jetzt seine Hoehe selbst
   vor; damit daraus keine Luecke unter dem Bild wird, stehen Bild und Text
   mittig zueinander statt gestreckt. */
@media (min-width: 992px) {
    .blog-overview .blog-overview-preview-item:first-child .blog-preview {
        align-items: center;
    }

    .blog-overview .blog-overview-preview-item:first-child .newsbox-image {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }
}

/* ============================================================
   KANON-ANGLEICHUNG — Radien auf 0
   Sitzung KONTO-NAV, 29.08.2026 (Ansage Yunus: "ja regel das")

   Diese Datei hatte bewusst 3px an Leiste, Karte und Beitragsbild
   gesetzt (BLOG-SEITEN, 21.08.). Der Formensprache-Kanon kennt nur
   Radius 0 — Yunus hat die Angleichung freigegeben, deshalb hier
   nachgezogen statt in fs-kanon.css, damit die Datei kohaerent bleibt.

   Die Bildecken kamen NICHT aus dieser Datei, sondern aus dem
   generierten Bundle myclean_crit.css:
       .square-image .inner img, .newsbox-image img,
       .cart-items-image img, ...   { border-radius: .25rem }
   Das Bundle wird nicht editiert. Hier bewusst NUR auf .blog-overview
   und .blog-details gescoped — die Story Wall der Startseite
   (fs-blog.css, Sitzung BLOG) und der Warenkorb bleiben unberuehrt.
   Spezifitaet (0,2,1) schlaegt die Bundle-Regel (0,1,1), kein !important.
   ============================================================ */

.blog-overview .blog-overview-main,
.blog-overview .blog-overview-main select.custom-select,
.blog-overview .blog-preview,
.blog-overview .newsbox-image img,
.blog-details .blog-details-image,
.blog-details .slick-type-news .blog-preview,
.blog-details .slick-type-news .newsbox-image img {
    border-radius: 0;
}