/* ============================================================
   Piazza Studio Components — Builder component styles
   These are the reusable, tokenized component classes.
   Every variant is built from these.
   ============================================================ */

/* ---------- Buttons ---------- */

.bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  height: 48px;
  padding: 0 var(--mp-space-5);
  font-family: var(--mp-font-sans);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--mp-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--mp-duration-fast) var(--mp-ease-standard),
    color var(--mp-duration-fast) var(--mp-ease-standard),
    border-color var(--mp-duration-fast) var(--mp-ease-standard),
    transform var(--mp-duration-fast) var(--mp-ease-standard),
    box-shadow var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mp-focus-ring);
}
.bx-btn--sm { height: 40px; padding: 0 var(--mp-space-4); font-size: 14px; }
.bx-btn--lg { height: 56px; padding: 0 var(--mp-space-6); font-size: 16px; }

.bx-btn--primary { background: var(--mp-primary); color: var(--mp-primary-fg); }
.bx-btn--primary:hover { background: var(--mp-primary-hover); }
.bx-btn--primary:active { background: var(--mp-primary-press); transform: translateY(1px); }

.bx-btn--secondary {
  background: var(--mp-white);
  color: var(--mp-fg);
  border-color: var(--mp-border-strong);
}
.bx-btn--secondary:hover { border-color: var(--mp-fg); }
.bx-btn--secondary:active { transform: translateY(1px); }

.bx-btn--ghost { background: transparent; color: var(--mp-primary); }
.bx-btn--ghost:hover { color: var(--mp-primary-hover); }

.bx-btn--on-dark {
  background: var(--mp-white);
  color: var(--mp-dark-surface);
}
.bx-btn--on-dark:hover { background: var(--mp-cyan); color: var(--mp-dark-surface); }

.bx-btn--ghost-on-dark { background: transparent; color: var(--mp-white); }
.bx-btn--ghost-on-dark:hover { color: var(--mp-cyan); }

.bx-btn[disabled],
.bx-btn--disabled {
  background: var(--mp-ink-200);
  color: var(--mp-fg-subtle);
  border-color: transparent;
  cursor: not-allowed;
  transform: none !important;
}

.bx-btn i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

/* Square icon-only button — width = height, no horizontal text padding */
.bx-btn--icon { padding: 0; aspect-ratio: 1 / 1; }
.bx-btn--icon.bx-btn--sm { width: 40px; height: 40px; }
.bx-btn--icon { width: 48px; height: 48px; }
.bx-btn--icon.bx-btn--lg { width: 56px; height: 56px; }
.bx-btn--icon i[data-lucide] { width: 20px; height: 20px; }
.bx-btn--icon.bx-btn--lg i[data-lucide] { width: 22px; height: 22px; }

/* ---------- Navigation ---------- */
/*
  Component variables — override these per-instance or per-variant:

  Header / top navigation:
  --Nav-gap                         Gap between brand, links and actions       [var(--mp-space-6)]
  --Nav-padding-block               Header vertical padding                    [var(--mp-space-4)]
  --Nav-padding-inline              Header horizontal padding                  [var(--mp-space-6)]
  --Nav-bg                          Header background                          [var(--mp-white)]
  --Nav-border-color                Header bottom border                       [var(--mp-border)]
  --Nav-logo-height                 Brand logo height                          [64px]
  --Nav-link-gap                    Gap between top-level links                [var(--mp-space-6)]
  --Nav-link-color                  Top-level link color                       [var(--mp-fg)]
  --Nav-link-color-active           Active/hover top-level link color          [var(--mp-primary)]
  --Nav-link-font-size              Top-level link font size                   [14px]
  --Nav-link-font-weight            Top-level link weight                      [700]
  --Nav-link-icon-size              Top-level link icon size                   [14px]
  --Nav-link-icon-opacity           Top-level link icon opacity                [0.55]
  --Nav-link-inline-gap             Gap between link text and icon             [4px]
  --Nav-mobile-link-padding         Mobile drawer link padding                 [var(--mp-space-2) 0]
  --Nav-mobile-link-inline-size     Mobile drawer inline link size             [15px]
  --Nav-mobile-drawer-gap           Mobile drawer link gap                     [var(--mp-space-1)]
  --Nav-mobile-drawer-margin-top    Mobile drawer top margin                   [var(--mp-space-3)]
  --Nav-mobile-drawer-padding-top   Mobile drawer top padding                  [var(--mp-space-3)]
  --Nav-mobile-panel-padding        Mobile inline panel padding                [var(--mp-space-1) 0 var(--mp-space-2) var(--mp-space-4)]
  --Nav-mobile-panel-gap            Mobile inline mega panel gap               [var(--mp-space-3)]
  --Nav-sticky-padding              Sticky burger header padding               [var(--mp-space-4)]

  Menu panels:
  --Nav-menu-offset                 Offset below trigger                       [8px]
  --Nav-mega-width                  Mega menu width                            [720px]
  --Nav-mega-bg                     Mega menu background                       [var(--mp-white)]
  --Nav-mega-border-color           Mega menu border                           [var(--mp-border)]
  --Nav-mega-radius                 Mega menu radius                           [var(--mp-radius-md)]
  --Nav-mega-shadow                 Mega menu shadow                           [var(--mp-shadow-lg)]
  --Nav-mega-padding                Mega menu padding                          [var(--mp-space-5)]
  --Nav-mega-gap                    Mega menu column gap                       [var(--mp-space-5)]
  --Nav-mega-eyebrow-size           Mega column heading size                   [11px]
  --Nav-mega-eyebrow-color          Mega column heading color                  [var(--mp-fg-muted)]
  --Nav-mega-list-gap               Mega list item gap                         [var(--mp-space-2)]
  --Nav-mega-link-gap               Mega link internal gap                     [var(--mp-space-3)]
  --Nav-mega-link-padding           Mega link padding                          [var(--mp-space-2) var(--mp-space-3)]
  --Nav-mega-link-radius            Mega link radius                           [var(--mp-radius-sm)]
  --Nav-mega-link-color             Mega link color                            [var(--mp-fg)]
  --Nav-mega-link-size              Mega link font size                        [14px]
  --Nav-mega-link-weight            Mega link weight                           [700]
  --Nav-mega-link-hover-bg          Mega/dropdown link hover background        [var(--mp-bg-soft)]
  --Nav-mega-link-hover-color       Mega/dropdown link hover color             [var(--mp-primary)]
  --Nav-mega-link-desc-size         Mega link description size                 [12px]
  --Nav-mega-link-desc-color        Mega link description color                [var(--mp-fg-muted)]
  --Nav-mega-feature-bg             Mega feature background                    [var(--mp-bg-soft)]
  --Nav-mega-feature-radius         Mega feature radius                        [var(--mp-radius-md)]
  --Nav-mega-feature-padding        Mega feature padding                       [var(--mp-space-4)]
  --Nav-mega-feature-min-height     Mega feature minimum height                [180px]
  --Nav-mega-feature-title-size     Mega feature title size                    [16px]
  --Nav-mega-feature-title-color    Mega feature title color                   [var(--mp-fg)]
  --Nav-mega-feature-text-size      Mega feature text size                     [13px]
  --Nav-mega-feature-text-color     Mega feature text color                    [var(--mp-fg-muted)]
  --Nav-mega-feature-link-size      Mega feature link size                     [13px]
  --Nav-mega-feature-link-color     Mega feature link color                    [var(--mp-primary)]

  Burger and mobile menu:
  --Nav-burger-size                 Burger button size                         [40px]
  --Nav-burger-gap                  Burger line gap                            [5px]
  --Nav-burger-line-width           Burger line width                          [22px]
  --Nav-burger-line-height          Burger line height                         [2px]
  --Nav-burger-line-color           Burger line color                          [var(--mp-fg)]
  --Nav-mobile-bg                   Full mobile menu background                [var(--mp-white)]
  --Nav-mobile-padding              Full mobile menu padding                   [var(--mp-space-6)]
  --Nav-mobile-gap                  Full mobile menu gap                       [var(--mp-space-5)]
  --Nav-mobile-list-margin-top      Full mobile menu list offset               [var(--mp-space-5)]
  --Nav-mobile-list-gap             Full mobile menu list gap                  [var(--mp-space-3)]
  --Nav-mobile-link-font-family     Full mobile menu link family               [var(--mp-font-display)]
  --Nav-mobile-link-size            Full mobile menu link size                 [32px]
  --Nav-mobile-link-tracking        Full mobile menu link tracking             [-0.01em]
  --Nav-mobile-link-weight          Full mobile menu link weight               [900]
  --Nav-mobile-link-line-height     Full mobile menu link line height          [1.05]
  --Nav-mobile-link-color           Full mobile menu link color                [var(--mp-fg)]
  --Nav-mobile-link-color-hover     Full mobile menu hover color               [var(--mp-primary)]
  --Nav-mobile-foot-gap             Full mobile footer gap                     [var(--mp-space-3)]
  --Nav-mobile-foot-padding-top     Full mobile footer top padding             [var(--mp-space-5)]
  --Nav-mobile-foot-border-color    Full mobile footer border                  [var(--mp-border)]
  --Nav-mobile-foot-link-color      Full mobile footer link color              [var(--mp-fg-muted)]
  --Nav-mobile-foot-link-size       Full mobile footer link size               [14px]

  Simple dropdown:
  --Nav-drop-min-width              Simple dropdown min width                  [240px]
  --Nav-drop-bg                     Simple dropdown background                 [var(--mp-white)]
  --Nav-drop-border-color           Simple dropdown border                     [var(--mp-border)]
  --Nav-drop-radius                 Simple dropdown radius                     [var(--mp-radius-md)]
  --Nav-drop-shadow                 Simple dropdown shadow                     [var(--mp-shadow-md)]
  --Nav-drop-padding                Simple dropdown padding                    [var(--mp-space-2)]
  --Nav-drop-list-gap               Simple dropdown list gap                   [2px]
  --Nav-drop-link-padding           Simple dropdown link padding               [var(--mp-space-2) var(--mp-space-3)]
  --Nav-drop-link-radius            Simple dropdown link radius                [var(--mp-radius-sm)]
  --Nav-drop-link-color             Simple dropdown link color                 [var(--mp-fg)]
  --Nav-drop-link-size              Simple dropdown link size                  [14px]
  --Nav-drop-link-weight            Simple dropdown link weight                [500]

  Actions:
  --Nav-actions-gap                 Action group gap                           [var(--mp-space-3)]
  --Nav-action-size                 Icon action button size                    [40px]
  --Nav-action-radius               Icon action button radius                  [var(--mp-radius-pill)]
  --Nav-action-bg                   Icon action background                     [transparent]
  --Nav-action-color                Icon action color                          [var(--mp-fg)]
  --Nav-action-hover-bg             Icon action hover background               [var(--mp-bg-soft)]
  --Nav-action-hover-color          Icon action hover color                    [var(--mp-primary)]
  --Nav-action-icon-size            Icon action glyph size                     [18px]
  --Nav-lang-gap                    Language switcher inner gap                [6px]
  --Nav-lang-padding                Language switcher horizontal padding       [0 var(--mp-space-3)]
  --Nav-lang-size                   Language switcher font size                [14px]
  --Nav-lang-weight                 Language switcher font weight              [500]

  Burger mega overlay:
  --Nav-burgerMega-bg               Burger mega background                     [var(--mp-white)]
  --Nav-burgerMega-inner-padding-x  Burger mega horizontal padding             [var(--mp-space-6)]
  --Nav-burgerMega-inner-padding-b  Burger mega bottom padding                 [var(--mp-space-6)]
  --Nav-burgerMega-top-gap          Burger mega top offset below header        [var(--mp-space-5)]
  --Nav-burgerMega-inner-gap        Burger mega inner gap                      [var(--mp-space-4)]
  --Nav-burgerMega-body-gap         Burger mega body gap                       [var(--mp-space-7)]
  --Nav-burgerMega-body-margin-top  Burger mega body top margin                [var(--mp-space-4)]
  --Nav-burgerMega-sublist-gap      Burger mega sublist gap                    [var(--mp-space-1) var(--mp-space-4)]
  --Nav-burgerMega-subitem-padding  Burger mega subitem padding                [var(--mp-space-2) 0]
  --Nav-burgerMega-subitem-color    Burger mega subitem color                  [var(--mp-fg-muted)]
  --Nav-burgerMega-subitem-size     Burger mega subitem size                   [14px]
  --Nav-burgerMega-subitem-hover    Burger mega subitem hover color            [var(--mp-primary)]
  --Nav-burgerMega-head-size        Burger mega quicklinks heading size        [11px]
  --Nav-burgerMega-head-color       Burger mega quicklinks heading color       [var(--mp-fg-muted)]
  --Nav-burgerMega-grid-gap         Burger mega card grid gap                  [var(--mp-space-3)]
  --Nav-burgerMega-card-gap         Burger mega card inner gap                 [var(--mp-space-2)]
  --Nav-burgerMega-card-padding     Burger mega card padding                   [var(--mp-space-4)]
  --Nav-burgerMega-card-radius      Burger mega card radius                    [var(--mp-radius-md)]
  --Nav-burgerMega-card-bg          Burger mega card background                [var(--mp-bg-soft)]
  --Nav-burgerMega-card-border      Burger mega card border                    [var(--mp-border)]
  --Nav-burgerMega-card-color       Burger mega card text color                [var(--mp-fg)]
  --Nav-burgerMega-card-size        Burger mega card text size                 [13px]
  --Nav-burgerMega-card-icon-size   Burger mega card icon size                 [24px]
  --Nav-burgerMega-card-icon-color  Burger mega card icon color                [var(--mp-primary)]
  --Nav-burgerMega-card-title-size  Burger mega card title size                [15px]
  --Nav-burgerMega-card-title-color Burger mega card title color               [var(--mp-fg)]
  --Nav-burgerMega-card-desc-color  Burger mega card description color         [var(--mp-fg-muted)]
  --Nav-burgerMega-card-hover-border Burger mega card hover border             [var(--mp-primary)]
  --Nav-burgerMega-card-hover-bg    Burger mega card hover background          [color-mix(in srgb, var(--mp-primary) 6%, var(--mp-white))]
  --Nav-burgerMega-card-hover-lift  Burger mega card hover lift                [-2px]
*/

.bx-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Nav-gap, var(--mp-space-6));
  padding: var(--Nav-padding-block, var(--mp-space-4)) var(--Nav-padding-inline, var(--mp-space-6));
  /* Inhalts-Breite „Standard" (Property containerWidth, Default): die Leiste läuft
     mit ihrem Hintergrund voll durch, der Inhalt wird per symmetrischem Auto-
     Padding auf --mp-container-xl (1440 px) begrenzt und zentriert. Bei schmalerem
     Viewport (< 1440 px) fällt das auf das normale Kanten-Padding zurück (max()).
     „Volle Breite" (.bx-navwidth--full) → reines Kanten-Padding, siehe unten. */
  padding-inline: max(var(--Nav-padding-inline, var(--mp-space-6)), calc((100% - var(--mp-container-xl)) / 2));
  background: var(--Nav-bg, var(--mp-white));
  border-bottom: 1px solid var(--Nav-border-color, var(--mp-border));
  position: relative;
}
.bx-nav.bx-navwidth--full { padding-inline: var(--Nav-padding-inline, var(--mp-space-6)); }
.bx-nav__brand img { height: var(--Nav-logo-height, 64px); display: block; }
/* Navigation · Logo-Größe (Property „logoSize", variant-scope). Die Klasse sitzt
   auf dem Wurzel-Element (.bx-nav bzw. .bx-cnav) und setzt nur die Logo-Höhen-
   Tokens neu; die vorhandenen `img { height: var(…) }`-Regeln greifen automatisch
   (Desktop UND mobiler Breakpoint der Zentriert-Variante). „Standard" (m) hat
   bewusst keine Klasse → Fallback-Größen 64 / 72 / 62px. */
.bx-navlogo--s   { --Nav-logo-height: 44px;  --Nav-centered-logo-height: 52px;  --Nav-centered-logo-height-mobile: 42px; }
.bx-navlogo--l   { --Nav-logo-height: 84px;  --Nav-centered-logo-height: 92px;  --Nav-centered-logo-height-mobile: 82px; }
.bx-navlogo--xl  { --Nav-logo-height: 104px; --Nav-centered-logo-height: 112px; --Nav-centered-logo-height-mobile: 102px; }
.bx-navlogo--xxl { --Nav-logo-height: 124px; --Nav-centered-logo-height: 132px; --Nav-centered-logo-height-mobile: 122px; }
.bx-nav__links {
  display: flex;
  gap: var(--Nav-link-gap, var(--mp-space-6));
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}
/* Menü-Ausrichtung (Property menuAlign). Mittig = Default (space-between, keine
   Klasse). Auto-Margins haben in Flex Vorrang vor justify-content: „links" rückt
   das Menü neben das Logo, „rechts" rechtsbündig — ohne CTAs ganz rechts, mit
   CTAs direkt neben die Actions. Bewusst OHNE Media-Query: auf der Mobil-Leiste
   ist die Link-Liste flex-basis:100% → margin-auto ist dort ein No-op. So greift
   die Ausrichtung zuverlässig auch im Komponenten-Katalog (unabhängig von
   Viewport-Breite/Browser-Zoom). */
.bx-nav--menu-left .bx-nav__links { margin-right: auto; }
.bx-nav--menu-right .bx-nav__links { margin-left: auto; }
.bx-nav__links a,
.bx-nav__links .bx-nav__trigger {
  color: var(--Nav-link-color, var(--mp-fg));
  font-weight: var(--Nav-link-font-weight, 700);
  font-size: var(--Nav-link-font-size, 14px);
  text-decoration: none;
  transition: color var(--mp-duration-fast) var(--mp-ease-standard);
  display: inline-flex;
  align-items: center;
  gap: var(--Nav-link-inline-gap, 4px);
}
/* Dropdown-Trigger sind echte <button> (A11y: aria-expanded/haspopup) —
   Button-UA-Styles auf die Link-Optik zurücksetzen. */
.bx-nav__trigger {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.bx-nav__links a:hover,
.bx-nav__links .bx-nav__trigger:hover { color: var(--Nav-link-color-active, var(--mp-primary)); }
.bx-nav__links a.is-active { color: var(--Nav-link-color-active, var(--mp-primary)); font-weight: 700; }
.bx-nav__links a i[data-lucide],
.bx-nav__links .bx-nav__trigger i[data-lucide] { width: var(--Nav-link-icon-size, 14px); height: var(--Nav-link-icon-size, 14px); opacity: var(--Nav-link-icon-opacity, 0.55); }

/* Mega menu */
.bx-nav__item { position: relative; }
.bx-mega {
  position: absolute;
  top: calc(100% + var(--Nav-menu-offset, 8px));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: var(--Nav-mega-width, 720px);
  background: var(--Nav-mega-bg, var(--mp-white));
  border: 1px solid var(--Nav-mega-border-color, var(--mp-border));
  border-radius: var(--Nav-mega-radius, var(--mp-radius-md));
  box-shadow: var(--Nav-mega-shadow, var(--mp-shadow-lg));
  padding: var(--Nav-mega-padding, var(--mp-space-5));
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--Nav-mega-gap, var(--mp-space-5));
  opacity: 0;
  pointer-events: none;
  /* visibility nimmt das zugeklappte Panel aus der Tab-Reihenfolge (A11y);
     der visibility-Anteil der Transition lässt das Ausblenden weich enden. */
  visibility: hidden;
  transition: opacity var(--mp-duration-fast), transform var(--mp-duration-base), visibility var(--mp-duration-fast);
  z-index: 50;
}
.bx-mega.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.bx-mega__col h5 {
  font-size: var(--Nav-mega-eyebrow-size, 11px);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-caps);
  color: var(--Nav-mega-eyebrow-color, var(--mp-fg-muted));
  margin: 0 0 var(--mp-space-3);
  font-weight: 700;
}
.bx-mega__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--Nav-mega-list-gap, var(--mp-space-2)); }
.bx-mega__col li a {
  display: flex;
  align-items: flex-start;
  gap: var(--Nav-mega-link-gap, var(--mp-space-3));
  padding: var(--Nav-mega-link-padding, var(--mp-space-2) var(--mp-space-3));
  border-radius: var(--Nav-mega-link-radius, var(--mp-radius-sm));
  text-decoration: none;
  color: var(--Nav-mega-link-color, var(--mp-fg));
  font-size: var(--Nav-mega-link-size, 14px);
  font-weight: var(--Nav-mega-link-weight, 700);
  transition: background var(--mp-duration-fast);
}
.bx-mega__col li a:hover { background: var(--Nav-mega-link-hover-bg, var(--mp-bg-soft)); color: var(--Nav-mega-link-hover-color, var(--mp-primary)); }
.bx-mega__col li a.is-active { color: var(--Nav-mega-link-hover-color, var(--mp-primary)); font-weight: 700; }
.bx-mega__col li a span { font-weight: 400; font-size: var(--Nav-mega-link-desc-size, 12px); color: var(--Nav-mega-link-desc-color, var(--mp-fg-muted)); display: block; margin-top: 2px; }
.bx-mega__feature {
  background: var(--Nav-mega-feature-bg, var(--mp-bg-soft));
  border-radius: var(--Nav-mega-feature-radius, var(--mp-radius-md));
  padding: var(--Nav-mega-feature-padding, var(--mp-space-4));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--Nav-mega-feature-min-height, 180px);
}
.bx-mega__feature h6 { font-size: var(--Nav-mega-feature-title-size, 16px); font-weight: 700; margin: 0 0 var(--mp-space-2); color: var(--Nav-mega-feature-title-color, var(--mp-fg)); }
.bx-mega__feature p { font-size: var(--Nav-mega-feature-text-size, 13px); line-height: 1.5; color: var(--Nav-mega-feature-text-color, var(--mp-fg-muted)); margin: 0; }
.bx-mega__feature a { font-size: var(--Nav-mega-feature-link-size, 13px); font-weight: 700; color: var(--Nav-mega-feature-link-color, var(--mp-primary)); text-decoration: none; margin-top: var(--mp-space-3); display: inline-flex; align-items: center; gap: 4px; }

/* Burger */
.bx-burger {
  width: var(--Nav-burger-size, 40px);
  height: var(--Nav-burger-size, 40px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--Nav-burger-gap, 5px);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.bx-burger span {
  display: block;
  width: var(--Nav-burger-line-width, 22px);
  height: var(--Nav-burger-line-height, 2px);
  background: var(--Nav-burger-line-color, var(--mp-fg));
  transition: transform var(--mp-duration-base) var(--mp-ease-standard),
              opacity var(--mp-duration-fast);
}
.bx-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bx-burger.is-open span:nth-child(2) { opacity: 0; }
.bx-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Burger der Desktop-Navs (Simple/Mega/Dropdown): nur auf Mobile sichtbar.
   Steht NACH .bx-burger, überschreibt also dessen inline-flex auf Desktop.
   „Burger + Mega" nutzt .bx-burger OHNE --nav und ist davon unberührt. */
.bx-burger--nav { display: none; }

/* ---- Mobile: Desktop-Navigation klappt auf den Burger ein ----
   Die Link-Leiste wird zu einem aufklappbaren Drawer unter der Bar; die
   Hover-Panels (Mega/Mini-Drop) erscheinen inline statt als absolutes Overlay. */
@media (max-width: 768px) {
  .bx-nav { flex-wrap: wrap; }
  .bx-nav__brand { margin-right: auto; }
  .bx-burger--nav { display: inline-flex; order: 3; }
  .bx-nav__actions { order: 2; }
  .bx-nav__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--Nav-mobile-drawer-gap, var(--mp-space-1));
    margin-top: var(--Nav-mobile-drawer-margin-top, var(--mp-space-3));
    padding-top: var(--Nav-mobile-drawer-padding-top, var(--mp-space-3));
    border-top: 1px solid var(--Nav-border-color, var(--mp-border));
    display: none;
  }
  .bx-nav.is-mobile-open .bx-nav__links { display: flex; }
  .bx-nav__links > li { width: 100%; }
  .bx-nav__links > li > a,
  .bx-nav__item > a,
  .bx-nav__links > li > .bx-nav__trigger,
  .bx-nav__item > .bx-nav__trigger { padding: var(--Nav-mobile-link-padding, var(--mp-space-2) 0); font-size: var(--Nav-mobile-link-inline-size, 15px); }
  /* Hover-Panels inline + volle Breite, kein Overlay */
  .bx-mega,
  .bx-mini-drop {
    position: static;
    transform: none;
    width: auto;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: var(--Nav-mobile-panel-padding, var(--mp-space-1) 0 var(--mp-space-2) var(--mp-space-4));
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .bx-mega { grid-template-columns: 1fr; gap: var(--Nav-mobile-panel-gap, var(--mp-space-3)); display: none; }
  .bx-mega.is-open { display: grid; transform: none; }
  .bx-mega__feature { min-height: 0; }
  .bx-mini-drop { display: none; }
  .bx-mini-drop.is-open { display: block; }
}

