/* FlightRoom Blog — erzeugt nach /blog/blog.css.
   Tokens, Kopf- und Fußzeile stammen aus den Marketingseiten, damit der Blog
   Teil derselben Website bleibt. Darunter das Blog-eigene Layout. */

:root{
  --teal:#0D9488;
  --teal-hover:#0B7F75;
  --teal-700:#0F766E;
  --teal-50:#F0FDFA;
  --navy:#0B1B34;
  --body:#475569;
  --muted:#64748B;
  --line:#E7ECF3;
  --line-soft:#EFF2F7;
  --bg:#F8FAFC;

  --max:1320px;
  --gutter:24px;
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --shadow-sm:0 1px 2px rgba(11,27,52,.04);
  --shadow:0 10px 30px -18px rgba(11,27,52,.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#fff; color:var(--body);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; color:var(--navy); letter-spacing:-0.02em; line-height:1.2; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(100% - (2 * var(--gutter)), var(--max)); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-0.01em;
  padding:14px 24px; border-radius:var(--r-sm); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.btn:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 8px 20px -12px rgba(13,148,136,.9); }
.btn-primary:hover{ background:var(--teal-hover); transform:translateY(-1px); }
.btn-sm{ font-size:14px; padding:11px 18px; }

/* ---------------- Header ---------------- */
.site-header{ position:sticky; top:0; z-index:60; background:#fff; transition:background-color .25s ease, box-shadow .25s ease; }
.site-header.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 rgba(11,27,52,.07), 0 8px 24px -20px rgba(11,27,52,.5);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:76px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.logo .mark{ width:34px; height:26px; color:var(--teal); }
.logo .word{ font-size:19px; font-weight:800; color:var(--navy); letter-spacing:.055em; line-height:1; }
.mainnav{ display:flex; align-items:center; gap:28px; margin-inline:auto; }
.mainnav a{ font-size:15px; font-weight:600; color:var(--navy); text-decoration:none; transition:color .18s ease; }
.mainnav a:hover{ color:var(--teal-700); }
.mainnav a[aria-current="page"]{ color:var(--teal-700); }
.header-actions{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  align-items:center; justify-content:center;
  background:#fff; border:1px solid #DDE4EE; border-radius:10px; cursor:pointer; color:var(--navy);
}
.burger svg{ width:20px; height:20px; }
.mobilenav{ display:none; padding:8px 0 20px; }
.mobilenav.open{ display:block; }
.mobilenav-inner{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:10px; box-shadow:var(--shadow); }
.mobilenav a{ display:block; padding:12px 14px; border-radius:10px; font-size:15.5px; font-weight:600; color:var(--navy); text-decoration:none; }
.mobilenav a:hover{ background:var(--teal-50); color:var(--teal-700); }
.mobilenav .btn{ width:100%; margin-top:8px; }

/* ---------------- Sprachumschalter ---------------- */
.langswitch{
  display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  background:#F1F4F9; border:1px solid #DDE4EE; border-radius:999px; padding:3px;
}
.langswitch a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; padding:4px 9px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--muted); text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.langswitch a:hover{ color:var(--navy); }
.langswitch a[aria-current]{ background:#fff; color:var(--navy); box-shadow:0 1px 2px rgba(11,27,52,.10); }
.mobilenav .langswitch{ margin:10px 4px 4px; }

/* ---------------- Blog-Kopf ---------------- */
.bwrap{ padding:34px 0 70px; }
.bhead{ max-width:640px; }
.beyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
}
.beyebrow a{ text-decoration:none; }
.bhead h1{
  margin-top:14px; font-size:clamp(28px, 2.8vw, 40px); font-weight:800;
  line-height:1.14; letter-spacing:-0.034em;
}
.blead{ margin-top:14px; font-size:16.5px; line-height:1.6; color:#5A6880; }

/* ---------------- Suche und Themen-Chips ---------------- */
.bfilters{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; }
.bsearch{ position:relative; flex:0 1 340px; display:block; }
.bsearch svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:#94A3B8; pointer-events:none;
}
.bsearch input{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--navy);
  background:#fff; border:1px solid #D9E1EC; border-radius:999px; padding:12px 16px 12px 42px;
}
.bsearch input::placeholder{ color:#94A3B8; }
.bsearch input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,148,136,.15); }
.bchips{ display:flex; flex-wrap:wrap; gap:8px; }
.bchip{
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; text-decoration:none;
  color:var(--navy); background:#fff; border:1px solid var(--line);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bchip:hover{ border-color:var(--teal); color:var(--teal-700); }
.bchip.is-active{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* ---------------- Layout mit Seitenspalte ---------------- */
.blayout{ margin-top:28px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.bmain{ min-width:0; }

/* ---------------- Hervorgehobener Beitrag ---------------- */
.bfeat{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.bfeat > *{ min-width:0; }
.bfeat-img{ background:var(--bg); }
.bfeat-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4 / 3; }
.bfeat-body{ padding:28px 30px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.bflag{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-700); background:var(--teal-50);
  border:1px solid rgba(13,148,136,.18); border-radius:999px; padding:5px 11px;
}
.bcat{
  margin-top:14px; font-size:11.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal);
}
.bcat a{ text-decoration:none; }
.bfeat-title{ margin-top:10px; font-size:clamp(21px, 1.8vw, 27px); font-weight:800; letter-spacing:-0.03em; }
.bfeat-title a{ text-decoration:none; }
.bfeat-title a:hover{ color:var(--teal-700); }
.bfeat-teaser{ margin-top:12px; font-size:14.5px; line-height:1.65; color:#5A657C; }
.bfeat .bmeta{ margin-top:14px; }
.bfeat .btn{ margin-top:20px; }

/* ---------------- Karten-Raster ---------------- */
.bgrid{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:20px; }
.bgrid > *{ min-width:0; }
.bcard{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bcard[hidden]{ display:none; }
.bcard:hover{ border-color:#D3DEEB; box-shadow:var(--shadow); transform:translateY(-2px); }
.bcard-link{ display:flex; flex-direction:column; flex:1 1 auto; text-decoration:none; }
.bcard-img{ display:block; background:var(--bg); }
.bcard-img img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; }
.bcard-img.is-empty{ aspect-ratio:16 / 10; background:linear-gradient(140deg,#E8F5F3,#EDF2F8); }
.bcard-body{ display:block; padding:16px 18px 0; flex:1 1 auto; }
.bcard-body .bcat{ margin-top:0; display:block; }
.bcard-title{ display:block; margin-top:8px; font-size:15.5px; font-weight:700; color:var(--navy); letter-spacing:-0.02em; line-height:1.35; }
.bcard:hover .bcard-title{ color:var(--teal-700); }
.bcard-teaser{ display:block; margin-top:8px; font-size:13.5px; line-height:1.55; color:#5A657C; }
.bcard .bmeta{ padding:12px 18px 16px; }

.bmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.bmeta .dot{ color:#CBD5E1; }

/* ---------------- Must Read ---------------- */
/* Abzeichen an Karte, Aufmacher und Beitragsseite. */
.bbadge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--navy); border-radius:999px; padding:5px 11px;
}
.bbadge svg{ width:11px; height:11px; flex:0 0 auto; }
/* Auf dem Titelbild sitzt es oben rechts in der Ecke. */
.bcard-img{ position:relative; }
.bcard-img .bbadge{ position:absolute; top:10px; right:10px; box-shadow:0 6px 16px -8px rgba(2,22,45,.9); }

/* --- Kennzeichnung KI-erzeugter Bilder ---
   Unten rechts, damit sie dem Must-Read-Abzeichen oben rechts nicht ins
   Gehege kommt. Der Grund fuer die kraeftige Deckung: Das Abzeichen liegt auf
   einem beliebigen Bild, und Weiss auf halbdurchsichtigem Grund waere ueber
   einem hellen Motiv nicht mehr zu lesen. */
.bai{
  position:absolute; right:9px; bottom:9px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px 3px 6px; border-radius:999px;
  background:rgba(11,27,52,.62); color:rgba(255,255,255,.94);
  font-size:10px; font-weight:600; letter-spacing:.02em; line-height:1;
}
.bai svg{ width:11px; height:11px; flex:0 0 auto; stroke-width:1.9; opacity:.9; }
.bfeat-img, .bhero{ position:relative; }
.bhero .bai{ right:12px; bottom:12px; padding:4px 9px 4px 7px; font-size:11px; }
.bhero .bai svg{ width:12px; height:12px; }
.bflag .bbadge{ margin-left:8px; vertical-align:middle; }
.bbody .bcat{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.bmustread{ margin-top:48px; padding-top:34px; border-top:1px solid var(--line); }
.bmustread-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.bmustread h2{
  display:flex; align-items:center; gap:9px;
  font-size:19px; font-weight:800; letter-spacing:-0.025em;
}
.bmustread h2 svg{ width:17px; height:17px; color:var(--teal); flex:0 0 auto; }
.bmustread-head p{ margin-top:6px; font-size:14px; color:var(--muted); }
.bmustread .bside-more{ margin-top:0; }

.bempty{ margin-top:22px; font-size:14.5px; color:var(--muted); }
.bempty-state{
  margin-top:30px; text-align:center; background:var(--bg);
  border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:50px 30px;
}
.bempty-state h2{ font-size:22px; font-weight:800; letter-spacing:-0.03em; }
.bempty-state p{ margin-top:10px; font-size:15px; color:var(--muted); }
.bempty-state .btn{ margin-top:22px; }

/* ---------------- Seitenspalte ---------------- */
.bside{ display:flex; flex-direction:column; gap:18px; position:sticky; top:96px; }
.bside-box{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 20px 18px; box-shadow:var(--shadow-sm); }
.bside-box h2{ font-size:15px; font-weight:800; letter-spacing:-0.02em; }
.btopics{ margin-top:14px; display:flex; flex-direction:column; gap:2px; }
.btopics a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:9px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:var(--navy);
}
.btopics a:hover{ background:var(--teal-50); color:var(--teal-700); }
.btopics b{ font-size:12.5px; font-weight:700; color:var(--muted); }
.bside-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:13px; font-weight:700; color:var(--teal-700); text-decoration:none;
}
.bside-more svg{ width:14px; height:14px; }
.bmini{ margin-top:14px; display:flex; flex-direction:column; gap:14px; }
.bmini a{ display:flex; gap:11px; text-decoration:none; align-items:flex-start; }
.bmini-img{ flex:0 0 auto; width:56px; height:44px; border-radius:8px; overflow:hidden; background:var(--bg); }
.bmini-img img{ width:100%; height:100%; object-fit:cover; }
.bmini-img.is-empty{ background:linear-gradient(140deg,#E8F5F3,#EDF2F8); }
.bmini-title{ display:block; font-size:13.5px; font-weight:700; color:var(--navy); line-height:1.4; letter-spacing:-0.015em; }
.bmini a:hover .bmini-title{ color:var(--teal-700); }
.bmini time{ display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.bside-cta{
  background:var(--teal-50); border:1px solid rgba(13,148,136,.16);
  border-radius:var(--r); padding:22px 20px 24px;
}
.bside-cta h2{ font-size:16px; font-weight:800; letter-spacing:-0.025em; }
.bside-cta p{ margin-top:8px; font-size:13.5px; line-height:1.55; color:#3E4A61; }
.bside-cta .btn{ margin-top:16px; }

/* ---------------- Beitragsseite ---------------- */
.bpost{ padding:26px 0 70px; }
.bpost .wrap{ width:min(100% - (2 * var(--gutter)), 1120px); }
/* Textspalte bleibt 760px — daran haengt PARAGRAPH_BUDGET in lib/prose.mjs.
   Die Seitenspalte erscheint erst, wenn dafuer wirklich Platz ist. */
.bpost-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:60px; align-items:start; }
.bpost-main{ min-width:0; max-width:760px; }
.bpost-side{ position:sticky; top:96px; }
.bback{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
}
.bback:hover{ color:var(--teal-700); }
.bback svg{ width:16px; height:16px; }
.bhero{ margin:22px 0 0; border-radius:var(--r-lg); overflow:hidden; background:var(--bg); }
.bhero img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.bbody{ margin-top:30px; }
.bbody h1{ margin-top:10px; font-size:clamp(28px, 3vw, 40px); font-weight:800; line-height:1.16; letter-spacing:-0.034em; }
.bbody .bcat{ margin-top:0; }
.bbody .bmeta{ margin-top:14px; }

/* --- Kurzfassung „Auf einen Blick" --- */
.bsummary{
  margin-top:26px; padding:22px 24px; border-radius:var(--r);
  background:var(--teal-50); border:1px solid #CCFBF1;
}
.bsummary-title{
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700);
}
.bsummary-title svg{ width:15px; height:15px; }
.bsummary ul{ margin-top:14px; padding-left:20px; list-style:disc; }
.bsummary li{ margin-top:9px; font-size:15.5px; line-height:1.62; color:#31506B; }
.bsummary li::marker{ color:var(--teal); }

/* --- Inhaltsverzeichnis im Text --- */
.btoc{
  margin-top:24px; padding:20px 24px; border-radius:var(--r);
  border:1px solid var(--line); background:#fff;
}
.btoc-title{
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
}
.btoc-title svg{ width:15px; height:15px; color:var(--teal); }
.btoc ol{ margin-top:12px; padding-left:0; list-style:none; counter-reset:toc; }
.btoc li{ counter-increment:toc; margin-top:9px; }
.btoc li::before{
  content:counter(toc) "."; display:inline-block; width:22px;
  font-size:13px; font-weight:800; color:var(--teal);
}
.btoc a{ font-size:15.5px; font-weight:600; color:var(--navy); text-decoration:none; }
.btoc a:hover{ color:var(--teal-700); text-decoration:underline; text-underline-offset:3px; }

/* --- Mitlaufende Spalte --- */
.btoc-sticky{ padding-left:16px; border-left:2px solid var(--line); }
.btoc-sticky-title{
  font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.btoc-sticky ul{ margin-top:12px; padding:0; list-style:none; }
.btoc-sticky li{ margin-top:2px; }
.btoc-sticky li.lvl-3{ padding-left:14px; }
.btoc-sticky a{
  display:block; padding:6px 10px; margin-left:-10px; border-radius:8px;
  font-size:13.5px; line-height:1.4; font-weight:600; color:var(--muted); text-decoration:none;
  transition:color .16s ease, background .16s ease;
}
.btoc-sticky a:hover{ color:var(--navy); background:var(--bg); }
.btoc-sticky a.is-active{ color:var(--teal-700); background:var(--teal-50); }

/* --- Kasten mitten im Beitrag --- */
.bmidcta{
  margin:34px 0; padding:22px 24px; border-radius:0 var(--r) var(--r) 0;
  border-left:3px solid var(--teal); background:var(--bg);
}
.bmidcta-title{ font-size:16.5px; font-weight:800; color:var(--navy); letter-spacing:-0.02em; }
.bmidcta p + p{ margin-top:7px; }
.bmidcta p:not(.bmidcta-title){ font-size:15px; line-height:1.6; color:#3E4A61; }
.bmidcta .btn{ margin-top:15px; }

/* --- Hervorhebungskasten (callout-Bloecke aus der App) --- */
.bcallout{
  padding:22px 24px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--bg);
}
.bcallout-title{ font-size:16.5px; font-weight:800; color:var(--navy); letter-spacing:-0.02em; }
.bcallout > * + *{ margin-top:11px; }

.bprose{ margin-top:26px; font-size:17px; line-height:1.75; color:#3E4A61; }
.bprose > * + *{ margin-top:20px; }
.bprose h2{
  margin-top:46px; padding-top:26px; border-top:1px solid var(--line-soft);
  font-size:26px; font-weight:800; letter-spacing:-0.03em; scroll-margin-top:88px;
}
.bprose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
/* Einstiegsabsatz groesser — der Rest bleibt bei 17px, sonst kippt das
   Zeichen-Budget aus lib/prose.mjs. */
.bprose > p:first-of-type{ font-size:18.5px; line-height:1.68; color:#31506B; }
.bprose h3{ margin-top:30px; scroll-margin-top:88px; font-size:19px; font-weight:700; letter-spacing:-0.025em; }
/* :not(.btn) ist Absicht: Der Zwischen-CTA steht mitten im Fliesstext, und
   ".bprose a" wuerde sonst die weisse Schrift von ".btn-primary" schlagen
   (0,1,1 gegen 0,1,0) — teal auf teal. */
.bprose a:not(.btn){
  color:var(--teal-700); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(15,118,110,.42); transition:color .18s ease, text-decoration-color .18s ease;
}
.bprose a:not(.btn):hover{ color:var(--teal-hover); text-decoration-color:currentColor; }
.bprose strong{ color:var(--navy); font-weight:700; }
.bprose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.88em; background:var(--teal-50); color:var(--teal-700);
  padding:2px 6px; border-radius:6px;
}
.bprose ul,.bprose ol{ padding-left:22px; }
.bprose ul{ list-style:disc; }
.bprose ol{ list-style:none; padding-left:0; counter-reset:step; }
.bprose ol > li{ counter-increment:step; position:relative; padding-left:44px; }
.bprose ol > li::before{
  content:counter(step) "."; position:absolute; left:0; top:-1px;
  font-size:20px; font-weight:800; color:var(--teal); letter-spacing:-0.02em;
}
.bprose li{ margin-top:8px; }
.bprose li::marker{ color:var(--teal); }
/* --- Tabellen ---
   Der Rahmen scrollt, nicht die Seite: Eine breite Tabelle wuerde auf dem
   Handy sonst abgeschnitten. */
.btable{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); }
.btable:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.bprose table{ width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.55; }
.bprose caption{ caption-side:bottom; padding:12px 16px; font-size:13px; color:var(--muted); text-align:left; }
.bprose thead th{
  padding:12px 16px; text-align:left; vertical-align:bottom; white-space:nowrap;
  background:var(--bg); color:var(--navy); font-weight:800; font-size:13px;
  letter-spacing:.03em; text-transform:uppercase; border-bottom:1px solid var(--line);
}
.bprose tbody td{ padding:12px 16px; vertical-align:top; border-top:1px solid var(--line-soft); }
.bprose tbody tr:first-child td{ border-top:0; }

/* --- Rahmen um ein Bild im Fliesstext ---
   Traegt das Eckabzeichen fuer KI-erzeugte Bilder. Er sitzt um das Bild und
   nicht um die figure, damit das Abzeichen auf dem Bild liegt und nicht unter
   der Bildunterschrift. */
.bprose .bfig-img{ position:relative; display:block; border-radius:var(--r); overflow:hidden; }

/* --- Schlagworte --- */
.btags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.btags svg{ width:15px; height:15px; color:var(--teal); flex:0 0 auto; }
.btags a{
  display:inline-block; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:12.5px; font-weight:600; color:var(--navy); text-decoration:none;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.btags a:hover{ border-color:var(--teal); color:var(--teal-700); background:var(--teal-50); }
.btags.is-compact{ margin-top:10px; gap:6px; }
.btags.is-compact a{ padding:3px 9px; font-size:11.5px; font-weight:600; color:var(--muted); }
.bbody .btags{ margin-top:18px; }

.bprose blockquote{
  margin:28px 0; padding:18px 22px;
  background:var(--teal-50); border-left:3px solid var(--teal); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:17.5px; line-height:1.65; color:var(--navy); font-weight:600;
}
.bprose figure{ margin:28px 0; }
.bprose figure img{ width:100%; height:auto; border-radius:var(--r); }
.bprose figcaption{ margin-top:9px; font-size:13px; color:var(--muted); }

.bmore{ margin-top:56px; }
.bmore h2{ font-size:19px; font-weight:800; letter-spacing:-0.025em; }
.bmore .bgrid{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }

.bpost-cta{
  margin-top:50px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--teal-50); border:1px solid rgba(13,148,136,.16);
  border-radius:var(--r-lg); padding:26px 30px;
}
.bpost-cta h2{ font-size:18px; font-weight:800; letter-spacing:-0.025em; }
.bpost-cta p{ margin-top:6px; font-size:14px; color:#3E4A61; }
.bpost-cta .btn{ margin-left:auto; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--line); background:#fff; }
.footer-grid{ display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding:44px 0 32px; }
.footer-brand p{ margin-top:12px; font-size:13.5px; color:var(--muted); max-width:34ch; }
.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.footer-col a{ display:block; font-size:14px; color:var(--navy); text-decoration:none; margin-bottom:10px; font-weight:500; }
.footer-col a:hover{ color:var(--teal-700); }
.footer-bottom{
  border-top:1px solid var(--line); padding:20px 0 28px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted);
}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
  .bpost-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .bpost-side{ display:none; }
  .bpost-main{ margin:0 auto; }
}
@media (max-width:1100px){
  .blayout{ grid-template-columns:1fr; }
  .bside{ position:static; }
  .bside-box, .bside-cta{ max-width:none; }
}
@media (max-width:1080px){
  .mainnav, .header-actions{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:820px){
  .bfeat{ grid-template-columns:1fr; }
  .bfeat-img img{ aspect-ratio:16 / 9; }
  .bfeat-body{ padding:24px 22px 26px; }
}
@media (max-width:640px){
  :root{ --gutter:18px; }
  .bwrap{ padding:26px 0 56px; }
  .bgrid{ grid-template-columns:1fr; }
  .bsearch{ flex:1 1 100%; }
  .bpost-cta{ padding:22px 20px; }
  .bpost-cta .btn{ margin-left:0; width:100%; }
  .footer-cols{ gap:32px; }
}