/* =====================================================================================
   Design-System Website — bissantz-website-components.css
   Die Komponenten (Präfix bc-, BEM) mit Basis und Schriften. Werte kommen aus bissantz-website-tokens.css
   (vorher einbinden). Eigenständig: Marktplatz und Lexikon nutzen diese Datei (noch) nicht.

   Herkunft: herausgezogen aus dem geparkten Umbau (Git-Tag umsetzung-website-entwurf,
   landingpage/bissantz/bissantz.css). Bei der Umsetzung übernehmen die Vorlagen diese Regeln
   Schritt für Schritt. Bis dahin ist diese Datei die Quelle für neue Komponenten.
   Schriften: assets/fonts/ (Kopie, selbst ausgeliefert).
   ===================================================================================== */

/* =====================================================
   SCHRIFTEN — selbst ausgeliefert (v0.19.0)
   Vorher lud jede Marktplatz-Seite Heebo und Open Sans von fonts.googleapis.com und
   fonts.gstatic.com nach. Damit ging bei jedem Besucher ungefragt die IP-Adresse an Google —
   auf einer oeffentlichen Seite eine Datenuebermittlung an Dritte ohne Einwilligung
   (Muster LG Muenchen I, 20.01.2022, 3 O 17493/20).

   Beide Schriften stehen unter der Open Font License, das Selbst-Ausliefern ist erlaubt.
   Es sind VARIABLE Fonts: eine Datei deckt alle Schnitte ab, deshalb font-weight als Bereich
   statt einer Deklaration pro Gewicht. 6 Dateien, 163 KB gesamt (Google lieferte dieselben
   Daten 14-fach benannt aus).

   Die unicode-range-Trennung latin / latin-ext ist keine Kosmetik: Browser laden nur die
   Datei, deren Zeichenbereich auf der Seite wirklich vorkommt. Deutsche Umlaute liegen in
   latin, latin-ext wird nur bei Bedarf geholt.

   Dateien liegen in assets/fonts/ und werden bei JEDEM Publish mitgepusht
   (MARKTPLATZ_FONT_FILES in routes.js).
===================================================== */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/heebo-var-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: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/heebo-var-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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/open-sans-var-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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/open-sans-var-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: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/open-sans-var-italic-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: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/open-sans-var-italic-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;
}
/* =====================================================
   RESET
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Sprungziele (Inhaltsverzeichnis, Anker) nicht unter der festen Navigation verstecken — gleicher Abstand wie bc-layout__side */
html:has(.bc-nav) { scroll-padding-top: calc(var(--layout-nav-height) + 20px); }
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* =====================================================
   A11Y
===================================================== */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}
/* =====================================================
   TYPOGRAFIE
===================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-foreground);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
p  { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
/* ===== bc-icon-button — runder Knopf nur mit Icon (Komponente Design-System Website) =====
   Als <button> oder <a>, immer mit aria-label. Steht vor der Navigation, damit Platzierungsregeln
   der Vorlagen (.nav-burger, .mp-scroll-arrow …) sie überschreiben können.
   Stile: Standard = ohne Fläche, Hover hellgrau · --filled = schwarz gefüllt · --raised = weiß mit Schatten (über Bildern/Karussell)
   Größen: --sm 32 px · Standard 40 px · --lg 44 px (Touch). User 15.10.: angeglichen. ===== */
.bc-icon-button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
  width: var(--size-control-md); height: var(--size-control-md); padding: 0;
  border: none; border-radius: var(--radius-full); background: none; color: var(--color-foreground);
  cursor: pointer; text-decoration: none; transition: background var(--duration-fast), color var(--duration-fast);
}
.bc-icon-button:hover { background: var(--color-background); }
.bc-icon-button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.bc-icon-button[hidden] { display: none; }
.bc-icon-button--sm { width: var(--size-control-sm); height: var(--size-control-sm); }
.bc-icon-button--lg { width: var(--size-control-lg); height: var(--size-control-lg); }
.bc-icon-button--filled { background: var(--color-accent); color: var(--color-foreground-inverse); }
.bc-icon-button--filled:hover { background: var(--color-accent-hover); }
.bc-icon-button--raised { --icon-button-schatten: 0 2px 12px rgba(0,0,0,.12); /* Komponente: schwebender Rundknopf */ background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--icon-button-schatten); }
.bc-icon-button--raised:hover { background: var(--color-surface); }
/* ===== bc-breadcrumb — Brotkrumen-Navigation (Komponente Design-System Website) =====
   Aufbau: nav.bc-breadcrumb > a.bc-breadcrumb__link · span.bc-breadcrumb__separator · span.bc-breadcrumb__current
   Platzierung (Abstand, Lage) setzt die Vorlage: .pd-crumbs (Produkt-Hero), .lx-breadcrumb (Lexikon-Kopf). */
.bc-breadcrumb { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-foreground-subtle); }
.bc-breadcrumb__link { text-decoration: none; color: var(--color-foreground-muted); transition: color var(--duration-fast); }
.bc-breadcrumb__link:hover { color: var(--color-foreground); }
/* ===== bc-layout — Haupt- + mitlaufende Seitenspalte (Komponente Design-System Website) =====
   Aufbau: .bc-layout > .bc-layout__main + .bc-layout__side
   Variante --compact: engere Abstände (Lexikon). Seitenränder/Breite setzt die Vorlage (.lp-inner, .lx-layout). */
.bc-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-sidebar-width); gap: var(--space-48); align-items: start; }
.bc-layout__main { display: grid; gap: var(--space-32); min-width: 0; }
.bc-layout__side {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); position: sticky; top: calc(var(--layout-nav-height) + 20px);
  max-height: calc(100vh - var(--layout-nav-height) - 36px); overflow-y: auto; overscroll-behavior: contain;
  /* grid-template-columns oben ist PFLICHT (Bug gefunden): ohne explizite Spalte sitzt eine
     implizite Grid-Spalte nach Content statt Container — lange Fakten-Zeilen (z.B. "Nicht
     zutreffend (App-fokussiert, keine Word/PowerPoint-Einbettung)") zogen die ganze Spalte
     20-30px breiter als die Randspalte, overflow-y:auto erzwingt dabei (per Spec) automatisch
     auch overflow-x:auto statt visible — Preis-/Promo-/Fakten-Kasten wurden dadurch rechts
     abgeschnitten statt einfach überzustehen. */
  /* Innenabstand + gleich großer negativer Außenabstand: die Kastenschatten werden dadurch
     beim Scrollen der Spalte nicht abgeschnitten, ohne dass sich die Position verschiebt. */
  padding: 14px; margin: -14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bc-layout__side::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bc-layout--compact { gap: 40px; }
.bc-layout--compact > .bc-layout__main, .bc-layout--compact > .bc-layout__side { gap: var(--space-24); }
@media (max-width: 1100px) /* --breakpoint-tablet-landscape */ {
  .bc-layout { grid-template-columns: minmax(0, 1fr); }
  .bc-layout__side { position: static; max-height: none; overflow-y: visible; }
  .bc-layout--compact > .bc-layout__side { padding: 0; margin: 0; }
}
/* ===== bc-box — Kasten für Inhalte (Komponente Design-System Website) =====
   Standard: weiße Karte mit Schatten. Varianten: --tight (weniger Innenabstand), --dark (dunkler
   Verlauf, heller Text, ohne Schatten), --cta (Inhalt mittig, für Abschluss-Aufrufe; mit --dark).
   Fähnchen oben links reserviert Platz über :has(> .bc-flag). */
.bc-box, .bc-callout, .bc-block { position: relative; }
.bc-box { background: var(--color-surface); border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); padding: var(--space-32); box-shadow: var(--card-shadow); }
.bc-box:has(> .bc-flag) { padding-top: 54px; }
.bc-box--tight { padding: var(--space-24); }
.bc-box--tight:has(> .bc-flag) { padding-top: 54px; }
.bc-box h2 { margin-bottom: var(--space-16); }
.bc-box--dark { background: var(--background-dark); box-shadow: none; }
.bc-box--dark h2 { font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-2xl); line-height: normal; letter-spacing: normal; color: var(--color-foreground-inverse); margin: 0 0 var(--space-12); }
.bc-box--dark p { font: var(--typo-body); color: var(--color-foreground-inverse-muted); margin: 0 0 var(--space-16); max-width: var(--layout-measure-narrow); }
.bc-box--cta { text-align: center; padding: 40px var(--space-32); }
.bc-box--cta h2 { margin-bottom: 10px; }
.bc-box--cta p { max-width: var(--layout-measure-narrow); margin: 0 auto 22px; line-height: var(--line-height-relaxed); color: var(--color-foreground-inverse-muted); }
/* ===== bc-section-title — Abschnittstitel in Boxen/Sektionen (Komponente Design-System Website) =====
   Variante --sm: kleiner (Lexikon, dunkle Kästen). Abstände je Umfeld setzt die Vorlage (z. B. .lx-main). */
.bc-section-title { font: var(--typo-heading-2); color: var(--color-foreground); margin: 0 0 var(--space-8); }
.bc-section-title--sm { font: var(--typo-heading-3); }
/* Lange Wörter (Webinaraufzeichnung, Deckungsbeitragsrechnung) dürfen auf 360 px getrennt werden, statt die Spalte aufzuweiten */
.bc-section-title, .bc-power-teaser__body h2, .bc-box h2, .bc-bullet-list li { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.bc-box { overflow-wrap: anywhere; }   /* Fließtext: ein einzelnes zu langes Wort bricht, statt den Kasten über den Rand zu schieben */
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-box { padding: var(--space-24) var(--space-16); }
  .bc-box:has(> .bc-flag) { padding-top: 46px; }
  .bc-box--dark { padding: var(--space-32); }
  .bc-box--cta { padding: 40px var(--space-32); }
}
/* Fähnchen-Ribbon — Sektions-Label als Eckzipfel-Wimpel, ersetzt .lp-eyebrow überall dort, wo
   die Referenzvorlage ein Fähnchen zeigt (jede bc-box im Hauptspalten-Inhalt + Sidebar-Preis/
   Promo/Fakten). Werte 1:1 übernommen. Immer absolut in der Box-Ecke (braucht
   position:relative auf der Box — .bc-box/.bc-callout haben das bereits).
   Der Hero-Kategorie-Badge nutzte anfangs ebenfalls ein Fähnchen (statisch im Textfluss) —
   bewusst durch .pd-category-badge (Pille) ersetzt, s. unten. */
/* ===== bc-flag — Fähnchen: Abschnitts-Etikett mit Falz in der Kastenecke (Komponente Design-System Website, Bestand .fahnchen) =====
   Aufbau: .bc-flag > .bc-flag__text + .bc-flag__fold. Steht als erstes Kind in bc-box/bc-callout; der Kasten
   reserviert dann oben Platz. Variante gelb: __text--yellow + __fold--yellow („Neu“). ===== */
.bc-flag { position: absolute; top: 12px; left: -6px; z-index: 4; }
.bc-flag__text {
  display: inline-block; white-space: nowrap;
  background: var(--background-dark);
  color: var(--color-foreground-inverse);
  font-family: var(--font-family-title); font-size: var(--font-size-2xs); font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  padding: 7px 13px 5px;
}
.bc-flag__fold {
  position: absolute; left: 0; top: calc(100% - 0.5px); width: 0; height: 0;
  --flag-falz: var(--neutral-15); /* Komponente: Falz des Fähnchens */
  border-left: 6px solid transparent; border-top: 6px solid var(--flag-falz);
}
/* Komponente: Gelb-Band („Neu"-Ecke, gelbes Fähnchen) */
.bc-flag__text--yellow { --gelb-band: linear-gradient(135deg, #ffff8a 0%, #f7ff1a 45%, #eaf500 100%); }
.bc-flag__text--yellow { background: var(--gelb-band); color: var(--color-foreground); }
.bc-flag__fold--yellow { --flag-falz: #d4dc00; }
/* ===== bc-button — Knopf als Pille (Komponente Design-System Website), als <a> oder <button>.
   Stil × Untergrund: bc-button = schwarz gefüllt · --outline = schwarze Kontur · für dunkle Flächen
   --inverse = weiß gefüllt · --inverse-outline = weiße Kontur.
   Größen: Standard 44 px / 16 px · --sm 40 / 14 · --xs 32 / 12 (--size-control-*). --block = volle Breite. Deaktiviert: --opacity-disabled.
   Der Hover kehrt die Füllung hart um; "transition: none" ist Absicht. Der Rand (2 px) bleibt
   immer da, damit sich die Größe beim Hover nicht ändert. ===== */
.bc-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--size-control-lg); padding: 0 var(--space-24); box-sizing: border-box;
  background: var(--background-dark) padding-box, var(--background-dark) border-box;
  color: var(--color-foreground-inverse); border: var(--border-width-thick) solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-family-title); font-size: var(--font-size-base); font-weight: var(--font-weight-bold);
  text-decoration: none; cursor: pointer; transition: none;
}
.bc-button:not(:disabled):hover { background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(var(--color-accent-hover), var(--color-accent-hover)) border-box; color: var(--color-foreground); }
.bc-button--outline { background: transparent; border-color: var(--color-accent); color: var(--color-foreground); }
.bc-button--outline:not(:disabled):hover { background: var(--background-dark) padding-box, var(--background-dark) border-box; border-color: transparent; color: var(--color-foreground-inverse); }
.bc-button--inverse { background: var(--color-surface); color: var(--color-foreground); border-color: var(--color-foreground-inverse); }
.bc-button--inverse:not(:disabled):hover { background: transparent; color: var(--color-foreground-inverse); }
.bc-button--inverse-outline { background: transparent; color: var(--color-foreground-inverse); border-color: var(--color-foreground-inverse); }
.bc-button--inverse-outline:not(:disabled):hover { background: var(--color-surface); color: var(--color-foreground); }
.bc-button--sm { height: var(--size-control-md); padding: 0 20px; font-size: var(--font-size-sm); }
.bc-button--xs { height: var(--size-control-sm); padding: 0 20px; font-size: var(--font-size-xs); }
.bc-button--block { display: flex; width: 100%; }
.bc-button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
/* ===== bc-field — Formularfeld: Beschriftung, Eingabe, Hilfe- oder Fehlertext (Quelle: _alt .field) =====
   Aufbau: .bc-field > label.bc-field__label (+ span.bc-field__required) · .bc-input · .bc-field__hint | .bc-field__error
   Variante --error: Rahmen und Fokus in Fehlerfarbe. */
.bc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-16); max-width: 380px; }
.bc-field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-foreground); }
.bc-field__required { color: var(--color-error); margin-left: 2px; }
.bc-field__hint { font-size: var(--font-size-xs); color: var(--color-foreground-body); }
.bc-field__error { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-xs); color: var(--color-error); }
.bc-field__error svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* ===== bc-input — Eingabe, Textfeld, Auswahl (Quelle: _alt .input/.textarea/.select) =====
   Eine Klasse für <input>, <textarea> und <select>. Pille wie Button und KI-Eingabe, 44 px hoch
   (User 15.10.); das mehrzeilige Feld kann keine Pille sein und bekommt die große Rundung.
   Fokus = schwarz (Website-Kontext). */
.bc-input {
  box-sizing: border-box; width: 100%; height: var(--size-control-lg); padding: 0 var(--space-16);
  font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-foreground);
  background: var(--color-surface); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-full);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.bc-input::placeholder { color: var(--color-foreground-subtle); }
.bc-input:hover { border-color: var(--color-foreground-subtle); }
.bc-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
textarea.bc-input { height: auto; min-height: 88px; padding: var(--space-12) var(--space-16); border-radius: var(--radius-xl); resize: vertical; line-height: var(--line-height-normal); }
.bc-input:disabled { background: var(--color-background); color: var(--color-foreground-subtle); border-color: var(--color-border-subtle); cursor: not-allowed; }
.bc-field--error .bc-input { border-color: var(--color-error); }
.bc-field--error .bc-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 18%, transparent); }
/* ===== bc-search-field — Eingabe mit Lupe (Quelle: _alt .search-field) ===== */
.bc-search-field { position: relative; max-width: 380px; }
.bc-search-field .bc-input { padding-left: 42px; }
.bc-search-field > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-foreground-subtle); pointer-events: none; }
/* ===== bc-check — Checkbox oder Radio mit Beschriftung (Quelle: _alt .check) =====
   Aufbau: label.bc-check > input[type=checkbox|radio] + Text. Variante --disabled. */
.bc-check { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-8); font-size: var(--font-size-base); color: var(--color-foreground); cursor: pointer; }
.bc-check input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.bc-check--disabled { color: var(--color-foreground-subtle); cursor: not-allowed; }
/* ===== bc-alert — Hinweis-Kasten (Quelle: _alt .alert) =====
   Aufbau: .bc-alert > svg.bc-alert__icon + div (.bc-alert__title + .bc-alert__text) [+ button.bc-icon-button.bc-icon-button--sm.bc-alert__dismiss]
   Varianten: --info (neutral, User 15.10.: KI-Blau bleibt KI-Funktionen vorbehalten), --success, --warning, --error.
   Icons auf der Tönung in der lesbaren Stufe (--color-*-strong); Rot ist schon lesbar (5:1). */
.bc-alert {
  display: flex; align-items: flex-start; gap: 10px; max-width: 560px;
  padding: var(--space-12) 14px; border-radius: var(--radius-md); border-left: 4px solid var(--color-border);
  background: var(--color-surface); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-foreground);
}
.bc-alert + .bc-alert { margin-top: var(--space-16); }
.bc-alert__icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.bc-alert__title { font-weight: var(--font-weight-bold); }
.bc-alert__text { color: var(--color-foreground-body); }
.bc-alert__dismiss { margin: -6px -6px -6px auto; }
/* bc-icon-button --sm */
.bc-alert--info { background: var(--color-surface-sunken); border-left-color: var(--color-foreground); }
.bc-alert--info    .bc-alert__icon { color: var(--color-foreground); }
.bc-alert--success { background: var(--color-success-subtle); border-left-color: var(--color-success); }
.bc-alert--success .bc-alert__icon { color: var(--color-success-strong); }
.bc-alert--warning { background: var(--color-warning-subtle); border-left-color: var(--color-warning); }
.bc-alert--warning .bc-alert__icon { color: var(--color-warning-strong); }
.bc-alert--error { background: var(--color-error-subtle); border-left-color: var(--color-error); }
.bc-alert--error   .bc-alert__icon { color: var(--color-error); }
/* ===== bc-dialog — Dialog über der Seite (Quelle: Allgemein modal-box, Aufbau aus _alt .modal) =====
   Natives <dialog> mit showModal(): Fokusfalle, Esc und Hintergrund liefert der Browser.
   Aufbau: dialog.bc-dialog > .bc-dialog__header (h2.bc-dialog__title + button.bc-icon-button.bc-icon-button--sm.bc-dialog__close)
           · .bc-dialog__body · .bc-dialog__footer (Knöpfe)
   Abweichung: Radius 12 px der Quelle → Karten-Radius; Schatten 0 24px 64px .3 → --shadow-lg;
   Titel 22,4 px → --font-size-xl (20). */
