/* Aktuelles / Blog */
section.section{padding:72px 0 96px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:32px}
/* Einzelbeitrag */
.post-full{max-width:820px;margin:0 auto;padding:56px 40px 96px}
.post-hero-img{width:100%;max-height:440px;object-fit:cover;border-radius:4px;margin-bottom:32px}
.post-teaser{font-size:19px;line-height:1.6;color:var(--ink);font-weight:600;margin:0 0 24px}
/* Redaktioneller Inhalt: lange URLs/Wörter muessen brechen statt zu ueberlaufen. */
.post-body{font-size:17px;line-height:1.75;color:var(--ink-soft);overflow-wrap:anywhere}
.post-body p{margin:0 0 16px}
.post-body h2{font-size:24px;margin:32px 0 12px;color:var(--ink)}
.post-body h3{font-size:19px;margin:24px 0 10px;color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 16px;padding-left:24px}
.post-body blockquote{margin:0 0 16px;padding:4px 0 4px 18px;border-left:3px solid var(--brand);color:var(--ink)}
.post-body hr{border:none;border-top:1px solid var(--line);margin:30px 0}
.post-body table{border-collapse:collapse;margin:0 0 16px}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 12px;text-align:left}
/* Bilder im Beitragstext: Lage und Breite kommen als Klasse aus dem
   Live-Editor (assets/js/editor.js) und sehen dort genauso aus. */
.post-body img{max-width:100%;height:auto;border-radius:4px}
.post-body img.bild-mitte{display:block;margin:24px auto;float:none}
.post-body img.bild-links{float:left;margin:6px 26px 16px 0}
.post-body img.bild-rechts{float:right;margin:6px 0 16px 26px}
.post-body img.bild-25{width:25%}
.post-body img.bild-50{width:50%}
.post-body img.bild-75{width:75%}
.post-body img.bild-100{width:100%}
.post-body .ta-mitte{text-align:center}
.post-body .ta-rechts{text-align:right}
/* Überschriften und Trenner setzen unter ein umflossenes Bild, und der
   Beitrag umschließt am Ende alle Floats. */
.post-body h2,.post-body h3,.post-body hr{clear:both}
.post-body::after{content:"";display:block;clear:both}
.post-back{margin-top:40px;font-weight:600}
@media(max-width:900px){.post-full{padding:40px 24px 72px}}
@media(max-width:600px){
  section.section{padding:48px 0 64px}
  .post-grid{gap:22px}
  .post-full{padding:32px 18px 56px}
  .post-hero-img{max-height:260px;margin-bottom:24px}
  .post-teaser{font-size:17px}
  .post-body{font-size:16px}
  .post-body h2{font-size:21px;margin-top:26px}
  .post-body h3{font-size:18px}
  /* Auf dem Handy ist neben einem umflossenen Bild kein Platz für Text. */
  .post-body img.bild-links,.post-body img.bild-rechts{float:none;display:block;margin:20px auto}
  .post-body img.bild-25,.post-body img.bild-50,.post-body img.bild-75{width:100%}
}
@media(max-width:400px){
  section.section{padding:36px 0 48px}
  .post-grid{gap:18px}
  .post-full{padding:24px 12px 42px}
  .post-hero-img{max-height:200px;margin-bottom:18px}
  .post-teaser{font-size:16px}
  .post-body{font-size:15.5px}
  .post-body h2{font-size:19px}
  .post-body h3{font-size:17px}
  .post-body ul,.post-body ol{padding-left:20px}
}