/* KOPIE von websites/konzepte/blog-master/komponenten.css – nicht von Hand ändern (build-blog.mjs). */
/* =============================================================================
   Blog-Master: gemeinsamer Baukasten für VP Finance und 4 Founder  (v2, 12.10.2026)
   Quelle der Wahrheit; die Master-HTMLs werden mit erzeugen.mjs daraus gebaut.
   Grundlage: Best-Practice-Recherche 12.10.2026 (NN/g, Baymard, GOV.UK, WCAG 2.2,
   Google Search Central, web.dev, Butterick) – Regeln siehe LEITFADEN.md.

   Marke:  .bm.bm-marke-vp | .bm.bm-marke-4f      Typ: .bm-typ-ratgeber | -checkliste | -news | -vergleich
   Rangfolge: Grundregeln «.bm p» (0,1,1) < Bausteine «.bm .bm-x» (0,2,0). Marken unterscheiden
   sich NUR in Farben, Schrift, Radius und Schatten (Tokens); Abstände und Masse sind gemeinsam.
   ============================================================================= */

/* ── Marken-Tokens ─────────────────────────────────────────────────────────── */
.bm.bm-marke-vp {
  --bm-akzent: var(--vp-blue, #153e75);            /* Links, Flächenakzente (10.6:1 auf Weiss) */
  --bm-akzent-tief: #0e2a4e;
  --bm-akzent-text: #153e75;                       /* Akzent als Schriftfarbe (≥ 4.5:1) */
  --bm-zier: var(--vp-crimson, #c9a45c);           /* Gold nur für Linien und Flächen, nie für kleine Schrift */
  --bm-zier-text: #7a5c2e;                         /* Gold als Schrift (6.2:1 auf Weiss) */
  --bm-titel: var(--vp-black, #0b1f33);
  --bm-text: #2c333b;
  --bm-leise: #57616c;                             /* 6.3:1 auf Weiss, 5.7:1 auf Crème */
  --bm-flaeche: var(--vp-cream, #f7f4ee);
  --bm-flaeche-akzent: #eef2f7;
  --bm-linie: #d7dbe0;
  --bm-weiss: #ffffff;
  --bm-gut: #1b6e45;   --bm-gut-hell: #e8f4ee;
  --bm-warn: #8a5a12;  --bm-warn-linie: #b7791f; --bm-warn-hell: #fbf3e4;
  --bm-schlecht: #a3201a;
  --bm-dunkel: var(--vp-black, #0b1f33);
  --bm-knopf-grund: var(--vp-crimson, #c9a45c);    /* Gold-Knopf mit dunkler Schrift (7.1:1) */
  --bm-knopf-text: #0b1f33;
  --bm-schrift: var(--font-sans, 'Inter', 'Source Sans 3', system-ui, sans-serif);
  --bm-schrift-titel: var(--font-serif, 'Playfair Display', 'Lora', Georgia, serif);
  --bm-titel-gewicht: 500;
  --bm-titel-sperrung: -0.01em;
  --bm-fs-text: 1.1875rem;                         /* 19 px */
  --bm-radius: 4px;
  --bm-radius-gross: 6px;
  --bm-schatten: none;
}
.bm.bm-marke-4f {
  --bm-akzent: #0874d6;                            /* Markenblau, für Text und Knöpfe abgedunkelt (4.7:1) */
  --bm-akzent-tief: #054a8c;
  --bm-akzent-text: #075fb0;
  --bm-zier: var(--ff-brand, #0a8dff);             /* helles Markenblau nur für Linien, Punkte, Flächen */
  --bm-zier-text: #075fb0;
  --bm-titel: var(--ff-heading, #070723);
  --bm-text: #1b1b1b;
  --bm-leise: #4d4d5c;
  --bm-flaeche: var(--ff-bg-tint, #f4f8ff);
  --bm-flaeche-akzent: #e9f3fd;
  --bm-linie: var(--ff-border, #e4e8f1);
  --bm-weiss: #ffffff;
  --bm-gut: #13704f;   --bm-gut-hell: #e7f6f0;
  --bm-warn: #8a5a12;  --bm-warn-linie: #c98a1e; --bm-warn-hell: #fff6e5;
  --bm-schlecht: #b0281f;
  --bm-dunkel: var(--ff-heading, #070723);
  --bm-knopf-grund: #0874d6;
  --bm-knopf-text: #ffffff;
  --bm-schrift: var(--ff-font, 'Host Grotesk', Inter, system-ui, -apple-system, sans-serif);
  --bm-schrift-titel: var(--ff-font, 'Host Grotesk', Inter, system-ui, -apple-system, sans-serif);
  --bm-titel-gewicht: 800;
  --bm-titel-sperrung: -0.035em;
  --bm-fs-text: 1.125rem;                          /* 18 px */
  --bm-spalte-marke: 33.5em;
  --bm-radius: 0.75rem;
  --bm-radius-gross: 1.1rem;
  --bm-schatten: 0 0 20px 4px rgba(103, 133, 219, 0.08);
}

/* ── Gemeinsame Skala: 5 Schriftgrössen (Klein, Text, H3/Lead, H2, H1) + Text mobil ── */
.bm {
  --bm-fs-klein: 0.875rem;                                   /* 14 px: Meta, Labels, Legenden, Quellen */
  --bm-fs-h3: 1.375rem;                                      /* 22 px: H3, Lead, Kernsatz, Stempel */
  --bm-fs-lead: var(--bm-fs-h3);
  --bm-fs-h2: clamp(1.55rem, 1.25rem + 1.2vw, 2.05rem);      /* 25–33 px */
  --bm-fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);          /* 32–50 px */
  --bm-spalte: 34em;                                         /* Lesebreite: rund 70–74 Zeichen (4F: 33.5em) */
  --bm-abstand: clamp(28px, 4vw, 40px);                      /* Abstand zwischen Blöcken */
}

/* ── Grundgerüst ───────────────────────────────────────────────────────────── */
.bm, .bm *, .bm *::before, .bm *::after { box-sizing: border-box; }
.bm {
  color: var(--bm-text); background: var(--bm-weiss);
  font-family: var(--bm-schrift); font-size: var(--bm-fs-text); line-height: 1.6;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 32px) 64px;
  overflow-wrap: break-word; container-type: inline-size;
  font-variant-numeric: lining-nums;
}
@media (max-width: 600px) { .bm { font-size: calc(var(--bm-fs-text) - 0.0625rem); } }
.bm img { display: block; max-width: 100%; height: auto; }
.bm p { margin: 0 0 1em; max-width: var(--bm-spalte); text-wrap: pretty; hyphens: auto; }
.bm ul, .bm ol { margin: 0 0 1em; padding-left: 1.25em; max-width: var(--bm-spalte); }
.bm li, .bm caption, .bm figcaption { text-wrap: pretty; }
.bm li { margin: 0.3em 0; }
.bm li::marker { color: var(--bm-leise); }
.bm strong { color: var(--bm-titel); font-weight: 650; }
/* :not(.bm-knopf) hebt die Spezifität auf (0,2,1) und schlägt Site-Regeln wie «body.ff-redesign a» */
.bm a:not(.bm-knopf) { color: var(--bm-akzent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bm a:not(.bm-knopf):hover { color: var(--bm-akzent-tief); text-decoration-thickness: 2px; }
.bm :focus-visible { outline: 3px solid var(--bm-akzent); outline-offset: 2px; border-radius: 2px; }
.bm h1, .bm h2, .bm h3 {
  font-family: var(--bm-schrift-titel); font-weight: var(--bm-titel-gewicht); color: var(--bm-titel);
  line-height: 1.18; letter-spacing: var(--bm-titel-sperrung); margin: 0; text-wrap: balance; hyphens: manual;
}
.bm h1 { font-size: var(--bm-fs-h1); line-height: 1.1; }
.bm h2 { font-size: var(--bm-fs-h2); margin: 2.2em 0 0.55em; }
/* doppelte Klasse: schlägt Site-Regeln wie «body.ff-redesign [id]» (0,2,1) sicher */
.bm.bm h2[id], .bm.bm section[id] { scroll-margin-top: 120px; }
@media (max-width: 760px) { .bm.bm h2[id], .bm.bm section[id], .bm.bm .bm-quellen li[id], .bm.bm .bm-hinweis.bm-nachtrag { scroll-margin-top: 200px; } }
.bm h3 { font-size: var(--bm-fs-h3); margin: 1.6em 0 0.4em; font-family: var(--bm-schrift); font-weight: 700; letter-spacing: -0.005em; line-height: 1.25; }
.bm.bm-marke-4f { --bm-spalte: var(--bm-spalte-marke); }
.bm .bm-lesespalte { max-width: var(--bm-spalte); }
.bm .bm-titel-zeile { display: inline; }
@container (min-width: 600px) { .bm .bm-titel-zeile { display: block; } }
.bm .bm-visuell-versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kicker */
.bm .bm-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-zier-text); line-height: 1.3; }
.bm.bm-marke-vp .bm-kicker::before { content: ""; width: 36px; height: 2px; background: var(--bm-zier); flex: none; }
.bm.bm-marke-4f .bm-kicker { padding: 6px 14px; border-radius: 999px; background: var(--bm-flaeche); border: 1px solid var(--bm-linie); }
.bm.bm-marke-4f .bm-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bm-zier); flex: none; }

/* Kopf */
.bm .bm-kopf { margin-bottom: var(--bm-abstand); }
.bm .bm-lead { font-size: var(--bm-fs-lead); line-height: 1.45; color: var(--bm-titel); margin: 20px 0 0; max-width: 54ch; hyphens: manual; }
.bm.bm-marke-vp .bm-lead { font-weight: 300; }
.bm .bm-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 0; padding: 0; list-style: none; font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.4; }
.bm .bm-meta li { margin: 0; }
.bm .bm-meta b { font-weight: 600; color: var(--bm-titel); }
.bm .bm-meta a { color: inherit; }

/* Bild */
.bm .bm-bild { margin: 0 0 var(--bm-abstand); }
.bm .bm-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bm-radius-gross); background: var(--bm-flaeche); }
.bm .bm-bild figcaption { margin-top: 10px; font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.45; }
.bm .bm-bild.bm-bild-frei img { aspect-ratio: auto; object-fit: contain; background: none; }   /* Bilder im Text (Grafiken): nicht zuschneiden */

/* Kurzantwort */
.bm .bm-kurz { margin: 0 0 var(--bm-abstand); padding: clamp(20px, 3vw, 28px); border-radius: var(--bm-radius-gross); background: var(--bm-flaeche); border: 1px solid var(--bm-linie); border-left: 4px solid var(--bm-zier); }
.bm .bm-kurz-titel { margin: 0 0 10px; font-family: var(--bm-schrift); font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-titel); line-height: 1.3; }
.bm .bm-kurz p, .bm .bm-kurz li { font-size: var(--bm-fs-lead); line-height: 1.5; color: var(--bm-titel); }
.bm .bm-kurz p { margin: 0 0 0.6em; max-width: none; }
.bm .bm-kurz ul { margin: 0; padding-left: 1.2em; max-width: none; }
.bm .bm-kurz .bm-kurz-link { font-size: 1em; }
.bm .bm-kurz li { margin: 0.35em 0; }
.bm .bm-kurz > :last-child { margin-bottom: 0; }

/* Inhaltsverzeichnis */
.bm .bm-toc { font-size: var(--bm-fs-klein); line-height: 1.4; }
.bm .bm-toc-titel { margin: 0 0 8px; font-family: var(--bm-schrift); font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-titel); }
.bm .bm-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.bm .bm-toc li { margin: 0; }
.bm .bm-toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-left: 2px solid var(--bm-linie); color: var(--bm-text); text-decoration: none; }
.bm .bm-toc a:hover { color: var(--bm-titel); border-left-color: var(--bm-zier); background: var(--bm-flaeche); }
.bm .bm-toc a[aria-current="true"] { color: var(--bm-titel); font-weight: 700; border-left: 3px solid var(--bm-akzent); }
.bm .bm-toc-klapp { margin: 0 0 var(--bm-abstand); border: 1px solid var(--bm-linie); border-radius: var(--bm-radius); }
.bm .bm-toc-klapp > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 10px 16px; font-weight: 700; color: var(--bm-titel); list-style: none; }
.bm .bm-toc-klapp > summary::-webkit-details-marker { display: none; }
.bm .bm-toc-klapp > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.bm .bm-toc-klapp[open] > summary::after { transform: rotate(-135deg); }
.bm .bm-toc-klapp .bm-toc { padding: 0 8px 10px; }

