/* bplan-deutschland Design System — Token-Schicht
   Primitives → Semantic Aliases → Components
   Belege je Token siehe Token-Cards im Canvas.
*/

/* ============ SCHRIFTEN ============
   Selbst gehostet statt von fonts.googleapis.com. Zwei Gründe: das fremde
   Stylesheet blockierte das Rendern und zog seinerseits die Schriftdateien von
   fonts.gstatic.com nach — zwei Fremdverbindungen vor dem ersten Bild. Und
   jeder Aufruf trug die IP des Besuchers zu einem Dritten, ohne dass er
   gefragt worden wäre.

   Alle drei sind variable Schriften: eine Datei je Schnittbereich, nicht eine
   je Gewicht. Mitgenommen sind nur `latin` und `latin-ext`; Kyrillisch,
   Griechisch und Vietnamesisch liefert diese Website nicht aus. Die
   unicode-range stammt unverändert von Google, damit der Browser latin-ext nur
   lädt, wenn ein Zeichen daraus wirklich vorkommt.

   `font-display: swap` — lieber sofort in der Systemschrift lesen als auf die
   Auslieferung warten.

   Lizenzen: assets/fonts/LICENSE.txt
*/

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ PRIMITIVES ============ */
:root {
  /* Brand */
  --bp-blue-900: #0F3B6B;          /* primary, gesetzt */
  --bp-blue-800: #1A5290;          /* primary-hover, abgeleitet */
  --bp-blue-700: #2C74B5;          /* link/interaktiv (Destatis) */
  --bp-blue-50:  #F4F7FB;          /* page-tint, GOV.UK-äquivalent */
  --bp-blue-100: #E4ECF5;          /* surface-tint, Borders */

  /* Brand · Flaggen-Akzent-Farben (Logo-Balken, Schwarz-Rot-Gold)
   * RESERVED — ausschließlich für die Logo-Verwendung.
   * NICHT für Error/Warning/Success oder andere Semantik verwenden.
   * Semantik-Tokens liegen unter --bp-red-700 / yellow-600 / green-700
   * und bleiben davon unberührt. */
  --bpd-brand-flag-black: #000000;
  --bpd-brand-flag-red:   #DD0000;
  --bpd-brand-flag-gold:  #FFCE00;

  /* Accents (Bundesregierung-Set) */
  --bp-red-700:    #C0003C;
  --bp-red-50:     #FBEEF1;
  --bp-green-700:  #00854A;
  --bp-green-50:   #E6F2EC;
  --bp-yellow-600: #F7BB3D;
  --bp-yellow-50:  #FEF7E4;

  /* Neutrals (BMWK-Skala, 7 Stufen) */
  --bp-ink:      #111314;          /* body text, Bundesregierung */
  --bp-gray-900: #212121;
  --bp-gray-800: #343434;
  --bp-gray-700: #505050;
  --bp-gray-600: #767674;
  --bp-gray-500: #969696;
  --bp-gray-400: #A7A7A7;
  --bp-gray-300: #D1D2D2;
  --bp-gray-200: #E6E6E6;
  --bp-gray-100: #F1F1F0;
  --bp-paper:    #FFFFFF;

  /* Type — drei Schriften maximal. Zahlen folgen ihrer Textumgebung.
   *   Display / Headings → --bp-font-display (Source Serif 4)
   *   Body / UI / Zahlen → --bp-font-body    (Inter)
   *   Mono (RESERVIERT) → --bp-font-mono     (JetBrains Mono)
   * Mono ist EXKLUSIV für Plan-IDs, Paragrafen-Zitate und technische
   * Codes. Datums-, Flächen- und Kennzahlen-Werte sind Body-Schrift
   * mit tabular-nums (siehe --bpd-numeric / .num / .tabular). */
  --bp-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --bp-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bp-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Numeric token — Pflicht-Wert für JEDE Zahl-Verwendung in Inter.
   * Inter hat tabular-nums als OpenType-Feature, nicht als Default —
   * ohne diesen Token springen die Spaltenbreiten in Tabellen. */
  --bpd-numeric: tabular-nums lining-nums;

  /* Spacing — strikte 5-px-Skala (GOV.UK-Logik) */
  --bp-sp-0: 0px;
  --bp-sp-1: 5px;
  --bp-sp-2: 10px;
  --bp-sp-3: 15px;
  --bp-sp-4: 20px;
  --bp-sp-5: 25px;
  --bp-sp-6: 30px;
  --bp-sp-7: 40px;
  --bp-sp-8: 50px;
  --bp-sp-9: 60px;
  --bp-sp-10: 80px;

  /* Geometry */
  --bp-radius: 2px;
  --bp-radius-pill: 999px;
  --bp-border: 1px solid var(--bp-gray-300);
  --bp-border-strong: 1px solid var(--bp-gray-700);

  /* Type scale (Body fluid 16/17px) */
  --bp-fs-7xl: 56px;
  --bp-fs-6xl: 44px;
  --bp-fs-5xl: 36px;
  /* KPI-Stat-Token — eigener Step für sehr große Zahlen (Hero/Facts),
   * damit --bp-fs-5xl/-6xl als Heading-Tokens unberührt bleiben. */
  --bpd-text-kpi-xl: 56px;
  --bpd-text-kpi-lg: 40px;
  --bp-fs-4xl: 28px;
  --bp-fs-3xl: 22px;
  --bp-fs-2xl: 19px;
  --bp-fs-lg:  17px;
  --bp-fs-md:  16px;
  --bp-fs-sm:  14px;
  --bp-fs-xs:  12px;

  /* Semantic Aliases */
  --color-bg:           var(--bp-paper);
  --color-bg-muted:     var(--bp-blue-50);
  --color-text:         var(--bp-ink);
  --color-text-muted:   var(--bp-gray-700);
  --color-text-meta:    var(--bp-gray-600);
  --color-border:       var(--bp-gray-300);
  --color-border-strong: var(--bp-gray-700);
  --color-brand:        var(--bp-blue-900);
  --color-brand-hover:  var(--bp-blue-800);
  --color-link:         var(--bp-blue-700);
  --color-link-visited: #54319f;

  /* Focus — 2px solid + 4px outline-shadow (GOV.UK-Prinzip, eigene Farbe) */
  --color-focus:        var(--bp-yellow-600);
  --color-focus-shadow: 0 0 0 4px var(--bp-yellow-600);

  /* Content widths */
  --bp-width-container: 1360px;
  --bp-width-prose: 720px;
}

/* ============ A2 · Header- und Footer-Varianten ============ */

/* Logo invertiert auf dunklem Header — Schriftzug/Trenner via currentColor weiß,
 * Flag-Balken bleiben in Bundes-Farben. */

/* Footer-Varianten — hell (gov.uk-Stil) und dunkel (primary-900).
 * Regeln liegen weiter unten beim Footer-Block selbst; das hier setzt
 * nur den globalen Schalter via Root-Attribut. Pro-Instanz-Override
 * läuft über [data-variant] direkt am <footer>. */

/* ============ BASE ============ */
.bp {
  font-family: var(--bp-font-body);
  font-size: var(--bp-fs-md);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "ss01", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bp * { box-sizing: border-box; }

.bp h1, .bp h2, .bp h3, .bp h4 {
  font-family: var(--bp-font-display);
  color: var(--bp-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.bp h1 { font-size: var(--bp-fs-5xl); line-height: 1.1; letter-spacing: -0.02em; }
.bp h2 { font-size: var(--bp-fs-3xl); }
.bp h3 { font-size: var(--bp-fs-2xl); }
.bp h4 { font-size: var(--bp-fs-lg); font-family: var(--bp-font-body); font-weight: 600; letter-spacing: 0; }
.bp p  { margin: 0 0 var(--bp-sp-3) 0; max-width: var(--bp-width-prose); text-wrap: pretty; }
.bp a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.bp a:hover { color: var(--color-brand); text-decoration-thickness: 2px; }
.bp a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: var(--color-focus-shadow); }
.bp ::selection { background: var(--bp-blue-100); }

.bp .mono, .bp [data-mono] {
  font-family: var(--bp-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
  font-size: calc(1em * var(--bp-mono-scale, 1));
}

/* ============ NUMERIC ============
 * Tabular-Nums-Helfer · Pflicht-Klassen für jede Zahl-Verwendung.
 * Inter & Source Serif 4 haben tnum als optionales OpenType-Feature
 * — ohne diese Klasse springen Spaltenbreiten in Tabellen.
 * Verwendung: <span class="num">42.612</span> oder data-numeric. */
.bp .num,
.bp .tabular,
.bp th,
.bp td.num,
.bp [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============ LAYOUT PRIMITIVES ============ */
.bp .container {
  max-width: var(--bp-width-container);
  margin: 0 auto;
  padding-left: var(--bp-sp-5);
  padding-right: var(--bp-sp-5);
}
.bp .prose { max-width: var(--bp-width-prose); }
.bp .stack > * + * { margin-top: var(--bp-sp-4); }
.bp .row { display: flex; gap: var(--bp-sp-3); align-items: center; }

/* Buttons */
.bp .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-sp-2);
  height: 44px;
  padding: 0 var(--bp-sp-4);
  font: 600 var(--bp-fs-md)/1 var(--bp-font-body);
  border: 1px solid transparent;
  border-radius: var(--bp-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.bp .btn--primary { background: var(--color-brand); color: #fff; }
.bp .btn--primary:hover { background: var(--color-brand-hover); }
.bp .btn--secondary { background: #fff; color: var(--color-brand); border-color: var(--color-border-strong); }
.bp .btn--secondary:hover { background: var(--bp-gray-100); }
.bp .btn--ghost { background: transparent; color: var(--color-brand); }
.bp .btn--ghost:hover { background: var(--bp-blue-100); }

/* Inputs */
.bp .input {
  height: 44px;
  padding: 0 var(--bp-sp-3);
  border: 2px solid var(--bp-gray-700);
  border-radius: var(--bp-radius);
  font: 400 var(--bp-fs-md)/1 var(--bp-font-body);
  background: #fff;
  color: var(--color-text);
  width: 100%;
}
.bp .input:focus { outline: none; border-color: var(--bp-ink); box-shadow: 0 0 0 3px var(--color-focus); }
.bp label { display: block; font-weight: 600; margin-bottom: var(--bp-sp-1); font-size: var(--bp-fs-md); }

/* Stand-Badge */
.bp .stand-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bp-sp-2);
  font-size: var(--bp-fs-sm);
  color: var(--color-text-meta);
  font-family: var(--bp-font-body);
  line-height: 1.4;
}
.bp .stand-badge__date { font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; color: var(--bp-gray-800); font-weight: 500; }
.bp .stand-badge__sep { color: var(--bp-gray-400); }
.bp .stand-badge__src { font-style: italic; }

/* Notice boxes — 4px left-border (GOV.UK Inset Text Pattern). Optionaler Icon-Slot. */
.bp .notice {
  border-left: 4px solid var(--color-brand);
  background: var(--bp-blue-50);
  padding: var(--bp-sp-3) var(--bp-sp-4);
  border-radius: 0 var(--bp-radius) var(--bp-radius) 0;
  display: grid; grid-template-columns: 1fr; gap: var(--bp-sp-3);
  align-items: start;
}
/* Der Icon-Slot bekommt seine eigene Spalte nur dort, wo ein Icon steht. Stand
   ..auto 1fr.. fest, rutschte der Text in die auto-Spalte und blieb auf seiner
   eigenen Breite stehen — bei kurzen Hinweisen sichtbar als halbe Kastenbreite.
   Gefunden am 20.09.2026 an Hamburgs Erreichbarkeitshinweis, 103 Seiten. */
.bp .notice:has(> .notice__icon) { grid-template-columns: auto 1fr; }
.bp .notice--no-icon { grid-template-columns: 1fr; }
.bp .notice__icon { color: var(--color-brand); width: 22px; height: 22px; margin-top: 2px; }
.bp .notice__icon svg { display: block; }
.bp .notice--info { border-color: var(--color-brand); background: var(--bp-blue-50); }
.bp .notice--info .notice__icon { color: var(--color-brand); }
.bp .notice--warn { border-color: var(--bp-yellow-600); background: var(--bp-yellow-50); }
.bp .notice--warn .notice__icon { color: #a8780f; }
.bp .notice--success { border-color: var(--bp-green-700); background: var(--bp-green-50); }
.bp .notice--success .notice__icon { color: var(--bp-green-700); }
.bp .notice--deadline { border-color: var(--bp-red-700); background: var(--bp-red-50); }
.bp .notice--deadline .notice__icon { color: var(--bp-red-700); }
.bp .notice--tip { border-color: var(--bp-green-700); background: var(--bp-green-50); }
.bp .notice--tip .notice__icon { color: var(--bp-green-700); }
.bp .notice--fehler {
  border-color: var(--bp-red-700);
  background: #f8f1f0;
}
.bp .notice--fehler .notice__icon { color: var(--bp-red-700); }
.bp .notice__label {
  font-size: var(--bp-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--bp-sp-1);
  color: var(--bp-gray-700);
}
.bp .notice__title {
  font-family: var(--bp-font-display);
  font-weight: 600;
  font-size: var(--bp-fs-2xl);
  color: var(--bp-ink);
  margin: 0 0 var(--bp-sp-2);
  line-height: 1.25;
}
.bp .notice__body { font-size: var(--bp-fs-md); color: var(--color-text); }
.bp .notice__body p { margin: 0; max-width: none; }
.bp .notice__body p + p { margin-top: var(--bp-sp-2); }

/* === Tag / Chip — gov.uk-Tag-Stil als System-Standard =====================
 * Rechteckig (2px-Radius, passend zum Designsystem), KEIN Bullet,
 * KEIN Border, solider Tint-Hintergrund + dunkler Textton derselben
 * Akzentfarbe. Body-Schrift bold. Konsolidiert „Status-Chip" und
 * allgemeine Tags zu einer Komponente.
 *
 * Verwendung:
 *   <Tag variant="green">Rechtskräftig</Tag>
 *   <Chip kind="auslegung" />   (Verfahrens-Mapping, gleiches Visual)
 *   <Tag variant="red" uppercase>Eilmeldung</Tag>
 */
.bp .tag,
.bp .chip {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--bp-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border-radius: var(--bp-radius);
  border: 0;
  white-space: nowrap;
  vertical-align: baseline;
  background: var(--bp-gray-100);
  color: var(--bp-gray-800);
  text-decoration: none;
}
.bp .tag--uppercase,
.bp .chip--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
}
/* Legacy Bullet-Punkt explizit ausblenden (alte Markup-Reste). */
.bp .chip__dot { display: none; }

/* === Farb-Tokens (Tint-bg + dunkler-fg) =================================
 * Jede Variante als wiederverwendbare Klasse. Mappt auf bestehende
 * Akzent-Tokens, wo möglich; Teal und Purple sind neu. */
.bp .tag--grey,    .bp .chip--grey,
.bp .tag--neutral, .bp .chip--neutral { background: var(--bp-gray-100); color: var(--bp-gray-800); }
.bp .tag--blue,    .bp .chip--blue,
.bp .tag--info,    .bp .chip--info    { background: var(--bp-blue-100); color: var(--bp-blue-900); }
.bp .tag--green,   .bp .chip--green,
.bp .tag--success, .bp .chip--success { background: var(--bp-green-50); color: #0A5230; }
.bp .tag--yellow,  .bp .chip--yellow,
.bp .tag--warn,    .bp .chip--warn    { background: var(--bp-yellow-50); color: #6B4F00; }
.bp .tag--red,     .bp .chip--red,
.bp .tag--error,   .bp .chip--error   { background: var(--bp-red-50); color: var(--bp-red-700); }
.bp .tag--teal,    .bp .chip--teal    { background: #D5EDE8; color: #0E4A45; }
.bp .tag--purple,  .bp .chip--purple  { background: #E5DFF0; color: #3D2575; }

/* === Verfahrens-Mappings (BauGB §§ 2-10) ================================
 * Status: grey → yellow → red → teal → green → grey
 * Logik: aufstellung neutral, beteiligung warnt „läuft an", auslegung
 * eilig „Bürger müssen handeln", satzung verabschiedet (teal als
 * Übergang), rechtskraft endgültig grün, ausserkraft neutral aus. */
.bp .chip--aufstellung { background: var(--bp-gray-100);  color: var(--bp-gray-800); }
.bp .chip--beteiligung { background: var(--bp-yellow-50); color: #6B4F00; }
.bp .chip--auslegung   { background: var(--bp-red-50);    color: var(--bp-red-700); }
.bp .chip--satzung     { background: #D5EDE8;             color: #0E4A45; }
.bp .chip--rechtskraft { background: var(--bp-green-50);  color: #0A5230; }
.bp .chip--ausserkraft { background: var(--bp-gray-100);  color: var(--bp-gray-700); }

/* Tables */
.bp .table { width: 100%; border-collapse: collapse; font-size: var(--bp-fs-md); }
.bp .table caption { caption-side: top; text-align: left; font-weight: 700; font-size: var(--bp-fs-2xl); font-family: var(--bp-font-display); margin-bottom: var(--bp-sp-2); color: var(--bp-ink); }
.bp .table thead th {
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--bp-gray-700);
  padding: var(--bp-sp-2) var(--bp-sp-3) var(--bp-sp-2) 0;
  font-size: var(--bp-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-gray-700);
}
.bp .table tbody td {
  padding: var(--bp-sp-3) var(--bp-sp-3) var(--bp-sp-3) 0;
  border-bottom: 1px solid var(--bp-gray-200);
  vertical-align: top;
}
.bp .table .num { text-align: right; font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; }
.bp .table tbody tr:hover { background: var(--bp-blue-50); }
.bp .table th.sortable { cursor: pointer; user-select: none; }
.bp .table th.sortable::after { content: " ↕"; opacity: 0.4; font-size: 0.85em; }
.bp .table th.sortable[aria-sort="ascending"]::after  { content: " ↑"; opacity: 1; color: var(--color-brand); }
.bp .table th.sortable[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--color-brand); }

/* Identifier bar */
.bp .identifier {
  background: var(--bp-gray-100);
  border-bottom: 1px solid var(--bp-gray-200);
  font-size: var(--bp-fs-xs);
  color: var(--bp-gray-700);
  padding: 6px 0;
}
.bp .identifier__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--bp-sp-3); }
.bp .identifier__right { display: inline-flex; align-items: center; gap: var(--bp-sp-3); }
/* Kompakter A11y-Switcher im Identifier-Bar-Kontext */
.bp .identifier .a11y-fs { padding: 1px; border-color: var(--bp-gray-300); }
.bp .identifier .a11y-fs button { padding: 2px 6px; font-size: var(--bp-fs-xs); }
.bp .identifier a { color: var(--bp-gray-700); text-decoration: underline; }

/* Header */
.bp .site-header { background: #fff; border-bottom: 1px solid var(--bp-gray-200); }
.bp .site-header__inner { display: flex; align-items: center; gap: var(--bp-sp-5); padding: var(--bp-sp-4) 0; }
.bp .site-header__brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--bp-blue-900);
  flex: 0 0 auto;
}
.bp .site-header__brand:hover { text-decoration: none; }
.bp .site-header__brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; box-shadow: none; }

/* Logo — Full sichtbar ab md, Mark auf schmalen Viewports. */
.bp .site-header__logo { display: block; height: 36px; width: auto; }
.bp .site-header__logo--mark { display: none; height: 36px; }
@media (max-width: 720px) {
  .bp .site-header__logo--full { display: none; }
  .bp .site-header__logo--mark { display: block; }
}

/* Legacy-Reste der Platzhalter-Wortmarke — falls noch irgendwo referenziert,
 * bleiben die Klassen funktional ähnlich, sind aber im Standard-Header nicht
 * mehr in der DOM-Hierarchie. */
.bp .site-header__brand-mark { width: 32px; height: 32px; background: var(--color-brand); border-radius: var(--bp-radius); display: grid; place-items: center; color: #fff; font-family: var(--bp-font-display); font-weight: 700; font-size: 18px; }
.bp .site-header__title { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-2xl); line-height: 1; letter-spacing: -0.01em; }
.bp .site-header__sub { font-size: var(--bp-fs-xs); color: var(--bp-gray-600); display: block; margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.bp .site-header__nav { margin-left: auto; display: flex; gap: var(--bp-sp-5); align-items: center; }
.bp .site-header__nav a { color: var(--bp-ink); text-decoration: none; font-weight: 500; }
.bp .site-header__nav a:hover { color: var(--color-brand); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.bp .site-header__nav a[aria-current="page"] { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Logo-Basis — Default-Farbe Marineblau, `inverse`-Prop bzw. dunkle
 * Header-/Footer-Varianten setzen color: #fff (über currentColor). */
.bp-logo { color: var(--bp-blue-900); display: inline-block; vertical-align: middle; }
.bp-logo--inverse { color: #fff; }

/* Breadcrumbs */
.bp .breadcrumbs { font-size: var(--bp-fs-sm); color: var(--color-text-meta); padding: var(--bp-sp-3) 0; }
.bp .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--bp-sp-2); align-items: center; }
.bp .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--bp-sp-2); }
.bp .breadcrumbs li + li::before { content: "›"; color: var(--bp-gray-400); }
.bp .breadcrumbs a { color: var(--color-link); }
.bp .breadcrumbs li[aria-current="page"] { color: var(--bp-gray-700); }

/* ============ Footer · 2-stufiges Pattern =================================
 * Stufe 1 .site-footer__sitemap  — 5 Sitemap-Spalten (an Mega-Nav orientiert)
 * Stufe 2 .site-footer__service  — Logo · Identifier · Rechtliches inline
 *
 * Default-Tonalität ist HELL (gov.uk-Stil, gray-100 + ink-Text).
 * Variante DUNKEL via globalem [data-footer-variant="dunkel"] am Root
 * ODER lokalem [data-variant="dunkel"] direkt am <footer> (für isolierte
 * Canvas-Demos, ohne den Root-State anzufassen).
 *
 * Spalten-Header und Link-Stil sind 1:1 identisch zu .mn-col* aus dem
 * Mega-Menü — schafft die visuelle Klammer Header ↔ Footer.
 */
.bp .site-footer { margin-top: var(--bp-sp-10); }
/* Im Canvas/isolierten Kontext (kein Inhalt vorher) den Sicherheits-
 * Abstand zum Seiten-Inhalt unterdrücken, damit Artboards eng sitzen. */
.bp .site-footer:first-child { margin-top: 0; }
.bp .site-footer a { text-decoration: none; }

/* --- Stufe 1 · Sitemap-Footer ------------------------------------------- */
.bp .site-footer__sitemap {
  background: var(--bp-gray-100);
  border-top: 1px solid var(--bp-gray-300);
  padding: var(--bp-sp-9) 0;
}
.bp .site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bp-sp-6);
}
.bp .site-footer__col {
  display: flex; flex-direction: column;
  min-width: 0;
}
/* Identisch zu .mn-col__label im Mega-Menü */
.bp .site-footer__col-label {
  font-family: var(--bp-font-body);
  font-size: var(--bp-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-gray-700);
  margin-bottom: var(--bp-sp-3);
  line-height: 1.4;
}
.bp .site-footer__col-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.bp .site-footer__col-list a {
  display: flex; align-items: center;
  min-height: 44px;                                 /* Touch-Target */
  padding: 4px 0;
  font-family: var(--bp-font-body);
  font-size: var(--bp-fs-md);
  font-weight: 400;
  line-height: 1.4;
  color: var(--bp-ink);
}
.bp .site-footer__col-list a:hover {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.bp .site-footer__col-all {
  margin-top: auto;                                 /* zum Spalten-Boden ziehen */
  padding-top: var(--bp-sp-3);
  align-self: flex-start;
  font-family: var(--bp-font-body);
  font-size: var(--bp-fs-sm);
  font-weight: 600;
  color: var(--color-brand);
  display: inline-flex; align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.bp .site-footer__col-all:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --- Stufe 2 · Service-Footer ------------------------------------------- */
.bp .site-footer__service {
  background: #fff;
  border-top: 1px solid var(--bp-gray-300);
  padding: var(--bp-sp-4) 0;
}
.bp .site-footer__service-inner {
  display: flex; align-items: center;
  gap: var(--bp-sp-5) var(--bp-sp-6);
  flex-wrap: wrap;
}
.bp .site-footer__brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  color: var(--bp-blue-900);
  flex: 0 0 auto;
}
.bp .site-footer__brand:hover { text-decoration: none; }
.bp .site-footer__brand:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}
.bp .site-footer__logo {
  display: block;
  height: 26px;                                     /* Wortmarke gut lesbar */
  width: auto;
}
.bp .site-footer__identifier {
  flex: 1 1 auto;
  font-size: var(--bp-fs-sm);
  color: var(--bp-gray-700);
  line-height: 1.4;
}
.bp .site-footer__legal {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  font-size: var(--bp-fs-sm);
}
.bp .site-footer__legal li { display: inline-flex; align-items: center; gap: 6px; }
.bp .site-footer__legal a {
  color: var(--bp-gray-700);
  padding: 4px 0;
  line-height: 1.4;
}
.bp .site-footer__legal a:hover {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bp .site-footer__copyright { color: var(--bp-gray-600); }
/* Punkt-Trenner — gleicher Stil wie .stand-badge__sep */
.bp .site-footer__sep {
  color: var(--bp-gray-400);
  font-weight: 400;
}
.bp .site-footer__identifier .site-footer__sep { margin: 0 6px; }

/* Stufe 2 schmaler stapeln, wenn Container schmal */
@media (max-width: 860px) {
  .bp .site-footer__service-inner { gap: var(--bp-sp-3); }
  .bp .site-footer__identifier { flex-basis: 100%; order: 3; }
}

/* --- Variante · DUNKEL (primary-900) -----------------------------------
 * Greift bei Root-Tweak [data-footer-variant="dunkel"] ODER lokalem
 * [data-variant="dunkel"] am Footer selbst. Lokal gewinnt — :not()
 * entkoppelt isolierte Canvas-Demos vom globalen Tweak. */

@media (max-width: 720px) {
  .bp .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--bp-sp-5); }
  .bp .site-footer__sitemap { padding: var(--bp-sp-7) 0; }
}

/* KPI strip */
.bp .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bp-gray-300); border-bottom: 1px solid var(--bp-gray-300); }
.bp .kpi { padding: var(--bp-sp-4) var(--bp-sp-4) var(--bp-sp-4) 0; border-right: 1px solid var(--bp-gray-200); }
.bp .kpi:last-child { border-right: 0; }
.bp .kpi__label { font-size: var(--bp-fs-sm); color: var(--color-text-meta); margin-bottom: 6px; line-height: 1.3; }
.bp .kpi__value { font-family: var(--bp-font-body); font-size: var(--bpd-text-kpi-lg); font-weight: 700; line-height: 1; color: var(--bp-blue-700); font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.bp .kpi__unit  { font-family: var(--bp-font-body); font-size: var(--bp-fs-lg); color: var(--bp-gray-700); margin-left: 4px; font-weight: 500; }
.bp .kpi__sub { font-size: var(--bp-fs-xs); color: var(--bp-gray-600); margin-top: 4px; }

/* Cards (Bundesland / Stadt) */
.bp .card-grid { display: grid; gap: 1px; background: var(--bp-gray-200); border: 1px solid var(--bp-gray-200); }
.bp .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bp .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bp .place-card { display: flex; gap: var(--bp-sp-3); padding: var(--bp-sp-4); background: #fff; text-decoration: none; color: var(--bp-ink); transition: background .12s; }
.bp .place-card:hover { background: var(--bp-blue-50); }
.bp .place-card__wappen { flex: 0 0 28px; height: 36px; display: flex; align-items: flex-start; }
.bp .place-card__wappen img { width: 28px; height: 36px; object-fit: contain; }
.bp .place-card__body { flex: 1 1 auto; min-width: 0; }
.bp .place-card__name { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-2xl); margin-bottom: 2px; line-height: 1.15; }
.bp .place-card__meta { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); display: flex; gap: var(--bp-sp-3); flex-wrap: wrap; }
.bp .place-card__meta span { display: inline-flex; align-items: baseline; gap: 4px; }
.bp .place-card__meta b { font-weight: 700; color: var(--bp-ink); font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; }