/* Mobile overlay */
.bx-mobileMenu {
  position: absolute;
  inset: 0;
  background: var(--Nav-mobile-bg, var(--mp-white));
  display: flex;
  flex-direction: column;
  padding: var(--Nav-mobile-padding, var(--mp-space-6));
  gap: var(--Nav-mobile-gap, var(--mp-space-5));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mp-duration-base) var(--mp-ease-standard);
  z-index: 40;
}
.bx-mobileMenu.is-open { opacity: 1; pointer-events: auto; }
.bx-mobileMenu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bx-mobileMenu__list {
  list-style: none;
  padding: 0;
  margin: var(--Nav-mobile-list-margin-top, var(--mp-space-5)) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--Nav-mobile-list-gap, var(--mp-space-3));
}
.bx-mobileMenu__list a {
  font-family: var(--Nav-mobile-link-font-family, var(--mp-font-display));
  font-size: var(--Nav-mobile-link-size, 32px);
  text-transform: uppercase;
  letter-spacing: var(--Nav-mobile-link-tracking, -0.01em);
  color: var(--Nav-mobile-link-color, var(--mp-fg));
  text-decoration: none;
  font-weight: var(--Nav-mobile-link-weight, 900);
  line-height: var(--Nav-mobile-link-line-height, 1.05);
  transition: color var(--mp-duration-fast);
}
.bx-mobileMenu__list a:hover { color: var(--Nav-mobile-link-color-hover, var(--mp-primary)); }
.bx-mobileMenu__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--Nav-mobile-foot-gap, var(--mp-space-3));
  padding-top: var(--Nav-mobile-foot-padding-top, var(--mp-space-5));
  border-top: 1px solid var(--Nav-mobile-foot-border-color, var(--mp-border));
}
.bx-mobileMenu__foot a { color: var(--Nav-mobile-foot-link-color, var(--mp-fg-muted)); font-size: var(--Nav-mobile-foot-link-size, 14px); text-decoration: none; }
.bx-mobileMenu__foot a:hover { color: var(--Nav-mobile-link-color-hover, var(--mp-primary)); }

/* Simple dropdown — small hover list (no mega panel) */
.bx-mini-drop {
  position: absolute;
  top: calc(100% + var(--Nav-menu-offset, 8px));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: var(--Nav-drop-min-width, 240px);
  background: var(--Nav-drop-bg, var(--mp-white));
  border: 1px solid var(--Nav-drop-border-color, var(--mp-border));
  border-radius: var(--Nav-drop-radius, var(--mp-radius-md));
  box-shadow: var(--Nav-drop-shadow, var(--mp-shadow-md));
  padding: var(--Nav-drop-padding, var(--mp-space-2));
  opacity: 0;
  pointer-events: none;
  /* Wie .bx-mega: zugeklappt raus aus der Tab-Reihenfolge (A11y). */
  visibility: hidden;
  transition: opacity var(--mp-duration-fast), transform var(--mp-duration-base), visibility var(--mp-duration-fast);
  z-index: 50;
}
.bx-mini-drop.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.bx-mini-drop ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--Nav-drop-list-gap, 2px); }
.bx-mini-drop li a {
  display: block;
  padding: var(--Nav-drop-link-padding, var(--mp-space-2) var(--mp-space-3));
  border-radius: var(--Nav-drop-link-radius, var(--mp-radius-sm));
  color: var(--Nav-drop-link-color, var(--mp-fg));
  font-weight: var(--Nav-drop-link-weight, 500);
  font-size: var(--Nav-drop-link-size, 14px);
  text-decoration: none;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-mini-drop li a:hover { background: var(--Nav-mega-link-hover-bg, var(--mp-bg-soft)); color: var(--Nav-mega-link-hover-color, var(--mp-primary)); }
.bx-mini-drop li a.is-active { color: var(--Nav-mega-link-hover-color, var(--mp-primary)); font-weight: 700; }

.bx-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--Nav-actions-gap, var(--mp-space-3));
}
.bx-nav__icon-btn {
  width: var(--Nav-action-size, 40px);
  height: var(--Nav-action-size, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--Nav-action-radius, var(--mp-radius-pill));
  background: var(--Nav-action-bg, transparent);
  border: 0;
  color: var(--Nav-action-color, var(--mp-fg));
  cursor: pointer;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-nav__icon-btn:hover { background: var(--Nav-action-hover-bg, var(--mp-bg-soft)); color: var(--Nav-action-hover-color, var(--mp-primary)); }
.bx-nav__icon-btn i[data-lucide] { width: var(--Nav-action-icon-size, 18px); height: var(--Nav-action-icon-size, 18px); }

/* Language switcher (Atoms.LanguageSwitcher) — kompakter Pill-Button mit
   Globus, Sprach-Kürzel und Chevron. Teilt das Hover-Verhalten des Icon-
   Buttons, trägt aber zusätzlich Text. */
.bx-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--Nav-lang-gap, 6px);
  height: var(--Nav-action-size, 40px);
  padding: var(--Nav-lang-padding, 0 var(--mp-space-3));
  border-radius: var(--Nav-action-radius, var(--mp-radius-pill));
  background: var(--Nav-action-bg, transparent);
  border: 0;
  color: var(--Nav-action-color, var(--mp-fg));
  font-family: inherit;
  font-size: var(--Nav-lang-size, 14px);
  font-weight: var(--Nav-lang-weight, 500);
  line-height: 1;
  cursor: pointer;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-lang:hover { background: var(--Nav-action-hover-bg, var(--mp-bg-soft)); color: var(--Nav-action-hover-color, var(--mp-primary)); }
.bx-lang i[data-lucide] { width: var(--Nav-action-icon-size, 18px); height: var(--Nav-action-icon-size, 18px); }
.bx-lang__code { letter-spacing: 0.02em; }

/* Language switcher dropdown — Wrapper positioniert das Menü relativ zum
   Pill-Button; das Menü selbst ist eine schwebende Liste mit Flaggen/Kürzeln. */
.bx-lang__wrap { position: relative; display: inline-flex; }
.bx-lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 180px; padding: 4px;
  background: var(--mp-surface, #fff); border: 1px solid var(--mp-border, #e3e3e8);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.bx-lang__item { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; font: inherit; text-align: left; }
.bx-lang__item:hover { background: var(--mp-surface-2, #f4f4f6); }
.bx-lang__item.is-active { font-weight: 700; }
.bx-lang__item-iso { margin-left: auto; opacity: .55; font-size: 11px; }
.bx-lang__img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }

/* ---------- Search (Atom · Atoms.SearchBar) ----------
   Such-Pille: Eingabefeld + Absenden-Button. Rein visuell (kein echtes
   Suchen) — analog zum Such-Icon-Button der Navigation. Reusable: Hero,
   Portal-Startseiten, später Section-Inhalte. Alle Farben/Maße über
   --Search-*-Slots themebar; Fallbacks spiegeln den Marken-Look. */
.bx-search {
  /* border-box, sonst sprengt width:100% + Innen-Padding + Border die Pille über
     ihren Container (die Vorschau-Iframe lädt keinen globalen box-sizing-Reset). */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--Search-gap, var(--mp-space-2));
  width: 100%;
  max-width: var(--Search-max-width, 560px);
  background: var(--Search-bg, var(--mp-white));
  border: 1px solid var(--Search-border-color, var(--mp-border));
  border-radius: var(--Search-radius, var(--mp-radius-pill));
  padding: var(--Search-padding, 6px 6px 6px var(--mp-space-5));
  box-shadow: var(--Search-shadow, var(--mp-shadow-sm));
}
.bx-search__icon {
  flex-shrink: 0;
  width: var(--Search-icon-size, 20px);
  height: var(--Search-icon-size, 20px);
  color: var(--Search-icon-color, var(--mp-fg-muted));
}
.bx-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--Search-input-size, 16px);
  color: var(--Search-input-color, var(--mp-fg));
  padding: var(--Search-input-padding, var(--mp-space-3) 0);
}
.bx-search__input::placeholder { color: var(--Search-placeholder-color, var(--mp-fg-muted)); }
/* Sichtbarer Fokus trotz outline:none — gleiche Ring-Optik wie .bx-btn. */
.bx-search__input:focus-visible {
  box-shadow: 0 0 0 3px var(--mp-focus-ring);
  border-radius: var(--mp-radius-sm);
}
.bx-search__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  background: var(--Search-btn-bg, var(--mp-primary));
  color: var(--Search-btn-color, var(--mp-primary-fg));
  border-radius: var(--Search-btn-radius, var(--mp-radius-pill));
  padding: var(--Search-btn-padding, var(--mp-space-3) var(--mp-space-5));
  font-family: inherit;
  font-weight: var(--Search-btn-weight, 600);
  font-size: var(--Search-btn-size, 15px);
  transition: background var(--mp-duration-fast);
}
.bx-search__btn:hover { background: var(--Search-btn-hover-bg, color-mix(in srgb, var(--mp-primary) 88%, #000)); }
/* Icon-Größe robust gegen Lucide (ersetzt <i data-lucide> ggf. durch <svg>). */
.bx-search__btn i[data-lucide], .bx-search__btn svg { width: 16px; height: 16px; }
/* Lupe nur auf Mobile — auf Desktop trägt der Button „Suchen →". */
.bx-search__btn-search { display: none; }
/* onDark — über Bildern/dunklen Flächen kräftiger absetzen */
.bx-search--on-dark {
  border-color: var(--Search-border-on-dark, transparent);
  box-shadow: var(--Search-shadow-on-dark, var(--mp-shadow-lg));
}
/* Schmale Breiten: charmante kompakte Suche — das Eingabefeld bleibt in der
   Pille, der Absenden-Button wird ein kreisrunder blauer Button mit weißer
   Lupe (statt „Suchen"-Text, der auf volle Breite umbrach und die Abstände
   unruhig machte). */
@media (max-width: 560px) {
  .bx-search__btn {
    width: var(--Search-btn-mobile-size, 48px);
    height: var(--Search-btn-mobile-size, 48px);
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    flex-shrink: 0;
  }
  .bx-search__btn span,
  .bx-search__btn-arrow { display: none; }
  .bx-search__btn-search { display: inline-flex; }
  /* Höhere Spezifität als `.bx-search__btn svg` (16px), damit die Lupe auf Mobile
     20px groß ist — deckt Lucides <i>- und <svg>-Ausgabe ab. */
  .bx-search__btn .bx-search__btn-search,
  .bx-search__btn .bx-search__btn-search svg { width: 20px; height: 20px; }
}

/* Sticky nav modifier — stays pinned to the top while the mega slides
   in beneath it. Higher z-index than the mega so the mega visually
   "emerges from under" it. */
.bx-nav--sticky {
  position: sticky;
  top: 0;
  z-index: 9100;
  padding: var(--Nav-sticky-padding, var(--mp-space-4));
}
/* Fixierte Navigation (Eigenschaft „Navigation fixieren", Default an) — bleibt
   beim Scrollen oben sichtbar. WICHTIG: position:sticky muss auf den INSTANZ-
   Wrapper (.cp-pz-inst), NICHT auf die Navigation selbst — deren Wrapper ist nur
   nav-hoch und böte keinen Sticky-Spielraum, während der Wrapper-Elternteil
   (.cp-pz-wrap bzw. #view-root) die volle Seitenhöhe hat. .bx-nav--fixed /
   .bx-cnav--fixed sind reine Marker am direkten Kind des Wrappers (auch der
   Burger+Mega-Wurzel-<div>), über die :has() den richtigen Wrapper trifft. */
.cp-pz-inst:has(> .bx-nav--fixed),
.cp-pz-inst:has(> .bx-cnav--fixed) { position: sticky; top: 0; z-index: 9000; }
/* Ausgeblendete Instanz im Bearbeiten-Canvas: sichtbar, aber gedimmt +
   gepunkteter Rahmen + Badge. In Vollbild-Vorschau/Teilen wird sie gar
   nicht erst gerendert (siehe InstanceNode / bakeNode). */
.cp-pz-inst.is-hidden {
  position: relative;
  opacity: 0.45;
  outline: 1px dashed var(--mp-border-strong, #94a3b8);
  outline-offset: -1px;
}
.cp-pz-inst.is-hidden::after {
  content: "Ausgeblendet";
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  font: 600 10px/1 var(--mp-font-sans, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: var(--mp-radius-sm, 4px);
  background: var(--mp-dark-surface, #1d3557);
  color: var(--mp-fg-inverse, #fff);
  pointer-events: none;
}
/* Fixierte Nav verdeckt sonst Anker-Sprungziele und per Tab fokussierte
   Elemente am oberen Rand — Scrollversatz in Nav-Höhe (+Puffer) vorhalten. */
html:has(.bx-nav--fixed),
html:has(.bx-cnav--fixed) { scroll-padding-top: 96px; }

/* Burger + Mega — full-viewport overlay that slides down from above.
   --bx-nav-h is set inline from JS (measured nav-bar height) so the
   mega content begins exactly below the sticky nav bar. */
.bx-burgerMega {
  position: fixed;
  inset: 0;
  background: var(--Nav-burgerMega-bg, var(--mp-white));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform 320ms cubic-bezier(0.2, 0, 0, 1),
    opacity 200ms ease,
    visibility 320ms;
  z-index: 9000;
  overflow-y: auto;
}
.bx-burgerMega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.bx-burgerMega__inner {
  padding:
    calc(var(--bx-nav-h, 64px) + var(--Nav-burgerMega-top-gap, var(--mp-space-5)))
    var(--Nav-burgerMega-inner-padding-x, var(--mp-space-6))
    var(--Nav-burgerMega-inner-padding-b, var(--mp-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--Nav-burgerMega-inner-gap, var(--mp-space-4));
}
.bx-burgerMega__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--Nav-burgerMega-body-gap, var(--mp-space-7));
  margin-top: var(--Nav-burgerMega-body-margin-top, var(--mp-space-4));
  align-items: start;
}
.bx-burgerMega__sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--Nav-burgerMega-sublist-gap, var(--mp-space-1) var(--mp-space-4));
}
.bx-burgerMega__sublist a {
  display: block;
  padding: var(--Nav-burgerMega-subitem-padding, var(--mp-space-2) 0);
  /* Etwas horizontale Hover-Fläche, ohne den Text zu verschieben (negativer
     Rand hebt das Padding wieder auf). */
  padding-inline: var(--mp-space-2);
  margin-inline: calc(var(--mp-space-2) * -1);
  border-radius: var(--mp-radius-sm);
  color: var(--Nav-burgerMega-subitem-color, var(--mp-fg-muted));
  text-decoration: none;
  font-size: var(--Nav-burgerMega-subitem-size, 14px);
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-burgerMega__sublist a:hover {
  background: color-mix(in srgb, var(--mp-primary) 10%, transparent);
  color: var(--Nav-burgerMega-subitem-hover, var(--mp-primary));
}
.bx-burgerMega__sublist a.is-active { color: var(--Nav-burgerMega-subitem-hover, var(--mp-primary)); font-weight: 700; }
/* Aktive Sektion im Burger-Overlay (nur hier, nicht das Accordion-Bauteil) */
.bx-burgerMega__acc .bx-acc__btn.is-active { color: var(--Accordion-button-hover-color, var(--mp-primary)); font-weight: 700; }

.bx-burgerMega__qHead {
  font-size: var(--Nav-burgerMega-head-size, 11px);
  font-weight: 700;
  letter-spacing: var(--mp-tracking-caps);
  text-transform: uppercase;
  color: var(--Nav-burgerMega-head-color, var(--mp-fg-muted));
  margin: 0 0 var(--mp-space-3);
}
.bx-burgerMega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--Nav-burgerMega-grid-gap, var(--mp-space-3));
}
.bx-burgerMega__card {
  display: flex;
  flex-direction: column;
  gap: var(--Nav-burgerMega-card-gap, var(--mp-space-2));
  padding: var(--Nav-burgerMega-card-padding, var(--mp-space-4));
  border-radius: var(--Nav-burgerMega-card-radius, var(--mp-radius-md));
  background: var(--Nav-burgerMega-card-bg, var(--mp-bg-soft));
  border: 1px solid var(--Nav-burgerMega-card-border, var(--mp-border));
  text-decoration: none;
  color: var(--Nav-burgerMega-card-color, var(--mp-fg));
  font-size: var(--Nav-burgerMega-card-size, 13px);
  transition: border-color var(--mp-duration-fast), background var(--mp-duration-fast), transform var(--mp-duration-fast);
}
.bx-burgerMega__card i[data-lucide] { width: var(--Nav-burgerMega-card-icon-size, 24px); height: var(--Nav-burgerMega-card-icon-size, 24px); color: var(--Nav-burgerMega-card-icon-color, var(--mp-primary)); }
.bx-burgerMega__card strong { font-size: var(--Nav-burgerMega-card-title-size, 15px); font-weight: 700; color: var(--Nav-burgerMega-card-title-color, var(--mp-fg)); }
.bx-burgerMega__card span { color: var(--Nav-burgerMega-card-desc-color, var(--mp-fg-muted)); }
.bx-burgerMega__card:hover {
  border-color: var(--Nav-burgerMega-card-hover-border, var(--mp-primary));
  background: var(--Nav-burgerMega-card-hover-bg, color-mix(in srgb, var(--mp-primary) 6%, var(--mp-white)));
  transform: translateY(var(--Nav-burgerMega-card-hover-lift, -2px));
}

/* ============================================================
   Navigation · „Zentriert + Infoleiste" (navigation/centered)
   Eigenes bx-cnav-Namespace, gestapelt: Info-Leiste · Hauptleiste
   (Burger links | Logo mittig | Aktionen rechts) · Warnleiste · plus
   ein Off-Canvas-Drawer von links. Jede Leiste läuft mit ihrem
   Hintergrund voll durch; .bx-cnav__container begrenzt den INHALT auf
   --mp-container-xl (1440 px) und zentriert ihn.
   ============================================================ */
.bx-cnav { position: relative; background: var(--Nav-bg, var(--mp-white)); }
/* border-box, sonst addiert sich das Innen-Padding der Leisten (topbar-inner/
   bar-inner tragen BEIDE Klassen) auf width:100% — die Leiste wird breiter als
   der Viewport und die rechten Icons/Paddings werden abgeschnitten. Die
   Vorschau-Iframe lädt keinen globalen box-sizing-Reset (kein app.css). */
/* border-box ist hier Absicht (Begründung darüber) — dann MUSS die Begrenzung
   das Kanten-Padding der inneren Leisten mitrechnen, sonst begrenzt sie die BOX
   auf 1440 px und die Inhaltsfläche bleibt 1440 − 2×32 = 1376 px: der Inhalt
   stand 32 px weiter innen als der Seiteninhalt (nur oberhalb von 1440 px
   sichtbar, darunter greift das Padding ohnehin). Der Bezug ist dasselbe Token,
   das topbar-inner und bar-inner als Padding benutzen.
   Wächter: tests/js/styles/page-container-inset.test.js */
.bx-cnav__container {
  box-sizing: border-box;
  max-width: calc(var(--mp-container-xl) + 2 * var(--Nav-padding-inline, var(--mp-space-6)));
  width: 100%;
  margin: 0 auto;
}
/* Inhalts-Breite „Volle Breite" (Property containerWidth = 'full') — hebt die
   1440-px-Begrenzung aller Leisten-Container auf; die Hintergründe laufen
   ohnehin schon voll durch. „Standard" (Default) = keine Klasse. */
.bx-cnav.bx-navwidth--full .bx-cnav__container { max-width: none; }

/* Info-Leiste oben — schmaler dunkler Streifen, Kontaktinfos rechtsbündig */
.bx-cnav__topbar {
  background: var(--Nav-topbar-bg, var(--mp-dark-surface));
  color: var(--Nav-topbar-color, var(--mp-fg-inverse));
}
.bx-cnav__topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--Nav-topbar-gap, var(--mp-space-5));
  padding: var(--Nav-topbar-padding, var(--mp-space-2) var(--mp-space-6));
  font-size: var(--Nav-topbar-size, 13px);
}
.bx-cnav__topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity var(--mp-duration-fast);
}
/* Hover auf der dunklen Leiste klar sichtbar: volle Deckkraft + unterstrichener
   Text (nur der Text, nicht das Icon). color:inherit ist WICHTIG — sonst greift
   die globale Regel `a:not(.bx-btn):hover { color: var(--mp-primary-hover) }`
   (dunkles Blau) und macht den Text auf der dunklen Leiste unlesbar. */
a.bx-cnav__topbar-item:hover { opacity: 1; color: inherit; }
a.bx-cnav__topbar-item:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bx-cnav__topbar-item i[data-lucide],
.bx-cnav__topbar-item svg {
  width: var(--Nav-topbar-icon-size, 24px);
  height: var(--Nav-topbar-icon-size, 24px);
  color: var(--Nav-topbar-icon-color, var(--mp-white));
}
/* Info-Popover (Mobile): Tap auf ein Icon (nur-Icon-Darstellung) zeigt die
   Kontaktinfo dezent als schwebende Text-Karte unter dem Icon. Bewusst OHNE
   Lucide-Icon im Popover — in der Vorschau-Iframe konvertiert nur
   createIconsInIframe (läuft nicht bei komponenten-internen Re-Renders),
   ein Icon bliebe dort unsichtbar. */
.bx-cnav__info { position: relative; display: inline-flex; }
.bx-cnav__topbar-item.is-open { opacity: 1; }
.bx-cnav__info-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  display: block;
  max-width: min(78vw, 280px);
  padding: 9px 12px;
  background: var(--Nav-info-pop-bg, var(--mp-surface, #fff));
  color: var(--Nav-info-pop-color, var(--mp-fg));
  border: 1px solid var(--mp-border, #e3e3e8);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
}
.bx-cnav__info-pop-link { color: inherit; text-decoration: none; }
.bx-cnav__info-pop-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hauptleiste — 3 Spalten halten das Logo unabhängig von den Seitenbreiten
   exakt mittig: Burger links · Logo zentriert · Aktionen rechts. */
.bx-cnav__bar {
  background: var(--Nav-bg, var(--mp-white));
  border-bottom: 1px solid var(--Nav-border-color, var(--mp-border));
}
.bx-cnav__bar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--Nav-gap, var(--mp-space-5));
  padding: var(--Nav-padding-block, var(--mp-space-4)) var(--Nav-padding-inline, var(--mp-space-6));
}
.bx-cnav__lead { display: flex; justify-content: flex-start; }
.bx-cnav__trail { display: flex; justify-content: flex-end; }
.bx-cnav__brand { display: inline-flex; align-items: center; justify-self: center; }
.bx-cnav__brand img { height: var(--Nav-centered-logo-height, 72px); display: block; }

/* Der Burger fluchtet als BOX mit dem Inhalt, sein BILD nicht: die Klickfläche
   ist 40 px breit, die Striche 22 px und darin zentriert — das erste sichtbare
   Pixel steht also 9 px weiter innen als der Seiteninhalt darunter. Ausgeglichen
   wird die halbe Differenz, gerechnet aus denselben Variablen wie die Geometrie,
   damit eine geänderte Burger-Größe die Flucht nicht wieder verschiebt. Die
   Klickfläche bleibt 40 x 40 und bleibt mittig um das Symbol.
   min(): --Nav-padding-inline ist ein Theming-Slot und darf 0 sein — der
   Ausgleich wird nie größer als der vorhandene Rand, sonst ragt der Button
   aus dem Bild. Erst ab 769 px, darunter ist die Leiste eine andere Bauform
   (Flex, Logo neben dem Burger, schmalerer Rand).
   Wächter: tests/js/styles/page-container-inset.test.js */
@media (min-width: 769px) {
  .bx-cnav__lead .bx-burger {
    margin-left: calc(-1 * min(
      (var(--Nav-burger-size, 40px) - var(--Nav-burger-line-width, 22px)) / 2,
      var(--Nav-padding-inline, var(--mp-space-6))
    ));
  }
}

