/* ==========================================================================
   BLOG — Übersicht und Einzelbeitrag
   Mobile-first. Lesbarkeit vor Effekt: Fließtext bekommt eine begrenzte
   Zeilenlänge, weil lange Zeilen auf großen Bildschirmen ermüdend werden.
   ========================================================================== */

.wrap--text{max-width:720px}

/* ---------- Übersicht ---------- */
.bl-liste{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:680px){ .bl-liste{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .bl-liste{grid-template-columns:repeat(3,1fr)} }

.bl-karte{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bl-karte:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bl-karte__bild{aspect-ratio:16/10;overflow:hidden;background:var(--cream-deep)}
.bl-karte__bild img{width:100%;height:100%;object-fit:cover;display:block}
.bl-karte__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.bl-karte h2{font-size:19px;line-height:1.25;margin:10px 0 8px}
.bl-karte p{font-size:14.8px;color:var(--ink-soft);line-height:1.5;margin-bottom:14px}
.bl-mehr{
  margin-top:auto;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;color:var(--coral-deep);
}
.bl-leer{text-align:center;color:var(--ink-soft);font-family:var(--mono);font-size:14px;padding:40px 0}

.bl-kat{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--violet);background:rgba(140,92,245,.1);
  padding:5px 11px;border-radius:999px;
}

/* ---------- Einzelbeitrag ---------- */
.bl-beitrag{padding:36px 0 64px}
@media(min-width:760px){ .bl-beitrag{padding:52px 0 88px} }
.bl-beitrag h1{
  font-size:clamp(27px,5.4vw,42px);line-height:1.12;
  margin:14px 0 10px;letter-spacing:-.01em;
}
.bl-datum{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-soft);margin-bottom:26px;
}
.bl-titelbild{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.bl-titelbild img{width:100%;height:auto;display:block}

/* Fließtext: großzügiger Zeilenabstand, klare Absatzabstände */
.bl-text{font-size:17.5px;line-height:1.72;color:var(--ink)}
.bl-text p{margin-bottom:22px}
.bl-text h2{font-size:clamp(21px,3.6vw,28px);margin:38px 0 14px;line-height:1.2}
.bl-text h3{font-size:clamp(18px,3vw,22px);margin:30px 0 10px}
.bl-text ul{margin:0 0 22px;padding-left:22px}
.bl-text li{margin-bottom:9px}
.bl-text a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px}
.bl-text strong{font-weight:600}
.bl-text blockquote{
  margin:0 0 22px;padding:16px 20px;
  border-left:4px solid var(--violet);
  background:var(--cream-deep);border-radius:0 12px 12px 0;
  font-style:italic;color:var(--ink-soft);
}
.bl-text img{max-width:100%;height:auto;border-radius:12px;margin:8px 0 22px}

/* ---------- Abschluss-Hinweis auf die Produkte ---------- */
.bl-cta{
  margin-top:48px;padding:28px 24px;
  background:var(--cream-deep);border:1px solid var(--line);border-radius:var(--radius);
}
.bl-cta h2{font-size:21px;margin-bottom:8px}
.bl-cta p{font-size:15.5px;color:var(--ink-soft);margin-bottom:18px}
.bl-cta__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:479px){
  .bl-cta__knoepfe{flex-direction:column}
  .bl-cta__knoepfe .btn{width:100%;justify-content:center}
}