/* =====================================================
   BISSANTZ-MARKTPLATZ.CSS — v0.1.0
   Eigenständige, physische Kopie für marktplatz.bissantz.de
   (externe Domain, kein Zugriff auf generate.bissantz.de).

   Basis = 1:1 aus PROJECT/generate.bissantz.de/bissantz.css
   übernommen (Nav/Buttons/Footer/Karten/Accordion/Karussell —
   dieselbe Marke, dieselben Bausteine wie die Website-Nachbau-
   Familie). Darunter: NUR die Bausteine, die eine Marktplatz-
   Produktseite zusätzlich braucht (Breadcrumb, Kategorie-Badge,
   Pills, Personas-Tabs, Fakten-Tabelle, Preis-Block, …).

   Bewusst KEINE tokens.css/components.css-Aufteilung — Marktplatz
   ist eine einzelne externe Website mit wenigen Templates, kein
   Satz interner Editor-Tools.

   Pflege-Hinweis: KEIN Auto-Sync mit bissantz.css — bei künftigen
   Verfeinerungen dort per Diff hierher zurückführen (analog der
   Designsystem-Rückführung).

   Wird bei JEDEM Marktplatz-Publish automatisch mit hochgeladen
   (liegt physisch auf marktplatz.bissantz.de, kein Cross-Domain-
   Link auf generate.).
====================================================== */

/* =====================================================
   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;
}

:root {

  /* --- Marken-Grundfarben --------------------------- */
  --color-black:            #000000;
  --color-white:            #ffffff;
  --color-navy:             #002d71;
  --color-navy-hover:       #003a91;
  --color-ai:               #4ec5f2;

  /* --- Neutral-Skala (Grau) -------------------------- */
  --gray-900:  #222222;
  --gray-700:  #555555;
  --gray-600:  #666666;
  --gray-500:  #888888;
  --gray-400:  #aaaaaa;
  --gray-300:  #cccccc;
  --gray-200:  #e8e8e8;
  --gray-100:  #f0f0f0;
  --gray-50:   #f7f7f7;

  --gradient-dark: linear-gradient(135deg, #555 0%, #333 20%, #111 60%, #0a0a0a 100%);
  --gradient-placeholder: linear-gradient(135deg, #f0f0f0, #d9d9d9);

  --font-title: 'Heebo', sans-serif;
  --font-body:  'Open Sans', sans-serif;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.75rem;
  --text-4xl:  2rem;
  --text-5xl:  4rem;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --tracking-wide:   0.05rem;
  --tracking-wider:  0.1rem;
  --tracking-widest: 0.2rem;

  /* 1148px + #dcdcdc statt unserer Website-Werte (1200px / --gray-200 #e8e8e8): abweichend
     von der Referenzvorlage überschrieben im Seiten-`:root` — betrifft Inhaltsbreite von Nav,
     Hero, Boxen und Footer sowie ALLE Haarlinien der Seite. */
  --content-max-width: 1148px;
  --nav-height:         68px;

  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 6px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);

  --transition-fast: 0.15s;
  --transition-base: 0.25s;
  --ease-standard:   ease;

  --z-sticky:  100;
  --z-overlay: 1000;

  --lm-title:      var(--color-black);
  --lm-text:       var(--gray-600);
  --lm-bg:         var(--gray-50);
  --lm-bg-white:   var(--color-white);
  --lm-border:     #dcdcdc;   /* s. Kommentar bei --content-max-width */
  --lm-border-light: var(--gray-100);

  --action:               var(--color-black);
  --action-hover:         var(--gray-900);
  --action-product:       var(--color-navy);
  --action-product-hover: var(--color-navy-hover);

  --focus-ring:        var(--color-navy);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
}

/* =====================================================
   RESET
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--lm-title);
  background: var(--lm-bg);
  -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(--focus-ring);
  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-title);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--lm-title);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p  { font-size: var(--text-md); line-height: var(--leading-relaxed); }

.container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--space-32); }

/* =====================================================
   NAVIGATIONSLEISTE (flach, wie in der bestehenden generischen
   Landingpage-Nav — kein Mega-Menu-Dropdown)
===================================================== */
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--lm-bg-white); padding: 0 var(--space-32); }
/* Leistenhöhe auf 64px statt der 68px unseres --nav-height, Spaltenabstand von 32 auf 16px —
   die Bereiche stehen dadurch enger zusammen.

   Von Grid auf Flex umgestellt, um die Menü-Position exakt zu treffen: `.nav-menu { margin: 0
   auto }` und `.nav-actions { margin-left: auto }` — DREI konkurrierende auto-Ränder, die den
   freien Platz zu je einem Drittel unter sich aufteilen. Ergebnis: die Lücke Logo→Menü ist ein
   Drittel, die Lücke Menü→Bedienelemente zwei Drittel (bei 1265px gemessen: 38 und 78px). Weder
   ein mittiges Grid (30px daneben) noch ein zwischen Logo und Actions zentriertes (12px daneben)
   trifft das — nur dasselbe Flex-Modell.
   Die Handy-Absicherung wandert entsprechend mit: schrumpffähig ist jetzt `.nav-logo`
   (min-width:0) statt einer Grid-Spalte, s. Media-Queries unten. */
.nav-inner { max-width: var(--content-max-width); margin: 0 auto; height: 64px; display: flex; align-items: center; }
.nav-menu { margin: 0 auto; }
.nav-actions { margin-left: auto; }
.nav-logo { line-height: 1; display: flex; align-items: center; justify-self: start; }
/* War 14px fest (kein Token). Bewusst einen Schritt kleiner als der Browser-Standard, dabei
   auf unsere Space-Skala (tokens.css) gehoben statt eines neuen Handwerts. */
.nav-menu { display: flex; list-style: none; gap: var(--space-12); }
.nav-menu > li { position: relative; }
/* Menüpunkt ist eine 32px hohe Pille mit 18px Innenabstand und 2px transparentem Rahmen (der
   Rahmen hält die Höhe konstant, wenn er beim Überfahren sichtbar wird). Vorher: 40px hohes
   Rechteck mit 4px Radius.
   Ab 1300px Fensterbreite verringert sich der Innenabstand auf 14px. */
.nav-menu > li > a { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 18px; border: 2px solid transparent; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-regular); color: #111; border-radius: var(--radius-full); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; }
@media (max-width: 1300px) { .nav-menu > li > a { padding: 0 14px; } }
/* Zurück auf Hellgrau — die kräftige Schwarz/Weiß-Variante der Vorfassung war zu viel.
   font-weight ebenfalls auf --weight-regular reduziert. */
.nav-menu > li > a:hover, .nav-menu > li > a:focus { background: var(--lm-bg); color: var(--action); }
.nav-actions { display: flex; align-items: center; gap: var(--space-16); justify-self: end; }
/* Sprach-Umschalter ist ein Flyout-Trigger (Muster wie die Menü-Flyouts, kein Link mehr direkt
   auf langHref) — ".nav-lang" ist <button>, öffnet ".nav-flyout--lang" mit der EN-Option.
   Deshalb border:none/background:none ergänzt (Button-Reset), Rest unverändert. */
/* Bewusst NICHT auf 17px gezogen (Wert aus der Referenzvorlage). Unsere Typo-Skala hat keine
   17px-Stufe (--text-md 16px, --text-lg 18px), und die übrigen Menüpunkte der Vorlage stehen
   daneben auf 16px — die 17px am Sprach-Umschalter sind dort ein Ausrutscher, kein
   Gestaltungswille. Eine 17px-Sonderstufe für ein Nav-Label wäre teurer als 1px Abweichung. */
.nav-lang { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--lm-title); padding: 6px 8px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; letter-spacing: 0.03rem; }
.nav-lang:hover, .nav-lang:focus { background: var(--action); color: var(--color-white); }
/* .nav-lang-item ist ein normales .nav-item — nutzt dieselbe zentrierte Flyout-Positionierung +
   denselben JS-Kantenausgleich (layoutFlyouts() selektiert generisch .nav-item, s. bissantz-
   marktplatz.js) wie die Menü-Flyouts, keine eigene Positionierung nötig.
   Quadratisch + Hellgrau-Hover — Größe/Hover-Farbe wie .nav-fi (andere Flyout-Einträge), nicht
   die kräftige Schwarz/Weiß-Variante der Vorfassung. */
.nav-lang-option { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--lm-title); text-decoration: none; transition: background var(--transition-fast); }
.nav-lang-option:hover { background: var(--gray-50); }
.nav-search { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--lm-title); transition: background var(--transition-fast); }
.nav-search:hover { background: var(--lm-bg); }
/* Quiz-Knopf ist eine 32px hohe Pille mit fester Breite 96px, Schrift 15px/700 und dem
   4-stufigen Haupt-Gradient als Füllung. Vorher: 114x36 Rechteck, 16px/400, Flächenschwarz. */
/* Schriftgröße: die Referenzvorlage nutzt 15px, unsere Skala kennt 14 (--text-base) und
   16 (--text-md). 14px gewählt — 15px wäre eine Sonderstufe nur für diesen einen Knopf. */
.btn-nav { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 32px; padding: 0; background: var(--gradient-dark); color: var(--color-white); border: 2px solid transparent; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-bold); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; line-height: 1; }
.btn-nav:hover { background: var(--color-white); color: #111; border-color: #111; }
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--lm-title); border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.nav-burger:hover { background: var(--lm-bg); }
.nav-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--lm-bg-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); }
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--lm-title); border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.nav-overlay-close:hover { background: var(--lm-bg); }
.nav-overlay a { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--lm-title); padding: var(--space-8) var(--space-16); transition: color var(--transition-fast); }
.nav-overlay a:hover { color: var(--action); }
/* ── Flyout-Mega-Menü ──────────────────────────────────────────────────────────────────
   Aus der Referenzvorlage übernommen (dort `.bnav-flyout`) — unsere Nav-Fassung aus
   sap-bi-beratung.html hatte keine Untermenüs, die Vorlage als einzige. Werte 1:1, nur auf
   unsere Klassennamen (.nav-*) gehoben, damit Nav-Grundgerüst und Flyout nicht zwei
   Namensschemata mischen.
   Öffnen per :hover UND :focus-within (Tastaturbedienung). Das weiße Quadrat (.nav-arrow) ist
   ein um 45° gedrehtes Kästchen und sitzt mittig unter dem Menüpunkt; --shift wird per JS
   gesetzt, wenn die Karte an den Fensterrand stößt (s. bissantz-marktplatz.js). */
.nav-item { position: relative; }
.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(--transition-base) var(--ease-standard), visibility var(--transition-base);
}
.nav-item:hover .nav-flyout, .nav-item:focus-within .nav-flyout { opacity: 1; visibility: visible; }
.nav-arrow {
  position: absolute; top: 14px; left: calc(50% - var(--shift, 0px));
  width: 18px; height: 18px; background: var(--lm-bg-white); border-radius: 2px;
  transform: translateX(-50%) rotate(45deg); z-index: 3;
}
.nav-flyout-inner {
  position: relative; z-index: 2; max-width: min(var(--content-max-width), calc(100vw - 48px));
  background: var(--lm-bg-white); border-radius: var(--radius-md); box-shadow: 0 10px 40px rgba(0,0,0,.10);
  padding: 14px 14px 16px; display: grid; gap: 0 22px;
}
/* Abstand zur Kartenkante erhöht ("zu nah an oberer Kante") — vorher margin-top:0, dadurch nur
   die 14px .nav-flyout-inner-Innenabstand als Gesamtabstand. */