/* Warnleiste — heller Hinweisstreifen mit Icon, Link rechts und Schließen-X */
.bx-cnav__alert {
  background: var(--Nav-alert-bg, color-mix(in srgb, var(--mp-warning) 12%, var(--mp-white)));
  border-bottom: 1px solid var(--Nav-alert-border, color-mix(in srgb, var(--mp-warning) 32%, var(--mp-white)));
}
.bx-cnav__alert-inner {
  display: flex;
  align-items: center;
  gap: var(--Nav-alert-gap, var(--mp-space-3));
  padding: var(--Nav-alert-padding, var(--mp-space-3) var(--mp-space-6));
  font-size: var(--Nav-alert-size, 14px);
  color: var(--Nav-alert-color, var(--mp-fg));
}
.bx-cnav__alert-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--Nav-alert-icon-color, var(--mp-warning));
}
.bx-cnav__alert-msg { margin: 0; flex: 1; line-height: 1.45; }
.bx-cnav__alert-msg strong { font-weight: 700; color: var(--Nav-alert-strong-color, var(--mp-fg)); }
.bx-cnav__alert-link {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  color: var(--Nav-alert-link-color, var(--mp-primary));
  font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.bx-cnav__alert-link:hover { text-decoration: underline; }
.bx-cnav__alert-link i[data-lucide] { width: 14px; height: 14px; }
.bx-cnav__alert-close {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--mp-radius-pill);
  background: transparent; color: var(--Nav-alert-color, var(--mp-fg-muted));
  cursor: pointer;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-cnav__alert-close:hover { background: color-mix(in srgb, var(--mp-warning) 18%, transparent); color: var(--mp-fg); }
.bx-cnav__alert-close i[data-lucide] { width: 16px; height: 16px; }

/* Scrim + Off-Canvas-Drawer (von links). position:fixed greift im Builder-
   Iframe viewport-bezogen; in der Story-Demo hält `contain:paint` am Frame
   das Overlay in der Box (siehe stories/layouts.jsx). */
.bx-cnav__scrim {
  position: fixed; inset: 0;
  background: var(--Nav-scrim-bg, rgba(15, 23, 42, 0.45));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--mp-duration-base) var(--mp-ease-standard), visibility var(--mp-duration-base);
  z-index: 9000;
}
.bx-cnav__scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.bx-cnav__drawer {
  position: fixed; top: var(--Nav-drawer-top, 0); left: 0; bottom: 0;
  width: var(--Nav-drawer-width, 380px);
  max-width: 86vw;
  background: var(--Nav-drawer-bg, var(--mp-white));
  box-shadow: var(--Nav-drawer-shadow, var(--mp-shadow-lg));
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
  z-index: 9001;
  overflow-y: auto;
}
.bx-cnav__drawer.is-open { transform: translateX(0); }
.bx-cnav__drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--Nav-drawer-head-padding, var(--mp-space-4) var(--mp-space-5));
  background: var(--Nav-drawer-head-bg, var(--mp-primary));
  color: var(--Nav-drawer-head-color, var(--mp-fg-inverse));
  position: sticky; top: 0; z-index: 1;
}
.bx-cnav__drawer-title {
  font-weight: 800; font-size: 13px;
  letter-spacing: var(--mp-tracking-caps); text-transform: uppercase;
}
.bx-cnav__drawer-close {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--mp-radius-sm);
  background: rgba(255, 255, 255, 0.16); color: var(--Nav-drawer-close-color, inherit);
  cursor: pointer; transition: background var(--mp-duration-fast);
}
.bx-cnav__drawer-close:hover { background: rgba(255, 255, 255, 0.28); }
.bx-cnav__drawer-close i[data-lucide] { width: 18px; height: 18px; }
.bx-cnav__drawer-body { padding: var(--Nav-drawer-padding, var(--mp-space-3) var(--mp-space-2) var(--mp-space-5)); }

/* Flaches Drawer-Akkordeon — Hairline-Zeilen, Icon links, Chevron rechts
   (eigene Klassen statt .bx-acc, damit nur der Chevron rotiert). */
.bx-cnav__sections { display: flex; flex-direction: column; }
.bx-cnav__sec { border-bottom: 1px solid var(--Nav-drawer-divider, var(--mp-border)); }
.bx-cnav__sec-btn {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3);
  padding: var(--Nav-drawer-row-padding, var(--mp-space-4) var(--mp-space-3));
  font-size: var(--Nav-drawer-row-size, 15px);
  font-weight: 700;
  color: var(--Nav-drawer-row-color, var(--mp-fg));
  transition: color var(--mp-duration-fast);
}
.bx-cnav__sec-btn:hover { color: var(--Nav-drawer-row-hover, var(--mp-primary)); }
.bx-cnav__sec-btn.is-active { color: var(--Nav-drawer-row-hover, var(--mp-primary)); }
.bx-cnav__sec-label { display: inline-flex; align-items: center; gap: var(--mp-space-3); }
.bx-cnav__sec-label i[data-lucide] {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--Nav-drawer-icon-color, var(--mp-primary));
}
.bx-cnav__sec-chev {
  width: var(--Nav-drawer-chevron-size, 18px); height: var(--Nav-drawer-chevron-size, 18px); flex-shrink: 0;
  color: var(--mp-fg-subtle);
  transition: transform var(--mp-duration-base) var(--mp-ease-standard);
}
.bx-cnav__sec.is-open .bx-cnav__sec-chev { transform: rotate(180deg); }
.bx-cnav__sec-panel { max-height: 0; overflow: hidden; transition: max-height var(--mp-duration-slow) var(--mp-ease-standard); }
.bx-cnav__sec.is-open .bx-cnav__sec-panel { max-height: 360px; }
.bx-cnav__sublist {
  list-style: none; margin: 0;
  padding: 0 0 var(--mp-space-3) var(--Nav-drawer-sub-indent, calc(20px + var(--mp-space-3) * 2));
  display: flex; flex-direction: column;
}
.bx-cnav__sublist a {
  display: block; padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-sm);
  color: var(--Nav-drawer-sub-color, var(--mp-fg-muted));
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-cnav__sublist a:hover { background: color-mix(in srgb, var(--mp-primary) 10%, transparent); color: var(--mp-primary); }
.bx-cnav__sublist a.is-active { color: var(--mp-primary); font-weight: 700; }

/* Schnellzugriff-Block am Fuß des Drawers. Keine eigene obere Trennlinie —
   die letzte Menüpunkt-Sektion (.bx-cnav__sec) bringt bereits ihre border-bottom
   mit, eine zweite Linie hier wirkte doppelt. */
.bx-cnav__quick {
  margin-top: var(--mp-space-4);
  padding: var(--mp-space-4) var(--mp-space-3) 0;
}
.bx-cnav__quick-head {
  margin: 0 0 var(--mp-space-2);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mp-tracking-caps);
  color: var(--mp-fg-muted);
}
.bx-cnav__quick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bx-cnav__quick-link {
  display: flex; align-items: center; gap: var(--mp-space-3);
  padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-sm);
  color: var(--Nav-drawer-quick-color, var(--mp-fg));
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-cnav__quick-link:hover { background: var(--mp-bg-soft); color: var(--mp-primary); }
.bx-cnav__quick-link i[data-lucide] { width: 18px; height: 18px; color: var(--Nav-drawer-icon-color, var(--mp-primary)); }

/* Mobile — Info-Leiste nur Icons (Text zu lang), Warnleiste stapelt sauber.
   Der Text bleibt via aria-label/title erhalten (Screenreader + Tooltip); die
   Icons stehen als gut tappbare, einzeilige Reihe zentriert. */
@media (max-width: 768px) {
  .bx-cnav__topbar-inner { justify-content: flex-end; gap: var(--mp-space-4); }
  .bx-cnav__topbar-item { padding: 4px; }
  .bx-cnav__topbar-item span { display: none; }
  /* i[data-lucide] UND svg: Lucide ersetzt das <i> je nach Version durch ein
     <svg> — beide Fälle abdecken, damit die Icon-Größe sicher greift. */
  .bx-cnav__topbar-item i[data-lucide],
  .bx-cnav__topbar-item svg {
    width: var(--Nav-topbar-icon-size-mobile, 18px);
    height: var(--Nav-topbar-icon-size-mobile, 18px);
  }
  .bx-cnav__alert-inner { flex-wrap: wrap; }
  .bx-cnav__alert-msg { flex-basis: 100%; order: 2; }

  /* Hauptleiste auf Mobile: Logo LINKS neben den Burger, Aktionen ganz rechts.
     Flex statt des zentrierten `1fr auto 1fr`-Grids — dieses erzwang gleich breite
     Seitentracks (Logo mittig) und blähte die Gesamtbreite auf, sodass die
     Actionleiste über den Rand lief. Flex = Breite ≈ Burger + Logo + Aktionen,
     rechts bleibt Platz. Aktionen zusätzlich kompakt: Sprachauswahl nur Globus
     (Kürzel + Chevron aus), „Kontakt"-Button ausgeblendet (über das Burger-Menü
     erreichbar), Such-Icon bleibt. */
  .bx-cnav__bar-inner {
    display: flex;
    align-items: center;
    gap: var(--mp-space-3);
    padding-inline: var(--Nav-padding-inline-mobile, var(--mp-space-4));
  }
  .bx-cnav__brand { justify-self: auto; }
  .bx-cnav__brand img { height: var(--Nav-centered-logo-height-mobile, 62px); }
  .bx-cnav__trail { margin-left: auto; min-width: 0; }
  .bx-cnav__trail .bx-lang__code,
  .bx-cnav__trail .bx-lang [data-lucide="chevron-down"] { display: none; }
  .bx-cnav__trail .bx-lang { padding-inline: var(--mp-space-2); }
  .bx-cnav__trail .bx-btn { display: none; }
}

/* ---------- Breadcrumb / Path Navigation ---------- */

.bx-bc {
  font-family: var(--mp-font-sans);
  font-size: var(--Bc-font-size, 14px);
  line-height: 1.4;
  /* DIESELBE Container-Rezeptur wie .bx-section__inner: die 1440 px sind die
     INHALTSFLÄCHE, das Kanten-Padding liegt außen (content-box). Nur so steht
     der Pfad auf derselben linken Kante wie der Seiteninhalt.
     Vorher: border-box + --mp-space-4 — beides zusammen ergab 16 px Versatz.
     Achtung, das ist kein Entweder-oder: mit border-box würde das Padding die
     Inhaltsbreite von innen wegfressen, mit --mp-space-4 fehlt die Hälfte des
     Abstands. Wächter: tests/js/styles/page-container-inset.test.js */
  max-width: var(--mp-container-xl);
  margin-left: auto;
  margin-right: auto;
  /* Senkrecht auf dem Abstands-Raster (12 px); die 5 px davor wirkten
     gedrängt. Waagerecht bleibt das Kanten-Padding der Section. */
  padding: var(--Bc-pad-y, var(--mp-space-3)) var(--mp-space-6);
  /* Standard transparent; über den Theming-Architekten (Slot „Hintergrund",
     --Bc-bg) auf ein Token umstellbar. */
  background: var(--Bc-bg, transparent);
}
.bx-bc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.bx-bc__crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--Bc-color, var(--mp-fg-muted));
}
.bx-bc__crumb a {
  color: var(--Bc-color, var(--mp-fg-muted));
  text-decoration: none;
  padding: 4px 0;
  border-radius: var(--mp-radius-sm);
  transition: color var(--mp-duration-fast);
}
.bx-bc__crumb a:hover { color: var(--Bc-color-hover, var(--mp-primary)); }
.bx-bc__crumb.is-current { color: var(--Bc-color-current, var(--mp-fg)); font-weight: 700; }
.bx-bc__sep {
  display: inline-flex;
  align-items: center;
  color: var(--Bc-sep-color, var(--mp-fg-subtle));
  padding: 0 2px;
}
.bx-bc__sep i[data-lucide] { width: 14px; height: 14px; }

/* Pill variant — shadcn-style rounded backgrounds, slash separators */
.bx-bc--pill .bx-bc__pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--Bc-pill-radius, var(--mp-radius-pill));
  color: var(--Bc-color, var(--mp-fg-muted));
  text-decoration: none;
  transition: background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-bc--pill a.bx-bc__pill:hover {
  background: var(--Bc-pill-hover-bg, var(--mp-bg-soft));
  color: var(--Bc-color-hover, var(--mp-primary));
}
.bx-bc--pill .bx-bc__crumb.is-current .bx-bc__pill {
  background: var(--Bc-pill-active-bg, color-mix(in srgb, var(--mp-primary) 10%, transparent));
  color: var(--Bc-pill-active-color, var(--mp-primary));
  font-weight: 700;
}
.bx-bc--pill .bx-bc__sep {
  font-family: var(--Bc-pill-sep-font-family, var(--mp-font-mono));
  font-weight: 400;
  color: var(--Bc-sep-color, var(--mp-fg-subtle));
  padding: 0 4px;
}

/* Icons variant — Lucide glyph + label, chevron separator */
.bx-bc--icons .bx-bc__crumb a,
.bx-bc--icons .bx-bc__crumb > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bx-bc--icons .bx-bc__crumb i[data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--mp-fg-subtle);
  flex-shrink: 0;
}
.bx-bc--icons .bx-bc__crumb a:hover i[data-lucide] { color: var(--mp-primary); }
.bx-bc--icons .bx-bc__crumb.is-current i[data-lucide] { color: var(--mp-primary); }

/* Mobil-Kürzung: „Startseite / … / Aktuelle Seite". Die Ellipse ist IMMER im
   DOM (Desktop blendet sie aus); gekürzt wird nur unter 768 px und ab DREI
   Ebenen — ≥4 li inkl. Ellipse (mind. eine mittlere Ebene wandert hinter „…";
   bei zwei Ebenen gäbe es keine mittlere und die Ellipse bliebe leer).
   is-expanded (Tap auf „…") zeigt wieder alle Ebenen. In der Pill-Variante
   trägt der „…"-Button zusätzlich bx-bc__pill und erbt den Pill-Look (deren
   Padding/Hover gewinnen per Spezifität über bx-bc__ell-btn). */
.bx-bc__ell {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--Bc-color, var(--mp-fg-muted));
}
.bx-bc__ell-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 4px 6px;
  border-radius: var(--mp-radius-sm);
  line-height: 1;
  transition: color var(--mp-duration-fast);
}
.bx-bc__ell-btn:hover { color: var(--Bc-color-hover, var(--mp-primary)); }
@media (max-width: 768px) {
  .bx-bc:not(.is-expanded) .bx-bc__list:has(> li:nth-child(4)) .bx-bc__crumb:not(:first-child):not(:last-child) { display: none; }
  .bx-bc:not(.is-expanded) .bx-bc__list:has(> li:nth-child(4)) .bx-bc__ell { display: inline-flex; }
}

/* ---------- Section wrapper ---------- */

.bx-section {
  width: 100%;
  position: relative;
}
/* Hintergrundfarbe — pro Section-Instanz im Vorschau-Builder gewählt.
   Ein Hintergrundbild wird stattdessen inline gesetzt (SectionShell). */
.bx-section--white { background: var(--mp-white); }
.bx-section--soft { background: var(--mp-bg-soft); }
.bx-section--dark { background: var(--mp-dark-surface); }
.bx-section--primary { background: var(--mp-primary); }

/* Text-Flip auf dunklem Grund — gilt für „Dunkel"-Hintergrund UND für
   Sections mit Hintergrundbild (Overlay). Wird vom SectionShell als
   bx-section--on-dark gesetzt. */
.bx-section--on-dark {
  color: var(--mp-fg-inverse);
  /* Flächen-Rollen umbiegen: Inhalt, der --mp-surface-* liest (z. B. Text|Media
     „Text only"), wird auf dunklem/primärem/bildbasiertem Grund automatisch
     lesbar — auch wenn die Farbe per Inline-Style gesetzt ist. */
  --mp-surface-fg: var(--mp-fg-inverse);
  --mp-surface-fg-muted: rgba(255, 255, 255, 0.85);
  --mp-surface-accent: var(--mp-cyan);
}
.bx-section--on-dark h2, .bx-section--on-dark h3 { color: var(--mp-fg-inverse); }
.bx-section--on-dark p { color: rgba(255,255,255,0.85); }
/* Card ist self-contained (eigene helle Fläche). Der on-dark-Text-Flip der
   Section darf NICHT in die Karte lecken — sonst weißer Text auf weißer Karte.
   Höhere Spezifität (.bx-card__* = 2 Klassen) holt die Karten-eigenen Farben
   zurück, sodass die Card auf „Primary"/„Dark"-Sections dunkel/lesbar bleibt. */
.bx-section--on-dark .bx-card__title { color: var(--Card-title-color, var(--mp-fg)); }
.bx-section--on-dark .bx-card__text  { color: var(--Card-text-color, var(--mp-fg-muted)); }
.bx-section__inner {
  max-width: var(--mp-container-xl);
  margin: 0 auto;
  padding: var(--mp-space-9) var(--mp-space-6);
  position: relative;
  z-index: 1;
}
.bx-section--lg .bx-section__inner { padding-top: var(--mp-space-10); padding-bottom: var(--mp-space-10); }
.bx-section--sm .bx-section__inner { padding-top: var(--mp-space-7);  padding-bottom: var(--mp-space-7); }

/* containerWidth = 'full' — Inhalt nutzt die gesamte Viewport-Breite.
   Horizontales Padding fällt weg, vertikales bleibt für Section-Rhythmus.
   Pro Section-Instanz im Vorschau-Builder umschaltbar. */
.bx-section__inner--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* verticalPadding = 'none' — entfernt den vertikalen Innenabstand,
   damit nachfolgende Sections nahtlos anschließen können. Horizontal-
   Padding bleibt von containerWidth gesteuert. */
.bx-section__inner--no-pad-y {
  padding-top: 0;
  padding-bottom: 0;
}

/* Optional decorative graphics, set per Section-Instanz im Vorschau-Builder.
   Render full-width (edge of section) — pure design accents, no content
   inside. Image scales to viewport width; height follows its aspect ratio. */
.bx-section__decor {
  display: block;
  width: 100%;
  pointer-events: none;
}
.bx-section__decor img {
  display: block;
  width: 100%;
  height: auto;
}
/* „Überlappend" (Instanz-Property graphicOverlap = 'on'): Decor-Grafik mittig
   auf die Section-Kante legen statt im Fluss. .bx-section ist bereits
   position:relative (Bezugsrahmen). Alles spielt im Root-Stacking-Context
   (.bx-section / .cp-pz-inst bilden keinen eigenen). Ebenen (hinten → vorne):
     Nachbar-Hintergrund/-Inhalt (z-index auto bzw. 1)
       < Decor-Grafik (5)                → ragt sichtbar über die NACHBARN
         < eigener .bx-section__inner (6) → eigener Slot-Inhalt bleibt oben drauf
   Die Grafik überlappt also nur die Nachbarn, NICHT den eigenen Inhalt. Bleibt
   sicher unter der Sticky-Nav (z-index 9000). Nichts clippt (kein
   overflow:hidden), daher ragt die Grafik sichtbar in die Nachbar-Bereiche.
   Annahme: kein Nachbar-Root bildet einen eigenen Stacking-Context mit
   z-index >= 5 (nur die Sticky-Nav tut das mit 9000 — Grafik bewusst darunter). */
.bx-section__decor--overlap {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
}
.bx-section__decor--overlap.bx-section__decor--top {
  top: 0;
  transform: translateY(-50%);
}
.bx-section__decor--overlap.bx-section__decor--bottom {
  bottom: 0;
  transform: translateY(50%);
}
/* Eigener Slot-Inhalt über der Grafik: .bx-section__inner (sonst z-index 1) wird
   über die Decor-Ebene (5) gehoben — aber nur, wenn diese Section eine aktive
   Overlap-Grafik hat. Gilt für alle Varianten (Inner ist immer direktes Kind,
   auch bei Split/Sidebar). Ohne gesetzte Grafik existiert kein Decor-Kind → das
   :has() greift nicht → Inner bleibt bei z-index 1 (unverändert). */
.bx-section:has(> .bx-section__decor--overlap) > .bx-section__inner {
  z-index: 6;
}
.bx-section__inner--narrow {
  max-width: var(--mp-container-md);
}

/* Zwei-Spalten-/Sidebar-Section — zwei Content-Slots nebeneinander im Inner-
   Container. Das Verhältnis liefert die Variante (bx-section__split--<ratio>);
   minmax(0,…) verhindert, dass breite Inhalte die Spalten überlaufen lassen.
   align-items:start, damit die schmale Spalte nicht auf Hauptbereich-Höhe
   gestreckt wird. Stapelt auf schmalen Viewports zu einer Spalte. */
.bx-section__inner--split {
  display: grid;
  gap: var(--mp-space-7);
  align-items: start;
}
.bx-section__split--75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.bx-section__split--25-75 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.bx-section__split--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-section__col { min-width: 0; }

/* Sidebar-Akkordeon (mobil) — Desktop = Passthrough: Panel-Kopf aus, Body offen,
   also exakt die bisherige volle Anzeige. Der Collapse lebt nur in der Mobil-
   Media-Query unten. */
.cp-sb-panel__head { display: none; }
.cp-sb-panel__body { display: block; }

@media (max-width: 900px) {
  .bx-section__inner--split { grid-template-columns: minmax(0, 1fr); }
  /* Stapel-Reihenfolge der Sidebar (sidebarStackOrder). order wirkt nur im
     gestapelten (einspaltigen) Zustand — am Desktop bleibt die DOM-Reihenfolge. */
  .bx-section__inner--split.is-stack-sidebar-first .bx-section__col--sidebar { order: -1; }
  .bx-section__inner--split.is-stack-sidebar-last .bx-section__col--sidebar { order: 1; }

  /* Akkordeon-Modus aktiv → die Panels rücken als Gruppe zusammen: der volle
     Block-Rhythmus (--cp-stack-gap, Default 48 px) ist für eingeklappte Zeilen
     viel zu luftig. Überschrieben wird die VARIABLE auf dem Stack-Container
     (Builder .cp-pz-wrap--nested · Viewer .cp-stack) — so bleiben auch die
     Drop-Marker des Builders in der Lücken-Mitte (ihre Geometrie rechnet mit
     derselben Variable). */
  .bx-section__col--sb-collapse .cp-pz-wrap--nested,
  .bx-section__col--sb-collapse .cp-stack {
    --cp-stack-gap: var(--Sidebar-acc-gap, var(--mp-space-2));
  }

  /* Sidebar-Element mit eingeblendeter Überschrift → einklappbares Panel.
     Flächen statt Linien (Hairlines wirkten neben den Rahmen der Inhalte
     unruhig): Kopf auf Primary mit passender Textfarbe, Body dezent getönt
     (Soft Surface mit 30 % Deckkraft), kein Rahmen, keine Trennlinie. */
  .cp-sb-panel {
    border-radius: var(--Sidebar-acc-radius, var(--mp-radius-md));
    overflow: hidden;
    background: var(--Sidebar-acc-bg, color-mix(in srgb, var(--mp-bg-soft) 30%, transparent));
  }
  .cp-sb-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3);
    width: 100%; padding: var(--mp-space-3) var(--mp-space-4);
    background: var(--Sidebar-acc-head-bg, var(--mp-primary));
    border: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--Sidebar-acc-head-color, var(--mp-primary-fg));
    text-align: left; line-height: var(--mp-lh-snug);
    transition: background var(--mp-duration-fast);
  }
  .cp-sb-panel__head:hover {
    background: var(--Sidebar-acc-head-hover-bg, color-mix(in srgb, var(--Sidebar-acc-head-bg, var(--mp-primary)) 88%, #000));
  }
  .cp-sb-panel__title { min-width: 0; }
  .cp-sb-panel__chev { width: 18px; height: 18px; flex: none; color: inherit; opacity: 0.85; transition: transform 0.2s ease; }
  .cp-sb-panel.is-open .cp-sb-panel__chev { transform: rotate(180deg); }
  .cp-sb-panel__body { display: none; padding: var(--mp-space-4); }
  .cp-sb-panel.is-open .cp-sb-panel__body { display: block; }
  /* Titel steht im Panel-Kopf → element-eigene Überschrift im Body ausblenden
     (deckt die geteilte Sektions-Überschrift und den Download-Header ab). */
  .cp-sb-panel__body .bx-sec-head,
  .cp-sb-panel__body .bx-dl__header { display: none; }
}
.bx-section__head {
  max-width: 760px;
  margin: 0 0 var(--mp-space-7);
}
.bx-section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  font-size: 12px;
  font-weight: var(--mp-eyebrow-font-weight, 700);
  letter-spacing: var(--mp-tracking-caps);
  text-transform: uppercase;
  /* Flächen-Rolle statt fester Farbe: --mp-surface-accent löst auf --mp-primary
     auf und wird von .bx-section--on-dark auf --mp-cyan (secondary) umgebogen.
     Damit gilt „primary auf hell, secondary auf dunkel" für BEIDE Atom-
     Varianten über EINE Mechanik — die Schwester-Regel .mp-eyebrow
     („Schlicht", in design-system/colors_and_type.css) liest dasselbe.
     Vorher stand hier --mp-primary und die dunkle Fläche brauchte eine eigene
     Regel, die es nur für diese Variante gab; „Schlicht" blieb dadurch auf
     dunklem Grund bei primary (Kontrast 2,21:1, unter WCAG AA).
     Wächter: tests/js/styles/eyebrow-color-single-source.test.js */
  color: var(--mp-surface-accent);
  margin-bottom: var(--mp-space-4);
}
.bx-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* TextLink-Atom (Atoms.TextLink) — textueller Aktions-Link, bewusst kein
   Button. Nur Basis-Layout + Primärfarbe; Komponenten hängen ihre Modifier-
   Klasse an und überschreiben Farbe/Größe über ihre Theme-Variablen (die
   später definierten Regeln gewinnen). */