/* TOC sticky */
.bp .toc { position: sticky; top: var(--bp-sp-4); font-size: var(--bp-fs-sm); }
.bp .toc__label { font-size: var(--bp-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-meta); font-weight: 700; margin-bottom: var(--bp-sp-2); }
.bp .toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--bp-gray-300); }
.bp .toc li { display: block; }
.bp .toc a { display: block; padding: 6px var(--bp-sp-3); color: var(--bp-gray-700); text-decoration: none; line-height: 1.3; border-left: 2px solid transparent; margin-left: -1px; }
.bp .toc a:hover { color: var(--color-brand); background: var(--bp-blue-50); }
.bp .toc a[aria-current="true"] { color: var(--color-brand); border-left-color: var(--color-brand); font-weight: 600; background: var(--bp-blue-50); }
.bp .toc ol ol { border-left: 0; margin-left: var(--bp-sp-3); }
.bp .toc ol ol a { font-size: var(--bp-fs-xs); padding: 4px var(--bp-sp-3); }

/* Accordion / FAQ */
.bp .accordion { border-top: 1px solid var(--bp-gray-300); }
.bp .accordion__item { border-bottom: 1px solid var(--bp-gray-300); }
.bp .accordion__btn {
  width: 100%; text-align: left; background: none; border: 0;
  font: 600 var(--bp-fs-lg)/1.35 var(--bp-font-body); color: var(--bp-ink);
  padding: var(--bp-sp-4) 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--bp-sp-3);
}
.bp .accordion__btn:hover { color: var(--color-brand); }
.bp .accordion__btn::after {
  content: "+"; font-family: var(--bp-font-mono); font-size: 22px; color: var(--bp-gray-600);
  width: 24px; text-align: center; transition: transform .15s;
}
.bp .accordion__item[data-open="true"] .accordion__btn::after { content: "−"; color: var(--color-brand); }
.bp .accordion__panel { padding: 0 0 var(--bp-sp-4); max-width: 720px; }
.bp .accordion__item:not([data-open="true"]) .accordion__panel { display: none; }

/* Hero variants */
.bp .hero { padding: var(--bp-sp-8) 0 var(--bp-sp-7); border-bottom: 1px solid var(--bp-gray-200); }
.bp .hero--tint { background: var(--bp-blue-50); }
.bp .hero__eyebrow { font-size: var(--bp-fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-brand); font-weight: 700; margin-bottom: var(--bp-sp-2); }
.bp .hero__title { font-size: var(--bp-fs-6xl); margin-bottom: var(--bp-sp-3); max-width: 900px; }
.bp .hero__lede  { font-size: var(--bp-fs-2xl); color: var(--bp-gray-700); max-width: 760px; line-height: 1.5; font-family: var(--bp-font-display); font-weight: 400; }
.bp .hero__meta  { display: flex; flex-wrap: wrap; gap: var(--bp-sp-3); margin-top: var(--bp-sp-3); font-size: var(--bp-fs-sm); color: var(--color-text-meta); }
.bp .hero__meta span { display: inline-flex; align-items: baseline; gap: 4px; }
.bp .hero__meta b { color: var(--bp-ink); font-weight: 600; }

/* Address search */
.bp .addr {
  background: #fff; border: 1px solid var(--bp-gray-300); padding: var(--bp-sp-4); margin-top: var(--bp-sp-5);
  display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--bp-sp-3); align-items: end;
}
.bp .addr__label { font-size: var(--bp-fs-sm); margin-bottom: 4px; color: var(--bp-gray-700); }

/* === Bplan-Suche · System-Komponente · Tabs + Adresse / Flurstück ===
   Hat KEINEN eigenen Container-Hintergrund. Sitzt direkt auf der
   jeweiligen Section-Farbe (Hero-Tint, Weiß, etc.).  */
.bp .bsuche { background: transparent; }
.bp .bsuche__tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--bp-gray-300);
  margin-bottom: var(--bp-sp-4);
}
.bp .bsuche__tab {
  background: none; border: 0;
  padding: 12px 0;
  margin-right: 28px;
  font: 600 var(--bp-fs-md)/1 var(--bp-font-body);
  color: var(--bp-gray-700);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.bp .bsuche__tab:hover { color: var(--color-brand); }
.bp .bsuche__tab[aria-selected="true"] {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}
.bp .bsuche__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Adresse-Modus — Feld + Submit, gleiche Höhe */
.bp .bsuche__addr-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--bp-sp-3);
  align-items: end;
}
.bp .bsuche__field { position: relative; }

/* Flurstück — zwei logische Reihen */
.bp .bsuche__fst-row1 {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--bp-sp-3);
  margin-bottom: var(--bp-sp-4);
  max-width: 560px;
}
.bp .bsuche__fst-row2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: var(--bp-sp-3);
  align-items: end;
}

/* Hilfstext unter der gesamten Komponente */
.bp .bsuche__hint {
  font-size: var(--bp-fs-sm);
  color: var(--bp-gray-700);
  margin-top: var(--bp-sp-4);
  max-width: 760px;
}
.bp .bsuche__label-opt { color: var(--bp-gray-600); font-weight: 400; font-size: var(--bp-fs-sm); margin-left: 4px; }

/* Autocomplete */
.bp .bsuche__autocomplete {
  position: absolute;
  top: calc(100% + 2px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--bp-gray-700);
  z-index: 5;
  max-height: 320px;
  overflow: auto;
}
.bp .bsuche__ac-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px;
  background: #fff; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--bp-gray-200);
  font: 400 var(--bp-fs-md) var(--bp-font-body);
}
.bp .bsuche__ac-item:last-child { border-bottom: 0; }
.bp .bsuche__ac-item:hover, .bp .bsuche__ac-item:focus-visible {
  background: var(--bp-blue-50);
  outline: 0;
}
.bp .bsuche__ac-main { font-weight: 600; color: var(--bp-ink); display: block; }
.bp .bsuche__ac-sub  { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); display: block; margin-top: 2px; }

/* Read-only befüllt — sichtbarer Wert, muted-bg */
.bp .input[data-readonly="true"] {
  background: var(--bp-gray-100);
  border-color: var(--bp-gray-400);
  color: var(--bp-ink);
  cursor: default;
}
/* Disabled — Folgefelder vor PLZ-Eingabe */
.bp .input[disabled] {
  background: var(--bp-gray-100);
  border-color: var(--bp-gray-300);
  color: var(--bp-gray-600);
  cursor: not-allowed;
  opacity: 0.7;
}
.bp .input[disabled]::placeholder { color: var(--bp-gray-600); }

/* Mobile */
@media (max-width: 720px) {
  .bp .bsuche__addr-row { grid-template-columns: 1fr; }
  .bp .bsuche__fst-row1 { grid-template-columns: 1fr 1fr; }
  .bp .bsuche__fst-row2 { grid-template-columns: 1fr 1fr; }
  .bp .bsuche__fst-row2 > button { grid-column: 1 / -1; justify-self: end; }
}
.bp .search {
  display: flex; align-items: stretch;
  border: 2px solid var(--bp-ink);
  border-radius: var(--bp-radius);
  background: #fff;
  overflow: hidden;
  max-width: 720px;
}
.bp .search:focus-within { box-shadow: 0 0 0 3px var(--color-focus); }
.bp .search__icon { display: grid; place-items: center; padding: 0 var(--bp-sp-3); color: var(--bp-gray-700); }
.bp .search__input {
  flex: 1 1 auto;
  height: 56px;
  border: 0; outline: 0; background: transparent;
  font: 500 var(--bp-fs-lg)/1 var(--bp-font-body);
  color: var(--bp-ink);
  padding: 0 var(--bp-sp-2);
  min-width: 0;
}
.bp .search__input::placeholder { color: var(--bp-gray-500); font-weight: 400; }
.bp .search__submit {
  border: 0; cursor: pointer;
  background: var(--color-brand); color: #fff;
  padding: 0 var(--bp-sp-5);
  font: 600 var(--bp-fs-md)/1 var(--bp-font-body);
  display: flex; align-items: center; gap: 8px;
}
.bp .search__submit:hover { background: var(--color-brand-hover); }
.bp .search__hint { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: var(--bp-sp-2); max-width: 720px; }