/* Hinweise: drei Varianten, immer mit Textlabel und Symbol */
.bm .bm-hinweis { margin: var(--bm-abstand) 0; padding: 16px 20px 16px 52px; position: relative; border-left: 4px solid var(--bm-akzent); background: var(--bm-flaeche-akzent); border-radius: 0 var(--bm-radius) var(--bm-radius) 0; }
.bm .bm-hinweis::before { content: "i"; position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bm-akzent); color: #fff; font: 700 var(--bm-fs-klein)/1 Georgia, serif; }
.bm .bm-hinweis.bm-warnung { border-left-color: var(--bm-warn-linie); background: var(--bm-warn-hell); }
.bm .bm-hinweis.bm-warnung::before { content: "!"; background: var(--bm-warn); font-family: var(--bm-schrift); }
.bm .bm-hinweis.bm-tipp { border-left-color: var(--bm-gut); background: var(--bm-gut-hell); }
.bm .bm-hinweis.bm-tipp::before { content: "✓"; background: var(--bm-gut); font-family: var(--bm-schrift); }
/* Nachtrag: nachträgliche Richtigstellung in einem bestehenden Artikel (Originaltext bleibt stehen) */
.bm .bm-hinweis.bm-nachtrag { border-left-color: var(--bm-titel); background: var(--bm-flaeche); border-left-style: double; border-left-width: 5px; scroll-margin-top: 120px; }
.bm .bm-hinweis.bm-nachtrag::before { content: "+"; background: var(--bm-titel); font-family: var(--bm-schrift); font-weight: 800; }
.bm .bm-hinweis.bm-nachtrag p:last-child { margin-bottom: 0; }
.bm .bm-hinweis > :last-child { margin-bottom: 0; }
.bm .bm-hinweis-titel { display: block; font-weight: 700; color: var(--bm-titel); margin-bottom: 4px; }
@container (max-width: 600px) {
  .bm .bm-hinweis { padding: 14px 16px 14px 46px; }
  .bm .bm-hinweis::before { left: 13px; top: 15px; }
}