.bc-dialog {
  box-sizing: border-box; width: 90%; max-width: var(--layout-panel-width); padding: 40px var(--space-48);
  margin: auto; /* mittig; der Reset in bissantz.css (* { margin: 0 }) hebt die Browser-Zentrierung sonst auf */
  border: none; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape);
  background: var(--color-surface); color: var(--color-foreground-body); box-shadow: var(--shadow-lg);
}
.bc-dialog::backdrop { background: var(--color-overlay-strong); }
.bc-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-12); }
.bc-dialog__title { margin: 0; font: var(--typo-heading-3); letter-spacing: var(--letter-spacing-tight); color: var(--color-foreground); }
.bc-dialog__close { margin: -6px -8px 0 0; }
/* bc-icon-button --sm */
.bc-dialog__body { margin-bottom: var(--space-24); font: var(--typo-body); }
.bc-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-12); flex-wrap: wrap; }
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-dialog { padding: var(--space-24); }
}
/* ===== bc-avatar — Personenbild oder Initialen im Kreis (Quelle: _alt .avatar) =====
   Varianten: --sm (28), Standard (40), --lg (56). Gruppe: .bc-avatar-group (überlappend).
   Ergänzt: <img> darin füllt den Kreis (Quelle kannte nur Initialen). */
.bc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--radius-full); overflow: hidden;
  background: var(--background-dark); color: var(--color-foreground-inverse);
  font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-base);
}
.bc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bc-avatar--sm { width: 28px; height: 28px; font-size: var(--font-size-2xs); }
.bc-avatar--lg { width: 56px; height: 56px; font-size: var(--font-size-xl); }
.bc-avatar-group { display: flex; }
.bc-avatar-group .bc-avatar { border: var(--border-width-thick) solid var(--color-surface); margin-left: -10px; }
.bc-avatar-group .bc-avatar:first-child { margin-left: 0; }
/* ===== bc-skeleton — Platzhalter während des Ladens (Quelle: _alt .skeleton) =====
   Größe setzt die Verwendung (z. B. Zeilen der KI-Antwort). Ergänzt: ohne Bewegung bei reduzierter Bewegung. */
.bc-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-background) 50%, var(--color-border) 75%);
  background-size: 200% 100%; animation: bc-skeleton 1.4s ease-in-out infinite;
}
@keyframes bc-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .bc-skeleton { animation: none; }
}
.bc-box h3:not(.bc-subhead), .bc-box h4:not(.bc-subhead) { margin: 0; }
/* ===== bc-icon-list — Liste aus Icon + Titel + Text (Komponente Design-System Website) =====
   Aufbau: .bc-icon-list > .bc-icon-list__item > .bc-icon-list__title (Icon + Titel) + .bc-icon-list__text
   Grundform: untereinander, Icon neben dem Titel, Text bündig zum Titeltext eingerückt (Lexikon).
   Varianten (kombinierbar):
     --inline       Icon im Textfluss, Text folgt direkt (Produktseite, Problem-Raster)
     --compact      kleinerer, hellerer Text (Lexikon, Beispiele)
     --grid         zwei Spalten, kräftige Trennlinien, viel Innenabstand (Produktseite)
     --grid-subtle  zwei Spalten, feine Trennlinien, wenig Innenabstand (Lexikon, Beispiele) */
.bc-icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-16); }
.bc-icon-list__title { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-base); line-height: normal; color: var(--color-foreground); }
.bc-icon-list__title > svg { flex: none; }   /* Icon bleibt bei umbrechendem Titel in voller Größe */
.bc-icon-list__text { margin: var(--space-4) 0 0; padding-left: 26px; font: var(--typo-body); color: var(--color-foreground-body); }
.bc-icon-list--inline .bc-icon-list__item { display: block; line-height: var(--line-height-relaxed); color: var(--color-foreground-body); font-size: var(--font-size-sm); }
.bc-icon-list--inline .bc-icon-list__title { display: inline; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); line-height: inherit; color: var(--color-foreground); }
.bc-icon-list--inline .bc-icon-list__title::after { content: ''; display: block; height: 2px; }
.bc-icon-list--inline .bc-icon-list__icon { vertical-align: -3px; margin-right: var(--space-8); color: var(--color-foreground); }
.bc-icon-list--compact .bc-icon-list__title { margin-bottom: 2px; }
.bc-icon-list--compact .bc-icon-list__text { margin: 0; padding-left: var(--space-24); font: var(--typo-body-sm); color: var(--color-foreground-muted); }
.bc-icon-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--space-24); }
.bc-icon-list--grid > .bc-icon-list__item { padding: var(--space-24) var(--space-32); }
.bc-icon-list--grid > .bc-icon-list__item:nth-child(odd) { border-right: var(--border-width-thin) solid var(--color-border); padding-left: 0; }
.bc-icon-list--grid > .bc-icon-list__item:nth-child(even) { padding-right: 0; }
.bc-icon-list--grid > .bc-icon-list__item:nth-child(n+3) { border-top: var(--border-width-thin) solid var(--color-border); }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-icon-list--grid { grid-template-columns: 1fr; }
  .bc-icon-list--grid > .bc-icon-list__item { padding: var(--space-16) 0; border-right: none !important; }
  .bc-icon-list--grid > .bc-icon-list__item:nth-child(n+2) { border-top: var(--border-width-thin) solid var(--color-border); }
}
.bc-icon-list--grid-subtle { grid-template-columns: 1fr 1fr; gap: 0; }
.bc-icon-list--grid-subtle > .bc-icon-list__item { padding: var(--space-16) 20px var(--space-16) 0; border-right: var(--border-width-thin) solid var(--color-border-subtle); border-bottom: var(--border-width-thin) solid var(--color-border-subtle); }
.bc-icon-list--grid-subtle > .bc-icon-list__item:nth-child(2n) { border-right: none; padding-left: 20px; padding-right: 0; }
.bc-icon-list--grid-subtle > .bc-icon-list__item:nth-child(-n+2) { padding-top: 0; }
.bc-icon-list--grid-subtle > .bc-icon-list__item:nth-last-child(-n+2) { padding-bottom: 0; border-bottom: none; }
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-icon-list--grid-subtle { grid-template-columns: 1fr; }
  .bc-icon-list--grid-subtle > .bc-icon-list__item, .bc-icon-list--grid-subtle > .bc-icon-list__item:nth-child(2n) { border-right: none; padding-left: 0; }
}
.bc-ai-box {
  margin: var(--space-32) calc(-1 * var(--space-32)) calc(-1 * var(--space-32));
  padding: var(--space-32); border-radius: 0 0 var(--card-radius) var(--card-radius);
  background: var(--background-dark);
}
.bc-ai-box--solo { margin: 0; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); }
.bc-ai-box__title { margin: 0 0 var(--space-16); font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-2xl); text-align: left; color: var(--color-foreground-inverse); }
.bc-ai-box__row { display: flex; gap: 10px; flex-wrap: wrap; }
.bc-ai-box__input {
  flex: 1 1 var(--size-input-min); height: var(--size-control-lg); padding: 0 var(--space-16); border-radius: var(--radius-full); box-sizing: border-box;
  border: var(--border-width-thick) solid var(--color-foreground-inverse); background: var(--color-surface);
  font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-foreground);
}
.bc-ai-box__input:focus, .bc-ai-box__input:focus-visible { outline: none; border-color: var(--color-foreground-inverse); box-shadow: none; }
.bc-ai-box__row .bc-button { flex: 0 0 auto; }
.bc-ai-box__button { min-width: var(--size-button-min); }
.bc-ai-box__answer { margin-top: var(--space-16); padding: var(--space-16) var(--space-24); background: color-mix(in srgb, var(--color-foreground-inverse) 14%, transparent); border-radius: var(--radius-md); }
.bc-ai-box__answer-tag { display: inline-block; margin-bottom: var(--space-8); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-foreground-inverse); }
.bc-ai-box__answer p { margin: 0; font: var(--typo-body); color: var(--color-foreground-inverse); }
.bc-ai-box__error { margin: var(--space-16) 0 0; font-size: var(--font-size-sm); color: var(--color-foreground-inverse-muted); }
.bc-ai-box__followup { margin: var(--space-24) 0 var(--space-16); text-align: center; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); color: var(--color-foreground-inverse); }
.bc-ai-box__followup-row { display: flex; justify-content: center; gap: var(--space-12); flex-wrap: wrap; }
.bc-ai-box__thanks { margin: 0; display: flex; justify-content: center; align-items: center; gap: var(--space-8); font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-foreground-inverse); }
/* Der Ausbruch muss dem Karten-Padding folgen: .bc-box hat ab 480px nur noch 24px unten und
   16px seitlich. Bug gefunden (Responsiv-Check): mit dem Basis-Wert -32px ragte der Kasten
   8px unter die Kartenunterkante hinaus. */
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-ai-box {
    margin: var(--space-24) calc(-1 * var(--space-16)) calc(-1 * var(--space-24));
    padding: var(--space-24) var(--space-16);
  }
  .bc-ai-box--solo { margin: 0; }
}
/* --compact (Lexikon): kleinerer Titel, flachere Eingabe (Knopf: bc-button--sm). Der Knopf ist dort
   deaktiviert, weil es noch keinen Endpunkt gibt. Maße 1:1 aus ROS' Referenz. */
.bc-ai-box--compact { position: relative; padding: var(--space-32) var(--space-24) 22px; }
.bc-ai-box--compact .bc-ai-box__title { font-size: var(--font-size-xl); margin-bottom: var(--space-12); line-height: normal; letter-spacing: normal; }
.bc-ai-box--compact .bc-ai-box__input { height: var(--size-control-md); font-size: var(--font-size-sm); }
.bc-ai-box__hint {
  max-height: 0; overflow: hidden;
  margin-top: 0 !important; opacity: 0;
  font: var(--typo-body-sm); color: var(--color-foreground-subtle);
  margin-bottom: 13px; /* 13px = Browser-Rand des <p> in ROS' Referenz, 1:1 übernommen */
  transition: max-height var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-standard), margin-top var(--duration-slow) var(--ease-out);
}
.bc-ai-box:focus-within .bc-ai-box__hint { max-height: 220px; opacity: 1; margin-top: var(--space-12) !important; }
.bc-ai-box__hint a { color: var(--color-foreground-subtle); }
@media (prefers-reduced-motion: reduce) {
  .bc-ai-box__hint { transition: none; }
}
/* --inline (Lexikon, zweite Instanz): keine dunkle Fläche, sitzt im hellen Kasten auf einer
   schwarzen Trennlinie; Eingabe hell, Knopf gefüllt (bc-button). Der Titel braucht drei Klassen, um
   .bc-box h3:not(.bc-subhead) zu schlagen. */
.bc-ai-box--inline { background: none; border-radius: 0; border-top: var(--border-width-thick) solid var(--color-accent); padding: var(--space-24) 0 0; margin-top: var(--space-32); }
.bc-ai-box.bc-ai-box--inline .bc-ai-box__title { font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-xl); line-height: normal; letter-spacing: normal; color: var(--color-foreground); margin: 0 0 var(--space-12); }
.bc-ai-box--inline .bc-ai-box__input { border-color: var(--color-border); }
/* Antwort unter dem Eingabefeld (Lexikon §7n, 2026-10-16): Knopf direkt unter dem Text; in der hellen Inline-Box
   dunkle Schrift auf vertiefter Fläche statt Weiß auf Glas. */
.bc-ai-box__answer .bc-ai-box__followup { margin: var(--space-16) 0 0; text-align: left; }
.bc-ai-box--inline .bc-ai-box__answer { background: var(--color-surface-sunken); }
.bc-ai-box--inline .bc-ai-box__answer-tag, .bc-ai-box--inline .bc-ai-box__answer p { color: var(--color-foreground); }
/* ===== bc-callout — hervorgehobener Kasten: hell, 2px Kontur, Knopf ragt unten über den Rand
   (Komponente Design-System Website). Aufbau: .bc-callout > .bc-callout__title … .bc-callout__cta ===== */
.bc-callout { position: relative; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); padding: var(--space-48); background: var(--color-background); border: var(--border-width-thick) solid var(--color-accent); box-shadow: var(--card-shadow); }
.bc-callout:has(> .bc-flag) { padding-top: 70px; }
.bc-callout__title { font-size: var(--font-size-5xl); }
.bc-callout__cta { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; white-space: nowrap; }
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-callout { padding: var(--space-32) var(--space-24); }
  .bc-callout:has(> .bc-flag) { padding-top: 62px; }
  .bc-callout__title { font-size: var(--font-size-3xl); }
}
/* ===== bc-facts — Faktenliste „Begriff : Wert" (Komponente Design-System Website) =====
   Aufbau: dl.bc-facts > div.bc-facts__row > dt.bc-facts__label + dd.bc-facts__value
   Varianten: --columns  Beschriftung links (feste Spalte), Wert rechts und fett — Produktseite
              --stacked  Beschriftung fett über dem Wert, klein — Lexikon-Seitenspalte
   Trennlinien oben statt unten: die letzte Zeile bekommt keine überflüssige Linie. */
.bc-facts { display: grid; margin: 0; }
.bc-facts__row { border-top: var(--border-width-thin) solid var(--color-border); }
.bc-facts__label, .bc-facts__value { margin: 0; }
.bc-facts--columns .bc-facts__row { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-16); padding: 14px 0; font-size: var(--font-size-base); }
.bc-facts--stacked { gap: var(--space-12); }
.bc-facts--stacked .bc-facts__row { border-top-color: var(--color-border-subtle); padding-top: var(--space-12); }
.bc-facts--stacked .bc-facts__label { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wide); line-height: normal; color: var(--color-foreground); margin-bottom: 2px; font-weight: var(--font-weight-bold); }
.bc-facts--stacked .bc-facts__value { font-size: var(--font-size-xs); line-height: normal; color: var(--color-foreground-body); }
.bc-facts__row:first-child { border-top: none; padding-top: 0; }
.bc-facts--columns .bc-facts__label {
  color: var(--color-foreground-muted);
  overflow-wrap: break-word;
  -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
.bc-facts--columns .bc-facts__value {
  color: var(--color-foreground); font-weight: var(--font-weight-bold);
  min-width: 0; overflow-wrap: break-word;
  -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-facts--columns .bc-facts__row { grid-template-columns: 110px 1fr; gap: var(--space-12); }
}
/* ===== bc-pill — runde Kontur-Marke für Themen und Vorschläge (Komponente Design-System Website).
   Als Link (<a>) oder Knopf (<button>); ohne Ziel als reiner Text (<span>, ohne Hover). Gruppe: .bc-pill-group > .bc-pill.
   --ghost: ohne Fläche, gedämpfte Schrift, flacher (Problem-Vorschläge unter dem Index-Suchfeld). ===== */
.bc-pill-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.bc-pill {
  padding: var(--space-8) var(--space-16); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); font-family: var(--font-family-body); font-size: var(--font-size-sm); line-height: normal;
  color: var(--color-foreground-body); text-decoration: none;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.bc-pill:is(a, button) { cursor: pointer; }
.bc-pill:is(a, button):hover { border-color: var(--color-accent); color: var(--color-accent); }
.bc-pill--ghost { padding-block: 6px; background: none; color: var(--color-foreground-muted); }

/* ---------- Lexikon-Bausteine (Block 3, 15.10.) ---------- */
/* ===== bc-nav — Navigation der Website (Komponente Design-System Website, Bestand .nav) =====
   Aufbau: nav.bc-nav > .bc-nav__inner > a.bc-nav__logo · ul.bc-nav__menu > li.bc-nav__item (a, .bc-nav__flyout >
   .bc-nav__arrow + .bc-nav__flyout-inner > .bc-nav__col > .bc-nav__col-head + a.bc-nav__fi …) · .bc-nav__actions
   (Sprache, Suche, Knopf, Burger). Mobil: .bc-nav__overlay (Vollbild-Menü, .open). Verhalten (Burger, Overlay,
   Kantenausgleich der Flyouts) im Skript der Website-Grundlage. Inhalt aus navigation.json. ===== */
.bc-nav { position: sticky; top: 0; z-index: var(--z-index-sticky); background: var(--color-surface); padding: 0 var(--layout-page-gutter); }
.bc-nav__inner { max-width: var(--layout-content-width); margin: 0 auto; height: 64px; display: flex; align-items: center; }
.bc-nav__menu { margin: 0 auto; }
.bc-nav__actions { margin-left: auto; }
.bc-nav__logo { line-height: var(--line-height-none); display: flex; align-items: center; justify-self: start; }
.bc-nav__menu { display: flex; list-style: none; gap: var(--space-12); }
.bc-nav__menu > li { position: relative; }
.bc-nav__menu > li > a { display: flex; align-items: center; justify-content: center; gap: var(--space-4); height: 32px; padding: 0 18px; border: var(--border-width-thick) solid transparent; font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-foreground); border-radius: var(--radius-full); transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); white-space: nowrap; }
@media (max-width: 1300px) /* --breakpoint-desktop */ {
  .bc-nav__menu > li > a { padding: 0 14px; }
}
.bc-nav__menu > li > a:hover, .bc-nav__menu > li > a:focus { background: var(--color-background); color: var(--color-accent); }
.bc-nav__actions { display: flex; align-items: center; gap: var(--space-16); justify-self: end; }
.bc-nav__lang { font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-foreground); padding: 6px var(--space-8); border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); white-space: nowrap; letter-spacing: var(--letter-spacing-wide); }
.bc-nav__lang:hover, .bc-nav__lang:focus { background: var(--color-accent); color: var(--color-foreground-inverse); }
.bc-nav__lang-option { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-foreground); text-decoration: none; transition: background var(--duration-fast); }
.bc-nav__lang-option:hover { background: var(--color-accent-subtle); }
/* Knopf in der Navigation (zum Quiz): Textschrift 14 px wie der Marktplatz (.btn-nav), nicht die Titelschrift 12 px von --xs (User 16.10.) */
.bc-nav__actions .bc-button { width: 96px; padding: 0; white-space: nowrap; font-family: var(--font-family-body); font-size: var(--font-size-sm); }
.bc-nav__burger { display: none; }
.bc-nav__overlay { position: fixed; inset: 0; z-index: var(--z-index-overlay); background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); opacity: 0; visibility: hidden; transition: opacity var(--duration-base), visibility var(--duration-base); }
.bc-nav__overlay.open { opacity: 1; visibility: visible; }
.bc-nav__overlay-close { position: absolute; top: 16px; right: 16px; }
.bc-nav__overlay a { font-family: var(--font-family-body); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-foreground); padding: var(--space-8) var(--space-16); transition: color var(--duration-fast); }
.bc-nav__overlay a:hover { color: var(--color-accent); }
.bc-nav__item { position: relative; }
.bc-nav__flyout {
  position: absolute; left: 50%; top: 100%; padding: 22px 0 0;
  width: max-content; max-width: calc(100vw - 48px);
  opacity: 0; visibility: hidden;
  transform: translateX(calc(-50% + var(--shift, 0px)));
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}
.bc-nav__item:hover .bc-nav__flyout, .bc-nav__item:focus-within .bc-nav__flyout { opacity: 1; visibility: visible; }
.bc-nav__arrow {
  position: absolute; top: 14px; left: calc(50% - var(--shift, 0px));
  width: 18px; height: 18px; background: var(--color-surface); border-radius: var(--radius-xs);
  transform: translateX(-50%) rotate(45deg); z-index: 3;
}
.bc-nav__flyout-inner {
  position: relative; z-index: 2; max-width: min(var(--layout-content-width), calc(100vw - 48px));
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 14px 14px var(--space-16); display: grid; gap: 0 22px;
}
.bc-nav__col-head { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-foreground-subtle); margin: var(--space-8) 0 var(--space-8) var(--space-8); }
.bc-nav__fi {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: var(--space-16);
  padding: 11px var(--space-8); border-radius: var(--radius-md); min-height: 56px;
  transition: background var(--duration-fast);
}
.bc-nav__fi:hover { background: var(--color-accent-subtle); }
.bc-nav__fi img { width: 30px; height: 30px; object-fit: contain; }
.bc-nav__fi b, .bc-nav__fi small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-nav__fi b { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-foreground); line-height: var(--line-height-snug); }
.bc-nav__fi small { font-size: var(--font-size-xs); color: var(--color-foreground-muted); line-height: var(--line-height-normal); margin-top: 1px; }
.bc-nav__col { display: flex; flex-direction: column; }
.bc-nav__more { display: block; margin-top: auto; padding-top: 10px; margin-left: var(--space-8); font-size: var(--font-size-sm); color: var(--color-foreground-subtle); transition: color var(--duration-fast); }
.bc-nav__more:hover { color: var(--color-foreground); }
@media (max-width: 1100px) /* --breakpoint-tablet-landscape */ {
  .bc-nav__menu { display: none; }
  .bc-nav__burger { display: flex; }
}
.bc-nav__logo { min-width: 0; }
.bc-nav__logo svg { max-width: 100%; height: auto; }
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-nav__lang, .bc-nav__search { display: none; }
}
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-nav { padding: 0 var(--space-16); }
  .bc-nav__actions { margin-left: var(--space-16); }
}