/* Bundesland-Verfügbarkeit — Tag-Varianten */
.bp .chip--verfuegbar   { background: var(--bp-green-50); color: #0A5230; }
.bp .chip--vorbereitung { background: var(--bp-gray-100); color: var(--bp-gray-700); }

/* Daten-und-Fakten — größere Variante des KPI-Strips für Homepage */
.bp .facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bp-gray-200);
  border-top: 2px solid var(--bp-ink);
  border-bottom: 1px solid var(--bp-gray-300);
}
.bp .facts__cell {
  background: #fff;
  padding: var(--bp-sp-6) var(--bp-sp-4);
  position: relative;
}
.bp .facts__cell + .facts__cell { border-left: 1px solid var(--bp-gray-200); }
.bp .facts__label { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-bottom: 12px; line-height: 1.3; max-width: 220px; }
.bp .facts__value {
  font-family: var(--bp-font-body);
  font-size: var(--bpd-text-kpi-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--bp-blue-700);
  font-variant-numeric: var(--bpd-numeric);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 6px;
}
.bp .facts__unit { font-family: var(--bp-font-body); font-size: var(--bp-fs-lg); color: var(--bp-gray-700); font-weight: 500; }
.bp .facts__sub  { font-size: var(--bp-fs-xs); color: var(--bp-gray-600); margin-top: 8px; letter-spacing: 0.02em; }

/* Bundesland-Karte (Homepage-Variante mit Status) */
.bp .land-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bp-gray-300); border: 1px solid var(--bp-gray-300); }
.bp .land {
  background: #fff;
  padding: var(--bp-sp-4);
  text-decoration: none;
  color: var(--bp-ink);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--bp-sp-2);
  min-height: 168px;
  transition: background .12s;
  position: relative;
}
.bp .land:hover { background: var(--bp-blue-50); }
.bp .land--inactive { background: #fafafa; }
.bp .land--inactive:hover { background: var(--bp-gray-100); }
.bp .land__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bp-sp-2); }
.bp .land__wappen { width: 34px; height: 44px; display: flex; align-items: flex-start; flex: 0 0 auto; }
.bp .land__wappen img { width: 100%; height: 100%; object-fit: contain; }
.bp .land--inactive .land__wappen img { filter: grayscale(1) opacity(0.55); }
.bp .land__name { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-2xl); line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.bp .land__meta { display: flex; gap: var(--bp-sp-3); font-size: var(--bp-fs-sm); color: var(--bp-gray-700); flex-wrap: wrap; align-self: end; }
.bp .land__meta b { color: var(--bp-ink); font-weight: 700; font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; }
.bp .land__meta--placeholder { color: var(--bp-gray-500); font-style: italic; }
.bp .land__action { font-size: var(--bp-fs-sm); color: var(--color-brand); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; align-self: end; }
.bp .land--inactive .land__action { color: var(--bp-gray-600); }

/* Why-section — drei Spalten mit Erklärung "So finden Sie was Sie suchen" */
.bp .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bp-sp-7); }
.bp .pillar { border-top: 4px solid var(--color-brand); padding-top: var(--bp-sp-4); }
.bp .pillar h3 { font-size: var(--bp-fs-3xl); margin-bottom: var(--bp-sp-2); }
.bp .pillar p  { color: var(--bp-gray-800); }
.bp .pillar__num { font-size: var(--bp-fs-sm); color: var(--bp-gray-600); margin-bottom: var(--bp-sp-2); display: block; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Notice — Variante "tip" (grün, mit Glühbirne) */
.bp .notice--tip { border-color: var(--bp-green-700); background: var(--bp-green-50); }

/* DefinitionBox — eigenständige Komponente: Term/Body */
.bp .defbox {
  border: 1px solid var(--bp-blue-100);
  background: var(--bp-blue-50);
  padding: var(--bp-sp-4) var(--bp-sp-5);
  border-radius: var(--bp-radius);
  position: relative;
  padding-left: 64px;
  margin: var(--bp-sp-5) 0;
}
.bp .defbox::before {
  content: "§";
  position: absolute;
  left: 22px; top: 18px;
  font-family: var(--bp-font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--color-brand);
  line-height: 1;
}
.bp .defbox__term {
  font-family: var(--bp-font-display);
  font-weight: 600;
  font-size: var(--bp-fs-2xl);
  color: var(--bp-ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.bp .defbox__body { font-size: var(--bp-fs-md); color: var(--bp-gray-800); line-height: 1.55; }
.bp .defbox__body p { margin: 0; }
.bp .defbox__body p + p { margin-top: var(--bp-sp-2); }

/* Summary-Box — helles Vorwort */
.bp .summary {
  background: #FAFAF9;
  border-left: 4px solid var(--bp-ink);
  padding: var(--bp-sp-4) var(--bp-sp-5);
  margin: var(--bp-sp-6) 0;
}
.bp .summary__title { font-family: var(--bp-font-body); font-size: var(--bp-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-gray-700); margin-bottom: var(--bp-sp-3); }
.bp .summary__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bp .summary__list li { padding-left: 24px; position: relative; font-size: var(--bp-fs-md); line-height: 1.5; color: var(--bp-ink); }
.bp .summary__list li::before {
  content: "›"; position: absolute; left: 4px; top: -1px;
  color: var(--color-brand); font-weight: 700; font-size: 18px;
}

/* === Formula · 3-variant System ============================================
 * A: <FormulaInline>           — Inline-Tint im Fließtext
 * B: <Formula display vars …/> — Block mit Display + Variablen + Range
 * C: + example/interpretation  — Block mit Rechenbeispiel
 *
 * Bewusste typo-Regel:
 *   - Display: Source Serif 4 (Editorial), Variablen kursiv, Operatoren normal
 *   - NIE Monospace im Fließtext oder Display.
 *   - Monospace NUR für: Plan-Kürzel (WA/MI/GE), Plan-Nummern, Tabular-Numbers
 *     in Datentabellen, ALKIS-Identifier. Code-artige Strings.
 */

/* Inline-Formel — Variante A */
.bp .formula-inline {
  background: var(--bp-blue-50);
  border-radius: var(--bp-radius);
  padding: 0 6px;
  font-style: normal;
  white-space: nowrap;
  color: var(--bp-ink);
}
.bp .formula-inline var,
.bp .formula-inline .var,
.bp .formula-inline em {
  font-style: italic;
  font-family: var(--bp-font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Variante A · mit Titel-Header (Edge-Case) — Block-Layout, weil
 * der Header keine inline-Position erlaubt. */
.bp .formula-inline-block {
  margin: var(--bp-sp-5) 0;
  scroll-margin-top: 100px;
}
.bp .formula-inline-block .fblock__header {
  padding: 0 0 var(--bp-sp-3);
  border-bottom: 0;
  background: transparent;
}

/* Bruchstriche — CSS-Grid-Stack, Editorial-Look */
.bp .frac {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  vertical-align: -0.45em;
  text-align: center;
  line-height: 1.05;
  margin: 0 0.15em;
  font-style: normal;
  font-size: 0.85em;
}
.bp .frac__num {
  border-bottom: 1.5px solid currentColor;
  padding: 0 0.45em 0.1em;
}
.bp .frac__den { padding: 0.15em 0.45em 0; }
.bp .frac__num var,
.bp .frac__den var,
.bp .frac__num em,
.bp .frac__den em {
  font-style: italic;
  font-family: var(--bp-font-display);
}

/* Formel-Block — Variante B / C */
.bp .fblock {
  border: 1px solid var(--bp-gray-300);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--bp-radius);
  background: #fff;
  margin: var(--bp-sp-5) 0;
  overflow: hidden;
  max-width: none;
}

/* Optionaler Header — Eyebrow + Titel + Anker-Link */
.bp .fblock__header {
  padding: var(--bp-sp-4) var(--bp-sp-6) var(--bp-sp-3);
  background: #fff;
  border-bottom: 1px solid var(--bp-gray-200);
  scroll-margin-top: 100px;
}
.bp .fblock__eyebrow {
  font-family: var(--bp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 6px;
  line-height: 1.2;
}
.bp .fblock__title {
  font-family: var(--bp-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--bp-ink);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.bp .fblock__title-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.bp .fblock__title-link:hover { color: var(--bp-ink); text-decoration: none; }
.bp .fblock__anchor {
  font-family: var(--bp-font-mono);
  font-weight: 400;
  font-size: 16px;
  color: var(--bp-gray-400);
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.bp .fblock:hover .fblock__anchor,
.bp .fblock__title-link:focus-visible .fblock__anchor { opacity: 1; }
.bp .fblock__title-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.bp .fblock__title-link:hover .fblock__anchor { color: var(--color-brand); }
/* Headline-Variante: --xl (22 px Default) | --2xl (27 px) */
.bp .fblock__title--2xl { font-size: 27px; }
.bp .fblock__title--xl  { font-size: 22px; }

/* Wenn ein Header sitzt, lockert sich das obere Display-Padding leicht. */
.bp .fblock__header + .fblock__display {
  padding-top: var(--bp-sp-6);
}

/* Bereich 1 · Formel-Display */
.bp .fblock__display {
  background: var(--bp-blue-50);
  padding: var(--bp-sp-7) var(--bp-sp-6);
  font-family: var(--bp-font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--bp-ink);
  text-align: center;
  line-height: 1.35;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--bp-blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.5em;
  row-gap: 0.3em;
}
.bp .fblock__display var,
.bp .fblock__display em {
  font-style: italic;
  font-family: var(--bp-font-display);
}

/* Bereich 2 · Variablen-Definitionen */
.bp .fblock__vars {
  padding: var(--bp-sp-5) var(--bp-sp-6) var(--bp-sp-3);
}
.bp .fblock__vars dl {
  margin: 0;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px 24px;
  font-size: var(--bp-fs-md);
}
.bp .fblock__vars dt {
  font-family: var(--bp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--bp-fs-2xl);
  color: var(--bp-blue-900);
  line-height: 1.1;
  padding-top: 1px;
}
.bp .fblock__vars dd {
  margin: 0;
  font-size: var(--bp-fs-md);
  color: var(--bp-ink);
  line-height: 1.55;
}

/* Bereich 3 · Range / Skalen-Hinweis */
.bp .fblock__range {
  padding: 0 var(--bp-sp-6) var(--bp-sp-5);
  font-size: var(--bp-fs-sm);
  color: var(--bp-gray-700);
  line-height: 1.55;
}

/* Bereich 4 · Rechenbeispiel */
.bp .fblock__example {
  background: #FAFAF9;
  border-top: 1px solid var(--bp-gray-200);
  padding: var(--bp-sp-5) var(--bp-sp-6);
}
.bp .fblock__example-label {
  font-family: var(--bp-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-gray-700);
  margin: 0 0 var(--bp-sp-3);
}
.bp .fblock__inputs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 28px;
  margin: 0 0 var(--bp-sp-4);
  font-size: var(--bp-fs-md);
  padding-bottom: var(--bp-sp-3);
  border-bottom: 1px dashed var(--bp-gray-300);
}
.bp .fblock__inputs dt {
  margin: 0;
  color: var(--bp-gray-700);
  font-weight: 400;
}
.bp .fblock__inputs dd {
  margin: 0;
  color: var(--bp-ink);
  font-weight: 600;
}
.bp .fblock__steps {
  display: grid;
  gap: var(--bp-sp-4);
  margin: 0;
}
.bp .fblock__step-title {
  font-size: var(--bp-fs-sm);
  color: var(--bp-gray-700);
  margin-bottom: 4px;
  line-height: 1.4;
}
.bp .fblock__step-calc {
  font-family: var(--bp-font-body);
  font-size: var(--bp-fs-lg);
  color: var(--bp-ink);
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.bp .fblock__step-calc > * { white-space: nowrap; }
.bp .fblock__step-calc .op {
  color: var(--bp-gray-600);
  font-weight: 400;
  padding: 0 2px;
}
.bp .fblock__step-result {
  font-weight: 700;
  color: var(--bp-blue-900);
  font-size: 1.1em;
  letter-spacing: -0.01em;
}
.bp .fblock__step-sub {
  font-size: var(--bp-fs-sm);
  color: var(--bp-gray-700);
  margin-top: 4px;
  line-height: 1.5;
}

/* Bereich 5 · Interpretation */
.bp .fblock__interp {
  border-top: 1px solid var(--bp-gray-200);
  padding: var(--bp-sp-4) var(--bp-sp-6);
  font-family: var(--bp-font-display);
  font-style: italic;
  font-size: var(--bp-fs-lg);
  color: var(--bp-gray-800);
  line-height: 1.55;
  background: #fff;
  max-width: none;
}
.bp .fblock__interp p { margin: 0; max-width: none; }

/* Bereich 6 · Rechtshinweis (kompakte Notice) */
.bp .fblock__note {
  margin: 0 var(--bp-sp-6) var(--bp-sp-5);
  border-left: 4px solid var(--color-brand);
  background: var(--bp-blue-50);
  padding: var(--bp-sp-3) var(--bp-sp-4);
  font-size: var(--bp-fs-sm);
  color: var(--bp-gray-800);
  line-height: 1.55;
  border-radius: 0 var(--bp-radius) var(--bp-radius) 0;
}
.bp .fblock__note-label {
  font-family: var(--bp-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-gray-700);
  margin-bottom: 4px;
}
.bp .fblock__note p { margin: 0; max-width: none; }

/* ProcessSteps — nummerierte Verfahrensschritte mit Verbindungslinie zwischen den Steps */
.bp .psteps { list-style: none; padding: 0; margin: 0; }
.bp .psteps__item {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: var(--bp-sp-3);
  padding: 0 0 var(--bp-sp-4) 0;
}
.bp .psteps__item + .psteps__item { padding-top: var(--bp-sp-4); }
.bp .psteps__num {
  background: var(--color-brand); color: #fff;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: var(--bp-font-body); font-weight: 700;
  font-size: var(--bp-fs-lg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  border-radius: var(--bp-radius);
  position: relative; z-index: 1;
}
/* Verbindungslinie zwischen den Nummern */
.bp .psteps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom,
    var(--bp-blue-100) 0 6px,
    transparent 6px 10px);
}
.bp .psteps__title { font-family: var(--bp-font-body); font-weight: 600; font-size: var(--bp-fs-lg); margin-bottom: 4px; color: var(--bp-ink); padding-top: 6px; }
.bp .psteps__body  { font-size: var(--bp-fs-md); color: var(--bp-gray-800); line-height: 1.55; padding-bottom: var(--bp-sp-2); }
.bp .psteps__body p { margin: 0; max-width: none; }

/* Legacy: alte Steps für Kompatibilität (rendert wie ProcessSteps) */
.bp .steps { list-style: none; padding: 0; margin: 0; }
.bp .steps__item { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--bp-sp-3); padding: var(--bp-sp-4) 0; }
.bp .steps__item:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: calc(var(--bp-sp-4) + 36px); bottom: 0; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--bp-blue-100) 0 6px, transparent 6px 10px);
}
.bp .steps__num { background: var(--color-brand); color: #fff; width: 36px; height: 36px; display: grid; place-items: center; font-family: var(--bp-font-body); font-weight: 700; font-size: var(--bp-fs-lg); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; border-radius: var(--bp-radius); position: relative; z-index: 1; }
.bp .steps__title { font-family: var(--bp-font-body); font-weight: 600; font-size: var(--bp-fs-lg); margin-bottom: 4px; color: var(--bp-ink); padding-top: 6px; }
.bp .steps__body  { font-size: var(--bp-fs-md); color: var(--bp-gray-800); line-height: 1.55; }
.bp .steps__body p { margin: 0; max-width: none; }

/* Checklist */
.bp .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bp .checklist li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  font-size: var(--bp-fs-md); line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px dashed var(--bp-gray-200);
}
.bp .checklist li::before {
  content: "";
  width: 18px; height: 18px;
  border: 2px solid var(--bp-gray-700);
  border-radius: 2px;
  margin-top: 3px;
}

/* ============ A3 · Wiederverwendbare Datentabelle ============ */
.bp .dtable-wrap { margin: var(--bp-sp-4) 0; }
.bp .dtable-caption { margin-bottom: var(--bp-sp-3); }
.bp .dtable-caption__title { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-3xl); color: var(--bp-ink); margin: 0; line-height: 1.2; }
.bp .dtable-caption__sub { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 4px; }
.bp .dtable {
  width: 100%; border-collapse: collapse;
  font-size: var(--bp-fs-md);
  font-feature-settings: "tnum", "zero";
}
.bp .dtable thead th {
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--bp-gray-700);
  padding: 10px 14px 10px 0;
  font-size: var(--bp-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-gray-700);
  white-space: nowrap;
  vertical-align: bottom;
}
.bp .dtable thead th.num { text-align: right; }
.bp .dtable tbody td {
  padding: var(--bp-sp-3) 14px var(--bp-sp-3) 0;
  border-bottom: 1px solid var(--bp-gray-200);
  vertical-align: middle;
}
.bp .dtable td:last-child, .bp .dtable th:last-child { padding-right: 0; }
.bp .dtable .num {
  text-align: right;
  font-variant-numeric: var(--bpd-numeric);
  font-feature-settings: "tnum";
  font-weight: 500;
}
.bp .dtable .ident {
  font-family: var(--bp-font-mono);
  font-weight: 600;
  color: var(--bp-ink);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.bp .dtable .ident__swatch {
  width: 14px; height: 14px;
  border: 1px solid var(--bp-gray-400);
  border-radius: 1px;
  display: inline-block;
  flex: 0 0 auto;
}
.bp .dtable tbody tr:hover { background: var(--bp-blue-50); }
.bp .dtable a { color: var(--bp-ink); text-decoration: none; font-weight: 500; }
.bp .dtable a:hover { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bp .dtable tfoot td, .bp .dtable .dtable__total td {
  background: var(--bp-gray-100);
  font-weight: 700;
  border-top: 2px solid var(--bp-gray-700);
  border-bottom: 0;
  padding-top: 12px; padding-bottom: 12px;
}
.bp .dtable .dtable__total td.num { font-weight: 700; }

/* Mini-Bar als eigenständiges Sub-Element */
.bp .dtable-bar { display: flex; align-items: center; gap: 6px; }
.bp .dtable-bar__track {
  width: 100px; height: 8px;
  background: var(--bp-gray-200);
  border-radius: 1px;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
}
.bp .dtable-bar__fill   { background: var(--color-brand); height: 100%; }
.bp .dtable-bar__fill--alt { background: var(--bp-yellow-600); height: 100%; }
.bp .dtable-legend {
  display: flex; gap: var(--bp-sp-4); flex-wrap: wrap;
  font-size: var(--bp-fs-sm); color: var(--bp-gray-700);
  margin-top: var(--bp-sp-2);
}
.bp .dtable-legend__chip { display: inline-flex; align-items: center; gap: 6px; }
.bp .dtable-legend__chip::before {
  content: ""; width: 12px; height: 6px;
  background: var(--clr, var(--color-brand));
  border-radius: 1px;
  display: inline-block;
}

/* Stand+Quellen-Zeile direkt unter der Tabelle */
.bp .dtable-foot { margin-top: var(--bp-sp-3); font-size: var(--bp-fs-sm); color: var(--bp-gray-700); }

/* Article tables — Default-Stil für rohe Markdown-Tabellen */
.bp .prose table { width: 100%; border-collapse: collapse; margin: var(--bp-sp-4) 0; font-size: var(--bp-fs-md); }
.bp .prose th { text-align: left; padding: 8px 14px 8px 0; border-bottom: 2px solid var(--bp-gray-700); font-size: var(--bp-fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bp-gray-700); }
.bp .prose td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--bp-gray-200); vertical-align: top; }
.bp .prose td:first-child { font-weight: 600; color: var(--bp-ink); white-space: nowrap; font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; }