/* Kernsatz */
.bm .bm-zitat { margin: var(--bm-abstand) 0; padding: 0 0 0 22px; border-left: 3px solid var(--bm-zier); font-family: var(--bm-schrift-titel); font-size: var(--bm-fs-h3); line-height: 1.4; color: var(--bm-titel); }
.bm.bm-marke-vp .bm-zitat { font-style: italic; }
.bm.bm-marke-4f .bm-zitat { font-weight: 700; letter-spacing: -0.015em; }
.bm .bm-zitat p { margin: 0; }

/* Raster, Karten, Etikett */
.bm .bm-etikett { display: inline-block; margin-bottom: 6px; font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-zier-text); line-height: 1.3; }

/* Häkchen- und Kreuzlisten (Form + Text, nie nur Farbe) */
.bm .bm-haken, .bm .bm-kreuz { list-style: none; padding: 0; margin: 0 0 1em; }
.bm .bm-haken li, .bm .bm-kreuz li { position: relative; padding-left: 30px; margin: 0.45em 0; }
.bm .bm-haken li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 14px; height: 8px; border-left: 2.5px solid var(--bm-gut); border-bottom: 2.5px solid var(--bm-gut); transform: rotate(-45deg); }
.bm .bm-kreuz li::before, .bm .bm-kreuz li::after { content: ""; position: absolute; left: 4px; top: 0.78em; width: 14px; height: 2.5px; background: var(--bm-schlecht); transform: rotate(45deg); }
.bm .bm-kreuz li::after { transform: rotate(-45deg); }

/* Tabellen */
.bm .bm-tabelle-huelle { overflow-x: auto; margin: 0 0 var(--bm-abstand); border: 1px solid var(--bm-linie); border-radius: var(--bm-radius);
  /* Scroll-Hinweis: Schatten am Rand, solange seitlich mehr Inhalt folgt */
  background: linear-gradient(to right, var(--bm-weiss) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local, linear-gradient(to left, var(--bm-weiss) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.16), rgba(0,0,0,0)) right / 12px 100% no-repeat scroll, var(--bm-weiss); }