/* ===== bc-footer — Fußbereich der Website (Komponente Design-System Website, Bestand .footer) =====
   Aufbau: footer.bc-footer > .bc-footer__inner > .bc-footer__top (.bc-footer__company + Spalten mit
   .bc-footer__col-title und ul.bc-footer__links) · .bc-footer__bottom (.bc-footer__legal). Social-Knöpfe:
   .bc-footer__socials > bc-icon-button --sm --filled. Inhalt aus footer.json. ===== */
.bc-footer { padding: var(--space-96) var(--layout-page-gutter) var(--space-32); }
.bc-footer__inner { max-width: var(--layout-content-width); margin: 0 auto; }
.bc-footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(4, 1fr);
  gap: var(--space-32) var(--space-24);
  padding-bottom: var(--space-64);
  margin-bottom: var(--space-64);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}
.bc-footer__socials { display: flex; gap: var(--space-8); margin-top: var(--space-16); }
.bc-footer__tagline { font-size: var(--font-size-sm); color: var(--color-foreground-muted); line-height: var(--line-height-normal); max-width: 280px; margin-bottom: var(--space-8); }
.bc-footer__info { font-size: var(--font-size-sm); color: var(--color-foreground-muted); line-height: var(--line-height-relaxed); margin-bottom: var(--space-8); }
.bc-footer__info a { color: var(--color-foreground-muted); text-decoration: none; transition: color var(--duration-fast); }
.bc-footer__info a:hover { color: var(--color-foreground); }
.bc-footer__info-label { color: var(--color-foreground-muted); display: inline-block; min-width: 40px; }
.bc-footer__col-title { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-foreground); margin-bottom: var(--space-16); text-decoration: none; }
a.bc-footer__col-title:hover { color: var(--color-foreground-muted); }
.bc-footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-8); }
.bc-footer__links a { font-size: var(--font-size-sm); color: var(--color-foreground-muted); text-decoration: none; transition: color var(--duration-fast); }
.bc-footer__links a:hover { color: var(--color-foreground); }
.bc-footer__bottom { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-foreground-muted); }
.bc-footer__legal { display: flex; gap: var(--space-32); }
.bc-footer__legal a { color: var(--color-foreground-muted); text-decoration: none; transition: color var(--duration-fast); }
.bc-footer__legal a:hover { color: var(--color-foreground); }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-footer__top { grid-template-columns: 1fr 1fr; }
  .bc-footer__company { order: -1; }
}
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-footer__top { grid-template-columns: 1fr; }
  .bc-footer__bottom { flex-direction: column; gap: var(--space-16); align-items: flex-start; }
  .bc-footer__legal { flex-wrap: wrap; gap: var(--space-16); }
}

/* ===== bc-link — Text-Link im Fließtext (Komponente Design-System Website, Bestand .rt-link) =====
   Fett, mit feiner Ruhe-Linie; beim Hover läuft eine 2-px-Linie von links ein.
   --bc-link-rest-line: 0 = ohne Ruhe-Linie (Linie erst beim Hover).
   Auf dunklem Grund weiß: Variante --inverse, in dunklen Bausteinen automatisch, weil Fließtext-Links aus dem
   Renderer ihren Hintergrund nicht kennen. ===== */
.bc-link {
  --bc-link-rest-line: 1px;
  --bc-link-color: var(--color-link); --bc-link-line: var(--color-link-line);
  color: var(--bc-link-color); font-weight: var(--font-weight-bold); text-decoration: none; padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--bc-link-line), var(--bc-link-line));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%;
  background-size: 0 2px, 100% var(--bc-link-rest-line);
  transition: background-size .28s ease;
}
.bc-link:hover, .bc-link:focus-visible { background-size: 100% 2px, 100% var(--bc-link-rest-line); }
.bc-link.bc-link--inverse, :where(.bc-box--dark, .bc-statement, .bc-personas__info) .bc-link { --bc-link-color: var(--color-link-inverse); --bc-link-line: var(--color-link-inverse-line); }
/* Fließtext-Bausteine auf dunklem Grund (Fund Import 16.10.: Liste im Bissantz-Kasten grau auf Schwarz): Liste und Fettung in den Weiß-Token. */
:where(.bc-box--dark, .bc-statement, .bc-personas__info) .bc-bullet-list { --bc-bullet-text: var(--color-foreground-inverse-muted); --bc-bullet-marker: var(--color-foreground-inverse); --bc-bullet-strong: var(--color-foreground-inverse); }
:where(.bc-box--dark, .bc-statement, .bc-personas__info) :is(p, li) strong { color: var(--color-foreground-inverse); }
@media (prefers-reduced-motion: reduce) { .bc-link { transition: none; } }

/* ===== bc-text — Fließtext-Absatz (Komponente Design-System Website, Bestand .lx-body) =====
   Abstände 1:1 aus ROS' Referenz: 14 px zwischen Absätzen, mehr Luft vor Tabelle und Icon-Liste. ===== */
.bc-text { font: var(--typo-body); color: var(--color-foreground-body); margin: 0 0 14px; }
.bc-text:last-child { margin-bottom: 0; }
.bc-text:has(+ .bc-table:not(.bc-table--inverse)) { margin-bottom: var(--space-24); } /* im dunklen Kasten bleibt der Abstand des Kastens */
/* Abstand nach der Tabelle wie davor (seit 2.11.1, Fund des Users): Text oder Liste direkt unter einer Tabelle klebte an der
   letzten Zeile (3-Spalten-Tabellen hatten unten gar keinen Abstand, 2 und 4–6 Spalten 20 px). Zwischenüberschriften haben 24 px schon selbst. */
.bc-table + :is(.bc-text, .bc-bullet-list) { margin-top: var(--space-24); }
.bc-text:has(+ .bc-icon-list) { margin-bottom: 20px; }

/* ===== bc-bullet-list — Punktliste mit eckigen Punkten (Komponente Design-System Website, Bestand .lx-ueberblick-liste) =====
   Variante --emphasize-last: letzter Punkt fett (Fazit, „Auf einen Blick“). ===== */
.bc-bullet-list { display: grid; gap: var(--space-12); }
:where(.bc-bullet-list) { --bc-bullet-text: var(--color-foreground-body); --bc-bullet-marker: var(--color-foreground); --bc-bullet-strong: var(--color-foreground); }
.bc-bullet-list li { display: flex; gap: var(--space-12); align-items: flex-start; list-style: none; font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--bc-bullet-text); }
.bc-bullet-list li::before { content: ''; width: 6px; height: 6px; margin-top: 7px; background: var(--bc-bullet-marker); flex: 0 0 auto; }
.bc-bullet-list--emphasize-last li:last-child { font-weight: var(--font-weight-bold); color: var(--bc-bullet-strong); }
/* Liste mitten im Fließtext: der Inhalt eines Punkts steht in einem <span> (sonst würden Fett und Link zu eigenen Spalten),
   Text danach bekommt den Absatzabstand von bc-text. */
.bc-bullet-list + .bc-text { margin-top: 14px; }

/* ===== bc-table — Vergleichstabelle als Raster (Komponente Design-System Website, Bestand .lx-tabelle) =====
   Aufbau: .bc-table > .bc-table__head … + .bc-table__cell … (Zellen der Reihe nach, Spaltenzahl aus der Variante)
   Standard: 3 Spalten (1fr 1fr 1.4fr). --labeled: erste Spalte 140 px und fett. --pair: 2 Spalten.
   --inverse: auf dunklem Grund. __cell--highlight: eine Zeile hervorheben, __cell--label: Beschriftungszelle (inverse).
   Werte 1:1 aus ROS' Referenz. ===== */
.bc-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.bc-table--labeled { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); }
/* Lange Wörter in schmalen Spalten trennen statt in die Nachbarspalte laufen lassen (Fund Import 16.10.: „Gegenstromverfahren“). */
.bc-table__head, .bc-table__cell { overflow-wrap: break-word; hyphens: auto; }
.bc-table__head { padding-bottom: var(--space-12); font-weight: var(--font-weight-bold); color: var(--color-foreground); font-size: var(--font-size-sm); border-bottom: var(--border-width-thin) solid var(--color-border); }
.bc-table__cell { padding-top: var(--space-12); padding-bottom: var(--space-12); font-size: var(--font-size-sm); color: var(--color-foreground-body); border-bottom: var(--border-width-thin) solid var(--color-border-subtle); }
.bc-table__head, .bc-table__cell { line-height: normal; }
.bc-table:not(.bc-table--pair) > :nth-child(3n+1) { padding-right: var(--space-16); }
.bc-table:not(.bc-table--pair) > :nth-child(3n+2) { padding-left: var(--space-16); padding-right: var(--space-16); }
.bc-table:not(.bc-table--pair) > :nth-child(3n) { padding-left: var(--space-16); }
.bc-table:not(.bc-table--pair) > .bc-table__cell:nth-last-child(-n+3) { padding-bottom: 0; border-bottom: none; }
.bc-table--labeled > .bc-table__cell:nth-child(3n+1), .bc-table > .bc-table__cell--highlight { font-weight: var(--font-weight-bold); color: var(--color-foreground); }
/* Tabellen mit 4 bis 6 Spalten (Lexikon-Übernahme 2026-10-19, §7p): gleich breite Spalten, Außenrand ohne Einzug, letzte Zeile ohne Linie */
.bc-table--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bc-table.bc-table--cols-4 > * { padding-left: var(--space-12); padding-right: var(--space-12); }
.bc-table.bc-table--cols-4 > :nth-child(4n+1) { padding-left: 0; }
.bc-table.bc-table--cols-4 > :nth-child(4n) { padding-right: 0; }
.bc-table.bc-table--cols-4 > .bc-table__cell:nth-last-child(-n+4) { padding-bottom: 0; border-bottom: none; }
.bc-table--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bc-table.bc-table--cols-5 > * { padding-left: var(--space-12); padding-right: var(--space-12); }
.bc-table.bc-table--cols-5 > :nth-child(5n+1) { padding-left: 0; }
.bc-table.bc-table--cols-5 > :nth-child(5n) { padding-right: 0; }
.bc-table.bc-table--cols-5 > .bc-table__cell:nth-last-child(-n+5) { padding-bottom: 0; border-bottom: none; }
.bc-table--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bc-table.bc-table--cols-6 > * { padding-left: var(--space-12); padding-right: var(--space-12); }
.bc-table.bc-table--cols-6 > :nth-child(6n+1) { padding-left: 0; }
.bc-table.bc-table--cols-6 > :nth-child(6n) { padding-right: 0; }
.bc-table.bc-table--cols-6 > .bc-table__cell:nth-last-child(-n+6) { padding-bottom: 0; border-bottom: none; }
.bc-table--cols-4, .bc-table--cols-5, .bc-table--cols-6 { margin: 0 0 20px; }
.bc-table--pair { grid-template-columns: 1fr 1.4fr; max-width: var(--layout-measure); margin: 0 0 20px; }
.bc-table--pair > :nth-child(2n+1) { padding-right: var(--space-16); }
.bc-table--pair > :nth-child(2n) { padding-left: var(--space-16); }
.bc-table--pair > .bc-table__cell:nth-last-child(-n+2) { padding-bottom: 0; border-bottom: none; }
.bc-table--inverse .bc-table__head { padding-bottom: 10px; font-size: var(--font-size-xs); color: var(--color-foreground-inverse); border-bottom: var(--border-width-thin) solid var(--color-border-inverse); }
.bc-table--inverse .bc-table__cell { padding-top: 10px; padding-bottom: 10px; color: var(--color-foreground-inverse-muted); border-bottom: var(--border-width-thin) solid var(--color-border-inverse); font-size: var(--font-size-sm); }
.bc-table--inverse.bc-table--pair > .bc-table__cell:nth-last-child(-n+2) { padding-bottom: 0; border-bottom: none; }
.bc-table--inverse .bc-table__cell--label { color: var(--color-foreground-inverse); font-weight: var(--font-weight-bold); }
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-table, .bc-table--labeled, .bc-table--pair { grid-template-columns: 1fr; }
  .bc-table > * { padding-left: 0; padding-right: 0; }
}
/* bc-table als echte Tabelle (seit 2.11.0, Hinweis SEO: Google und Sprachmodelle lesen <table> als Tabelle, ein div-Raster nicht).
   Aufbau: table.bc-table > thead > tr > th.bc-table__head + tbody > tr > (td | th[scope=row]).bc-table__cell.
   Das Raster oben gilt weiter: thead, tbody und tr fallen per display: contents heraus, die Zellen liegen im Raster wie vorher.
   Abstände je Spalte statt je Zelle in der Reihe: 16 px zwischen den Spalten, bei 4–6 Spalten 12 px, außen 0. In der
   div-Fassung mischten sich bei 4–6 Spalten 12 und 16 px je nach Zelle (die 3er-Regeln oben wiegen schwerer); jetzt
   gleichmäßig 12 px wie vorgesehen. Die Regeln für die div-Fassung oben bleiben, bis alle Seiten neu veröffentlicht sind. */
table.bc-table { border-collapse: collapse; border-spacing: 0; }
table.bc-table > :is(thead, tbody), table.bc-table > :is(thead, tbody) > tr { display: contents; }
table.bc-table :is(th, td) { text-align: start; vertical-align: top; }
table.bc-table tr > * { padding-left: var(--space-16); padding-right: var(--space-16); }
table.bc-table:is(.bc-table--cols-4, .bc-table--cols-5, .bc-table--cols-6) tr > * { padding-left: var(--space-12); padding-right: var(--space-12); }
table.bc-table tr > :first-child { padding-left: 0; }
table.bc-table tr > :last-child { padding-right: 0; }
table.bc-table > tbody > tr:last-child > * { padding-bottom: 0; border-bottom: none; }
table.bc-table--labeled > tbody > tr > :first-child, table.bc-table .bc-table__cell--highlight { font-weight: var(--font-weight-bold); color: var(--color-foreground); }
/* Handy (eine Spalte): die Abstände bleiben wie oben, wie bei der div-Fassung (dort griff „.bc-table > *“ im Handy-Block nicht). */

/* ===== bc-toc — Inhaltsverzeichnis mit Markierung beim Scrollen (Komponente Design-System Website, Bestand .lx-toc) =====
   Aufbau: nav.bc-toc > a.bc-toc__link[href="#…"]. Die aktive Stelle (.is-active) setzt das Skript (vorlage-lexikon-eintrag.js). ===== */
.bc-toc { display: grid; gap: 2px; }
.bc-toc__link { padding: 7px 0; line-height: normal; font-size: var(--font-size-sm); text-decoration: none; color: var(--color-foreground-body); font-weight: var(--font-weight-regular); }
.bc-toc__link.is-active { color: var(--color-foreground); font-weight: var(--font-weight-bold); }

/* ===== bc-hero — Seitenkopf mit Eyebrow, Titel, Einleitung und Farbwolken (Komponente Design-System Website, Bestand Lexikon .lx-hero) =====
   Aufbau: .bc-hero > [.bc-hero__clouds > .bc-hero__clouds-inner > .bc-hero__cloud--a/b/c] · .bc-hero__content (.bc-hero__eyebrow,
   h1.bc-hero__title, .bc-hero__intro) · .bc-hero__bar. Wolken- und Balkenfarben kommen je Seite als style (Themenfarbe).
   Titelgröße 1:1 aus ROS' Lexikon-Entwurf: clamp(2rem, 4.5vw, 3rem). Hero-Varianten von Produktseite und Index folgen. ===== */
.bc-hero { position: relative; background: var(--color-surface); overflow: hidden; }
.bc-hero__clouds {
  --hero-maske: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 55%, #000 100%); /* Komponente: Ausblendung der Wolken nach oben */
  position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 0;
  overflow: hidden; opacity: .14; pointer-events: none;
  -webkit-mask-image: var(--hero-maske); mask-image: var(--hero-maske);
}
.bc-hero__clouds-inner { position: absolute; left: 0; right: 0; top: 50%; height: 340px; transform: translateY(-50%); filter: blur(30px); }
.bc-hero__cloud { position: absolute; inset: -10% -25%; mix-blend-mode: multiply; }
.bc-hero__cloud--a { animation: bc-hero-cloud-a 21s ease-in-out infinite; }
.bc-hero__cloud--b { animation: bc-hero-cloud-b 27s ease-in-out infinite; }
.bc-hero__cloud--c { animation: bc-hero-cloud-c 33s ease-in-out infinite; }
@keyframes bc-hero-cloud-a { 0%, 100% { transform: translateX(-12%) scaleX(1); } 50% { transform: translateX(40%) scaleX(1.4); } }
@keyframes bc-hero-cloud-b { 0%, 100% { transform: translateX(26%) scaleX(1.25); } 50% { transform: translateX(-30%) scaleX(.8); } }
@keyframes bc-hero-cloud-c { 0%, 100% { transform: translateX(8%) scaleX(1.1); } 50% { transform: translateX(-38%) scaleX(1.5); } }
/* Inhalt so breit wie die Navigation (seit 2.13.0, vorher 24 px Innenrand innerhalb der 1148 px, also 48 px schmaler) */
.bc-hero__content { position: relative; z-index: 1; max-width: var(--layout-page-width); margin: 0 auto; padding: 28px var(--layout-page-gutter) var(--space-48); }
.bc-hero__eyebrow { display: inline-block; background: var(--background-dark); color: var(--color-foreground-inverse); font-family: var(--font-family-title); font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; padding: 6px var(--space-12); border-radius: var(--radius-full); margin: var(--space-12) 0 20px; }
.bc-hero__title { max-width: var(--layout-measure); font-family: var(--font-family-title); font-weight: var(--font-weight-black); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 var(--space-16); color: var(--color-foreground); }
.bc-hero__intro { max-width: var(--layout-measure); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-foreground-body); margin: 0; }
.bc-hero__intro strong { color: var(--color-foreground); }
.bc-hero__bar { height: 6px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .bc-hero__cloud { animation: none !important; } }

/* ===== bc-quote — Kundenzitat mit Sternen (Komponente Design-System Website, Bestand .testi-quote) =====
   Aufbau: .bc-quote > .bc-quote__stars (svg …) · blockquote · cite (b = Name).
   Variante --compact: wenig Innenabstand, Zitat auf 560 px begrenzt (Lexikon, 1:1 ROS' Referenz). ===== */