.nav-col-head { font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--gray-500); margin: 8px 0 8px 8px; }
.nav-fi {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 16px;
  padding: 11px 8px; border-radius: 6px; min-height: 56px;
  transition: background var(--transition-fast);
}
.nav-fi:hover { background: var(--gray-50); }
.nav-fi img { width: 30px; height: 30px; object-fit: contain; }
/* einzeilig mit Auslassungspunkten — sonst wird eine Zeile höher und die Spalten verspringen
   gegeneinander */
.nav-fi b, .nav-fi small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-fi b { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--lm-title); line-height: 1.25; }
.nav-fi small { font-size: var(--text-xs); color: var(--gray-600); line-height: 1.4; margin-top: 1px; }
/* "mehr"-Link bleibt in seiner eigenen Spalte, linksbündig — .nav-col ist deshalb selbst eine
   Flex-Spalte, .nav-more sitzt per margin-top:auto am unteren Rand. Die Grid-Zeile richtet sich
   an der höchsten Spalte aus (Referenzen: 4/4/5 Items), dadurch landen alle drei "mehr"-Links
   trotzdem auf derselben Höhe. */
.nav-col { display: flex; flex-direction: column; }
.nav-more { display: block; margin-top: auto; padding-top: 10px; margin-left: 8px; font-size: var(--text-base); color: var(--gray-500); transition: color var(--transition-fast); }
.nav-more:hover { color: var(--lm-title); }

@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .nav-burger { display: flex; }
}
/* Die Logo-Spalte muss unter ihre Inhaltsbreite schrumpfen dürfen (zusammen mit
   .nav-logo svg{max-width:100%}), sonst schiebt das feste 165px-Logo-SVG die Bedienelemente
   aus dem Fenster. Seit dem Wechsel auf Flex hängt das an min-width:0 am Element statt an
   einer minmax(0,1fr)-Grid-Spalte — gemessen bei 375/320px. */
.nav-logo { min-width: 0; }
.nav-logo svg { max-width: 100%; height: auto; }
/* Ergänzung gegenüber bissantz.css: dort endet die Nav-Anpassung bei 1024px — Sprache, Suche,
   Quiz-Button UND Burger bleiben in der Leiste und passen auf einem Handy nicht mehr neben das
   Logo (gemessen bei 375px: 360px Bedarf für 311px Platz → 16px horizontaler Seiten-Scroll).
   Sekundäre Bedienelemente entfallen deshalb auf kleinen Schirmen, Quiz-CTA + Burger bleiben
   (Konversionselement + Menüzugang).
   Nachtrag: diese Kopie hinkte bissantz.css zeitweise hinterher — beim Aufbau der Indexseite bei
   375px erneut 8px Überlauf gemessen, Ursache waren die dort ergänzten, hier fehlenden Teile:
   schrumpffähige Logo-Spalte (s.o.) und kleinerer Grid-Gap ab 480px. */
@media (max-width: 640px) {
  .nav-lang, .nav-search { display: none; }
}
@media (max-width: 480px) {
  .nav { padding: 0 var(--space-16); }
  /* seit dem Flex-Wechsel schiebt margin-left:auto die Bedienelemente nach rechts, ein
     Grid-Gap gibt es nicht mehr — stattdessen einen Mindestabstand am Element selbst. */
  .nav-actions { margin-left: var(--space-16); }
}

/* =====================================================
   BUTTONS
===================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: 12px 28px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-regular); cursor: pointer; border: 1px solid var(--lm-border); background: var(--lm-bg-white); color: var(--lm-title); transition: all var(--transition-fast); white-space: nowrap; line-height: 1; text-decoration: none; }
.btn:hover { background: var(--gray-50); border-color: var(--action); }
.btn svg { width: 18px !important; height: 18px !important; }
.btn-sm { padding: 0 18px; height: 32px; font-size: var(--text-sm); }
.btn-lg { padding: 15px 32px; font-size: var(--text-md); }
.btn-black { background: var(--action); color: var(--color-white); border-color: var(--action); }
.btn-black:hover { background: transparent; color: var(--action); border-color: var(--action); }
.btn-outline-dark { background: transparent; color: var(--action); border-color: var(--action); }
.btn-outline-dark:hover { background: var(--action); color: var(--color-white); }
.btn-white { background: var(--color-white); color: var(--action); border-color: var(--color-white); }
.btn-white:hover { background: var(--lm-bg); border-color: var(--lm-bg); color: var(--action); }

/* =====================================================
   SEKTIONEN — Grundbausteine (Karten/Accordion/Logo-Leiste)
===================================================== */
.lp-section { padding: var(--space-96) var(--space-32); }
/* 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. */
.lp-section--content { padding-top: var(--space-48); }
.lp-inner { max-width: var(--content-max-width); margin: 0 auto; }
.lp-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.lp-eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gray-600); margin-bottom: var(--space-8); }
.lp-h1 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); line-height: var(--leading-tight); }
.lp-h2 { font-size: var(--text-4xl); margin-bottom: var(--space-16); }
.lp-lead { font-size: var(--text-lg); color: var(--lm-text); line-height: var(--leading-relaxed); }
.section-head { text-align: center; margin-bottom: var(--space-64); }
.hero-media, .lp-split-media { min-height: 320px; border-radius: var(--radius-xl); background: var(--gradient-placeholder); border: 1px solid var(--lm-border); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); }
.card { background: var(--lm-bg-white); border: 1px solid var(--lm-border); border-radius: var(--radius-lg); padding: var(--space-32); }
.card h3, .card h4 { margin-bottom: var(--space-12); }
.card p { color: var(--lm-text); font-size: var(--text-md); }
.card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--lm-border); background: none; display: flex; align-items: center; justify-content: center; color: var(--gray-500); margin-bottom: var(--space-16); }
.card-icon svg { width: 20px !important; height: 20px !important; }

.logo-strip { display: flex; align-items: center; justify-content: center; gap: var(--space-64); flex-wrap: wrap; }

.accordion { display: flex; flex-direction: column; gap: 1px; background: var(--lm-border); border: 1px solid var(--lm-border); border-radius: var(--radius-md); overflow: hidden; }
.acc-item { background: var(--lm-bg-white); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) var(--space-24); background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--lm-title); text-align: left; }
.acc-head svg { transition: transform var(--transition-fast); flex-shrink: 0; }
.acc-item.open .acc-head svg { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); padding: 0 var(--space-24); }
.acc-item.open .acc-body { max-height: 400px; padding-bottom: var(--space-16); }
.acc-body p { color: var(--lm-text); font-size: var(--text-md); }

@media (max-width: 768px) {
  .card-grid { grid-template-columns: 1fr; }
  .logo-strip { gap: var(--space-32); }
}

/* =====================================================
   FOOTER
===================================================== */
/* Obere Trennlinie (Footer-Außenkante) bewusst entfernt — die einzige verbleibende Linie ist
   .footer-top's border-bottom (zwischen Footer-Top und Footer-Bottom). */
.footer { padding: var(--space-96) var(--space-32) var(--space-32); }
.footer-inner { max-width: var(--content-max-width); margin: 0 auto; }
/* Eine gemeinsame Grid-Zeile für Firmenblock + 4 Nav-Spalten (1:1 aus bissantz.css übernommen
   — s. dortiger Kommentar) — ersetzt die frühere Aufteilung
   in .footer-brand (eigener Flex-Block, GmbH/AG/Socials untereinander) und .footer-nav-grid
   (eigenes 4-Spalten-Grid) als zwei unabhängige Boxen nebeneinander. Zwei damit behobene
   Fehler auf einen Schlag:
   1) "Bissantz AG" stand nicht auf Höhe von "Mediathek" — die Höhe des GmbH-Blocks bestimmte
      die Position, unabhängig von der Nav-Spalte daneben.
   2) Mobil-Bug (≤480px): die alte ≤1009px-Regel (s. Git-Historie) setzte .footer-brand auf
      flex-wrap:wrap für die Zwei-Spalten-Firmenblöcke zwischen Tablet und Desktop — die
      480px-Regel setzte danach nur flex-direction zurück auf column, nie flex-wrap auf
      nowrap. Damit brach .footer-socials (die 5 Social-Icons) bei echten Handy-Breiten aus
      der Spalte heraus in eine zweite Flex-"Spalte" neben den Firmenblöcken, 171px über den
      Viewport-Rand hinaus — realer horizontaler Seiten-Scroll. Eine reine Grid-Spalte kennt
      dieses Flex-Überbleibsel gar nicht erst. */
.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: 1px solid var(--lm-border);
}
/* .footer-socials/.social-btn fehlten in unserer Kopie komplett — der Renderer erzeugte sie
   schon, ohne CSS waren die Icons aber unformatiert. Werte 1:1 aus bissantz.css. */
.footer-socials { display: flex; gap: 8px; margin-top: var(--space-16); }
.social-btn {
  width: 34px; height: 34px; background: var(--action); border: none; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; color: var(--color-white);
  transition: background var(--transition-fast);
}
.social-btn:hover { background: var(--action-hover); }
.footer-tagline { font-size: var(--text-base); color: var(--lm-text); line-height: 1.5; max-width: 280px; margin-bottom: var(--space-8); }
.footer-info { font-size: var(--text-base); color: var(--lm-text); line-height: 1.6; margin-bottom: var(--space-8); }
.footer-info a { color: var(--lm-text); text-decoration: none; transition: color var(--transition-fast); }
.footer-info a:hover { color: var(--lm-title); }
.footer-info-label { color: var(--gray-600); display: inline-block; min-width: 40px; }
/* display:block + text-decoration:none nötig — Spalten-Titel sind teils <a> (mit href), teils
   weiterhin <div> (Firmenblöcke ohne eigenen Link); dieselbe Klasse muss für beide Tags
   identisch aussehen. */
.footer-col-title { display: block; font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: 0.05rem; text-transform: uppercase; color: var(--lm-title); margin-bottom: var(--space-16); text-decoration: none; }
a.footer-col-title:hover { color: var(--gray-600); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: var(--text-base); color: var(--lm-text); text-decoration: none; transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--lm-title); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-base); color: var(--gray-600); }
.footer-legal { display: flex; gap: var(--space-32); }
.footer-legal a { color: var(--gray-600); text-decoration: none; transition: color var(--transition-fast); }
.footer-legal a:hover { color: var(--lm-title); }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* 1:1 aus bissantz.css übernommen — bei 5 Spalten liegt jeder Firmenblock bewusst in "seiner"
     Nav-Zeile, bei 2 Spalten würde dieselbe DOM-Reihenfolge GmbH und AG+Socials aber
     auseinanderreißen. `order` hält beide Firmenblöcke durchgehend in Zeile 1 (Socials hängen
     an AG, da verschachtelt, kein eigenes Grid-Item). */
  .footer-company { order: -1; }
}
@media (max-width: 480px) {
  .container { padding: 0 var(--space-16); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-16); align-items: flex-start; }
  /* Rückführung aus bissantz.css v1.1.2 (fehlte in dieser Kopie): .footer-legal brach bei
     schmalem Schirm nicht um — 45px horizontaler Seiten-Scroll bei 320px gemessen. */
  .footer-legal { flex-wrap: wrap; gap: var(--space-16); }
}