.bx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  text-decoration: none;
  color: var(--mp-primary);
}
.bx-link i[data-lucide],
.bx-link svg { width: 16px; height: 16px; }

.bx-h2 {
  font-family: var(--mp-font-sans);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--mp-h2-font-weight, 900);
  margin: 0 0 var(--mp-space-4);
  color: var(--mp-fg);
}
.bx-h3 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: var(--mp-h3-font-weight, 900);
  letter-spacing: -0.01em;
  margin: 0 0 var(--mp-space-3);
  color: var(--mp-fg);
}
.bx-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--mp-fg-muted);
  font-weight: var(--mp-lead-font-weight, 300);
  margin: 0;
}

/* ---------- Hero ---------- */

.bx-hero { padding: var(--Hero-padding-block, var(--mp-space-9)) var(--Hero-padding-inline, var(--mp-space-6)); }
.bx-hero--split {
  display: grid;
  grid-template-columns: var(--Hero-split-columns, 1.05fr 1fr);
  gap: var(--Hero-split-gap, var(--mp-space-8));
  align-items: center;
}
.bx-hero__title {
  font-family: var(--Hero-headline-font-family, var(--mp-font-display));
  font-size: var(--Hero-title-size, var(--Hero-headline-size, clamp(48px, 6.5vw, 96px)));
  line-height: var(--Hero-headline-line-height, 0.95);
  letter-spacing: var(--Hero-headline-letter-spacing, var(--mp-tracking-display));
  text-transform: uppercase;
  margin: 0 0 var(--mp-space-5);
  font-weight: var(--Hero-headline-font-weight, 900);
  color: var(--Hero-title-color, var(--Hero-headline-color, var(--mp-fg)));
  text-wrap: balance;
}
.bx-hero__lead {
  font-size: var(--Hero-text-size, 19px);
  line-height: var(--Hero-text-line-height, 1.55);
  font-weight: var(--Hero-text-font-weight, 300);
  color: var(--Hero-lead-color, var(--Hero-text-color, var(--mp-fg-muted)));
  max-width: 56ch;
  margin: 0 0 var(--mp-space-6);
}
.bx-hero__ctas { display: flex; gap: var(--mp-space-3); flex-wrap: wrap; }
.bx-hero__visual {
  position: relative;
  aspect-ratio: var(--Hero-media-ratio, 4 / 5);
  background: var(--Hero-media-bg, var(--mp-ink-100));
  border-radius: var(--Hero-media-radius, var(--mp-radius-md));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobile: Split-Hero stapelt (Text über Visual) statt 2-spaltig zu bleiben.
   Außerdem den Hero insgesamt flacher machen — das Basis-Padding (space-9 = 96px)
   ist auf schmalen Screens zu üppig; die Bild-Heroes (Suche/Full-Bleed) haben
   zudem eine fixe min-height von 540px, die auf dem Handy zu hoch wirkt. */
@media (max-width: 768px) {
  .bx-hero { padding-block: var(--Hero-padding-block-mobile, var(--mp-space-7)); }
  .bx-hero--split { grid-template-columns: 1fr; }
  .bx-hero--split .bx-hero__visual { aspect-ratio: var(--Hero-split-media-ratio-mobile, 16 / 10); }
}

.bx-hero--centered {
  text-align: center;
  max-width: var(--Hero-centered-max-width, 1100px);
  margin: 0 auto;
}
.bx-hero--centered .bx-hero__ctas { justify-content: center; }
.bx-hero--centered .bx-hero__lead { margin-left: auto; margin-right: auto; }
.bx-hero--centered .bx-hero__visual {
  margin-top: var(--mp-space-7);
  aspect-ratio: var(--Hero-centered-media-ratio, 16 / 7);
  max-width: var(--Hero-centered-max-width, 1100px);
}

.bx-hero--type {
  padding: var(--Hero-type-padding-block, var(--mp-space-10)) var(--Hero-padding-inline, var(--mp-space-6));
}
.bx-hero--type .bx-hero__title {
  font-size: var(--Hero-type-headline-size, clamp(72px, 12vw, 200px));
  line-height: var(--Hero-type-headline-line-height, 0.85);
}
.bx-hero--type .bx-hero__lead {
  font-size: var(--Hero-type-text-size, 22px);
  max-width: 70ch;
}

.bx-hero--marquee { overflow: hidden; }
.bx-hero__marquee {
  position: relative;
  overflow: hidden;
  padding: var(--mp-space-4) 0;
  border-top: 1px solid var(--mp-border);
  border-bottom: 1px solid var(--mp-border);
  margin-top: var(--mp-space-7);
}
.bx-hero__marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: bx-marquee 22s linear infinite;
}
.bx-hero__marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-4);
  padding: 0 var(--mp-space-5);
  white-space: nowrap;
  font-family: var(--Hero-headline-font-family, var(--mp-font-display));
  font-size: var(--Hero-marquee-item-size, clamp(28px, 4vw, 52px));
  font-weight: 900;
  letter-spacing: var(--Hero-headline-letter-spacing, var(--mp-tracking-display));
  text-transform: uppercase;
  color: var(--Hero-marquee-item-color, var(--mp-fg));
}
.bx-hero__marquee-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--Hero-marquee-dot-color, var(--mp-primary));
  flex-shrink: 0;
}
@keyframes bx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Reduced Motion: Marquee steht still. animation:none lässt den Track auf
   translateX(0) — die erste Hälfte der (duplizierten) Item-Liste bleibt
   sichtbar und lesbar, der Rest wird wie bisher vom Container geclippt. */
@media (prefers-reduced-motion: reduce) {
  .bx-hero__marquee-track { animation: none; }
}

.bx-hero--full {
  position: relative;
  min-height: var(--Hero-fullbleed-min-height, 540px);
  display: flex;
  align-items: flex-end;
  padding: var(--Hero-fullbleed-padding-block, var(--mp-space-9)) var(--Hero-padding-inline, var(--mp-space-7));
  color: var(--mp-fg-inverse);
  background-image:
    linear-gradient(180deg, rgba(10,21,48,0.15) 0%, var(--Hero-fullbleed-overlay-color, rgba(10,21,48,0.65)) 60%, rgba(10,21,48,0.85) 100%),
    url("https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1600&q=70");
  background-size: cover;
  background-position: center;
}
.bx-hero--full .bx-hero__title { color: var(--Hero-fullbleed-headline-color, var(--mp-fg-inverse)); }
.bx-hero--full .bx-hero__lead { color: var(--Hero-fullbleed-text-color, rgba(255,255,255,0.85)); }
.bx-hero--full .bx-eyebrow { color: var(--Hero-fullbleed-eyebrow-color, var(--mp-cyan)); }

/* Hero · „Suche · Bild-Hintergrund" (hero/search)
   Full-Bleed-Bild + dunkler Verlauf für Lesbarkeit. Der Inhalt läuft NICHT
   bis zum Bildrand: ein innerer Wrapper begrenzt ihn — wie unsere Sections —
   auf --mp-container-xl (1440 px) und zentriert ihn; das Bild bleibt voll.
   Inhalt linksbündig am unteren Rand. Welche Bausteine erscheinen, steuert
   die Eigenschaft `blocks` (Headline · Text · Suche). */
.bx-hero--search {
  position: relative;
  min-height: var(--Hero-search-min-height, 540px);
  display: flex;
  align-items: var(--Hero-search-align, flex-end);
  /* Kein Inline-Padding auf der Section — das übernimmt der innere Wrapper,
     damit der Bild-Hintergrund full-bleed läuft. */
  padding: var(--Hero-search-padding-block, var(--mp-space-9)) 0;
  color: var(--mp-fg-inverse);
  /* Overlay-Deckkraft steuerbar über --Hero-search-overlay-opacity (Default
     0.7). Stops skalieren relativ dazu (Faktoren aus 0.20/0.70/0.88) — Default
     reproduziert den Ist-Verlauf. Spiegelbild von HERO_SEARCH_GRADIENT (hero.jsx). */
  background-image:
    linear-gradient(180deg, rgba(10,21,48, calc(var(--Hero-search-overlay-opacity, 0.7) * 0.286)) 0%, rgba(10,21,48, var(--Hero-search-overlay-opacity, 0.7)) 70%, rgba(10,21,48, calc(var(--Hero-search-overlay-opacity, 0.7) * 1.257)) 100%),
    var(--Hero-search-image, url("https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1600&q=70"));
  background-size: cover;
  background-position: var(--Hero-search-image-position, center);
}
.bx-hero--search .bx-hero__inner {
  width: 100%;
  max-width: var(--mp-container-xl);
  margin: 0 auto;
  /* Kanten-Padding wie alle Flächen auf der Inhaltsbreite (vorher
     --mp-space-7 = 48 px). Oberhalb von 1440 px fiel das nicht auf, weil
     content-box die Inhaltsfläche begrenzt; darunter schrumpft der Wrapper als
     Flex-Item und der Text stand 16 px weiter innen als der Seiteninhalt.
     Wächter: tests/js/styles/page-container-inset.test.js */
  padding-inline: var(--Hero-padding-inline, var(--mp-space-6));
}
.bx-hero__search-content { max-width: var(--Hero-search-content-width, 620px); }
/* Inhalts-Stack-Layout (Instanz-Properties contentPosition/contentWidth/
   textAlign, siehe hero.jsx heroSearchLayoutClass). Defaults ohne Klasse =
   links unten · kompakt · linksbündig (Ist-Stand). Vertikal über das bereits
   vorhandene --Hero-search-align-Token (Klasse sitzt am selben Element und
   kommt in der Datei nach der Basis-Regel → gewinnt), horizontal über
   margin-auto am Content-Stack. */
.bx-hsearch--v-top    { --Hero-search-align: flex-start; }
.bx-hsearch--v-center { --Hero-search-align: center; }
.bx-hsearch--h-center .bx-hero__search-content { margin-inline: auto; }
.bx-hsearch--h-right  .bx-hero__search-content { margin-left: auto; }
.bx-hsearch--w-full   .bx-hero__search-content { max-width: none; }
.bx-hsearch--t-center .bx-hero__search-content { text-align: center; }
.bx-hsearch--t-right  .bx-hero__search-content { text-align: right; }
.bx-hero--search .bx-hero__title {
  text-transform: var(--Hero-search-headline-transform, none);
  font-size: var(--Hero-title-size, var(--Hero-search-headline-size, clamp(36px, 4.5vw, 64px)));
  line-height: var(--Hero-search-headline-line-height, 1.05);
  color: var(--Hero-search-headline-color, var(--mp-fg-inverse));
  margin-bottom: var(--mp-space-4);
}
.bx-hero--search .bx-hero__lead {
  color: var(--Hero-search-text-color, rgba(255,255,255,0.85));
  margin-bottom: var(--mp-space-6);
}

/* Mobile: die Bild-Heroes (Suche + Full-Bleed) sind mit fixer min-height 540px
   und space-9-Padding auf dem Handy zu hoch. Flacher machen. WICHTIG: dieser
   Block MUSS hinter den Basis-Definitionen von .bx-hero--search / .bx-hero--full
   stehen — bei gleicher Spezifität gewinnt sonst die (später notierte) Basis-
   Regel und die Reduktion griffe nicht. */
@media (max-width: 768px) {
  .bx-hero--search {
    min-height: var(--Hero-search-min-height-mobile, 420px);
    padding-block: var(--Hero-search-padding-block-mobile, var(--mp-space-7));
  }
  /* Schmalere seitliche Abstände auf Mobile — mehr Breite für Headline/Text
     und die Suchleiste (statt der üppigen space-7-Ränder). */
  .bx-hero--search .bx-hero__inner { padding-inline: var(--Hero-search-padding-inline-mobile, var(--mp-space-5)); }
  .bx-hero--full {
    min-height: var(--Hero-fullbleed-min-height-mobile, 420px);
    padding-block: var(--Hero-fullbleed-padding-block-mobile, var(--mp-space-7));
  }
}

/* ---------- Grid ---------- */

.bx-grid {
  display: grid;
  gap: var(--mp-space-5);
}
/* minmax(0, 1fr) statt 1fr: erzwingt gleich breite Spalten und erlaubt
   schmaleren Inhalten als ihrer min-content (Text bricht um) — sonst können
   text-lastige Cards die Spalten überlaufen lassen. */
.bx-grid--1 { grid-template-columns: minmax(0, 1fr); }
.bx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mp-space-4); }
.bx-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mp-space-4); }
.bx-grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--mp-space-3); }

/* Responsive: Spaltenzahl auf schmaleren Viewports reduzieren. minmax(0,1fr)
   verhindert zwar den Grid-Blowout, aber nicht-umbrechende Inhalte (Buttons mit
   white-space:nowrap) brauchen ausreichend breite Zellen — sonst läuft das Grid
   horizontal über. Gilt für Card, Testimonial, Team Member (alle via .bx-grid--N). */
@media (max-width: 900px) {
  .bx-grid--3, .bx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-grid--5, .bx-grid--6, .bx-grid--8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bx-grid--2, .bx-grid--3, .bx-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .bx-grid--5, .bx-grid--6, .bx-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bx-tile {
  background: var(--mp-bg-soft);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-2);
  min-height: 120px;
  transition: box-shadow var(--mp-duration-base), transform var(--mp-duration-base);
}
.bx-tile:hover { box-shadow: var(--mp-shadow-md); transform: translateY(-2px); }
.bx-tile__num {
  font-family: var(--mp-font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--mp-primary);
}
.bx-tile__title { font-size: 16px; font-weight: 700; color: var(--mp-fg); margin: 0; line-height: 1.2; }
.bx-tile__desc { font-size: 13px; line-height: 1.5; color: var(--mp-fg-muted); margin: 0; }

.bx-tile--compact { min-height: 80px; padding: var(--mp-space-4); }
.bx-tile--compact .bx-tile__num { font-size: 20px; }
.bx-tile--compact .bx-tile__title { font-size: 13px; }

.bx-tile--tiny { min-height: 60px; padding: var(--mp-space-3); }
.bx-tile--tiny .bx-tile__num { font-size: 16px; }
.bx-tile--tiny .bx-tile__title { font-size: 11px; }

/* ---------- Card (Content) ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --Card-bg                  Surface color                       [var(--mp-bg)]
  --Card-border-color        Border color                        [var(--mp-border)]
  --Card-border-width        Border width                        [1px]
  --Card-radius              Corner radius                       [var(--mp-radius-md)]
  --Card-padding             Inner padding                       [var(--mp-space-6)]
  --Card-gap                 Gap between inner elements          [var(--mp-space-3)]
  --Card-shadow              Resting box-shadow                  [var(--mp-shadow-xs)]
  --Card-shadow-hover        Box-shadow on hover                 [var(--mp-shadow-md)]
  --Card-hover-lift          translateY on hover                 [-2px]
  --Card-title-size          Title font-size                     [var(--mp-fs-lg)]
  --Card-title-color         Title color                         [var(--mp-fg)]
  --Card-title-weight        Title font-weight                   [700]
  --Card-text-size           Body-text font-size                 [var(--mp-fs-base)]
  --Card-text-color          Body-text color                     [var(--mp-fg-muted)]
  --Card-text-line-height    Body-text line-height               [var(--mp-lh-relaxed)]
  --Card-icon-size           Icon bubble diameter                [56px]
  --Card-icon-bg             Icon bubble background              [var(--mp-primary)]
  --Card-icon-color          Icon bubble foreground              [var(--mp-primary-fg)]
  --Card-icon-glyph-size     Lucide icon size inside bubble      [26px]
  --Card-cta-color           CTA accent (ghost text / primary bg)[var(--mp-primary)]
*/

.bx-card {
  /* In sich geschlossene HELLE Fläche: die Flächen-Rollen der umgebenden Section
     dürfen nicht hereinlecken, sonst färbte ein Eyebrow auf einer dunklen
     Section secondary — auf weißer Karte. Gleiche Zeile wie bei den anderen
     geschlossenen Flächen (.bx-ti--overlap, .bx-news__feature, .bx-events__row).
     Ersetzt die frühere eyebrow-spezifische Gegenregel, die nur die Variante
     „Mit Linie" traf und „Schlicht" ungeschützt ließ. */
  --mp-surface-accent: var(--mp-primary);
  background: var(--Card-bg, var(--mp-bg));
  border: var(--Card-border-width, 1px) solid var(--Card-border-color, var(--mp-border));
  border-radius: var(--Card-radius, var(--mp-radius-md));
  padding: var(--Card-padding, var(--mp-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--Card-gap, var(--mp-space-3));
  /* Kein `height: 100%`: Im Grid sorgt `align-items: stretch` für gleiche
     Höhen, ohne dass die Karte (besonders mit `margin-top` der Icon-Variante)
     über ihre Grid-Zeile hinausläuft — sonst schnitte die Builder-Auswahl ab
     und der `margin-top: auto`-CTA bekäme einen zu großen Abstand. */
  box-shadow: var(--Card-shadow, var(--mp-shadow-xs));
  transition: box-shadow var(--mp-duration-base), transform var(--mp-duration-base);
}
.bx-card:hover {
  box-shadow: var(--Card-shadow-hover, var(--mp-shadow-md));
  transform: translateY(var(--Card-hover-lift, -2px));
}
.bx-card__eyebrow { margin-bottom: var(--mp-space-1); }
.bx-card__title {
  font-size: var(--Card-title-size, var(--mp-fs-lg));
  font-weight: var(--Card-title-weight, 700);
  color: var(--Card-title-color, var(--mp-fg));
  margin: 0;
  line-height: var(--mp-lh-snug);
}
.bx-card__text {
  font-size: var(--Card-text-size, var(--mp-fs-base));
  line-height: var(--Card-text-line-height, var(--mp-lh-relaxed));
  color: var(--Card-text-color, var(--mp-fg-muted));
  margin: 0;
}
.bx-card__cta { margin-top: auto; align-self: flex-start; }
/* CTA-Akzentfarbe als schmaler Card-Alias (Theming-Split-Inspektor). Greift
   nur am Card-CTA — das globale Button-System bleibt unberührt. Ghost-CTA
   (Standard/Mit Icon): Textfarbe; Primary-CTA (Mit Eyebrow): Hintergrund.
   Default = --mp-primary, also identisch zum bisherigen Look. */
.bx-card__cta.bx-btn--ghost { color: var(--Card-cta-color, var(--mp-primary)); }
.bx-card__cta.bx-btn--primary { background: var(--Card-cta-color, var(--mp-primary)); }

/* Icon-Variante: Icon mittig, ragt über die Oberkante hinaus */
.bx-card--icon {
  align-items: center;
  text-align: center;
  margin-top: calc(var(--Card-icon-size, 56px) / 2);
}
.bx-card--icon .bx-card__icon {
  width: var(--Card-icon-size, 56px);
  height: var(--Card-icon-size, 56px);
  display: grid;
  place-items: center;
  border-radius: var(--mp-radius-pill);
  background: var(--Card-icon-bg, var(--mp-primary));
  color: var(--Card-icon-color, var(--mp-primary-fg));
  box-shadow: var(--mp-shadow-md);
  margin-top: calc(var(--Card-icon-size, 56px) * -1); /* halb über die Card-Oberkante */
  margin-bottom: var(--mp-space-1);
}
.bx-card--icon .bx-card__icon i { width: var(--Card-icon-glyph-size, 26px); height: var(--Card-icon-glyph-size, 26px); }
.bx-card--icon .bx-card__cta { align-self: center; }

/* Eyebrow-Variante mit kräftigerem Rahmen */
.bx-card--bordered { --Card-border-color: var(--mp-border-strong); }

/* ---------- Footer (Layout) ---------- */

.bx-footer {
  background: var(--Footer-bg, var(--mp-bg-inverse));
  color: var(--Footer-color, var(--mp-fg-inverse));
  /* Bezugsrahmen für die absolut positionierte Schmuckgrafik (rechts unten);
     overflow blendet die über den Footer-Rand hinausragenden Teile aus. */
  position: relative;
  overflow: hidden;
}
.bx-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--Footer-padding-block, var(--mp-space-9)) var(--Footer-padding-inline, var(--mp-space-7)) var(--mp-space-6);
  /* über der Schmuckgrafik (z-index 0) — der Inhalt bleibt lesbar. */
  position: relative;
  z-index: 1;
}
/* Schmuckgrafik (nur „Spalten" / Variante A) — rechts unten, ca. 80 % der
   Footer-Höhe, hinter dem Inhalt. Wird projektweit über die Variant-Eigenschaft
   „Schmuckgrafik" gesetzt (assetRef → Design Assets, Typ Schmuckgrafik). */
.bx-footer__decor {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 80%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bx-footer__logo {
  font-family: var(--Footer-logo-font-family, var(--mp-font-display));
  font-size: var(--Footer-logo-font-size, var(--mp-fs-lg));
  font-weight: 700;
  color: var(--Footer-logo-color, var(--mp-fg-inverse));
}
/* Uploaded footer logo (Design-Assets → "Footer-Logo") renders as an image
   instead of the "Piazza" word-mark; constrain its height like the nav logo. */
.bx-footer__logo--img { display: block; height: var(--Footer-logo-height, 28px); width: auto; }
/* Variante A („Spalten") zeigt das Logo bewusst größer (rund doppelte Breite/
   Höhe) — sowohl als hochgeladenes Bild als auch als „Piazza"-Wortmarke. */
.bx-footer--columns .bx-footer__logo--img { height: var(--Footer-columns-logo-height, 56px); }
.bx-footer--columns .bx-footer__logo { font-size: var(--Footer-columns-logo-font-size, var(--mp-fs-2xl)); }
/* p color:inherit — die globale Regel `p { color: var(--mp-fg) }` (dunkles Navy,
   colors_and_type.css) schlägt die Vererbung und machte Tagline + CTA-Text auf
   dem dunklen Footer unsichtbar (dunkel-auf-dunkel, wie zuvor die Spaltentitel).
   inherit folgt der (hellen/themebaren) --Footer-color. */
.bx-footer p { color: inherit; }
.bx-footer a { color: inherit; text-decoration: none; opacity: var(--Footer-link-opacity, .8); transition: opacity var(--mp-duration-base); }
/* Hover auf dem dunklen Footer klar sichtbar: volle Deckkraft + Unterstreichung.
   color:inherit ist WICHTIG — sonst greift die globale Regel
   `a:not(.bx-btn):hover { color: var(--mp-primary-hover) }` (dunkles Blau) und
   macht die Links auf dem dunklen Footer unlesbar. Social-Icons (Kreise) ohne
   Unterstreichung. */
.bx-footer a:hover { color: inherit; opacity: var(--Footer-link-opacity-hover, 1); text-decoration: underline; text-underline-offset: 3px; }
.bx-footer__social a:hover { text-decoration: none; }

/* Columns variant */
.bx-footer__top {
  display: grid;
  /* minmax(0, …) statt blankem fr: sonst erzwingen die Link-Spalten ihre
     min-content-Breite und der Footer sprengt schmale Container (horizontaler
     Scrollbalken im Vorschau-Builder). minmax(0,…) lässt die Tracks schrumpfen. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: var(--Footer-columns-gap, var(--mp-space-8));
  padding-bottom: var(--mp-space-7);
}
.bx-footer__tagline { margin: var(--mp-space-3) 0 var(--mp-space-4); max-width: 36ch; opacity: .75; line-height: var(--mp-lh-relaxed); }
.bx-footer__social { display: flex; gap: var(--mp-space-3); }
.bx-footer__social a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--Footer-social-border-color, rgba(255,255,255,.2)); border-radius: var(--mp-radius-pill); color: var(--Footer-social-icon-color, inherit); }
.bx-footer__social i { width: 18px; height: 18px; }
.bx-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--Footer-col-gap, var(--mp-space-6)); min-width: 0; }
/* color:inherit — sonst greift die globale Heading-Regel (h4 { color: var(--mp-fg) })
   und färbt den Titel dunkel auf dem dunklen Footer (dunkel-auf-dunkel, unlesbar).
   inherit übernimmt die --Footer-color (hell/themebar). */
.bx-footer__colTitle { color: inherit; font-size: var(--Footer-col-title-size, var(--mp-fs-sm)); text-transform: uppercase; letter-spacing: var(--mp-tracking-wide); opacity: .6; margin: 0 0 var(--mp-space-3); }
/* Mobiler Akkordeon-Kopf der Link-Gruppen — am Desktop aus (dort steht der
   h4-Titel und die Listen sind immer offen). Eingeblendet nur im Mobile-Block
   unten; beide Köpfe sind IMMER im DOM (Ein-DOM-Prinzip, kein Viewport-JS). */
.bx-footer__colHead { display: none; }
.bx-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mp-space-2); }
.bx-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mp-space-4);
  padding-top: var(--mp-space-5);
  border-top: 1px solid var(--Footer-legal-border-color, rgba(255,255,255,.15));
  font-size: var(--Footer-legal-font-size, var(--mp-fs-sm));
  opacity: .75;
  flex-wrap: wrap;
}
.bx-footer__legalLinks { display: flex; gap: var(--mp-space-4); }