.bc-quote { padding: var(--space-32) 0; }
.bc-quote__stars { display: flex; justify-content: center; gap: 3px; color: var(--color-foreground); margin-bottom: var(--space-16); }
.bc-quote blockquote { margin: 0 0 var(--space-16); font-family: var(--font-family-body); font-style: italic; font-weight: var(--font-weight-regular); font-size: var(--font-size-lg); line-height: var(--line-height-normal); color: var(--color-foreground); text-align: center; }
.bc-quote cite { display: block; font-style: normal; font-size: var(--font-size-sm); color: var(--color-foreground); text-align: center; line-height: var(--line-height-relaxed); }
.bc-quote cite b { color: var(--color-foreground); font-weight: var(--font-weight-bold); }
.bc-quote--compact { padding: var(--space-8); }
.bc-quote--compact .bc-quote__stars { margin-bottom: 14px; min-height: 22px; align-items: center; }
.bc-quote--compact blockquote { margin: 0 auto 14px; max-width: var(--layout-measure-narrow); }

/* ===== bc-faq — Fragen und Antworten zum Aufklappen (Komponente Design-System Website, Bestand .pd-faq) =====
   Natives details/summary, kein Skript; Pfeil aus zwei Rahmenkanten. Steht meist in einer bc-box.
   Variante --compact: Fragezeilen mit natürlicher Zeilenhöhe (Lexikon). ===== */
.bc-faq details { border-top: var(--border-width-thin) solid var(--color-border); }
.bc-faq details:first-of-type { border-top: none; }
.bc-faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-foreground);
}
.bc-faq summary::-webkit-details-marker { display: none; }
.bc-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: var(--border-width-thick) solid var(--color-accent); border-bottom: var(--border-width-thick) solid var(--color-accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.bc-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.bc-faq p { margin: 0 0 20px; line-height: var(--line-height-relaxed); color: var(--color-foreground-body); font-size: var(--font-size-base); }
.bc-faq--compact summary { line-height: normal; }

/* ===== bc-logo-strip — Kundenlogos als Raster (Komponente Design-System Website, Bestand .pd-logos) =====
   Aufbau: .bc-logo-strip > p.bc-logo-strip__title + .bc-logo-strip__row > img.bc-logo-strip__logo.
   Logos in voller Farbe, quadratische Felder. Variante --compact: Titel mit natürlicher Zeilenhöhe (Lexikon). ===== */
.bc-logo-strip { padding: var(--space-24) 0 var(--space-8); }
.bc-logo-strip__title { text-align: center; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); color: var(--color-foreground-muted); margin: 0 0 var(--space-24); }
.bc-logo-strip__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-24); align-items: center; }
.bc-logo-strip__logo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.bc-logo-strip--compact .bc-logo-strip__title { line-height: normal; }
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ { .bc-logo-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== bc-promo — Kachel für Angebote wie Whitepaper (Komponente Design-System Website, Bestand .lx-whitepaper-box) =====
   Aufbau: .bc-promo > .bc-promo__eyebrow · h3 · p · a.bc-button--inverse. Farbverlauf aus --background-power, statisch. ===== */
.bc-promo {
  --promo-schatten: 0 1px 8px rgba(0,0,0,.15); /* Komponente: kräftiger als Karten */
  position: relative; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); padding: var(--space-24);
  background: var(--background-power); box-shadow: var(--promo-schatten);
}
.bc-promo__eyebrow { line-height: normal; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-foreground-inverse-muted); margin-bottom: 10px; }
.bc-promo h3 { color: var(--color-foreground-inverse); font-size: var(--font-size-lg); line-height: normal; letter-spacing: normal; margin: 0 0 10px; }
.bc-promo p { color: var(--color-foreground-inverse-muted); font: var(--typo-body-sm); margin: 0 0 var(--space-16); }

/* ===== bc-power-bg — bewegter Farbverlauf mit zwei Lichtflecken (Komponente Design-System Website, Bestand .lx-power-bg) =====
   Hintergrund-Ebene für bc-power-teaser: .bc-power-bg > span.bc-power-bg__blob.bc-power-bg__blob--1/--2. ===== */
.bc-power-bg {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); overflow: hidden;
  background: var(--background-power); background-size: 180% 180%; animation: bc-power-shift 22s ease-in-out infinite alternate;
}
.bc-power-bg__blob { position: absolute; border-radius: 50%; }
.bc-power-bg__blob--1 { left: -40px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-foreground-inverse) 38%, transparent), transparent 68%); animation: bc-power-blob-1 12s ease-in-out infinite alternate; }
.bc-power-bg__blob--2 { right: 30%; bottom: -100px; width: 200px; height: 200px; background: radial-gradient(circle, color-mix(in srgb, var(--color-foreground-inverse) 16%, transparent) 0%, color-mix(in srgb, var(--color-foreground-inverse) 5%, transparent) 55%, transparent 78%); animation: bc-power-blob-2 13s ease-in-out infinite alternate; }
@keyframes bc-power-shift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes bc-power-blob-1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(90px,60px) scale(1.2); } }
@keyframes bc-power-blob-2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-110px,-50px) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .bc-power-bg, .bc-power-bg__blob { animation: none !important; } }

/* ===== bc-power-teaser — großer Hinweis mit bewegtem Verlauf und Person (Komponente Design-System Website, Bestand Lexikon .lx-webinar-box) =====
   Aufbau: .bc-power-teaser > .bc-power-bg · .bc-power-teaser__body (h2, p, a > svg + span) · img.bc-power-teaser__image.
   Die Person steht auf der Unterkante und ragt über die Oberkante (overflow sichtbar). Unter 640 px ohne Bild.
   Die Marktplatz-Fassung (Power-Teaser der Produktseite) folgt als Variante. ===== */
.bc-power-teaser { position: relative; min-height: 220px; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); overflow: visible; padding: 28px var(--space-32); display: flex; align-items: flex-start; }
.bc-power-teaser__body { position: relative; z-index: 1; max-width: 58%; padding-top: var(--space-4); }
.bc-power-teaser__body h2 { font-family: var(--font-family-title); font-weight: var(--font-weight-black); color: var(--color-foreground-inverse); font-size: var(--font-size-3xl); line-height: var(--line-height-tight); letter-spacing: normal; margin: 0 0 var(--space-8); }
.bc-power-teaser__body p { font-family: var(--font-family-body); color: var(--color-foreground-inverse-muted); font-size: var(--font-size-base); line-height: normal; margin: 0 0 14px; }
.bc-power-teaser__body a { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-foreground-inverse); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); line-height: normal; text-decoration: none; }
.bc-power-teaser__body a span { text-decoration: underline; text-underline-offset: 4px; }
.bc-power-teaser__body a svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: 0 0 auto; stroke-width: 2.5; }
.bc-power-teaser__image { --bc-power-teaser-overhang: 60px; position: absolute; z-index: 2; right: var(--space-24); bottom: 0; top: calc(-1 * var(--bc-power-teaser-overhang)); width: 238px; height: calc(100% + var(--bc-power-teaser-overhang)); object-fit: contain; object-position: bottom; transform-origin: 50% 100%; pointer-events: none; }
/* Info-Badge (bc-info) im Teaser, z. B. „Personen sind KI-generiert“: über dem Bild (z-index 2), Icon auf dem Foto lesbar */
.bc-power-teaser > .bc-info { z-index: 4; }
.bc-power-teaser > .bc-info .bc-info__icon { opacity: .85; filter: drop-shadow(0 0 2px rgb(0 0 0 / .45)); }
.bc-power-teaser > .bc-info .bc-info__pop { box-shadow: 0 4px 16px rgb(0 0 0 / .35); }
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-power-teaser__body { max-width: 100%; }
  .bc-power-teaser__image { display: none; }
  .bc-power-teaser > .bc-info { display: none; }   /* ohne Bild kein Hinweis auf das Bild */
}

/* ---------- Marktplatz-Bausteine (Block 4, 15.10.) ----------
   Mechanisch aus dem Bestand übernommen und umbenannt; Regeln, die nur unter .mp-index galten, sind benannte
   Varianten (bc-section--dense, bc-section-head--compact, bc-container--narrow, bc-logo-strip--narrow,
   bc-quote--standalone, bc-faq--untitled). Kommentare beschreiben den Bestand. ---------- */
/* =====================================================
   SEKTIONEN — Grundbausteine (Karten/Accordion/Logo-Leiste)
===================================================== */
.bc-section { padding: var(--space-96) var(--layout-page-gutter); }
/* Inhaltsbereich unter dem Hero-Band: 48px oben (nicht die 96px der Standard-Sektion und auch
   nicht 0). Als Klasse statt Inline-Style im Renderer.
   Bug gefunden: stand vorher auf padding-top:0, die erste Karte klebte damit direkt am
   Farbstreifen unter dem Hero. */
.bc-section--content { padding-top: var(--space-48); }
.bc-container { max-width: var(--layout-content-width); margin: 0 auto; }
.bc-section-head__title { font-size: var(--font-size-4xl); margin-bottom: var(--space-16); }
.bc-section-head__lead { font-size: var(--font-size-lg); color: var(--color-foreground-muted); line-height: var(--line-height-relaxed); }
.bc-section-head { text-align: center; margin-bottom: var(--space-64); }
.bc-placeholder { min-height: 320px; border-radius: var(--radius-2xl); background: var(--background-placeholder); border: var(--border-width-thin) solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); color: var(--color-foreground-subtle); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
/* Platzierung im Produkt-Hero: über dem H1 */
.bc-product-hero__crumbs { margin-bottom: var(--space-24); }
/* Kopfband: eigener Container statt .lp-section, damit das Gradient-Schleier-Dekor (s.u.)
   dahinter liegen kann. Bild ist NICHT Teil eines Grid-Layouts, sondern absolut positioniert
   und liegt hinter dem Text — 1:1 der Aufbau der Referenzvorlage, kein Zweispalten-Grid wie
   in .lp-split. */
.bc-product-hero { position: relative; overflow: hidden; background: var(--color-surface); border-bottom: var(--border-width-thin) solid var(--color-border); padding: var(--space-32) var(--layout-page-gutter) var(--space-64); }
.bc-product-hero > .bc-container { position: relative; z-index: 1; }
.bc-product-hero__inner { position: relative; }
.bc-product-hero__text { position: relative; z-index: 1; max-width: var(--layout-measure-narrow); padding: var(--space-16) 0; }
.bc-product-hero__eyebrow { position: relative; display: inline-block; margin-bottom: var(--space-32); }
/* Kategorie-Badge — bewusst kein Fähnchen (Abweichung von der ersten Übernahme aus der
   Referenzvorlage): dieselben Content-Werte (dunkler Verlauf, weiße Versal-Schrift) wie
   .fahnchen-text, aber als durchgehende Pille statt Eckzipfel-Wimpel. */
.bc-product-hero__category {
  display: inline-block; background: var(--background-dark); color: var(--color-foreground-inverse);
  font-family: var(--font-family-title); font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  padding: 6px var(--space-12); border-radius: var(--radius-full); margin-bottom: var(--space-24);
}
.bc-product-hero__title { font-family: var(--font-family-title); font-weight: var(--font-weight-black); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-none); font-size: clamp(3rem, 6vw, 4.75rem); margin: 0 0 var(--space-16); color: var(--color-foreground); }
.bc-product-hero__claim { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: var(--line-height-snug); font-weight: var(--font-weight-bold); color: var(--color-foreground); max-width: 30ch; }
/* Bild-Geometrie 1:1 aus der SEITEN-INSTANZ der Referenzvorlage (inline style am <img>), nicht
   aus deren CSS-Klassen-Defaults — die werden dort pro Seite überschrieben: der Generator wählt
   pro Seite die Variante + 1-2 Zahlenwerte (Breite/Offset), das Layout selbst bleibt stehen.
   Bug gefunden ("massiv überflüssig angezeigt auf Desktop"): mit den Klassen-Defaults (760px,
   right:-60px, vertikal zentriert) war das Bild deutlich zu groß und überlagerte den Hero-Text.
   Die Referenzinstanz: 503x503 an left:575px / top:-98px.
   Bewusste Abweichung im Detail: height:auto statt fixem 503px — beim quadratischen
   1200x1200-Bild der Vorlage rechnerisch identisch (503x503), aber unverzerrt auch für
   künftige Produkte mit anderem Seitenverhältnis.
   Verankerung von unten statt oben ("Bild lässt sich mit dem Regler nicht bis zum
   Verlaufsstreifen herunterziehen"): mit top:-98px lag die Bildunterkante schon beim
   kalibrierten 1200x1200-Bild nur knapp innerhalb der Regler-Reichweite (±80px) über dem
   Streifen — bei anderem Seitenverhältnis reicht die Reichweite nicht mehr. Der Streifen
   (.mp-gradient-band) folgt direkt nach dieser Sektion, seine Distanz zu ihrer Unterkante ist
   exakt das Padding-Bottom der Sektion (var(--space-64)) — unabhängig von Bild- ODER Texthöhe.
   bottom statt top verankert deshalb GENAU DORT: die Bildunterkante liegt jetzt bei jedem
   Bildformat standardmäßig am Streifen an, der Regler bleibt nur noch für die Fein-Korrektur. */
.bc-product-hero__media--image { position: absolute; z-index: 0; pointer-events: none; left: 575px; bottom: calc(-1 * var(--space-64)); width: 503px; max-width: none; height: auto; }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-product-hero__media--image { position: static; width: 100%; max-width: var(--size-media); height: auto; margin-top: var(--space-32); }
}
/* Platzhalter-Fall (heroImageSrc leer, z.B. frisch KI-generierte Seite): .hero-media darf NICHT
   die absolute Hero-Geometrie erben, sonst schwebt die Platzhalter-Box über dem Text. */
.bc-placeholder.bc-product-hero__media--image { position: static; width: 100%; max-width: var(--size-media); height: auto; margin-top: var(--space-32); }
/* Hero-Pills — umrandete Pille mit Haken-Icon (Korrektur, s.o.) */
.bc-badge-group { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-32); }
.bc-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px var(--space-12); gap: 6px; white-space: nowrap; border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-full); font-family: var(--font-family-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); color: var(--color-foreground-muted); }
.bc-badge svg { flex: 0 0 auto; width: 11px !important; height: 11px !important; }
/* Gradient-Schleier + -Streifen — organisch ausgefranste Farbfläche hinter/nach dem Hero.
   1:1 aus der Referenzvorlage übernommen, nur eine Farbwelt gebraucht (--red, passend zu
   DeltaMaster/--mp-accent-deltamaster). Weitere Farbwelten erst bei Bedarf für künftige
   Produkte ergänzen. */
.bc-colorworld__band, .bc-colorworld__veil {
  --mp-cw-base: linear-gradient(90deg, #6b1020 0%, #8d1c2c 18%, #5a1836 38%, #33224f 58%, #1f3a6b 78%, #123a63 100%);
  --mp-cw-1: 255, 74, 74; --mp-cw-2: 255, 150, 170; --mp-cw-3: 120, 160, 255; --mp-cw-glow: 255, 255, 255;
  --mp-band-height: 6px; --mp-veil-height: 300px; --mp-veil-opacity: 0.1;
}
.bc-colorworld--red {
  --mp-cw-base: linear-gradient(90deg, #6b1020 0%, #8d1c2c 18%, #5a1836 38%, #33224f 58%, #1f3a6b 78%, #123a63 100%);
  --mp-cw-1: 255, 74, 74; --mp-cw-2: 255, 150, 170; --mp-cw-3: 120, 160, 255; --mp-cw-glow: 255, 255, 255;
}
.bc-colorworld__band { position: relative; height: var(--mp-band-height); overflow: hidden; background: var(--mp-cw-base); }
.bc-colorworld__veil { position: absolute; left: 0; right: 0; bottom: 0; height: var(--mp-veil-height); z-index: 0; overflow: hidden; opacity: var(--mp-veil-opacity); pointer-events: none; }
.bc-colorworld__veil-mask { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 18%, rgba(0,0,0,.55) 46%, #000 72%); mask-image: linear-gradient(rgba(0,0,0,0) 18%, rgba(0,0,0,.55) 46%, #000 72%); filter: url(#pd-veil-edge); -webkit-filter: url(#pd-veil-edge); }
.bc-colorworld__smoke { position: absolute; left: 0; right: 0; top: 50%; height: 340px; transform: translateY(-50%); }
.bc-colorworld__veil .bc-colorworld__smoke { height: 460px; filter: url(#pd-smoke) blur(8px); -webkit-filter: url(#pd-smoke) blur(8px); }
.bc-colorworld__smoke > span { position: absolute; inset: -10% -25%; will-change: transform; mix-blend-mode: screen; }
.bc-colorworld__veil .bc-colorworld__smoke > span { mix-blend-mode: multiply; }
.bc-colorworld__smoke .bc-colorworld__cloud-1 { background: radial-gradient(46% 70% at 16% 50%, rgba(var(--mp-cw-1),1) 0%, rgba(var(--mp-cw-1),.9) 42%, rgba(var(--mp-cw-1),0) 60%); animation: bc-colorworld-cloud-a 21s ease-in-out infinite; }
.bc-colorworld__smoke .bc-colorworld__cloud-2 { background: radial-gradient(42% 66% at 44% 46%, rgba(var(--mp-cw-2),.95) 0%, rgba(var(--mp-cw-2),.85) 40%, rgba(var(--mp-cw-2),0) 58%); animation: bc-colorworld-cloud-b 27s ease-in-out infinite; }
.bc-colorworld__smoke .bc-colorworld__cloud-3 { background: radial-gradient(46% 70% at 76% 54%, rgba(var(--mp-cw-3),.95) 0%, rgba(var(--mp-cw-3),.85) 40%, rgba(var(--mp-cw-3),0) 60%); animation: bc-colorworld-cloud-c 33s ease-in-out infinite; }
.bc-colorworld__smoke .bc-colorworld__cloud-glow { background: radial-gradient(26% 46% at 60% 50%, rgba(var(--mp-cw-glow),.75) 0%, rgba(var(--mp-cw-glow),.5) 34%, rgba(var(--mp-cw-glow),0) 56%); animation: bc-colorworld-cloud-b 17s ease-in-out infinite reverse; }
@keyframes bc-colorworld-cloud-a { 0%, 100% { transform: translateX(-12%) scaleX(1); } 50% { transform: translateX(40%) scaleX(1.4); } }
@keyframes bc-colorworld-cloud-b { 0%, 100% { transform: translateX(26%) scaleX(1.25); } 50% { transform: translateX(-30%) scaleX(.8); } }
@keyframes bc-colorworld-cloud-c { 0%, 100% { transform: translateX(8%) scaleX(1.1); } 50% { transform: translateX(-38%) scaleX(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .bc-colorworld__smoke > span { animation: none; }
  .bc-colorworld__smoke, .bc-colorworld__veil-mask { filter: none; }
}
/* ===== bc-box — Kasten für Inhalte (Komponente Design-System Website) =====
   Standard: weiße Karte mit Schatten. Varianten: --tight (weniger Innenabstand), --dark (dunkler
   Verlauf, heller Text, ohne Schatten), --cta (Inhalt mittig, für Abschluss-Aufrufe; mit --dark).
   Fähnchen oben links reserviert Platz über :has(> .fahnchen). */
.bc-box, .bc-callout, .bc-block { position: relative; }
/* Komponente: Gelb-Band („Neu"-Ecke, gelbes Fähnchen) */
.bc-product-card__new span { --gelb-band: linear-gradient(135deg, #ffff8a 0%, #f7ff1a 45%, #eaf500 100%); }
/* ===== Highlight-Box „Controlling für Power User" =========================================
   Vorher: weiße Karte mit schwarzer Randlinie links. Die Fassung der Referenzvorlage ist ein
   eigenständiger Farbkasten — langsam wandernder Regenbogen-Verlauf, zwei weiche Lichtflecken
   darüber, freigestelltes Porträt rechts, das auf der Unterkante aufsteht. Alle Werte 1:1. ===== */
.bc-power-teaser--product {
  /* min-height statt height (Bug gefunden): bei laengerem Highlight-Text ragten Text/CTA-Link
     unten aus dem Farbkasten heraus, weil eine feste Hoehe den Inhalt nicht wachsen liess
     (overflow:visible zeigt den Ueberlauf, statt ihn abzuschneiden). Kurzer Text bekommt
     weiterhin exakt 240px, laengerer Text waechst die Karte mit. */
  min-height: 240px; padding: 0; overflow: visible; min-width: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
    background: var(--background-power);
  background-size: 180% 180%;
  animation: bc-power-teaser-shift 22s ease-in-out infinite alternate;
}
@keyframes bc-power-teaser-shift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
/* Lichtflecken liegen in einem eigenen Rahmen mit overflow:hidden, damit sie den abgerundeten
   Kasten nicht verlassen — das Porträt darf ihn dagegen überragen (deshalb .pd-power selbst
   overflow:visible). */
.bc-power-teaser__blobs { position: absolute; inset: 0; overflow: hidden; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); z-index: 0; }
.bc-power-teaser__blob-1, .bc-power-teaser__blob-2 { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.bc-power-teaser__blob-1 {
  left: -40px; top: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-foreground-inverse) 38%, transparent), transparent 68%);
  animation: bc-power-teaser-blob-1 12s ease-in-out infinite alternate;
}
.bc-power-teaser__blob-2 {
  right: 30%; bottom: -100px; width: 200px; height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-foreground-inverse) 16%, transparent) 0%, color-mix(in srgb, var(--color-foreground-inverse) 5%, transparent) 55%, transparent 78%);
  animation: bc-power-teaser-blob-2 13s ease-in-out infinite alternate;
}
@keyframes bc-power-teaser-blob-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(90px, 60px) scale(1.2); } }
@keyframes bc-power-teaser-blob-2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-110px, -50px) scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .bc-power-teaser--product, .bc-power-teaser__blob-1, .bc-power-teaser__blob-2 { animation: none; }
}
.bc-power-teaser__text { position: relative; z-index: 1; padding: var(--space-24) var(--space-32); max-width: 60%; }
.bc-power-teaser__text h3 { font-family: var(--font-family-title); font-weight: var(--font-weight-black); color: var(--color-foreground-inverse); font-size: var(--font-size-5xl); line-height: var(--line-height-tight); margin: 0; }
.bc-power-teaser__text p { font-family: var(--font-family-body); font-weight: var(--font-weight-regular); color: var(--color-foreground-inverse-muted); font-size: var(--font-size-sm); margin: var(--space-8) 0 0; }
/* Text-Link mit Pfeil, unterstrichen — kein Button (bewusst keine CTA-Pille an dieser Stelle) */
.bc-power-teaser__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-12);
  color: var(--color-foreground-inverse); font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
  text-decoration: underline; text-underline-offset: 4px;
}
.bc-power-teaser__cta svg { flex: 0 0 auto; }
/* Porträt steht auf der Unterkante des Kastens auf, darf die Oberkante überragen (Design-Absicht:
   IMMER überragen, unabhaengig von der Textlaenge).
   Absolut statt Flex-Kind (Fix): als normales Flex-Kind zaehlte das Porträt in die automatische
   Hoehen-Berechnung von .pd-power hinein — dadurch wurde die Karte bei JEDEM Text aufgeblasen,
   statt nur bei langem Text zu wachsen. Absolut positioniert beeinflusst es die Kartenhoehe gar
   nicht mehr, .pd-power selbst braucht dafuer position:relative (hat es schon ueber .bc-box).
   Bug (behoben): eine FESTE Hoehe (vorher 261px), unten verankert, sitzt bei laengerem
   Highlight-Text (Karte waechst per min-height über 261px) komplett INNERHALB der Karte — kein
   Überhang mehr. Fix: top UND bottom verankert statt fixer Hoehe — die Hoehe ergibt sich damit
   immer aus Kartenhoehe + Überhang, der Überhang bleibt garantiert, egal wie lang der Text ist.
   Breite bleibt unveraendert 299px (object-fit:cover kann sie nie ueberschreiten) — kein Risiko
   fuer den Text links (.pd-power-text, max-width:60%).
   Überhang-Mindestwert 60px (2026-09-11, 2. Fix): bei der kuerzesten Karte (min-height 240px)
   ergab 44px Ueberhang eine Box von 284px Hoehe — SCHMALER als die 299px Boxbreite. Bei einem
   QUADRATISCHEN Quellbild croppt object-fit:cover in diesem Fall vertikal (von oben, wegen
   object-position:bottom), der Kopf wurde sichtbar abgeschnitten. Ab 60px Ueberhang ist die Box
   bei JEDER Kartenhoehe (>= 240px) mindestens so hoch wie breit — object-fit:cover croppt dann
   nur noch horizontal (von den Seiten), nie mehr vertikal, der Kopf bleibt immer vollstaendig
   sichtbar. */