/* =====================================================
   MARKTPLATZ-PRODUKTSEITE — Bausteine, die bissantz.css nicht
   kennt (Breadcrumb, Kategorie-Badge, Pills, Überblick-Expand,
   Highlight-Box, Problem-Widget, Fakten-Tabelle, Personas,
   Preis-Block, Whitepaper-Promo).
===================================================== */

/* ===== Hero-Band ======================================================================
   Ersetzt die bisherigen Ad-hoc-Klassen (.mp-crumb/.mp-category-badge/.mp-hero-h1/.mp-pills)
   komplett — Korrektur eines echten Fehlers aus v0.2.0: die alte Annahme "Pills sind reiner
   Text ohne Rahmen" war falsch, das tatsächliche CSS der Referenzvorlage zeigt umrandete
   Pillen (.pd-badge). Fund entstand nur durch genaues Nachlesen der Werte statt
   Screenshot-Näherung. ===== */

/* Breadcrumb — jetzt IM Hero-Band über dem H1, nicht mehr darunter/außerhalb */
.pd-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-24); font-size: var(--text-sm); color: var(--gray-500); }
.pd-crumbs a { text-decoration: none; color: var(--gray-600); transition: color var(--transition-fast); }
.pd-crumbs a:hover { color: var(--lm-title); }

/* 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. */
.pd-hero-band { position: relative; overflow: hidden; background: var(--color-white); border-bottom: 1px solid var(--lm-border); padding: var(--space-32) var(--space-32) var(--space-64); }
.pd-hero-band > .lp-inner { position: relative; z-index: 1; }
.pd-hero { position: relative; }
.pd-hero-text { position: relative; z-index: 1; max-width: 560px; padding: var(--space-16) 0; }
.pd-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. */
.pd-category-badge {
  display: inline-block; background: var(--gradient-dark); color: var(--color-white);
  font-family: var(--font-title); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-24);
}
.pd-h1 { font-family: var(--font-title); font-weight: var(--weight-black); letter-spacing: -0.025em; line-height: 1; font-size: clamp(3rem, 6vw, 4.75rem); margin: 0 0 var(--space-16); color: var(--lm-title); }
.pd-claim { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.35; font-weight: var(--weight-bold); color: var(--lm-title); 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. */
.pd-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) { .pd-hero-media--image { position: static; width: 100%; max-width: 420px; 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. */
.hero-media.pd-hero-media--image { position: static; width: 100%; max-width: 480px; height: auto; margin-top: var(--space-32); }

/* Zweiter Hero-Bild-Modus "cover" (heroImageFit): löst das Grundproblem
   von .pd-hero-media--image strukturell — Rahmen bekommt eine ECHTE Höhe (von oben bis zum
   selben bottom-Anker) statt sie vom Bild-Seitenverhältnis ableiten zu lassen, das Bild füllt
   sie per object-fit:cover immer komplett, egal welches Format. Gilt NUR, wenn heroImageFit
   explizit 'cover' ist — .pd-hero-media--image (Default) bleibt unverändert bestehen. */
.pd-hero-media--cover { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; left: 575px; top: 0; bottom: calc(-1 * var(--space-64)); width: 503px; }
.pd-hero-media--cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .pd-hero-media--cover { position: static; width: 100%; max-width: 420px; height: 280px; margin-top: var(--space-32); } }

/* Hero-Pills — umrandete Pille mit Haken-Icon (Korrektur, s.o.) */
.pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-32); }
.pd-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; gap: 6px; white-space: nowrap; border: 1px solid var(--lm-border); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--gray-600); }
.pd-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. */
.mp-gradient-band, .mp-gradient-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;
}
.mp-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;
}
.mp-gradient-band { position: relative; height: var(--mp-band-height); overflow: hidden; background: var(--mp-cw-base); }
.mp-gradient-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; }
.mp-gradient-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); }
.mp-gradient-smoke { position: absolute; left: 0; right: 0; top: 50%; height: 340px; transform: translateY(-50%); }
.mp-gradient-veil .mp-gradient-smoke { height: 460px; filter: url(#pd-smoke) blur(8px); -webkit-filter: url(#pd-smoke) blur(8px); }
.mp-gradient-smoke > span { position: absolute; inset: -10% -25%; will-change: transform; mix-blend-mode: screen; }
.mp-gradient-veil .mp-gradient-smoke > span { mix-blend-mode: multiply; }
.mp-gradient-smoke .mp-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: mp-cloud-a 21s ease-in-out infinite; }
.mp-gradient-smoke .mp-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: mp-cloud-b 27s ease-in-out infinite; }
.mp-gradient-smoke .mp-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: mp-cloud-c 33s ease-in-out infinite; }
.mp-gradient-smoke .mp-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: mp-cloud-b 17s ease-in-out infinite reverse; }
@keyframes mp-cloud-a { 0%, 100% { transform: translateX(-12%) scaleX(1); } 50% { transform: translateX(40%) scaleX(1.4); } }
@keyframes mp-cloud-b { 0%, 100% { transform: translateX(26%) scaleX(1.25); } 50% { transform: translateX(-30%) scaleX(.8); } }
@keyframes mp-cloud-c { 0%, 100% { transform: translateX(8%) scaleX(1.1); } 50% { transform: translateX(-38%) scaleX(1.5); } }
@media (prefers-reduced-motion: reduce) { .mp-gradient-smoke > span { animation: none; } .mp-gradient-smoke, .mp-gradient-veil-mask { filter: none; } }

/* ── Zweispaltiges Layout (bewusst 1:1 wie die Referenzvorlage) —
   Hauptspalte (Erzähltext, als gestapelte Karten) + sticky Randspalte (Preis/Whitepaper/
   Fakten), bleibt beim Scrollen durch die Hauptspalte stehen. ── */
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-48); align-items: start; }
/* Raster statt Flex — Fehler gefunden: als Flex-Spalte schrumpfen die Kästen, sobald sie
   zusammen höher sind als die Randspalte. Der Preiskasten maß dadurch 249px statt der
   vorgegebenen 280px. Rasterzeilen behalten ihre Höhe. */
.pd-main { display: grid; gap: var(--space-32); min-width: 0; }
.pd-side {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); position: sticky; top: 88px;
  max-height: calc(100vh - 104px); 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;
}
.pd-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (max-width: 1100px) {
  .pd-layout { grid-template-columns: minmax(0, 1fr); }
  .pd-side { position: static; max-height: none; overflow-y: visible; }
}

/* Karten-Grundbaustein — ersetzt .lp-section für alles zwischen Hero und Footer.
   padding-top jetzt nur noch 54px, wenn die Box tatsächlich ein Fähnchen trägt (:has(), wie
   in der Referenzvorlage) — Boxen ohne Fähnchen (z.B. Fakten/Preis in der Sidebar) bekommen
   wieder das normale Padding auf allen Seiten. */
/* position:relative ist PFLICHT — ohne sie verankert sich das absolut positionierte Fähnchen
   am Viewport statt an der Box (Bug gefunden: alle 6 Box-Fähnchen hatten offsetParent BODY
   und lagen gestapelt am Seitenanfang). Lehre: künftig Geometrie per
   getBoundingClientRect/offsetParent prüfen, nicht nur Computed Styles. */
.pd-box, .pd-dark, .pd-block { position: relative; }
.pd-box { background: var(--lm-bg-white); border-radius: 10px; padding: var(--space-32); box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.pd-box:has(> .fahnchen) { padding-top: 54px; }
.pd-box--tight { padding: var(--space-24); }
.pd-box--tight:has(> .fahnchen) { padding-top: 54px; }
.pd-box h2 { margin-bottom: var(--space-16); }
/* Sektions-Überschrift innerhalb einer pd-box — 1:1 der Wert aus der Referenzvorlage (deutlich
   kleiner als unser generisches h2/--text-4xl=32px, das war der zweite große "wirkt anders"-
   Fund neben dem fehlenden Fähnchen). */
.pd-sec-title { font-family: var(--font-title); font-weight: var(--weight-black); font-size: 1.5rem; color: var(--lm-title); margin: 0 0 var(--space-8); }
@media (max-width: 480px) { .pd-box { padding: var(--space-24) var(--space-16); } .pd-box:has(> .fahnchen) { padding-top: 46px; } }

/* Fähnchen-Ribbon — Sektions-Label als Eckzipfel-Wimpel, ersetzt .lp-eyebrow überall dort, wo
   die Referenzvorlage ein Fähnchen zeigt (jede pd-box im Hauptspalten-Inhalt + Sidebar-Preis/
   Promo/Fakten). Werte 1:1 übernommen. Immer absolut in der Box-Ecke (braucht
   position:relative auf der Box — .pd-box/.pd-dark 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. */
.fahnchen { position: absolute; top: 12px; left: -6px; z-index: 4; }
.fahnchen-text {
  display: inline-block; white-space: nowrap;
  background: var(--gradient-dark);
  color: var(--color-white);
  font-family: var(--font-title); font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 13px 5px;
}
.fahnchen-fold {
  position: absolute; left: 0; top: calc(100% - 0.5px); width: 0; height: 0;
  border-left: 6px solid transparent; border-top: 6px solid #222;
}
.fahnchen-text--yellow { background: linear-gradient(135deg, #ffff8a 0%, #f7ff1a 45%, #eaf500 100%); color: #111; }
.fahnchen-fold--yellow { border-top-color: #d4dc00; }

/* CTA-Pille — Gradient-Rand+Füllung, invertiert komplett beim Hover (kein Fade, "transition:
   none" ist Absicht: der Wechsel soll hart/sofort kommen). Ersetzt .btn/.btn-black für alle
   Marktplatz-eigenen CTAs (Demo buchen, mehr/weniger anzeigen, Preis-CTA, …). */
.pd-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 24px; box-sizing: border-box;
  background: var(--gradient-dark) padding-box, var(--gradient-dark) border-box;
  color: var(--color-white); border: 2px solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-title); font-size: 0.9375rem; font-weight: var(--weight-bold);
  text-decoration: none; cursor: pointer; transition: none;
}
.pd-cta:hover { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#111, #111) border-box; color: #000; }
.pd-cta--ghost { background: transparent; border-color: #111; color: #111; }
.pd-cta--ghost:hover { background: var(--gradient-dark) padding-box, var(--gradient-dark) border-box; border-color: transparent; color: var(--color-white); }
.pd-cta--light { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.pd-cta--light:hover { background: var(--color-white); color: #111; }
.pd-cta--block { display: flex; width: 100%; }
.pd-cta:disabled { opacity: 0.5; cursor: default; }

/* ===== 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. ===== */
.pd-power {
  /* 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: linear-gradient(120deg, #ff6b6b 0%, #ec5e8a 22%, #b9609e 44%, #7a68b8 66%, #4f7fd1 88%, #3f8fdc 100%);
  background-size: 180% 180%;
  animation: pd-power-shift 22s ease-in-out infinite alternate;
}
@keyframes pd-power-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). */
.pd-power-blobs { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; z-index: 0; }
.pd-power-blob-1, .pd-power-blob-2 { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.pd-power-blob-1 {
  left: -40px; top: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), rgba(255,255,255,0) 68%);
  animation: pd-power-blob-1 12s ease-in-out infinite alternate;
}
.pd-power-blob-2 {
  right: 30%; bottom: -100px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,0) 78%);
  animation: pd-power-blob-2 13s ease-in-out infinite alternate;
}
@keyframes pd-power-blob-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(90px, 60px) scale(1.2); } }
@keyframes pd-power-blob-2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-110px, -50px) scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .pd-power, .pd-power-blob-1, .pd-power-blob-2 { animation: none; }
}

