/* ═══════════════════════════════════════════════
   Vamos Speak — Blog (Ola-Pop-Ergänzungen)
   Baut auf styles.css auf; nur Blog-spezifisches.
   ═══════════════════════════════════════════════ */

/* ---------- Blog-Hub ---------- */
.bhero{padding:clamp(44px,6vw,80px) 0 clamp(30px,4vw,48px);text-align:center}
.bhero h1{font-size:clamp(34px,5vw,58px);margin:18px 0 14px}
.bhero .lead{max-width:58ch;margin:0 auto;font-size:clamp(15.5px,1.6vw,18px);
  font-weight:700;color:var(--ink2)}

.bgrid{display:grid;gap:clamp(20px,2.6vw,30px);padding-bottom:clamp(50px,7vw,90px)}
@media(min-width:760px){.bgrid{grid-template-columns:1fr 1fr}}

/* Kategorie-Sektionen im Hub */
.bsec>h2{margin:0 0 clamp(20px,3vw,30px);font-size:clamp(22px,2.8vw,30px)}
.bsec .bgrid{padding-bottom:clamp(34px,4.5vw,56px)}
.bsec:last-of-type .bgrid{padding-bottom:clamp(50px,7vw,90px)}
.bcard h3{font-size:clamp(19px,2.2vw,24px);margin:0;font-family:'Baloo 2';font-weight:800;line-height:1.22}

.bcard{display:flex;flex-direction:column;gap:12px;background:var(--white);
  border:var(--bd);border-radius:20px;padding:clamp(20px,2.6vw,30px);
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  transition:transform .09s,box-shadow .09s}
.bcard:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.bcard:nth-child(odd){transform:rotate(-.4deg)}
.bcard:nth-child(even){transform:rotate(.4deg)}
.bcard:nth-child(odd):hover,.bcard:nth-child(even):hover{transform:translate(2px,2px)}
.bcard .em{font-size:34px;line-height:1}
.bcard h2{font-size:clamp(19px,2.2vw,24px);margin:0}
.bcard p{margin:0;font-weight:600;color:var(--ink2);font-size:15.5px}
.bcard .bmeta{margin-top:auto}

.bmeta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-size:13px;font-weight:800;color:var(--muted)}
.bmeta .btag{background:var(--oceano);border:2px solid var(--ink);border-radius:999px;
  padding:3px 12px;color:var(--ink);box-shadow:2.5px 2.5px 0 var(--ink)}

/* ---------- Artikel ---------- */
.post{padding:clamp(36px,5vw,64px) 0 clamp(44px,6vw,80px)}
.post .wrap{max-width:800px}
.crumbs{font-size:13.5px;font-weight:800;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--ink2)}
.crumbs a:hover{color:var(--coral-deep)}
.post h1{font-size:clamp(30px,4.4vw,48px);margin:10px 0 16px;text-wrap:balance}
.post .bmeta{margin-bottom:clamp(26px,3.5vw,38px)}

.prose{font-size:clamp(16px,1.55vw,17.5px);line-height:1.75}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:clamp(23px,2.8vw,30px);margin:1.7em 0 .55em}
.prose h3{font-size:clamp(18.5px,2vw,22px);margin:1.4em 0 .45em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.35em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--coral);font-weight:900}
.prose a{color:var(--coral-deep);font-weight:800;text-decoration-thickness:2px}
.prose a:hover{color:var(--coral)}
.prose strong{font-weight:900}
.prose em{font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:15px}
.prose th,.prose td{border:2px solid var(--ink);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--sol);font-family:'Baloo 2';font-weight:800}
.prose tr:nth-child(even) td{background:var(--white)}
.table-scroll{overflow-x:auto;margin:0 0 1.3em}
.table-scroll table{margin:0;min-width:560px}

/* Sprech-/Beispiel-Kasten */
.prose .callout{background:var(--white);border:var(--bd);border-radius:16px;
  padding:16px 20px;margin:0 0 1.3em;box-shadow:var(--shadow-sm)}
.prose .callout.so{background:var(--sol)}
.prose .callout.oc{background:var(--oceano)}
.prose .callout p:last-child{margin-bottom:0}

/* Spanisch-Beispielzeile (mit optionalem Play-Button via data-audio) */
.prose .esline{display:flex;align-items:center;gap:12px;background:var(--coral-tint);
  border:2px solid var(--ink);border-radius:12px;padding:9px 14px;margin:0 0 .6em;font-weight:800}
.prose .esline .txt{flex:1;min-width:0}
.prose .esline small{display:block;font-weight:700;color:var(--ink2)}
.prose .esline>.play{flex:0 0 40px;width:40px;height:40px;border-radius:11px;margin-left:auto}
.prose .esline.playing{background:var(--sol)}

/* Hinweis „Beispiele sind abspielbar" unter der Artikel-Meta */
.post .audio-note{display:inline-block;background:var(--oceano);border:2px solid var(--ink);
  border-radius:12px;padding:8px 14px;margin:-14px 0 30px;font-size:14.5px;font-weight:800;
  box-shadow:var(--shadow-sm)}
.post .audio-note a{color:var(--coral-deep)}

/* CTA-Box im/unter dem Artikel */
.post-cta{background:var(--coral);color:#fff;border:var(--bd);border-radius:22px;
  padding:clamp(24px,3.5vw,38px);margin:2.2em 0 0;box-shadow:var(--shadow);
  text-align:center;transform:rotate(-.5deg)}
.post-cta h2{color:#fff;font-size:clamp(22px,2.8vw,30px);margin:0 0 10px}
.post-cta p{font-weight:700;margin:0 0 18px;opacity:.95}
.post-cta .btn{box-shadow:4px 4px 0 rgba(33,36,58,.55)}

/* Weiterlesen */
.more{border-top:2.5px dashed var(--ink);margin-top:2.6em;padding-top:1.6em}
.more h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 .8em}
.more ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.more a{display:block;background:var(--white);border:2.5px solid var(--ink);border-radius:14px;
  padding:12px 16px;font-weight:800;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:transform .09s,box-shadow .09s}
.more a:hover{transform:translate(2px,2px);box-shadow:1.5px 1.5px 0 var(--ink)}