.bc-power-teaser__media { position: absolute; z-index: 1; width: 299px; top: calc(-1 * var(--pd-power-overhang, 60px)); right: var(--space-32); bottom: 0; }
/* object-fit:cover statt contain (Fix 2026-09-11): das Quellbild ist QUADRATISCH (1792x1792).
   Bei contain und einer Box, die schmaler als hoch ist (jede Karte mit min-height > Boxbreite,
   also praktisch immer bei laengerem Text), fuellt ein quadratisches Bild nur die Breite aus und
   haengt per object-position:bottom UNTEN an — der zusaetzliche Platz oben (aus dem hoeher
   gewordenen top-verankerten Ueberhang oben) bleibt leerer Freiraum, das Bild rutscht sichtbar
   nach unten und der Ueberhang verschwindet. cover fuellt die Box IMMER exakt in beiden
   Dimensionen (Breite bleibt fix bei 100% = 299px, kein Risiko fuer den Text links) — nur der
   sichtbare Ausschnitt des quadratischen Fotos variiert je nach Boxhoehe. */
.bc-power-teaser__media img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
/* Auf schmalen Schirmen reicht die feste Höhe nicht mehr; Porträt entfällt, Text bekommt die
   volle Breite. Eigene Ergänzung — die Referenzvorlage hat für diesen Kasten keine Mobilregel. */
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-power-teaser--product { height: auto; }
  .bc-power-teaser__text { max-width: 100%; }
  .bc-power-teaser__media { display: none; }
}
/* Fließtext im Kasten */
.bc-text--stack { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-foreground-body); margin: 0; }
.bc-text--stack + .bc-text--stack { margin-top: var(--space-16); }
.bc-box h3:not(.bc-subhead), .bc-box h4:not(.bc-subhead) { margin: 0; }
/* Unterabschnitt mit schwarzem Haken-Kästchen — überschreibt die globale h1-h4-Regel
   (Heebo/900) bewusst auf Open Sans/700 in Fließtextgröße, wie in der Referenzvorlage. */
.bc-subhead { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-24) 0 6px; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-foreground); }
.bc-subhead:first-child { margin-top: 0; }
.bc-subhead__icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-sm); background: var(--color-surface-dark); display: inline-flex; align-items: center; justify-content: center; position: relative; top: -1px; }
.bc-subhead__icon svg { stroke-width: 5; }
/* Im dunklen Kasten hell wie die Überschrift (Fund WOL 27.10.: Zwischenüberschrift im Bissantz-Bezug stand schwarz auf Dunkel) */
:is(.bc-box--dark, .bc-statement, .bc-personas__info) .bc-subhead { color: var(--color-foreground-inverse); }
/* Karte mit Mindesthöhe: Titel steht fest, der Textbereich füllt den Rest; geöffnet wächst die
   Karte um die Unterabschnitte weiter. Vorherige feste `height` schnitt den Intro-Absatz hart
   ab, sobald er die kalkulierten ~6 Zeilen überschritt (Bug schon einmal bei 280px gefunden und
   auf 300px gefixt) — bei jedem noch längeren Intro wäre derselbe Bug wieder aufgetreten.
   `min-height` behält denselben 300px-Regelfall (6 Zeilen passen bequem), lässt die Karte bei
   längerem Text aber mitwachsen statt mitten im Satz abzuschneiden. Nebeneffekt (bewusst):
   dieselben 300px sitzen jetzt auch auf .pd-pricebox (unten) — im Regelfall stehen Überblick-
   und Preis-Karte damit auf gleicher Höhe nebeneinander. */
.bc-expandable { min-height: 300px; display: flex; flex-direction: column; overflow: visible; }
.bc-expandable > .bc-section-title { flex: 0 0 auto; }
.bc-expandable__clip { flex: 1 1 auto; overflow: hidden; }
.bc-expandable.is-open .bc-expandable__clip { flex: 0 0 auto; overflow: visible; }
.bc-expandable__intro { margin-bottom: 0; }
.bc-expandable.is-open .bc-expandable__intro { margin-bottom: var(--space-24); }
/* Aufklappbarer Rest: display:none statt Höhen-/Opazitäts-Übergang — der Text bleibt so im
   HTML-Quelltext und damit für Suchmaschinen und KI-Crawler lesbar (Text bleibt im DOM und
   damit für SEO/GEO auffindbar). */
.bc-expandable__rest { display: none; }
.bc-expandable.is-open .bc-expandable__rest { display: block; }
/* Umschalter sitzt mittig auf der unteren Kartenkante, zur Hälfte außerhalb */
.bc-expandable__toggle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; }
/* Auf schmalen Schirmen läuft der Intro-Absatz über deutlich mehr Zeilen — höherer Regelfall
   als Sicherheitsabstand, wächst bei Bedarf aber ohnehin per min-height weiter. */
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-expandable { min-height: 360px; }
}
/* Lucide-Icons in Fließtextgröße (Skala aus der Referenzvorlage) */
.bc-icon { display: inline-flex; width: 24px !important; height: 24px !important; flex: 0 0 auto; }
.bc-icon--sm { width: 18px !important; height: 18px !important; }
.bc-icon--lg { width: 30px !important; height: 30px !important; }
.bc-icon-list__summary { margin-top: var(--space-24); font-weight: var(--font-weight-bold); color: var(--color-foreground); text-align: center; }
/* ===== Kernfunktionen ===================================================================
   Vorher: acht eigenständige Karten mit umrandeter Icon-Box. Die Referenzvorlage nutzt
   denselben einen Kasten wie die Problem-Sektion — innen durch Haarlinien in 2×4 Felder
   geteilt, Icon in der Kopfzeile neben dem Titel. Dieselbe nth-child-Logik wie
   .pd-list--grid. ===== */
.bc-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-24); }
.bc-feature-grid__item { padding: var(--space-24) var(--space-32); }
.bc-feature-grid__item:nth-child(odd) { border-right: var(--border-width-thin) solid var(--color-border); padding-left: 0; }
.bc-feature-grid__item:nth-child(even) { padding-right: 0; }
.bc-feature-grid__item:nth-child(n+3) { border-top: var(--border-width-thin) solid var(--color-border); }
.bc-feature-grid__item b { display: flex; align-items: flex-start; gap: var(--space-8); font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); margin-bottom: 6px; color: var(--color-foreground); }
.bc-feature-grid__item b .bc-icon { color: var(--color-foreground); margin-top: 2px; }
.bc-feature-grid__item span { display: block; font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-foreground-muted); }
/* Eigene Ergänzung: einspaltig auf dem Handy (Referenzvorlage: ab 720px, hier gleich gehalten
   mit der Problem-Liste, damit beide Raster gemeinsam umbrechen). */
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-feature-grid { grid-template-columns: 1fr; }
  .bc-feature-grid__item { padding: var(--space-16) 0; border-right: none !important; }
  .bc-feature-grid__item:nth-child(n+2) { border-top: var(--border-width-thin) solid var(--color-border); }
}
.bc-relief { position: relative; margin-top: var(--space-32); }
.bc-relief__track { position: absolute; left: 15px; width: 2px; background: var(--color-border); }
.bc-relief__fill { position: absolute; left: 15px; width: 2px; background: var(--color-surface-dark); transition: height .2s ease-out, top .2s ease-out; }
.bc-relief__list { list-style: none; margin: 0; padding: 0; position: relative; }
.bc-relief__item { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: var(--space-16); padding: var(--space-12) 0; }
/* Trennlinie sitzt am Text, nicht am Listenpunkt — sonst liefe sie durch die Kreise */
.bc-relief__text { color: var(--color-foreground-body); line-height: var(--line-height-relaxed); padding-top: var(--space-12); margin-top: -12px; border-top: var(--border-width-thin) solid var(--color-border); font-size: var(--font-size-base); }
.bc-relief__item:first-child .bc-relief__text { border-top: none; }
.bc-relief__dot {
  position: relative; z-index: 1; width: 31px; height: 31px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--color-accent-subtle);
  border: var(--border-width-thick) solid var(--color-border); color: var(--color-border);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.bc-relief__dot--check { width: 37px; height: 37px; margin: -3px 0 0 -3px; }
.bc-relief__dot svg { width: 14px !important; height: 14px !important; }
.bc-relief__dot--check svg { width: 17px !important; height: 17px !important; }
/* Strich-Animation: das Icon ist zunächst „unsichtbar lang" versetzt und wird eingezeichnet */
.bc-relief__dot svg path { stroke-width: 4; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .45s ease .1s; }
.bc-relief__dot--check svg path { stroke-dasharray: 25; stroke-dashoffset: 25; }
.bc-relief__text--out { font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-xl); color: var(--color-foreground); }
.bc-relief__item--done { margin-top: var(--space-8); }
.bc-relief__item--done .bc-relief__text { border-top: none; padding-top: 0; margin-top: 0; }
/* Stufenweise Aktivierung — data-active-Muster (1…6) */
.bc-relief[data-active="1"] .bc-relief__item:nth-child(-n+1) .bc-relief__dot--x, .bc-relief[data-active="2"] .bc-relief__item:nth-child(-n+2) .bc-relief__dot--x, .bc-relief[data-active="3"] .bc-relief__item:nth-child(-n+3) .bc-relief__dot--x, .bc-relief[data-active="4"] .bc-relief__item:nth-child(-n+4) .bc-relief__dot--x, .bc-relief[data-active="5"] .bc-relief__item:nth-child(-n+5) .bc-relief__dot--x, .bc-relief[data-active="6"] .bc-relief__item:nth-child(-n+6) .bc-relief__dot--x { border-color: var(--color-accent); color: var(--color-error); }
.bc-relief[data-active="1"] .bc-relief__item:nth-child(-n+1) .bc-relief__dot--check, .bc-relief[data-active="2"] .bc-relief__item:nth-child(-n+2) .bc-relief__dot--check, .bc-relief[data-active="3"] .bc-relief__item:nth-child(-n+3) .bc-relief__dot--check, .bc-relief[data-active="4"] .bc-relief__item:nth-child(-n+4) .bc-relief__dot--check, .bc-relief[data-active="5"] .bc-relief__item:nth-child(-n+5) .bc-relief__dot--check, .bc-relief[data-active="6"] .bc-relief__item:nth-child(-n+6) .bc-relief__dot--check { background: var(--color-surface-dark); border-color: var(--color-accent); color: var(--color-foreground-inverse); }
.bc-relief[data-active="1"] .bc-relief__item:nth-child(-n+1) .bc-relief__dot svg path, .bc-relief[data-active="2"] .bc-relief__item:nth-child(-n+2) .bc-relief__dot svg path, .bc-relief[data-active="3"] .bc-relief__item:nth-child(-n+3) .bc-relief__dot svg path, .bc-relief[data-active="4"] .bc-relief__item:nth-child(-n+4) .bc-relief__dot svg path, .bc-relief[data-active="5"] .bc-relief__item:nth-child(-n+5) .bc-relief__dot svg path, .bc-relief[data-active="6"] .bc-relief__item:nth-child(-n+6) .bc-relief__dot svg path { stroke-dashoffset: 0; }
/* ===== Warum-Statement ==================================================================
   Vorher: normale weiße Karte. Die Referenzvorlage macht daraus den einen dunklen Einschub der
   Seite, mit der weißen Bissantz-Wortmarke oben rechts und einer Trennlinie über der
   Schlusszeile. ===== */
.bc-statement { background: var(--background-dark); border: none; }
.bc-statement .bc-section-title { color: var(--color-foreground-inverse); }
.bc-statement .bc-text--stack { color: var(--color-foreground-inverse-muted); }
.bc-statement__mark { position: absolute; top: var(--space-32); right: var(--space-32); width: 130px; line-height: 0; }
.bc-statement__mark svg { width: 130px; height: auto; display: block; }
.bc-statement__tagline { font-weight: var(--font-weight-bold); color: var(--color-foreground-inverse) !important; margin-top: var(--space-12); padding-top: var(--space-12); border-top: var(--border-width-thin) solid var(--color-border-inverse); }
/* Eigene Ergänzung: auf schmalen Schirmen würde die Wortmarke mit der Überschrift kollidieren
   — dort rückt sie unter das Fähnchen und die Überschrift beginnt darunter. */
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-statement__mark { position: static; margin-bottom: var(--space-16); }
}
/* ===== Zielgruppen-Bühne ================================================================
   Vorher: Zweispalten-Layout (Bild + Textspalte), Punkt-Marker, Seitenverhältnis 3/2.
   Fassung der Referenzvorlage: das Gruppenfoto läuft über die volle Kartenbreite (bricht
   seitlich aus dem Karten-Padding aus), darüber je Person eine Klickfläche und eine
   Beschriftung mit senkrechtem Strich zum Kopf. Die nicht gewählten Personen werden über ihre
   eigene Alphamaske abgedunkelt — dadurch bleibt genau eine Person farbig (Spotlight).
   Erklärtext liegt darunter im dunklen Kasten, nicht daneben. ===== */
.bc-personas { position: relative; margin: var(--space-32) calc(-1 * var(--space-32)) 0; }
/* container-type erlaubt cqw — die Beschriftungshöhe rechnet in Prozent der BILDBREITE, damit
   der Strich bei jeder Skalierung genau am Kopf endet. */
.bc-personas__stage { position: relative; container-type: inline-size; padding-top: 45px; }
.bc-personas__imgwrap { position: relative; width: 100%; aspect-ratio: 5 / 3; overflow: hidden; background: var(--color-surface); }
.bc-personas__imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-personas__imgwrap .bc-placeholder { position: absolute; inset: 0; border-radius: 0; border: none; min-height: 0; }
.bc-personas__dim {
  position: absolute; inset: 0; background: var(--color-surface-sunken); pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0.6; transition: opacity .35s ease;
}
.bc-personas__dim.is-active { opacity: 0; }
.bc-personas__dim.is-hover { opacity: 0.28; }
.bc-personas__zone { position: absolute; top: 0; bottom: 0; cursor: pointer; z-index: 2; }
.bc-personas__group { position: absolute; height: 39px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; }
.bc-personas__label {
  flex-shrink: 0; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; text-align: center; white-space: nowrap;
  --persona-label: var(--neutral-65); /* Komponente: inaktive Persona */
  color: var(--persona-label); transition: color .35s ease;
}
.bc-personas__tick { width: 1px; height: 27px; margin-top: 6px; --persona-tick: var(--neutral-65); background: var(--persona-tick); transition: background .35s ease; flex-shrink: 0; }
.bc-personas__group.is-hover .bc-personas__label { color: var(--color-foreground-body); }
.bc-personas__group.is-hover .bc-personas__tick { --persona-tick: var(--neutral-35); }
.bc-personas__group.is-active .bc-personas__label { color: var(--color-foreground); }
.bc-personas__group.is-active .bc-personas__tick { background: var(--color-surface-dark); }
/* Erklärkasten — nutzt den dunklen Ausbruch-Kasten der Problem-Sektion als Basis und
   überschreibt nur Innenabstand, Abstand oben und Verlauf. */