.pd-power-text { position: relative; z-index: 1; padding: var(--space-24) var(--space-32); max-width: 60%; }
.pd-power-text h3 { font-family: var(--font-title); font-weight: var(--weight-black); color: var(--color-white); font-size: 2.5rem; line-height: 1.05; margin: 0; }
.pd-power-text p { font-family: var(--font-body); font-weight: var(--weight-regular); color: rgba(255,255,255,.85); font-size: var(--text-sm); margin: 8px 0 0; }
/* Text-Link mit Pfeil, unterstrichen — kein Button (bewusst keine CTA-Pille an dieser Stelle) */
.pd-power-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  color: var(--color-white); font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-base);
  text-decoration: underline; text-underline-offset: 4px;
}
.pd-power-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 .pd-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. */
.pd-power-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. */
.pd-power-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: 720px) {
  .pd-power { height: auto; }
  .pd-power-text { max-width: 100%; }
  .pd-power-media { display: none; }
}

/* Zitat zwischen zwei Karten — kein eigener Kartenrahmen. Werte auf die exakten Zahlen der
   Referenzvorlage gezogen (vorher --text-lg/1.7 und graue Autorenzeile).
   Vorher geprüft: bissantz.css hat mit .tc-stars/.tc-quote/.tc-author/.tc-company einen
   Zitatbaustein derselben Dreiteilung, aber an das Testimonial-Karussell gekoppelt und mit
   anderen Werten — Begründung der Entscheidung s. renderTestiQuote() in routes.js. */
.testi-quote { padding: var(--space-32) 0; }
.testi-quote-stars { display: flex; justify-content: center; gap: 3px; color: #111; margin-bottom: var(--space-16); }
.testi-quote blockquote { margin: 0 0 var(--space-16); font-family: var(--font-body); font-style: italic; font-weight: var(--weight-regular); font-size: 1.1875rem; line-height: 1.55; color: var(--lm-title); text-align: center; }
.testi-quote cite { display: block; font-style: normal; font-size: var(--text-sm); color: #111; text-align: center; line-height: 1.8; }
.testi-quote cite b { color: #111; font-weight: var(--weight-bold); }

/* ===== Überblick-Box ===================================================================
   Ersetzt das bisherige Zweispalten-Raster mit max-height-Übergang (.mp-overview-blocks)
   vollständig. Der Aufbau der Referenzvorlage ist ein anderer: gestapelte Unterabschnitte
   (h3+p) in einer auf 280px begrenzten Karte, der Rest per display:none weggeschaltet,
   Umschalter als kleine Pille mittig auf der unteren Kartenkante.
   Fließtext (.pd-body) und Unterabschnitt (.pd-sub) sind absichtlich allgemein benannt — beide
   werden von weiteren Sektionen mitgenutzt (Zielgruppe, Warum-Statement, FAQ). ===== */

/* Fließtext im Kasten */
.pd-body { font-size: 1rem; line-height: 1.7; color: var(--gray-700); margin: 0; }
.pd-body + .pd-body { margin-top: var(--space-16); }
.pd-box h3:not(.pd-sub), .pd-box h4:not(.pd-sub) { 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. */
.pd-sub { display: flex; align-items: center; gap: 8px; margin: var(--space-24) 0 6px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 1rem; color: var(--lm-title); }
.pd-sub:first-child { margin-top: 0; }
.pd-sub-icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; background: #111; display: inline-flex; align-items: center; justify-content: center; position: relative; top: -1px; }
.pd-sub-icon svg { stroke-width: 5; }

/* 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. */
.pd-overview { min-height: 300px; display: flex; flex-direction: column; overflow: visible; }
.pd-overview > .pd-sec-title { flex: 0 0 auto; }
.pd-overview-clip { flex: 1 1 auto; overflow: hidden; }
.pd-overview.is-open .pd-overview-clip { flex: 0 0 auto; overflow: visible; }
.pd-overview-intro { margin-bottom: 0; }
.pd-overview.is-open .pd-overview-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). */
.pd-clip-rest { display: none; }
.pd-overview.is-open .pd-clip-rest { display: block; }

/* Umschalter sitzt mittig auf der unteren Kartenkante, zur Hälfte außerhalb */
.pd-overview-toggle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; }
.pd-cta--mini { height: 30px; padding: 0 20px; font-size: 0.75rem; }

/* 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) { .pd-overview { min-height: 360px; } }

/* ===== Problem-Box =====================================================================
   Ersetzt die Karten-Variante (.mp-problem-grid + .mp-problem-*) vollständig. Aufbau der
   Referenzvorlage: zweispaltige Liste, nur durch Haarlinien getrennt (keine Karten), Icon
   läuft inline im Text mit — und darunter ein dunkler Kasten, der aus dem Karten-Padding
   ausbricht und die Kartenunterkante bündig abschließt. ===== */

/* Lucide-Icons in Fließtextgröße (Skala aus der Referenzvorlage) */
.mp-icon { display: inline-flex; width: 24px !important; height: 24px !important; flex: 0 0 auto; }
.mp-icon--sm { width: 18px !important; height: 18px !important; }
.mp-icon--lg { width: 30px !important; height: 30px !important; }

.pd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pd-list li { display: block; line-height: 1.6; color: var(--gray-700); font-size: var(--text-sm); }
.pd-list li b { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 1rem; color: var(--lm-title); }
/* Umbruch zwischen Schlagwort und Erklärung über eine Pseudo-Zeile — das <b> bleibt dadurch
   inline und das Icon wird nicht in eine eigene Zeile gedrängt. */
.pd-list li b::after { content: ''; display: block; height: 2px; }
/* Warnzeichen sitzt auf der Grundlinie der ersten Zeile, nicht in eigener Spalte */
.pd-list-icon { vertical-align: -3px; margin-right: 8px; color: #111; }

.pd-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--space-24); }
.pd-list--grid li { padding: var(--space-24) var(--space-32); }
.pd-list--grid li:nth-child(odd) { border-right: 1px solid var(--lm-border); padding-left: 0; }
.pd-list--grid li:nth-child(even) { padding-right: 0; }
.pd-list--grid li:nth-child(n+3) { border-top: 1px solid var(--lm-border); }
/* Eigene Ergänzung: einspaltig auf dem Handy — die Referenzvorlage lässt die Liste auch dort
   zweispaltig, bei 375px bleiben je Spalte aber nur ~120px Textbreite übrig. */
@media (max-width: 720px) {
  .pd-list--grid { grid-template-columns: 1fr; }
  .pd-list--grid li { padding: var(--space-16) 0; border-right: none !important; }
  .pd-list--grid li:nth-child(n+2) { border-top: 1px solid var(--lm-border); }
}

.pd-list-summary { margin-top: var(--space-24); font-weight: var(--weight-bold); color: var(--lm-title); text-align: center; }

/* KI-Antwort-Kasten (Phase 2b): bricht aus dem Karten-Padding aus und sitzt als eigene dunkle
   Fläche bündig auf der Kartenunterkante — daher die negativen Ränder und der nur unten
   abgerundete Radius. */
.pd-ai-box {
  margin: var(--space-32) calc(-1 * var(--space-32)) calc(-1 * var(--space-32));
  padding: var(--space-32); border-radius: 0 0 10px 10px;
  background: var(--gradient-dark);
}
/* Frei stehende Fassung: dasselbe Widget gleich unter dem Überblick, aber ohne umgebende Karte
   — also kein Ausbruch aus einem Innenmaß, das es hier nicht gibt, und rundum abgerundet statt
   nur unten. Gleiches Muster wie .pd-persona-info--nobox. */
.pd-ai-box--solo { margin: 0; border-radius: var(--mp-radius-card); }
.pd-ai-label { margin: 0 0 var(--space-16); font-family: var(--font-title); font-weight: var(--weight-black); font-size: 1.5rem; text-align: left; color: var(--color-white); }
.pd-ai-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-ai-input {
  flex: 1 1 320px; height: 44px; padding: 0 16px; border-radius: var(--radius-full); box-sizing: border-box;
  border: 2px solid var(--color-white); background: var(--color-white);
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--lm-title);
}
.pd-ai-input:focus, .pd-ai-input:focus-visible { outline: none; border-color: var(--color-white); box-shadow: none; }
.pd-ai-row .pd-cta { flex: 0 0 auto; }
.pd-ai-btn { background: transparent; color: var(--color-white); border: 2px solid var(--color-white); min-width: 130px; }
.pd-ai-btn:hover { background: var(--color-white); color: #111; }
.pd-ai-btn--solid { background: var(--color-white); color: #111; }
.pd-ai-btn--solid:hover { background: transparent; color: var(--color-white); }
.pd-ai-answer { margin-top: var(--space-16); padding: var(--space-16) var(--space-24); background: rgba(255,255,255,.14); border-radius: var(--radius-md); }
.pd-ai-answer-tag { display: inline-block; margin-bottom: 8px; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-white); }
.pd-ai-answer p { margin: 0; line-height: 1.65; color: var(--color-white); }
.pd-ai-error { margin: var(--space-16) 0 0; font-size: var(--text-base); color: rgba(255,255,255,.85); }
.pd-ai-followup { margin: var(--space-24) 0 var(--space-16); text-align: center; font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--color-white); }
.pd-ai-followup-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pd-ai-thanks { margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-white); }
/* Ladehinweis, solange die Antwort unterwegs ist */
.pd-ai-answer p.is-loading { font-style: italic; color: rgba(255,255,255,.75); }
/* Der Ausbruch muss dem Karten-Padding folgen: .pd-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) {
  .pd-ai-box {
    margin: var(--space-24) calc(-1 * var(--space-16)) calc(-1 * var(--space-24));
    padding: var(--space-24) var(--space-16);
  }
  /* Der frei stehende Kasten bricht aus nichts aus — die Ausnahme muss hier wiederholt werden,
     weil die Regel darüber sonst gewinnt (gleiche Spezifität, steht später in der Datei).
     Ohne das ragte er bei 320px auf jeder Seite 16px aus der Inhaltsspalte (gemessen). */
  .pd-ai-box--solo { margin: 0; }
}

/* ===== Trust-Logo-Leiste ================================================================
   Vorher: Flex-Reihe, Logos auf 32px Höhe begrenzt, entsättigt (Graustufe + 60% Deckkraft) mit
   Farbwechsel beim Überfahren. Die Referenzvorlage zeigt ein 5-Spalten-Raster mit quadratischen
   Feldern in **voller Farbe ohne Hover-Effekt**. Die offen gehaltene Farbfrage ist damit
   entschieden — alles andere identisch mit der Referenzvorlage. ===== */
.pd-logos { padding: var(--space-24) 0 var(--space-8); }
.pd-logos-head { text-align: center; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--gray-600); margin: 0 0 var(--space-24); }
.pd-logos-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-24); align-items: center; }
.pd-logo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
/* Eigene Ergänzung: unter 640px werden fünf quadratische Felder je ~55px klein — dort
   zweireihig (3+2). Die Referenzvorlage hat für die Leiste keine Mobilregel. */