/* Simple variant */
.bx-footer--simple .bx-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-4);
  padding-top: var(--mp-space-6);
  flex-wrap: wrap;
}
.bx-footer__inline { display: flex; gap: var(--mp-space-5); }
.bx-footer__copy { font-size: var(--mp-fs-sm); opacity: .7; }

/* CTA variant */
.bx-footer__ctaBand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-6);
  padding-bottom: var(--mp-space-7);
  margin-bottom: var(--mp-space-5);
  border-bottom: 1px solid var(--Footer-cta-border-color, rgba(255,255,255,.15));
  flex-wrap: wrap;
}
.bx-footer__ctaTitle { font-family: var(--Footer-cta-title-font-family, var(--mp-font-display)); font-size: var(--Footer-cta-title-size, var(--mp-fs-2xl)); margin: 0 0 var(--mp-space-2); color: var(--Footer-cta-title-color, var(--mp-fg-inverse)); }
.bx-footer__ctaText { margin: 0; opacity: .75; max-width: 44ch; }

/* Footer responsive — verhindert horizontalen Overflow auf schmalen Vorschau-
   Breiten (Vorschau-Builder, Tablet/Mobile-Viewport). Brand stapelt über die
   Link-Spalten, das Innen-Padding wird schmaler, die Spalten brechen um. */
@media (max-width: 768px) {
  .bx-footer__inner { padding-left: var(--mp-space-5); padding-right: var(--mp-space-5); }
  /* Brand-Block mittig: größeres Logo, Tagline und Social-Icons zentriert. */
  .bx-footer__brand { text-align: center; }
  .bx-footer--columns .bx-footer__logo--img { height: var(--Footer-columns-logo-height-mobile, 72px); margin-inline: auto; }
  .bx-footer--columns .bx-footer__logo { font-size: var(--Footer-columns-logo-font-size-mobile, var(--mp-fs-3xl)); }
  .bx-footer__tagline { margin-inline: auto; }
  .bx-footer__social { justify-content: center; }
  .bx-footer__top {
    grid-template-columns: 1fr;
    gap: var(--Footer-top-gap-mobile, var(--mp-space-5));
    /* Die Legal-Hairline übernimmt unten die Schlusslinie des Akkordeons —
       das große Desktop-Padding dazwischen wirkt mobil wie ein Loch. */
    padding-bottom: var(--mp-space-5);
  }

  /* Link-Gruppen als Akkordeon: h4-Titel aus, tappbare Kopf-Zeile an. Ruhige
     Hairline-Zeilen (gleiche Linie wie die Legal-Bar); Chevron dreht im
     offenen Zustand. Mehrere Gruppen dürfen gleichzeitig offen sein. */
  .bx-footer__cols { grid-template-columns: 1fr; gap: 0; }
  .bx-footer__col { border-top: 1px solid var(--Footer-legal-border-color, rgba(255, 255, 255, 0.15)); }
  h4.bx-footer__colTitle { display: none; }
  .bx-footer__colHead {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--mp-space-3);
    padding: 14px 2px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
  }
  /* Titel-Typo im Kopf ohne h4-Margin; als tappbare Zeile etwas kräftiger. */
  .bx-footer__colHead .bx-footer__colTitle { margin: 0; opacity: 0.85; }
  .bx-footer__colChev,
  .bx-footer__colHead svg { width: 16px; height: 16px; flex: none; opacity: 0.7; transition: transform 0.2s ease; }
  .bx-footer__col.is-open .bx-footer__colChev,
  .bx-footer__col.is-open .bx-footer__colHead svg { transform: rotate(180deg); }
  .bx-footer__col ul { display: none; padding-bottom: var(--mp-space-4); }
  .bx-footer__col.is-open ul { display: flex; }

  /* Legal-Zeile mittig — schließt den zentrierten Mobil-Footer ruhig ab. */
  .bx-footer__legal { justify-content: center; text-align: center; }

  /* Auf schmalen Viewports (gestapelter Footer) würde die Schmuckgrafik den
     Inhalt überlagern — hier ausblenden. */
  .bx-footer__decor { display: none; }
}

/* ---------- Text / Media ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --TextMedia-gap            Gap between text and media columns  [var(--mp-space-8)]
  --TextMedia-media-ratio    Aspect ratio of the media slot      [4/3]
  --TextMedia-media-bg       Placeholder background color        [var(--mp-ink-100)]
  --TextMedia-media-radius   Corner radius of the media slot     [var(--mp-radius-md)]
  --TextMedia-overlap-media-width   Width of Overlap media       [60%]
  --TextMedia-overlap-media-ratio   Aspect ratio of Overlap media [16/10]
  --TextMedia-overlap-copy-width    Width of Overlap copy card   [56%]
  --TextMedia-overlap-copy-bg       Copy card background         [var(--mp-white)]
  --TextMedia-overlap-copy-padding  Copy card padding            [var(--mp-space-6) var(--mp-space-7)]
  --TextMedia-overlap-copy-border   Copy card border color       [var(--mp-border)]
  --TextMedia-overlap-copy-radius   Copy card corner radius      [var(--mp-radius-md)]
  --TextMedia-overlap-copy-shadow   Copy card box-shadow         [var(--mp-shadow-md)]
  --TextMedia-overlap-inset         Negative margin-top (overlap amount) [-120px]
*/

.bx-ti {
  display: grid;
  align-items: center;
  gap: var(--TextMedia-gap, var(--mp-space-8));
}
.bx-ti--split { grid-template-columns: 1fr 1fr; }
.bx-ti--reverse .bx-ti__media { order: -1; }
.bx-ti__media {
  aspect-ratio: var(--TextMedia-media-ratio, 4/3);
  background: var(--TextMedia-media-bg, var(--mp-ink-100));
  border-radius: var(--TextMedia-media-radius, var(--mp-radius-md));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-ti__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Medien-Slot im Komponenten-Modus: feste Bild-Maße aufheben, damit eine
   reingezogene Komponente (Card, Video, Akkordeon) natürlich umbrechen kann. */
.bx-ti__media--component {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
  display: block;
}
.bx-ti--overlap .bx-ti__media--component { width: 100%; aspect-ratio: auto; margin-left: 0; }

.bx-ti--overlap {
  position: relative;
  display: block;
}
.bx-ti--overlap .bx-ti__media {
  width: var(--TextMedia-overlap-media-width, 60%);
  aspect-ratio: var(--TextMedia-overlap-media-ratio, 16/10);
  margin-left: auto;
}
.bx-ti--overlap .bx-ti__copy {
  position: relative;
  width: var(--TextMedia-overlap-copy-width, 56%);
  background: var(--TextMedia-overlap-copy-bg, var(--mp-white));
  padding: var(--TextMedia-overlap-copy-padding, var(--mp-space-6) var(--mp-space-7));
  border: 1px solid var(--TextMedia-overlap-copy-border, var(--mp-border));
  border-radius: var(--TextMedia-overlap-copy-radius, var(--mp-radius-md));
  box-shadow: var(--TextMedia-overlap-copy-shadow, var(--mp-shadow-md));
  margin-top: var(--TextMedia-overlap-inset, -120px);
  /* Eigene (i. d. R. weiße) Fläche → Flächen-Rollen lokal auf hell zurücksetzen,
     damit der Copy-Text auch auf einer dunklen/primären Section dunkel/lesbar
     bleibt (sonst heller Text auf heller Karte). */
  --mp-surface-fg: var(--mp-fg);
  --mp-surface-fg-muted: var(--mp-fg-muted);
  --mp-surface-accent: var(--mp-primary);
}
/* Reverse als Eigenschaft (gilt für jede Variante): Overlap gespiegelt —
   Medien links, Copy-Karte greift von rechts hinein. (Split/Reverse-Reihenfolge
   regelt bereits `.bx-ti--reverse .bx-ti__media { order: -1 }` oben.) */
.bx-ti--overlap.bx-ti--reverse .bx-ti__media { margin-left: 0; margin-right: auto; }
.bx-ti--overlap.bx-ti--reverse .bx-ti__copy  { margin-left: auto; }

.bx-ti--feature {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.bx-ti--feature .bx-ti__media {
  aspect-ratio: 16/8;
  margin-top: var(--mp-space-6);
}

.bx-ti--cards {
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--mp-space-5);
}
.bx-ti--cards .bx-ti__media { aspect-ratio: 4/3; }

/* „Text only" — nur Copy, kein Medien-Slot. Einspaltig, links ausgerichtet
   auf lesbare Breite. */
.bx-ti--text {
  grid-template-columns: 1fr;
  max-width: var(--TextMedia-text-measure, 760px);
}

/* CTA-Reihe im Copy-Block — Buttons nebeneinander mit Abstand, brechen auf
   schmalen Viewports um. Gilt für alle Text|Media-Varianten. */
.bx-ti__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-space-3);
}
/* „Text only" — Ausrichtung des Copy-Blocks (Property textAlign). Links = Default
   (keine Klasse). Der Block ist auf max-width 760px begrenzt und links verankert;
   für Mittig/Rechts muss der BLOCK verschoben werden (margin), sonst richtet
   text-align nur INNERHALB des links sitzenden 760px-Blocks aus. Zusätzlich der
   Text (text-align) und die CTA-Reihe (Flex → justify-content). */
.bx-ti--text.is-align-center { text-align: center; margin-inline: auto; }
.bx-ti--text.is-align-right { text-align: right; margin-left: auto; }
.bx-ti--text.is-align-center .bx-ti__ctas { justify-content: center; }
.bx-ti--text.is-align-right .bx-ti__ctas { justify-content: flex-end; }
/* CTA-Buttons folgen der Section-Fläche (analog Eyebrow/Headline/Fließtext, die
   über die --mp-surface-*-Rollen bereits umschalten). Die festen Button-Varianten
   kennen die Fläche nicht: der erste (Primary) würde auf „Primary"-Sections als
   Blau-auf-Blau verschwinden, der zweite (Ghost) hat Primary-Text → auf hell
   umstellen. Entspricht den --on-dark-Button-Varianten und dem IconLinks-Muster.
   AUSNAHME Overlap: dort liegt der Copy-Block in einer eigenen hellen Karte
   (.bx-ti__copy) — die CTAs sitzen NICHT auf der Section und bleiben normal
   (sonst weißer Button auf weißer Karte). Bewusst gewählte CTA-Stile (On Dark,
   Ghost On Dark, Sekundär) bleiben ohnehin unberührt, da nur --primary/--ghost
   umgebogen werden. */
.bx-section--on-dark .bx-ti:not(.bx-ti--overlap) .bx-ti__ctas .bx-btn--primary { background: var(--mp-white); color: var(--mp-primary); }
.bx-section--on-dark .bx-ti:not(.bx-ti--overlap) .bx-ti__ctas .bx-btn--primary:hover { background: var(--mp-cyan); color: var(--mp-dark-surface); }
.bx-section--on-dark .bx-ti:not(.bx-ti--overlap) .bx-ti__ctas .bx-btn--ghost { color: var(--mp-white); }
.bx-section--on-dark .bx-ti:not(.bx-ti--overlap) .bx-ti__ctas .bx-btn--ghost:hover { color: var(--mp-cyan); }

/* ---------- Media | Media ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --MediaMedia-gap           Gap between the two media slots     [var(--mp-space-6)]
  --MediaMedia-media-ratio   Aspect ratio of each media slot     [4/3]
  --MediaMedia-media-bg      Placeholder background color        [var(--mp-ink-100)]
  --MediaMedia-media-radius  Corner radius of each media slot    [var(--mp-radius-md)]
*/
/* Zwei gleichgewichtete Medien-Slots nebeneinander (leer, wie Text | Media,
   aber ohne Copy). Nutzt dieselben .bx-ti__media-Slots. */
.bx-mm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--MediaMedia-gap, var(--mp-space-6));
  align-items: stretch;
}
.bx-mm .bx-ti__media {
  aspect-ratio: var(--MediaMedia-media-ratio, 4/3);
  background: var(--MediaMedia-media-bg, var(--mp-ink-100));
  border-radius: var(--MediaMedia-media-radius, var(--mp-radius-md));
}

/* Text | Media + Media | Media responsive: auf Mobile stapeln statt 2-spaltig
   eng zu bleiben. Reverse bleibt erhalten (order/Reihenfolge spielt gestapelt
   keine Rolle). Overlap löst die negative Überlappung auf, damit Copy lesbar bleibt. */
@media (max-width: 640px) {
  .bx-mm { grid-template-columns: 1fr; }
  .bx-ti--split { grid-template-columns: 1fr; }
  .bx-ti--overlap { }
  .bx-ti--overlap .bx-ti__media,
  .bx-ti--overlap.bx-ti--reverse .bx-ti__media { width: 100%; margin: 0; aspect-ratio: 16/10; }
  .bx-ti--overlap .bx-ti__copy,
  .bx-ti--overlap.bx-ti--reverse .bx-ti__copy { width: 100%; margin: -32px 0 0; }
}

/* ---------- FAQ / Accordion ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --Accordion-gap                    Gap between card items                         [var(--mp-space-3)]
  --Accordion-hairline-border-color  Hairline variant divider color                 [var(--mp-border)]
  --Accordion-hairline-button-size   Hairline question font-size                    [var(--mp-fs-md)]
  --Accordion-hairline-panel-size    Hairline answer font-size                      [15px]
  --Accordion-item-bg                Card item background                           [var(--mp-white)]
  --Accordion-item-border-color      Card item border color                         [var(--mp-border)]
  --Accordion-item-border-width      Card item border width                         [1px]
  --Accordion-item-radius            Card item corner radius                        [var(--mp-radius-md)]
  --Accordion-item-shadow-open       Open card shadow                               [var(--mp-shadow-sm)]
  --Accordion-button-padding         Card button padding                            [var(--mp-space-4) var(--mp-space-5)]
  --Accordion-button-gap             Gap inside buttons                             [var(--mp-space-4)]
  --Accordion-button-size            Card button font-size                          [var(--mp-fs-base)]
  --Accordion-button-weight          Card button font-weight                        [700]
  --Accordion-button-color           Button text color                              [var(--mp-fg)]
  --Accordion-button-hover-color     Button hover text color                        [var(--mp-primary)]
  --Accordion-hairline-icon-size     Hairline plus icon size                        [20px]
  --Accordion-icon-size              Icon size                                      [18px]
  --Accordion-icon-color             Icon color                                     [var(--mp-primary)]
  --Accordion-number-size            Number font-size                               [var(--mp-fs-xs)]
  --Accordion-number-color           Number color                                   [var(--mp-fg-muted)]
  --Accordion-panel-padding          Panel inner padding                            [0 var(--mp-space-5) var(--mp-space-5)]
  --Accordion-panel-size             Panel text font-size                           [var(--mp-fs-sm)]
  --Accordion-panel-line-height      Panel text line-height                         [1.6]
  --Accordion-panel-color            Panel text color                               [var(--mp-fg-muted)]
  --Accordion-panel-border-color     Panel top border color                         [var(--mp-border)]
  --Accordion-side-gap               Side-by-side grid gap                          [var(--mp-space-6)]
  --Accordion-side-list-gap          Side-by-side tab list gap                      [var(--mp-space-1)]
  --Accordion-side-button-padding    Side tab button padding                        [var(--mp-space-3) var(--mp-space-4)]
  --Accordion-side-button-radius     Side tab button radius                         [var(--mp-radius-sm)]
  --Accordion-side-button-hover-bg   Side tab hover background                      [var(--mp-bg-soft)]
  --Accordion-side-active-bg         Side active tab background                     [var(--mp-fg)]
  --Accordion-side-active-color      Side active tab text color                     [var(--mp-fg-inverse)]
  --Accordion-side-detail-bg         Side detail panel background                   [var(--mp-bg-soft)]
  --Accordion-side-detail-radius     Side detail panel radius                       [var(--mp-radius-md)]
  --Accordion-side-detail-padding    Side detail panel padding                      [var(--mp-space-6)]
  --Accordion-side-title-size        Side detail title font-size                    [var(--mp-fs-lg)]
  --Accordion-side-title-weight      Side detail title font-weight                  [var(--mp-h3-font-weight)]
  --Accordion-side-text-color        Side detail body color                         [var(--mp-fg-muted)]
*/

.bx-faq {
  display: flex;
  flex-direction: column;
}
.bx-faq__item {
  border-top: 1px solid var(--Accordion-hairline-border-color, var(--mp-border));
}
.bx-faq__item:last-child { border-bottom: 1px solid var(--Accordion-hairline-border-color, var(--mp-border)); }
.bx-faq__btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--mp-space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-4);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--Accordion-hairline-button-size, var(--mp-fs-md));
  font-weight: var(--Accordion-button-weight, 700);
  color: var(--Accordion-button-color, var(--mp-fg));
  transition: color var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-faq__btn:hover { color: var(--Accordion-button-hover-color, var(--mp-primary)); }
.bx-faq__btn i[data-lucide] {
  width: var(--Accordion-hairline-icon-size, 20px);
  height: var(--Accordion-hairline-icon-size, 20px);
  transition: transform var(--mp-duration-base) var(--mp-ease-standard);
  color: var(--Accordion-icon-color, var(--mp-primary));
  flex-shrink: 0;
}
.bx-faq__item.is-open .bx-faq__btn i[data-lucide] { transform: rotate(45deg); }
.bx-faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mp-duration-slow) var(--mp-ease-standard);
}
.bx-faq__item.is-open .bx-faq__panel { max-height: 400px; }
.bx-faq__panel-inner {
  padding: 0 var(--mp-space-7) var(--mp-space-5) 0;
  font-size: var(--Accordion-hairline-panel-size, 15px);
  line-height: var(--Accordion-panel-line-height, 1.65);
  color: var(--Accordion-panel-color, var(--mp-fg-muted));
  max-width: 68ch;
}

/* Accordion (card style) */
.bx-acc { display: flex; flex-direction: column; gap: var(--Accordion-gap, var(--mp-space-3)); }
.bx-acc__item {
  background: var(--Accordion-item-bg, var(--mp-white));
  border: var(--Accordion-item-border-width, 1px) solid var(--Accordion-item-border-color, var(--mp-border));
  border-radius: var(--Accordion-item-radius, var(--mp-radius-md));
  overflow: hidden;
  transition: box-shadow var(--mp-duration-base) var(--mp-ease-standard);
}
.bx-acc__item.is-open { box-shadow: var(--Accordion-item-shadow-open, var(--mp-shadow-sm)); }
.bx-acc__btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--Accordion-button-padding, var(--mp-space-4) var(--mp-space-5));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Accordion-button-gap, var(--mp-space-4));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--Accordion-button-size, var(--mp-fs-base));
  font-weight: var(--Accordion-button-weight, 700);
  color: var(--Accordion-button-color, var(--mp-fg));
}
.bx-acc__btn:hover { color: var(--Accordion-button-hover-color, var(--mp-primary)); }
.bx-acc__num {
  font-family: var(--mp-font-mono);
  font-size: var(--Accordion-number-size, var(--mp-fs-xs));
  color: var(--Accordion-number-color, var(--mp-fg-muted));
  margin-right: var(--mp-space-3);
}
.bx-acc__btn i[data-lucide] {
  width: var(--Accordion-icon-size, 18px);
  height: var(--Accordion-icon-size, 18px);
  transition: transform var(--mp-duration-base) var(--mp-ease-standard);
  color: var(--Accordion-icon-color, var(--mp-primary));
}
.bx-acc__item.is-open .bx-acc__btn i[data-lucide] { transform: rotate(180deg); }
.bx-acc__panel { max-height: 0; overflow: hidden; transition: max-height var(--mp-duration-slow) var(--mp-ease-standard); }
.bx-acc__item.is-open .bx-acc__panel { max-height: 400px; }
.bx-acc__panel-inner {
  padding: var(--Accordion-panel-padding, 0 var(--mp-space-5) var(--mp-space-5));
  font-size: var(--Accordion-panel-size, var(--mp-fs-sm));
  line-height: var(--Accordion-panel-line-height, 1.6);
  color: var(--Accordion-panel-color, var(--mp-fg-muted));
  border-top: 1px solid var(--Accordion-panel-border-color, var(--mp-border));
  padding-top: var(--mp-space-4);
}

/* Side-by-side accordion */
.bx-acc--side { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--Accordion-side-gap, var(--mp-space-6)); align-items: start; }
/* Mobile: Tab-Liste über dem Detailpanel stapeln statt 2-spaltig. */
@media (max-width: 768px) { .bx-acc--side { grid-template-columns: 1fr; } }
.bx-acc--side .bx-acc__list { display: flex; flex-direction: column; gap: var(--Accordion-side-list-gap, var(--mp-space-1)); }
.bx-acc--side .bx-acc__btn {
  padding: var(--Accordion-side-button-padding, var(--mp-space-3) var(--mp-space-4));
  border-radius: var(--Accordion-side-button-radius, var(--mp-radius-sm));
  border: 1px solid transparent;
}
.bx-acc--side .bx-acc__btn:hover { background: var(--Accordion-side-button-hover-bg, var(--mp-bg-soft)); }
.bx-acc--side .bx-acc__btn.is-active {
  background: var(--Accordion-side-active-bg, var(--mp-fg));
  color: var(--Accordion-side-active-color, var(--mp-fg-inverse));
}
.bx-acc--side .bx-acc__detail {
  background: var(--Accordion-side-detail-bg, var(--mp-bg-soft));
  border-radius: var(--Accordion-side-detail-radius, var(--mp-radius-md));
  padding: var(--Accordion-side-detail-padding, var(--mp-space-6));
}
.bx-acc--side .bx-acc__detail h4 {
  margin: 0 0 var(--mp-space-3);
  font-size: var(--Accordion-side-title-size, var(--mp-fs-lg));
  font-weight: var(--Accordion-side-title-weight, var(--mp-h3-font-weight, 900));
}
.bx-acc--side .bx-acc__detail p,
.bx-acc--side .bx-acc__detail .cp-rich {
  margin: 0;
  line-height: var(--Accordion-panel-line-height, 1.6);
  color: var(--Accordion-side-text-color, var(--mp-fg-muted));
}

/* Redaktionelle Slide-Bilder (WYSIWYG-Cover) füllen ihren Rahmen wie der
   Platzhalter — Rahmen: Karten-Cover bzw. das 4/3-Visual des Dots-Sliders. */