/* Image placeholder for article */
.bp .figure { margin: var(--bp-sp-5) 0; }
.bp .figure__frame {
  background: var(--bp-gray-100);
  border: 1px dashed var(--bp-gray-400);
  display: grid; place-items: center;
  color: var(--bp-gray-600);
  text-align: center;
  padding: var(--bp-sp-7) var(--bp-sp-4);
  font-size: var(--bp-fs-sm);
}
.bp .figure__caption { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 10px; line-height: 1.5; font-style: italic; max-width: 700px; }
.bp .figure__caption b { color: var(--bp-ink); font-style: normal; font-weight: 600; }

/* Quellen section */
.bp .sources {
  background: var(--bp-gray-100);
  border-top: 2px solid var(--bp-ink);
  padding: var(--bp-sp-7) 0;
  margin-top: var(--bp-sp-9);
}
.bp .sources h2 { margin-bottom: var(--bp-sp-3); font-size: var(--bp-fs-3xl); }
.bp .sources__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bp-sp-2); font-size: var(--bp-fs-md); }
.bp .sources__list li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bp-gray-200); }
.bp .sources__list .num { font-weight: 700; color: var(--bp-gray-700); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.bp .sources__disclaimer { margin-top: var(--bp-sp-4); padding: var(--bp-sp-3) var(--bp-sp-4); background: #fff; border-left: 4px solid var(--bp-yellow-600); font-size: var(--bp-fs-sm); color: var(--bp-gray-800); max-width: 760px; }

/* Article layout */
.bp .article-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--bp-sp-8);
  align-items: start;
  padding-top: var(--bp-sp-6);
  padding-bottom: var(--bp-sp-8);
}
.bp .article-grid__main { max-width: 760px; }
.bp .article-grid__main h2 { font-size: var(--bp-fs-4xl); margin-top: var(--bp-sp-9); margin-bottom: var(--bp-sp-3); scroll-margin-top: 100px; }
.bp .article-grid__main h2:first-child { margin-top: 0; }
.bp .article-grid__main h3 { font-size: var(--bp-fs-3xl); margin-top: var(--bp-sp-5); margin-bottom: var(--bp-sp-2); scroll-margin-top: 100px; }
.bp .article-grid__main p { font-size: var(--bp-fs-lg); line-height: 1.65; color: var(--bp-ink); max-width: none; }
.bp .article-grid__main p strong { color: var(--bp-ink); }
.bp .article-grid__main ul, .bp .article-grid__main ol { font-size: var(--bp-fs-lg); line-height: 1.65; }

/* Map slot — Platzhalter für interaktive Karte */
.bp .mapslot {
  position: relative;
  background:
    linear-gradient(135deg, transparent 49%, var(--bp-gray-200) 49%, var(--bp-gray-200) 51%, transparent 51%) 0 0/14px 14px,
    var(--bp-gray-100);
  border: 1px dashed var(--bp-gray-400);
  border-radius: var(--bp-radius);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden;
}
.bp .mapslot__panel {
  background: #fff;
  border: 1px solid var(--bp-gray-300);
  padding: 20px 28px;
  max-width: 460px;
  text-align: center;
  border-radius: var(--bp-radius);
}
.bp .mapslot__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-gray-600); margin-bottom: 8px; }
.bp .mapslot__title { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-2xl); color: var(--bp-ink); margin-bottom: 6px; line-height: 1.2; }
.bp .mapslot__body { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); line-height: 1.5; }

/* Mini-bar in Tabelle */
.bp .databar { display: inline-block; height: 7px; background: var(--color-brand); border-radius: 1px; vertical-align: middle; }
.bp .databar--muted { background: var(--bp-yellow-600); }

/* Quellen-Card */
.bp .source-card { background: #fff; border: 1px solid var(--bp-gray-300); padding: 18px 20px; border-radius: var(--bp-radius); }
.bp .source-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-gray-700); margin-bottom: 6px; }
.bp .source-card__value { font-size: var(--bp-fs-md); color: var(--bp-ink); line-height: 1.4; }
.bp .source-card__sub { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 4px; }

/* Bildcredit */
.bp .img-credit { font-size: var(--bp-fs-xs); color: var(--bp-gray-600); margin-top: 4px; font-style: italic; }

/* A11y font-size switcher */
.bp .a11y-fs { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--bp-gray-300); border-radius: var(--bp-radius); padding: 2px; }
.bp .a11y-fs button {
  background: none; border: 0; padding: 4px 8px; font-family: var(--bp-font-body); cursor: pointer; color: var(--bp-gray-700); border-radius: 2px; line-height: 1;
}
.bp .a11y-fs button[aria-pressed="true"] { background: var(--bp-blue-900); color: #fff; }
.bp .a11y-fs button:hover:not([aria-pressed="true"]) { background: var(--bp-gray-100); }

/* Font-size scope (set by user via switcher) */
.bp[data-fs="lg"]  { font-size: 18px; }
.bp[data-fs="lg"] h1 { font-size: 42px; }
.bp[data-fs="lg"] h2 { font-size: 26px; }
.bp[data-fs="xl"]  { font-size: 20px; }
.bp[data-fs="xl"] h1 { font-size: 48px; }
.bp[data-fs="xl"] h2 { font-size: 30px; }

/* Trust strip */
.bp .trust { display: flex; gap: var(--bp-sp-6); padding: var(--bp-sp-4) 0; font-size: var(--bp-fs-sm); color: var(--bp-gray-700); border-top: 1px solid var(--bp-gray-200); border-bottom: 1px solid var(--bp-gray-200); }
.bp .trust span { display: inline-flex; align-items: center; gap: var(--bp-sp-2); }
.bp .trust__num { font-weight: 700; color: var(--bp-ink); font-variant-numeric: var(--bpd-numeric); font-feature-settings: "tnum"; }

/* Skip link */
.bp .skip-link { position: absolute; left: -9999px; top: var(--bp-sp-2); background: var(--bp-yellow-600); color: var(--bp-ink); padding: 8px 12px; font-weight: 700; }
.bp .skip-link:focus { left: var(--bp-sp-3); z-index: 999; outline: 3px solid var(--bp-ink); }

/* Token card scaffolding (Canvas-only) */

/* Generic artboard wrapper */

/* ============ Mega-Navigation ============ */
.bp .mn-root { position: relative; display: flex; align-items: center; }
.bp .mn-tabs { list-style: none; padding: 0; margin: 0; display: flex; gap: 2px; align-items: stretch; }
.bp .mn-tab-li { display: flex; }
.bp .mn-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 8px 12px;
  font-family: var(--bp-font-body); font-size: var(--bp-fs-md); font-weight: 500;
  color: var(--bp-ink); cursor: pointer; border-radius: var(--bp-radius);
  line-height: 1; transition: background 120ms ease;
}
.bp .mn-tab:hover { background: var(--bp-gray-100); }
.bp .mn-tab--open { background: var(--bp-gray-100); }
.bp .mn-tab--active { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.bp .mn-tab:focus-visible { outline: 2px solid var(--bp-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bp-yellow-600); }

.bp .mn-caret { transition: transform 140ms ease; color: var(--bp-gray-600); flex: 0 0 auto; }
.bp .mn-caret--open { transform: rotate(180deg); color: var(--bp-ink); }
.bp .mn-tab--active .mn-caret { color: var(--color-brand); }

/* Panel-Container — sitzt als Card unterhalb des Headers (nicht full-bleed).
 * Breite an der Tab-Breite ausgerichtet, max 920 px. */
.bp .mn-panel-wrap {
  position: absolute;
  /* Versatz: Header-Inner-Padding (sp-4 = 20px) + 1px Bottom-Border + 6px Gap
   * → Panel sitzt unter der Header-Trennlinie, nicht überlappend */
  top: calc(100% + var(--bp-sp-4) + 7px);
  left: 50%;
  width: 920px; max-width: calc(100vw - 48px);
  background: #fff; border: 1px solid var(--bp-gray-200);
  border-radius: var(--bp-radius);
  box-shadow: 0 14px 32px -16px rgba(15, 59, 107, 0.22);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  z-index: 40;
}
.bp .mn-panel-wrap--open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}
.bp .mn-panel-inner { padding: var(--bp-sp-6) var(--bp-sp-6); }

/* Panel-Layout — drei Spalten, immer gleiches Grid */
.bp .mn-panel { display: grid; gap: 0; }
.bp .mn-panel--3col { grid-template-columns: repeat(3, 1fr); }
.bp .mn-panel > * { padding: 0 var(--bp-sp-6); }
.bp .mn-panel > *:first-child { padding-left: 0; }
.bp .mn-panel > *:last-child { padding-right: 0; }
.bp .mn-panel > * + * { border-left: 1px solid var(--bp-gray-200); }

/* Spalten */
.bp .mn-col { display: flex; flex-direction: column; gap: var(--bp-sp-2); min-width: 0; }
.bp .mn-col__label {
  font-family: var(--bp-font-body); font-size: var(--bp-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-gray-700);
  margin-bottom: var(--bp-sp-2);
}
.bp .mn-col__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bp .mn-col__list a {
  display: inline-block; color: var(--bp-ink); text-decoration: none;
  font-size: var(--bp-fs-md); line-height: 1.4; padding: 2px 0;
}
.bp .mn-col__list a:hover { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bp .mn-col__hint {
  margin-top: var(--bp-sp-2);
  font-size: var(--bp-fs-xs); color: var(--bp-gray-700); line-height: 1.5;
  font-style: italic;
}
.bp .mn-col__all {
  margin-top: var(--bp-sp-2); align-self: flex-start;
  font-size: var(--bp-fs-sm); color: var(--color-brand); font-weight: 600;
  text-decoration: none;
}
.bp .mn-col__all:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* NotifyBox */
.bp .mn-notify {
  margin-top: var(--bp-sp-3);
  border-left: 4px solid var(--color-brand);
  background: var(--bp-blue-50);
  padding: var(--bp-sp-3) var(--bp-sp-4);
  border-radius: 0 var(--bp-radius) var(--bp-radius) 0;
}
.bp .mn-notify__title {
  font-family: var(--bp-font-display); font-weight: 600;
  font-size: var(--bp-fs-md); color: var(--bp-ink);
  line-height: 1.25; margin-bottom: 4px;
}
.bp .mn-notify__body { font-size: var(--bp-fs-sm); color: var(--bp-gray-800); line-height: 1.5; margin-bottom: var(--bp-sp-3); }
.bp .mn-notify__form { display: flex; gap: 6px; }
.bp .mn-notify__input {
  flex: 1; min-width: 0;
  border: 1px solid var(--bp-gray-400); background: #fff;
  border-radius: var(--bp-radius); padding: 8px 10px;
  font: inherit; font-size: var(--bp-fs-sm); color: var(--bp-ink);
}
.bp .mn-notify__input:focus { outline: 2px solid var(--bp-ink); outline-offset: 0; border-color: var(--bp-ink); }
.bp .mn-notify__submit {
  border: 0; background: var(--color-brand); color: #fff;
  font: inherit; font-size: var(--bp-fs-sm); font-weight: 600;
  padding: 8px 14px; border-radius: var(--bp-radius); cursor: pointer;
  white-space: nowrap;
}
.bp .mn-notify__submit:hover { background: var(--color-brand-hover); }
.bp .mn-notify__done { font-size: var(--bp-fs-sm); color: var(--bp-green-700); font-weight: 600; }

/* Address-Check-CTA — sachlicher Block für Tab Baupotenzial */
.bp .mn-acta {
  background: var(--bp-gray-100);
  border-radius: var(--bp-radius);
  padding: var(--bp-sp-5) var(--bp-sp-5);
  display: flex; flex-direction: column; gap: var(--bp-sp-2);
  align-self: start;
}
.bp .mn-acta__title {
  font-family: var(--bp-font-display); font-weight: 600;
  font-size: var(--bp-fs-2xl); color: var(--bp-ink); line-height: 1.2;
}
.bp .mn-acta__body { font-size: var(--bp-fs-sm); color: var(--bp-gray-800); line-height: 1.55; margin: 0; }
.bp .mn-acta__link {
  margin-top: var(--bp-sp-2); align-self: flex-start;
  color: var(--color-brand); font-weight: 600; font-size: var(--bp-fs-md);
  text-decoration: none;
}
.bp .mn-acta__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bp .mn-acta__note { margin-top: var(--bp-sp-2); font-size: var(--bp-fs-xs); color: var(--bp-gray-600); }

/* Header — Anpassung für CTA-Button rechts.
 * Höhere Spezifität als .site-header__nav a, sonst überschreibt
 * die Nav-Link-Regel die weiße Schriftfarbe → schwarz auf blau. */
.bp .site-header__nav .site-header__cta,
.bp .site-header__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-brand); color: #fff;
  padding: 8px 16px; border-radius: var(--bp-radius);
  font-weight: 600; text-decoration: none; font-size: var(--bp-fs-md);
  white-space: nowrap;
}
.bp .site-header__nav .site-header__cta:hover,
.bp .site-header__cta:hover { background: var(--color-brand-hover); color: #fff; text-decoration: none; }

/* Im neuen Header ist .site-header__nav schmaler, gap weiter */
.bp .site-header__nav { gap: var(--bp-sp-3); }

/* Ortsteilseite — Ergänzungen zum bplan-Designsystem.
   Nur Komponenten, die der Canvas nicht enthält: Lesespalte, klebende
   Kapitelleiste, Karte, Adress-/Flurstück-Ergebnis, Planliste, Weiterlesen,
   Datenstand-Streifen, mobile Navigation. Alle Werte aus den Tokens. */

/* ---------- Eine Breite für die ganze Seite ----------
   Fließtext, Karte und Tabellen teilen sich jetzt dieselbe Spalte über die
   volle Containerbreite. Die vorher zentrierte 680px-Lesespalte hat auf
   großen Bildschirmen zu viel Fläche leer gelassen.
   Lange Zeilen sind schwerer zurückzuverfolgen; deshalb steht der Zeilen-
   abstand im Fließtext höher, und Absätze bekommen text-wrap: pretty. */
.bp { --bpd-wide: var(--bp-width-container); }
.bp .reader { max-width: 100%; padding-bottom: var(--bp-sp-9); }
.bp .reader > section { margin-top: var(--bp-sp-8); }
.bp .reader > section:first-child { margin-top: var(--bp-sp-6); }
.bp .reader p,
.bp .reader li,
.bp .reader .section-intro,
.bp .reader .summary__list { max-width: none; }
.bp .reader .editorial p,
.bp .reader .section-intro { line-height: 1.75; }
/* Karte und Tabellen füllen dieselbe Spalte wie der Text, brauchen also
   keinen Ausbruch mehr. */
.bp .breakout,
.bp .reader .map-wrap,
.bp .reader .dtable-wrap,
.bp .reader .comparison-scroll { width: 100%; margin-inline: 0; }

/* ---------- Klebende Kapitelleiste ---------- */
.bp .pagenav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--bp-gray-200);
}
.bp .pagenav__inner { display: flex; align-items: center; gap: var(--bp-sp-4); min-height: 48px; }
.bp .pagenav__label { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-gray-700); white-space: nowrap; }
.bp .pagenav__links { display: flex; gap: var(--bp-sp-4); overflow-x: auto; scrollbar-width: none; }
.bp .pagenav__links::-webkit-scrollbar { display: none; }
.bp .pagenav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--bp-gray-800); text-decoration: none; white-space: nowrap;
  font-size: var(--bp-fs-sm); border-bottom: 2px solid transparent;
}
.bp .pagenav__links a:hover { color: var(--color-brand); }
.bp .pagenav__links a[aria-current="location"] { color: var(--color-brand); font-weight: 600; border-bottom-color: var(--color-brand); }
.bp main section { scroll-margin-top: 64px; }
.bp h2 { scroll-margin-top: 64px; }