.bc-personas__info { padding: 14px var(--space-32); margin: 0 calc(-1 * var(--space-32)) calc(-1 * var(--space-32)); border-radius: 0 0 var(--card-radius) var(--card-radius); display: flex; align-items: center; gap: var(--space-16); --persona-info-verlauf: linear-gradient(135deg, #333 0%, #1a1a1a 40%, #0a0a0a 100%); /* Komponente */ background: var(--persona-info-verlauf); }
.bc-personas__info-text { min-width: 0; overflow: hidden; }
.bc-personas__info-text b { display: block; font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-base); color: var(--color-foreground-inverse); }
.bc-personas__info-sub { display: block; font-size: var(--font-size-sm); color: var(--color-foreground-inverse-muted); line-height: var(--line-height-normal); }
.bc-personas__closing { font-weight: var(--font-weight-bold); color: var(--color-foreground); }
/* Die Referenzvorlage blendet die Bühne unter 720px komplett aus — die Zonen sind für
   Fingerbedienung zu schmal und die Beschriftungen überlappen. Übernommen. */
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-personas, .bc-personas__info { display: none; }
}
@media (max-width: 480px) /* --breakpoint-mobile */ {
  .bc-personas { margin-left: calc(-1 * var(--space-16)); margin-right: calc(-1 * var(--space-16)); }
}
/* ===== Verwandte Produkte ===============================================================
   Vorher: Karten im .card-grid ohne Verlinkung und ohne Farbkennung. Referenzvorlage: jede
   Karte ist ein Link mit farbiger 16px-Randleiste je Produkt und leichtem Anheben beim
   Überfahren. Korrektur 2026-09-17: die Randleiste kam vorher aus einer Namens-Rätselei mit
   nur 4 Buckets + Rot-Standard (fast alle neueren Produkte liefen falsch rot) — jetzt liefert
   routes.js die echte Produktfarbe aus produkte.json (`color`, dieselbe wie das Index-Fähnchen)
   direkt als `--related-stripe`-Verlauf mit. */
.bc-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-24); }
.bc-related a {
  display: block; background: var(--color-surface); border-radius: var(--card-radius); corner-shape: var(--card-corner-shape);
  padding: var(--space-24) var(--space-24) var(--space-24) calc(var(--space-24) + 16px);
  box-shadow: var(--card-shadow); position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.2,1), box-shadow .3s ease;
}
.bc-related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bc-related a::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; border-radius: var(--card-radius) 0 0 var(--card-radius);
  background: var(--related-stripe, linear-gradient(180deg, var(--color-foreground-subtle), var(--color-foreground-muted)));
}
.bc-related b { display: block; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); margin-bottom: 6px; color: var(--color-foreground); }
.bc-related span { display: block; font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-foreground-muted); overflow-wrap: anywhere; }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-related { grid-template-columns: 1fr; }
}
/* min-height (nicht height): 300px = derselbe Regelfall-Wert wie .pd-overview nebenan (beide
   Karten sollen meistens gleich hoch sein), aber ein ungewöhnlich langer Preishinweis darf die
   Karte wachsen lassen statt ihn abzuschneiden (vorher `height: 280px` fest — derselbe
   Fehlertyp wie bei .pd-overview, nur noch nicht aufgefallen, weil priceNote bislang immer
   kurz war). */
.bc-price-box { min-height: 300px; display: flex; flex-direction: column; }
.bc-price-box .bc-price-box__price { display: flex; align-items: baseline; gap: var(--space-8); margin-bottom: var(--space-4); }
.bc-price-box .bc-price-box__price b { font-family: var(--font-family-title); font-size: var(--font-size-3xl); font-weight: var(--font-weight-black); color: var(--color-foreground); }
.bc-price-box .bc-price-box__price span { font-size: var(--font-size-sm); color: var(--color-foreground-muted); }
.bc-price-box p { margin: 0 0 var(--space-16); font-size: var(--font-size-sm); color: var(--color-foreground-muted); line-height: var(--line-height-normal); }
/* CTA wird nach unten gedrückt, egal wie lang der Hinweistext ist */
.bc-price-box .bc-button { margin-top: auto; flex-shrink: 0; }
.bc-promo--product {
  --promo-c1: #4ec5f2; --promo-c2: #1f6fd0; --promo-c3: #002d71;
  position: relative; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); padding: 44px var(--space-24) var(--space-24);
  color: var(--color-foreground-inverse);
  background: linear-gradient(135deg, var(--promo-c1) 0%, var(--promo-c2) 55%, var(--promo-c3) 100%);
  box-shadow: none; /* Grundform hat einen Schatten, die Produkt-Kachel nicht */
}
/* Bug gefunden + gefixt: overflow:hidden stand direkt auf .pd-promo (für den Blob nötig), hat
   dabei aber auch das Fähnchen abgeschnitten — dessen linker Zipfel ragt per left:-6px bewusst
   über die Box hinaus (s. .fahnchen oben). Blob bekommt jetzt einen eigenen Clip-Rahmen, genau
   das Muster aus .pd-power-blobs — .pd-promo selbst bleibt overflow:visible. */
.bc-promo__blobs { position: absolute; inset: 0; overflow: hidden; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); pointer-events: none; }
.bc-promo__blob {
  position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-foreground-inverse) 38%, transparent), transparent 68%);
}
.bc-promo__body { position: relative; z-index: 1; }
.bc-promo--product h4 { font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-xl); margin: var(--space-12) 0 var(--space-8); color: var(--color-foreground-inverse); }
.bc-promo--product p { margin: 0 0 var(--space-16); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-foreground-inverse-muted); }
.bc-ai-text { color: var(--color-ai); }
/* ── Hero mit Suchfeld ────────────────────────────── */
.bc-index-hero { padding: var(--space-64) var(--space-32) var(--space-48); text-align: center; }
.bc-index-hero h1 {
  font-family: var(--font-family-title); font-weight: var(--font-weight-black);
  font-size: clamp(var(--font-size-4xl), 8vw, var(--font-size-6xl)); letter-spacing: var(--letter-spacing-tight);
}
.bc-index-hero__sub { color: var(--color-foreground-muted); font-size: var(--font-size-lg); margin-top: var(--space-8); }
.bc-index-hero__label { font-weight: var(--font-weight-bold); margin-top: var(--space-32); }
/* Die laufende blaue Kontur sitzt auf der HÜLLE .mp-search-shell, nicht auf dem Eingabefeld
   selbst. Grund: nur so können Eingabezeile und aufklappende Antwort in EINER gemeinsamen
   gerahmten Fläche liegen. Das Feld gibt dafür Rahmen, Schatten, Hintergrund und Animation ab
   und wird durchsichtig.
   border-radius 24px = halbe Feldhöhe (48px) — im Ruhezustand sieht die Hülle deshalb aus wie
   die frühere Pille, kann aber nach unten wachsen. */
.bc-ai-search {
  position: relative; max-width: 480px; margin: var(--space-16) auto 0;
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-2xl); text-align: left;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    conic-gradient(from var(--mp-angle, 0deg),
      transparent 0deg, var(--color-ai) 55deg, color-mix(in srgb, var(--color-ai), white 40%) 95deg, var(--color-ai) 135deg, transparent 195deg) border-box;
  --suchfeld-schein: 0 0 8px rgba(0,0,0,.09); /* Komponente: Suchfeld: weicher Schein rundum */ box-shadow: var(--suchfeld-schein);
  animation: bc-ai-search-spin 3s linear infinite;
}
/* Fokus/Hover: der Konturlauf hält an und wird durchgehend akzentblau */
.bc-ai-search:hover, .bc-ai-search:focus-within {
  animation: none;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--color-ai), var(--color-ai)) border-box;
}
/* line-height/font-size 0: sonst ist der Container durch die Zeilen-Unterlänge unten höher
   als das Eingabefeld und die umlaufende Kontur wirkt dort dicker. */
.bc-ai-search__field { position: relative; line-height: 0; font-size: 0; }
.bc-ai-search__field input {
  display: block; width: 100%; height: 48px; padding: 0 var(--space-48) 0 var(--space-16);
  border-radius: var(--radius-full); border: none; background: transparent;
  font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-foreground);
}
.bc-ai-search__field input::placeholder { color: var(--color-foreground-subtle); }
.bc-ai-search__field input:focus-visible { outline: none; }
.bc-ai-search__field input:focus { color: var(--color-ai); caret-color: var(--color-ai); }
.bc-ai-search:hover input::placeholder { color: var(--color-ai); }
@property --mp-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes bc-ai-search-spin { to { --mp-angle: 360deg; } }
/* Senden-Knopf im Suchfeld: bc-icon-button --filled (40 px, mittig im 48 px hohen Feld); Hover in KI-Blau, weil KI-Funktion */
.bc-ai-search__submit { position: absolute; right: 4px; top: 4px; transition: background var(--duration-base) var(--ease-standard); }
.bc-ai-search:hover .bc-ai-search__submit, .bc-ai-search:focus-within .bc-ai-search__submit, .bc-ai-search__submit:hover { background: var(--color-ai); }
/* Unsichtbarer Spiegel misst die Breite des getippten Platzhaltertextes, damit der eigene
   Cursor mitwandert (der echte Eingabe-Cursor steht beim Platzhalter still). */
.bc-ai-search__mirror {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  visibility: hidden; white-space: pre; pointer-events: none;
  font-family: var(--font-family-body); font-size: var(--font-size-sm);
}
.bc-ai-search__caret {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--color-foreground-subtle); pointer-events: none; opacity: 0;
  animation: bc-ai-search-caret .9s step-end infinite;
}
.bc-ai-search:hover .bc-ai-search__caret { background: var(--color-ai); }
@keyframes bc-ai-search-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bc-ai-search { animation: none; }
  .bc-ai-search__caret { animation: none; opacity: 0; }
}
/* ===== Datenschutz-Hinweis an den KI-Eingabefeldern ======================================
   Pflichtangabe, keine Gestaltungsfrage: die Eingabe geht an einen KI-Anbieter und wird bei
   uns mitgeschrieben — beides muss am Feld stehen, wo es passiert.
   Bewusst klein (12px) und grau: er soll auffindbar sein, nicht dominieren. Kleiner als 12px
   nicht — dann wird er unlesbar und erfüllt seinen Zweck nicht mehr.

   Standardmäßig eingeklappt, öffnet erst bei Fokus im Feld.
   max-height statt eines Grid-Zeilen-Tricks (0fr→1fr): Letzterer bräuchte einen einzelnen
   Kind-Container, weil ein Grid sonst Text UND den `<a>`-Link als ZWEI Grid-Items behandelt
   (eigener Fund beim Bauen — zwei Zeilen statt einer, Höhe blieb hängen) — das hätte einen
   Markup-Umbau an drei Stellen (zwei Dateien) gebraucht.

   ⚠️ Der Deckel muss großzügig über der echten Höhe liegen, sonst schneidet er die Pflichtangabe
   ab. Genau das war er anfangs NICHT: 100px, gerechnet mit 54–72px — bei 320px braucht der Text
   aber 6 Zeilen à 18px = 108px, die letzte Zeile mit dem „Datenschutz"-Link wurde abgeschnitten
   (bei 375px passte es mit 72px, deshalb fiel es vorher nicht auf). Jetzt 220px — deckt auch
   vergrößerte Schrift und Zeilenumbrüche ab. Sichtbar wird trotzdem nur die echte Inhaltshöhe,
   der Deckel ist reine Obergrenze für den Übergang.
   Auslöser ist :focus-within auf dem WIDGET-CONTAINER (.mp-hero/.mp-cat-center-box/.bc-ai-box),
   nicht auf dem Eingabefeld allein — sonst würde der Hinweis unter dem eigenen "Datenschutz"-
   Link verschwinden, sobald der Besucher per Tab genau dorthin springt (Fokus wandert dann vom
   Feld weg, aber bleibt innerhalb desselben Containers). Text selbst bis auf Weiteres
   unverändert. */
.bc-ai-hint {
  max-height: 0; overflow: hidden;
  font-size: var(--font-size-xs); line-height: var(--line-height-normal); color: var(--color-foreground-subtle);
  margin-top: 0; opacity: 0;
  transition: max-height .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease,
    margin-top .35s cubic-bezier(.16, 1, .3, 1), padding-bottom .35s cubic-bezier(.16, 1, .3, 1);
}
.bc-ai-hint a { color: inherit; text-decoration: underline; }
.bc-ai-hint a:hover { color: var(--color-ai); }
@media (prefers-reduced-motion: reduce) {
  .bc-ai-hint { transition: none; }
}
.bc-index-hero:focus-within .bc-ai-hint--hero, .bc-ai-box:focus-within .bc-ai-hint {
  max-height: 220px; opacity: 1; margin-top: var(--space-8);
}
.bc-category-bento__center-box:focus-within .bc-ai-hint--thema {
  max-height: 220px; opacity: 1; padding-bottom: var(--space-16);
}
/* Unter dem Hero-Suchfeld mittig und auf Feldbreite begrenzt — der ganze Hero ist zentriert. */
.bc-ai-hint--hero { max-width: 480px; margin-inline: auto; text-align: center; }
/* In der Themen-Box: dem linken Innenmaß der Eingabezeile folgen (8px links, 16px rechts;
   das untere Innenmaß animiert oben mit rein, s. Fokus-Regel). */
.bc-ai-hint--thema { padding: 0 var(--space-16) 0 28px; }
/* Auf der Produktseite sitzt der Hinweis auf der dunklen Fläche — Grau wäre dort unlesbar. */
.bc-ai-box .bc-ai-hint { color: var(--color-foreground-inverse-subtle); }
.bc-ai-box .bc-ai-hint a:hover { color: var(--color-ai); }
/* ===== Info-Badge "Personen sind KI-generiert/fiktiv" ========
   Sitzt oben rechts in vier Karten (Highlight, Unternehmen, Index-Zielgruppen-Box,
   Index-Beratung) — alle vier Container haben schon position:relative, außer
   .pd-persona-info--nobox (s. dort). Popup rein per CSS (:hover/:focus-within), kein JS. */
.bc-info {
  position: absolute; top: var(--space-16); right: var(--space-16); z-index: 2;
  display: inline-flex; cursor: pointer;
}
/* Opacity 0.3: Icon soll unauffälliger wirken. Nur das Icon selbst,
   nicht der Popup-Text (.mp-info-badge-pop bleibt voll lesbar, sobald er per Hover/Fokus da ist). */
.bc-info__icon { width: 20px; height: 20px; display: block; opacity: .3; }
.bc-info--dark .bc-info__icon { color: var(--color-foreground); }
.bc-info--light .bc-info__icon { color: var(--color-foreground-inverse); }
.bc-info__pop {
  position: absolute; top: calc(100% + var(--space-8)); right: 0; z-index: 3;
  width: max-content; max-width: var(--size-popover);
  background: var(--color-surface-dark); color: var(--color-foreground-inverse);
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-md);
  font-size: var(--font-size-xs); line-height: var(--line-height-normal); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.bc-info:hover .bc-info__pop, .bc-info:focus .bc-info__pop, .bc-info:focus-within .bc-info__pop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .bc-info__pop { transition: none; }
}
/* ===== KI-Antwort-Panel ==================================================================
   Gemeinsame Bausteine für BEIDE Index-Felder — Hero („Welches Problem haben Sie?") und
   Themen-Bento („Welches Thema beschäftigt Sie gerade?"). Die Antwort klappt INNERHALB der
   jeweiligen Hülle auf, nicht als eigener Kasten darunter.
   Die Höhe wird per JS exakt gemessen und als px-Wert animiert (nicht über einen
   max-height-Puffer geschätzt) — sonst wirken Auf- und Zuklappen unterschiedlich lang, weil am
   Ende ein unsichtbarer Rest-Puffer mitläuft. ===== */
.bc-ai-answer { overflow: hidden; transition: height .6s cubic-bezier(.16, 1, .3, 1); }
.bc-ai-answer__inner {
  position: relative; padding: var(--space-8) var(--space-32) var(--space-32);
  text-align: left; opacity: 0; transform: translateY(-6px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bc-ai-answer.is-open .bc-ai-answer__inner { opacity: 1; transform: none; }
.bc-ai-answer__divider { border-top: var(--border-width-thin) solid var(--color-border-subtle); margin: 0 0 var(--space-24); }
@media (prefers-reduced-motion: reduce) {
  .bc-ai-answer { transition: none; }
  .bc-ai-answer__inner { transition: none; }
}
/* Schließen der Antwort: bc-icon-button --sm */
.bc-ai-answer__close { position: absolute; top: var(--space-16); right: var(--space-16); }
.bc-ai-answer__eyebrow {
  font-family: var(--font-family-body); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--color-foreground-muted);
  margin: 0 0 var(--space-16); padding-right: var(--space-32);
}
.bc-ai-answer__text {
  font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-foreground-body); margin: 0;
  padding-bottom: var(--space-24); border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}
/* Der hervorgehobene Name (Produkt bzw. „Bissantz") steht in KI-Blau — die Antwort kommt
   von der KI, die Farbe kennzeichnet das. Kontext-Regel, s. DESIGN.md.
   Steht ein Produkt-Linkziel fest, ist der Name ein <a> statt <strong> — Optik bleibt
   identisch, nur Unterstrich als Hover-Hinweis aufs Klicken. */
.bc-ai-answer__text strong, .bc-ai-answer__text a {
  color: var(--color-ai); font-weight: var(--font-weight-bold); text-decoration: none;
}
.bc-ai-answer__text a:hover, .bc-ai-answer__text a:focus { text-decoration: underline; }
/* Ladehinweis, solange die Antwort unterwegs ist. Gibt es in der Referenzvorlage nicht — dort
   wird der Platzhalter sofort angezeigt; eine echte KI-Antwort braucht aber ein paar Sekunden. */
.bc-ai-answer__text.is-loading { color: var(--color-foreground-subtle); font-style: italic; }
.bc-ai-answer__cta-label {
  font-family: var(--font-family-title); font-weight: var(--font-weight-bold); text-align: center;
  margin: var(--space-24) 0 var(--space-16);
}
/* Umbruch auch auf großen Bildschirmen (2.13.1): passen beide Beschriftungen nicht nebeneinander (Index-Box ca. 620 px innen,
   „Kostenloses Beratungsgespräch“ in Titelschrift), ragte der rechte Knopf über den Innenrand der Box (User-Fund 28.10.).
   Passen sie, stehen sie wie bisher gleich breit nebeneinander. */
.bc-ai-answer__cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.bc-ai-answer__cta-buttons .bc-button { flex: 1 1 0; white-space: nowrap; padding: 0 var(--space-16); }
/* Findet die KI kein Produkt, blendet das JS den Produkt-Knopf per hidden-Attribut aus.
   Das reicht NICHT von allein: `[hidden] { display: none }` steht nur im Browser-Standard und
   verliert gegen jede eigene display-Regel — und .bc-button setzt display. Ohne diese Zeile blieb
   „Produkt ansehen" sichtbar, obwohl das Attribut gesetzt war (gefunden). */
.bc-ai-answer__cta-buttons .bc-button[hidden] { display: none; }
.bc-ai-answer__cta-buttons--single { justify-content: center; }
.bc-ai-answer__cta-buttons--single .bc-button { flex: 0 0 auto; }
/* Solange die Antwort noch lädt, wirken die CTA-Knöpfe wie ein fertiges Angebot zu einer noch
   gar nicht existierenden Antwort (User-Fund, 2026-09-10) — ausgeblendet, bis setzeText()/
   setzeKnoepfe() die "is-answering"-Klasse wieder entfernen (s. bissantz-marktplatz.js). */
