/* ── Blog ──────────────────────────────────────────────────────
   Nur das, was der Blog zusätzlich braucht. Schrift, Farben und
   Abstände kommen wie überall aus basis.css und marke.css. */

/* Karten in der Übersicht und in den Hinweisblöcken auf den
   Phasenseiten. Dieselbe Karte, zwei Orte. */
.blog-raster{display:grid;grid-template-columns:1fr;gap:clamp(1.1rem,2.5vw,1.6rem);margin-top:1.4rem}
@media(min-width:44rem){ .blog-raster{grid-template-columns:repeat(2,1fr)} }
@media(min-width:68rem){ .blog-raster{grid-template-columns:repeat(3,1fr)} }

.blog-karte{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  border-radius:var(--rund);background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--kante),0 18px 40px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.blog-karte:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--kante-hell),0 26px 56px rgba(0,0,0,.42)}
.blog-karte img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block}
.blog-karte-text{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem}
.blog-karte h3{font-family:var(--titel);font-size:1.0625rem;line-height:1.3;letter-spacing:-.01em;color:var(--creme)}
.blog-karte p{font-size:.9375rem;line-height:1.55;color:var(--text)}
.blog-karte:hover h3{color:var(--licht-hell)}

/* Marken über der Überschrift: Phase, Lesedauer, Datum. */
.blog-marken{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.blog-phase{padding:.2rem .6rem;border-radius:999px;color:var(--auf-licht);
  background-image:var(--verlauf);font-weight:700}
.blog-dauer,.blog-datum{color:var(--grau)}
.blog-mehr{margin-top:1.6rem;text-align:center}

/* Kopf eines Artikels */
.blog-kopf h1{margin-top:.6rem}
.blog-titelbild{width:100%;max-width:38rem;height:auto;margin-top:1.6rem;border-radius:var(--rund);
  box-shadow:0 24px 60px rgba(0,0,0,.42)}

/* Der Artikeltext selbst. Die Breite ist bewusst schmaler als auf den
   Rechtsseiten: etwa 70 Zeichen lesen sich am angenehmsten. */
.blog-text > *{max-width:38rem}
.blog-text .art-lede{font-size:1.0625rem;line-height:1.7;color:var(--creme)}
.blog-text h2{margin-top:2.2rem}
.blog-text h3{margin-top:1.4rem}
.blog-text ul,.blog-text ol{display:grid;gap:.5rem;margin:.2rem 0 .2rem 1.1rem;
  font-size:.9688rem;line-height:1.65;color:var(--text)}
.blog-text li::marker{color:var(--licht-tief)}
.blog-text a{color:var(--licht-hell);text-underline-offset:3px}
.blog-text hr{max-width:38rem;margin:2rem 0;border:0;border-top:1px solid var(--kante)}
.blog-text blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:2px solid var(--licht-tief);font-size:1.0313rem;line-height:1.6;color:var(--creme)}

/* Bilder im Text dürfen breiter stehen als der Text. */
/* Die Bilder standen breiter als der Text und wirkten dadurch
   erschlagend. Jetzt enden sie mit der Textspalte. */
.blog-text figure{max-width:38rem;margin:1.8rem 0}
.blog-text figure img{width:100%;height:auto;border-radius:var(--rund-klein)}
.blog-text figcaption{margin-top:.6rem;font-size:.8438rem;line-height:1.5;color:var(--grau)}

/* Inhaltsverzeichnis */
.art-toc{margin:1.6rem 0;padding:1.1rem 1.3rem;border-radius:var(--rund-klein);
  background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante)}
.art-toc-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--licht-hell)}
.art-toc-label svg{width:1rem;height:1rem}
.art-toc ol{margin:0 0 0 1.1rem;gap:.35rem}
.art-toc a{color:var(--text);text-decoration:none}
.art-toc a:hover{color:var(--licht-hell);text-decoration:underline}

/* Hinweiskasten im Text, dieselbe ruhige Art wie der Rechtshinweis. */
.art-disclaimer{display:flex;gap:.8rem;max-width:38rem;margin:1.6rem 0;
  padding:1rem 1.2rem;border-radius:var(--rund-klein);
  background:rgba(var(--licht-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.18)}
.art-disclaimer-icon{flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;color:var(--licht-hell)}
.art-disclaimer-label{display:block;margin-bottom:.3rem;font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--licht-hell)}
.art-disclaimer p{font-size:.9375rem;line-height:1.6;color:var(--text)}

/* Die Übersicht soll ruhig wirken, deshalb hier kein Abschnittsabstand
   in voller Höhe zwischen den drei Phasen. */
body.blogseite .feld{padding:clamp(2rem,4vw,3rem) 0}