.bm .bm-tabelle-huelle:focus-visible { outline-offset: 3px; }
.bm .bm-tabelle { width: 100%; border-collapse: collapse; font-size: var(--bm-fs-klein); line-height: 1.45; font-variant-numeric: tabular-nums lining-nums; }
.bm .bm-tabelle caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font-weight: 700; color: var(--bm-titel); }
.bm .bm-tabelle caption .bm-caption-zusatz { display: block; font-weight: 400; color: var(--bm-leise); margin-top: 2px; }
.bm .bm-tabelle th, .bm .bm-tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--bm-linie); overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.bm .bm-tabelle thead th { background: var(--bm-flaeche); color: var(--bm-titel); font-weight: 700; vertical-align: bottom; }
.bm .bm-tabelle tbody th { font-weight: 600; color: var(--bm-titel); }
.bm .bm-tabelle .bm-zahl { text-align: right; white-space: nowrap; }
.bm .bm-tabelle thead .bm-zahl { white-space: normal; }
@container (max-width: 560px) { .bm .bm-tabelle th, .bm .bm-tabelle td { padding: 10px 12px; } .bm .bm-tabelle caption { padding: 12px 12px 8px; } }
.bm .bm-tabelle .bm-summe th, .bm .bm-tabelle .bm-summe td { font-weight: 800; color: var(--bm-titel); border-top: 2px solid var(--bm-titel); }
.bm .bm-matrix { table-layout: fixed; min-width: 520px; }
.bm .bm-matrix thead th:first-child { width: 32%; }
@container (max-width: 560px) { .bm .bm-matrix { min-width: 0; } .bm .bm-matrix thead th:first-child { width: 28%; } }
/* Gestapelte Tabelle (Bisher/Neu): unter 560 px je Zeile ein Block mit Beschriftung */
.bm .bm-tabelle td.bm-neu { background: color-mix(in srgb, var(--bm-gut-hell) 60%, transparent); }
.bm .bm-stapel { table-layout: fixed; }
.bm .bm-stapel thead th:nth-child(1) { width: 26%; }
.bm .bm-stapel thead th:nth-child(2) { width: 34%; }
@container (max-width: 560px) {
  .bm .bm-stapel caption { display: block; width: auto; }
  .bm .bm-stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bm .bm-stapel, .bm .bm-stapel tbody, .bm .bm-stapel tr, .bm .bm-stapel tbody th, .bm .bm-stapel td { display: block; width: auto; }
  .bm .bm-stapel tr { border-top: 1px solid var(--bm-linie); padding: 8px 0 10px; }
  .bm .bm-stapel tbody th, .bm .bm-stapel td { border-top: 0; padding: 4px 12px; }
  .bm .bm-stapel td::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; font-weight: 700; color: var(--bm-titel); }
  .bm .bm-stapel td.bm-neu { margin: 2px 8px 0; border-radius: var(--bm-radius); padding: 6px 8px; }
}
/* Bewertung: Form + Text. Voll = gut, halb = mittel, leer = schwach */
.bm .bm-wert { display: inline-flex; align-items: baseline; gap: 8px; }
.bm .bm-wert::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; transform: translateY(1px); }
.bm .bm-wert b { font-weight: 700; }
.bm .bm-wert-gut { color: var(--bm-gut); } .bm .bm-wert-gut::before { background: currentColor; }
.bm .bm-wert-mittel { color: var(--bm-warn); } .bm .bm-wert-mittel::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.bm .bm-wert-schwach { color: var(--bm-schlecht); } .bm .bm-wert-schwach::before { background: transparent; }
.bm .bm-wert-text { display: block; color: var(--bm-text); margin-top: 2px; }
.bm .bm-nw { white-space: nowrap; }
.bm .bm-legende { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-weight: 400; color: var(--bm-leise); }

/* FAQ */
.bm .bm-faq { margin-top: var(--bm-abstand); }
.bm .bm-faq details { border-bottom: 1px solid var(--bm-linie); }
.bm .bm-faq details:first-of-type { border-top: 1px solid var(--bm-linie); }
.bm .bm-faq summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; gap: 16px; padding: 12px 0; font-weight: 650; color: var(--bm-titel); }
.bm .bm-faq summary::-webkit-details-marker { display: none; }
.bm .bm-faq summary::after { content: ""; margin-left: auto; margin-right: 5px; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--bm-akzent); border-bottom: 2px solid var(--bm-akzent); transform: rotate(45deg) translateY(-3px); }
.bm .bm-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.bm .bm-faq details p { margin: 0 0 16px; }

/* Autorenbox */
.bm .bm-autor { display: flex; gap: 16px; align-items: center; margin: var(--bm-abstand) 0 0; padding: 20px 0; border-top: 1px solid var(--bm-linie); border-bottom: 1px solid var(--bm-linie); }
.bm .bm-autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: var(--bm-flaeche); }
.bm .bm-autor-name { font-weight: 700; color: var(--bm-titel); }
.bm .bm-autor-name a { color: inherit; }
.bm .bm-autor-rolle { font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.45; text-wrap: pretty; }

/* Quellen */
.bm .bm-quellen { margin-top: 48px; font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.5; }
.bm .bm-quellen h2 { margin: 0 0 10px; font-family: var(--bm-schrift); font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-titel); }
.bm .bm-quellen ol { padding-left: 1.4em; margin-bottom: 10px; }
.bm .bm-quellen a { color: var(--bm-leise); }
.bm .bm-quellen li { margin-bottom: 4px; }
.bm .bm-quellen li[id] { scroll-margin-top: 120px; border-radius: 3px; }
.bm .bm-quellen li:target { background: var(--bm-flaeche-akzent); }
.bm .bm-quelle-text { display: block; }
.bm .bm-fn { font-size: 0.78em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }

/* Handlungsaufrufe */
.bm .bm-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; font-weight: 700; font-size: 1em; line-height: 1.2; text-wrap: balance; text-decoration: none; text-align: center; border-radius: var(--bm-radius); background: var(--bm-knopf-grund); color: var(--bm-knopf-text); border: 2px solid var(--bm-knopf-grund); }
.bm .bm-knopf:hover { filter: brightness(0.94); color: var(--bm-knopf-text); text-decoration: none; }
.bm .bm-cta { margin: var(--bm-abstand) 0 0; padding: clamp(26px, 4vw, 40px); border-radius: var(--bm-radius-gross); background: var(--bm-dunkel); color: rgba(255, 255, 255, 0.88); display: grid; gap: 16px; justify-items: start; }
.bm.bm-marke-vp .bm-cta { border-top: 3px solid var(--bm-zier); }
.bm .bm-cta h2 { color: #fff; margin: 0; font-size: var(--bm-fs-h2); }
.bm .bm-cta p { margin: 0; max-width: 50ch; }
.bm .bm-cta :focus-visible { outline-color: #fff; }
.bm .bm-zwischen-cta { margin: var(--bm-abstand) 0; padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; border: 1px solid var(--bm-linie); border-radius: var(--bm-radius-gross); }
.bm .bm-zwischen-cta p { margin: 0; flex: 1 1 260px; color: var(--bm-titel); font-weight: 600; }

/* =============================================================================
   Typ A: Ratgeber — Lesespalte, Seitenleiste ab 960 px, sonst einklappbares Verzeichnis
   ============================================================================= */
.bm.bm-typ-ratgeber .bm-kopf { max-width: 820px; }
.bm.bm-typ-ratgeber .bm-rumpf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.bm.bm-typ-ratgeber .bm-seite { display: none; }
.bm.bm-typ-ratgeber .bm-haupt > section:first-of-type h2 { margin-top: 0.4em; }
@container (min-width: 960px) {
  .bm.bm-typ-ratgeber .bm-rumpf { grid-template-columns: minmax(0, 1fr) 250px; gap: 56px; }
  .bm.bm-typ-ratgeber .bm-seite { display: block; }
  .bm.bm-typ-ratgeber .bm-toc-klapp { display: none; }
  .bm.bm-typ-ratgeber .bm-seite-innen { position: sticky; top: 120px; display: grid; gap: 24px; }
}
.bm.bm-typ-ratgeber .bm-seite-cta { padding: 16px 0 0; border-top: 1px solid var(--bm-linie); font-size: var(--bm-fs-klein); }
.bm.bm-typ-ratgeber .bm-seite-cta p { margin: 0 0 10px; color: var(--bm-titel); font-weight: 600; }
.bm.bm-typ-ratgeber .bm-seite-cta .bm-knopf { width: 100%; font-size: var(--bm-fs-klein); padding: 10px 14px; min-height: 44px; }

/* =============================================================================
   Typ B: Checkliste — eine Spalte, Eckdaten, nummerierte Schritte, Abhakliste
   ============================================================================= */
.bm.bm-typ-checkliste { max-width: 860px; }
.bm.bm-typ-checkliste .bm-lesespalte { max-width: none; }
.bm .bm-fahrplan { margin-bottom: var(--bm-abstand) !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; padding: 0; border: 1px solid var(--bm-linie); border-radius: var(--bm-radius-gross); background: var(--bm-weiss); overflow: hidden; }
.bm .bm-fahrplan div { padding: 14px 18px; min-width: 0; box-shadow: -1px 0 0 var(--bm-linie), 0 -1px 0 var(--bm-linie); }
.bm .bm-fahrplan dt { font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.3; }
@container (min-width: 800px) { .bm .bm-fahrplan { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 480px) { .bm .bm-fahrplan { grid-template-columns: minmax(0, 1fr); } }
.bm .bm-fahrplan dd { overflow-wrap: break-word; hyphens: auto; margin: 4px 0 0; font-weight: 700; color: var(--bm-titel); line-height: 1.3; font-variant-numeric: tabular-nums; }
.bm .bm-schritte { list-style: none; padding: 0; margin: 8px 0 var(--bm-abstand); counter-reset: schritt; }
.bm .bm-schritte > li { counter-increment: schritt; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 18px; margin: 0; padding-bottom: 26px; }
.bm .bm-schritte > li::before { content: counter(schritt); grid-row: 1 / span 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bm-weiss); border: 2px solid var(--bm-akzent); color: var(--bm-akzent-text); font-weight: 800; font-size: 1em; font-variant-numeric: tabular-nums lining-nums; position: relative; z-index: 1; }
.bm .bm-schritte > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--bm-linie); }
.bm.bm-marke-vp .bm-schritte > li::before, .bm.bm-marke-vp .bm-jetzt-tun li::before { border-color: var(--bm-zier); color: var(--bm-titel); }
.bm .bm-schritte h3 { margin: 9px 0 4px; font-family: var(--bm-schrift); font-size: var(--bm-fs-h3); font-weight: 700; letter-spacing: -0.005em; line-height: 1.25; }
.bm .bm-schritte p { margin: 0 0 8px; }
.bm .bm-schritt-fakten { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font-size: var(--bm-fs-klein); color: var(--bm-leise); }
.bm .bm-schritt-fakten div { display: flex; gap: 6px; }
.bm .bm-schritt-fakten dt { font-weight: 600; color: var(--bm-titel); }
.bm .bm-schritt-fakten dd { margin: 0; }
.bm .bm-abhaken-box { margin: var(--bm-abstand) 0; padding: clamp(20px, 3vw, 28px); border-radius: var(--bm-radius-gross); background: var(--bm-flaeche); border: 1px solid var(--bm-linie); }
.bm .bm-abhaken-box legend { padding: 0; }
.bm .bm-abhaken-box legend h2 { margin: 0; }
.bm .bm-abhaken-box fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bm .bm-abhaken-box > p, .bm .bm-abhaken-box fieldset > p { margin: 10px 0 14px; }
.bm .bm-abhaken { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bm .bm-abhaken li { margin: 0; }
.bm .bm-abhaken label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bm-linie); border-radius: var(--bm-radius); background: var(--bm-weiss); cursor: pointer; }
.bm .bm-abhaken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bm-akzent); }
.bm .bm-abhaken input:checked + span { color: var(--bm-leise); text-decoration: line-through; }
.bm .bm-abhaken-aktion > :first-child { flex-basis: 100%; }
.bm .bm-abhaken-aktion { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: var(--bm-fs-klein); color: var(--bm-leise); }
.bm .bm-abhaken-aktion button { font: inherit; font-weight: 600; color: var(--bm-akzent-text); background: none; border: 0; padding: 8px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   Typ C: Kurz erklärt — eine Spalte, Stempel «Gültig ab», Bisher/Neu-Tabelle
   ============================================================================= */
.bm.bm-typ-news { max-width: 800px; }
.bm.bm-typ-news .bm-lesespalte { max-width: none; }
.bm.bm-typ-news .bm-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@container (min-width: 640px) { .bm.bm-typ-news .bm-kopf-raster { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.bm .bm-stempel { padding: 14px 18px; text-align: center; border: 2px solid var(--bm-titel); border-radius: var(--bm-radius); background: var(--bm-weiss); display: grid; gap: 2px; justify-items: center; justify-self: start; box-sizing: border-box; min-width: 11rem; max-width: 16rem; }   /* Breite folgt dem Inhalt: Datum nie über den Rahmen */
.bm.bm-marke-vp .bm-stempel { border-color: var(--bm-zier); }
.bm.bm-marke-4f .bm-stempel { border-color: var(--bm-akzent); border-radius: var(--bm-radius-gross); }
.bm .bm-stempel-oben { font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-leise); }
.bm .bm-stempel time { display: block; white-space: nowrap; font-size: var(--bm-fs-h3); font-weight: 700; color: var(--bm-titel); line-height: 1.25; }
.bm .bm-stempel-grundlage { font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.35; margin-top: 4px; }
.bm .bm-status { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: var(--bm-fs-klein); font-weight: 700; background: var(--bm-gut-hell); color: var(--bm-gut); }
.bm .bm-status.bm-status-geplant { background: var(--bm-warn-hell); color: var(--bm-warn); }
.bm .bm-jetzt-tun { max-width: var(--bm-spalte); counter-reset: tun; list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.bm .bm-jetzt-tun li { counter-increment: tun; margin: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.bm .bm-jetzt-tun li::before { content: counter(tun); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--bm-weiss); border: 2px solid var(--bm-akzent); color: var(--bm-akzent-text); font-weight: 800; font-size: 1em; font-variant-numeric: tabular-nums lining-nums; }

/* =============================================================================
   Typ D: Vergleich — Lesespalte zentriert, Optionen und Tabellen in voller Breite
   ============================================================================= */
.bm.bm-typ-vergleich { max-width: 920px; }
.bm.bm-typ-vergleich .bm-lesespalte { max-width: none; }
.bm .bm-gegenueber { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 var(--bm-abstand); position: relative; }
@container (min-width: 720px) { .bm .bm-gegenueber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.bm .bm-option { padding: clamp(20px, 3vw, 28px); border-radius: var(--bm-radius-gross); border: 1px solid var(--bm-linie); border-top: 4px solid var(--bm-akzent); background: var(--bm-weiss); box-shadow: var(--bm-schatten); min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; align-content: start; }
.bm .bm-option-b { border-top-color: var(--bm-zier); }
.bm.bm-marke-4f .bm-option-b { border-top-color: var(--bm-titel); }
.bm .bm-option h3 { margin: 0 0 6px; font-family: var(--bm-schrift-titel); font-weight: var(--bm-titel-gewicht); font-size: var(--bm-fs-h2); letter-spacing: var(--bm-titel-sperrung); line-height: 1.15; }
.bm .bm-option-kurz { color: var(--bm-leise); margin: 0 0 16px; }
.bm .bm-option-label { margin: 14px 0 4px; font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-titel); }
.bm .bm-option ul { margin-bottom: 0; }
.bm .bm-oder { display: grid; justify-self: center; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--bm-dunkel); color: #fff; font-weight: 700; font-size: var(--bm-fs-klein); letter-spacing: 0.02em; }
@container (min-width: 720px) {
  .bm .bm-oder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 60px; height: 60px; border: 5px solid var(--bm-weiss); }
}
.bm .bm-rechnung { margin: 0 0 var(--bm-abstand); }
.bm .bm-rechnung .bm-tabelle-huelle { margin-bottom: 10px; }
.bm .bm-rechnung-fuss { font-size: var(--bm-fs-klein); color: var(--bm-leise); margin: 0; }
.bm .bm-passt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 0 var(--bm-abstand); }
.bm .bm-lesespalte .bm-passt { grid-template-columns: minmax(0, 1fr) !important; }
@container (min-width: 720px) { .bm .bm-passt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bm .bm-passt > div { padding: 20px 22px; border-radius: var(--bm-radius-gross); border: 1px solid var(--bm-linie); min-width: 0; }
.bm .bm-passt h3 { margin: 0 0 8px; font-size: var(--bm-fs-h3); }
.bm .bm-passt ul { margin-bottom: 0; }

/* ── Bewegung und Druck ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .bm *, .bm *::before, .bm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .bm { max-width: none; padding: 0; font-size: 11pt; color: #000; }
  .bm .bm-cta, .bm .bm-zwischen-cta, .bm .bm-seite, .bm .bm-toc-klapp, .bm .bm-abhaken-aktion, .bm .bm-oder, .bm .bm-kurz-link { display: none !important; }
  .bm, .bm *, .bm *::before, .bm *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bm .bm-faq details::details-content { content-visibility: visible; display: contents; }
  .bm .bm-kurz, .bm .bm-hinweis, .bm .bm-abhaken-box, .bm .bm-option, .bm .bm-passt > div { background: none !important; border: 1px solid #999 !important; box-shadow: none !important; }
  .bm .bm-tabelle-huelle, .bm .bm-hinweis, .bm .bm-schritte > li, .bm .bm-abhaken label, .bm .bm-option, .bm figure { break-inside: avoid; }
  .bm .bm-nur-bildschirm, .bm .bm-faq summary::after { display: none !important; }
  .bm .bm-bild img { max-height: 7cm; width: auto; max-width: 100%; }
  .bm h2, .bm h3 { break-after: avoid; }
  .bm .bm-abhaken input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1.5px solid #000; border-radius: 2px; }
  .bm .bm-faq details { display: block; }
  .bm .bm-faq details > p { display: block !important; }
  .bm a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; word-break: break-all; }
  .bm .bm-knopf::after { content: none !important; }
}

/* Kurzantwort mobil in Textgrösse, damit sie im ersten Bildschirm Platz findet */
@container (max-width: 600px) { .bm .bm-kurz p, .bm .bm-kurz li { font-size: 1em; } }

/* Vergleich: nummerierte Frageliste (daten.fragen) */
.bm .bm-fragen { counter-reset: frage; list-style: none; padding: 0; margin: 0 0 var(--bm-abstand); max-width: var(--bm-spalte); }
.bm .bm-fragen li { counter-increment: frage; position: relative; padding: 0 0 0 44px; margin: 0 0 16px; }
.bm .bm-fragen li::before { content: counter(frage); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bm-flaeche-akzent); color: var(--bm-akzent-text); font-weight: 800; font-size: var(--bm-fs-klein); }

/* ── Visuals (21.10.2026): Inhaltsbilder, Bildreihe, Zeitstrahl, Balkengrafik, Ablauf ──────────────
   Grafiken sind HTML statt SVG, damit Schrift auf 390 px gleich gross bleibt wie im Text. */
.bm .bm-bild-inhalt img { aspect-ratio: 3 / 2; }
.bm .bm-bilder-reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 var(--bm-abstand); }
.bm .bm-bilder-reihe .bm-bild { margin: 0; }
@media (min-width: 640px) { .bm .bm-bilder-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bm .bm-schritte > li > .bm-bild { grid-column: 2; margin: 14px 0 0; }
.bm .bm-option > .bm-bild { margin: -4px 0 14px; }
.bm .bm-option:has(> .bm-bild) { grid-row: span 8; }   /* Bild = 8. Zeile im Raster der Optionskarte */
.bm .bm-option > .bm-bild img { aspect-ratio: 3 / 2; border-radius: var(--bm-radius); }

.bm .bm-grafik { container-type: inline-size; margin: 0 0 var(--bm-abstand); padding: clamp(18px, 3vw, 26px); border: 1px solid var(--bm-linie); border-radius: var(--bm-radius-gross); background: var(--bm-weiss); }
.bm .bm-grafik-titel { display: block; margin: 0 0 16px; font-family: var(--bm-schrift); font-size: var(--bm-fs-klein); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bm-titel); line-height: 1.35; }
.bm .bm-grafik figcaption { margin-top: 14px; font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.45; }