/* ---------- Handlungsaufforderung zwischen den Kapiteln ---------- */

/* ---------- Verweis auf eine Grundlagenseite ---------- */
.bp .topic-link { margin-top: var(--bp-sp-5); font-size: var(--bp-fs-md); font-weight: 600; }
.bp .topic-back { margin-top: var(--bp-sp-5); font-weight: 600; }
.bp .weiterlesen__list--row { display: flex; flex-wrap: wrap; gap: var(--bp-sp-2) var(--bp-sp-6); }

/* ---------- Seitenlayout ---------- */
.bp main section { scroll-margin-top: var(--bp-sp-5); }
.bp .reader > section:first-child { margin-top: 0; }
.bp .lede { font-family: var(--bp-font-display); font-size: var(--bp-fs-2xl); line-height: 1.5; color: var(--bp-gray-800); max-width: 100%; margin: 0 0 var(--bp-sp-4); }
.bp .section-intro { max-width: 100%; color: var(--bp-gray-800); font-size: var(--bp-fs-lg); line-height: 1.65; }
.bp .source-line { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: 0 0 var(--bp-sp-4); max-width: 100%; }
.bp .source-line a { overflow-wrap: anywhere; }
.bp .local-note { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); max-width: 100%; }
.bp h2 { scroll-margin-top: var(--bp-sp-5); }
.bp .editorial h2 { font-size: var(--bp-fs-4xl); margin-bottom: var(--bp-sp-3); }
.bp .editorial h3 { margin-top: var(--bp-sp-5); }
/* Unterüberschriften standen je nach Bauteil auf 19, 22 oder 28 Pixel.
   Eine Ebene bekommt eine Größe, sonst liest sich H3 wie H2. */
.bp .reader h3, .bp .editorial h3 { font-size: var(--bp-fs-3xl); }
.bp .editorial p { max-width: 100%; font-size: var(--bp-fs-lg); line-height: 1.65; }

/* ---------- Hero ---------- */
.bp .hero__eyebrow { color: var(--bp-gray-700); }
.bp .article-meta { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: var(--bp-sp-4) 0 0; }
.bp .article-meta span { color: var(--bp-gray-400); margin: 0 6px; }

/* ---------- Kennzahlen ---------- */
.bp .facts { grid-template-columns: repeat(4, 1fr); }
/* Das Kennzahlenband und der Text darunter standen ohne Luft aneinander. */
.bp .editorial .facts { margin-bottom: var(--bp-sp-6); }
.bp .facts__value { font-size: var(--bpd-text-kpi-lg); }

/* ---------- Suche: Vorschläge und Ergebnis ---------- */
.bp .bsuche__field .suggestions { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--bp-gray-700); max-height: 320px; overflow: auto; }
.bp .suggestions li { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--bp-gray-200); font-size: var(--bp-fs-md); }
.bp .suggestions li:last-child { border-bottom: 0; }
.bp .suggestions li[aria-selected="true"], .bp .suggestions li:hover { background: var(--bp-blue-50); color: var(--bp-ink); }
.bp .suggestions li.suggestion-heading { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); font-weight: 700; cursor: default; background: var(--bp-gray-100); }
.bp .funnel-status { font-size: var(--bp-fs-sm); color: var(--bp-gray-800); margin: var(--bp-sp-3) 0 0; min-height: 1.4em; }
.bp .funnel-status.warn { color: var(--bp-red-700); font-weight: 600; }
.bp .funnel-result { margin-top: var(--bp-sp-4); background: #fff; border: 1px solid var(--bp-gray-300); border-top: 4px solid var(--color-brand); padding: var(--bp-sp-5) var(--bp-sp-5) var(--bp-sp-4); }
.bp .funnel-result h2 { font-size: var(--bp-fs-3xl); margin: 0 0 var(--bp-sp-3); }
.bp .funnel-result h3 { font-size: var(--bp-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-gray-700); font-weight: 700; margin: var(--bp-sp-4) 0 var(--bp-sp-2); font-family: var(--bp-font-body); }
.bp .funnel-parcel dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--bp-sp-2) var(--bp-sp-4); margin: 0; }
.bp .funnel-parcel dt { font-size: var(--bp-fs-xs); color: var(--bp-gray-700); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.bp .funnel-parcel dd { margin: 2px 0 0; font-size: var(--bp-fs-md); color: var(--bp-ink); font-variant-numeric: var(--bpd-numeric); }
.bp .funnel-plan-list { list-style: none; padding: 0; margin: 0; }
.bp .funnel-plan { border-top: 1px solid var(--bp-gray-200); padding: var(--bp-sp-3) 0; }
.bp .funnel-plan-head { display: flex; gap: var(--bp-sp-3); align-items: baseline; flex-wrap: wrap; }
.bp .funnel-plan-head strong { font-family: var(--bp-font-mono); font-size: var(--bp-fs-lg); color: var(--bp-ink); }
.bp .funnel-plan-subject { margin: 4px 0 0; font-size: var(--bp-fs-md); color: var(--bp-ink); }
.bp .funnel-plan-relation { margin: 4px 0 var(--bp-sp-2); font-size: var(--bp-fs-sm); color: var(--bp-gray-700); }
.bp .funnel-hint { font-size: var(--bp-fs-sm); color: var(--bp-gray-800); background: var(--bp-yellow-50); border-left: 4px solid var(--bp-yellow-600); padding: 8px 12px; margin: var(--bp-sp-2) 0; }
.bp .funnel-empty { font-size: var(--bp-fs-lg); font-weight: 600; color: var(--bp-ink); margin-bottom: var(--bp-sp-2); }
.bp .funnel-method { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: var(--bp-sp-3) 0 0; line-height: 1.55; }
.bp .funnel-error { font-size: var(--bp-fs-md); color: var(--bp-red-700); font-weight: 600; }
.bp .funnel-report { margin-top: var(--bp-sp-3); border-top: 1px solid var(--bp-gray-200); padding-top: var(--bp-sp-3); }
.bp .funnel-report ol { font-size: var(--bp-fs-md); padding-left: 22px; }
.bp .demo-flag { font-size: var(--bp-fs-sm); background: var(--bp-yellow-50); border-left: 4px solid var(--bp-yellow-600); color: var(--bp-ink); padding: 9px 12px; margin: 0 0 var(--bp-sp-3); }
.bp .demo-email input { max-width: 360px; margin-bottom: var(--bp-sp-2); }
.bp .parcel-choice { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bp-sp-2); }
.bp .funnel-result > .btn { margin-top: var(--bp-sp-3); }
.bp .bsuche__hint .num { font-weight: 600; color: var(--bp-ink); }

/* ---------- Karte ---------- */
.bp .map-wrap { border: 1px solid var(--bp-gray-300); margin-top: var(--bp-sp-4); }
.bp #plan-map { height: 440px; background: var(--bp-gray-100); z-index: 0; }
.bp .map-loading { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); padding: var(--bp-sp-7); text-align: center; }
.bp .map-actions { display: flex; gap: var(--bp-sp-4); align-items: center; flex-wrap: wrap; padding: 10px var(--bp-sp-3); background: var(--bp-gray-100); border-top: 1px solid var(--bp-gray-300); font-size: var(--bp-fs-sm); }
.bp .map-actions button { border: 0; background: none; color: var(--color-link); font-size: var(--bp-fs-sm); padding: 4px 0; cursor: pointer; }
.bp .map-actions button[aria-pressed="true"] { font-weight: 700; color: var(--color-brand); }
.bp .map-actions > span { margin-left: auto; color: var(--bp-gray-700); font-variant-numeric: var(--bpd-numeric); }
.bp .map-note { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: var(--bp-sp-2) 0 var(--bp-sp-5); max-width: 100%; }
.bp .map-popup { font-family: var(--bp-font-body); font-size: var(--bp-fs-sm); color: var(--bp-ink); max-width: 280px; }
.bp .map-popup h3 { font-family: var(--bp-font-mono); font-size: var(--bp-fs-2xl); margin: 0 0 4px; }
.bp .map-popup p { margin: 6px 0 !important; }
.bp .map-popup .doc-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bp .map-popup button { display: block; background: none; border: 0; color: var(--color-link); font-size: var(--bp-fs-sm); margin-top: 10px; padding: 0; text-decoration: underline; cursor: pointer; }
.bp .leaflet-container { font-family: var(--bp-font-body); }
.bp .leaflet-container a { color: var(--color-link); }
.bp .leaflet-popup-content-wrapper { border-radius: var(--bp-radius); }
.bp .leaflet-image-layer { opacity: .85; }
.bp .leaflet-container .leaflet-control-attribution { font-size: 10px; line-height: 1.4; }

/* ---------- Planliste ---------- */
.bp .toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bp-sp-3); flex-wrap: wrap; margin: var(--bp-sp-5) 0 0; }
.bp .filters { display: flex; border-bottom: 1px solid var(--bp-gray-300); flex-wrap: wrap; }
.bp .filter { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 12px 0; margin-right: 28px; font: 600 var(--bp-fs-md)/1 var(--bp-font-body); color: var(--bp-gray-700); cursor: pointer; }
.bp .filter:hover { color: var(--color-brand); }
.bp .filter[aria-pressed="true"] { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.bp .filter:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bp .list-search { max-width: 320px; }
.bp .result-count { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: var(--bp-sp-3) 0; }
.bp .plan-name { white-space: nowrap; vertical-align: top; }
/* Ein inline-flex bricht nicht um. Berliner Plannamen sind kurz („X-B16“),
   Hamburger nicht: „Rahlstedt 78-Volksdorf 25 (1Aend)“ schob die Seite auf
   dem Telefon 25 px über den Rand. Der Name darf umbrechen, das Farbfeld
   bleibt bei der ersten Zeile. */
.bp .plan-name .ident { font-family: var(--bp-font-mono); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; max-width: 100%; }
.bp .ident__swatch { width: 12px; height: 12px; border-radius: 1px; display: inline-block; flex: 0 0 auto; }
.bp .map-select { display: block; border: 0; background: none; color: var(--color-link); font-size: var(--bp-fs-xs); padding: 6px 0 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bp .plan-subject { display: block; font-size: var(--bp-fs-md); font-weight: 600; color: var(--bp-ink); line-height: 1.4; }
.bp .plan-location { display: block; font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 2px; line-height: 1.45; }
.bp .plan-meta-line { display: block; font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 6px; font-variant-numeric: var(--bpd-numeric); }
.bp .plan-record { margin-top: 6px; font-size: var(--bp-fs-sm); }
.bp .plan-record > summary { cursor: pointer; color: var(--color-link); }
.bp .plan-record dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--bp-sp-4); margin: var(--bp-sp-3) 0 var(--bp-sp-2); }
.bp .plan-record dd { overflow-wrap: break-word; }
.bp .plan-record dl > div { display: contents; }
.bp .plan-record dt { font-weight: 600; color: var(--bp-gray-700); font-size: var(--bp-fs-sm); }
.bp .plan-record dd { margin: 0; color: var(--bp-ink); font-size: var(--bp-fs-sm); }
.bp .plan-record > p { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); max-width: 640px; margin: 0; }
.bp .doc-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* „Begründung 2017 (historisch)“ ist breiter als die Spalte; ohne Umbruch
   stand der Linktext rechts neben der Tabelle. */
.bp .doc-links a { font-size: var(--bp-fs-sm); overflow-wrap: break-word; }
.bp .doc-missing { display: block; font-size: var(--bp-fs-xs); color: var(--bp-gray-700); margin-top: 4px; }
.bp .status-note { display: block; font-size: var(--bp-fs-xs); color: var(--bp-gray-700); margin-top: 4px; }
.bp .list-note { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); padding: var(--bp-sp-3) 0; border-bottom: 1px solid var(--bp-gray-200); margin: 0; }
.bp #no-results { font-size: var(--bp-fs-md); padding: var(--bp-sp-4) 0; }
.bp .dtable td.area { max-width: 420px; }

/* ---------- Verfahrenstabelle ---------- */
.bp .termin-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-gray-600); margin-bottom: 2px; }
.bp .termin-label--offen { color: var(--bp-red-700); }
.bp .termin-wert { font-family: var(--bp-font-mono); font-size: var(--bp-fs-sm); color: var(--bp-gray-800); }
.bp .verfahren-sub { font-size: var(--bp-fs-xs); color: var(--bp-gray-600); margin-top: 2px; }
.bp .verfahren-actions { display: flex; gap: var(--bp-sp-4); flex-wrap: wrap; align-items: center; margin-top: var(--bp-sp-4); font-size: var(--bp-fs-sm); }

/* ---------- Zuständigkeit ---------- */
.bp .zustaendig-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--bp-sp-7); align-items: start; }
.bp .zustaendig-cards { display: grid; gap: var(--bp-sp-3); }
.bp .zustaendig-card { border: 1px solid var(--bp-gray-300); border-top: 3px solid var(--color-brand); padding: var(--bp-sp-4); }
.bp .zustaendig-card--senat { border-top-color: var(--bp-yellow-600); }
.bp .zustaendig-card__label { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-gray-700); margin-bottom: 6px; }
.bp .zustaendig-card__value { font-family: var(--bp-font-body); font-size: var(--bpd-text-kpi-lg); font-weight: 700; line-height: 1; color: var(--bp-blue-700); font-variant-numeric: var(--bpd-numeric); }
.bp .zustaendig-card--senat .zustaendig-card__value { color: var(--bp-gray-700); }
.bp .zustaendig-card__sub { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 6px; }

/* ---------- Behördenbox ---------- */
.bp .authority-card { border: 1px solid var(--bp-blue-100); background: var(--bp-blue-50); padding: var(--bp-sp-6); margin-top: var(--bp-sp-5); overflow-wrap: anywhere; }
.bp .authority-kicker { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); margin: 0 0 6px; }
.bp .authority-card h3 { font-size: var(--bp-fs-3xl); margin: 0 0 4px; }
.bp .authority-organization { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: 0 0 var(--bp-sp-3); }
.bp .authority-purpose { max-width: 680px; }
.bp .authority-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--bp-sp-7); margin: 0; }
.bp .authority-fields > div { border-top: 1px solid var(--bp-blue-100); padding: var(--bp-sp-3) 0; min-width: 0; }
.bp .authority-fields dt { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bp-gray-700); margin-bottom: 6px; }
.bp .authority-fields dd { margin: 0; font-size: var(--bp-fs-md); line-height: 1.5; }
.bp .authority-fields dd > span, .bp .authority-fields dd > a { display: block; white-space: pre-line; }
.bp .authority-fields small { display: block; font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin-top: 4px; line-height: 1.5; }
.bp .field-source a { font-size: var(--bp-fs-xs); }
.bp .authority-legal { font-size: var(--bp-fs-sm); color: var(--bp-gray-800); margin: var(--bp-sp-4) 0 var(--bp-sp-3); }
.bp .authority-actions { display: flex; flex-wrap: wrap; gap: var(--bp-sp-3); }
.bp .authority-request { border-top: 1px solid var(--bp-blue-100); margin-top: var(--bp-sp-4); padding-top: var(--bp-sp-3); font-size: var(--bp-fs-sm); }
.bp .authority-request > summary { cursor: pointer; font-weight: 600; color: var(--color-link); }
.bp .authority-request blockquote { margin: var(--bp-sp-2) 0 0; padding-left: var(--bp-sp-3); border-left: 3px solid var(--bp-blue-100); color: var(--bp-gray-800); }
.bp .authority-other { font-size: var(--bp-fs-sm); margin: var(--bp-sp-3) 0; }
.bp .authority-sources { font-size: var(--bp-fs-xs); color: var(--bp-gray-700); margin: 0; line-height: 1.6; }
.bp .authority-sources + .authority-sources { margin-top: 6px; }
.bp .research-steps li { border-top: 1px solid var(--bp-gray-200); }
.bp .research-actions-inline { font-size: var(--bp-fs-md); font-weight: 600; }

/* ---------- FAQ ---------- */
.bp .faq details { border-bottom: 1px solid var(--bp-gray-300); padding: var(--bp-sp-4) 0; }
.bp .faq details:first-of-type { border-top: 1px solid var(--bp-gray-300); }
.bp .faq summary { cursor: pointer; font: 600 var(--bp-fs-lg)/1.35 var(--bp-font-body); color: var(--bp-ink); list-style: none; display: flex; justify-content: space-between; gap: var(--bp-sp-3); }
.bp .faq summary::-webkit-details-marker { display: none; }
.bp .faq summary::after { content: "+"; font-family: var(--bp-font-mono); font-size: 22px; color: var(--bp-gray-600); line-height: 1; }
.bp .faq details[open] summary::after { content: "−"; color: var(--color-brand); }
.bp .faq details p { margin: var(--bp-sp-3) 0 0; max-width: 100%; font-size: var(--bp-fs-md); }

/* ---------- Weiterlesen ---------- */
.bp .weiterlesen { background: var(--bp-blue-50); border-top: 1px solid var(--bp-blue-100); padding: var(--bp-sp-8) 0; margin: var(--bp-sp-9) 0 0; }
/* Das Schlussband trägt eine Kapitelüberschrift und liest sich sonst
   wie eine Zwischenüberschrift. */
.bp .weiterlesen h2 { margin-bottom: var(--bp-sp-2); font-size: var(--bp-fs-4xl); }
.bp .weiterlesen__intro { color: var(--bp-gray-800); margin-bottom: var(--bp-sp-5); max-width: 100%; }
.bp .weiterlesen__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--bp-sp-6); }
.bp .weiterlesen__label { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-gray-700); margin-bottom: var(--bp-sp-3); }
.bp .weiterlesen__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.bp .weiterlesen__list a { display: block; padding: 8px 0; color: var(--color-link); text-decoration: none; font-size: var(--bp-fs-md); line-height: 1.4; }
.bp .weiterlesen__list a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bp .weiterlesen__list > li > span { display: block; padding: 8px 0; color: var(--bp-gray-600); font-size: var(--bp-fs-md); font-style: italic; }
.bp .weiterlesen__list a span { font-style: normal; color: var(--bp-gray-600); }