.bx-slide-card__cover img,
.bx-slider__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Testimonials ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --Testimonial-bg                  Card background (light variant)                   [var(--mp-white)]
  --Testimonial-border-color        Card border color                                 [var(--mp-border)]
  --Testimonial-radius              Card corner radius                                [var(--mp-radius-md)]
  --Testimonial-padding             Card inner padding                                [var(--mp-space-6)]
  --Testimonial-gap                 Gap between cards in multi-column grid            [var(--mp-space-4)]
  --Testimonial-footer-gap          Gap inside the author footer row                  [var(--mp-space-3)]
  --Testimonial-quote-size          Quote font-size                                   [var(--mp-fs-md)]
  --Testimonial-quote-color         Quote text color                                  [var(--mp-fg)]
  --Testimonial-mark-color          Quotation mark colour                             [var(--mp-primary)]
  --Testimonial-name-color          Author name color                                 [var(--mp-fg)]
  --Testimonial-role-color          Author role color                                 [var(--mp-fg-muted)]
  --Testimonial-avatar-size         Avatar diameter                                   [4rem]
  --Testimonial-initials-bg         Avatar background when no photo                   [var(--mp-primary)]
  --Testimonial-initials-color      Avatar initials text color                        [white]
  --Testimonial-company-size        Logo / company name font-size                     [var(--mp-fs-xs)]
  --Testimonial-company-color       Logo / company name color (light)                 [var(--mp-fg-muted)]
  --Testimonial-dark-bg             Dark variant background                           [var(--mp-dark-surface)]
  --Testimonial-dark-border-color   Dark card border color                            [transparent]
  --Testimonial-dark-mark-color     Dark variant quotation mark colour                [var(--mp-cyan)]
  --Testimonial-dark-quote-color    Dark quote text color                             [var(--mp-fg-inverse)]
  --Testimonial-dark-name-color     Dark author name color                            [var(--mp-fg-inverse)]
  --Testimonial-dark-role-color     Dark author role color                            [color-mix(in srgb, var(--mp-fg-inverse) 65%, transparent)]
  --Testimonial-dark-company-color  Dark logo / company color                         [color-mix(in srgb, var(--mp-fg-inverse) 65%, transparent)]
  --Testimonial-dark-initials-bg    Dark avatar background                            [color-mix(in srgb, var(--mp-fg-inverse) 20%, transparent)]

  --TestimonialGrid-dark-bg         Grid dark-surface wrapper background              [var(--mp-dark-surface)]
  --TestimonialGrid-dark-padding    Grid dark-surface wrapper padding                 [var(--mp-space-8)]
  --TestimonialGrid-dark-radius     Grid dark-surface wrapper corner radius           [var(--mp-radius-lg)]
*/

.bx-tm {
  background: var(--Testimonial-bg, var(--mp-white));
  border: 1px solid var(--Testimonial-border-color, var(--mp-border));
  border-radius: var(--Testimonial-radius, var(--mp-radius-md));
  padding: var(--Testimonial-padding, var(--mp-space-6));
}
.bx-tm__quote {
  font-family: var(--mp-font-sans);
  font-weight: 300;
  font-size: var(--Testimonial-quote-size, var(--mp-fs-md));
  line-height: 1.45;
  color: var(--Testimonial-quote-color, var(--mp-fg));
  margin: 0 0 var(--mp-space-5);
  text-wrap: pretty;
}
.bx-tm__quote::before { content: '„'; color: var(--Testimonial-mark-color, var(--mp-primary)); font-weight: 900; margin-right: 4px; }
.bx-tm__quote::after { content: '"'; color: var(--Testimonial-mark-color, var(--mp-primary)); font-weight: 900; }
.bx-tm__person { display: flex; align-items: center; gap: var(--Testimonial-footer-gap, var(--mp-space-3)); }
.bx-avatar,
.bx-tm__avatar {
  width: var(--Testimonial-avatar-size, 4rem);
  height: var(--Testimonial-avatar-size, 4rem);
  border-radius: var(--mp-radius-pill);
  background: var(--Testimonial-initials-bg, var(--mp-primary));
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Testimonial-initials-color, white);
  font-weight: 700;
  font-size: 14px;
}
.bx-tm__name { font-weight: 700; font-size: 14px; color: var(--Testimonial-name-color, var(--mp-fg)); display: block; }
.bx-tm__role { font-size: 12px; color: var(--Testimonial-role-color, var(--mp-fg-muted)); }

.bx-tm--large { padding: var(--mp-space-8); }
.bx-tm--large .bx-tm__quote { font-size: 32px; line-height: 1.25; max-width: 24ch; }
.bx-tm--dark { background: var(--Testimonial-dark-bg, var(--mp-dark-surface)); color: var(--mp-fg-inverse); border-color: var(--Testimonial-dark-border-color, transparent); }
.bx-tm--dark .bx-tm__quote { color: var(--Testimonial-dark-quote-color, var(--mp-fg-inverse)); }
.bx-tm--dark .bx-tm__quote::before, .bx-tm--dark .bx-tm__quote::after { color: var(--Testimonial-dark-mark-color, var(--mp-cyan)); }
.bx-tm--dark .bx-tm__name { color: var(--Testimonial-dark-name-color, var(--mp-fg-inverse)); }
.bx-tm--dark .bx-tm__role { color: var(--Testimonial-dark-role-color, color-mix(in srgb, var(--mp-fg-inverse) 65%, transparent)); }
.bx-tm--dark .bx-avatar,
.bx-tm--dark .bx-tm__avatar { background: var(--Testimonial-dark-initials-bg, color-mix(in srgb, var(--mp-fg-inverse) 20%, transparent)); }

/* Testimonial grid wrapper — overrides bx-grid gap with the Testimonial token. */
.bx-tm-grid { gap: var(--Testimonial-gap, var(--mp-space-4)); }

/* Dark-surface outer wrapper for the testimonial/grid variant. */
.bx-tm-grid-outer--dark {
  background: var(--TestimonialGrid-dark-bg, var(--mp-dark-surface));
  padding: var(--TestimonialGrid-dark-padding, var(--mp-space-8));
  border-radius: var(--TestimonialGrid-dark-radius, var(--mp-radius-lg));
}

.bx-tm__logo {
  height: 22px;
  font-family: var(--mp-font-display);
  font-size: var(--Testimonial-company-size, var(--mp-fs-xs));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--Testimonial-company-color, var(--mp-fg-muted));
  margin-bottom: var(--mp-space-4);
}
.bx-tm--dark .bx-tm__logo { color: var(--Testimonial-dark-company-color, color-mix(in srgb, var(--mp-fg-inverse) 65%, transparent)); }

/* ---------- Team Member (Contact Card) ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --TeamMember-bg                 Card background                         [var(--mp-white)]
  --TeamMember-border-color       Card border color                       [var(--mp-border)]
  --TeamMember-border-width       Card border width                       [1px]
  --TeamMember-radius             Card corner radius                      [var(--mp-radius-md)]
  --TeamMember-padding            Card inner padding                      [var(--mp-space-5)]
  --TeamMember-gap                Gap between card elements / grid cards  [var(--mp-space-3)]
  --TeamMember-head-gap           Gap between avatar and identity text     [var(--mp-space-3)]
  --TeamMember-avatar-size        Avatar diameter                         [56px]
  --TeamMember-avatar-bg          Avatar background                       [var(--mp-primary)]
  --TeamMember-avatar-color       Avatar initials color                   [white]
  --TeamMember-avatar-font-size   Avatar initials font-size               [18px]
  --TeamMember-name-size          Name font-size                          [16px]
  --TeamMember-name-color         Name color                              [var(--mp-fg)]
  --TeamMember-name-weight        Name font-weight                        [700]
  --TeamMember-role-size          Role font-size                          [13px]
  --TeamMember-role-color         Role color                              [var(--mp-fg-muted)]
  --TeamMember-contact-gap        Gap between contact links                [var(--mp-space-2)]
  --TeamMember-contact-size       Contact link font-size                  [14px]
  --TeamMember-link-color         Contact link color                      [var(--mp-fg)]
  --TeamMember-link-hover-color   Contact link hover color                [var(--mp-primary)]
  --TeamMember-icon-size          Contact icon size                       [14px]
  --TeamMember-icon-color         Contact icon color                      [var(--mp-primary)]
*/
.bx-person-grid { gap: var(--TeamMember-gap, var(--mp-space-3)); }
.bx-person {
  background: var(--TeamMember-bg, var(--mp-white));
  border: var(--TeamMember-border-width, 1px) solid var(--TeamMember-border-color, var(--mp-border));
  border-radius: var(--TeamMember-radius, var(--mp-radius-md));
  padding: var(--TeamMember-padding, var(--mp-space-5));
  display: flex;
  flex-direction: column;
  gap: var(--TeamMember-gap, var(--mp-space-3));
}
.bx-person__head { display: flex; align-items: center; gap: var(--TeamMember-head-gap, var(--mp-space-3)); }
.bx-person__avatar {
  width: var(--TeamMember-avatar-size, 56px);
  height: var(--TeamMember-avatar-size, 56px);
  font-size: var(--TeamMember-avatar-font-size, 18px);
  background: var(--TeamMember-avatar-bg, var(--mp-primary));
  color: var(--TeamMember-avatar-color, white);
}
.bx-person__name {
  font-size: var(--TeamMember-name-size, 16px);
  font-weight: var(--TeamMember-name-weight, 700);
  color: var(--TeamMember-name-color, var(--mp-fg));
}
.bx-person__role { font-size: var(--TeamMember-role-size, 13px); color: var(--TeamMember-role-color, var(--mp-fg-muted)); }
.bx-person__contact {
  display: flex;
  flex-direction: column;
  gap: var(--TeamMember-contact-gap, var(--mp-space-2));
  font-size: var(--TeamMember-contact-size, 14px);
  margin-top: var(--mp-space-2);
}
.bx-person__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  color: var(--TeamMember-link-color, var(--mp-fg));
  text-decoration: none;
}
.bx-person__link:hover { color: var(--TeamMember-link-hover-color, var(--mp-primary)); }
.bx-person__link i {
  color: var(--TeamMember-icon-color, var(--mp-primary));
  flex-shrink: 0;
}
/* Icon-Größe für BEIDE Zustände (data-lucide-Platzhalter UND das von
   lucide.createIcons() ersetzte <svg>) mit gleicher Spezifität wie die
   .bx-link-Basis (0,2,1) und späterer Quellreihe — damit der Token
   --TeamMember-icon-size die 16px der Atom-Basis überstimmt (gleiches Muster
   wie .bx-events__action). Ohne diese Regel pinnt .bx-link i[data-lucide]/svg
   die Kontakt-Icons auf 16px und der Token griffe nicht mehr. */
.bx-person__link i[data-lucide],
.bx-person__link svg {
  width: var(--TeamMember-icon-size, 14px);
  height: var(--TeamMember-icon-size, 14px);
}

/* ---------- Slider ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --Slider-slide-gap              Gap between slides                         [var(--mp-space-5)]
  --Slider-controls-margin-top    Gap above counter/progress/nav controls    [var(--mp-space-5)]
  --Slider-controls-gap           Gap between control groups                 [var(--mp-space-4)]
  --Slider-nav-gap                Gap between nav buttons                    [var(--mp-space-2)]
  --Slider-nav-size               Previous/next button size                  [44px]
  --Slider-nav-radius             Previous/next button radius                [var(--mp-radius-pill)]
  --Slider-nav-bg                 Previous/next button background            [var(--mp-white)]
  --Slider-nav-border-color       Previous/next button border                [var(--mp-border-strong)]
  --Slider-nav-color              Previous/next icon color                   [var(--mp-fg)]
  --Slider-nav-hover-bg           Previous/next hover background             [var(--mp-fg)]
  --Slider-nav-hover-color        Previous/next hover icon color             [var(--mp-fg-inverse)]
  --Slider-nav-disabled-color     Disabled previous/next icon color          [var(--mp-fg-subtle)]
  --Slider-nav-icon-size          Previous/next icon size                    [18px]
  --Slider-progress-height        Progress track height                      [2px]
  --Slider-progress-bg            Progress track background                  [var(--mp-border)]
  --Slider-progress-fill          Progress fill color                        [var(--mp-primary)]
  --Slider-progress-radius        Progress track radius                      [999px]
  --Slider-dots-gap               Gap between dot buttons                    [var(--mp-space-2)]
  --Slider-dots-margin-top        Gap above dot navigation                   [var(--mp-space-5)]
  --Slider-dot-width              Dot width                                  [28px]
  --Slider-dot-active-width       Active dot width                           [48px]
  --Slider-dot-height             Dot height                                 [4px]
  --Slider-dot-radius             Dot radius                                 [999px]
  --Slider-dot-bg                 Inactive dot background                    [var(--mp-border-strong)]
  --Slider-dot-active-bg          Active dot background                      [var(--mp-primary)]
  --Slider-count-size             Counter font size                          [13px]
  --Slider-count-color            Counter text color                         [var(--mp-fg-muted)]
  --Slider-count-active-color     Current counter text color                 [var(--mp-fg)]
  --Slider-card-bg                Slide card background                      [var(--mp-white)]
  --Slider-card-border-color      Slide card border                          [var(--mp-border)]
  --Slider-card-radius            Slide card radius                          [var(--mp-radius-md)]
  --Slider-card-cover-bg          Slide card media placeholder background    [var(--mp-ink-100)]
  --Slider-card-body-padding      Slide card body padding                    [var(--mp-space-5)]
  --Slider-card-tag-size          Slide card tag font size                   [11px]
  --Slider-card-tag-color         Slide card tag color                       [var(--mp-primary)]
  --Slider-card-title-size        Slide card title font size                 [20px]
  --Slider-card-title-color       Slide card title color                     [var(--mp-fg)]
  --Slider-card-desc-size         Slide card description font size           [14px]
  --Slider-card-desc-color        Slide card description color               [var(--mp-fg-muted)]
*/

.bx-slider {
  position: relative;
  overflow: hidden;
}
.bx-slider__track {
  display: flex;
  gap: var(--Slider-slide-gap, var(--mp-space-5));
  transition: transform var(--mp-duration-slow) var(--mp-ease-standard);
  will-change: transform;
}
.bx-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.bx-slider--peek .bx-slider__slide { flex: 0 0 calc(33.333% - var(--Slider-slide-gap, var(--mp-space-5)) * 2 / 3); }
.bx-slider--double .bx-slider__slide { flex: 0 0 calc(50% - var(--Slider-slide-gap, var(--mp-space-5)) / 2); }

.bx-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--Slider-controls-margin-top, var(--mp-space-5));
  gap: var(--Slider-controls-gap, var(--mp-space-4));
}
.bx-slider__nav {
  display: flex;
  gap: var(--Slider-nav-gap, var(--mp-space-2));
}
.bx-slider__navBtn {
  width: var(--Slider-nav-size, 44px);
  height: var(--Slider-nav-size, 44px);
  border-radius: var(--Slider-nav-radius, var(--mp-radius-pill));
  background: var(--Slider-nav-bg, var(--mp-white));
  border: 1px solid var(--Slider-nav-border-color, var(--mp-border-strong));
  color: var(--Slider-nav-color, var(--mp-fg));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--mp-duration-fast), background var(--mp-duration-fast), color var(--mp-duration-fast);
}
.bx-slider__navBtn:hover { border-color: var(--Slider-nav-hover-bg, var(--mp-fg)); background: var(--Slider-nav-hover-bg, var(--mp-fg)); color: var(--Slider-nav-hover-color, var(--mp-fg-inverse)); }
.bx-slider__navBtn:disabled { color: var(--Slider-nav-disabled-color, var(--mp-fg-subtle)); cursor: not-allowed; }
.bx-slider__navBtn:disabled:hover { background: var(--Slider-nav-bg, var(--mp-white)); border-color: var(--mp-border); color: var(--Slider-nav-disabled-color, var(--mp-fg-subtle)); }
.bx-slider__navBtn i[data-lucide] { width: var(--Slider-nav-icon-size, 18px); height: var(--Slider-nav-icon-size, 18px); }

.bx-slider__progress {
  flex: 1;
  height: var(--Slider-progress-height, 2px);
  background: var(--Slider-progress-bg, var(--mp-border));
  border-radius: var(--Slider-progress-radius, 999px);
  position: relative;
  overflow: hidden;
}
.bx-slider__progressFill {
  position: absolute;
  inset: 0;
  background: var(--Slider-progress-fill, var(--mp-primary));
  transform-origin: left;
  transition: transform var(--mp-duration-slow) var(--mp-ease-standard);
}
.bx-slider__dots {
  display: flex;
  gap: var(--Slider-dots-gap, var(--mp-space-2));
  justify-content: center;
  margin-top: var(--Slider-dots-margin-top, var(--mp-space-5));
}
.bx-slider__dot {
  width: var(--Slider-dot-width, 28px);
  height: var(--Slider-dot-height, 4px);
  border-radius: var(--Slider-dot-radius, 999px);
  background: var(--Slider-dot-bg, var(--mp-border-strong));
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--mp-duration-fast) var(--mp-ease-standard), width var(--mp-duration-base);
}
.bx-slider__dot.is-active { background: var(--Slider-dot-active-bg, var(--mp-primary)); width: var(--Slider-dot-active-width, 48px); }
.bx-slider__count {
  font-family: var(--mp-font-mono);
  font-size: var(--Slider-count-size, 13px);
  color: var(--Slider-count-color, var(--mp-fg-muted));
  font-variant-numeric: tabular-nums;
}
.bx-slider__count b { color: var(--Slider-count-active-color, var(--mp-fg)); font-weight: 700; }

/* Slide cards */
.bx-slide-card {
  background: var(--Slider-card-bg, var(--mp-white));
  border: 1px solid var(--Slider-card-border-color, var(--mp-border));
  border-radius: var(--Slider-card-radius, var(--mp-radius-md));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bx-slide-card__cover {
  aspect-ratio: 4/3;
  background: var(--Slider-card-cover-bg, var(--mp-ink-100));
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-slide-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.bx-slide-card__body { padding: var(--Slider-card-body-padding, var(--mp-space-5)); }
.bx-slide-card__tag { font-size: var(--Slider-card-tag-size, 11px); font-weight: 700; letter-spacing: var(--mp-tracking-caps); text-transform: uppercase; color: var(--Slider-card-tag-color, var(--mp-primary)); margin-bottom: var(--mp-space-2); display: block; }
.bx-slide-card__title { font-size: var(--Slider-card-title-size, 20px); font-weight: 700; margin: 0 0 var(--mp-space-2); line-height: 1.2; color: var(--Slider-card-title-color, var(--mp-fg)); }
.bx-slide-card__desc { font-size: var(--Slider-card-desc-size, 14px); line-height: 1.55; color: var(--Slider-card-desc-color, var(--mp-fg-muted)); margin: 0; }

/* ---------- Form fields ---------- */

.bx-field { display: flex; flex-direction: column; gap: var(--mp-space-2); }
.bx-field__label { font-size: 13px; font-weight: 700; color: var(--mp-fg); display: flex; align-items: center; gap: 4px; }
.bx-field__label .req { color: var(--mp-danger); font-weight: 700; }
.bx-field__hint { font-size: 12px; color: var(--mp-fg-muted); }
.bx-field__err { font-size: 12px; color: var(--mp-danger); display: flex; align-items: center; gap: 4px; }
.bx-field__err i[data-lucide] { width: 12px; height: 12px; }

.bx-input,
.bx-select,
.bx-textarea {
  height: 48px;
  padding: 0 var(--mp-space-4);
  font: 400 15px/1.4 var(--mp-font-sans);
  color: var(--mp-fg);
  background: var(--mp-white);
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-sm);
  outline: none;
  transition: border-color var(--mp-duration-fast), box-shadow var(--mp-duration-fast);
  width: 100%;
}
/* --mp-fg-muted statt --mp-fg-subtle: Platzhalter-Text braucht ≥ 4.5:1 Kontrast. */
.bx-input::placeholder, .bx-textarea::placeholder { color: var(--mp-fg-muted); }
.bx-input:hover, .bx-select:hover, .bx-textarea:hover { border-color: var(--mp-fg); }
.bx-input:focus, .bx-select:focus, .bx-textarea:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 3px var(--mp-focus-ring); }
.bx-input--err, .bx-textarea--err, .bx-select--err { border-color: var(--mp-danger); }
.bx-input--err:focus, .bx-textarea--err:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-danger) 30%, transparent); }
.bx-input--disabled, .bx-input[disabled] { background: var(--mp-bg-soft); color: var(--mp-fg-subtle); cursor: not-allowed; }
.bx-textarea { height: auto; min-height: 120px; padding: var(--mp-space-3) var(--mp-space-4); resize: vertical; font-family: inherit; }
.bx-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d3557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

/* Checkbox / radio */
.bx-check, .bx-radio { display: inline-flex; align-items: center; gap: var(--mp-space-3); cursor: pointer; font-size: 14px; color: var(--mp-fg); user-select: none; }
.bx-check input, .bx-radio input { position: absolute; opacity: 0; pointer-events: none; }
.bx-check__box, .bx-radio__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--mp-border-strong);
  background: var(--mp-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--mp-duration-fast), background var(--mp-duration-fast), box-shadow var(--mp-duration-fast);
}
.bx-check__box { border-radius: var(--mp-radius-sm); }
.bx-radio__box { border-radius: 999px; }
.bx-check:hover .bx-check__box, .bx-radio:hover .bx-radio__box { border-color: var(--mp-fg); }
.bx-check input:focus-visible ~ .bx-check__box, .bx-radio input:focus-visible ~ .bx-radio__box { box-shadow: 0 0 0 3px var(--mp-focus-ring); border-color: var(--mp-primary); }
.bx-check input:checked ~ .bx-check__box { background: var(--mp-primary); border-color: var(--mp-primary); color: var(--mp-white); }
.bx-check input:checked ~ .bx-check__box::after {
  content: '';
  width: 10px; height: 6px;
  border: 2px solid #fff;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.bx-radio input:checked ~ .bx-radio__box { border-color: var(--mp-primary); border-width: 6px; }

/* Switch */
.bx-switch { display: inline-flex; align-items: center; gap: var(--mp-space-3); cursor: pointer; }
.bx-switch__track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--mp-ink-300);
  position: relative;
  transition: background var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--mp-white);
  box-shadow: var(--mp-shadow-sm);
  transition: transform var(--mp-duration-base) var(--mp-ease-standard);
}
.bx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bx-switch input:checked ~ .bx-switch__track { background: var(--mp-primary); }
.bx-switch input:checked ~ .bx-switch__track .bx-switch__thumb { transform: translateX(20px); }

/* ---------- Video ---------- */

.bx-video {
  position: relative;
  background: var(--mp-dark-surface);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.bx-video__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}
.bx-video__btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--mp-white);
  color: var(--mp-fg);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--mp-duration-base) var(--mp-ease-standard), background var(--mp-duration-fast);
  box-shadow: var(--mp-shadow-lg);
}
.bx-video__btn:hover { background: var(--mp-primary); color: var(--mp-white); }
.bx-video__btn i[data-lucide] { width: 28px; height: 28px; margin-left: 4px; }
.bx-video__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--mp-space-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mp-space-4);
  color: var(--mp-fg-inverse);
  background: linear-gradient(180deg, transparent 0%, rgba(10,21,48,0.7) 100%);
}
.bx-video__caption h4 { margin: 0; font-size: 20px; color: var(--mp-fg-inverse); font-weight: 700; }
.bx-video__caption small { color: rgba(255,255,255,0.7); font-size: 13px; }
.bx-video__chip {
  position: absolute;
  top: var(--mp-space-4);
  left: var(--mp-space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  height: 28px;
  padding: 0 var(--mp-space-3);
  border-radius: var(--mp-radius-pill);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-white);
  letter-spacing: var(--mp-tracking-caps);
  text-transform: uppercase;
}
.bx-video__chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mp-danger); display: inline-block; }

/* Side-by-side video copy */
.bx-video-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-space-7); align-items: center; }

/* ---------- Contact ---------- */

.bx-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mp-space-7);
  align-items: start;
}
.bx-contact__info ul { list-style: none; padding: 0; margin: var(--mp-space-5) 0 0; display: flex; flex-direction: column; gap: var(--mp-space-3); }
/* Kontaktdaten-Zeile: Flächen-Rolle, NICHT --mp-fg. Eine feste Vordergrundfarbe
   am `li` schlägt das Weiß, das .bx-section--on-dark vererbt — dessen
   Korrekturen decken h2/h3 und p ab, aber kein li. Auf dunklem Grund war die
   Textfarbe deshalb exakt die Hintergrundfarbe: Kontrast 1,00:1, also
   unsichtbar. Die Einleitung derselben Spalte nutzte die Rolle längst.
   Wächter: tests/js/studio/contact-theme-slots.test.js */
.bx-contact__info li { display: flex; align-items: center; gap: var(--mp-space-3); font-size: 15px; color: var(--mp-surface-fg, var(--mp-fg)); }
/* Icons der Kontaktdaten: über --Contact-info-icon-color im Theming-Architekten
   einstellbar; Standard ist die Flächen-Rolle, folgt also hell/dunkel. Vorher
   fest --mp-primary → auf dunklem Grund 2,21:1 und nicht anpassbar. */
.bx-contact__info li i[data-lucide] { width: 16px; height: 16px; color: var(--Contact-info-icon-color, var(--mp-surface-accent, var(--mp-primary))); }
.bx-contact__form {
  background: var(--mp-bg-soft);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-4);
}

/* Image placeholder */
.bx-imgph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--mp-ink-200), var(--mp-ink-300));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-ink-500);
  position: relative;
}
.bx-imgph::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, transparent 47%, rgba(29, 53, 87, 0.18) 49%, rgba(29, 53, 87, 0.18) 51%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(29, 53, 87, 0.18) 49%, rgba(29, 53, 87, 0.18) 51%, transparent 53%);
  background-size: 32px 32px;
  opacity: 0.4;
}
.bx-imgph i[data-lucide] { width: 32px; height: 32px; position: relative; z-index: 1; }