@media (max-width: 640px) { .pd-logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kernfunktionen-Grid — 2 Spalten in der schmaleren Hauptspalte (statt 4, s. pd-layout) */
/* ===== 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. ===== */
.pd-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-24); }
.pd-feature { padding: var(--space-24) var(--space-32); }
.pd-feature:nth-child(odd) { border-right: 1px solid var(--lm-border); padding-left: 0; }
.pd-feature:nth-child(even) { padding-right: 0; }
.pd-feature:nth-child(n+3) { border-top: 1px solid var(--lm-border); }
.pd-feature b { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 1rem; margin-bottom: 6px; color: var(--lm-title); }
.pd-feature b .mp-icon { color: #111; margin-top: 2px; }
.pd-feature span { display: block; font-size: 0.9375rem; line-height: 1.6; color: var(--gray-600); }
/* 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: 720px) {
  .pd-features { grid-template-columns: 1fr; }
  .pd-feature { padding: var(--space-16) 0; border-right: none !important; }
  .pd-feature:nth-child(n+2) { border-top: 1px solid var(--lm-border); }
}

/* ===== Entlastung =======================================================================
   Vorher: 12px-Punkte in einem normalen weißen Kasten, Zustandswechsel nur über Füllfarbe.
   Referenzvorlage: eigener Kasten mit 2px schwarzer Kontur (.pd-dark), 31px-Kreise (der letzte
   37px), und das Icon ZEICHNET sich beim Scrollen (Strich-Animation über stroke-dashoffset).
   Die Stufen kommen über data-active am Wrapper — deshalb je Stufe eine eigene Regel. ===== */
.pd-dark { position: relative; border-radius: 10px; padding: var(--space-48); background: var(--lm-bg); border: 2px solid #000; box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.pd-dark:has(> .fahnchen) { padding-top: 70px; }
.pd-dark-title { font-size: 2.5rem; }
.pd-dark-cta { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; white-space: nowrap; }

.pd-relief-wrap { position: relative; margin-top: var(--space-32); }
.pd-relief-track { position: absolute; left: 15px; width: 2px; background: var(--lm-border); }
.pd-relief-fill { position: absolute; left: 15px; width: 2px; background: #111; transition: height .2s ease-out, top .2s ease-out; }
.pd-relief { list-style: none; margin: 0; padding: 0; position: relative; }
.pd-relief-item { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: var(--space-16); padding: 12px 0; }
/* Trennlinie sitzt am Text, nicht am Listenpunkt — sonst liefe sie durch die Kreise */
.pd-relief-text { color: var(--gray-700); line-height: 1.6; padding-top: 12px; margin-top: -12px; border-top: 1px solid var(--lm-border); font-size: 1rem; }
.pd-relief-item:first-child .pd-relief-text { border-top: none; }
.pd-relief-dot {
  position: relative; z-index: 1; width: 31px; height: 31px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--gray-50);
  border: 2px solid var(--lm-border); color: var(--lm-border);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.pd-relief-dot--check { width: 37px; height: 37px; margin: -3px 0 0 -3px; }
.pd-relief-dot svg { width: 14px !important; height: 14px !important; }
.pd-relief-dot--check svg { width: 17px !important; height: 17px !important; }
/* Strich-Animation: das Icon ist zunächst „unsichtbar lang" versetzt und wird eingezeichnet */
.pd-relief-dot svg path { stroke-width: 4; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .45s ease .1s; }
.pd-relief-dot--check svg path { stroke-dasharray: 25; stroke-dashoffset: 25; }
.pd-relief-text--out { font-family: var(--font-title); font-weight: var(--weight-black); font-size: 1.25rem; color: #111; }
.pd-relief-item--done { margin-top: 8px; }
.pd-relief-item--done .pd-relief-text { border-top: none; padding-top: 0; margin-top: 0; }
/* Stufenweise Aktivierung — data-active-Muster (1…6) */
.pd-relief-wrap[data-active="1"] .pd-relief-item:nth-child(-n+1) .pd-relief-dot--x,
.pd-relief-wrap[data-active="2"] .pd-relief-item:nth-child(-n+2) .pd-relief-dot--x,
.pd-relief-wrap[data-active="3"] .pd-relief-item:nth-child(-n+3) .pd-relief-dot--x,
.pd-relief-wrap[data-active="4"] .pd-relief-item:nth-child(-n+4) .pd-relief-dot--x,
.pd-relief-wrap[data-active="5"] .pd-relief-item:nth-child(-n+5) .pd-relief-dot--x,
.pd-relief-wrap[data-active="6"] .pd-relief-item:nth-child(-n+6) .pd-relief-dot--x { border-color: #111; color: #c0392b; }
.pd-relief-wrap[data-active="1"] .pd-relief-item:nth-child(-n+1) .pd-relief-dot--check,
.pd-relief-wrap[data-active="2"] .pd-relief-item:nth-child(-n+2) .pd-relief-dot--check,
.pd-relief-wrap[data-active="3"] .pd-relief-item:nth-child(-n+3) .pd-relief-dot--check,
.pd-relief-wrap[data-active="4"] .pd-relief-item:nth-child(-n+4) .pd-relief-dot--check,
.pd-relief-wrap[data-active="5"] .pd-relief-item:nth-child(-n+5) .pd-relief-dot--check,
.pd-relief-wrap[data-active="6"] .pd-relief-item:nth-child(-n+6) .pd-relief-dot--check { background: #111; border-color: #111; color: #fff; }
.pd-relief-wrap[data-active="1"] .pd-relief-item:nth-child(-n+1) .pd-relief-dot svg path,
.pd-relief-wrap[data-active="2"] .pd-relief-item:nth-child(-n+2) .pd-relief-dot svg path,
.pd-relief-wrap[data-active="3"] .pd-relief-item:nth-child(-n+3) .pd-relief-dot svg path,
.pd-relief-wrap[data-active="4"] .pd-relief-item:nth-child(-n+4) .pd-relief-dot svg path,
.pd-relief-wrap[data-active="5"] .pd-relief-item:nth-child(-n+5) .pd-relief-dot svg path,
.pd-relief-wrap[data-active="6"] .pd-relief-item:nth-child(-n+6) .pd-relief-dot svg path { stroke-dashoffset: 0; }
@media (max-width: 640px) {
  .pd-dark { padding: var(--space-32) var(--space-24); }
  .pd-dark:has(> .fahnchen) { padding-top: 62px; }
  .pd-dark-title { font-size: 1.75rem; }
}

/* ===== 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. ===== */
.pd-warum { background: var(--gradient-dark); border: none; }
.pd-warum .pd-sec-title { color: var(--color-white); }
.pd-warum .pd-body { color: rgba(255,255,255,.82); }
.pd-warum-mark { position: absolute; top: var(--space-32); right: var(--space-32); width: 130px; line-height: 0; }
.pd-warum-mark svg { width: 130px; height: auto; display: block; }
.pd-warum-tagline { font-weight: var(--weight-bold); color: var(--color-white) !important; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
/* 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) {
  .pd-warum-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. ===== */
.pd-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. */
.pd-persona-stage { position: relative; container-type: inline-size; padding-top: 45px; }
.pd-persona-imgwrap { position: relative; width: 100%; aspect-ratio: 5 / 3; overflow: hidden; background: var(--color-white); }
.pd-persona-imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-persona-imgwrap .hero-media { position: absolute; inset: 0; border-radius: 0; border: none; min-height: 0; }
.pd-persona-dim {
  position: absolute; inset: 0; background: var(--gray-100); 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;
}
.pd-persona-dim.is-active { opacity: 0; }
.pd-persona-dim.is-hover { opacity: 0.28; }
.pd-persona-zone { position: absolute; top: 0; bottom: 0; cursor: pointer; z-index: 2; }
.pd-persona-group { position: absolute; height: 39px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; }
.pd-persona-label {
  flex-shrink: 0; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--gray-400); transition: color .35s ease;
}
.pd-persona-tick { width: 1px; height: 27px; margin-top: 6px; background: var(--gray-400); transition: background .35s ease; flex-shrink: 0; }
.pd-persona-group.is-hover .pd-persona-label { color: var(--gray-700); }
.pd-persona-group.is-hover .pd-persona-tick { background: var(--gray-700); }
.pd-persona-group.is-active .pd-persona-label { color: #111; }
.pd-persona-group.is-active .pd-persona-tick { background: #111; }

/* Erklärkasten — nutzt den dunklen Ausbruch-Kasten der Problem-Sektion als Basis und
   überschreibt nur Innenabstand, Abstand oben und Verlauf. */
.pd-persona-info { padding: 14px var(--space-32); margin-top: 0; display: flex; align-items: center; gap: var(--space-16); background: linear-gradient(135deg, #333 0%, #1a1a1a 40%, #0a0a0a 100%); }
.pd-persona-info-text { min-width: 0; overflow: hidden; }
.pd-persona-info-text b { display: block; font-family: var(--font-title); font-weight: var(--weight-black); font-size: 0.9375rem; color: var(--color-white); }
.pd-persona-info-sub { display: block; font-size: var(--text-sm); color: rgba(255,255,255,.75); line-height: 1.5; }
.pd-zielgruppe-closing { font-weight: var(--weight-bold); color: var(--lm-title); }
/* 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: 720px) { .pd-personas, .pd-persona-info { display: none; } }
@media (max-width: 480px) { .pd-personas { margin-left: calc(-1 * var(--space-16)); margin-right: calc(-1 * var(--space-16)); } }

/* ===== FAQ ===============================================================================
   Vorher: eigenes Accordion mit JS-Umschaltung und Lucide-Chevron. Die Referenzvorlage nutzt
   natives <details>/<summary> mit Haarlinien-Trennung und einem selbstgezeichneten Pfeil aus
   zwei Rahmenkanten — kein JS nötig, Antworten stehen auch ohne Skript im Quelltext. ===== */
.pd-faq details { border-top: 1px solid var(--lm-border); }
.pd-faq details:first-of-type { border-top: none; }
.pd-faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 1rem; color: var(--lm-title);
}
.pd-faq summary::-webkit-details-marker { display: none; }
/* Pfeil = 10px-Quadrat, von dem nur zwei Kanten gezeichnet und um 45° gedreht sind */
.pd-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid #111; border-bottom: 2px solid #111;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.pd-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.pd-faq p { margin: 0 0 20px; line-height: 1.7; color: var(--gray-700); font-size: 1rem; }

/* ===== 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. */
.pd-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-24); }
.pd-related a {
  display: block; background: var(--lm-bg-white); border-radius: 10px;
  padding: var(--space-24) var(--space-24) var(--space-24) calc(var(--space-24) + 16px);
  box-shadow: 0 1px 8px rgba(0,0,0,.08); position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.2,1), box-shadow .3s ease;
}
.pd-related a:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
.pd-related a::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; border-radius: 10px 0 0 10px;
  background: var(--related-stripe, linear-gradient(180deg, #999, #666));
}
.pd-related b { display: block; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 1rem; margin-bottom: 6px; color: var(--lm-title); }
.pd-related span { display: block; font-size: var(--text-base); line-height: 1.55; color: var(--gray-600); overflow-wrap: anywhere; }
@media (max-width: 720px) { .pd-related { grid-template-columns: 1fr; } }

/* ===== Randspalte =======================================================================
   Preisblock, Whitepaper-Kachel und Faktentabelle — alle drei bekommen ein Fähnchen wie die
   Kästen der Hauptspalte, der Preis-CTA sitzt am unteren Kastenrand. ===== */
/* 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). */
.pd-pricebox { min-height: 300px; display: flex; flex-direction: column; }
.pd-pricebox .pd-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pd-pricebox .pd-price b { font-family: var(--font-title); font-size: 1.75rem; font-weight: var(--weight-black); color: var(--lm-title); }
.pd-pricebox .pd-price span { font-size: var(--text-sm); color: var(--gray-600); }
.pd-pricebox p { margin: 0 0 var(--space-16); font-size: var(--text-base); color: var(--gray-600); line-height: 1.55; }
/* CTA wird nach unten gedrückt, egal wie lang der Hinweistext ist */
.pd-pricebox .pd-cta { margin-top: auto; flex-shrink: 0; }

.pd-promo {
  --promo-c1: #4ec5f2; --promo-c2: #1f6fd0; --promo-c3: #002d71;
  position: relative; border-radius: 10px; padding: 44px var(--space-24) var(--space-24);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--promo-c1) 0%, var(--promo-c2) 55%, var(--promo-c3) 100%);
}
/* 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. */
.pd-promo-blobs { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; pointer-events: none; }
.pd-promo-blob {
  position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), rgba(255,255,255,0) 68%);
}
.pd-promo-body { position: relative; z-index: 1; }
.pd-promo h4 { font-family: var(--font-title); font-weight: var(--weight-black); font-size: var(--text-xl); margin: 12px 0 8px; color: var(--color-white); }
.pd-promo p { margin: 0 0 var(--space-16); font-size: 0.9375rem; line-height: 1.55; color: rgba(255,255,255,.82); }

/* Faktentabelle: feste Beschriftungsspalte, Trennlinien oben statt unten (die letzte Zeile
   bekommt dadurch keine überflüssige Linie) */
.pd-facts { display: grid; }
.pd-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--lm-border); font-size: 0.9375rem; }
.pd-facts > div:first-child { border-top: none; padding-top: 0; }
/* Umbruch nach Sprachregeln statt an beliebiger Stelle:
   lange, ungetrennte Fachbegriffe wie "Regressionsalgorithmen"/"Klassifikationsalgorithmen"
   passen nicht in die feste 130px-Spalte und liefen bisher ungebrochen in die Wert-Spalte hinein
   (Grid-Items ueberlaufen ihre Spur per Default). Erster Fix war overflow-wrap:break-word — das
   bricht aber an JEDER Zeichengrenze ("Regressionsalgorit-hmen"), nicht an einer Silbengrenze.
   hyphens:auto nutzt die Browser-eigene Trennwoerterbuch-Silbentrennung nach den Regeln der per
   lang-Attribut angegebenen Sprache (html lang="de", s. routes.js) — daraus wird korrekt
   "Regressions-algorithmen". overflow-wrap:break-word bleibt als Sicherheitsnetz (nur falls die
   Silbentrennung fuer ein Wort keinen Trennpunkt findet), betrifft nur dt, weil dd durch mehrere
   Woerter mit Leerzeichen ohnehin schon normal umbricht. */
.pd-facts dt {
  color: var(--gray-600); margin: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
/* min-width:0 + Umbruch (Fund 2026-09-11, DeltaApp-Mobile-Entwurf): dd sitzt auf einer
   FLEXIBLEN 1fr-Spalte — anders als dt's fester 130px-Spalte beruecksichtigt CSS Grid bei
   flexiblen Spuren die Mindestbreite des laengsten enthaltenen Worts (min-width:auto-Default).
   Ein einzelnes langes Wort wie "Entscheidungsunterstuetzung" (ohne Leerzeichen/Trennstelle)
   zwang die Spalte + Box dadurch ueber den Kartenrand hinaus zu wachsen (gemessen: 6px Ueberlauf),
   selbst wenn der REST des Textes durch die Leerzeichen normal umbricht. min-width:0 nimmt der
   Spalte diesen Mindestbreiten-Zwang, hyphens/overflow-wrap sorgen dafuer, dass das lange Wort
   danach sauber (nach Sprachregeln) statt einfach abgeschnitten umbricht — dieselbe Loesung wie
   bei dt oben. */
.pd-facts dd {
  margin: 0; color: var(--lm-title); font-weight: var(--weight-bold);
  min-width: 0; overflow-wrap: break-word;
  -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
@media (max-width: 480px) { .pd-facts > div { grid-template-columns: 110px 1fr; gap: 12px; } }

/* =====================================================
   INDEXSEITE (Phase 4, v0.18.0)
   Bausteine, die nur die Marktplatz-Startseite braucht.
   Herkunft: die gültigen Werte standen im Inline-<style> der Referenz-HTML-Datei, NICHT in
   deren separater marktplatz.css (die beschreibt einen überholten Klassenstand).
   Die Produktseiten-Bausteine (.pd-*) darüber bleiben unberührt.
===================================================== */

:root {
  --mp-radius-card: 10px;
  --mp-ease-hover: cubic-bezier(.16, 1, .3, 1);
  --mp-shadow-card: 0 1px 8px rgba(0,0,0,.08);
  --mp-shadow-card-hover: 0 16px 40px rgba(0,0,0,.16);
}

.mp-hl-ai { color: var(--color-ai); }

/* ── Hero mit Suchfeld ────────────────────────────── */
.mp-hero { padding: var(--space-64) var(--space-32) var(--space-48); text-align: center; }
.mp-hero h1 {
  font-family: var(--font-title); font-weight: var(--weight-black);
  font-size: clamp(var(--text-4xl), 8vw, var(--text-5xl)); letter-spacing: -0.02em;
}
.mp-hero-sub { color: var(--lm-text); font-size: var(--text-lg); margin-top: var(--space-8); }
.mp-hero-label { font-weight: var(--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. */
.mp-search-shell {
  position: relative; max-width: 480px; margin: var(--space-16) auto 0;
  border: 1px solid transparent; border-radius: 24px; text-align: left;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--mp-angle, 0deg),
      rgba(78,197,242,0) 0deg, #4ec5f2 55deg, #8fe6ff 95deg, #4ec5f2 135deg, rgba(78,197,242,0) 195deg) border-box;
  box-shadow: 0 0 8px rgba(0,0,0,.09);
  animation: mp-border-spin 3s linear infinite;
}
/* Fokus/Hover: der Konturlauf hält an und wird durchgehend akzentblau */
.mp-search-shell:hover, .mp-search-shell:focus-within {
  animation: none;
  background:
    linear-gradient(#fff, #fff) 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. */
.mp-search { position: relative; line-height: 0; font-size: 0; }
.mp-search input {
  display: block; width: 100%; height: 48px; padding: 0 48px 0 var(--space-16);
  border-radius: var(--radius-full); border: none; background: transparent;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--lm-title);
}
.mp-search input::placeholder { color: var(--gray-500); }
.mp-search input:focus-visible { outline: none; }
.mp-search input:focus { color: var(--color-ai); caret-color: var(--color-ai); }
.mp-search-shell:hover input::placeholder { color: var(--color-ai); }
@property --mp-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes mp-border-spin { to { --mp-angle: 360deg; } }
.mp-search-icon {
  position: absolute; right: 6px; top: 6px; width: 36px; height: 36px;
  border-radius: var(--radius-full); background: var(--action); color: var(--color-white);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition-base) var(--ease-standard);
}
.mp-search-shell:hover .mp-search-icon, .mp-search-shell:focus-within .mp-search-icon,
.mp-search-icon: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). */
.mp-tw-mirror {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  visibility: hidden; white-space: pre; pointer-events: none;
  font-family: var(--font-body); font-size: var(--text-base);
}
.mp-tw-caret {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--gray-500); pointer-events: none; opacity: 0;
  animation: mp-caret-blink .9s step-end infinite;
}
.mp-search-shell:hover .mp-tw-caret { background: var(--color-ai); }
@keyframes mp-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mp-search-shell { animation: none; }
  .mp-tw-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/.pd-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. */
.mp-ki-hinweis {
  max-height: 0; overflow: hidden;
  font-size: var(--text-xs); line-height: 1.5; color: var(--gray-500);
  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);
}
.mp-ki-hinweis a { color: inherit; text-decoration: underline; }
.mp-ki-hinweis a:hover { color: var(--color-ai); }
@media (prefers-reduced-motion: reduce) { .mp-ki-hinweis { transition: none; } }

.mp-hero:focus-within .mp-ki-hinweis--hero,
.pd-ai-box:focus-within .mp-ki-hinweis {
  max-height: 220px; opacity: 1; margin-top: var(--space-8);
}
.mp-cat-center-box:focus-within .mp-ki-hinweis--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. */
.mp-ki-hinweis--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). */
.mp-ki-hinweis--thema { padding: 0 var(--space-16) 0 28px; }
/* Auf der Produktseite sitzt der Hinweis auf der dunklen Fläche — Grau wäre dort unlesbar. */
.pd-ai-box .mp-ki-hinweis { color: rgba(255, 255, 255, .7); }
.pd-ai-box .mp-ki-hinweis 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. */
.mp-info-badge {
  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). */