/* ---------- Datenstand-Streifen ---------- */

/* ---------- Vorschauleiste ---------- */
.bp .preview-bar { background: var(--bp-yellow-50); border-bottom: 1px solid var(--bp-yellow-600); font-size: var(--bp-fs-xs); color: var(--bp-ink); padding: 6px 0; }
.bp .preview-bar .site-width, .bp .preview-bar .container { display: flex; justify-content: space-between; gap: var(--bp-sp-3); flex-wrap: wrap; }
.bp .preview-bar a { color: var(--bp-ink); }

/* ---------- Mobile Navigation ---------- */
.bp .nav-toggle { display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--bp-gray-400); border-radius: var(--bp-radius); padding: 8px 12px; font: 600 var(--bp-fs-md)/1 var(--bp-font-body); color: var(--bp-ink); cursor: pointer; }
.bp .mobile-nav { display: none; border-top: 1px solid var(--bp-gray-200); background: #fff; }
.bp .mobile-nav .container { padding-top: var(--bp-sp-4); padding-bottom: var(--bp-sp-4); }
.bp .mobile-nav details { border-bottom: 1px solid var(--bp-gray-200); }
.bp .mobile-nav summary { padding: 12px 0; font-weight: 600; color: var(--bp-ink); cursor: pointer; }
.bp .mobile-nav ul { list-style: none; padding: 0 0 12px; margin: 0; display: grid; gap: 2px; }
.bp .mobile-nav ul a { display: block; padding: 8px 0 8px 12px; color: var(--bp-ink); text-decoration: none; font-size: var(--bp-fs-md); }
.bp .mobile-nav .btn { margin-top: var(--bp-sp-3); width: 100%; justify-content: center; }

/* ---------- Responsiv ---------- */
@media (max-width: 1080px) {
    .bp .zustaendig-grid { grid-template-columns: 1fr; gap: var(--bp-sp-5); }
  .bp .zustaendig-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
        .bp .mn-root { display: none; }
  .bp .nav-toggle { display: inline-flex; }
  .bp .mobile-nav[data-open="true"] { display: block; }
  .bp .facts { grid-template-columns: 1fr 1fr; }
  .bp .facts__cell + .facts__cell:nth-child(3) { border-left: 0; }
  .bp .facts__cell:nth-child(3), .bp .facts__cell:nth-child(4) { border-top: 1px solid var(--bp-gray-200); }
  .bp .weiterlesen__cols { grid-template-columns: 1fr 1fr; }
    .bp .authority-fields { grid-template-columns: 1fr; }
  /* Der Kopf-Button entfaellt schmal; dieselbe Aktion steht direkt darunter
     als Adresssuche im Hero. Spezifitaet gleicht canvas.css an. */
  .bp .site-header__nav .site-header__cta, .bp .site-header__cta { display: none; }
}
@media (max-width: 640px) {
  .bp .facts { grid-template-columns: 1fr; }
  .bp .facts__cell + .facts__cell { border-left: 0; border-top: 1px solid var(--bp-gray-200); }
  .bp .weiterlesen__cols,   .bp .zustaendig-cards { grid-template-columns: 1fr; }
  .bp .hero { padding: var(--bp-sp-6) 0 var(--bp-sp-5); }
  /* „Bebauungsplan“ ist schmal breiter als die Spalte, sobald die
     Schriftstufe lg/xl greift. Deshalb fluide Groesse plus Trennung. */
  .bp .hero__title { font-size: clamp(26px, 8.4vw, var(--bp-fs-5xl)); hyphens: auto; }
  .bp .lede { font-size: var(--bp-fs-lg); }
  .bp .bsuche__addr-row { grid-template-columns: 1fr; }
  .bp .bsuche__fst-row1, .bp .bsuche__fst-row2 { grid-template-columns: 1fr 1fr; }
  .bp .bsuche__fst-row2 > .btn { grid-column: 1 / -1; }
  .bp .filter { margin-right: 18px; font-size: var(--bp-fs-sm); min-height: 44px; }
  .bp .list-search { max-width: none; width: 100%; }
  .bp #plan-map { height: 320px; }
  .bp .editorial p, .bp .section-intro { font-size: var(--bp-fs-md); }
  .bp .editorial h2 { font-size: var(--bp-fs-3xl); }
  .bp .authority-card { padding: var(--bp-sp-4); }
  .bp .authority-card h3 { font-size: var(--bp-fs-2xl); }
  .bp .funnel-result { padding: var(--bp-sp-4) var(--bp-sp-3); }
  .bp .funnel-parcel dl { grid-template-columns: 1fr 1fr; }
  /* Tabellen als Karten */
  .bp .dtable, .bp .table { display: block; }
  /* In der Kartenansicht traegt jede Zelle ihre Beschriftung selbst
     (data-label). Der absolut positionierte Kopf entkam sonst dem
     Scroll-Container und verbreiterte die Seite bei grosser Schrift. */
  .bp .dtable thead, .bp .table thead { display: none; }
  .bp .dtable tbody, .bp .table tbody, .bp .dtable tr, .bp .table tr { display: block; }
  .bp .dtable tr, .bp .table tr { border-bottom: 1px solid var(--bp-gray-300); padding: var(--bp-sp-3) 0; }
  .bp .dtable td, .bp .table td { display: block; border: 0; padding: 3px 0; }
  .bp .dtable td.num, .bp .table td.num { text-align: left; }
  .bp .dtable td[data-label]::before, .bp .table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--bp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bp-gray-700); margin-bottom: 2px; }

  /* Planliste als kompakte Karte: vorher stapelten sich sechs beschriftete
     Blöcke untereinander, eine Zeile war rund 700px hoch. Jetzt trägt die
     Karte Nummer und Status in einer Zeile, darunter Gegenstand, eine
     Meta-Zeile und die Unterlagen. */
  .bp #plan-rows tr {
    display: grid;
    /* Beide Spuren müssen schrumpfen dürfen: ein langer Verfahrens-Chip
       wie „Öffentliche Auslegung 2014“ hat die Zeile sonst aufgeschoben. */
    /* Die Statusspalte bekommt einen Deckel: „Aufstellungsbeschluss“ ist
       breiter als der halbe Bildschirm und ließ der Plannummer sonst
       16 Pixel. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    grid-template-areas: "nummer status" "gegenstand gegenstand" "termin flaeche" "unterlagen unterlagen";
    gap: 4px var(--bp-sp-3);
    align-items: start;
    padding: var(--bp-sp-4) 0;
  }
  .bp #plan-rows td { min-width: 0; }
  /* In der Kartendarstellung darf der Planname umbrechen. Das nowrap aus
     der Tabellenansicht passt zu kurzen Nummern wie „X-B16“; Hamburger
     Namen wie „Farmsen-Berne 29-Tonndorf 28-Wandsbek 68“ schoben die
     Seite damit 150 px über den Rand. */
  .bp #plan-rows td.plan-name { grid-area: nummer; display: flex; align-items: center; gap: var(--bp-sp-3); flex-wrap: wrap; white-space: normal; }
  .bp #plan-rows td.area { grid-area: gegenstand; }
  .bp #plan-rows td:nth-child(3) { grid-area: status; justify-self: end; text-align: right; }
  .bp #plan-rows td:nth-child(4) { grid-area: termin; }
  .bp #plan-rows td.num { grid-area: flaeche; justify-self: end; text-align: right; }
  .bp #plan-rows td:last-child { grid-area: unterlagen; margin-top: 4px; }
  /* Nummer, Gegenstand, Status und Unterlagen brauchen keine Beschriftung. */
  .bp #plan-rows td.plan-name::before, .bp #plan-rows td.area::before,
  .bp #plan-rows td:nth-child(3)::before, .bp #plan-rows td:last-child::before { content: none; }
  /* Termin und Fläche brauchen keine eigene Überschriftzeile: „Festgesetzt
     10.06.2008“ und „4,5 ha“ sagen es selbst. Spart drei Zeilen je Karte. */
  .bp #plan-rows td:nth-child(4)::before, .bp #plan-rows td.num::before { content: none; }
  .bp #plan-rows td:nth-child(4) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  .bp #plan-rows td:nth-child(4) .termin-label { font-size: var(--bp-fs-xs); }
  .bp #plan-rows td.num::after { content: ' ha'; font-size: var(--bp-fs-xs); color: var(--bp-gray-700); }
  /* canvas.css setzt .dtable tbody td mit höherer Spezifität eine Linie;
     in der Kartenansicht ergibt das Striche mitten in der Karte. */
  .bp .dtable tbody td, .bp .table tbody td { border: 0; }
  .bp #plan-rows .plan-subject { display: block; margin-bottom: 2px; }
  .bp #plan-rows .plan-location { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bp #plan-rows .map-select { margin: 0; }
  .bp .dtable .dtable__total td { background: none; }
  /* Zwei Spalten aus Bezeichnung und Wert passen schmal nicht nebeneinander. */
  .bp .plan-record dl { grid-template-columns: 1fr; gap: 0; }
  .bp .plan-record dt { margin-top: 8px; }
  /* Dokumentlinks stehen schmal nebeneinander, brechen aber um, statt
     die Zeile zu verbreitern. */
  .bp .doc-links { flex-direction: row; flex-wrap: wrap; gap: 4px var(--bp-sp-3); }
  .bp .doc-links a { overflow-wrap: break-word; }
  .bp .comparison { display: block; min-width: 0; }
  .bp .comparison thead { display: none; }
  .bp .comparison tbody, .bp .comparison tr, .bp .comparison th, .bp .comparison td { display: block; width: auto !important; }
  .bp .comparison tr { border-bottom: 1px solid var(--bp-gray-300); padding-bottom: var(--bp-sp-3); margin-bottom: var(--bp-sp-3); }
  .bp .comparison tbody th { background: var(--bp-gray-100); padding: 10px 12px; border: 0; }
  .bp .comparison td { padding: 12px 12px 0; border: 0; }
  .bp .comparison td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; color: var(--bp-ink); margin-bottom: 4px; font-size: var(--bp-fs-sm); }
    /* Identifier-Leiste: drei Spalten quetschen den Satz auf schmalen
     Viewports in eine sehr enge Spalte — deshalb untereinander. */
  .bp .identifier__inner { flex-direction: column; align-items: flex-start; gap: var(--bp-sp-2); }
  .bp .identifier__right { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .bp *, .bp *::before, .bp *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .bp .preview-bar, .bp .identifier, .bp .site-header, .bp .sidebar, .bp .mobile-toc, .bp .map-wrap, .bp .site-footer, .bp .weiterlesen, .bp .funnel-result { display: none; }
    .bp { font-size: 11pt; }
}

/* ---------- Rechenhilfe ---------- */
.bp .link-button { background: none; border: 0; padding: 0; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: var(--bp-fs-md); }
.bp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bp .example-documents a { font-size: var(--bp-fs-sm); }
.bp .plan-example { border-bottom: 1px solid var(--bp-gray-200); padding-bottom: var(--bp-sp-5); margin-top: var(--bp-sp-5); }
.bp .plan-example:last-child { border-bottom: 0; }
.bp .plan-example h3 { font-family: var(--bp-font-display); font-size: var(--bp-fs-3xl); text-transform: none; letter-spacing: -0.01em; color: var(--bp-ink); margin-top: 0; }
.bp .explanation { font-size: var(--bp-fs-md); }
.bp .explanation > summary { color: var(--color-link); cursor: pointer; font-size: var(--bp-fs-sm); }
.bp .explanation p { margin-top: var(--bp-sp-2); color: var(--bp-gray-800); }

/* ---------- Korrekturen aus der visuellen Abnahme V7 ---------- */
/* Gleichmäßiger Abstand zwischen den Lesekapiteln; vorher stieß die
   Quellenzeile eines Abschnitts direkt an die nächste Überschrift. */
.bp .reader > section { margin-top: var(--bp-sp-8); }
.bp .reader > section:first-of-type { margin-top: var(--bp-sp-6); }

/* Aktionslinks über den Rechercheschritten: eigener Block mit Abstand,
   damit die beiden Links nicht aneinanderkleben. */
.bp .research-actions {
  display: flex; flex-wrap: wrap; gap: var(--bp-sp-2) var(--bp-sp-5);
  margin: var(--bp-sp-4) 0 var(--bp-sp-5);
  font-size: var(--bp-fs-md);
}

/* Plansuche: Platzhalter passt bei 320px nicht in das Feld. */
.bp .toolbar .bsuche__field { flex: 1 1 300px; }
.bp .list-search { max-width: 460px; width: 100%; }

/* Datenstand-Streifen und Footer stoßen direkt aneinander — der
   Sicherheitsabstand des Footers erzeugte sonst ein weißes Band. */
.bp .datenstand + .site-footer { margin-top: 0; }

/* Weiterlesen: Pfeil bleibt am letzten Wort, Zeilen bleiben kompakt. */
.bp .weiterlesen__list a { text-wrap: pretty; }

/* Footer-Spaltenabschluss ist inline-flex — ohne gap klebte der Chevron am Text. */
.bp .site-footer__col-all { gap: 4px; }

/* Breite Tabellen scrollen in ihrem eigenen Container, statt die Seite
   horizontal zu schieben (die Planliste braucht ab 1440px die volle Breite).
   Unter 640px stehen die Zeilen als Karten — dort kein Scroll-Container. */
/* Der Rahmen scrollt auf jeder Breite. Bis zum 19.09.2026 erst ab 641 px:
   Man verließ sich darauf, dass die Kartendarstellung auf dem Telefon nie
   überläuft — richtig für Berliner Plannamen wie „X-B16“, falsch für
   „Farmsen-Berne 29-Tonndorf 28-Wandsbek 68“, das die Seite um 153 px
   über den Rand schob. Wo nichts überläuft, erscheint auch keine
   Bildlaufleiste. */
.bp .dtable-wrap { overflow-x: auto; }

/* ---------- Schriftgrößen-Umschalter wirksam machen ---------- */
/* canvas.css setzt bei [data-fs] nur die Wurzel-Schriftgröße. Alle Komponenten
   lesen aber die festen Pixel-Token, deshalb blieb der Fließtext unverändert.
   Hier wird die gesamte Typo-Skala pro Stufe neu gesetzt — ein Faktor von
   1,125 (lg) beziehungsweise 1,25 (xl), auf ganze Pixel gerundet. */
.bp[data-fs="lg"] {
  --bp-fs-7xl: 63px; --bp-fs-6xl: 50px; --bp-fs-5xl: 40px;
  --bpd-text-kpi-xl: 63px; --bpd-text-kpi-lg: 45px;
  --bp-fs-4xl: 32px; --bp-fs-3xl: 25px; --bp-fs-2xl: 21px;
  --bp-fs-lg: 19px; --bp-fs-md: 18px; --bp-fs-sm: 16px; --bp-fs-xs: 14px;
}
.bp[data-fs="xl"] {
  --bp-fs-7xl: 70px; --bp-fs-6xl: 55px; --bp-fs-5xl: 45px;
  --bpd-text-kpi-xl: 70px; --bpd-text-kpi-lg: 50px;
  --bp-fs-4xl: 35px; --bp-fs-3xl: 28px; --bp-fs-2xl: 24px;
  --bp-fs-lg: 21px; --bp-fs-md: 20px; --bp-fs-sm: 18px; --bp-fs-xs: 15px;
}
/* Die festen h1/h2-Größen aus canvas.css würden die skalierten Token wieder
   überschreiben (h1 wurde bei „lg“ sogar kleiner). Zurück auf die Token. */
.bp[data-fs="lg"] h1, .bp[data-fs="xl"] h1 { font-size: var(--bp-fs-6xl); }
.bp[data-fs="lg"] h2, .bp[data-fs="xl"] h2 { font-size: var(--bp-fs-4xl); }

/* ---------- Robustheit bei vergrößerter Schrift ---------- */
/* Lange deutsche Komposita (z. B. „Bezirksverordnetenversammlung“) sprengen
   bei Stufe lg/xl auf schmalen Viewports die Rasterspalte der Verfahrens-
   schritte. Die Spalte darf schrumpfen, das Wort darf umbrechen. */
.bp .psteps__item > * { min-width: 0; }
.bp .psteps__title, .bp .psteps__body { overflow-wrap: break-word; }