/* Werkstatt-Vorschau-Platzhalter (Individuelle Komponenten, Task 5 "Bilder —
   Platzhalter + Mediathek-Picker"): same visual language as .bx-imgph above
   (grey gradient + diagonal stripe overlay + centered icon), but its OWN
   class — studio/custom/render.jsx renders a literal inline <svg> here
   instead of <i data-lucide>+createIcons() (see render.jsx's
   imagePlaceholderIcon() comment for why), so this has no `i[data-lucide]`
   selector to size an icon through; the svg carries its own width/height. */
.cc-img-placeholder {
  width: 100%;
  background: linear-gradient(135deg, var(--mp-ink-200), var(--mp-ink-300));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-ink-500);
  position: relative;
  overflow: hidden;
}
.cc-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, transparent 47%, rgba(29, 53, 87, 0.18) 49%, rgba(29, 53, 87, 0.18) 51%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(29, 53, 87, 0.18) 49%, rgba(29, 53, 87, 0.18) 51%, transparent 53%);
  background-size: 32px 32px;
  opacity: 0.4;
}
.cc-img-placeholder svg { position: relative; z-index: 1; }

/* ---------- Map (Mapbox Static Images API) ---------- */
.bx-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--Map-radius, var(--mp-radius-md));
  overflow: hidden;
  background: var(--Map-bg, var(--mp-ink-100));
  border: 1px solid var(--Map-border-color, var(--mp-border));
}
.bx-map__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Adress-Chip über der echten Karte */
.bx-map__chip {
  position: absolute;
  left: var(--mp-space-4);
  bottom: var(--mp-space-4);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: var(--Map-chip-bg, var(--mp-white));
  border: 1px solid var(--Map-chip-border-color, var(--mp-border));
  border-radius: var(--Map-chip-radius, var(--mp-radius-pill));
  box-shadow: var(--Map-chip-shadow, var(--mp-shadow-md));
  font-size: 13px;
  font-weight: 600;
  color: var(--Map-chip-color, var(--mp-fg));
  max-width: calc(100% - 2 * var(--mp-space-4));
}
.bx-map__chip i[data-lucide], .bx-map__chip svg { width: 15px; height: 15px; color: var(--Map-chip-icon-color, var(--mp-primary)); flex: 0 0 auto; }
.bx-map__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fallback ohne Token — bewusst karten-artig, nicht „kaputt“ */
.bx-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  text-align: center;
  padding: var(--mp-space-6);
  background:
    linear-gradient(0deg, transparent 23px, color-mix(in srgb, var(--Map-grid-color, var(--mp-border)) 55%, transparent) 24px),
    linear-gradient(90deg, transparent 23px, color-mix(in srgb, var(--Map-grid-color, var(--mp-border)) 55%, transparent) 24px),
    var(--Map-fallback-bg, var(--mp-bg-soft));
  background-size: 24px 24px, 24px 24px, auto;
}
.bx-map__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--Map-pin-bg, var(--mp-primary));
  color: var(--Map-pin-color, var(--mp-white));
  box-shadow: var(--Map-pin-shadow, var(--mp-shadow-md));
}
.bx-map__pin i[data-lucide], .bx-map__pin svg { width: 22px; height: 22px; }
.bx-map__addr { font-size: 15px; font-weight: 700; color: var(--Map-address-color, var(--mp-fg)); }
.bx-map__hint { font-size: 12px; color: var(--Map-hint-color, var(--mp-fg-muted)); max-width: 34ch; line-height: 1.5; }

/* ============================================================
   Download-Liste — .bx-dl
   Vier Varianten: Liste · Karten (.bx-dl--cards) · Detailliste
   (.bx-dl--detailed) · Kompakt (.bx-dl--compact).
   Themebar über --Downloads-* mit --mp-*-Fallback. Defaults stehen in
   app.jsx (buildThemeVars); kuratierte Theming-Stellen für den Split-
   Inspektor in studio/theme-slots.js.
   ============================================================ */
.bx-dl { width: 100%; }

/* --- Übergeordneter Titel + Akzent-Linie (Baustein 1) --- */
.bx-dl__header { margin-bottom: var(--mp-space-5); }
.bx-dl__header.is-center { text-align: center; }
.bx-dl__title {
  margin: 0;
  font-size: var(--Downloads-title-size, var(--mp-fs-xl));
  font-weight: var(--Downloads-title-weight, 700);
  color: var(--Downloads-title-color, var(--mp-fg));
  line-height: var(--mp-lh-snug);
}

/* --- Gemeinsame Bausteine: Icon · Titel-Headline · Beschreibung · Größe --- */
.bx-dl__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color: var(--Downloads-icon-color, var(--mp-primary));
}
.bx-dl__icon i[data-lucide], .bx-dl__icon svg { width: 22px; height: 22px; }

.bx-dl__name {
  display: block;
  font-size: var(--Downloads-name-size, var(--mp-fs-base));
  font-weight: 700;
  color: var(--Downloads-name-color, var(--mp-primary));
  text-decoration: none;
}
.bx-dl__desc {
  display: block;
  margin: var(--mp-space-1) 0 0;
  font-size: var(--Downloads-desc-size, var(--mp-fs-sm));
  color: var(--Downloads-desc-color, var(--mp-fg-muted));
  line-height: var(--mp-lh-normal);
}
.bx-dl__meta, .bx-dl__size {
  flex: none;
  font-size: var(--Downloads-meta-size, var(--mp-fs-sm));
  color: var(--Downloads-meta-color, var(--mp-fg-muted));
  white-space: nowrap;
}

/* --- Variante 1 · Liste (Hairline-Zeilen) --- */
.bx-dl__list { list-style: none; margin: 0; padding: 0; }
.bx-dl__item {
  display: flex; align-items: center; gap: var(--mp-space-4);
  padding: var(--mp-space-4) var(--mp-space-1);
  border-bottom: 1px solid var(--Downloads-item-border-color, var(--mp-border));
}
.bx-dl__body {
  flex: 1 1 auto; min-width: 0;
  text-decoration: none;
}
a.bx-dl__body:hover .bx-dl__name { color: var(--Downloads-name-hover-color, var(--mp-fg)); }

/* --- Variante 2 · Karten --- */
.bx-dl__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Downloads-card-gap, var(--mp-space-4));
}
.bx-dl__card {
  display: flex; flex-direction: column; gap: var(--mp-space-3);
  padding: var(--Downloads-card-padding, var(--mp-space-5));
  background: var(--Downloads-card-bg, var(--mp-bg));
  border: 1px solid var(--Downloads-card-border-color, var(--mp-border));
  border-radius: var(--Downloads-card-radius, var(--mp-radius-md));
  box-shadow: var(--Downloads-card-shadow, var(--mp-shadow-xs));
}
.bx-dl__icon--chip {
  width: 48px; height: 48px;
  border-radius: var(--Downloads-card-radius, var(--mp-radius-md));
  background: var(--Downloads-icon-bg, var(--mp-bg-soft));
}
.bx-dl__cardBody { flex: 1 1 auto; }
.bx-dl__cardFoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mp-space-3);
  margin-top: var(--mp-space-2);
}
.bx-dl__cardFoot .bx-dl__meta { display: inline-flex; align-items: center; gap: var(--mp-space-2); }

/* --- Typ-Badge (Karten + Detailliste) --- */
.bx-dl__badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px var(--mp-space-2);
  font-size: var(--mp-fs-xs); font-weight: 700; letter-spacing: 0.03em;
  border-radius: var(--mp-radius-sm);
  background: var(--Downloads-badge-bg, var(--mp-bg-soft));
  color: var(--Downloads-badge-color, var(--mp-fg-muted));
}
.bx-dl__badge--lg {
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--Downloads-card-radius, var(--mp-radius-md));
}

/* --- Download-Button (Karten icon-only · Detailliste beschriftet) --- */
.bx-dl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mp-space-2);
  flex: none;
  width: 40px; height: 40px;
  border: none;
  border-radius: var(--Downloads-btn-radius, var(--mp-radius-md));
  background: var(--Downloads-btn-bg, var(--mp-primary));
  color: var(--Downloads-btn-color, #ffffff);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-dl__btn:hover { filter: brightness(0.92); }
.bx-dl__btn i[data-lucide], .bx-dl__btn svg { width: 18px; height: 18px; }
.bx-dl__btn--label {
  width: auto; padding: 0 var(--mp-space-4);
  font-size: var(--mp-fs-sm); font-weight: 700;
}

/* --- Variante 3 · Detailliste --- */
.bx-dl--detailed .bx-dl__body { display: flex; flex-direction: column; }

/* --- Variante 4 · Kompakt (Buttons mit Umbruch) --- */
.bx-dl__pills { display: flex; flex-wrap: wrap; gap: var(--mp-space-3); }
.bx-dl__pill {
  display: inline-flex; align-items: center; gap: var(--mp-space-2);
  padding: var(--mp-space-3) var(--mp-space-4);
  border-radius: var(--Downloads-pill-radius, var(--mp-radius-md));
  background: var(--Downloads-pill-bg, var(--mp-bg-soft));
  border: 1px solid var(--Downloads-pill-border-color, var(--mp-border));
  text-decoration: none;
  transition: border-color var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-dl__pill:hover { border-color: var(--Downloads-icon-color, var(--mp-primary)); }
.bx-dl__pill i[data-lucide], .bx-dl__pill svg {
  width: 18px; height: 18px; flex: none;
  color: var(--Downloads-icon-color, var(--mp-primary));
}
.bx-dl__pillName { font-size: var(--mp-fs-sm); font-weight: 700; color: var(--Downloads-name-color, var(--mp-primary)); }
.bx-dl__pillMeta { font-size: var(--mp-fs-xs); color: var(--Downloads-meta-color, var(--mp-fg-muted)); }

/* --- Responsive --- */
@media (max-width: 640px) {
  .bx-dl__grid { grid-template-columns: 1fr; }
  .bx-dl--detailed .bx-dl__item { flex-wrap: wrap; }
  .bx-dl--detailed .bx-dl__size { margin-left: auto; }
}

/* ============================================================
   ICON-LINKS — Icon + Titel als verlinkte Kacheln (box) bzw. Zeilen (list).
   Schnellzugriff für Portale/Behörden. Spaltenzahl via .bx-grid--N.
   Über --IconLinks-* themebar (Fallback --mp-*) → COMPONENT_THEME_SLOTS.
   ============================================================ */
.bx-iconlinks { width: 100%; }

/* --- Optionale Überschrift über dem Raster (links/mittig) --- */
/* --- Überschrift-Dekoration (Atom-Ebene, Spec §4.4) -----------------------
   Vom Heading-Atom gerendert; ersetzt die fünf komponenten-eigenen Rule-Spans
   (.bx-sec-head__rule, .bx-news__rule, .bx-dl__rule, .bx-events__rule,
   .bx-iconlinks__rule). Farbe/Maße laufen über --HeadingDecor-*; die Header-
   Wrapper mappen ihre bestehenden Theme-Slots darauf (Task 7). */
.bx-heading__decor { display: block; }
.bx-heading__decor--line {
  margin-top: var(--HeadingDecor-gap, var(--mp-space-3));
  width: var(--HeadingDecor-line-width, 48px);
  height: var(--HeadingDecor-line-height, 3px);
  border-radius: 999px;
  background: var(--HeadingDecor-line-color, var(--mp-primary));
}
.bx-heading__decor--img {
  margin-top: var(--HeadingDecor-gap, var(--mp-space-3));
  /* Naturgröße der Grafik als Default (absolut → immun gegen Browser-
     Schrift-/Zoom-Einstellungen). `--HeadingDecor-img-height` bleibt als
     optionaler Override erhalten (z. B. für Alt-Projektstände). */
  height: var(--HeadingDecor-img-height, auto);
  width: auto;
  max-width: 100%;
}
.is-center .bx-heading__decor { margin-inline: auto; }
.bx-section--on-dark .bx-heading__decor--line { background: var(--mp-cyan); }

/* Bestehende Rule-Theme-Slots auf die Atom-Dekoration gemappt (Task 7). */
.bx-sec-head       { --HeadingDecor-line-color: var(--mp-section-head-accent, var(--mp-primary)); }
.bx-news__header   { --HeadingDecor-line-color: var(--News-rule-color, var(--mp-primary)); }
.bx-events__headline { --HeadingDecor-line-color: var(--Events-rule-color, var(--mp-primary)); }
.bx-iconlinks__header { --HeadingDecor-line-color: var(--IconLinks-rule-color, var(--mp-primary)); }
.bx-dl__header {
  --HeadingDecor-line-color: var(--Downloads-rule-color, var(--mp-primary));
  --HeadingDecor-line-width: var(--Downloads-rule-width, 48px);
  --HeadingDecor-line-height: var(--Downloads-rule-height, 3px);
}
/* ============================================================
   Geteilte Sektions-Überschrift (SectionHeading-Helfer) — von allen
   Inhalts-Bausteinen genutzt, die eine optionale Überschrift über dem
   Inhalt zeigen. Familie/Gewicht/Versalien kommen vom Heading-Atom
   (bx-h2/-h3/mp-display je Headline-Stil); Farbe + Größe + Akzent hier
   über gemeinsame Variablen mit Token-Fallback.
   ============================================================ */
.bx-sec-head { margin-bottom: var(--mp-space-5); }
.bx-sec-head.is-center { text-align: center; }
.bx-sec-head__title {
  margin: 0;
  line-height: var(--mp-lh-snug);
  color: var(--mp-section-head-color, var(--mp-surface-fg));
  font-size: var(--mp-section-head-size, var(--mp-fs-xl));
}

.bx-iconlinks__header { margin-bottom: var(--mp-space-5); }
.bx-iconlinks__header.is-center { text-align: center; }
/* Die Überschrift ist ein Heading-Atom (bx-h2/-h3/mp-display je nach Komposition-
   Stil); Familie/Gewicht/Versalien kommen von dort, Farbe + Größe per Inline-Alias
   (--IconLinks-title-color → Flächen-Rolle, --IconLinks-title-size). Hier nur der
   Abstands-Reset, damit das Atom-margin den Header-Abstand nicht verdoppelt. */
.bx-iconlinks__title { margin: 0; line-height: var(--mp-lh-snug); }

/* --- Raster (Spaltenzahl steuert .bx-grid--N) --- */
.bx-iconlinks__grid { gap: var(--IconLinks-gap, var(--mp-space-4)); }

/* --- Gemeinsame Bausteine: Link-Hülle · Icon · Titel --- */
.bx-iconlink {
  display: flex;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--mp-duration-base) var(--mp-ease-standard),
              transform var(--mp-duration-base) var(--mp-ease-standard),
              border-color var(--mp-duration-base) var(--mp-ease-standard);
}
.bx-iconlink__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color: var(--IconLinks-icon-color, var(--mp-primary));
}
.bx-iconlink__icon i[data-lucide], .bx-iconlink__icon svg {
  width: var(--IconLinks-icon-size, 28px);
  height: var(--IconLinks-icon-size, 28px);
}
.bx-iconlink__label {
  font-size: var(--IconLinks-label-size, var(--mp-fs-base));
  font-weight: 600;
  color: var(--IconLinks-label-color, var(--mp-fg));
  line-height: var(--mp-lh-snug);
}

/* --- Variante „Boxen": Icon oben mittig, Titel darunter --- */
.bx-iconlink--box {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-3);
  text-align: center;
  padding: var(--mp-space-6) var(--mp-space-4);
  background: var(--IconLinks-box-bg, var(--mp-bg));
  border: 1px solid var(--IconLinks-box-border-color, var(--mp-border));
  border-radius: var(--IconLinks-box-radius, var(--mp-radius-md));
}
.bx-iconlink--box:hover {
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
  border-color: var(--IconLinks-icon-color, var(--mp-primary));
}
.bx-iconlink--box .bx-iconlink__icon i[data-lucide],
.bx-iconlink--box .bx-iconlink__icon svg {
  width: var(--IconLinks-icon-size, 32px);
  height: var(--IconLinks-icon-size, 32px);
}

/* --- Variante „Liste": Icon links, Titel daneben, Chevron rechts --- */
.bx-iconlink--row {
  flex-direction: row;
  align-items: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-4);
  background: var(--IconLinks-row-bg, var(--mp-bg-soft));
  border: 1px solid var(--IconLinks-row-border-color, var(--mp-border));
  border-radius: var(--IconLinks-row-radius, var(--mp-radius-md));
}
.bx-iconlink--row .bx-iconlink__label { flex: 1 1 auto; min-width: 0; }
.bx-iconlink--row:hover {
  border-color: var(--IconLinks-icon-color, var(--mp-primary));
  box-shadow: var(--mp-shadow-xs);
}
.bx-iconlink--row .bx-iconlink__icon i[data-lucide],
.bx-iconlink--row .bx-iconlink__icon svg { width: 22px; height: 22px; }
.bx-iconlink__chev {
  display: inline-flex; align-items: center; flex: none;
  color: var(--mp-fg-subtle);
  transition: transform var(--mp-duration-fast) var(--mp-ease-standard),
              color var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-iconlink__chev i[data-lucide], .bx-iconlink__chev svg { width: 18px; height: 18px; }
.bx-iconlink--row:hover .bx-iconlink__chev {
  transform: translateX(3px);
  color: var(--IconLinks-icon-color, var(--mp-primary));
}

/* --- Optionale CTA-Reihe unter dem Raster (folgt der Ausrichtung) --- */
.bx-iconlinks__ctas {
  display: flex; flex-wrap: wrap; gap: var(--mp-space-3);
  margin-top: var(--mp-space-6);
}
.bx-iconlinks__ctas.is-center { justify-content: center; }

/* Box-/Listen-Kacheln sind self-contained (eigene helle Fläche): der on-dark-
   Text-Flip der Section darf NICHT in die Kachel lecken — sonst weißer Link-Text
   auf weißer Kachel (unsichtbar). Das Label (span) hält daher explizit seine
   dunkle Farbe. Die Überschrift (h3) sitzt dagegen direkt auf der Section und
   flippt korrekt über die globale h3-Regel; ihre Akzent-Linie wird auf dunklem
   Grund zu Cyan (wie der Eyebrow), damit sie nicht im „Primary" verschwindet. */
.bx-section--on-dark .bx-iconlink__label { color: var(--IconLinks-label-color, var(--mp-fg)); }
/* CTA-Buttons unter dem Raster sitzen DIREKT auf der Section (keine Kachel) und
   müssen daher auf farbigem Grund umschalten: der erste (Primary) würde sonst
   als Blau-auf-Blau verschwimmen → invertiert zu hellem Button; weitere (Ghost)
   haben Primary-Text → auf hell umstellen. Entspricht den --on-dark-Button-Varianten. */
.bx-section--on-dark .bx-iconlinks__ctas .bx-btn--primary { background: var(--mp-white); color: var(--mp-primary); }
.bx-section--on-dark .bx-iconlinks__ctas .bx-btn--primary:hover { background: var(--mp-cyan); color: var(--mp-dark-surface); }
.bx-section--on-dark .bx-iconlinks__ctas .bx-btn--ghost { color: var(--mp-white); }
.bx-section--on-dark .bx-iconlinks__ctas .bx-btn--ghost:hover { color: var(--mp-cyan); }

/* ============================================================
   NEUIGKEITEN — News/Meldungen. Zwei Varianten: Aufmacher + Liste
   (.bx-news--feature) · Karten-Raster (.bx-news--cards).
   Über --News-* themebar (Fallback --mp-* / --mp-surface-*) → COMPONENT_THEME_SLOTS.
   Lesbarkeit: Aufmacher-/News-Karten sind self-contained und setzen die Flächen-
   Rollen lokal auf hell zurück; Liste + Überschrift lesen die Section-Flächen-
   Rollen und flippen auf dunklem/farbigem Grund automatisch mit.
   ============================================================ */
.bx-news { width: 100%; }

/* --- Optionale Überschrift (links/mittig) --- */
.bx-news__header { margin-bottom: var(--mp-space-6); }
.bx-news__header.is-center { text-align: center; }
/* Überschrift = Heading-Atom; Farbe/Größe per Inline-Alias (--News-title-color →
   Flächen-Rolle). Hier nur Abstands-Reset, damit das Atom-margin nicht doppelt. */
.bx-news__title { margin: 0; line-height: var(--mp-lh-snug); }

/* --- Gemeinsame Karten-Bausteine (Aufmacher + News-Karte) --- */
/* Self-contained: eigene helle Fläche → Flächen-Rollen lokal auf hell
   zurücksetzen, damit der Karten-Text auch auf dunkler/primärer/bildbasierter
   Section dunkel/lesbar bleibt. Alle Karten-Textstellen sind <span> → keine
   globale on-dark-Tag-Regel (p/h*) leckt in die Karte. */
.bx-news__feature, .bx-news__card {
  display: flex; flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--News-card-bg, var(--mp-bg));
  border: 1px solid var(--News-card-border-color, var(--mp-border));
  border-radius: var(--News-card-radius, var(--mp-radius-md));
  box-shadow: var(--News-card-shadow, var(--mp-shadow-xs));
  --mp-surface-fg: var(--mp-fg);
  --mp-surface-fg-muted: var(--mp-fg-muted);
  --mp-surface-accent: var(--mp-primary);
  transition: box-shadow var(--mp-duration-base) var(--mp-ease-standard),
              transform var(--mp-duration-base) var(--mp-ease-standard);
}
.bx-news__feature:hover, .bx-news__card:hover {
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
}

/* Titelbild + Kategorie-Badge (Badge trägt eigene Farben → grundunabhängig lesbar) */
.bx-news__cover {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
}
/* Gesetztes Titelbild (WYSIWYG) füllt den Cover-Rahmen wie der Platzhalter. */
.bx-news__coverImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-news__badge {
  position: absolute;
  top: var(--mp-space-3); left: var(--mp-space-3);
  display: inline-flex; align-items: center;
  padding: var(--mp-space-1) var(--mp-space-3);
  font-size: var(--mp-fs-xs); font-weight: 700;
  border-radius: var(--mp-radius-pill);
  background: var(--News-badge-bg, var(--mp-primary));
  color: var(--mp-white);
}

/* Karten-Körper: Datum · Titel · Auszug · Weiterlesen */
.bx-news__body {
  display: flex; flex-direction: column;
  gap: var(--mp-space-2);
  padding: var(--mp-space-5);
}
/* Surface-Farben mit verschachteltem Fallback: --mp-surface-* ist nur in
   Kontexten gesetzt (on-dark = hell, Karte = lokal dunkel); fehlt es (helle
   Section, Inhalt in einem <a>, das die Vererbung bräche), greift hart das
   passende --mp-*-Token → nie ungültig, nie ungewollte Link-Blaufärbung. */
.bx-news__date {
  font-size: var(--mp-fs-sm);
  color: var(--News-meta-color, var(--mp-surface-fg-muted, var(--mp-fg-muted)));
}
.bx-news__itemTitle {
  font-size: var(--mp-fs-lg); font-weight: 800;
  line-height: var(--mp-lh-snug);
  color: var(--News-item-title-color, var(--mp-surface-fg, var(--mp-fg)));
}
.bx-news__itemTitle--lg { font-size: var(--mp-fs-xl); }
.bx-news__excerpt {
  font-size: var(--mp-fs-base);
  line-height: var(--mp-lh-normal);
  color: var(--News-excerpt-color, var(--mp-surface-fg-muted, var(--mp-fg-muted)));
}
.bx-news__readmore {
  display: inline-flex; align-items: center; gap: var(--mp-space-2);
  margin-top: var(--mp-space-1);
  font-size: var(--mp-fs-sm); font-weight: 700;
  color: var(--News-readmore-color, var(--mp-primary));
}
.bx-news__readmore i[data-lucide], .bx-news__readmore svg { width: 16px; height: 16px; transition: transform var(--mp-duration-fast) var(--mp-ease-standard); }
.bx-news__feature:hover .bx-news__readmore i, .bx-news__card:hover .bx-news__readmore i { transform: translateX(3px); }

/* --- Variante „Aufmacher + Liste“ --- */
.bx-news__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mp-space-7);
  align-items: start;
}
/* Liste sitzt DIREKT auf der Section (kein Karten-Reset) → Datum/Titel lesen die
   Section-Flächen-Rollen und flippen mit. Trennlinien auf dunklem Grund: siehe on-dark. */