.is-answering .bc-ai-answer__cta-label, .is-answering .bc-ai-answer__cta-buttons { display: none; }
/* Bei schmalem Fenster passen zwei Knöpfe nicht nebeneinander, ohne dass die Beschriftung
   abgeschnitten wird (white-space: nowrap) — dann untereinander. */
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-ai-answer__cta-buttons { flex-wrap: wrap; }
  .bc-ai-answer__cta-buttons .bc-button { flex: 1 1 100%; }
  .bc-ai-answer__inner { padding: var(--space-8) var(--space-24) var(--space-24); }
}
/* Problem-Pills: Platzierung unter dem Suchfeld */
.bc-index-hero__pills { justify-content: center; margin-top: var(--space-16); max-width: 620px; margin-inline: auto; }
/* Der Streifen läuft über die Inhaltsspalte hinaus bis an beide Fensterkanten, die erste
   Kachel fluchtet aber mit der Überschrift darüber.

   Die Referenzvorlage misst das per JavaScript. Wir rechnen es in CSS — und zwar aus zwei
   Gründen besser: (1) es gibt keinen Zwischenzustand, der veralten kann (bei uns hatte der
   gemessene Wert nach jedem Fensterwechsel bis zum nächsten Neuaufbau die falsche Breite und
   erzeugte horizontalen Seiten-Scroll), (2) es funktioniert auch ohne JavaScript.

   negativer Seitenrand  = das Innenmaß der Sektion aufheben → Streifen = volle Fensterbreite
   --mp-gutter           = linke Kante der Inhaltsspalte. `100%` bezieht sich hier auf die
                           Breite des Streifens selbst, also die Fensterbreite ohne Scrollbalken
                           — genau die Größe, die eine JS-Messung sonst bräuchte.
                           max() fängt schmale Fenster ab, wo die Spalte am Sektionsrand klebt. */
.bc-carousel { position: relative; margin-inline: calc(-1 * var(--space-32)); }
.bc-carousel .bc-carousel__track {
  --mp-gutter: max(var(--space-32), calc((100% - var(--layout-content-width)) / 2));
}
.bc-carousel::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 90px;
  background: linear-gradient(to right, transparent, var(--color-background));
  pointer-events: none; z-index: 2;
}
.bc-carousel__track {
  display: flex; gap: var(--space-24); overflow-x: auto; scrollbar-width: none;
  cursor: grab;
  padding-block: 18px 60px;
  padding-inline: var(--mp-gutter, var(--space-32)) 0;
  scroll-padding-inline-start: var(--mp-gutter, 32px);
  /* KEIN scroll-snap: das rastet den Streifen nach jedem Ziehen und sogar beim Skalieren
     einer Kachel neu ein — sichtbar als Sprung mitsamt mitwandernden Nachbarn. */
  scroll-snap-type: none;
}
.bc-carousel__track::-webkit-scrollbar { display: none; }
.bc-carousel__track:active { cursor: grabbing; }
.bc-carousel__track > *:last-child { margin-right: var(--mp-gutter, var(--space-32)); }
/* Karussell-Pfeile: bc-icon-button --lg --raised; hier nur die Lage */
.bc-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.bc-carousel__arrow svg { width: 22px; height: 22px; }
.bc-carousel__arrow--left { left: 20px; }
.bc-carousel__arrow--right { right: 20px; }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-carousel__arrow { display: none; }
}
.bc-product-card {
  position: relative; overflow: visible; flex: 0 0 auto;
  width: var(--size-card); height: 540px; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape);
  box-shadow: var(--card-shadow); cursor: pointer; will-change: transform;
  text-decoration: none; color: inherit;
  transition: transform .6s var(--card-ease), box-shadow .6s var(--card-ease);
  /* Browser-eigenes Link-Drag zusätzlich per CSS unterbunden (Sicherheitsnetz zum
     draggable="false"-Attribut in renderIndexProductCards, routes.js — s. Kommentar dort). */
  -webkit-user-drag: none; user-drag: none;
}
.bc-product-card * { user-select: none; }
@media (hover: hover) {
  .bc-product-card:hover { transform: scale(1.04); box-shadow: var(--card-shadow-hover); z-index: 3; }
}
/* Unveröffentlichtes Produkt = <article> statt <a> (server-seitig via linkFor()/tag in
   renderIndexProductCards, routes.js) — der Index zeigt auch diese Karten, nur eben nicht
   anklickbar. Ohne diese Regel sähe die Karte trotzdem interaktiv aus (geerbter Hover-Zoom/
   -Cursor von .mp-card), das wäre irreführend. */
article.bc-product-card { cursor: default; }
@media (hover: hover) {
  article.bc-product-card:hover { transform: none; box-shadow: var(--card-shadow); }
}
.bc-product-card__inner {
  position: absolute; inset: 0; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; padding: 30px;
  background: var(--color-surface);
}
.bc-product-card__inner > * { position: relative; z-index: 1; }
.bc-product-card__head { margin: 0; padding: 0; }
.bc-product-card__media-label {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 0; text-align: center;
  font-size: var(--font-size-2xs); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  --bild-etikett: var(--neutral-65); /* Komponente: Beschriftung auf Bild */
  color: var(--bild-etikett); pointer-events: none;
}
.bc-product-card:has(.bc-product-card__new) .bc-product-card__media-label { padding-right: 74px; }
.bc-product-card__type {
  position: absolute; top: 19px; right: 15px; z-index: 1; text-align: right;
  font-family: var(--font-family-title); font-size: var(--font-size-2xs); font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--color-foreground-subtle);
}
/* padding-right nur 12px und text-wrap:balance — die Typ-Beschriftung sitzt oberhalb der
   Überschrift, reservierter Platz daneben hat Namen wie "DeltaApp Mobile" unnötig gebrochen. */
.bc-product-card__name {
  font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-foreground);
  margin: 30px 0 20px; padding-right: var(--space-12); text-wrap: balance;
}
.bc-product-card__desc { font-size: var(--font-size-xs); line-height: var(--line-height-normal); color: var(--color-foreground-muted); margin-bottom: var(--space-12); max-width: 26ch; }
.bc-product-card__price { font-family: var(--font-family-title); font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); color: var(--color-foreground); }
.bc-product-card__price small { display: block; font-family: var(--font-family-body); font-weight: var(--font-weight-regular); font-size: var(--font-size-2xs); color: var(--color-foreground-subtle); letter-spacing: var(--letter-spacing-normal); margin-top: 2px; }
/* dunkle Karten (Kachel mit ganzflächigem dunklem Bild) */
.bc-product-card--dark .bc-product-card__name { color: var(--color-foreground-inverse); }
.bc-product-card--dark .bc-product-card__desc { color: var(--color-foreground-inverse-muted); }
.bc-product-card--dark .bc-product-card__price { color: var(--color-foreground-inverse); }
.bc-product-card--dark .bc-product-card__type { color: var(--color-foreground-inverse-subtle); }
/* NEU-Banderole über die untere rechte Ecke. Bandmitte liegt auf der Ecken-Diagonalen,
   40px von der Ecke entfernt: 40/Wurzel(2) etwa 28,3 → Mittelpunkt bei 120−28,3 = 91,7px
   in beiden Achsen. Breite 220px übersteigt die Quadrat-Diagonale (170px), damit die Enden
   an beiden Kanten sauber abgeschnitten werden. */
.bc-product-card__new { position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; z-index: 2; overflow: hidden; pointer-events: none; }
.bc-product-card__new span {
  position: absolute; left: 91.7px; top: 91.7px; width: 220px;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--gelb-band);
  padding: 9px 0; text-align: center;
  font-family: var(--font-family-title); font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-wider); color: var(--color-foreground);
}
/* minmax(0,1fr) statt 1fr: "1fr" heisst "minmax(auto,1fr)", und dieses auto ist die
   Mindestbreite des Inhalts. Lange Produktnamen ("Repository Maintenance Application")
   machen die Spalten damit breiter als das Raster und sprengen die Seite — bei 375px
   gemessene 34px horizontaler Seiten-Scroll. Zusaetzlich duerfen die Titel umbrechen. */
.bc-mini-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-48) var(--space-32); padding: 6px 10px; }
.bc-mini-card { position: relative; cursor: pointer; text-decoration: none; color: inherit; transition: transform .25s ease; }
.bc-mini-card__media {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface);
  box-shadow: var(--card-shadow); transition: box-shadow .3s ease;
  display: flex; flex-direction: column; padding: 58px 30px 22px;
}
@media (hover: hover) {
  .bc-mini-card:hover { transform: scale(1.035); }
  .bc-mini-card:hover .bc-mini-card__media { box-shadow: var(--card-shadow-hover); }
}
/* Unveröffentlicht = <article> statt <a> (s. Kommentar bei article.mp-card oben) — dieselbe
   Entschärfung fürs Mini-Raster. */
article.bc-mini-card { cursor: default; }
@media (hover: hover) {
  article.bc-mini-card:hover { transform: none; }
  article.bc-mini-card:hover .bc-mini-card__media { box-shadow: var(--card-shadow); }
}
.bc-mini-card .bc-flag { position: absolute; top: 12px; left: -6px; z-index: 4; }
/* -webkit-line-clamp: 3 statt 2 — "Repository Maintenance Application"/"Publisher Maintenance
   Application" brauchen drei Zeilen. Reiner CSS-Fix statt kürzerer Anzeigenamen: der Name
   bleibt vollständig, u.a. weil er 1:1 gegen catalog.json matcht (s. produkte.json-Kommentar)
   und im ItemList-JSON-LD (Phase 4 Schritt 8) als "name" landet. */
.bc-mini-card__title {
  position: relative; z-index: 3; margin: 0;
  font-family: var(--font-family-title); font-weight: var(--font-weight-black); font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-foreground); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bc-mini-card__desc {
  position: relative; z-index: 3; margin: var(--space-8) 0 0; font-size: var(--font-size-xs); line-height: var(--line-height-normal);
  color: var(--color-foreground-muted); max-width: 26ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bc-mini-card__price { position: relative; z-index: 3; margin-top: auto; font-family: var(--font-family-title); font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); color: var(--color-foreground); }
.bc-mini-card__price small { display: block; font-family: var(--font-family-body); font-weight: var(--font-weight-regular); font-size: var(--font-size-2xs); color: var(--color-foreground-subtle); letter-spacing: var(--letter-spacing-normal); margin-top: 2px; }
.bc-reveal { margin-top: var(--space-32); }
.bc-reveal[hidden] { display: none; }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-mini-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Eigene Ergänzung — die Referenzvorlage hat für das Mini-Raster keine Handy-Regel, und bei
   375px war das Ergebnis unbrauchbar: zwei Spalten ergeben 130px breite Kacheln, von denen
   nach dem Innenabstand (2×30px) noch 70px übrig bleiben. Gemessen: Titel und Beschreibung
   hatten Höhe 0 — vollständig abgeschnitten —, der Inhalt lief aus der Kachel. Die
   Referenzvorlage hat denselben Fehler; das Raster liegt dort hinter einem Klick, deshalb ist
   er dort nicht aufgefallen. Ab 560px daher eine Spalte: rechnerisch braucht der 22px-Titel
   rund 150px Textbreite, das erreichen zwei Spalten erst oberhalb von ~540px Fensterbreite. */
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-mini-card-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
}
/* ── "Der wirksame Unterschied" — vier quadratische Kästen ── */
.bc-usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); }
/* aspect-ratio ENTFERNT ("Karten bei 1000px nicht richtig"): ein Quadrat verlangt bei 212px
   Kastenbreite auch 212px Hoehe — der 26px-Text braucht dort aber bis zu 364px. Die Folge
   waren VIER UNTERSCHIEDLICH HOHE Kaesten (364/301/332/364) und eine Verbindungslinie, die in
   jedem auf anderer Hoehe sitzt.
   Die Referenzvorlage ist in diesem Bereich keine Referenz: ihr repeat(4, 1fr) laesst die
   Mindestbreite des Inhalts durch, und zusammen mit aspect-ratio schaukelt sich das auf — bei
   985px hat sie 698px horizontalen Ueberlauf (frisch geladen gemessen).
   Jetzt: min-height statt aspect-ratio. Bei voller Inhaltsbreite (1148px, vier Spalten, 24px
   Abstand) ist der Kasten 269px breit — die 269px Mindesthoehe ergeben dort also genau das
   Quadrat der Vorlage. Schmaler bleiben alle vier gleich hoch, weil Grid-Elemente von sich aus
   auf Zeilenhoehe strecken; nur aspect-ratio hatte das ueberstimmt. */
.bc-usp__box {
  --usp-linie: var(--neutral-60); /* Komponente: Rahmen + Verbinder der USP-Boxen */
  min-height: 269px; border: var(--border-width-thin) solid var(--usp-linie); border-radius: var(--card-radius); corner-shape: var(--card-corner-shape);
  padding: var(--space-32); display: flex; flex-direction: column;
  color: var(--color-foreground); position: relative;
  container-type: inline-size;
}
/* verbindende Haarlinie zwischen den Kästen */
.bc-usp__box:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-24) - 1px);
  width: calc(var(--space-24) + 1px); height: 1px; background: var(--usp-linie); transform: translateY(-50%);
}
.bc-usp__hl { color: var(--color-ai); }
/* Schriftgroesse an der KASTENBREITE statt am Fenster (cqw, dieselbe Technik wie in der
   Zielgruppen-Buehne). Achtung: cqw rechnet mit der INHALTSBOX des Containers, nicht mit
   seiner Aussenbreite — bei 269px Kasten und 2x32px Innenabstand sind das 205px. Deshalb
   13cqw (205 x 0.13 = 26.6, von clamp auf 26px gedeckelt) und nicht 9.6cqw, was beim ersten
   Versuch nur 19.5px ergab.
   Wirkung: 26px sobald der Kasten breit genug ist (Desktop, zweispaltig, einspaltig auf
   dem Handy), schrumpfend nur im Zwischenbereich, wo vier Spalten eng werden. Eine Messung
   am Fenster (vw) wuerde nach jedem Spaltenwechsel den falschen Wert liefern. */
.bc-usp__text {
  margin-top: var(--space-16); font-family: var(--font-family-title); font-weight: var(--font-weight-black);
  font-size: clamp(1.125rem, 13cqw, 1.625rem); letter-spacing: var(--letter-spacing-tight); color: var(--color-foreground); line-height: var(--line-height-snug);
}
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-usp__box:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-usp { grid-template-columns: minmax(0, 1fr); }
  .bc-usp__box { min-height: 0; }
}
/* ── Themen-Bento — 2x2, Text je Ecke ausgerichtet ── */
.bc-category-bento { position: relative; display: grid; gap: var(--space-24); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 260px 260px; }
/* ===== Kacheln weichen der aufklappenden Antwort aus =====================================
   Ohne das legt sich die geöffnete Antwort über die Kacheltexte — gemessen 48px oben und
   49px unten. Statt die Box zu verkleinern, rücken die Kacheln auseinander: die beiden
   oberen nach oben, die beiden unteren nach unten.
   Die Werte setzt das Shell-JS je nach Antwortlänge (verteileKacheln()), deshalb Variablen.
   `margin-bottom` wächst mit, damit der nächste Abschnitt nicht überdeckt wird — die
   Verschiebung selbst ist ein transform und beansprucht keinen Platz im Layout. ===== */
.bc-category-bento {
  --mp-cat-up: 0px; --mp-cat-down: 0px;
  margin-bottom: var(--mp-cat-down);
  transition: margin-bottom .6s cubic-bezier(.16, 1, .3, 1);
}
.bc-category-bento__tile {
  position: relative; display: flex; flex-direction: column; padding: 30px;
  border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); overflow: hidden; text-decoration: none; background: var(--color-surface);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bc-category-bento__tile--tl, .bc-category-bento__tile--tr { transform: translateY(calc(-1 * var(--mp-cat-up))); }
.bc-category-bento__tile--bl, .bc-category-bento__tile--br { transform: translateY(var(--mp-cat-down)); }
@media (prefers-reduced-motion: reduce) {
  .bc-category-bento, .bc-category-bento__tile, .bc-category-bento__center-box { transition: none; }
}
.bc-category-bento__bg { position: absolute; inset: -10%; z-index: 0; transform: scale(1); transition: transform .7s var(--card-ease); }
@media (hover: hover) {
  .bc-category-bento__tile:hover .bc-category-bento__bg { transform: scale(1.14); }
}
.bc-category-bento__bg-pattern { position: absolute; inset: 0; opacity: .4; background-repeat: repeat; }
.bc-category-bento__bg-pattern--grid { background-image:
  repeating-linear-gradient(30deg, color-mix(in srgb, var(--color-foreground-inverse) 50%, transparent) 0px, color-mix(in srgb, var(--color-foreground-inverse) 50%, transparent) 1px, transparent 1px, transparent 48px),
  repeating-linear-gradient(120deg, color-mix(in srgb, var(--color-foreground-inverse) 50%, transparent) 0px, color-mix(in srgb, var(--color-foreground-inverse) 50%, transparent) 1px, transparent 1px, transparent 48px); }
.bc-category-bento__bg-pattern--circles { background-image: repeating-radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 0px, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 1px, transparent 1px, transparent 34px); }
.bc-category-bento__bg-pattern--poly { background-image:
  repeating-linear-gradient(60deg, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 0px, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 1px, transparent 1px, transparent 46px),
  repeating-linear-gradient(120deg, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 0px, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 1px, transparent 1px, transparent 46px),
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 0px, color-mix(in srgb, var(--color-foreground-inverse) 55%, transparent) 1px, transparent 1px, transparent 46px); }
/* Echtes Kurvenmuster der Referenzvorlage fuer die S/4HANA-Kachel: beim Aufbau war das lange
   SVG-Data-URI zunaechst nicht mituebernommen und durch ein eigenes, formfremdes
   Ellipsen-Muster ersetzt worden - die Grafik war dadurch falsch. Jetzt 1:1 aus der Vorlage. */