/* Der Kopf darf bei großer Schrift umbrechen, statt die Seite zu verbreitern. */
.bp .site-header__inner { flex-wrap: wrap; }
.bp .site-header__nav { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* Lange Komposita und Quellenangaben duerfen umbrechen statt herauszuragen. */
.bp h1, .bp h2, .bp h3 { overflow-wrap: break-word; }
.bp .article-meta, .bp .source-line, .bp .stand-badge { overflow-wrap: anywhere; }
/* Sicherheitsnetz für deutsche Komposita: bricht nur, wenn ein Wort sonst
   aus seiner Spalte ragen würde (z. B. „Grund-/Geschossflächenvorgaben“
   in der Kartenansicht bei vergrößerter Schrift). */
.bp td, .bp th, .bp dd, .bp li, .bp .editorial p { overflow-wrap: break-word; }
.bp .site-footer__col { min-width: 0; }
/* Spaltenüberschriften nicht mitten im Wort trennen; stattdessen stapeln
   die Spalten sehr schmal auf eine einzige, sonst laufen die Links
   ineinander (canvas.css bleibt bis 480px bei zwei Spalten). */
.bp .site-footer__col-list a { overflow-wrap: break-word; }
@media (max-width: 480px) {
  .bp .site-footer__cols { grid-template-columns: 1fr; gap: var(--bp-sp-4); }
  .bp .site-footer__col-all { margin-top: var(--bp-sp-2); }
}

/* ---------- Spaltenbreiten der Planliste ----------
   Ohne Vorgabe bekam „Gegenstand & Lage“ nur rund 28 Zeichen je Zeile,
   während „Unterlagen“ Platz verschenkte. */
/* Nur die Planliste bekommt feste Spalten; andere Tabellen teilen sich die
   Breite nach Inhalt auf. */
/* Beide Planlisten teilen dasselbe Spaltenraster: Nummer, eine breite
   Lagespalte und rechts die schmalen Sachspalten. */
/* Die Breiten hängen an benannten Spalten, nicht an ihrer Position: eine
   zusätzliche Spalte in der Planliste verschiebt damit kein Raster mehr. Die
   Nachbartabelle kennzeichnet sich über ihre eigene Klasse statt über die
   Spaltenzahl. */
@media (min-width: 641px) {
  .bp .dtable--plans { table-layout: fixed; }
  .bp .dtable--plans .col-plan { width: 96px; }
  .bp .dtable--plans .col-status { width: 152px; }
  .bp .dtable--plans .col-date { width: 132px; }
  .bp .dtable--plans .col-area { width: 104px; }
  .bp .dtable--plans .col-docs { width: 156px; }
  .bp .dtable--neighbours .col-locality { width: 128px; }
  .bp .dtable--neighbours .col-status { width: 152px; }
  .bp .dtable--neighbours .col-share { width: 132px; }
  /* „Planfläche · ha“ braucht mehr Platz als die Zahl darunter, sonst läuft
     die Überschrift in die Unterlagenspalte. */
  .bp .dtable--neighbours .col-area { width: 132px; }
  .bp .dtable--neighbours .col-docs { width: 148px; }
}
/* Die Kennzahlen stehen jetzt auf Textbreite: zwei mal zwei statt vier nebeneinander. */
/* Vier Kennzahlen nebeneinander; in der schmalen Lesespalte waren es zwei.
   Nur ab 901px — darunter greifen die Stapelregeln weiter unten. */
@media (min-width: 901px) {
  .bp .reader .facts { grid-template-columns: repeat(3, 1fr); }
}

/* Die Flächenspalte war zu schmal für ihre eigene Überschrift; „Fläche · ha“
   lief in „Unterlagen“ hinein. */


/* ---------- Satzmaß auch außerhalb der Lesespalte ----------
   Hero-Einleitung, Kartenhinweis, FAQ-Antworten und der Methodikteil im
   Datenstand liefen bis zu 101 Zeichen je Zeile. */
/* Auch die Nebentexte laufen über die volle Breite. */
.bp .reader .map-note,
.bp .reader .list-note,
.bp .faq details p,
.bp .weiterlesen__intro,
.bp .local-note,
.bp .source-line { max-width: none; }

/* ---------- Datenstand als ruhige Fußzeile ----------
   Vorher ein dunkler Streifen mit vier großen Werten über einen ganzen
   Bildschirm. Quellen, Lizenz und Verantwortung stehen jetzt klein am Ende;
   Methodik und Dateien liegen hinter einer Aufklappzeile. */
.bp .datenstand { border-top: 1px solid var(--bp-gray-300); padding: var(--bp-sp-5) 0 var(--bp-sp-6); background: var(--bp-paper); }
.bp .datenstand__heading { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-gray-700); margin: 0 0 var(--bp-sp-3); font-family: var(--bp-font-body); }
.bp .datenstand__facts { display: flex; flex-wrap: wrap; gap: 4px var(--bp-sp-3); font-size: var(--bp-fs-sm); color: var(--bp-gray-800); margin: 0 0 var(--bp-sp-2); }
/* nowrap hielt die Angaben zusammen, sprengte schmal aber die Zeile.
   Stattdessen bleibt nur die Beschriftung mit ihrem Wert verbunden. */
.bp .datenstand__fact { display: inline-flex; flex-wrap: wrap; gap: 0 5px; }
.bp .datenstand__label { color: var(--bp-gray-600); }
.bp .datenstand__note { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); line-height: 1.65; margin: 0 0 var(--bp-sp-2); }
.bp .datenstand__more { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); }
.bp .datenstand__more > summary { cursor: pointer; color: var(--color-link); }
.bp .datenstand__more p { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); line-height: 1.65; margin: var(--bp-sp-2) 0 0; }

/* ====================================================================
   Behördlicher Stil — Farbflächen zurücknehmen
   ====================================================================
   Das Designsystem arbeitete mit getönten Kästen plus farbiger Kante
   (blau, grün, gelb, rot) und mit Status-Pillen auf Pastellgrund. Diese
   Kombination liest sich wie eine generierte Marketingseite, nicht wie
   eine Verwaltungsauskunft. Ersetzt durch: weißer Grund, Haarlinien,
   Großbuchstaben-Beschriftung, Farbe nur dort, wo sie den Status trägt,
   und dann entsättigt in Aktenfarben statt in Signalfarben. */
.bp {
  /* Der Umbau-Vorschlag nutzt zwei Blaustufen, die der Tokensatz noch nicht
     führt. Ohne sie fällt die background-Kurzform ersatzlos aus und die
     Fläche „Im Verfahren“ bleibt durchsichtig. */
  --bp-blue-600: #5A85B4;
  --bp-blue-300: #A8BCD2;

  /* Eine Hue, drei Zustände. Planstatus ist ein Rechtszustand, keine Note —
     eine Ampel aus Grün, Oliv und Rot bewertet ihn, statt ihn zu benennen.
     Vorläufigkeit und Außerkrafttreten werden über Textur codiert. */
  --bpd-status-force:    var(--bp-blue-900);
  --bpd-status-progress: var(--bp-blue-300);
  --bpd-status-void:     var(--bp-gray-300);
  --bpd-status-frist:    var(--bp-red-700);   /* nur Fristen und laufende Auslegungen */
  --bpd-rule:            #B9BCBE;   /* Haarlinie */
}

/* ---- Status: Text statt Pille ---- */
.bp .chip {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-family: var(--bp-font-body); font-size: var(--bp-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--bp-gray-800); white-space: normal;
}

.bp .status-note { display: block; margin-top: 3px; font-size: var(--bp-fs-xs); color: var(--bp-gray-600); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---- Statusverteilung: entsättigt, mit Rahmen statt Leuchtfarben ---- */
.bp .status-bars { border: 1px solid var(--bpd-rule); border-radius: 0; height: 34px; }
.bp .bar-segment { border-radius: 0; font-weight: 700; }
.bp .bar-segment.in_force { background: var(--bpd-status-force); color: #fff; }
.bp .bar-segment.in_progress { background: var(--bpd-status-progress); color: #fff; }
.bp .bar-segment.out_of_force { background: var(--bpd-status-void); color: #fff; }
.bp .bar-segment + .bar-segment { border-left: 1px solid #fff; }
.bp .legend-dot { border-radius: 0; }
.bp .legend-dot.in_force { background: var(--bpd-status-force); }
.bp .legend-dot.in_progress { background: var(--bpd-status-progress); }
.bp .legend-dot.out_of_force { background: var(--bpd-status-void); }

/* ---- Hinweiskästen: keine Tönung, nur Kante und Beschriftung ---- */
.bp .notice {
  border-left: 4px solid var(--bp-blue-900); background: var(--bp-blue-50);
  border-radius: 0; padding: 16px 20px;
}
.bp .notice--info, .bp .notice--success, .bp .notice--tip { border-left-color: var(--bp-blue-900); background: var(--bp-blue-50); }
.bp .notice--warn { border-left-color: var(--bp-yellow-600); background: var(--bp-yellow-50); }
/* Rot bedeutet auf der ganzen Seite genau eine Sache: eine laufende Frist. */
.bp .notice--deadline { border-left-color: var(--bpd-status-frist); background: var(--bp-red-50); }
.bp .notice__label { text-transform: uppercase; letter-spacing: 0.07em; font-size: var(--bp-fs-xs); font-weight: 700; color: var(--bp-gray-700); }

/* ---- Begriffskästen: Haarlinie statt blauer Fläche, § in Grau ---- */
.bp .defbox { background: none; border: 0; border-top: 1px solid var(--bpd-rule); border-radius: 0; padding: var(--bp-sp-4) 0 var(--bp-sp-4) 44px; margin: 0; }
.bp .defbox + .defbox { border-top: 1px solid var(--bp-gray-200); }
.bp .defbox::before { left: 0; top: var(--bp-sp-4); color: var(--bp-gray-500); font-size: 24px; }


/* ---- Handlungsaufforderung: umrandeter Block statt blauer Fläche ---- */

/* ---- Kennzahlen: Zahlen in Schwarz, nicht in Markenblau ---- */
.bp .facts__value { color: var(--bp-ink); }

/* ---- Flächen im Seitengerüst neutralisieren ---- */
.bp .hero--tint { background: var(--bp-gray-100); }
.bp .weiterlesen { background: none; border-top: 1px solid var(--bpd-rule); }
.bp .table tbody tr:hover, .bp .dtable tbody tr:hover { background: var(--bp-gray-100); }
.bp .funnel-result { background: none; border: 1px solid var(--bpd-rule); }

/* ---------- Kopf bleibt beim Scrollen stehen ----------
   Logo, Navigation und die Schaltfläche „Bebauungsplan prüfen“ sollen
   erreichbar bleiben; darunter klebt die Kapitelleiste. Beide zusammen
   bilden einen Stapel, dessen Höhe in --bpd-sticky steht, damit
   Sprungmarken darunter landen. */
.bp { --bpd-header-h: 68px; --bpd-nav-h: 48px; --bpd-sticky: calc(var(--bpd-header-h) + var(--bpd-nav-h)); }
.bp .site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bp-paper);
  border-bottom: 1px solid var(--bp-gray-200);
}
.bp .pagenav { top: var(--bpd-header-h); z-index: 45; background: var(--bp-paper); backdrop-filter: none; }
.bp main section, .bp h2, .bp .bsuche, .bp [id] { scroll-margin-top: calc(var(--bpd-sticky) + 12px); }
@media (max-width: 900px) {
  /* Schmal trägt der Kopf keine Mega-Navigation; er wird flacher. */
  .bp { --bpd-header-h: 60px; }
}
/* Behördenbox: blaue Fläche raus, nüchterner Rahmen. */
.bp .authority-card { background: none; border: 1px solid var(--bpd-rule); }
.bp .authority-kicker { color: var(--bp-gray-700); }

/* ---------- Häufige Fragen: größer und luftiger ----------
   Die Fragen standen in Fließtextgröße dicht untereinander und waren
   schlecht überfliegbar. */
.bp .faq details { padding: var(--bp-sp-5) 0; }
.bp .faq summary { font-size: var(--bp-fs-3xl); line-height: 1.35; align-items: baseline; }
.bp .faq summary::after { font-size: 30px; }
.bp .faq details p { margin-top: var(--bp-sp-4); font-size: var(--bp-fs-lg); line-height: 1.75; }
.bp .faq h2 { margin-bottom: var(--bp-sp-5); }
/* Nicht jeder Abschnitt trägt die Klasse „editorial“; ohne sie standen die
   Überschriften von Karte & Liste und Häufige Fragen auf 22 statt 28 Pixeln. */
.bp .reader > section > h2 { font-size: var(--bp-fs-4xl); }

/* ---------- Handlungsanleitung: zwei Register je Schritt ----------
   Vorher stand die Handlung mit ihrer Einschränkung als ein durchgehender
   Satz über die volle Breite; wer nur die Handlungen überfliegen wollte,
   konnte es nicht. Jetzt Handlung fett, Erläuterung darunter, Nummer als
   Marke auf gemeinsamer Oberkante mit einer Verbindungslinie. */
.bp .todo__intro { font-size: var(--bp-fs-md); color: var(--bp-gray-700); margin: 0 0 var(--bp-sp-4); max-width: 62ch; }
.bp .todo { list-style: none; margin: 0; padding: 0; }
.bp .todo__item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--bp-sp-3);
  align-items: start; position: relative;
  padding: var(--bp-sp-3) 0; border-top: 1px solid var(--bp-gray-200);
}
.bp .todo__item:last-child { border-bottom: 1px solid var(--bp-gray-200); }
.bp .todo__no {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--bp-blue-50); color: var(--bp-blue-900);
  font: 600 13px/1 var(--bp-font-mono); font-variant-numeric: var(--bpd-numeric);
}
/* Verbindungslinie: macht aus der Aufzählung eine sichtbare Folge. */
.bp .todo__item:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: calc(var(--bp-sp-3) + 34px);
  bottom: 0; width: 1px; background: var(--bp-gray-300);
}
.bp .todo__body { display: block; max-width: 62ch; }
.bp .todo__action { display: block; font-size: var(--bp-fs-md); font-weight: 600; line-height: 1.4; color: var(--bp-ink); }
.bp .todo__detail { display: block; margin-top: 3px; font-size: var(--bp-fs-sm); color: var(--bp-gray-700); line-height: 1.55; }
.bp .todo__detail strong { color: var(--bp-ink); font-weight: 600; }

/* ====================================================================
   Statusübersicht — Marineblau-Rampe statt Ampel
   ==================================================================== */
.bp .sw-in_force { background: var(--bp-blue-900); }
/* Ohne Schraffur: bei kleinen Kartenpolygonen kostet sie Lesbarkeit, und
   die aufgehellte Fläche unterscheidet den Zustand bereits eindeutig. */
.bp .sw-in_progress { background: var(--bp-blue-300); }
.bp .sw-out_of_force {
  background: var(--bp-gray-300);
  background-image: repeating-linear-gradient(135deg, rgba(80, 80, 80, .5) 0 1px, transparent 1px 5px);
}

.bp .st { border: 1px solid var(--bp-gray-300); background: var(--bp-paper); margin: var(--bp-sp-6) 0 0; padding: 0; }
.bp .st__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bp-sp-2);
  flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--bp-gray-200);
}
.bp .st__title { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-gray-700); }
.bp .st__total { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); font-variant-numeric: var(--bpd-numeric); }
.bp .st__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--bp-gray-200); }
.bp .stf {
  appearance: none; background: var(--bp-paper); border: 0; text-align: left;
  padding: 14px 18px 16px; cursor: pointer; font-family: var(--bp-font-body);
  display: grid; gap: 2px; position: relative; min-height: 44px; color: var(--bp-ink);
}
.bp .stf:hover { background: var(--bp-blue-50); }
.bp .stf__v { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: var(--bpd-numeric); line-height: 1.1; }
.bp .stf__k { display: flex; align-items: center; gap: 9px; font-size: var(--bp-fs-sm); color: var(--bp-gray-800); }
.bp .stf__sw { width: 12px; height: 12px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .18); }
/* Der Filterzustand wird über Kante und Tönung gezeigt, nicht über einen
   Farbwechsel — sonst kollidiert er mit der Statusfarbe. */
.bp .stf[aria-pressed="true"] { background: var(--bp-blue-50); }
.bp .stf[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bp-blue-900); }
.bp .st__rail { display: flex; height: 10px; border-top: 1px solid var(--bp-gray-200); }
.bp .st__rail span { display: block; }
.bp .st__foot { padding: 12px 18px 14px; font-size: 13px; color: var(--bp-gray-700); border-top: 1px solid var(--bp-gray-200); margin: 0; max-width: none; }
@media (max-width: 520px) { .bp .st__filters { grid-template-columns: 1fr; } }

/* ====================================================================
   Vergleichstabelle — festes Raster, alles linksbündig
   ====================================================================
   Vorher: zentrierte Kopf- und Fragenzellen über linksbündigem Text,
   Spaltenbreiten aus dem Textfluss, Beleg als langer unterstrichener
   Block. Vier Startkanten in einer Tabelle. */
.bp .cmp-cap { margin-bottom: var(--bp-sp-3); }
.bp .cmp-cap__eyebrow { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-gray-600); }
.bp .cmp-cap h3 { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-3xl); margin: 6px 0 4px; }
.bp .cmp-cap p { margin: 0; font-size: var(--bp-fs-sm); color: var(--bp-gray-700); }
.bp .cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--bp-fs-md); }
.bp .cmp__c0 { width: 24%; }
.bp .cmp thead th { text-align: left; vertical-align: bottom; padding: 0 18px 12px 0; border-bottom: 2px solid var(--bp-ink); }
.bp .cmp thead th + th { padding-left: 18px; border-left: 1px solid var(--bp-gray-200); }
.bp .cmp thead .cmp__q { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-gray-600); }
.bp .cmp__id { font-family: var(--bp-font-mono); font-size: var(--bp-fs-lg); font-weight: 600; color: var(--bp-ink); display: block; }
.bp .cmp__sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--bp-gray-700); }
.bp .cmp tbody th { text-align: left; vertical-align: top; font-weight: 600; font-size: var(--bp-fs-sm); color: var(--bp-gray-800); padding: 16px 18px 18px 0; border-bottom: 1px solid var(--bp-gray-200); line-height: 1.4; }
.bp .cmp tbody td { vertical-align: top; padding: 16px 18px 18px; border-bottom: 1px solid var(--bp-gray-200); border-left: 1px solid var(--bp-gray-200); line-height: 1.55; }
.bp .cmp tbody tr:last-child th, .bp .cmp tbody tr:last-child td { border-bottom: 0; }
.bp .cmp .src a { color: var(--bp-ink); text-decoration: underline; text-decoration-color: var(--bp-gray-400); text-underline-offset: 3px; }
.bp .cmp .src a:hover { color: var(--bp-blue-900); text-decoration-color: currentColor; }
.bp .cmp .src small { display: block; color: var(--bp-gray-600); font-size: 13px; margin-top: 3px; font-variant-numeric: var(--bpd-numeric); }
.bp .cmp-foot { display: flex; justify-content: space-between; gap: var(--bp-sp-3); flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bp-gray-200); font-size: 13px; color: var(--bp-gray-700); font-variant-numeric: var(--bpd-numeric); }
/* Status-Feld am Plankopf: der Vergleich sagt auch, ob beide Pläne gelten. */
.bp .tag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; background: var(--bp-blue-100); color: var(--bp-blue-900); }
.bp .tag i { width: 9px; height: 9px; display: block; flex: none; }
/* Unter 760px stapeln die Spalten je Frage, Plan-ID als Zwischenkopf. */
@media (max-width: 760px) {
  .bp .cmp, .bp .cmp thead, .bp .cmp tbody, .bp .cmp tr, .bp .cmp th, .bp .cmp td { display: block; }
  .bp .cmp thead { display: none; }
  .bp .cmp tbody th { border-bottom: 0; padding-bottom: 6px; }
  .bp .cmp tbody td { border-left: 0; padding: 0 0 14px; }
  .bp .cmp tbody td::before { content: attr(data-plan); display: block; font: 600 13px var(--bp-font-mono); color: var(--bp-blue-900); margin-bottom: 4px; }
}