/* Zeitstrahl: mobil senkrecht, ab 760 px waagrecht */
.bm .bm-zeitstrahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bm .bm-zeitstrahl > li { position: relative; padding: 0 0 18px 30px; margin: 0; }
.bm .bm-zeitstrahl > li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bm-weiss); border: 3px solid var(--bm-akzent); box-sizing: border-box; }
.bm .bm-zeitstrahl > li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--bm-linie); }
.bm .bm-zeitstrahl > li.bm-zs-ziel::before { background: var(--bm-zier); border-color: var(--bm-zier); }
.bm .bm-zs-datum { display: block; font-size: var(--bm-fs-klein); font-weight: 700; color: var(--bm-akzent-text); font-variant-numeric: tabular-nums lining-nums; }
.bm .bm-zs-was { display: block; font-weight: 700; color: var(--bm-titel); line-height: 1.3; margin: 2px 0; }
.bm .bm-zs-text { display: block; font-size: var(--bm-fs-klein); color: var(--bm-leise); line-height: 1.45; }
/* waagrecht nur mit genug Platz in der Grafik selbst: bis 3 Stationen ab 560 px, mehr ab 820 px */
@container (min-width: 560px) {
  .bm .bm-zeitstrahl:not(:has(> li:nth-child(4))) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
  .bm .bm-zeitstrahl:not(:has(> li:nth-child(4))) > li { padding: 30px 0 0; }
  .bm .bm-zeitstrahl:not(:has(> li:nth-child(4))) > li::before { left: 0; top: 0; }
  .bm .bm-zeitstrahl:not(:has(> li:nth-child(4))) > li:not(:last-child)::after { left: 16px; right: -14px; top: 6px; bottom: auto; width: auto; height: 2px; }
}
@container (min-width: 820px) {
  .bm .bm-zeitstrahl { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
  .bm .bm-zeitstrahl > li { padding: 30px 0 0; }
  .bm .bm-zeitstrahl > li::before { left: 0; top: 0; }
  .bm .bm-zeitstrahl > li:not(:last-child)::after { left: 16px; right: -14px; top: 6px; bottom: auto; width: auto; height: 2px; }
}

/* Balkengrafik: Zeilen mit Beschriftung, Balken (Breite über --w) und Wert; optional zwei Reihen mit Legende */
.bm .bm-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bm .bm-balken > li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bm .bm-balken-name { font-size: var(--bm-fs-klein); font-weight: 600; color: var(--bm-titel); line-height: 1.35; }
.bm .bm-balken-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bm .bm-balken-spur { height: 14px; border-radius: 7px; background: var(--bm-flaeche-akzent); overflow: hidden; }
.bm .bm-balken-wert-balken { display: block; height: 100%; width: var(--w, 0%); border-radius: 7px; background: var(--bm-akzent); }
.bm .bm-balken-reihe.bm-b2 .bm-balken-wert-balken { background: var(--bm-zier); }
.bm .bm-balken-zahl { min-width: 6.5em; text-align: right; font-size: var(--bm-fs-klein); font-weight: 700; color: var(--bm-titel); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.bm .bm-balken-zahl small { font-weight: 500; color: var(--bm-leise); }
.bm .bm-balken-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: var(--bm-fs-klein); color: var(--bm-text); }
.bm .bm-balken-legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--bm-akzent); }
.bm .bm-balken-legende span.bm-b2::before { background: var(--bm-zier); }