.bc-category-bento__bg-pattern--curves { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' width='1920' height='1080'%3E%3Cg fill='none' stroke='white' stroke-width='2' opacity='0.85'%3E%3Cpath d='M34.656,462.964c112.933,122.417,309.57,279.876,477.68,193.115,82.076-42.359,389.728-548.598,1346.301-275.54'/%3E%3Cpath d='M24.313,492.874c113.025,137.234,306.517,285.338,473.951,210.547,15.434-6.894,35.043-22.77,58.7-44.535,21.121-19.432,42.989-43.845,64.855-71.11,13.731-17.121,27.268-34.818,42.193-53.275,49.595-61.329,110.389-131.012,215.198-178.285,162.435-73.264,313.001-29.1,488.087,4.957,121.691,23.671,279.529,73.897,505.702,118.837'/%3E%3Cpath d='M13.97,522.784c113.118,152.05,305.003,293.535,470.223,227.978,19.185-7.612,41.98-23.797,66.94-45.909,24.744-21.92,47.133-50.484,65.547-82.383,12.046-20.867,22.154-42.232,33.531-64.364,39.935-77.693,85.546-168.067,198.264-222.821,201.596-97.928,347.228,26.534,496.517,86.003,108.726,43.311,267.9,119.088,542.373,158.193'/%3E%3Cpath d='M3.627,552.693c113.211,166.867,304.199,303.29,466.494,245.409,22.999-8.202,48.956-24.78,75.181-47.283,28.401-24.371,51.116-57.255,66.238-93.656,10.26-24.696,16.838-49.799,24.868-75.453,29.6-94.576,60.535-205.475,181.329-267.357,240.471-123.193,381.872,84.601,504.948,167.05,96.275,64.496,256.272,164.28,579.043,197.55'/%3E%3Cpath d='M-6.716,582.603c113.303,181.683,303.726,314.014,462.765,262.84,26.863-8.644,55.959-25.732,83.421-48.658,32.088-26.787,54.951-64.071,66.93-104.929,8.372-28.556,11.347-57.39,16.205-86.542,18.59-111.555,35.416-243.074,164.394-311.893,279.093-148.917,415.521,145.121,513.378,248.096,83.131,87.479,244.643,209.471,615.713,236.906'/%3E%3Cpath d='M-17.059,612.513c113.396,196.5,303.388,325.387,459.037,280.271,30.771-8.919,62.979-26.662,91.662-50.032,35.801-29.169,58.674-70.881,67.621-116.202,6.399-32.415,5.739-64.942,7.542-97.632,7.083-128.409,10.222-280.787,147.459-356.429,317.499-174.999,447.14,206.866,521.808,329.143,68.153,111.607,233.015,254.663,652.384,276.262'/%3E%3Cpath d='M-27.401,642.423c113.489,211.317,303.065,337.22,455.308,297.702,34.715-9.011,70.011-27.573,99.903-51.406,39.536-31.522,62.318-77.661,68.312-127.475,4.363-36.256.064-72.439-1.121-108.721-4.736-145.07-15.026-318.573,130.524-400.966,355.721-201.365,476.774,268.314,530.238,410.189,51.152,135.74,221.387,299.854,689.054,315.619'/%3E%3Cpath d='M-37.744,672.333c113.581,226.133,302.679,349.389,451.58,315.133,38.69-8.902,77.051-28.471,108.143-52.781,43.29-33.847,65.909-84.406,69.004-138.748,2.282-40.075-5.647-79.884-9.783-119.81-16.734-161.542-40.316-356.406,113.589-445.502,393.786-227.962,505.157,328.642,538.669,491.235,32.79,159.094,209.758,345.046,725.725,354.975'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.bc-category-bento__tile--tl .bc-category-bento__bg { --kachel-verlauf: linear-gradient(to bottom right, #5cd98a 0%, #0e7a45 100%); }
.bc-category-bento__tile--tr .bc-category-bento__bg { --kachel-verlauf: linear-gradient(to bottom left,  #5fb3f2 0%, #145a96 100%); }
.bc-category-bento__tile--bl .bc-category-bento__bg { --kachel-verlauf: linear-gradient(to top right,    #ffd54a 0%, #e08e00 100%); }
.bc-category-bento__tile--br .bc-category-bento__bg { --kachel-verlauf: linear-gradient(to top left,     #6f80d9 0%, #232f6e 100%); }
.bc-category-bento__bg { background: var(--kachel-verlauf); }
/* Komponente: Verlauf je Kategorie-Kachel */
.bc-category-bento__deco-circle {
  position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--color-foreground-inverse) 5%, transparent); pointer-events: none;
  animation: bc-category-bento-drift 7.33s ease-in-out infinite alternate;
}
.bc-category-bento__deco-circle:nth-of-type(2) { animation-duration: 9.33s; animation-delay: -2s; }
@keyframes bc-category-bento-drift { 0% { transform: translate(0,0); } 100% { transform: translate(4%, -5%); } }
.bc-category-bento__tile--tl .bc-category-bento__deco-circle:nth-of-type(1) { width: 1430px; height: 1430px; right: -650px; bottom: -845px; }
.bc-category-bento__tile--tl .bc-category-bento__deco-circle:nth-of-type(2) { width: 585px;  height: 585px;  right: 130px;  top: -364px; }
.bc-category-bento__tile--tr .bc-category-bento__deco-circle:nth-of-type(1) { width: 1560px; height: 1560px; left: -650px;  bottom: -845px; }
.bc-category-bento__tile--tr .bc-category-bento__deco-circle:nth-of-type(2) { width: 455px;  height: 455px;  left: 195px;   bottom: 130px; }
.bc-category-bento__tile--bl .bc-category-bento__deco-circle:nth-of-type(1) { width: 1690px; height: 1690px; right: -845px; top: -1066px; }
.bc-category-bento__tile--bl .bc-category-bento__deco-circle:nth-of-type(2) { width: 520px;  height: 520px;  right: 455px;  bottom: -65px; }
.bc-category-bento__tile--br .bc-category-bento__deco-circle:nth-of-type(1) { width: 1495px; height: 1495px; left: -754px;  top: -936px; }
.bc-category-bento__tile--br .bc-category-bento__deco-circle:nth-of-type(2) { width: 585px;  height: 585px;  left: 325px;   bottom: 78px; }
.bc-category-bento__tile-inner { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 100%; }
.bc-category-bento__tile--tl { justify-content: flex-start; align-items: flex-start; text-align: left; }
.bc-category-bento__tile--tr { justify-content: flex-start; align-items: flex-end;   text-align: right; }
.bc-category-bento__tile--bl { justify-content: flex-end;   align-items: flex-start; text-align: left; }
.bc-category-bento__tile--br { justify-content: flex-end;   align-items: flex-end;   text-align: right; }
/* ===== Titelgröße hängt an der KACHELBREITE, nicht am Fenster ============================
   Befund (gemessen bei 880px Fensterbreite, Kachel 388px): Titel + Pillen wuchsen bis in den
   „mehr erfahren"-Knopf hinein — bei Hover 41–44px Überlappung, „Decision Intelligence" ragte
   sogar 11px aus der Kachel. **Und drei der vier Kacheln überlappten schon OHNE Hover** um
   29–31px. Auf Touch-Geräten ist der Knopf dauerhaft sichtbar, dort war das also direkt zu
   sehen. Den Hover-Effekt abzuschalten hätte deshalb nur den halben Fehler behoben.
   Ursache ist nicht der Hover, sondern dass die Kachelhöhe fest ist (260px, ab 900px nur noch
   220px), der Text beim Schmalerwerden aber mehr Zeilen braucht.
   Technik wie bei der Zielgruppen-Bühne und den USP-Kästen: cqi rechnet mit der INHALTSBOX
   des Containers (Kachel minus 2×30px Polster). ===== */
.bc-category-bento__tile { container-type: inline-size; }
.bc-category-bento__title {
  font-family: var(--font-family-title); font-weight: var(--font-weight-black);
  font-size: clamp(1.5rem, 6.4cqi, 2rem); line-height: var(--line-height-tight);
  color: var(--color-foreground-inverse); overflow-wrap: break-word; hyphens: auto; max-width: 100%;
  transition: font-size .7s var(--card-ease);
}
.bc-category-bento__pills { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: 14px; }
.bc-category-bento__tile--tr .bc-category-bento__pills, .bc-category-bento__tile--br .bc-category-bento__pills { justify-content: flex-end; }
.bc-category-bento__pill { font-family: var(--font-family-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-foreground-inverse); background: color-mix(in srgb, var(--color-foreground-inverse) 22%, transparent); border-radius: var(--radius-full); padding: 5px var(--space-12); }
.bc-category-bento__cta {
  position: absolute; padding: 10px 22px; border-radius: var(--radius-full); color: var(--color-foreground-inverse);
  font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
  background: transparent; border: 1.5px solid var(--color-foreground-inverse); z-index: 1;
}
@media (hover: hover) {
  .bc-category-bento__tile:hover .bc-category-bento__cta { opacity: 1; }
}
/* Auf Touch-Geraeten gibt es kein Hover: der "mehr erfahren"-Knopf waere dort dauerhaft
   unsichtbar und die Kachel ohne jeden Hinweis, dass sie ein Link ist. Deshalb dort dauerhaft
   sichtbar — und keine Groessenspruenge, die nach dem Antippen haengen bleiben. */
@media (hover: none) {
  .bc-category-bento__cta { opacity: 1; }
}
.bc-category-bento__tile--tl .bc-category-bento__cta { left: 30px;  bottom: 30px; }
.bc-category-bento__tile--tr .bc-category-bento__cta { right: 30px; bottom: 30px; }
.bc-category-bento__tile--bl .bc-category-bento__cta { left: 30px;  top: 30px; }
.bc-category-bento__tile--br .bc-category-bento__cta { right: 30px; top: 30px; }
/* Eingabefeld in der Mitte des Themen-Bentos.
   KEINE Pille mehr (999px → 26px) und breiter (440 → 520px): die Box muss die aufklappende
   Antwort tragen können, und eine Pille um einen mehrzeiligen Textblock ergibt keine Form.
   Das Innenmaß ist deshalb in die eigene Zeile .mp-cat-input-row gewandert — sonst bekäme
   auch das Antwort-Panel das linke 28px-Padding der Eingabezeile ab. */
.bc-category-bento__center-box {
  --mp-cat-drop: 0px;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + var(--mp-cat-drop))); z-index: 10;
  width: min(520px, 70%); background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--card-shadow-hover);
  text-align: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bc-category-bento__input-row { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-8) var(--space-8) var(--space-8) 28px; }
.bc-category-bento__input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.bc-category-bento__center-box input { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-foreground); padding-bottom: 2px; }
.bc-category-bento__fake-ph {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-foreground-muted); transition: opacity .15s;
}
.bc-category-bento__center-box input:focus ~ .bc-category-bento__fake-ph, .bc-category-bento__center-box input:not(:placeholder-shown) ~ .bc-category-bento__fake-ph { opacity: 0; }
.bc-category-bento__caret { display: inline-block; width: 1px; height: 1em; margin-left: 3px; background: var(--color-foreground); animation: bc-ai-search-caret 1s step-end infinite; }
/* Senden im Kategorie-Feld: bc-icon-button --filled; Hover in KI-Blau, weil KI-Funktion */
.bc-category-bento__center-send:hover { background: var(--color-ai); }
/* minmax(...,auto) statt fester Höhe: 220px bleibt das Mindestmaß, aber die Reihe darf
   wachsen, wenn Titel und Pillen mehr Platz brauchen. Ohne das lag der Inhalt bei 880px
   Fensterbreite 23px im „mehr erfahren"-Knopf — die Kachel war schlicht zu niedrig für
   zweizeilige Pillen.
   Kein Layout-Sprung beim Überfahren: die Titel-Vergrößerung ist unterhalb von 460px
   Inhaltsbreite ohnehin abgeschaltet, und das ist hier immer der Fall. */
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-category-bento { grid-template-rows: minmax(220px, auto) minmax(220px, auto); }
  .bc-category-bento__center-box { width: 80%; }
  .bc-category-bento__tile--tl, .bc-category-bento__tile--tr { padding-bottom: 84px; }
  .bc-category-bento__tile--bl, .bc-category-bento__tile--br { padding-top: 84px; }
}
@media (max-width: 640px) /* --breakpoint-mobile-landscape */ {
  .bc-category-bento { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(200px, auto)); }
  .bc-category-bento__center-box { display: none; }
}
/* ── Kostenlose Beratung — Bild links, Inhalt rechts ── */
.bc-consult {
  position: relative; background: var(--color-surface); border-radius: var(--card-radius); corner-shape: var(--card-corner-shape);
  box-shadow: var(--card-shadow);
  display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-48); align-items: stretch;
}
.bc-consult__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--card-radius) 0 0 var(--card-radius); }
.bc-consult__content { padding: var(--space-32) var(--space-32) var(--space-32) 0; min-width: 0; }
.bc-consult__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.bc-consult__item { display: flex; align-items: flex-start; gap: var(--space-12); font-size: var(--font-size-base); color: var(--color-foreground); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); }
.bc-diff-marker { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; --diff-marker: var(--neutral-15); /* Komponente */ background: var(--diff-marker); color: var(--color-foreground-inverse); }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-consult { grid-template-columns: 1fr; gap: 0; }
  .bc-consult__img { height: 240px; max-height: none; border-radius: var(--card-radius) var(--card-radius) 0 0; }
  .bc-consult__content { padding: var(--space-24); }
}
/* ── Zielgruppen-Bühne, Index-Zusatz (v0.20.0) ──────────────────────────────────────────
   Die Bühne selbst nutzt dieselben .pd-persona-*-Bausteine wie die Produktseite (eine Quelle,
   renderPersonaStage in routes.js). Nur die rechte Spalte "Arbeitet mit: …" kommt hinzu —
   auf der Produktseite unerwünscht, dort geht es um genau ein Produkt. */
.bc-personas__info-divider { align-self: stretch; width: 1px; background: var(--color-border-inverse); flex-shrink: 0; }
.bc-personas__info-products { flex-shrink: 0; min-width: 180px; }
.bc-personas__info-products-label {
  display: block; font-family: var(--font-family-body); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold); color: var(--color-foreground-inverse-subtle); margin-bottom: var(--space-8);
}
/* Alle Produktsätze stehen im Quelltext (Crawler sehen sie), sichtbar ist nur der aktive. */
.bc-personas__info-set { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.bc-personas__info-set[hidden] { display: none; }
.bc-personas__info-tag {
  font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-foreground); background: var(--color-surface); border-radius: var(--radius-full);
  padding: 5px var(--space-12); text-decoration: none; transition: background var(--duration-fast);
}
a.bc-personas__info-tag:hover { background: var(--color-border-subtle); }
/* Der Text-Block darf die Produktspalte nicht wegdrücken */
.bc-personas__info .bc-personas__info-text { flex: 1; }
@media (max-width: 900px) /* --breakpoint-tablet-portrait */ {
  .bc-personas__info { flex-wrap: wrap; }
  .bc-personas__info-divider { display: none; }
  .bc-personas__info-products { min-width: 0; }
}
/* margin-top ebenfalls auf 0: in der Referenzvorlage sitzt der dunkle Infokasten BÜNDIG unter
   dem Foto — die Bühne endet mit der Bildunterkante, der Kasten beginnt dort. Unsere beiden
   32px-Abstände (einmal über der Bühne, einmal über dem Kasten) machten die Sektion 40px
   höher als die Vorlage und verschoben alles darunter mit. */
.bc-personas--nobox { margin-block: 0; margin-inline: 0; }
.bc-personas__info--nobox { margin: 0; border-radius: var(--card-radius); corner-shape: var(--card-corner-shape); position: relative; }
/* ── Sektionsabstaende ──────────────────────────────
   Die Referenzvorlage setzt sie je Abschnitt einzeln statt eines durchgehenden Wertes. Unser
   .lp-section stand auf 96px oben und unten — das war der Hauptgrund fuer "Abstaende stimmen
   nicht": bei acht Abschnitten summiert sich das auf ueber 400px Unterschied in der
   Seitenlaenge. Standard auf dem Index: 48 / 32. */
.bc-section--dense { padding-block: var(--space-48) var(--space-32); }
.bc-section--tight-top { padding-top: 0; }
.bc-section--mid-top { padding-top: var(--space-32); }
.bc-section--tight-bottom { padding-bottom: var(--space-24); }
.bc-section--roomy-bottom { padding-bottom: var(--space-48); }
/* Schmalere Inhaltsspalte fuer Logos, Zielgruppen und FAQ — die Referenzvorlage nutzt dort 820px */
.bc-container--narrow { max-width: var(--layout-narrow-width); }
/* ── Sektionskopf ───────────────────────────────────
   Drei Abweichungen: Ueberschrift dichter am Vorspann (6 statt 16px), Vorspann 16 statt
   18px, und der Abstand zum Inhalt 32 statt 64px. Nur unter .section-head, damit die
   Produktseite und die generische Landingpage (eigene CSS-Datei) unberuehrt bleiben. */
.bc-section-head--compact { margin-bottom: var(--space-32); }
.bc-section-head--snug { margin-bottom: var(--space-24); }
.bc-section-head--compact .bc-section-head__title { margin-bottom: 6px; }
.bc-section-head--compact .bc-section-head__lead { font-size: var(--font-size-base); }
.bc-section-head--compact .bc-section-head__lead { margin-bottom: 0; }
/* ── Kundenlogos ────────────────────────────────────
   Die Referenzvorlage haelt die Leiste auf 780px und rueckt sie zusammen (16px statt 24px),
   dadurch werden die Felder 143px statt 210px gross. */
.bc-logo-strip--narrow .bc-logo-strip__title { margin-bottom: var(--space-16); }
.bc-logo-strip--narrow .bc-logo-strip__row { gap: var(--space-16); max-width: var(--layout-narrow-width); margin-inline: auto; }
/* ── Kundenzitat ────────────────────────────────────
   Auf dem Index eine eigene Sektion mit begrenzter Zeilenlaenge; auf der Produktseite
   steht dasselbe Zitat in einem Kasten und braucht die 640px-Begrenzung nicht.
   padding 0, weil der Sektionsabstand hier schon die Luft liefert. */
.bc-quote--standalone { max-width: var(--layout-measure-narrow); margin-inline: auto; padding: 0; }
/* ── Zielgruppen-Buehne ─────────────────────────────
   Der weisse Hintergrund hinter dem freigestellten Gruppenfoto ist auf der Produktseite
   unsichtbar (die Buehne steht dort in einem weissen Kasten) — auf dem grauen Index waere er
   ein sichtbares weisses Rechteck. In der Referenzvorlage ist er transparent. */
.bc-personas--nobox .bc-personas__imgwrap { background: transparent; }
/* Beschriftung im Infokasten: auf dem Index 24px (eigene Sektion), auf der Produktseite
   15px (Nebenrolle neben dem Produkt). */
.bc-personas__info--nobox .bc-personas__info-text b { font-size: var(--font-size-2xl); }
/* ── FAQ ────────────────────────────────────────────
   .bc-box:has(> .fahnchen) reserviert 54px oben fuer das Faehnchen. Das Index-FAQ der
   Referenzvorlage hat keine Ueberschrift im Kasten, das Faehnchen liegt ueber der Ecke und der
   erste Eintrag beginnt bei 32px. Auf der Produktseite bleibt die Reserve richtig, dort folgt
   eine Ueberschrift unter dem Faehnchen. */
.bc-box.bc-faq--untitled { padding-top: var(--space-32); } /* stärker als .bc-box:has(> .bc-flag) */
/* Infokasten-Verlauf 4-stufig wie der Haupt-Gradient, vorher eine eigene 3-stufige Fassung */
.bc-personas__info { background: var(--background-dark); }
/* Themen-Eingabefeld: der Wert der Referenzvorlage ist der weichere Schatten, nicht der Karten-Hover */
.bc-category-bento__center-box { box-shadow: var(--shadow-md); }
/* "Arbeitet mit"-Spalte: 12px, gesperrt, und 10px Abstand unter der Beschriftung */
.bc-personas__info-products-label { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wide); }
.bc-personas__info-tag { font-size: var(--font-size-xs); }
.bc-personas__info-set { margin-top: 10px; }
/* Zentrierte Knopfzeilen — ersetzt die Inline-Styles, die beim ersten Aufbau aus der
   Referenzvorlage mit uebernommen wurden. Der 4px-Abstand ueber dem "Alle Produkte"-Knopf ist
   der Wert der Referenzvorlage und war der letzte Pixel-Unterschied in der Produkte-Sektion. */
.bc-center { display: flex; justify-content: center; }
.bc-reveal__toggle { margin-top: var(--space-4); }
.bc-reveal__cta { margin-top: var(--space-32); }
.bc-usp__cta { margin-top: var(--space-32); }
.bc-consult__lead { margin-bottom: var(--space-24); font-size: var(--font-size-base); } /* im Bestand galt 16 px für alle Vorspänne der Indexseite */
.bc-consult__cta { margin-top: var(--space-24); }