/*
  blog.css - Gestaltung des Gartenblogs                        22.08.2026

  WOZU
  Bis hierher stand das Blog-CSS als <style>-Block INLINE in
  artikel_texte_ausgeben.php. Das war die Ursache mehrerer Punkte aus der
  Analyse (Blog-Todo B4):
    - h1 und h2 auf #4CAF50, ein Material-Gruen. Der Shop fuehrt
      --color-green: #3f7154, das Cortenstahl-Gruen. Es standen also zwei
      verschiedene Gruens auf derselben Seite.
    - 'main div img {float:right}' liess JEDES Bild in JEDEM div nach rechts
      fliessen, ohne Ruecksicht darauf, worum es ging.
    - 'main div {display:inline-block}' brach das Layout, sobald ein Baustein
      ein div mitbrachte.
    - Am Ende eine ueberzaehlige Klammer.

  AN DEN DESIGN-TOKENS AUSGERICHTET
  Alle Farben, Groessen und Abstaende kommen aus den Variablen in
  stylesheet.css. Damit verschiebt sich der Blog mit, wenn dort etwas
  geaendert wird - und es gibt kein zweites Gruen mehr.

  WORAUF ES AUFSETZT - und das ist der entscheidende Punkt:
  Der Artikeltext kommt als FERTIGES HTML aus Artikel.text. Aenderbar ist die
  Umgebung und dieses CSS, nicht der Text. Die 126 Artikel bringen mit:
      h1, h2, h3, p, ul, li, img, strong
      p.image-caption     316 mal im Bestand - Bildunterschriften
      ul.vorteile, li.vorteile_li    12 mal
  DIE AUSZEICHNUNG IST UNGLEICH VERTEILT: Die 66 aelteren Artikel sind reich
  markiert, die 59 nachgezogenen fast gar nicht. Deshalb steht die
  Grundgestaltung auf den BLANKEN Elementen; .image-caption und .vorteile
  verfeinern nur dort, wo sie vorkommen.

  EINGEBUNDEN von includes/template_top.php mit Versionsstempel.
*/


/* ===========================================================================
   Seitenrahmen
   =========================================================================== */

.blog-seite {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px 48px 16px;
}

/* Die Artikelspalte bleibt schmal. Zeilen von 1180 Pixeln Breite liest
   niemand gern - fuer Fliesstext gelten rund 70 Zeichen als angenehm. Die
   Karten-Raster darunter duerfen dagegen die volle Breite nutzen. */
.blog-artikel {
    max-width: 760px;
    margin: 0 auto;
}


/* ===========================================================================
   Artikelkopf
   =========================================================================== */

.blog-artikel-kopf {
    margin-bottom: 28px;
}

.blog-aufmacher {
    margin: 0 0 18px 0;
}

.blog-aufmacher img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* --- Meta-Zeile: Datum, Kategorie, Lesezeit --- */

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 16px;
    font-size: var(--font-size-sm, 13px);
    color: var(--color-secondary, #666);
}