/* Ablauf: Kästen mit Pfeilen, mobil untereinander */
.bm .bm-ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.bm .bm-ablauf > li { position: relative; margin: 0; padding: 14px 16px; border-radius: var(--bm-radius); background: var(--bm-flaeche); border-top: 3px solid var(--bm-akzent); }
.bm .bm-ablauf > li.bm-ab-ziel { border-top-color: var(--bm-zier); background: var(--bm-flaeche-akzent); }
.bm .bm-ablauf > li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-weight: 700; color: var(--bm-akzent-text); line-height: 1; font-size: 1.1em; }
.bm .bm-ab-was { display: block; font-weight: 700; color: var(--bm-titel); line-height: 1.3; }
.bm .bm-ab-text { display: block; margin-top: 4px; font-size: var(--bm-fs-klein); color: var(--bm-text); line-height: 1.45; }
@container (min-width: 820px) {
  .bm .bm-ablauf { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 28px; }
  .bm .bm-ablauf > li:not(:last-child)::after { content: "→"; left: auto; right: -22px; top: 50%; bottom: auto; transform: translateY(-50%); }
}
@media print { .bm .bm-grafik { break-inside: avoid; } .bm .bm-bild-inhalt { break-inside: avoid; } }

/* ── Visual-Prüfung 22.10.2026: einheitliche Breiten, Tabellen, Trennung ─────────────────────────────
   Eine Spalte, eine Breite: Text, Listen, Kästen, Bilder und Grafiken stehen in derselben Spalte gleich breit.
   Die Lesebreite begrenzt die Spalte, nicht die einzelnen Absätze (sonst werden kleine Schriften schmaler). */