/* ====================================================================
   Eingabefelder und Rechenhilfe
   ====================================================================
   Vorher drei gleich breite Felder mit 2-px-Rahmen: das Formular behauptete,
   alle drei Eingaben seien gleich viel Arbeit, und der wichtigste Output der
   Komponente hatte keinen Platz. */
.bp .calc { border: 1px solid var(--bp-gray-300); background: var(--bp-paper); margin: var(--bp-sp-5) 0 0; }
.bp .calc__hd { padding: 20px 22px 0; }
.bp .calc__hd h3 { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-3xl); margin: 0 0 6px; }
.bp .calc__hd p { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); margin: 0; }
/* Die Grundstücksfläche bekommt 1,6 Anteile, die Kennzahlen je 1. */
.bp .calc__grid { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 20px 22px 0; }
@media (min-width: 640px) { .bp .calc__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
.bp .f label { display: block; font-size: var(--bp-fs-sm); font-weight: 600; margin-bottom: 2px; }
.bp .f .hint { display: block; font-size: 13px; color: var(--bp-gray-600); margin-bottom: 7px; }
.bp .f__wrap { display: flex; align-items: stretch; border: 1px solid var(--bp-gray-400); border-bottom-color: var(--bp-gray-700); border-radius: var(--bp-radius); background: var(--bp-paper); }
/* Fokus nach Systemregel, nicht über die Rahmenstärke im Ruhezustand. */
.bp .f__wrap:focus-within { border-color: var(--bp-ink); box-shadow: 0 0 0 3px var(--bp-yellow-600); }
.bp .f__wrap input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; padding: 0 12px; font: 500 var(--bp-fs-md)/1 var(--bp-font-body); color: var(--bp-ink); font-variant-numeric: var(--bpd-numeric); outline: 0; }
.bp .f__wrap input::placeholder { color: var(--bp-gray-500); font-weight: 400; }
.bp .f__unit { display: grid; place-items: center; padding: 0 12px; border-left: 1px solid var(--bp-gray-200); background: var(--bp-gray-100); font-size: var(--bp-fs-sm); color: var(--bp-gray-700); white-space: nowrap; }
.bp .calc__actions { display: flex; align-items: center; gap: var(--bp-sp-4); flex-wrap: wrap; padding: 20px 22px; }
.bp .calc__error { padding: 0 22px 16px; margin: 0; font-size: var(--bp-fs-md); color: var(--bp-red-700); font-weight: 600; }
/* Ergebniszeile sitzt im Bauteil, nicht darunter. */
.bp .calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--bp-blue-100); border-top: 1px solid var(--bp-blue-100); border-bottom: 1px solid var(--bp-blue-100); }
.bp .calc__out > div { background: var(--bp-blue-50); padding: 14px 22px; }
.bp .calc__out-label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--bp-gray-700); }
.bp .calc__out .k { font-size: 13px; color: var(--bp-gray-700); }
.bp .calc__out .v { font-size: 24px; font-weight: 600; font-variant-numeric: var(--bpd-numeric); letter-spacing: -0.01em; }
.bp .calc__out .v small { font-size: var(--bp-fs-md); font-weight: 500; color: var(--bp-gray-700); margin-left: 3px; }
.bp .calc__foot { padding: 14px 22px 18px; font-size: 13px; color: var(--bp-gray-700); line-height: 1.5; margin: 0; max-width: none; }
/* Sekundäraktion als Ghost-Button: zwei Aktionen auf einer Höhe. */
.bp .btn--ghost { background: var(--bp-paper); color: var(--bp-blue-900); border: 1px solid var(--bp-gray-400); }
.bp .btn--ghost:hover { background: var(--bp-blue-50); border-color: var(--bp-blue-900); color: var(--bp-blue-900); }

/* ====================================================================
   Hinweis · Demo · Handlungsaufforderung — drei Muster
   ====================================================================
   Vorher trugen alle drei denselben dünnen Rahmen mit schwarzem
   4-px-Balken. Schwarz ist im System dem Logo vorbehalten. */
.bp .notice__label { color: var(--bp-blue-900); letter-spacing: 0.1em; }


/* Auf Textspaltenbreite begrenzt statt über die ganze Containerbreite. */
.bp .cta {
  background: var(--bp-blue-50); border: 1px solid var(--bp-blue-100); border-top: 3px solid var(--bp-blue-900);
  padding: 22px 24px; display: flex; justify-content: space-between; align-items: center;
  gap: 20px 30px; flex-wrap: wrap; max-width: 820px; margin-top: var(--bp-sp-5);
}
.bp .cta__body { min-width: min(100%, 260px); flex: 1; }
.bp .cta__t { font-family: var(--bp-font-display); font-weight: 600; font-size: var(--bp-fs-2xl); margin: 0 0 4px; }
.bp .cta p { margin: 0; font-size: var(--bp-fs-md); color: var(--bp-gray-800); max-width: 52ch; }
.bp .cta .btn { flex: none; }
@media (max-width: 640px) { .bp .cta { display: block; } .bp .cta .btn { margin-top: var(--bp-sp-3); width: 100%; } }
/* In der Planliste trägt der Status-Tag längere Beschriftungen wie
   „Öffentliche Auslegung 2014“ und darf deshalb umbrechen. */
.bp #plan-rows .tag { white-space: normal; align-items: flex-start; line-height: 1.35; padding: 3px 8px; }
.bp #plan-rows .tag i { margin-top: 4px; }

/* ---------- Proportionsschiene ohne Bedienelement ----------
   Die Statusauswahl steht jetzt bei der Karte, die Schiene im Planbestand
   zeigt nur noch das Verhältnis. */
.bp .ratio { margin: var(--bp-sp-6) 0 var(--bp-sp-6); padding: 0; }
.bp .ratio__cap { font-size: var(--bp-fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-gray-700); margin-bottom: var(--bp-sp-2); }
.bp .ratio .st__rail { border-top: 0; border: 1px solid var(--bp-gray-300); }
.bp .ratio__note { font-size: 13px; color: var(--bp-gray-700); margin: var(--bp-sp-2) 0 0; max-width: none; }

/* Die Statusauswahl sitzt direkt über der Karte, die sie steuert. */
.bp #plaene .st { margin: var(--bp-sp-4) 0 var(--bp-sp-4); }
.bp #plaene .st__filters { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--bp-gray-300); }
.bp .stf__sw--all { background: var(--bp-paper); border: 1px solid var(--bp-gray-500); }
@media (max-width: 640px) { .bp #plaene .st__filters { grid-template-columns: 1fr 1fr; } }

/* ---------- Weiterlesen: Verweis mit Begründung ---------- */
.bp .weiterlesen__list { gap: var(--bp-sp-3); }
.bp .weiterlesen__list a { display: block; padding: 0; }
.bp .weiterlesen__title { display: block; font-weight: 600; line-height: 1.4; font-size: var(--bp-fs-md); }
.bp .weiterlesen__sub { display: block; margin-top: 3px; color: var(--bp-gray-700); font-size: var(--bp-fs-sm); line-height: 1.5; }
.bp .weiterlesen__list a:hover .weiterlesen__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bp .weiterlesen__list a:hover { text-decoration: none; }
.bp .weiterlesen { padding: var(--bp-sp-7) 0; }
/* Häufige Fragen: der Weg zum ausführlichen Abschnitt. */
.bp .faq__link { margin-top: var(--bp-sp-3); font-size: var(--bp-fs-md); font-weight: 600; }

/* ---------- Statusfeld bleibt in seiner Spalte ----------
   inline-flex nimmt die Breite des Inhalts; in einer Tabelle mit festem
   Raster lief das Feld in die Nachbarspalte. */
.bp #plan-rows .tag { max-width: 100%; }
/* „Aufstellungsbeschluss“ ist breiter als seine Spalte. Ohne Trennstelle
   ragte das Wort aus dem Feld heraus und lag über der Terminspalte. */
.bp #plan-rows .tag, .bp #plan-rows .termin-label { hyphens: auto; overflow-wrap: anywhere; }
/* Ab dieser Breite ist genug Platz, damit beide Spalten das Wort ungetrennt
   tragen; die Lagespalte gibt die Pixel ab. */
@media (min-width: 1100px) {
  .bp .dtable--plans:not(.dtable--neighbours) .col-status { width: 200px; }
  .bp .dtable--plans:not(.dtable--neighbours) .col-date { width: 180px; }
}

/* ---------- Hinweise unter der Planliste ----------
   Vier gestapelte Fußnoten kosteten mehr Platz als die letzten Tabellen-
   zeilen. Der statusabhängige Hinweis bleibt sichtbar, der Rest klappt auf. */
.bp .listnotes { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); padding: var(--bp-sp-3) 0; border-bottom: 1px solid var(--bp-gray-200); }
.bp .listnotes > summary { cursor: pointer; color: var(--color-link); font-weight: 600; }
.bp .listnotes p { margin: var(--bp-sp-3) 0 0; font-size: var(--bp-fs-sm); line-height: 1.6; max-width: none; }
.bp .listnotes .verfahren-actions { font-size: var(--bp-fs-sm); }

/* Der Abstand zwischen den häufigen Fragen und Weiterlesen addierte sich aus
   60px Innenabstand der Lesespalte, 60px Außenabstand und 40px Innenabstand
   des Blocks auf 120 Pixel. Die Trennlinie leistet die Abgrenzung. */
.bp .reader { padding-bottom: var(--bp-sp-5); }
.bp .weiterlesen { margin-top: 0; padding-top: var(--bp-sp-6); }

/* ---------- Startseite ----------
   Die Bauteile stehen schon im Designsystem: .land-grid mit .land für die
   Länder, .pillars für den Wegweiser. Hier fehlt nur, was der Entwurf offen
   gelassen hat — das Verhalten in schmalen Fenstern, der vierte Wegweiser
   und der Zielgruppenblock in der Lesespalte. */

/* Der einleitende Absatz steht ohne Überschrift zwischen Titel und erstem
   Kapitel; ohne diesen Abstand klebte er am Titelblock. */
.bp .editorial--lead { padding-top: var(--bp-sp-5); }

/* Überschrift und Zählung auf einer Grundlinie, wie im Entwurf. */
.bp .section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--bp-sp-2) var(--bp-sp-4); }
.bp .section-head h2 { margin-bottom: 0; }
.bp .section-head__note { font-size: var(--bp-fs-sm); color: var(--bp-gray-700); font-variant-numeric: var(--bpd-numeric); }

/* Das Länderraster steht im Entwurf fest auf vier Spalten. Unter 1100 Pixeln
   bleibt für einen Namen wie Mecklenburg-Vorpommern zu wenig Breite. */
.bp .land__name { hyphens: auto; overflow-wrap: break-word; }
.bp .land__meta { margin-top: var(--bp-sp-1); }
@media (max-width: 1100px) { .bp .land-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .bp .land-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .bp .land-grid { grid-template-columns: 1fr; } .bp .land { min-height: 0; } }

/* Der Entwurf sieht drei Wegweiser vor, die Startseite stellt vier Fragen.
   Zwei mal zwei statt vier nebeneinander: vier Spalten ließen jeder Antwort
   weniger als dreißig Zeichen je Zeile. */
.bp .pillars--4 { grid-template-columns: repeat(2, 1fr); gap: var(--bp-sp-6) var(--bp-sp-7); }
.bp .pillars .pillar h3 { font-size: var(--bp-fs-lg); line-height: 1.35; font-family: var(--bp-font-body); }
.bp .pillars .pillar p { font-size: var(--bp-fs-md); line-height: 1.6; max-width: none; }
@media (max-width: 700px) { .bp .pillars, .bp .pillars--4 { grid-template-columns: 1fr; gap: var(--bp-sp-5); } }

/* Zielgruppe: der Absatz und die vier Fälle, die er zusammenfasst. */
.bp .zielgruppe { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--bp-sp-6) var(--bp-sp-7); align-items: start; background: var(--bp-blue-50); border-top: 1px solid var(--bp-blue-100); border-bottom: 1px solid var(--bp-blue-100); padding: var(--bp-sp-5) var(--bp-sp-5); }
.bp .zielgruppe__text p:last-child { margin-bottom: 0; }
.bp .rollen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bp-sp-3); font-size: var(--bp-fs-md); }
.bp .rollen li { display: grid; grid-template-columns: minmax(0, 170px) 1fr; gap: var(--bp-sp-3); border-bottom: 1px solid var(--bp-blue-100); padding-bottom: var(--bp-sp-2); margin: 0; }
.bp .rollen li:last-child { border-bottom: 0; padding-bottom: 0; }
.bp .rollen__wer { font-weight: 600; color: var(--bp-ink); hyphens: auto; }
.bp .rollen__was { color: var(--bp-gray-800); }
@media (max-width: 860px) {
  .bp .zielgruppe { grid-template-columns: 1fr; padding: var(--bp-sp-4); }
  .bp .rollen li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Mega-Navigation: Kasten am rechten Rand statt mittig ----------
   Der Entwurf zentriert das Klappmenü über der Navigationsleiste
   (`left: 50%; translateX(-50%)`). Das hält, solange die Leiste vier Reiter
   breit ist. Im Produktionsbau bleibt einer übrig, die Leiste schrumpft nach
   rechts — und der 920 Pixel breite Kasten stand 209 Pixel außerhalb des
   Fensters, unsichtbar, aber die Seite ließ sich seitlich scrollen.
   Am rechten Rand ausgerichtet kann das nicht mehr passieren, unabhängig
   davon, wie viele Reiter stehen. */
.bp .mn-panel-wrap { left: auto; right: 0; transform: translateY(-4px); }
.bp .mn-panel-wrap--open { transform: translateY(0); }

/* ---------- Übernommene Redaktionsartikel ----------
   Der Artikelbestand der bisherigen Website bringt zwei Bausteine mit, für die
   es im Entwurf noch keinen gibt: eine Formel mit Legende und eine Abbildung
   mit Bildunterschrift. Alles andere — Hinweis, Definition, Schrittfolge,
   Checkliste — nutzt die vorhandenen Bauteile. */

.bp .formel { border: 1px solid var(--bp-gray-300); border-left: 3px solid var(--color-brand); padding: var(--bp-sp-4) var(--bp-sp-5); margin: var(--bp-sp-5) 0; background: var(--bp-gray-100); }
.bp .formel__satz { font-family: var(--bp-font-mono); font-size: var(--bp-fs-md); line-height: 1.5; margin: 0; color: var(--bp-ink); overflow-wrap: anywhere; }
.bp .formel__legende { list-style: none; margin: var(--bp-sp-3) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--bp-fs-sm); color: var(--bp-gray-800); }
.bp .formel__legende b { font-family: var(--bp-font-mono); font-weight: 600; color: var(--bp-ink); margin-right: 6px; }
.bp .formel__beispiel { margin: var(--bp-sp-3) 0 0; font-size: var(--bp-fs-sm); line-height: 1.6; color: var(--bp-gray-800); border-top: 1px solid var(--bp-gray-300); padding-top: var(--bp-sp-3); }
.bp .formel__beispiel p { margin: 0 0 var(--bp-sp-2); font-size: inherit; max-width: none; }
.bp .formel__beispiel p:last-child { margin-bottom: 0; }
.bp .formel__beispiel ul { margin: 0 0 var(--bp-sp-2); padding-left: 20px; }
.bp .formel__beispiel li { margin: 4px 0; }

.bp .abb { margin: var(--bp-sp-6) 0; padding: 0; }
.bp .abb img { display: block; width: 100%; height: auto; border: 1px solid var(--bp-gray-300); }
.bp .abb figcaption { margin-top: var(--bp-sp-2); font-size: var(--bp-fs-sm); line-height: 1.5; color: var(--bp-gray-700); }

/* Die Zusammenfassung eines Artikels steht als Hinweis mit Liste. */
.bp .summary__list { list-style: disc; margin: var(--bp-sp-2) 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--bp-fs-md); line-height: 1.55; }
.bp .summary__list li { margin: 0; }

/* ---------- Seitenübersicht (Redaktionswerkzeug) ---------- */
.bp .uebersicht__reiter { border-top: 1px solid var(--bp-gray-300); padding-top: var(--bp-sp-4); margin-top: var(--bp-sp-5); }
.bp .uebersicht__reiter h3 { margin: 0 0 var(--bp-sp-3); font-size: var(--bp-fs-lg); font-family: var(--bp-font-body); }
.bp .uebersicht__spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bp-sp-5); }
.bp .uebersicht__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--bp-fs-sm); }
.bp .uebersicht__liste li { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
@media (max-width: 900px) { .bp .uebersicht__spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .bp .uebersicht__spalten { grid-template-columns: 1fr; } }
/* Die Übersichtstabelle trägt sechs Spalten; Adresse und Seite bekommen den
   Platz, Zustand, Index und die beiden Daten nur, was sie brauchen. */
.bp .col-adresse { width: 26%; }
.bp .col-seite { width: auto; }
.bp .col-zustand, .bp .col-index { width: 130px; }
.bp .col-datum { width: 110px; }