.bx-news__list { list-style: none; margin: 0; padding: 0; }
/* Nur Trennlinien ZWISCHEN den Einträgen — die Linie über dem ersten schloss
   die Liste nach oben ab, obwohl daneben der Aufmacher frei beginnt. */
.bx-news__litem { border-bottom: 1px solid var(--News-list-border-color, var(--mp-border)); }
.bx-news__link {
  display: flex; flex-direction: column; gap: var(--mp-space-1);
  padding: var(--mp-space-4) 0;
  text-decoration: none;
  color: inherit;
}
/* Das Datum hatte keine eigene Zeilenhöhe und erbte --mp-lh-normal (1,5). Bei
   14 px sind das 3,5 px Leerraum über der ersten Ziffer, während der Titel
   darunter mit einer engeren Zeilenhöhe fast an der Trennlinie sitzt: bei
   symmetrischem Padding stand oben optisch mehr Luft als unten (gemessen
   21,8 px gegen 17,5 px). Mit --mp-lh-tight sind es 18,6 gegen 17,5 — der Rest
   hängt an den Unterlängen des jeweiligen Titels und ist nicht per CSS
   auflösbar. */
/* Bewusst auf die Listenzeile gescopet (.bx-news__link) — dieselbe Klasse
   trägt auch das Datum im Aufmacher und in den Karten, wo das Padding ein
   anderes ist und nichts zu korrigieren war. */
.bx-news__link .bx-news__date {
  line-height: var(--mp-lh-tight);
}
.bx-news__litemTitle {
  font-size: var(--mp-fs-md); font-weight: 700;
  line-height: var(--mp-lh-snug);
  color: var(--News-link-color, var(--mp-surface-fg, var(--mp-fg)));
  transition: color var(--mp-duration-fast) var(--mp-ease-standard);
}
.bx-news__link:hover .bx-news__litemTitle { color: var(--mp-surface-accent, var(--mp-primary)); }

/* --- Variante „Karten“ (Raster über .bx-grid--3) --- */
.bx-news__grid { gap: var(--mp-space-6); }

/* --- „Alle Meldungen“-Button (sitzt direkt auf der Section) --- */
.bx-news__action { margin-top: var(--mp-space-7); }
.bx-news__action.is-center { display: flex; justify-content: center; }

/* on-dark: Trennlinien sichtbar halten, Akzent-Linie → Cyan, Button invertieren
   (wie Icon-Links). Die Karten brauchen KEINE Sonderregel (Flächen-Rollen-Reset
   + reine <span>-Bausteine halten ihren Text dunkel/lesbar). */
.bx-section--on-dark .bx-news__litem { border-color: rgba(255, 255, 255, 0.16); }
.bx-section--on-dark .bx-news__action .bx-btn--primary { background: var(--mp-white); color: var(--mp-primary); }
.bx-section--on-dark .bx-news__action .bx-btn--primary:hover { background: var(--mp-cyan); color: var(--mp-dark-surface); }
.bx-section--on-dark .bx-news__action .bx-btn--ghost { color: var(--mp-white); }
.bx-section--on-dark .bx-news__action .bx-btn--ghost:hover { color: var(--mp-cyan); }

/* --- Responsive: Aufmacher + Liste stapeln (Karten brechen via .bx-grid um) --- */
@media (max-width: 860px) {
  .bx-news__split { grid-template-columns: 1fr; gap: var(--mp-space-6); }
}

/* ============================================================
   VERANSTALTUNGEN — Termine. Zwei Varianten: Kompakt (Datum-Badge
   links, .bx-events--compact) · Karten (Vorschaubild + Beschreibung,
   .bx-events--cards). Beide sind Spalten-Komponenten (1–3 via .bx-grid--N).
   Über --Events-* themebar (Fallback --mp-* / --mp-surface-*) → COMPONENT_THEME_SLOTS.
   Lesbarkeit: Termin-Karten sind self-contained und setzen die Flächen-Rollen
   lokal auf hell zurück; Überschrift + Kalender-Link lesen die Section-Flächen-
   Rollen und flippen auf dunklem/farbigem Grund automatisch mit.
   ============================================================ */
.bx-events { width: 100%; }

/* --- Kopf: Überschrift links + „Kalender öffnen“-Link rechts (Screenshot) --- */
.bx-events__header {
  display: flex; align-items: center;
  gap: var(--mp-space-4); flex-wrap: wrap;
  margin-bottom: var(--mp-space-6);
}
.bx-events__header.is-center { flex-direction: column; align-items: center; text-align: center; }
.bx-events__headline { min-width: 0; }
/* Überschrift = Heading-Atom; Farbe/Größe per Inline-Alias (--Events-title-color →
   Flächen-Rolle). Hier nur Abstands-Reset, damit das Atom-margin nicht doppelt. */
.bx-events__title { margin: 0; line-height: var(--mp-lh-snug); }
/* Kalender-Link: Textlink (kein Button), sitzt direkt auf der Section → liest die
   Flächen-Rolle und flippt auf farbigem Grund mit. margin-auto schiebt ihn rechts
   (auch wenn die Überschrift ausgeblendet ist). */
.bx-events__action {
  display: inline-flex; align-items: center; gap: var(--mp-space-2);
  flex: 0 0 auto; margin-inline-start: auto;
  font-size: var(--mp-fs-sm); font-weight: 700;
  text-decoration: none;
  color: var(--Events-action-color, var(--mp-surface-accent, var(--mp-primary)));
}
.bx-events__header.is-center .bx-events__action { margin-inline-start: 0; }
.bx-events__action i[data-lucide], .bx-events__action svg { width: 16px; height: 16px; transition: transform var(--mp-duration-fast) var(--mp-ease-standard); }
.bx-events__action:hover i { transform: translateX(3px); }

/* --- Raster (1–3 Spalten via .bx-grid--N) --- */
.bx-events__grid { gap: var(--mp-space-5); }

/* --- Datum-Badge (Tag groß, Monat klein) — eigene Farben → grundunabhängig lesbar --- */
.bx-events__badge {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; padding: var(--mp-space-2);
  border-radius: var(--Events-badge-radius, var(--mp-radius-md));
  background: var(--Events-badge-bg, var(--mp-primary));
  color: var(--Events-badge-fg, var(--mp-white));
  line-height: 1;
}
.bx-events__badgeDay { font-size: var(--mp-fs-xl); font-weight: 800; }
.bx-events__badgeMonth { margin-top: 2px; font-size: var(--mp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* --- Gemeinsame Textstellen (Titel · Ort/Uhrzeit · Beschreibung) --- */
.bx-events__cardTitle {
  font-size: var(--mp-fs-md); font-weight: 800;
  line-height: var(--mp-lh-snug);
  color: var(--Events-item-title-color, var(--mp-surface-fg, var(--mp-fg)));
}
.bx-events__meta {
  display: inline-flex; align-items: center; gap: var(--mp-space-2);
  font-size: var(--mp-fs-sm);
  color: var(--Events-meta-color, var(--mp-surface-fg-muted, var(--mp-fg-muted)));
}
/* Icons der Meta-Zeile: bewusst in der Akzentfarbe, nicht in der Textfarbe der
   Zeile (diese Regel ist spezifischer und überschreibt die geerbte Farbe).
   Über --Events-meta-icon-color im Theming-Architekten einstellbar; Standard ist
   die Flächen-Rolle, folgt also weiter hell/dunkel. */
.bx-events__meta i[data-lucide], .bx-events__meta svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--Events-meta-icon-color, var(--mp-surface-accent, var(--mp-primary))); }
.bx-events__excerpt {
  font-size: var(--mp-fs-base); line-height: var(--mp-lh-normal);
  color: var(--Events-excerpt-color, var(--mp-surface-fg-muted, var(--mp-fg-muted)));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Gemeinsame Karten-Fläche (Zeile + Karte) --- */
/* Self-contained: eigene helle Fläche → Flächen-Rollen lokal auf hell zurücksetzen,
   damit der Text auch auf dunkler/primärer/bildbasierter Section lesbar bleibt.
   Alle Textstellen sind <span> → keine globale on-dark-Tag-Regel leckt hinein. */
.bx-events__row, .bx-events__card {
  text-decoration: none; color: inherit;
  background: var(--Events-card-bg, var(--mp-bg));
  border: 1px solid var(--Events-card-border-color, var(--mp-border));
  border-radius: var(--Events-card-radius, var(--mp-radius-md));
  box-shadow: var(--Events-card-shadow, var(--mp-shadow-xs));
  --mp-surface-fg: var(--mp-fg);
  --mp-surface-fg-muted: var(--mp-fg-muted);
  --mp-surface-accent: var(--mp-primary);
  transition: box-shadow var(--mp-duration-base) var(--mp-ease-standard),
              transform var(--mp-duration-base) var(--mp-ease-standard);
}
.bx-events__row:hover, .bx-events__card:hover {
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
}

/* --- Variante „Kompakt“: Datum-Badge links, Titel + Ort rechts --- */
.bx-events__row {
  display: flex; align-items: center; gap: var(--mp-space-4);
  padding: var(--mp-space-4);
}
.bx-events__rowBody { display: flex; flex-direction: column; gap: var(--mp-space-1); min-width: 0; }

/* --- Variante „Karten“: Vorschaubild (Badge-Overlay) + Körper --- */
.bx-events__card { display: flex; flex-direction: column; overflow: hidden; }
.bx-events__cover {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  /* Standard ohne Radius — als Token, nicht als Literal, damit der
     Theming-Editor denselben Standard anzeigt, den das Stylesheet benutzt.
     Vorher deklarierte der Slot --mp-radius-sm, das CSS aber 0: der Editor
     versprach abgerundete Ecken, die es nie gab. */
  border-radius: var(--Events-cover-radius, var(--mp-radius-none));
}
/* Gesetztes Vorschaubild (WYSIWYG) füllt den Cover-Rahmen wie der Platzhalter. */
.bx-events__coverImg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Badge sitzt in der Karten-Variante als Overlay auf der Bild-Ecke */
.bx-events__cover .bx-events__badge {
  position: absolute;
  top: var(--mp-space-3); left: var(--mp-space-3);
  box-shadow: var(--mp-shadow-sm);
}
.bx-events__cardBody {
  display: flex; flex-direction: column; gap: var(--mp-space-2);
  padding: var(--mp-space-5);
}

/* on-dark: Akzent-Linie (generisch über .bx-heading__decor--line, s. o.) +
   Kalender-Link → Cyan (die Karten bleiben self-contained hell/dunkel, das
   Badge trägt eigene Farben). */
.bx-section--on-dark .bx-events__action { color: var(--mp-cyan); }

/* Responsive: Raster bricht via .bx-grid um; die Kompakt-Zeile bleibt Zeile. */

/* ============================================================
   Redaktioneller Richtext (WYSIWYG-Inhalte, studio/editable.jsx)
   Befüllte Richtext-Felder rendern als <div class="… cp-rich"> mit
   sanitisierten <p>/<ul>/<ol>-Blöcken — hier bekommen die Blöcke
   ihre Abstände (die Platzhalter-Absätze von heute haben margin 0).
   Geteilt von Builder-iframe, Teilen- und Backup-Viewer.
   ============================================================ */
.cp-rich > p { margin: 0 0 0.75em; }
.cp-rich > p:last-child { margin-bottom: 0; }
.cp-rich > ul, .cp-rich > ol { margin: 0 0 0.75em; padding-left: 1.25em; }
.cp-rich > ul:last-child, .cp-rich > ol:last-child { margin-bottom: 0; }
.cp-rich a { color: inherit; text-decoration: underline; }

/* ============================================================
   Dynamische Inhalte (Repeater, CMS Phase C) — Kinder als vertikaler
   Stapel im Block-Rhythmus; .bx-dynlist__status ist die Builder-
   Statuszeile (Quelle fehlt / ×N Einträge), sie wird nie gebakt. */
.bx-dynlist {
  display: flex;
  flex-direction: column;
  gap: var(--cp-stack-gap, 24px);
}
.bx-dynlist__status {
  font-size: 12px;
  line-height: 1.4;
  color: var(--mp-fg-muted, #667);
  border: 1px dashed var(--mp-border, #ccd);
  border-radius: 6px;
  padding: 6px 10px;
}

/* ============================================================
   Individuelle Komponenten — eigener Slot ({{slot name}}, Task 12
   "Visual Builder"). Ausgegeben von studio/custom/render.jsx's cc-slot-Zweig
   NUR, wenn CustomComponentRender OHNE slotContent aufgerufen wird — in der
   echten Boot-Kette passiert das ausschließlich in der Werkstatt-Vorschau
   einer Definition in Isolation (views/visual/workshop-preview.jsx), NIE für
   eine platzierte Instanz: Canvas-InstanceNode/RenderBaked bauen slotContent
   für jeden variant.slots-Eintrag GENERISCH (auch als leerer Stack), s.
   registry.jsx buildVariant. Deshalb hier statt in shell.css (Studio-Chrome,
   --ps--*-Tokens) — die Werkstatt-Vorschau lebt in einem eigenen iframe, das
   NUR design-system/colors_and_type.css + diese Datei lädt, kein shell.css.
   Optik an .cp-pz-empty (Canvas-Leerslot, builder/iframe.jsx) angelehnt, aber
   ohne Drag&Drop-Zustände — reine Platzhalter-Anzeige. */
.cc-slot-empty {
  border: 2px dashed var(--mp-border-strong, #ccd);
  border-radius: var(--mp-radius-md, 8px);
  padding: var(--mp-space-6, 32px) var(--mp-space-5, 24px);
  text-align: center;
  color: var(--mp-surface-fg-muted, var(--mp-fg-muted, #667));
  font-family: var(--mp-font-sans);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Zeitstrahl (Historie) ---------- */
/*
  Component variables — override these per-instance or per-variant:

  --Timeline-line-color      Colour of the time axis                 [var(--mp-border-strong)]
  --Timeline-marker-color    Colour of the entry marker dot          [var(--mp-primary)]
  --Timeline-card-bg         Entry card background                   [var(--mp-bg)]
  --Timeline-card-radius     Entry card corner radius                [var(--mp-radius-md)]
  --Timeline-card-shadow     Entry card shadow                       [var(--mp-shadow-xs)]
  --Timeline-card-padding    Entry card inner spacing                [var(--mp-space-6)]
  --Timeline-year-color      Year colour                             [var(--mp-fg)]
  --Timeline-year-size       Year font size                          [var(--mp-fs-xl)]
  --Timeline-tag-color       Tag colour                              [var(--mp-primary)]
  --Timeline-axis-active     Active year on the axis (slider only)   [var(--mp-primary)]
  --Timeline-play-radius     Play button corner radius               [var(--mp-radius-pill)]
  --Timeline-play-bg         Play button background                  [var(--mp-white)]
  --Timeline-play-color      Play button icon colour                 [var(--mp-fg)]
  --Timeline-play-shadow     Play button shadow                      [var(--mp-shadow-md)]

  Die Linienbreite ist bewusst KEINE Alias-Variable: 2px ist kein Token-Wert,
  und ein Theme-Slot ist laut studio/theme-slots.js genau eine token-gedeckte
  Stelle.
*/
.bx-timeline__head { margin-bottom: var(--mp-space-7); }
.bx-timeline__head.is-center { text-align: center; }

.bx-timeline__card {
  background: var(--Timeline-card-bg, var(--mp-bg));
  border-radius: var(--Timeline-card-radius, var(--mp-radius-md));
  box-shadow: var(--Timeline-card-shadow, var(--mp-shadow-xs));
  padding: var(--Timeline-card-padding, var(--mp-space-6));
}
.bx-timeline__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mp-space-3);
}
.bx-timeline__year {
  font-weight: 900;
  line-height: 1.1;
  color: var(--Timeline-year-color, var(--mp-fg));
  font-size: var(--Timeline-year-size, var(--mp-fs-xl));
}
.bx-timeline__tag {
  font-size: var(--mp-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--Timeline-tag-color, var(--mp-primary));
  white-space: nowrap;
}
.bx-timeline__title {
  font-size: var(--mp-fs-lg);
  font-weight: 800;
  line-height: 1.25;
  margin: var(--mp-space-3) 0 var(--mp-space-2);
}
.bx-timeline__text {
  margin: 0;
  color: var(--mp-fg-muted);
  font-size: var(--mp-fs-sm);
  line-height: 1.6;
}
.bx-timeline__media {
  margin-top: var(--mp-space-5);
  border-radius: var(--mp-radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
}
/* NUR das echte Bild. `.bx-imgph` ist hier bewusst NICHT mitgemeint: der
   Platzhalter bringt width/height:100% selbst mit und zentriert sein Icon über
   `display:flex` — ein `display:block` von hier gewinnt per Spezifität (0,2,0
   gegen 0,1,0) und schaltet die Zentrierung ab. Genau so saß das Icon oben
   links statt in der Mitte. */
.bx-timeline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alternierend: mittige Achse, Karten wechselseitig */
.bx-timeline--alt .bx-timeline__body { position: relative; }
.bx-timeline--alt .bx-timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--Timeline-line-color, var(--mp-border-strong));
}
.bx-timeline--alt .bx-timeline__entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mp-space-7);
  position: relative;
}
.bx-timeline--alt .bx-timeline__entry {
  display: grid;
  grid-template-columns: 1fr 2rem 1fr;
  align-items: start;
}
.bx-timeline--alt .bx-timeline__entry > .bx-timeline__card { grid-column: 1; }
.bx-timeline--alt .bx-timeline__entry:nth-child(even) > .bx-timeline__card { grid-column: 3; }
.bx-timeline--alt .bx-timeline__dot {
  grid-column: 2;
  justify-self: center;
  margin-top: var(--mp-space-6);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--Timeline-marker-color, var(--mp-primary));
}

/* Mobil: kein Zickzack — einspaltig mit Achse links. Die Regel steht NACH den
   Basis-Regeln (Cascade-Order), sonst greift sie nicht. */
@media (max-width: 860px) {
  .bx-timeline--alt .bx-timeline__line { left: 6px; transform: none; }
  .bx-timeline--alt .bx-timeline__entry {
    grid-template-columns: 16px 1fr;
    gap: var(--mp-space-4);
  }
  .bx-timeline--alt .bx-timeline__entry > .bx-timeline__card,
  .bx-timeline--alt .bx-timeline__entry:nth-child(even) > .bx-timeline__card { grid-column: 2; }
  .bx-timeline--alt .bx-timeline__dot { grid-column: 1; justify-self: start; }
}

/* Kompakt: Achse links, einspaltig, medienfrei. Die Karten-Chrome bleibt
   token-gedeckt (gleiche --Timeline-card-*-Variablen wie alternierend) — sonst
   wären die Theme-Slots in dieser Variante wirkungslos. */
.bx-timeline--compact .bx-timeline__body { position: relative; }
.bx-timeline--compact .bx-timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: var(--Timeline-line-color, var(--mp-border-strong));
}
.bx-timeline--compact .bx-timeline__entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mp-space-5);
}
.bx-timeline--compact .bx-timeline__entry {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--mp-space-4);
  align-items: start;
}
.bx-timeline--compact .bx-timeline__dot {
  margin-top: var(--mp-space-5);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--Timeline-marker-color, var(--mp-primary));
}

/* Slider: Kopfzeile mit Pfeilen, Spur, Jahres-Achse */
.bx-timeline--slider .bx-timeline__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mp-space-5);
}
.bx-timeline--slider .bx-timeline__head { margin-bottom: 0; }
.bx-timeline__nav { display: flex; gap: var(--mp-space-2); flex: 0 0 auto; }
.bx-timeline__navBtn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-white);
  color: var(--mp-fg);
  cursor: pointer;
}
.bx-timeline__navBtn:disabled { opacity: 0.4; cursor: not-allowed; }
.bx-timeline__viewport { overflow: hidden; margin-top: var(--mp-space-6); }
.bx-timeline__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform var(--mp-duration-slow) var(--mp-ease-standard);
}
.bx-timeline__slide {
  flex: 0 0 calc(100% / var(--Timeline-perview, 3));
  box-sizing: border-box;
  padding-right: var(--mp-space-5);
}
.bx-timeline__axis {
  list-style: none;
  display: flex;
  margin: var(--mp-space-6) 0 0;
  padding: 0;
  overflow-x: auto;
  border-top: 1px solid var(--Timeline-line-color, var(--mp-border-strong));
}
.bx-timeline__axisItem { flex: 1 0 auto; }
.bx-timeline__axisBtn {
  width: 100%;
  padding: var(--mp-space-3) var(--mp-space-4);
  border: 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  background: none;
  cursor: pointer;
  font-size: var(--mp-fs-xs);
  font-weight: 700;
  color: var(--mp-fg-muted);
  white-space: nowrap;
}
.bx-timeline__axisBtn.is-active {
  color: var(--Timeline-axis-active, var(--mp-primary));
  border-top-color: var(--Timeline-axis-active, var(--mp-primary));
}

/* Mobil: nur Layout. Die Zahl der sichtbaren Einträge kommt aus usePerView im
   Render — hier NICHT per --Timeline-perview überschreiben, sonst driften
   Stylesheet und Schrittgrenze auseinander. */
@media (max-width: 860px) {
  .bx-timeline--slider .bx-timeline__bar { flex-direction: column; align-items: flex-start; }
  .bx-timeline__slide { padding-right: 0; }
}

/* Reduced Motion: die Spur springt statt zu gleiten. */
@media (prefers-reduced-motion: reduce) {
  .bx-timeline__track { transition: none; }
}

/* Medien eines Eintrags: Poster + optionaler Play-Knopf */
.bx-timeline__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bx-timeline__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--Timeline-play-radius, var(--mp-radius-pill));
  background: var(--Timeline-play-bg, var(--mp-white));
  color: var(--Timeline-play-color, var(--mp-fg));
  box-shadow: var(--Timeline-play-shadow, var(--mp-shadow-md));
  cursor: pointer;
}

/* ============================================================
   Medien-Slot · Video (Cover + Klick zum Laden)
   Geteilt von Builder-Canvas, Teilen- und Backup-Viewer — alle drei laden
   diese Datei. Die älteren .cp-media-Regeln liegen historisch dreifach
   (builder/iframe.jsx, share.blade.php, backup.blade.php); hier kommt
   BEWUSST keine vierte Kopie hinzu, nur das Neue.
   ============================================================ */
.cp-media__video { position: relative; width: 100%; height: 100%; }
.cp-media__video .cp-media__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Klick-Hülle um das Cover-<img> — <img> selbst darf laut A11y-Gate keine
   interaktive Rolle tragen, siehe media-embed.jsx. */
.cp-media__video .cp-media__cover { display: block; width: 100%; height: 100%; }
.cp-media__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: var(--mp-radius-pill);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-primary); color: var(--mp-primary-fg);
  /* Kein Schatten-Token (--mp-shadow-*) verwendet: die sind alle mit dem
     Marken-Ton getönt (rgba(29,53,87,…), siehe colors_and_type.css) und für
     Elevation auf HELLEM Untergrund gedacht. Dieser Knopf schwebt über einem
     beliebigen, oft dunklen Video-Cover und braucht einen neutral-schwarzen
     Schatten, damit er auf jedem Bild lesbar bleibt — dieselbe Überlegung wie
     bei .bx-video__btn/.bx-timeline__play, nur ohne Token-Entsprechung für
     „schwarzer Schatten". Die Farbe selbst kommt trotzdem aus dem Token
     --mp-black; nur die Deckkraft (0.28) hat keine Entsprechung. */
  box-shadow: 0 6px 20px color-mix(in srgb, var(--mp-black) 28%, transparent);
}
.cp-media__play:hover { background: var(--mp-primary-hover); }
.cp-media__play i, .cp-media__play svg { width: 22px; height: 22px; }
/* Gleicher Ring wie .bx-btn/.bx-search__input (--mp-focus-ring) — Cover und
   Play-Knopf sind im Inhalt-Modus per Tastatur fokussierbar (siehe
   media-embed.jsx role="button"/tabIndex), hatten aber bisher keinen eigenen
   :focus-visible-Zustand; .cp-media selbst hat einen (builder/iframe.jsx),
   diese beiden neuen Elemente lagen nicht darunter. */
.cp-media__play:focus-visible, .cp-media__cover:focus-visible, .cp-media__ph--video:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mp-focus-ring);
}
.cp-media__embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.cp-media__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-media__note {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px; font-size: 11px; line-height: 1.3;
  /* Gleiche Begründung wie beim Play-Knopf oben: neutral-schwarzes Scrim für
     Lesbarkeit über beliebigen Bildern, kein Schatten-/Oberflächen-Token
     passt dafür — nur die Deckkraft (0.7) ist ohne Entsprechung. */
  background: color-mix(in srgb, var(--mp-black) 70%, transparent);
  color: var(--mp-white);
}