.bm p, .bm ul, .bm ol, .bm .bm-jetzt-tun, .bm .bm-fragen { max-width: none; }
.bm.bm-typ-ratgeber .bm-kopf { max-width: var(--bm-spalte); }
.bm .bm-lead { max-width: none; }
.bm.bm-typ-vergleich.bm-typ-vergleich { --bm-spalte: 40em; }
.bm.bm-typ-checkliste, .bm.bm-typ-news, .bm.bm-typ-vergleich { max-width: calc(var(--bm-spalte) + 2 * clamp(16px, 4vw, 32px)); }
/* Schrittbilder über die ganze Spaltenbreite (Nummernspalte eingeschlossen) */
.bm .bm-schritte > li > .bm-bild { grid-column: 1 / -1; position: relative; z-index: 1; background: var(--bm-weiss); padding-bottom: 4px; }
@container (max-width: 560px) { .bm .bm-schritt-fakten { flex-direction: column; gap: 2px; } }
/* Bildreihe auch auf dem Handy nebeneinander, damit nicht zwei Bilder untereinander stehen */
.bm .bm-bilder-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bm .bm-bilder-reihe figcaption { font-size: 0.8125rem; }
/* Keine Silbentrennung in Überschriften, Kästen, Zitaten, Aufrufen, Grafiken, Tabellenköpfen und Listenfeldern */
.bm h3, .bm h4, .bm .bm-hinweis, .bm .bm-kurz, .bm .bm-cta, .bm .bm-zwischen-cta, .bm .bm-zitat, .bm .bm-grafik,
.bm .bm-abhaken, .bm .bm-seite, .bm .bm-tabelle th, .bm .bm-fahrplan dd, .bm .bm-option, .bm .bm-passt, .bm .bm-autor { hyphens: manual; }
/* Stempel «Gültig ab» auf dem Handy über die volle Breite */
@container (max-width: 639px) { .bm .bm-stempel { justify-self: stretch; } }
/* Balkengrafik: feste Spalte für die Werte, damit alle Spuren gleich lang und vergleichbar sind */
.bm .bm-balken-reihe { grid-template-columns: minmax(0, 1fr) 7.5em; }
.bm .bm-balken-zahl { min-width: 0; }
/* Automatisch gestapelte Tabellen (ab drei Spalten): auf dem Desktop richten sich die Spalten nach dem Inhalt,
   gestapelt wird nur auf schmalen Bildschirmen. Kopfzellen brechen nie mitten im Wort um. */
.bm .bm-stapel.bm-stapel-auto { table-layout: auto; }
.bm .bm-stapel.bm-stapel-auto thead th { width: auto; }
.bm .bm-tabelle tbody th { overflow-wrap: normal; }
/* Gestapelte Tabellen auf breiten Bildschirmen: Spaltenbreiten aus dem Inhalt, damit lange Wörter in der ersten Spalte Platz haben */
.bm .bm-stapel { table-layout: auto; }
.bm .bm-stapel thead th:nth-child(1), .bm .bm-stapel thead th:nth-child(2) { width: auto; }
/* Runde 2 der Visual-Prüfung: keine automatische Silbentrennung im ganzen Artikel (Yves mag keine Trennstriche;
   lange Wörter fängt die Prüfung «enge» ab). Stempel auf dem Handy volle Breite, Plakette ohne Umbruch. */
.bm.bm, .bm.bm * { hyphens: manual; }
@container (max-width: 639px) { .bm .bm-stempel { justify-self: stretch; max-width: none; } }
.bm .bm-status { white-space: nowrap; }

/* Runde 2 (4F): Summenzeile in gestapelten Tabellen nur einmal als Linie über der ganzen Karte;
   zweite Balkenreihe bei 4 Founder in Navy statt Hellblau (Kontrast zu Lohn-Blau); Nachtrag-Kasten in Markenfarbe */
@container (max-width: 560px) {
  .bm .bm-stapel tr.bm-summe th, .bm .bm-stapel tr.bm-summe td { border-top: 0; }
  .bm .bm-stapel tr.bm-summe { border-top: 2px solid var(--bm-titel); }
}
.bm.bm-marke-4f .bm-balken-reihe.bm-b2 .bm-balken-wert-balken, .bm.bm-marke-4f .bm-balken-legende span.bm-b2::before { background: var(--bm-titel); }
.bm .bm-hinweis.bm-nachtrag { border-left: 4px solid var(--bm-akzent); border-top: 1px solid var(--bm-linie); border-right: 1px solid var(--bm-linie); border-bottom: 1px solid var(--bm-linie); }
/* Listen in Schritten stehen in der Textspalte, nicht in der Nummernspalte */
.bm .bm-schritte > li > ul { grid-column: 2; margin: 10px 0 0; }
/* Runde 3: «Wer gewinnt» in einer Grafik ohne zweiten Rahmen */
.bm .bm-grafik .bm-passt > div { border: 0; padding: 0; background: none; box-shadow: none; }
.bm .bm-schritte > li > :not(.bm-bild) { grid-column: 2; }   /* alles ausser Bildern in der Textspalte */
/* Runde 4: Bildreihen auf dem Handy untereinander (nebeneinander zu klein) */
@container (max-width: 520px) { .bm .bm-bilder-reihe { grid-template-columns: minmax(0, 1fr); } }
.bm .bm-bilder-reihe { gap: 20px; }   /* gleicher Zwischenraum wie zwei Kästen nebeneinander */
/* Bandbreiten in der Balkengrafik (23.10.2026): fester Teil bis zum tieferen Wert, heller Teil bis zum höheren */
.bm .bm-balken-spur { display: flex; }
.bm .bm-balken-wert-balken { flex: none; }
.bm .bm-balken-bereich { display: block; flex: none; height: 100%; width: var(--w2, 0%); background: var(--bm-akzent); opacity: 0.35; border-radius: 0 7px 7px 0; }
.bm .bm-balken-reihe.bm-b2 .bm-balken-bereich { background: var(--bm-zier); }
.bm.bm-marke-4f .bm-balken-reihe.bm-b2 .bm-balken-bereich { background: var(--bm-titel); }
.bm .bm-balken[style*="--bm-wertspalte"] .bm-balken-reihe { grid-template-columns: minmax(0, 1fr) var(--bm-wertspalte); }
/* Balken mit Bandbreite auf dem Handy: Wert unter dem Balken, damit die Spur die volle Breite behält */
@container (max-width: 520px) {
  .bm .bm-balken[style*="--bm-wertspalte"] .bm-balken-reihe { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bm .bm-balken[style*="--bm-wertspalte"] .bm-balken-zahl { text-align: left; }
}