.blog-meta-kategorie {
    padding: 2px 10px;
    background: var(--color-green, #3f7154);
    color: #fff;
    border-radius: 999px;
    font-weight: var(--font-weight-semibold, 600);
}

.blog-meta-lesezeit::before {
    content: "· ";
}


/* ===========================================================================
   Inhaltsverzeichnis
   =========================================================================== */

.blog-toc {
    margin: 0 0 28px 0;
    padding: 16px 20px;
    background: var(--color-bg-secondary, #f9f9f9);
    border-left: 3px solid var(--color-green, #3f7154);
    border-radius: 0 6px 6px 0;
}

.blog-toc-titel {
    margin: 0 0 8px 0;
    font-size: var(--font-size-md, 16px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #333);
}

.blog-toc ol {
    margin: 0;
    padding-left: 20px;
}

.blog-toc li {
    margin-bottom: 4px;
    font-size: var(--font-size-base, 15px);
}

.blog-toc a {
    color: var(--color-primary, #333);
    text-decoration: none;
}

.blog-toc a:hover {
    color: var(--color-green, #3f7154);
    text-decoration: underline;
}

/* Beim Sprung darf die Ueberschrift nicht unter dem Seitenkopf verschwinden. */
.blog-artikel-text h2[id] {
    scroll-margin-top: 90px;
}


/* ===========================================================================
   Der Artikeltext
   =========================================================================== */

.blog-artikel-text {
    font-size: var(--font-size-md, 16px);
    line-height: 1.7;
    color: var(--color-primary, #333);
}

/* Die h1 steht IM Artikeltext, nicht davor - so kommt sie aus der Datenbank. */
.blog-artikel-text h1 {
    margin: 0 0 20px 0;
    font-size: var(--font-size-3xl, 32px);
    line-height: 1.25;
    color: var(--color-primary, #333);
}

.blog-artikel-text h2 {
    margin: 36px 0 12px 0;
    padding-top: 8px;
    font-size: var(--font-size-xl, 22px);
    line-height: 1.3;
    color: var(--color-primary, #333);
    border-top: 1px solid var(--color-border-light, #e0e0e0);
}

.blog-artikel-text h3 {
    margin: 24px 0 8px 0;
    font-size: var(--font-size-lg, 18px);
    color: var(--color-green, #3f7154);
}

.blog-artikel-text p {
    margin: 0 0 16px 0;
}

.blog-artikel-text ul,
.blog-artikel-text ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.blog-artikel-text li {
    margin-bottom: 6px;
}

.blog-artikel-text a {
    color: var(--color-green, #3f7154);
    text-decoration: underline;
}

/* KEIN float mehr. Vorher liess 'main div img {float:right}' jedes Bild nach
   rechts fliessen - auch die, die den Abschnitt eroeffnen sollten. */
.blog-artikel-text img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 24px 0 8px 0;
    border-radius: 8px;
}

/* 316 Bildunterschriften im Bestand. Ohne eigene Regel staenden sie als
   gewoehnliche Absaetze da und waeren vom Fliesstext nicht zu unterscheiden. */
.blog-artikel-text .image-caption {
    margin: 0 0 24px 0;
    font-size: var(--font-size-sm, 13px);
    font-style: italic;
    color: var(--color-secondary, #666);
    text-align: center;
}

/* Nur 12 Vorkommen - eine kleine Hervorhebung genuegt. */
.blog-artikel-text .vorteile {
    padding: 14px 18px 14px 40px;
    background: var(--color-bg-secondary, #f9f9f9);
    border-radius: 6px;
}

.blog-artikel-text .vorteile_li::marker {
    color: var(--color-green, #3f7154);
}


/* ===========================================================================
   Kategorie-Reiter
   =========================================================================== */

.blog-reiter-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px 0;
}

.blog-reiter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    background: var(--color-bg-secondary, #f9f9f9);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    color: var(--color-primary, #333);
    font-size: var(--font-size-base, 15px);
    text-decoration: none;
}

.blog-reiter:hover {
    background: var(--color-bg-hover, #f5f5f5);
    border-color: var(--color-green, #3f7154);
}

.blog-reiter-aktiv {
    background: var(--color-green, #3f7154);
    border-color: var(--color-green, #3f7154);
    color: #fff;
}

.blog-reiter-anzahl {
    font-size: var(--font-size-xs, 12px);
    opacity: 0.7;
}


/* ===========================================================================
   Karten und Raster
   =========================================================================== */

.blog-abschnitt {
    margin: 40px 0;
}

.blog-abschnitt-titel {
    margin: 0 0 18px 0;
    font-size: var(--font-size-xl, 22px);
    color: var(--color-primary, #333);
}

/* auto-fit statt fester Spaltenzahl: Das Raster passt sich der Breite an,
   ohne dass es je Groesse eine eigene Regel braucht. */
.blog-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
}

.blog-karte {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-main, #fff);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
}

.blog-karte:hover {
    box-shadow: var(--shadow-sm, 0 2px 5px rgba(0, 0, 0, 0.1));
    border-color: var(--color-green, #3f7154);
}

.blog-karte-bild {
    position: relative;
    display: block;
    /* Feste Bildhoehe, damit die Karten in einer Reihe gleich hoch beginnen -
       die Bilder im Bestand haben sehr verschiedene Seitenverhaeltnisse. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-secondary, #f9f9f9);
}

.blog-karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-karte-kategorie {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 3px 10px;
    background: rgba(63, 113, 84, 0.92);
    color: #fff;
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-semibold, 600);
    border-radius: 999px;
}

.blog-karte-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px 16px;
}

.blog-karte-datum {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-secondary, #666);
}

.blog-karte-text h3 {
    margin: 4px 0 8px 0;
    font-size: var(--font-size-lg, 18px);
    line-height: 1.35;
}

.blog-karte-text h3 a {
    color: var(--color-primary, #333);
    text-decoration: none;
}

.blog-karte-text h3 a:hover {
    color: var(--color-green, #3f7154);
}

.blog-karte-anriss {
    flex: 1;
    margin: 0 0 12px 0;
    font-size: var(--font-size-base, 15px);
    line-height: 1.55;
    color: var(--color-secondary, #666);

    /* Drei Zeilen, dann Auslassungszeichen. Die Anrisse sind bis zu 300
       Zeichen lang und wuerden die Karten sonst ungleich hoch machen. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-karte-mehr {
    align-self: flex-start;
    color: var(--color-green, #3f7154);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 15px);
    text-decoration: none;
}

.blog-karte-mehr::after {
    content: " →";
}

.blog-karte-mehr:hover {
    text-decoration: underline;
}


/* ===========================================================================
   Meistgelesen
   =========================================================================== */

.blog-beliebt {
    max-width: 760px;
    margin: 40px auto;
    padding: 20px 22px;
    background: var(--color-bg-secondary, #f9f9f9);
    border-radius: 8px;
}

.blog-beliebt ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-beliebt li + li {
    border-top: 1px solid var(--color-border-light, #e0e0e0);
}

.blog-beliebt a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    color: var(--color-primary, #333);
    text-decoration: none;
}

.blog-beliebt a:hover {
    color: var(--color-green, #3f7154);
}

.blog-beliebt img {
    width: 76px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.blog-beliebt span {
    font-size: var(--font-size-base, 15px);
    line-height: 1.4;
}


/* ===========================================================================
   Uebersichtsseite
   =========================================================================== */

.blog-einleitung {
    max-width: 760px;
    margin: 0 auto 32px auto;
}

.blog-einleitung h1 {
    margin: 0 0 14px 0;
    font-size: var(--font-size-3xl, 32px);
    line-height: 1.25;
}

.blog-einleitung p {
    margin: 0 0 12px 0;
    font-size: var(--font-size-md, 16px);
    line-height: 1.7;
    color: var(--color-secondary, #666);
}


/* --- Brotkrume auf Kategorie- und Schlagwortseiten ----------------------- */

/* Bisher hatte der Blog gar keine Brotkrumen - die Kategorieseiten des Shops
   fuehren sie, der Blog nicht (Blog-Todo B4, Punkt 2). */
.blog-brotkrume {
    margin: 0 0 8px 0;
    font-size: var(--font-size-sm, 13px);
    color: var(--color-secondary, #666);
}

.blog-brotkrume a {
    color: var(--color-secondary, #666);
}

.blog-brotkrume a:hover {
    color: var(--color-green, #3f7154);
}


/* --- Verweis auf die vollstaendige Kategorie ----------------------------- */

.blog-mehr-zum-thema {
    display: inline-block;
    margin-top: 14px;
    color: var(--color-green, #3f7154);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 15px);
    text-decoration: none;
}

.blog-mehr-zum-thema::after {
    content: " →";
}

.blog-mehr-zum-thema:hover {
    text-decoration: underline;
}


/* ===========================================================================
   Schlagwortwolke
   =========================================================================== */

.blog-wolke {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Bewusst alle gleich gross. Die uebliche Wolke skaliert die Schrift nach
   Haeufigkeit - das liest sich unruhig und sagt wenig, wenn die Abstaende
   klein sind. Hier zaehlt, dass die Begriffe ueberhaupt anklickbar sind. */
.blog-schlagwort {
    padding: 5px 12px;
    background: var(--color-bg-secondary, #f9f9f9);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    color: var(--color-secondary, #666);
    font-size: var(--font-size-sm, 13px);
    text-decoration: none;
}

.blog-schlagwort:hover {
    background: var(--color-green, #3f7154);
    border-color: var(--color-green, #3f7154);
    color: #fff;
}


/* ===========================================================================
   Produktliste unter dem Artikel
   =========================================================================== */

.blog-produkte {
    margin: 40px 0;
}


/* ===========================================================================
   Schmale Bildschirme
   =========================================================================== */

@media (max-width: 640px) {

    .blog-seite {
        padding: 0 12px 32px 12px;
    }

    .blog-artikel-text h1,
    .blog-einleitung h1 {
        font-size: var(--font-size-2xl, 28px);
    }

    .blog-artikel-text h2 {
        margin-top: 28px;
        font-size: var(--font-size-lg, 18px);
    }

    /* Ein Raster mit 270-Pixel-Spalten wuerde auf schmalen Geraeten
       waagerecht ueberstehen. */
    .blog-raster {
        grid-template-columns: 1fr;
    }

    .blog-beliebt {
        padding: 16px;
    }
}