.mp-info-badge-icon { width: 20px; height: 20px; display: block; opacity: .3; }
.mp-info-badge--dark .mp-info-badge-icon { color: var(--color-black); }
.mp-info-badge--light .mp-info-badge-icon { color: var(--color-white); }
.mp-info-badge-pop {
  position: absolute; top: calc(100% + var(--space-8)); right: 0; z-index: 3;
  width: max-content; max-width: 220px;
  background: var(--color-black); color: var(--color-white);
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-md);
  font-size: var(--text-xs); line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.mp-info-badge:hover .mp-info-badge-pop,
.mp-info-badge:focus .mp-info-badge-pop,
.mp-info-badge:focus-within .mp-info-badge-pop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) { .mp-info-badge-pop { transition: none; } }
/* Nur der Index-Aufruf von renderPersonaStage() bekommt hier ein Badge (o.ohneBox) — auf der
   Produktseite sitzt das Icon stattdessen am äußeren .pd-box (ziel), s. renderInfoIcon-Aufrufe.
   position:relative dafür steht bei der bestehenden .pd-persona-info--nobox-Regel weiter unten. */

/* ===== 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. ===== */
.mp-answer-panel { overflow: hidden; transition: height .6s cubic-bezier(.16, 1, .3, 1); }
.mp-answer-panel-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);
}
.mp-answer-panel.is-open .mp-answer-panel-inner { opacity: 1; transform: none; }
.mp-answer-divider { border-top: 1px solid rgba(0, 0, 0, .08); margin: 0 0 var(--space-24); }
@media (prefers-reduced-motion: reduce) {
  .mp-answer-panel { transition: none; }
  .mp-answer-panel-inner { transition: none; }
}
.mp-answer-close {
  position: absolute; top: var(--space-16); right: var(--space-16); width: 28px; height: 28px;
  border: none; background: none; cursor: pointer; color: var(--gray-600);
  font-size: 1.25rem; line-height: 1;
}
.mp-answer-close:hover { color: #111; }
.mp-answer-eyebrow {
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray-600);
  margin: 0 0 var(--space-16); padding-right: var(--space-32);
}
.mp-answer-text {
  font-size: var(--text-base); line-height: 1.7; color: var(--gray-700); margin: 0;
  padding-bottom: var(--space-24); border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* 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. */
.mp-answer-text strong, .mp-answer-text a {
  color: var(--color-ai); font-weight: var(--weight-bold); text-decoration: none;
}
.mp-answer-text a:hover, .mp-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. */
.mp-answer-text.is-loading { color: var(--gray-500); font-style: italic; }
.mp-answer-cta-label {
  font-family: var(--font-title); font-weight: var(--weight-bold); text-align: center;
  margin: var(--space-24) 0 var(--space-16);
}
.mp-answer-cta-buttons { display: flex; flex-wrap: nowrap; gap: var(--space-16); }
.mp-answer-cta-buttons .pd-cta { 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 .pd-cta setzt display. Ohne diese Zeile blieb
   „Produkt ansehen" sichtbar, obwohl das Attribut gesetzt war (gefunden). */
.mp-answer-cta-buttons .pd-cta[hidden] { display: none; }
.mp-answer-cta-buttons--single { justify-content: center; }
.mp-answer-cta-buttons--single .pd-cta { 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 .mp-answer-cta-label, .is-answering .mp-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: 520px) {
  .mp-answer-cta-buttons { flex-wrap: wrap; }
  .mp-answer-cta-buttons .pd-cta { flex: 1 1 100%; }
  .mp-answer-panel-inner { padding: var(--space-8) var(--space-24) var(--space-24); }
}

.mp-problem-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: var(--space-16); max-width: 620px; margin-inline: auto;
}
.mp-problem-pill {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--gray-600);
  background: none; border: 1px solid var(--lm-border); border-radius: 999px;
  padding: 6px 16px; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.mp-problem-pill:hover { border-color: #111; color: #111; }

/* ── Produkt-Karussell ────────────────────────────── */
/* 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. */
.mp-scroll-wrap { position: relative; margin-inline: calc(-1 * var(--space-32)); }
.mp-scroll-wrap .mp-product-scroll {
  --mp-gutter: max(var(--space-32), calc((100% - var(--content-max-width)) / 2));
}
.mp-scroll-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 90px;
  background: linear-gradient(to right, rgba(247,247,247,0), var(--lm-bg));
  pointer-events: none; z-index: 2;
}
.mp-product-scroll {
  display: flex; gap: var(--space-24); overflow-x: auto; scrollbar-width: none;
  cursor: grab;
  padding-block: 18px 60px;
  padding-inline: var(--mp-gutter, 32px) 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;
}
.mp-product-scroll::-webkit-scrollbar { display: none; }
.mp-product-scroll:active { cursor: grabbing; }
.mp-product-scroll > *:last-child { margin-right: var(--mp-gutter, 32px); }

.mp-scroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); box-shadow: 0 2px 12px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #111;
}
.mp-scroll-arrow svg { width: 22px; height: 22px; }
.mp-scroll-arrow--left { left: 20px; }
.mp-scroll-arrow--right { right: 20px; }
@media (max-width: 900px) { .mp-scroll-arrow { display: none; } }

.mp-card {
  position: relative; overflow: visible; flex: 0 0 auto;
  width: 360px; height: 540px; border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-card); cursor: pointer; will-change: transform;
  text-decoration: none; color: inherit;
  transition: transform .6s var(--mp-ease-hover), box-shadow .6s var(--mp-ease-hover);
  /* 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;
}
.mp-card * { user-select: none; }
@media (hover: hover) { .mp-card:hover { transform: scale(1.04); box-shadow: var(--mp-shadow-card-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.mp-card { cursor: default; }
@media (hover: hover) { article.mp-card:hover { transform: none; box-shadow: var(--mp-shadow-card); } }
.mp-card-inner {
  position: absolute; inset: 0; border-radius: var(--mp-radius-card); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; padding: 30px;
  background: #fff;
}
.mp-card-inner > * { position: relative; z-index: 1; }
.mp-card-head { margin: 0; padding: 0; }
.mp-media-label {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 0; text-align: center;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-400); pointer-events: none;
}
.mp-card:has(.mp-neu) .mp-media-label { padding-right: 74px; }
.mp-card-type {
  position: absolute; top: 19px; right: 15px; z-index: 1; text-align: right;
  font-family: var(--font-title); font-size: 9px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500);
}
/* 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. */
.mp-card-name {
  font-family: var(--font-title); font-weight: var(--weight-black); font-size: 2rem;
  line-height: 1.1; letter-spacing: -0.02em; color: #111;
  margin: 30px 0 20px; padding-right: 12px; text-wrap: balance;
}
.mp-card-desc { font-size: .75rem; line-height: 1.55; color: var(--gray-600); margin-bottom: 12px; max-width: 26ch; }
.mp-card-price { font-family: var(--font-title); font-size: .875rem; font-weight: 800; color: #111; }
.mp-card-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .625rem; color: var(--gray-500); letter-spacing: .02em; margin-top: 2px; }
/* dunkle Karten (Kachel mit ganzflächigem dunklem Bild) */
.mp-card--dark .mp-card-name { color: #fff; }
.mp-card--dark .mp-card-desc { color: rgba(255,255,255,.75); }
.mp-card--dark .mp-card-price { color: #fff; }
.mp-card--dark .mp-card-type { color: rgba(255,255,255,.6); }

/* 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. */
.mp-neu { position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; z-index: 2; overflow: hidden; pointer-events: none; }
.mp-neu span {
  position: absolute; left: 91.7px; top: 91.7px; width: 220px;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: linear-gradient(135deg, #ffff8a 0%, #f7ff1a 45%, #eaf500 100%);
  padding: 9px 0; text-align: center;
  font-family: var(--font-title); font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #111;
}

/* ── "Alle Produkte anzeigen" — quadratisches Raster ── */
/* 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. */
.mp-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-48) var(--space-32); padding: 6px 10px; }
.mp-mini-card { position: relative; cursor: pointer; text-decoration: none; color: inherit; transition: transform .25s ease; }
.mp-mini-media {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: var(--mp-shadow-card); transition: box-shadow .3s ease;
  display: flex; flex-direction: column; padding: 58px 30px 22px;
}
@media (hover: hover) {
  .mp-mini-card:hover { transform: scale(1.035); }
  .mp-mini-card:hover .mp-mini-media { box-shadow: var(--mp-shadow-card-hover); }
}
/* Unveröffentlicht = <article> statt <a> (s. Kommentar bei article.mp-card oben) — dieselbe
   Entschärfung fürs Mini-Raster. */
article.mp-mini-card { cursor: default; }
@media (hover: hover) {
  article.mp-mini-card:hover { transform: none; }
  article.mp-mini-card:hover .mp-mini-media { box-shadow: var(--mp-shadow-card); }
}
.mp-mini-card .fahnchen { 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. */
.mp-mini-title {
  position: relative; z-index: 3; margin: 0;
  font-family: var(--font-title); font-weight: var(--weight-black); font-size: 1.375rem;
  line-height: 1.05; letter-spacing: -0.02em; color: #111; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.mp-mini-desc {
  position: relative; z-index: 3; margin: 8px 0 0; font-size: .6875rem; line-height: 1.45;
  color: var(--gray-600); max-width: 26ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mp-mini-price { position: relative; z-index: 3; margin-top: auto; font-family: var(--font-title); font-size: .8125rem; font-weight: 800; color: #111; }
.mp-mini-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .625rem; color: var(--gray-500); letter-spacing: .02em; margin-top: 2px; }
.mp-alle { margin-top: var(--space-32); }
.mp-alle[hidden] { display: none; }
@media (max-width: 900px) { .mp-mini-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: 560px) { .mp-mini-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); } }

/* ── "Der wirksame Unterschied" — vier quadratische Kästen ── */
.mp-usp-grid { 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. */
.mp-usp-box {
  min-height: 269px; border: 1px solid #999; border-radius: var(--mp-radius-card);
  padding: var(--space-32); display: flex; flex-direction: column;
  color: var(--lm-title); position: relative;
  container-type: inline-size;
}
/* verbindende Haarlinie zwischen den Kästen */
.mp-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: #999; transform: translateY(-50%);
}
.mp-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. */
.mp-usp-text {
  margin-top: var(--space-16); font-family: var(--font-title); font-weight: var(--weight-black);
  font-size: clamp(1.125rem, 13cqw, 1.625rem); letter-spacing: -0.02em; color: var(--lm-title); line-height: 1.2;
}
@media (max-width: 900px) {
  .mp-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-usp-box:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) { .mp-usp-grid { grid-template-columns: minmax(0, 1fr); } .mp-usp-box { min-height: 0; } }

/* ── Themen-Bento — 2x2, Text je Ecke ausgerichtet ── */
.mp-cat-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. ===== */
.mp-cat-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);
}
.mp-cat-tile {
  position: relative; display: flex; flex-direction: column; padding: 30px;
  border-radius: var(--mp-radius-card); overflow: hidden; text-decoration: none; background: var(--color-white);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.mp-cat-tile--tl, .mp-cat-tile--tr { transform: translateY(calc(-1 * var(--mp-cat-up))); }
.mp-cat-tile--bl, .mp-cat-tile--br { transform: translateY(var(--mp-cat-down)); }
@media (prefers-reduced-motion: reduce) {
  .mp-cat-bento, .mp-cat-tile, .mp-cat-center-box { transition: none; }
}
.mp-cat-bg { position: absolute; inset: -10%; z-index: 0; transform: scale(1); transition: transform .7s var(--mp-ease-hover); }
@media (hover: hover) { .mp-cat-tile:hover .mp-cat-bg { transform: scale(1.14); } }
.mp-cat-bg-pattern { position: absolute; inset: 0; opacity: .4; background-repeat: repeat; }
.mp-cat-bg-pattern--grid { background-image:
  repeating-linear-gradient(30deg, rgba(255,255,255,.5) 0px, rgba(255,255,255,.5) 1px, transparent 1px, transparent 48px),
  repeating-linear-gradient(120deg, rgba(255,255,255,.5) 0px, rgba(255,255,255,.5) 1px, transparent 1px, transparent 48px); }
.mp-cat-bg-pattern--circles { background-image: repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.55) 0px, rgba(255,255,255,.55) 1px, transparent 1px, transparent 34px); }
.mp-cat-bg-pattern--poly { background-image:
  repeating-linear-gradient(60deg, rgba(255,255,255,.55) 0px, rgba(255,255,255,.55) 1px, transparent 1px, transparent 46px),
  repeating-linear-gradient(120deg, rgba(255,255,255,.55) 0px, rgba(255,255,255,.55) 1px, transparent 1px, transparent 46px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0px, rgba(255,255,255,.55) 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. */
.mp-cat-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; }
.mp-cat-tile--tl .mp-cat-bg { background: linear-gradient(to bottom right, #5cd98a 0%, #0e7a45 100%); }
.mp-cat-tile--tr .mp-cat-bg { background: linear-gradient(to bottom left,  #5fb3f2 0%, #145a96 100%); }
.mp-cat-tile--bl .mp-cat-bg { background: linear-gradient(to top right,    #ffd54a 0%, #e08e00 100%); }
.mp-cat-tile--br .mp-cat-bg { background: linear-gradient(to top left,     #6f80d9 0%, #232f6e 100%); }
.mp-cat-deco-circle {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none;
  animation: mp-cat-circle-drift 7.33s ease-in-out infinite alternate;
}
.mp-cat-deco-circle:nth-of-type(2) { animation-duration: 9.33s; animation-delay: -2s; }
@keyframes mp-cat-circle-drift { 0% { transform: translate(0,0); } 100% { transform: translate(4%, -5%); } }
.mp-cat-tile--tl .mp-cat-deco-circle:nth-of-type(1) { width: 1430px; height: 1430px; right: -650px; bottom: -845px; }
.mp-cat-tile--tl .mp-cat-deco-circle:nth-of-type(2) { width: 585px;  height: 585px;  right: 130px;  top: -364px; }
.mp-cat-tile--tr .mp-cat-deco-circle:nth-of-type(1) { width: 1560px; height: 1560px; left: -650px;  bottom: -845px; }
.mp-cat-tile--tr .mp-cat-deco-circle:nth-of-type(2) { width: 455px;  height: 455px;  left: 195px;   bottom: 130px; }
.mp-cat-tile--bl .mp-cat-deco-circle:nth-of-type(1) { width: 1690px; height: 1690px; right: -845px; top: -1066px; }
.mp-cat-tile--bl .mp-cat-deco-circle:nth-of-type(2) { width: 520px;  height: 520px;  right: 455px;  bottom: -65px; }
.mp-cat-tile--br .mp-cat-deco-circle:nth-of-type(1) { width: 1495px; height: 1495px; left: -754px;  top: -936px; }
.mp-cat-tile--br .mp-cat-deco-circle:nth-of-type(2) { width: 585px;  height: 585px;  left: 325px;   bottom: 78px; }
.mp-cat-tile-inner { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 100%; }
.mp-cat-tile--tl { justify-content: flex-start; align-items: flex-start; text-align: left; }
.mp-cat-tile--tr { justify-content: flex-start; align-items: flex-end;   text-align: right; }
.mp-cat-tile--bl { justify-content: flex-end;   align-items: flex-start; text-align: left; }
.mp-cat-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). ===== */
.mp-cat-tile { container-type: inline-size; }
.mp-cat-title {
  font-family: var(--font-title); font-weight: var(--weight-black);
  font-size: clamp(1.5rem, 6.4cqi, 2rem); line-height: 1.05;
  color: #fff; overflow-wrap: break-word; hyphens: auto; max-width: 100%;
  transition: font-size .7s var(--mp-ease-hover);
}
/* Das Wachsen beim Überfahren gibt es nur, wo auch Platz dafür ist. Unterhalb von 460px
   Inhaltsbreite (≈ Fenster < 1100px) bleibt der Titel stehen — dort reicht die Kachelhöhe
   nicht mehr für eine zusätzliche Zeile. */
@media (hover: hover) {
  @container (min-width: 460px) {
    .mp-cat-tile:hover .mp-cat-title { font-size: 2.6rem; }
  }
}
.mp-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mp-cat-tile--tr .mp-cat-pills, .mp-cat-tile--br .mp-cat-pills { justify-content: flex-end; }
.mp-cat-pill { font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.22); border-radius: 999px; padding: 5px 12px; }
.mp-cat-cta {
  position: absolute; padding: 10px 22px; border-radius: 999px; color: #fff;
  font-family: var(--font-body); font-size: .875rem; font-weight: 700;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
  background: transparent; border: 1.5px solid #fff; z-index: 1;
}
@media (hover: hover) { .mp-cat-tile:hover .mp-cat-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) { .mp-cat-cta { opacity: 1; } }
.mp-cat-tile--tl .mp-cat-cta { left: 30px;  bottom: 30px; }
.mp-cat-tile--tr .mp-cat-cta { right: 30px; bottom: 30px; }
.mp-cat-tile--bl .mp-cat-cta { left: 30px;  top: 30px; }
.mp-cat-tile--br .mp-cat-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. */
.mp-cat-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: #fff; border-radius: 26px; box-shadow: var(--mp-shadow-card-hover);
  text-align: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.mp-cat-input-row { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 28px; }
.mp-cat-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.mp-cat-center-box input { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: .95rem; color: var(--lm-title); padding-bottom: 2px; }
.mp-cat-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-body); font-size: .95rem; color: var(--gray-600); transition: opacity .15s;
}
.mp-cat-center-box input:focus ~ .mp-cat-fake-ph,
.mp-cat-center-box input:not(:placeholder-shown) ~ .mp-cat-fake-ph { opacity: 0; }
.mp-cat-caret { display: inline-block; width: 1px; height: 1em; margin-left: 3px; background: var(--lm-title); animation: mp-caret-blink 1s step-end infinite; }
.mp-cat-center-send {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--action);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s;
}
.mp-cat-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) {
  .mp-cat-bento { grid-template-rows: minmax(220px, auto) minmax(220px, auto); }
  .mp-cat-center-box { width: 80%; }
  /* Platz für den „mehr erfahren"-Knopf freihalten. Nötig, weil der Knopf `position:absolute`
     ist und deshalb NICHT in die Höhenberechnung eingeht — `minmax(...,auto)` allein lässt die
     Kachel also nicht wachsen, der Text läuft einfach in den Knopf hinein (gemessen: 23px).
     Als Polster zählt es dagegen mit: 30px Knopfabstand + 42px Knopfhöhe + 12px Luft.
     Der Knopf sitzt bei den oberen Kacheln unten, bei den unteren oben — daher spiegelbildlich. */
  .mp-cat-tile--tl, .mp-cat-tile--tr { padding-bottom: 84px; }
  .mp-cat-tile--bl, .mp-cat-tile--br { padding-top: 84px; }
}
@media (max-width: 640px) {
  .mp-cat-bento { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(200px, auto)); }
  .mp-cat-center-box { display: none; }
}

/* ── Kostenlose Beratung — Bild links, Inhalt rechts ── */
.mp-beratung-box {
  position: relative; background: var(--color-white); border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-card);
  display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-48); align-items: stretch;
}
.mp-beratung-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--mp-radius-card) 0 0 var(--mp-radius-card); }
.mp-beratung-content { padding: var(--space-32) var(--space-32) var(--space-32) 0; min-width: 0; }
.mp-beratung-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.mp-beratung-item { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-md); color: var(--lm-title); font-weight: 600; line-height: 1.4; }
.mp-diff-marker { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; background: var(--gray-900); color: #fff; }
@media (max-width: 768px) {
  .mp-beratung-box { grid-template-columns: 1fr; gap: 0; }
  /* FESTE Höhe statt height:100% + max-height: einspaltig bestimmt der Inhalt die Zeilenhöhe,
     und ein Bild mit height:100% trägt selbst nichts dazu bei — es kollabierte auf 0 und war
     ab 768px unsichtbar. */
  .mp-beratung-img { height: 240px; max-height: none; border-radius: var(--mp-radius-card) var(--mp-radius-card) 0 0; }
  .mp-beratung-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. */
.mp-persona-info-divider { align-self: stretch; width: 1px; background: rgba(255,255,255,.15); flex-shrink: 0; }
.mp-persona-info-products { flex-shrink: 0; min-width: 180px; }
.mp-persona-info-products-label {
  display: block; font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: rgba(255,255,255,.6); margin-bottom: 8px;
}
/* Alle Produktsätze stehen im Quelltext (Crawler sehen sie), sichtbar ist nur der aktive. */
.mp-persona-info-set { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-persona-info-set[hidden] { display: none; }
.mp-persona-info-tag {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--lm-title); background: var(--color-white); border-radius: 999px;
  padding: 5px 12px; text-decoration: none; transition: background var(--transition-fast);
}
a.mp-persona-info-tag:hover { background: var(--gray-200); }
/* Der Text-Block darf die Produktspalte nicht wegdrücken */
.pd-persona-info .pd-persona-info-text { flex: 1; }
@media (max-width: 900px) {
  .pd-persona-info { flex-wrap: wrap; }
  .mp-persona-info-divider { display: none; }
  .mp-persona-info-products { min-width: 0; }
}

/* Zielgruppen-Buehne ohne umgebenden .pd-box (Indexseite): die negativen Raender der
   Grundregeln gleichen dort ein Kasten-Innenmass aus, das es nicht gibt. */
/* 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. */
.pd-personas--nobox { margin-block: 0; margin-inline: 0; }
.pd-persona-info--nobox { margin: 0; border-radius: var(--mp-radius-card); position: relative; }

/* =====================================================
   INDEXSEITE — Abweichungen gegen die Produktseite
   Alles hier haengt an `.mp-index` am <body> der Indexseite. Damit gilt es NUR dort und die
   visuell schon abgenommene Produkt-Einzelseite bleibt unberuehrt — sauberer als ein Dutzend
   Einzel-Modifier. Werte durchgehend aus der Referenzvorlage, im Browser gemessen.
===================================================== */

/* ── 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. */
.mp-index .lp-section { padding-block: var(--space-48) var(--space-32); }
.mp-index .lp-sec--tight-top { padding-top: 0; }
.mp-index .lp-sec--mid-top { padding-top: var(--space-32); }
.mp-index .lp-sec--tight-bottom { padding-bottom: var(--space-24); }
.mp-index .lp-sec--roomy-bottom { padding-bottom: var(--space-48); }
/* Schmalere Inhaltsspalte fuer Logos, Zielgruppen und FAQ — die Referenzvorlage nutzt dort 820px */
.mp-index .lp-inner--mid { max-width: 820px; }

/* ── 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. */
.mp-index .section-head { margin-bottom: var(--space-32); }
.mp-index .section-head--snug { margin-bottom: var(--space-24); }
.mp-index .section-head .lp-h2 { margin-bottom: 6px; }
.mp-index .lp-lead { font-size: var(--text-md); }
.mp-index .section-head .lp-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. */
.mp-index .pd-logos-head { margin-bottom: var(--space-16); }
.mp-index .pd-logos-row { gap: var(--space-16); max-width: 780px; 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. */
.mp-index .testi-quote { max-width: 640px; 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. */
.mp-index .pd-persona-imgwrap { background: transparent; }
/* Beschriftung im Infokasten: auf dem Index 24px (eigene Sektion), auf der Produktseite
   15px (Nebenrolle neben dem Produkt). */
.mp-index .pd-persona-info-text b { font-size: var(--text-2xl); }

/* ── FAQ ────────────────────────────────────────────
   .pd-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. */
.mp-index .pd-faq { padding-top: var(--space-32); }

/* ── Uebernahme in BEIDE Seiten (nicht index-spezifisch) ──────────────────────────────
   Diese drei Werte weichen auch auf der Produktseite von der Grundregel ab, ebenfalls aus
   der Referenzvorlage uebernommen: */
/* Infokasten-Verlauf 4-stufig wie der Haupt-Gradient, vorher eine eigene 3-stufige Fassung */
.pd-persona-info { background: var(--gradient-dark); }
/* Themen-Eingabefeld: der Wert der Referenzvorlage ist der weichere Schatten, nicht der Karten-Hover */
.mp-cat-center-box { box-shadow: 0 8px 24px rgba(0, 0, 0, .10); }
/* "Arbeitet mit"-Spalte: 12px, gesperrt, und 10px Abstand unter der Beschriftung */
.mp-persona-info-products-label { font-size: var(--text-xs); letter-spacing: 0.05em; }
.mp-persona-info-tag { font-size: var(--text-xs); }
.mp-persona-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. */
.mp-zentriert { display: flex; justify-content: center; }
.mp-alle-toggle { margin-top: 4px; }
.mp-alle-cta { margin-top: var(--space-32); }
.mp-usp-cta { margin-top: var(--space-32); }
.mp-beratung-lead { margin-bottom: var(--space-24); }
.mp-beratung-cta { margin-top: var(--space-24); }