/* =========================================================================
   EHBS Knecht – Modernes Web-Designsystem (Erste Hilfe & Brandschutz)
   Skill: ehbs-knecht-web-modern. Gleiche Markenregeln wie ehbs-knecht-web,
   modernes Erscheinungsbild: Geist (selbst gehostet), weiche Radien,
   Tiefe über getönte Schatten, Hell/Dunkel, Bewegung mit klarer Absicht.
   Klassen-API kompatibel zu ehbs-web.css (alle ehbs-* Klassen existieren).
   Marke:  <html lang="de" data-marke="ehbs-ingenieure"> bzw. "dba"
   Thema:  automatisch per System, erzwingen mit data-theme="hell" | "dunkel"
   Keine neuen Hex-Werte hinzufügen, nur Tokens verwenden.
   ========================================================================= */

/* ---------- Schrift: Geist, lokal ausgeliefert (DSGVO, kein CDN) ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../static/fonts/geist-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../static/fonts/geist-latin-wght-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Markenfarben (offizielles Farb-PDF, unverändert) */
  --ehbs-blue:       #232e6a;
  --ehbs-blue-dark:  #19214d;
  --ehbs-red:        #ac1410;
  --ehbs-red-dark:   #870f0c;
  --ehbs-yellow:     #f7a941;
  --ehbs-orange:     #eb5c2e;
  --ehbs-grey:       #706f6f;
  --ehbs-anthracite: #575756;
  --ehbs-dark:       #2B2B2B;

  /* Leitfarbe der aktiven Marke */
  --ehbs-primary:      var(--ehbs-blue);
  --ehbs-primary-dark: var(--ehbs-blue-dark);
  --ehbs-primary-tint: #e9ebf3;

  /* Flächen – hell */
  --ehbs-white:   #ffffff;
  --ehbs-bg:      #ffffff;
  --ehbs-bg-soft: #f5f6fa;   /* Abschnittsfläche, aus der Leitfarbe getönt */
  --ehbs-bg-light:#EDEDED;
  --ehbs-surface: #ffffff;   /* Karten, Tabellen, Formulare */
  --ehbs-line:    #D9D9D9;
  --ehbs-line-soft: color-mix(in srgb, var(--ehbs-primary) 10%, transparent);
  --ehbs-tint-hinweis: #FDF6E9;
  --ehbs-tint-warnung: #F7E7E6;

  /* Text */
  --ehbs-text:         #000000;
  --ehbs-text-sek:     #595959;
  --ehbs-text-on-dark: #ffffff;
  --ehbs-link:         var(--ehbs-primary);
  --ehbs-error:        #C0392B;

  /* Akzentlinie (Rot auf hell, Gelb auf dunkel) und Fokus */
  --ehbs-accent-line: var(--ehbs-red);
  --ehbs-focus:       var(--ehbs-primary);

  /* Fachliche Ampel – NICHT Markenfarben */
  --ampel-green:  #2E7D32;
  --ampel-yellow: #E3A615;
  --ampel-red:    #C0392B;
  --ampel-dark:   #2B2B2B;

  /* Typografie */
  --ehbs-font: "Geist", Arial, "Liberation Sans", Helvetica, sans-serif;
  --fs-small: 0.875rem;
  --fs-base:  1.0625rem;
  --fs-lg:    clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --fs-h3:    1.25rem;
  --fs-h2:    clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h1:    clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-kpi:   clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --tracking-tight: -0.035em;
  --tracking-head:  -0.02em;

  /* Raster */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;   --space-12: 3rem;  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 3rem + 4vw, 7rem);
  --container: 1200px;

  /* Radien nach Hierarchie, nicht ein Wert für alles */
  --radius-sm: 8px;    /* Badges, Eingabefelder */
  --radius:    12px;   /* Buttons, Boxen */
  --radius-lg: 20px;   /* Karten, Tabellencontainer */
  --radius-xl: 28px;   /* Hero-Medien, große Flächen */

  /* Tiefe: Schatten in der Leitfarbe getönt, mehrschichtig */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ehbs-primary) 8%, transparent);
  --shadow:    0 1px 2px color-mix(in srgb, var(--ehbs-primary) 6%, transparent),
               0 4px 12px -2px color-mix(in srgb, var(--ehbs-primary) 10%, transparent);
  --shadow-lg: 0 2px 4px color-mix(in srgb, var(--ehbs-primary) 6%, transparent),
               0 18px 40px -12px color-mix(in srgb, var(--ehbs-primary) 28%, transparent);

  /* Bewegung (Emil Kowalski: kurz, ease-out, nur transform/opacity) */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-fast: 150ms;   /* Hover, Farbe, Press */
  --dur:      220ms;   /* Hover-Lift, Menüs */
  --dur-slow: 600ms;   /* Scroll-Reveal, Akzentlinie */
}

/* ---------- Markenschalter ---------- */
[data-marke="ehbs-ingenieure"] {
  --ehbs-primary: var(--ehbs-grey); --ehbs-primary-dark: var(--ehbs-anthracite); --ehbs-primary-tint: var(--ehbs-bg-light);
}
[data-marke="dba"] {
  --ehbs-primary: var(--ehbs-anthracite); --ehbs-primary-dark: var(--ehbs-dark); --ehbs-primary-tint: var(--ehbs-bg-light);
}

/* ---------- Dunkles Thema ----------
   Grund ist ein aus Dunkelblau abgeleitetes Nachtblau. Text Weiß, Links und
   Akzentlinie Gelb (Rot hätte nur 2,6:1). Kontrastwerte: references/farben-kontrast.md */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --ehbs-bg:      #0c1029;
    --ehbs-bg-soft: #141a3d;
    --ehbs-surface: #141a3d;
    --ehbs-surface-2: #1b2350;
    --ehbs-line:    #2e3870;
    --ehbs-line-soft: rgba(255,255,255,.08);
    --ehbs-primary-tint: #1b2350;
    --ehbs-tint-hinweis: #1b2350;
    --ehbs-tint-warnung: #1b2350;
    --ehbs-text:     #ffffff;
    --ehbs-text-sek: #b8bdd6;
    --ehbs-link:     var(--ehbs-yellow);
    --ehbs-error:    #ef7a6d;
    --ehbs-accent-line: var(--ehbs-yellow);
    --ehbs-focus:    var(--ehbs-yellow);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.5);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --ehbs-bg:      #0c1029;
  --ehbs-bg-soft: #141a3d;
  --ehbs-surface: #141a3d;
  --ehbs-surface-2: #1b2350;
  --ehbs-line:    #2e3870;
  --ehbs-line-soft: rgba(255,255,255,.08);
  --ehbs-primary-tint: #1b2350;
  --ehbs-tint-hinweis: #1b2350;
  --ehbs-tint-warnung: #1b2350;
  --ehbs-text:     #ffffff;
  --ehbs-text-sek: #b8bdd6;
  --ehbs-link:     var(--ehbs-yellow);
  --ehbs-error:    #ef7a6d;
  --ehbs-accent-line: var(--ehbs-yellow);
  --ehbs-focus:    var(--ehbs-yellow);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -12px rgba(0,0,0,.7);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--ehbs-font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ehbs-text);
  background: var(--ehbs-bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 var(--space-4); color: var(--ehbs-text); font-weight: 650; letter-spacing: var(--tracking-head); text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); font-weight: 700; line-height: 1.02; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p  { margin: 0 0 var(--space-4); text-wrap: pretty; }
a  { color: var(--ehbs-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
     transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--ehbs-red); text-decoration-thickness: 2px; }
:root[data-theme="dunkel"] a:hover { color: var(--ehbs-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) a:hover { color: var(--ehbs-text); } }
:focus-visible { outline: 3px solid var(--ehbs-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ehbs-yellow); color: #000; }

/* Dunkle Markenflächen: Fokus und Akzent Gelb, Text Weiß */
.ehbs-topbar, .ehbs-hero, .ehbs-cta-band, .ehbs-footer, .ehbs-sidenav, .ehbs-on-dark {
  --ehbs-focus: var(--ehbs-yellow); --ehbs-accent-line: var(--ehbs-yellow); --ehbs-link: var(--ehbs-text-on-dark);
}

.ehbs-container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1rem, .5rem + 2vw, 2rem); }
.ehbs-section { padding: var(--section-y) 0; }
.ehbs-section--soft { background: var(--ehbs-bg-soft); }
.ehbs-section__intro { max-width: 44rem; margin-bottom: var(--space-12); }
.ehbs-section__intro p { font-size: var(--fs-lg); color: var(--ehbs-text); }
.ehbs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ehbs-skip { position: absolute; left: -9999px; top: var(--space-2); background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); padding: var(--space-2) var(--space-4); z-index: 100; border-radius: var(--radius-sm); }
.ehbs-skip:focus { left: var(--space-4); }
.ehbs-meta { font-size: var(--fs-small); color: var(--ehbs-text-sek); }

/* ---------- Überschrift mit Akzentlinie (Markenzeichen) ----------
   Die Linie zeichnet sich beim Einblenden einmal von links ein. */
.ehbs-heading { position: relative; padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.ehbs-heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 4px; border-radius: 2px; background: var(--ehbs-accent-line);
  transform-origin: left center;
}
.ehbs-heading--center { text-align: center; }
.ehbs-heading--center::after { left: 50%; margin-left: -32px; transform-origin: center; }
.js [data-reveal] .ehbs-heading::after, .js .ehbs-heading[data-reveal]::after { transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-out) 150ms; }
.js .is-visible .ehbs-heading::after, .js .ehbs-heading.is-visible::after { transform: scaleX(1); }

/* ---------- Topbar + Header ---------- */
.ehbs-topbar { background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); font-size: var(--fs-small); }
.ehbs-topbar .ehbs-container { display: flex; justify-content: flex-end; gap: var(--space-6); padding-top: var(--space-2); padding-bottom: var(--space-2); flex-wrap: wrap; }
.ehbs-topbar a { color: var(--ehbs-text-on-dark); text-decoration: none; }
.ehbs-topbar a:hover { text-decoration: underline; color: var(--ehbs-text-on-dark); }

.ehbs-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ehbs-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ehbs-header.is-scrolled { border-bottom-color: var(--ehbs-line-soft); box-shadow: var(--shadow-sm); }
.ehbs-header .ehbs-container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 76px; }
/* Logo immer auf Weiß (Markenregel) – im dunklen Thema als weiße Plakette */
.ehbs-logo { display: inline-flex; background: var(--ehbs-white); border-radius: var(--radius); padding: 6px 10px; margin-left: -10px; }
.ehbs-logo img { height: 52px; width: auto; }
.ehbs-nav ul { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; align-items: center; }
.ehbs-nav a:not(.ehbs-btn) { color: var(--ehbs-text); }
.ehbs-nav a {
  position: relative; text-decoration: none; font-weight: 550;
  padding: var(--space-2) var(--space-3); min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ehbs-nav a:not(.ehbs-btn):hover { background: var(--ehbs-line-soft); color: var(--ehbs-text); }
.ehbs-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px; height: 3px; border-radius: 2px; background: var(--ehbs-accent-line);
}
.ehbs-nav a.ehbs-btn { margin-left: var(--space-2); }
.ehbs-header__tools { display: flex; align-items: center; gap: var(--space-2); }
.ehbs-nav-toggle, .ehbs-theme-toggle {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-3);
  background: transparent; color: var(--ehbs-text); border: 1px solid var(--ehbs-line); border-radius: var(--radius);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ehbs-nav-toggle:hover, .ehbs-theme-toggle:hover { background: var(--ehbs-line-soft); }
.ehbs-nav-toggle:active, .ehbs-theme-toggle:active { transform: scale(.96); }
.ehbs-nav-toggle { display: none; }
.ehbs-theme-toggle svg { width: 20px; height: 20px; }
.ehbs-theme-toggle .i-mond { display: none; }
:root[data-theme="dunkel"] .ehbs-theme-toggle .i-sonne { display: none; }
:root[data-theme="dunkel"] .ehbs-theme-toggle .i-mond { display: block; }

@media (max-width: 920px) {
  .ehbs-nav-toggle { display: inline-grid; }
  .ehbs-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ehbs-bg); border-bottom: 1px solid var(--ehbs-line-soft); box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .ehbs-nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .ehbs-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
  .ehbs-nav a:not(.ehbs-btn) { display: flex; padding: var(--space-3); }
  .ehbs-nav a[aria-current="page"]::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .ehbs-nav a.ehbs-btn { margin: var(--space-3) 0 0; justify-content: center; }
  .ehbs-logo img { height: 40px; }
}

/* ---------- Buttons ---------- */
.ehbs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius);
  font: inherit; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ehbs-btn:active { transform: scale(.97); }
.ehbs-btn svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.ehbs-btn:hover svg { transform: translateX(2px); }
/* Hauptaktion: Leitfarbe mit feinem Innenlicht */
.ehbs-btn--primary { background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-sm); }
.ehbs-btn--primary:hover { background: var(--ehbs-primary-dark); color: var(--ehbs-text-on-dark); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow); }
/* Rot NUR auf Landingpages zu Anzeigen (Domäne D) und bei Alarmthemen, max. 1 pro Ansicht */
.ehbs-btn--cta { background: var(--ehbs-red); color: var(--ehbs-text-on-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-sm); }
.ehbs-btn--cta:hover { background: var(--ehbs-red-dark); color: var(--ehbs-text-on-dark); text-decoration: none; }
.ehbs-btn--outline { background: transparent; color: var(--ehbs-text); border-color: var(--ehbs-line); }
.ehbs-btn--outline:hover { border-color: var(--ehbs-text); color: var(--ehbs-text); text-decoration: none; }
.ehbs-btn--on-dark { background: var(--ehbs-white); color: var(--ehbs-blue); }
[data-marke="ehbs-ingenieure"] .ehbs-btn--on-dark, [data-marke="dba"] .ehbs-btn--on-dark { color: var(--ehbs-primary-dark); }
.ehbs-btn--on-dark:hover { background: var(--ehbs-primary-tint); color: var(--ehbs-blue); text-decoration: none; }
.ehbs-btn--ghost-dark { background: rgba(255,255,255,.06); color: var(--ehbs-text-on-dark); border-color: rgba(255,255,255,.45); }
.ehbs-btn--ghost-dark:hover { background: rgba(255,255,255,.14); border-color: var(--ehbs-white); color: var(--ehbs-text-on-dark); text-decoration: none; }
.ehbs-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
/* Dunkles Thema: Hauptaktion wird Weiß (Blau auf Nachtblau trennt sich nicht) */
:root[data-theme="dunkel"] .ehbs-btn--primary { background: var(--ehbs-white); color: var(--ehbs-blue); }
:root[data-theme="dunkel"] .ehbs-btn--primary:hover { background: var(--ehbs-primary-tint); color: var(--ehbs-white); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .ehbs-btn--primary { background: var(--ehbs-white); color: var(--ehbs-blue); }
  :root:not([data-theme="hell"]) .ehbs-btn--primary:hover { background: var(--ehbs-primary-tint); color: var(--ehbs-white); }
}

/* ---------- Hero ----------
   Leitfarbe mit Tiefe: zwei weiche Lichtfelder aus der Leitfarbe, feines Raster,
   roter Randstreifen links (Markenregel). */
.ehbs-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--ehbs-white) 14%, var(--ehbs-primary)) 0%, transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, var(--ehbs-primary-dark) 0%, transparent 70%),
    var(--ehbs-primary);
  color: var(--ehbs-text-on-dark);
  padding: clamp(4.5rem, 3rem + 6vw, 8.5rem) 0 clamp(4rem, 3rem + 4vw, 7rem);
}
.ehbs-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ehbs-red); z-index: 1; }
.ehbs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
}
.ehbs-hero h1, .ehbs-hero h2, .ehbs-hero p { color: var(--ehbs-text-on-dark); }
.ehbs-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.ehbs-hero__grid--single { grid-template-columns: minmax(0, 52rem); }
.ehbs-hero__lead { font-size: var(--fs-lg); max-width: 36rem; line-height: 1.55; color: var(--ehbs-text-on-dark); }
.ehbs-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.ehbs-hero__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); outline: 1px solid rgba(255,255,255,.12); outline-offset: -1px; }
.ehbs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ehbs-hero__media .ehbs-placeholder { height: 100%; border-radius: 0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); color: var(--ehbs-text-on-dark); }
.ehbs-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); margin: var(--space-12) 0 0; padding: var(--space-6) 0 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
.ehbs-hero__facts li { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.ehbs-hero__facts svg { width: 20px; height: 20px; color: var(--ehbs-yellow); flex: none; }
@media (max-width: 860px) { .ehbs-hero__grid { grid-template-columns: 1fr; } .ehbs-hero__media { aspect-ratio: 16 / 10; } }

/* ---------- Raster & Karten ---------- */
.ehbs-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Bento: asymmetrisch statt drei gleicher Karten. Erstes Element groß. */
.ehbs-bento { display: grid; gap: var(--space-6); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ehbs-bento > :nth-child(1) { grid-column: span 4; grid-row: span 2; }
.ehbs-bento > :nth-child(n+2) { grid-column: span 2; }
.ehbs-bento > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 860px) { .ehbs-bento { grid-template-columns: 1fr; } .ehbs-bento > * { grid-column: auto !important; grid-row: auto !important; } }

.ehbs-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ehbs-surface); border: 1px solid var(--ehbs-line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* Markenkante oben: kurze Linie statt voller Balken */
.ehbs-card::before { content: ""; position: absolute; top: -1px; left: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ehbs-primary); }
:root[data-theme="dunkel"] .ehbs-card::before { background: var(--ehbs-yellow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .ehbs-card::before { background: var(--ehbs-yellow); } }
.ehbs-card--accent::before { background: var(--ehbs-red) !important; width: 64px; }
/* Hover-Lift nur bei echten Zeigegeräten, nur wenn die Karte klickbar ist */
@media (hover: hover) and (pointer: fine) {
  .ehbs-card--link:hover, .ehbs-card:has(.ehbs-card__link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ehbs-primary) 22%, transparent); }
}
.ehbs-card h3 { margin-bottom: var(--space-2); }
.ehbs-card--feature h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: var(--tracking-tight); }
.ehbs-card--feature { background: linear-gradient(160deg, var(--ehbs-primary-tint), var(--ehbs-surface) 60%); }
.ehbs-card__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); display: grid; place-items: center; margin-bottom: var(--space-6); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ehbs-card__icon svg { width: 24px; height: 24px; }
.ehbs-card__footer { margin-top: auto; padding-top: var(--space-6); }
.ehbs-card__meta { font-size: var(--fs-small); color: var(--ehbs-text-sek); }
/* Ganze Karte klickbar über einen Link (Stretched Link) */
.ehbs-card__link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.ehbs-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ehbs-card__link:hover { text-decoration: underline; }

/* ---------- Ablauf (nur für echte Reihenfolgen) ---------- */
.ehbs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: schritt; }
.ehbs-steps li { counter-increment: schritt; position: relative; padding-top: var(--space-12); }
.ehbs-steps li::before { content: counter(schritt); position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); font-variant-numeric: tabular-nums; }
.ehbs-steps li::after { content: ""; position: absolute; top: 18px; left: 48px; right: 0; height: 1px; background: var(--ehbs-line); }
.ehbs-steps li:last-child::after { display: none; }

/* ---------- Badges ---------- */
.ehbs-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--ehbs-yellow); color: #000; }
.ehbs-badge--orange { background: var(--ehbs-orange); color: #000; }
.ehbs-badge--blue { background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); }
.ehbs-badge--soft { background: var(--ehbs-primary-tint); color: var(--ehbs-text); }

/* ---------- Status (Ampel) – immer mit Text ---------- */
.ehbs-status { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ehbs-text); white-space: nowrap; }
.ehbs-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.ehbs-status--ok::before   { background: var(--ampel-green);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ampel-green) 20%, transparent); }
.ehbs-status--mid::before  { background: var(--ampel-yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ampel-yellow) 25%, transparent); }
.ehbs-status--bad::before  { background: var(--ampel-red);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ampel-red) 20%, transparent); }
.ehbs-status--none::before { background: var(--ampel-dark); }
:root[data-theme="dunkel"] .ehbs-status--none::before { background: var(--ehbs-text-sek); }

/* ---------- Tabelle ---------- */
.ehbs-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--ehbs-line-soft); border-radius: var(--radius-lg); background: var(--ehbs-surface); box-shadow: var(--shadow); }
.ehbs-table { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: tabular-nums; }
.ehbs-table th { background: var(--ehbs-grey); color: var(--ehbs-text-on-dark); text-align: left; font-weight: 600; font-size: var(--fs-small); letter-spacing: .01em; padding: var(--space-4) var(--space-6); }
.ehbs-table td { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--ehbs-line-soft); vertical-align: middle; }
.ehbs-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ehbs-bg-soft) 70%, transparent); }
.ehbs-table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.ehbs-table tbody tr:hover td { background: var(--ehbs-primary-tint); }
.ehbs-table .num { text-align: right; white-space: nowrap; }
.ehbs-table .ehbs-btn { min-height: 40px; padding: 0 var(--space-4); }

/* ---------- Hinweisboxen ---------- */
.ehbs-box { position: relative; background: var(--ehbs-primary-tint); padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 6px); border-radius: var(--radius); margin: var(--space-8) 0; overflow: hidden; }
.ehbs-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ehbs-primary); }
.ehbs-box__title { font-weight: 650; margin-bottom: var(--space-1); }
.ehbs-box > :last-child { margin-bottom: 0; }
.ehbs-box--hinweis { background: var(--ehbs-tint-hinweis); }
.ehbs-box--hinweis::before { background: var(--ehbs-yellow); }
.ehbs-box--warnung { background: var(--ehbs-tint-warnung); }
.ehbs-box--warnung::before { background: var(--ehbs-red); }
:root[data-theme="dunkel"] .ehbs-box--warnung::before { background: var(--ehbs-orange); }

/* ---------- KPI-Kacheln ---------- */
.ehbs-kpis { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ehbs-kpi { position: relative; padding: var(--space-6) 0 0; border-top: 1px solid var(--ehbs-line); }
.ehbs-kpi::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--ehbs-accent-line); border-radius: 2px; }
.ehbs-kpi__value { font-size: var(--fs-kpi); font-weight: 650; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--ehbs-text); font-variant-numeric: tabular-nums; }
.ehbs-kpi__label { margin-top: var(--space-3); color: var(--ehbs-text); max-width: 18rem; }
/* App-Variante: als Kachel */
.ehbs-kpi--tile { background: var(--ehbs-surface); border: 1px solid var(--ehbs-line-soft); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.ehbs-kpi--tile::before { top: -1px; left: var(--space-6); }

/* ---------- Formulare ---------- */
.ehbs-form { display: grid; gap: var(--space-6); max-width: 680px; }
.ehbs-form--card { background: var(--ehbs-surface); border: 1px solid var(--ehbs-line-soft); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }
.ehbs-form__row { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ehbs-field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: var(--space-2); }
.ehbs-field input, .ehbs-field select, .ehbs-field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: inherit; color: var(--ehbs-text); background: var(--ehbs-bg);
  border: 1px solid var(--ehbs-anthracite); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
:root[data-theme="dunkel"] .ehbs-field :is(input, select, textarea) { border-color: #b8bdd6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .ehbs-field :is(input, select, textarea) { border-color: #b8bdd6; } }
.ehbs-field textarea { min-height: 140px; resize: vertical; }
.ehbs-field :is(input, select, textarea):hover { border-color: var(--ehbs-text); }
.ehbs-field :is(input, select, textarea):focus { outline: none; border-color: var(--ehbs-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ehbs-focus) 35%, transparent), 0 0 0 1px var(--ehbs-focus); }
.ehbs-field__hint { font-size: var(--fs-small); margin-top: var(--space-2); color: var(--ehbs-text-sek); }
.ehbs-field--error :is(input, select, textarea) { border: 2px solid var(--ehbs-error); }
.ehbs-field__error { color: var(--ehbs-error); font-size: var(--fs-small); font-weight: 600; margin-top: var(--space-2); }
.ehbs-check { display: flex; gap: var(--space-3); align-items: flex-start; }
.ehbs-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ehbs-primary); flex: none; }

/* ---------- CTA-Band ---------- */
.ehbs-cta-band { padding: var(--section-y) 0; }
.ehbs-cta-band__inner {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: radial-gradient(40rem 20rem at 100% 0%, color-mix(in srgb, var(--ehbs-white) 12%, var(--ehbs-primary)), transparent 70%), var(--ehbs-primary);
  color: var(--ehbs-text-on-dark); padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap;
}
.ehbs-cta-band__inner::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--ehbs-red); }
.ehbs-cta-band--rot .ehbs-cta-band__inner { background: var(--ehbs-red); }
.ehbs-cta-band--rot .ehbs-cta-band__inner::before { background: var(--ehbs-red-dark); }
.ehbs-cta-band h2, .ehbs-cta-band p { color: var(--ehbs-text-on-dark); margin: 0; }
.ehbs-cta-band h2 { margin-bottom: var(--space-2); max-width: 30ch; }
.ehbs-cta-band { --ehbs-focus: var(--ehbs-yellow); }

/* ---------- Seitliche Navigation (Web-App) ---------- */
.ehbs-app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.ehbs-sidenav { background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
:root[data-theme="dunkel"] .ehbs-sidenav { background: var(--ehbs-bg-soft); border-right: 1px solid var(--ehbs-line-soft); }
.ehbs-sidenav a { display: flex; align-items: center; gap: var(--space-3); color: var(--ehbs-text-on-dark); text-decoration: none; padding: var(--space-2) var(--space-3); min-height: 44px; border-radius: var(--radius-sm); position: relative; transition: background-color var(--dur-fast) var(--ease-out); }
.ehbs-sidenav a:hover { background: rgba(255,255,255,.08); color: var(--ehbs-text-on-dark); }
.ehbs-sidenav a[aria-current="page"] { background: rgba(255,255,255,.12); font-weight: 600; }
.ehbs-sidenav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ehbs-red); }
.ehbs-sidenav svg { width: 20px; height: 20px; flex: none; opacity: .9; }
.ehbs-app__main { padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); background: var(--ehbs-bg-soft); }
@media (max-width: 860px) { .ehbs-app { grid-template-columns: 1fr; } .ehbs-sidenav { flex-direction: row; overflow-x: auto; } .ehbs-sidenav a[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 3px; } }

/* ---------- Footer ---------- */
.ehbs-footer { background: var(--ehbs-primary-dark); color: var(--ehbs-text-on-dark); padding: var(--space-16) 0 var(--space-8); font-size: var(--fs-small); }
:root[data-theme="dunkel"] .ehbs-footer { background: #070a1c; border-top: 1px solid var(--ehbs-line-soft); }
.ehbs-footer h2, .ehbs-footer h3 { color: var(--ehbs-text-on-dark); font-size: var(--fs-base); letter-spacing: 0; }
.ehbs-footer a { color: var(--ehbs-text-on-dark); text-decoration-color: rgba(255,255,255,.4); }
.ehbs-footer a:hover { color: var(--ehbs-yellow); text-decoration-color: currentColor; }
.ehbs-footer__grid { display: grid; gap: var(--space-8); grid-template-columns: 1.4fr repeat(auto-fit, minmax(180px, 1fr)); }
.ehbs-footer ul { list-style: none; margin: 0; padding: 0; }
.ehbs-footer li { margin-bottom: var(--space-2); }
.ehbs-footer .ehbs-logo { margin: 0 0 var(--space-4); }
.ehbs-footer__legal { border-top: 1px solid rgba(255,255,255,.18); margin-top: var(--space-12); padding-top: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ehbs-footer__legal ul { display: flex; gap: var(--space-6); flex-wrap: wrap; }
@media (max-width: 720px) { .ehbs-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Platzhalter ---------- */
.ehbs-placeholder { background: var(--ehbs-bg-light); border: 2px dashed var(--ehbs-grey); display: grid; place-items: center; min-height: 200px; text-align: center; padding: var(--space-4); border-radius: var(--radius-lg); font-size: var(--fs-small); color: #000; }
:root[data-theme="dunkel"] .ehbs-placeholder { background: var(--ehbs-surface-2); color: var(--ehbs-text); border-color: var(--ehbs-text-sek); }

/* ---------- Scroll-Reveal (opt-in, sparsam) ----------
   Nur mit data-reveal, nur wenn JS läuft (.js am <html>). Ohne JS bleibt alles sichtbar.
   data-reveal-stagger am Elternteil staffelt direkte Kinder um je 60 ms. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.js [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
.js [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 60ms, 60ms, 0ms, 0ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 120ms, 120ms, 0ms, 0ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 180ms, 180ms, 0ms, 0ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms, 240ms, 0ms, 0ms; }
/* Nach dem Einblenden normale Hover-Übergänge zurückgeben */
.js [data-reveal-stagger].is-done > * { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
/* Hero: ein orchestrierter Auftritt beim Laden */
@keyframes ehbs-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .ehbs-hero [data-hero] { animation: ehbs-rise 700ms var(--ease-out) both; }
.js .ehbs-hero [data-hero="2"] { animation-delay: 80ms; }
.js .ehbs-hero [data-hero="3"] { animation-delay: 160ms; }
.js .ehbs-hero [data-hero="4"] { animation-delay: 240ms; }
@keyframes ehbs-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .ehbs-hero .ehbs-heading::after { animation: ehbs-line var(--dur-slow) var(--ease-out) 450ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .js .ehbs-heading::after { transform: none !important; }
  .ehbs-card:hover, .ehbs-btn:active { transform: none !important; }
}
@media print {
  .ehbs-topbar, .ehbs-nav, .ehbs-nav-toggle, .ehbs-theme-toggle, .ehbs-cta-band { display: none; }
  .ehbs-header { position: static; backdrop-filter: none; }
  .ehbs-hero, .ehbs-footer { background: none; color: #000; }
  .ehbs-hero *, .ehbs-footer * { color: #000 !important; }
  .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1; transform: none; }
}
/* Reihenfolge wie zuvor in shared/theme.py: nach dem Designsystem
   (assets/web/ehbs-modern.css, in main.ts eingebunden) erst die Regeln der
   Seite, zuletzt der Wizard. *//* =========================================================================
   Seite: Rahmen, Kopf und Fuß, Landingpage-Abschnitte, Testbereich-Band.
   Übernommen aus shared/theme.py (Brücke zu Streamlit, Stand 1.58), das
   Aussehen bleibt gleich. Die Karte des Wizards und alles darin steht in
   wizard.css.

   Reihenfolge wie zuvor: ehbs-modern.css (main.ts) vor dieser Datei.
   Keine neuen Hex-Werte, nur die Tokens aus ehbs-modern.css und
   color-mix-Mischungen daraus.

   Wo theme.py ein .stApp vorangestellt hatte, steht jetzt :root. Gleiche
   Spezifität (eine Klasse bzw. Pseudoklasse), damit die Regeln weiter
   genauso gegen ehbs-modern.css und untereinander gewinnen, zum Beispiel
   die Linkfarbe im Kopf gegen die Hover-Regel des dunklen Themas.

   Hell und Dunkel folgen prefers-color-scheme wie ehbs-modern.css.
   Bewegung nur per CSS: Ladeauftritt im Hero und scrollgebundene
   Einblendungen als Progressive Enhancement, prefers-reduced-motion
   schaltet alles ab. Im Testbereich bewegt sich nichts.
   ========================================================================= */

/* ── Grundstile, die bisher Streamlit mitbrachte ──────────────────────────
   Die Seite wurde mit Streamlits globalem CSS gestaltet, ihr Aussehen hängt
   daran: Absätze und Listen in 1rem statt der Grundgröße 1.0625rem von
   ehbs-modern.css, Listen ohne Einzug, schmale Scrollleisten, die erst
   beim Hovern sichtbar werden. Nur die Regeln, die hier etwas bewirken.
   In :where(), also ohne Spezifität: Streamlit lud sie vor dem
   Designsystem, jede Regel aus ehbs-modern.css und dieser Datei geht vor. */
:where(body) { -webkit-tap-highlight-color: transparent; }
:where(p, ol, ul, dl) { margin: 0 0 1rem; padding: 0; font-size: 1rem; font-weight: 400; }
:where(ol, ul) :where(ol, ul) { margin-bottom: 0; }
:where(img, svg) { vertical-align: middle; }
:where(input, button, select, optgroup, textarea) {
    margin: 0; font-family: inherit; line-height: inherit; font-size: inherit;
}
:where(button, input) { overflow: visible; }
:where(button:not(:disabled), [role="button"]:not(:disabled)) { cursor: pointer; }
:where([hidden]) { display: none !important; }
@supports (scrollbar-color: transparent transparent) {
    :where(*) { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    :where(:hover) { scrollbar-color: rgba(0, 0, 0, .4) transparent; }
    @media (prefers-color-scheme: dark) {
        :where(:hover) { scrollbar-color: rgba(255, 255, 255, .4) transparent; }
    }
}

/* ── Seitenrahmen ─────────────────────────────────────────────────────────
   Landingpage-Bänder (Hero, Abschnitte, Footer) laufen über die volle
   Breite, die Inhalte begrenzt .ehbs-container. Schrift, Text- und
   Grundfarbe setzt ehbs-modern.css am body. */

/* Browser-Oberflächen aus der Palette (Impeccable craft-floor). Gescrollt
   wird jetzt das Dokument selbst, nicht mehr ein Streamlit-Container. */
input, textarea { caret-color: var(--ehbs-focus); }
html { scrollbar-color: color-mix(in srgb, var(--ehbs-primary) 35%, transparent) transparent; }
@media (prefers-color-scheme: dark) {
    html { scrollbar-color: var(--ehbs-line) transparent; }
}

/* Sprungziele landen unter dem sticky Header, nicht dahinter. Am Ziel
   statt per scroll-padding-top am html (ehbs-modern.css, 96px): Unter
   Streamlit scrollte ein innerer Container, das scroll-padding des html
   wirkte nie. Jetzt scrollt das Dokument selbst, und scroll-padding würde
   auch die scrollgebundenen Einblendungen verschieben (view() rechnet den
   Bereich ohne view-timeline-inset ab dem scroll-padding). Das weiche
   Scrollen aus ehbs-modern.css (scroll-behavior am html) greift dagegen
   jetzt, unter Streamlit sprangen die Anker hart. */
html { scroll-padding-top: 0; }
section[id], .bso-test-intro { scroll-margin-top: 96px; }

/* ── Kopf und Fuß wie ehbs-knecht.de (shared/website.py) ─────────────────
   1:1 aus der LE-App. Maße aus dem Stylesheet der Website, Farben aus den
   Tokens von ehbs-modern.css, Mischungen statt neuer Hex-Werte:
   --le-text-auf-blau ≈ #e6e8f1, --le-linie-web ≈ #d9d9d7,
   --le-flaeche-web ≈ #f3f3f2 der Website. Beide Bänder sehen hell und
   dunkel gleich aus wie auf der Website, der Kopf bleibt weiß (Logo auf
   Weiß), der Fuß Dunkelblau. Schrift Archivo wie auf der Website, nur in
   Kopf und Fuß, selbst gehostet unter static/fonts (relativ zum gebauten
   CSS in assets/). Reduced Motion deckt die globale Regel in
   ehbs-modern.css ab. */
@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../static/fonts/archivo-latin-wght-normal.woff2") format("woff2");
}
:root {
    --le-font-web: "Archivo", Arial, sans-serif;
    --le-text-auf-blau: color-mix(in srgb, var(--ehbs-white) 89%, var(--ehbs-blue));
    --le-linie-web: color-mix(in srgb, var(--ehbs-grey) 27%, var(--ehbs-white));
    --le-flaeche-web: color-mix(in srgb, var(--ehbs-bg-light) 60%, var(--ehbs-white));
    --le-schatten-menue: 0 24px 48px -24px color-mix(in srgb, var(--ehbs-blue-dark) 45%, transparent);
}
/* Icons als Maske in der Textfarbe, je Name eine Regel aus website.icon_css(). */
.web-icon {
    display: inline-block; flex: none; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: var(--web-icon) center / contain no-repeat; mask: var(--web-icon) center / contain no-repeat;
}
:root :is(.web-header, .web-footer), :root :is(.web-header, .web-footer) * {
    font-family: var(--le-font-web);
}
/* Listen und Absätze in Kopf und Fuß ohne Einzug und Abstände. */
:root :is(.web-header, .web-footer) ul { list-style: none; margin: 0; padding: 0; }
:root :is(.web-header, .web-footer) li { margin: 0; padding: 0; }
:root :is(.web-header, .web-footer) p { margin: 0; }
/* Breite wie .wrap der Website (--maxw 1280px, --gutter), nicht wie
   .ehbs-container (1200px inkl. Innenabstand). */
:is(.web-header, .web-footer) > .ehbs-container {
    --web-gutter: clamp(1rem, 4vw, 3rem);
    max-width: calc(1280px + 2 * var(--web-gutter)); padding-inline: var(--web-gutter);
}

/* Kopf klebt beim Scrollen. Unter Streamlit klebte der Elementcontainer um
   den Kopf, jetzt steht der Kopf direkt im body und klebt selbst. Sticky
   ist zugleich Bezug für das absolut positionierte Mobilmenü. */
.web-header {
    --ehbs-focus: var(--ehbs-blue);
    position: sticky; top: 0; z-index: 50;
    background: var(--ehbs-white); color: var(--ehbs-anthracite);
    font-size: 1.125rem; line-height: 1.65;
}
/* Schatten erst nach dem Scrollen, scrollgebunden statt per Skript.
   Browser ohne animation-timeline zeigen den Kopf ohne Schatten. */
@keyframes kopf-schatten {
    from { box-shadow: 0 6px 24px -12px transparent; }
    to   { box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--ehbs-blue) 28%, transparent); }
}
@supports (animation-timeline: scroll()) {
    .web-header {
        animation: kopf-schatten linear both;
        animation-timeline: scroll(nearest block); animation-range: 0 48px;
    }
}
.web-header__innen { display: flex; align-items: center; gap: 2rem; height: 88px; }
.web-logo { display: block; flex: none; }
.web-logo img { height: 52px; width: auto; }
.web-nav { margin-left: auto; }
.web-nav > ul { display: flex; gap: clamp(1rem, 2vw, 2.25rem); }
.web-nav li { position: relative; }
/* Link-Farben mit :root vorn, sonst gewinnt im dunklen Thema die
   Hover-Regel des Skill-CSS (Weiß auf weißem Kopf). */
:root .web-header a, :root .web-header a:hover { color: var(--ehbs-blue); text-decoration: none; }
:root .web-header :is(.web-nav, .web-menue__nav) a {
    font-size: 1rem; font-weight: 500; line-height: 1.65; padding-block: .5rem;
    background: linear-gradient(var(--ehbs-orange), var(--ehbs-orange)) no-repeat left bottom / 0 2px;
    transition: background-size .35s var(--ease-out);
}
:root .web-header :is(.web-nav, .web-menue__nav) a:hover { background-size: 100% 2px; }
/* Aufklappmenü unter Leistungen und Kurse, öffnet bei Maus und Tastatur. */
:root .web-nav .web-nav__sub {
    position: absolute; left: -1rem; top: calc(100% + .9rem); z-index: 60;
    width: 270px; padding: .5rem; background: var(--ehbs-white);
    box-shadow: var(--le-schatten-menue), inset 0 0 0 1px var(--le-linie-web);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
.web-nav .web-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
/* :has(:focus-visible) statt :focus-within: Nach einem Mausklick (Link
   öffnet neuen Tab) behält der Link den Fokus, das Menü bliebe sonst offen. */
.web-nav li:hover > .web-nav__sub, .web-nav li:has(:focus-visible) > .web-nav__sub {
    opacity: 1; visibility: visible; transform: none;
}
:root .web-header .web-nav .web-nav__sub a {
    display: block; padding: .65rem .85rem; font-size: .975rem; background: none;
    box-shadow: inset 3px 0 0 0 transparent;
    transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
:root .web-header .web-nav .web-nav__sub a:hover {
    background: var(--le-flaeche-web); box-shadow: inset 3px 0 0 0 var(--ehbs-orange);
}
:root .web-header .web-nav .web-nav__unter a { padding: .45rem .9rem .45rem 1.9rem; font-size: .9375rem; }
:root .web-header .web-nav__unter a { color: var(--ehbs-anthracite); }
.web-nav__mehr { border-top: 1px solid var(--le-linie-web); }
.web-nav__mehr + .web-nav__mehr { border-top: 0; }
:root .web-header .web-nav__mehr a { font-weight: 600; }
/* Telefon und Anfrage-Knopf (eckig, Orange-Kante beim Hover). */
.web-header__cta { display: flex; align-items: center; gap: 1.25rem; }
:root .web-header .web-header__tel {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.web-header__tel .web-icon { width: 18px; height: 18px; }
:root .web-header .web-btn {
    display: inline-flex; align-items: center; padding: .85rem 1.2rem;
    font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
    background: var(--ehbs-blue); color: var(--ehbs-white);
    box-shadow: inset 0 -4px 0 0 transparent;
    transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
:root .web-header .web-btn:hover {
    background: var(--ehbs-blue-dark); color: var(--ehbs-white);
    box-shadow: inset 0 -4px 0 0 var(--ehbs-orange);
}
@media (max-width: 1100px) { .web-header__cta .web-header__nummer { display: none; } }
/* Unter 960 px: Menüknopf statt Navigation, das Menü legt sich über den
   Inhalt und scrollt in sich. */
.web-menue { display: none; }
@media (max-width: 960px) {
    .web-header__innen { height: 72px; }
    .web-logo img { height: 42px; }
    .web-nav, .web-header__cta { display: none; }
    .web-menue { display: block; margin-left: auto; }
}
.web-menue > summary {
    list-style: none; display: grid; place-items: center; min-width: 44px; min-height: 44px;
    padding: .5rem; color: var(--ehbs-blue); cursor: pointer;
}
.web-menue > summary::-webkit-details-marker { display: none; }
.web-menue > summary .web-icon { width: 28px; height: 28px; }
.web-menue__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    padding: 0 clamp(1rem, .5rem + 2vw, 2rem) 1.5rem;
    background: var(--ehbs-white); box-shadow: var(--le-schatten-menue);
}
:root .web-header .web-menue__nav > ul > li > a {
    display: block; padding: .95rem 0; font-size: 1.15rem;
    border-top: 1px solid var(--le-linie-web);
}
:root .web-menue__nav .web-nav__sub { padding: 0 0 .5rem 1rem; }
:root .web-header .web-menue__nav .web-nav__sub a { display: block; padding: .55rem 0; background: none; }
.web-menue__cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    padding-top: 1rem; border-top: 1px solid var(--le-linie-web);
}

/* Fuß (Tokens und Schrift siehe Kopf) */
.web-footer {
    --ehbs-focus: var(--ehbs-yellow);
    margin-top: var(--space-16); padding-top: clamp(4rem, 8vw, 6.5rem);
    background: var(--ehbs-blue); color: var(--le-text-auf-blau);
    font-size: 1rem; line-height: 1.65;
}
:root .web-footer a { color: var(--ehbs-white); text-decoration: none; }
:root .web-footer a:hover {
    color: var(--ehbs-white); text-decoration: underline;
    text-decoration-color: var(--ehbs-orange); text-decoration-thickness: 1px;
}
.web-footer__grid {
    display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 2fr));
    gap: clamp(2rem, 4vw, 4rem);
}
.web-footer__logo { display: inline-block; }
.web-footer__logo img { height: 56px; width: auto; }
:root .web-footer .web-footer__claim {
    margin: 1.75rem 0 0; max-width: 14ch; color: var(--ehbs-white);
    font-size: clamp(1.6rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
}
:root .web-footer h2 {
    margin: 0 0 1rem; padding: 0; color: var(--ehbs-white);
    font-size: .9375rem; font-weight: 600; line-height: 1.65; letter-spacing: normal;
}
.web-footer__grid ul { display: grid; gap: .6rem; }
/* Einzug am <li>, damit umbrochene Unterpunkte eingerückt bleiben. */
:root .web-footer .web-footer__unter { padding-left: 1rem; }
:root .web-footer .web-footer__unter a { font-size: .9375rem; }
.web-footer address { font-style: normal; line-height: 1.7; }
.web-social { display: flex; gap: .75rem; margin-top: 1.5rem; }
:root .web-footer .web-social a {
    display: grid; place-items: center; width: 44px; height: 44px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: box-shadow .3s var(--ease-out);
}
:root .web-footer .web-social a:hover {
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--ehbs-white), inset 0 -3px 0 0 var(--ehbs-orange);
}
.web-social .web-icon { width: 20px; height: 20px; }
.web-marken {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
    margin-top: clamp(3.5rem, 7vw, 5rem);
}
.web-marke { padding: 1.5rem; background: rgba(255,255,255,.06); }
.web-marke strong { display: block; font-weight: 600; color: var(--ehbs-white); }
.web-marke span { font-size: .9375rem; }
.web-footer__unten {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-top: clamp(3rem, 6vw, 4.5rem); padding-block: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.18); font-size: .9375rem;
}
.web-footer__unten ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
@media (max-width: 960px) {
    .web-footer__grid { grid-template-columns: 1fr 1fr; }
    .web-footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .web-marken { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .web-footer__grid { grid-template-columns: 1fr; } }

/* Ohne Akzentbalken: Hero (rot links), Hinweisboxen (links) und CTA-Band
   (rot oben) tragen ihre Gliederung über Fläche und Radius. Override statt
   Änderung, weil ehbs-modern.css unverändert aus dem Skill bleibt. */
:root :is(.ehbs-hero, .ehbs-box, .ehbs-cta-band__inner)::before { content: none; }

/* ── Hero mit Aushang-Vorschau ────────────────────────────────────────── */
.bso-hero { padding: clamp(3.5rem, 2rem + 4vw, 6rem) 0 clamp(3.5rem, 2rem + 4vw, 6rem); }

/* Hintergrund mit Tiefe, statisch: Verlauf von Nachtblau oben links zur
   Leitfarbe, ein Lichtfeld hinter dem Aushang (lenkt den Blick aufs Muster),
   Abdunkelung unten links unter dem Text, feines Korn und im Hero ein
   blasses Linienraster. Gleiche Sprache im CTA-Band, damit Anfang und Ende
   der Seite zusammengehören. Nur Tokens und color-mix, keine neuen Hex-Werte. */
.bso-hero {
    background:
        radial-gradient(34rem 30rem at 76% 46%, color-mix(in srgb, var(--ehbs-white) 20%, var(--ehbs-primary)) 0%, transparent 70%),
        radial-gradient(48rem 34rem at 0% 100%, color-mix(in srgb, black 35%, var(--ehbs-primary-dark)) 0%, transparent 70%),
        linear-gradient(155deg, var(--ehbs-primary-dark) 0%, var(--ehbs-primary) 48%, color-mix(in srgb, var(--ehbs-white) 6%, var(--ehbs-primary)) 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.bso-hero::after, .ehbs-cta-band__inner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("../static/korn.svg"); background-size: 160px 160px;
    opacity: .07; mix-blend-mode: overlay;
    -webkit-mask-image: none; mask-image: none;
}
.bso-hero::after { z-index: -1; }
/* Linienraster aus dem Basis-Hero, oben rechts am deutlichsten und zum Rand
   hin ausgeblendet. Auf ::before, weil ::after das Korn trägt. Setzt den
   roten Randstreifen aus ehbs-modern.css (left/width/background) zurück. */
:root .bso-hero::before {
    content: ""; position: absolute; inset: 0; width: auto; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
}
.ehbs-cta-band__inner { isolation: isolate; }
.ehbs-cta-band__inner::after { z-index: -1; border-radius: inherit; }
.ehbs-cta-band__inner {
    background:
        radial-gradient(30rem 20rem at 88% 20%, color-mix(in srgb, var(--ehbs-white) 18%, var(--ehbs-primary)) 0%, transparent 70%),
        radial-gradient(36rem 24rem at 0% 100%, color-mix(in srgb, black 35%, var(--ehbs-primary-dark)) 0%, transparent 70%),
        linear-gradient(155deg, var(--ehbs-primary-dark) 0%, var(--ehbs-primary) 60%);
}
/* Mobil steht der Aushang unter dem Text, das Lichtfeld wandert mit */
@media (max-width: 860px) {
    .bso-hero {
        background:
            radial-gradient(28rem 26rem at 50% 78%, color-mix(in srgb, var(--ehbs-white) 18%, var(--ehbs-primary)) 0%, transparent 70%),
            linear-gradient(170deg, var(--ehbs-primary-dark) 0%, var(--ehbs-primary) 55%);
    }
}
@media (prefers-contrast: more) {
    .bso-hero::after, .ehbs-cta-band__inner::after, :root .bso-hero::before { display: none; }
}
@media (min-width: 861px) {
    .bso-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.bso-hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); hyphens: manual; }
:root .ehbs-hero__facts { row-gap: var(--space-3); }
:root .ehbs-hero__facts { margin-top: var(--space-8); }
.ehbs-hero__facts img { width: 20px; height: 20px; flex: none; }
.bso-btn-pfeil img { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .bso-btn-pfeil:hover img { transform: translateX(2px); }
}

/* Zwei Blätter: vorn der Aushang, dahinter ein zweites Blatt als Andeutung
   der Word-Datei. Auf Mobil gerade, damit nichts aus dem Raster ragt. */
.bso-blatt { position: relative; max-width: 440px; margin-left: auto; }
.bso-blatt::before {
    content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg);
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
    transform: translate(14px, 10px) rotate(4deg);
}
.bso-vorschau {
    /* Papier bleibt in beiden Themen weiß mit schwarzer Schrift */
    --ehbs-text: #000000; --ehbs-text-sek: #595959;
    position: relative; margin: 0;
    background: var(--ehbs-white); color: var(--ehbs-text); border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 30px 60px -20px rgba(0,0,0,.6);
    padding: var(--space-3); overflow: hidden;
    transform: rotate(-1.5deg);
}
@media (max-width: 860px) {
    .bso-blatt { margin: 0; max-width: none; }
    .bso-vorschau, .bso-blatt::before { transform: none; }
    .bso-blatt::before { display: none; }
}
.bso-vorschau img { display: block; width: 100%; height: auto; }

/* Gesperrte Vorschau im Download-Schritt (#24): Papier frei im Formular,
   ohne Schraegstellung und Tiefenschatten des Heros, mit Haarlinie. Leichte
   Unschaerfe, der Aufbau des Aushangs bleibt erkennbar (es ist nur das
   Musterbild). Kein Abdunkeln, das Schloss sitzt in einem halbtransparenten
   Kreis in der Leitfarbe. */
.bso-vorschau--gesperrt {
    max-width: 440px; margin: 0 auto var(--space-6); transform: none;
    padding: var(--space-6); border: 1px solid var(--ehbs-line); box-shadow: none;
}
.bso-vorschau--gesperrt img { filter: blur(4px); user-select: none; }
.bso-vorschau--gesperrt .bso-vorschau__schloss {
    position: absolute; inset: 0; display: grid; place-items: center;
}
/* Ohne diese Regel zieht .bso-vorschau img das Icon auf volle Breite */
.bso-vorschau--gesperrt .bso-vorschau__schloss img {
    box-sizing: content-box; width: 24px; height: 24px; padding: 20px;
    border-radius: 50%; filter: none;
    background: color-mix(in srgb, var(--ehbs-primary) 60%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--ehbs-primary) 45%, transparent);
}
/* Dezenter Glanzstreifen (#28), rein CSS -- kein neues Element in
   gesperrte_vorschau() noetig. .bso-vorschau hat bereits overflow:hidden,
   schneidet den Streifen also sauber am Kartenrand ab. Ohne
   prefers-reduced-motion:no-preference steht er unbewegt ausserhalb des
   sichtbaren Bereichs (translateX(-120%)) -- kein Keyframe laeuft. */
.bso-vorschau--gesperrt::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    pointer-events: none;
    transform: translateX(-120%);
}
@keyframes bso-vorschau-glanz {
    to { transform: translateX(120%); }
}
@media (prefers-reduced-motion: no-preference) {
    .bso-vorschau--gesperrt::after {
        animation: bso-vorschau-glanz 2.8s var(--ease-out) 2;
    }
}
.bso-hero .bso-vorschau__hinweis {
    color: var(--ehbs-text-on-dark); opacity: .85; font-size: var(--fs-small);
    margin: var(--space-8) 0 0 auto; max-width: 440px;
}
@media (max-width: 860px) { .bso-hero .bso-vorschau__hinweis { margin-left: 0; max-width: none; } }

/* Ladeauftritt: der eine inszenierte Moment der Seite. Text steigt gestaffelt
   auf, das Blatt legt sich schräg ab, das hintere fächert danach auf. */
@keyframes bso-blatt-vorn {
    from { opacity: 0; transform: translateY(32px) rotate(1.5deg); }
    to   { opacity: 1; transform: rotate(-1.5deg); }
}
@keyframes bso-blatt-hinten {
    from { opacity: 0; transform: none; }
    to   { opacity: 1; transform: translate(14px, 10px) rotate(4deg); }
}
@media (prefers-reduced-motion: no-preference) {
    .bso-hero [data-hero] { animation: ehbs-rise 700ms var(--ease-out) both; }
    .bso-hero [data-hero="2"] { animation-delay: 80ms; }
    .bso-hero [data-hero="3"] { animation-delay: 160ms; }
    .bso-hero [data-hero="4"] { animation-delay: 240ms; }
    .bso-hero .ehbs-heading::after { animation: ehbs-line var(--dur-slow) var(--ease-out) 450ms both; }
    .bso-hero .bso-vorschau__hinweis { animation: ehbs-rise 700ms var(--ease-out) 500ms both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    .bso-hero .bso-vorschau { animation: bso-blatt-vorn 900ms var(--ease-out) 120ms both; }
    .bso-hero .bso-blatt::before { animation: bso-blatt-hinten 700ms var(--ease-out) 650ms both; }
}

/* ── Funktionen als Bento ─────────────────────────────────────────────────
   Groß: Piktogramme (echte Bilder aus static/piktogramme). Rechts zwei
   schmale Karten übereinander. Drei Inhalte, drei Zellen, keine Lücke. */
.bso-bento { display: grid; gap: var(--space-6); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bso-bento__piktos { grid-column: span 4; grid-row: span 2; }
.bso-bento__schritte, .bso-bento__word { grid-column: span 2; }
@media (max-width: 960px) {
    .bso-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bso-bento__piktos { grid-column: 1 / -1; grid-row: auto; }
    .bso-bento__schritte, .bso-bento__word { grid-column: span 1; }
}
@media (max-width: 640px) {
    .bso-bento { grid-template-columns: minmax(0, 1fr); }
    .bso-bento > * { grid-column: 1 / -1 !important; }
}
.bso-bento .ehbs-card p:last-child { margin-bottom: 0; }

.bso-piktos {
    list-style: none; margin: var(--space-6) 0 var(--space-4); padding: 0;
    display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 480px) { .bso-piktos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:root .bso-piktos > li { margin: 0; }
.bso-pikto { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; min-width: 0; }
.bso-pikto__bild {
    width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 16%;
    background: var(--ehbs-white); border: 1px solid var(--ehbs-line-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.bso-pikto__bild img { width: 100%; height: 100%; object-fit: contain; }
.bso-pikto--bedingt .bso-pikto__bild { border: 1.5px dashed var(--ehbs-grey); box-shadow: none; }
.bso-pikto__text { font-size: .8125rem; font-weight: 550; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.bso-piktos__legende { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; }
.bso-piktos__muster { width: 16px; height: 16px; flex: none; border: 1.5px dashed var(--ehbs-grey); border-radius: 4px; }
@media (prefers-color-scheme: dark) {
    .bso-pikto--bedingt .bso-pikto__bild, .bso-piktos__muster { border-color: var(--ehbs-text-sek); }
}

/* Word-Karte in der Leitfarbe: zweite Fläche im Bento, damit nicht alles
   Weiß auf Weiß ist. .ehbs-on-dark setzt Fokus und Akzent auf Gelb. */
.bso-bento__word {
    background: radial-gradient(28rem 16rem at 100% 0%, color-mix(in srgb, var(--ehbs-white) 12%, var(--ehbs-primary)), transparent 70%), var(--ehbs-primary);
    border-color: transparent; color: var(--ehbs-text-on-dark);
}
.bso-bento__word h3, .bso-bento__word p { color: var(--ehbs-text-on-dark); }
.bso-bento__word::before { background: var(--ehbs-yellow) !important; }
.bso-icon--hell { background: var(--ehbs-white); }
:root .bso-dateiname {
    margin-top: auto !important; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    font-size: var(--fs-small); font-weight: 550; overflow-wrap: anywhere;
}
.bso-bento__word .bso-dateiname { margin-bottom: 0; }

/* ── Ablauf: Zeitleiste mit Nummern (echte Reihenfolge) ───────────────── */
:root .bso-steps { padding: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root .bso-steps > li { margin: 0; padding-top: 4.5rem; }
.bso-steps > li::before {
    width: 48px; height: 48px; font-size: 1.125rem;
    box-shadow: 0 0 0 6px var(--ehbs-bg-soft), var(--shadow);
}
.bso-steps > li::after { top: 24px; left: 64px; right: var(--space-4); background: var(--ehbs-line); }
.bso-steps p { margin: 0; max-width: 24rem; }
@media (prefers-color-scheme: dark) {
    .bso-steps > li::before { background: var(--ehbs-surface-2); border: 1px solid var(--ehbs-line); }
}
/* Genau vier Schritte: darüber fest vier Spalten, bis 960 px senkrecht.
   Mit auto-fit bräche die Reihe zwischen etwa 720 und 1010 px in 3 + 1 um,
   die Linie von Schritt 3 liefe ins Leere. */
@media (max-width: 960px) {
    :root .bso-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    :root .bso-steps > li { padding: 0 0 0 4.25rem; min-height: 48px; }
    .bso-steps > li::after { top: 56px; bottom: calc(-1 * var(--space-8) + 8px); left: 23px; right: auto; width: 2px; height: auto; }
}
.bso-lead { font-size: var(--fs-lg); max-width: 44rem; }

/* ── Teil A bis C: Text links, Tabelle rechts ─────────────────────────── */
.bso-teile {
    display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
/* Grundlage als Fußnote unter Haarlinie, keine getönte Box. */
:root .bso-teile .ehbs-box {
    margin-bottom: 0; padding: var(--space-4) 0 0; border-radius: 0; background: none;
    border-top: 1px solid var(--ehbs-line-soft); color: var(--ehbs-text-sek); font-size: var(--fs-small);
}
:root .bso-teile .ehbs-box__title {
    font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ehbs-text-sek);
}
.bso-teile__tabelle .ehbs-table { min-width: 560px; }
.bso-teile__tabelle td:first-child, .bso-teile__tabelle th { white-space: nowrap; }
@media (max-width: 960px) { .bso-teile { grid-template-columns: minmax(0, 1fr); } }

/* ── Scrollgebundene Einblendungen (nur Landingpage, nie im Testbereich) ──
   Progressive Enhancement: Ohne animation-timeline bleibt alles sofort
   sichtbar. Die Akzentlinie zeichnet sich ein, wenn der Kopf ins Bild
   kommt, Bento und Ablauf steigen gestaffelt auf. */
@keyframes bso-auftauchen {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ehbs-section .ehbs-heading { view-timeline-name: --bso-kopf; }
        .ehbs-section .ehbs-heading::after {
            animation: ehbs-line linear both; animation-timeline: --bso-kopf;
            animation-range: entry 60% cover 40%;
        }
        .bso-bento > *, .bso-steps > li, .bso-teile > * {
            animation: bso-auftauchen var(--ease-out) both;
            animation-timeline: view(); animation-range: entry 0% entry 80%;
        }
        .bso-bento > :nth-child(2), .bso-steps > li:nth-child(2), .bso-teile > :nth-child(2) { animation-range: entry 10% entry 90%; }
        .bso-bento > :nth-child(3), .bso-steps > li:nth-child(3) { animation-range: entry 20% entry 100%; }
        .bso-steps > li:nth-child(4) { animation-range: entry 30% cover 40%; }
    }
}

/* ── CTA-Band (Footer siehe "Kopf und Fuß") ───────────────────────────── */
.ehbs-cta-band { background: var(--ehbs-bg); }

/* ── Testbereich-Band ─────────────────────────────────────────────────────
   Getönte Fläche über die volle Breite, darin Einleitung und Wizard-Karte
   (#bso-wizard, wizard.css) untereinander. Spalte ohne Lücke wie der
   frühere Streamlit-Container, die Abstände tragen Innenabstand und der
   untere Rand der Einleitung. Ruhig, keine Einblendungen. */
.bso-testbereich {
    display: flex; flex-direction: column; gap: 0;
    background: var(--ehbs-bg-soft);
    padding: var(--section-y) clamp(1rem, .5rem + 2vw, 2rem);
}
.bso-test-intro { width: 100%; max-width: 920px; margin: 0 auto var(--space-8); }
.bso-test-intro p { margin-bottom: 0; font-size: var(--fs-lg); max-width: 40rem; }
/* ── Wizard im Testbereich ──────────────────────────────────────────────────
   Nachfolger der Widget-Regeln aus shared/theme.py. Die Maße kommen aus dem
   gemessenen Streamlit-1.58-Stand (Parity-Baseline): Die Karte ist ein
   senkrechter Stapel mit 1rem Abstand wie Streamlits stVerticalBlock, jedes
   Kind entspricht einem stElementContainer. Wo Streamlit Abstände über
   negative Ränder seiner Markdown-Container setzt (Überschriften, Linien),
   steht hier dieselbe Summe als Rand am Element.
   Farben nur aus den Tokens von ehbs-modern.css; wo Streamlit eigene
   Mischungen rechnete (Hinweisboxen, Kopf des offenen Aufklappbereichs),
   stehen die gemessenen Werte.
   Hell/Dunkel über prefers-color-scheme wie die übrige Seite. */

@font-face {
    /* Teilmenge mit den Ligaturen des Wizards (static/fonts/LICENSE-MaterialSymbols.txt) */
    font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-display: block;
    src: url("../static/fonts/material-symbols-rounded.woff2") format("woff2");
}

:root {
    /* Feldrahmen: Anthrazit, im Dunklen der Nebentextton (wie .ehbs-field). */
    --bso-feldrand: var(--ehbs-anthracite);
    --bso-abstand: 1rem;
    /* Hinweisboxen und roter Hinweistext wie Streamlits Ampelfarben (config.toml) */
    --bso-rot-text: rgb(129, 39, 29);
    --bso-box-fehler-bg: rgba(192, 57, 43, .1);   --bso-box-fehler-text: rgb(129, 39, 29);
    --bso-box-erfolg-bg: rgba(46, 125, 50, .1);   --bso-box-erfolg-text: rgb(26, 71, 28);
    --bso-box-info-bg: rgba(28, 131, 255, .1);    --bso-box-info-text: rgb(0, 84, 163);
    --bso-box-warnung-bg: rgba(255, 255, 18, .1); --bso-box-warnung-text: rgb(146, 108, 5);
    --bso-aufklapp-kopf-offen: rgb(250, 251, 253);
    --bso-checkbox-bg: var(--ehbs-bg);
    --bso-hilfe-farbe: rgba(0, 0, 0, .6);
    /* Platzhalter: Streamlits Regel schlug die aus theme.py (Text 60 %) */
    --bso-platzhalter: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bso-feldrand: var(--ehbs-text-sek);
        --bso-rot-text: rgb(246, 184, 177);
        --bso-box-fehler-bg: rgba(239, 122, 109, .2); --bso-box-fehler-text: rgb(246, 184, 177);
        --bso-box-erfolg-bg: rgba(46, 125, 50, .2);   --bso-box-erfolg-text: rgb(67, 182, 73);
        --bso-box-info-bg: rgba(61, 157, 243, .2);    --bso-box-info-text: rgb(61, 157, 243);
        --bso-box-warnung-bg: rgba(255, 255, 18, .2); --bso-box-warnung-text: rgb(255, 255, 194);
        --bso-aufklapp-kopf-offen: rgb(16, 21, 51);
        --bso-checkbox-bg: rgb(15, 20, 51);
        --bso-hilfe-farbe: rgba(255, 255, 255, .6);
        --bso-platzhalter: rgba(255, 255, 255, .6);
    }
}

/* ── Karte ───────────────────────────────────────────────────────────────── */
.bso-testkarte {
    position: relative; width: 100%; max-width: 920px; margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--bso-abstand);
    background: var(--ehbs-surface); border: 1px solid var(--ehbs-line-soft);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: clamp(1.25rem, .75rem + 2vw, 2.75rem);
    color: var(--ehbs-text);
}
.bso-testkarte::before {
    content: ""; position: absolute; top: -1px; left: clamp(1.25rem, .75rem + 2vw, 2.75rem);
    width: 64px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ehbs-primary);
}
@media (prefers-color-scheme: dark) {
    .bso-testkarte { border-color: var(--ehbs-line); }
    .bso-testkarte::before { background: var(--ehbs-yellow); }
}
.bso-noscript { margin: 0; }

/* Senkrechter Stapel in Spalten, Aufklappbereichen und im Formular */
.bso-stapel { display: flex; flex-direction: column; gap: var(--bso-abstand); min-width: 0; }

/* ── Fortschrittsanzeige (Port von landing.stepper) ─────────────────────── */
.bso-stepper {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bso-stepper > li {
    margin: 0; display: flex; align-items: center; gap: var(--space-3); min-width: 0;
    font-size: var(--fs-small); font-weight: 600; color: var(--ehbs-text-sek);
}
.bso-stepper > li:not(:last-child)::after {
    content: ""; flex: 1 1 auto; min-width: 12px; height: 2px; border-radius: 1px; background: var(--ehbs-line);
}
.bso-stepper > li.is-done::after { background: var(--ehbs-primary); }
.bso-stepper > li.is-current, .bso-stepper > li.is-done { color: var(--ehbs-text); }
.bso-stepper__nr {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--ehbs-line); background: var(--ehbs-surface); color: var(--ehbs-text-sek);
    font-variant-numeric: tabular-nums; font-weight: 650;
}
.bso-stepper__nr img { width: 16px; height: 16px; }
.is-done .bso-stepper__nr, .is-current .bso-stepper__nr {
    background: var(--ehbs-primary); border-color: var(--ehbs-primary); color: var(--ehbs-text-on-dark);
}
.is-current .bso-stepper__nr { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ehbs-primary) 16%, transparent); }
.bso-stepper__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) {
    .is-done .bso-stepper__nr, .is-current .bso-stepper__nr {
        background: var(--ehbs-yellow); border-color: var(--ehbs-yellow); color: #000;
    }
    .is-done .bso-stepper__nr img { filter: brightness(0); }
    .bso-stepper > li.is-done::after { background: var(--ehbs-yellow); }
    .is-current .bso-stepper__nr { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ehbs-yellow) 22%, transparent); }
}

/* "Schritt N von 4": für Screenreader immer im DOM, sichtbar nur schmal.
   absolute nimmt sie wie Streamlits Elementcontainer aus dem Stapel. */
.bso-fortschritt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.bso-fortschritt__text { margin: 0; font-size: var(--fs-small); font-weight: 400; line-height: normal; }
@media (max-width: 640px) {
    .bso-stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .bso-fortschritt {
        position: static; width: auto; height: auto; overflow: visible; clip-path: none;
        align-self: flex-start; padding-bottom: var(--space-2);
    }
}

/* ── Linien, Überschriften, Text ─────────────────────────────────────────── */
/* Streamlit: 24px Rand, Container -16px nach unten. */
.bso-trenner {
    border: 0; border-top: 1px solid var(--ehbs-line-soft); height: 0; overflow: hidden;
    margin: var(--space-6) 0 calc(var(--space-6) - var(--bso-abstand));
}
@media (prefers-color-scheme: dark) { .bso-trenner { border-top-color: var(--ehbs-line); } }

/* Zwischenüberschriften mit Akzentlinie wie .ehbs-heading */
.bso-ueberschrift {
    font-size: 1.375rem; font-weight: 650; line-height: 1.2; letter-spacing: var(--tracking-head);
    color: var(--ehbs-text); position: relative;
    padding: 0 0 var(--space-3); margin: 0 0 calc(var(--space-2) - var(--bso-abstand));
}
.bso-ueberschrift::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px;
    border-radius: 2px; background: var(--ehbs-accent-line);
}

/* position: relative wie Streamlits stElementContainer: sonst unsichtbar,
   aber Chrome nimmt die Caption dann wie dort in die Compositing-Ebene eines
   fokussierten Felds darüber auf (gleiche Graustufen-Glättung, Zustand w16). */
.bso-caption {
    position: relative; margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ehbs-text-sek);
    overflow-wrap: break-word; word-break: break-word;
}
.bso-rot { color: var(--bso-rot-text); }
.bso-hinweis[hidden] { display: none; }

/* st.markdown/st.write: 1rem, Absatz ohne Rand */
.bso-md { font-size: 1rem; line-height: 1.6; }
.bso-md > p { margin: 0; overflow-wrap: break-word; word-break: break-word; }
.bso-md strong { font-weight: 600; }
/* Abstände (#20): Zeilen, die nur aus einem fetten Label bestehen, rücken
   enger an das Folgende (theme.py; der Selektor ignoriert Textknoten, trifft
   also auch "**Label:** Wert", nicht aber "**Label:** _(leer)_"). */
.bso-md:has(> p:only-child > strong:only-child) { margin-bottom: -.5rem; }

/* st.write(""): belegt nur einen Blockabstand */
.bso-luecke { height: 0; }

/* Inhalt aus st.html (gesperrte Vorschau) in Markdown-Schriftgröße */
.bso-html { font-size: 1rem; line-height: 1.6; }

/* ── Spalten (st.columns) ────────────────────────────────────────────────── */
.bso-zeile { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--bso-abstand); }
.bso-spalte { display: flex; flex-direction: column; gap: var(--bso-abstand); min-width: 0; }
.bso-spalte--1v2 { width: calc(50% - var(--bso-abstand)); flex: 1 1 calc(50% - var(--bso-abstand)); }
.bso-spalte--6v7 { width: calc(85.7143% - var(--bso-abstand)); flex: 1 1 calc(85.7143% - var(--bso-abstand)); }
.bso-spalte--1v7 { width: calc(14.2857% - var(--bso-abstand)); flex: 1 1 calc(14.2857% - var(--bso-abstand)); }
.bso-spalte--5v7 { width: calc(71.4286% - var(--bso-abstand)); flex: 1 1 calc(71.4286% - var(--bso-abstand)); }
.bso-spalte--2v7 { width: calc(28.5714% - var(--bso-abstand)); flex: 1 1 calc(28.5714% - var(--bso-abstand)); }
.bso-spalte--1v5 { width: calc(20% - var(--bso-abstand)); flex: 1 1 calc(20% - var(--bso-abstand)); }
@media (max-width: 640px) { .bso-spalte { min-width: calc(100% - 1.5rem); } }
/* Streamlit setzte den Löschknopf mit "<br>" eine Markdown-Zeile tiefer */
.bso-br { height: calc(1.6rem - var(--bso-abstand)); }

/* ── Textfelder ──────────────────────────────────────────────────────────── */
.bso-feld { position: relative; min-width: 0; }
.bso-feld__kopf { display: flex; align-items: center; min-height: 1.5rem; margin-bottom: .25rem; }
.bso-label {
    font-size: var(--fs-small); font-weight: 600; line-height: 1.6; color: var(--ehbs-text);
    overflow-wrap: break-word; word-break: break-word;
}
.bso-feld__hilfe { flex: 1 1 0%; display: flex; justify-content: flex-end; }
.bso-eingabe {
    display: flex; height: 2.5rem; overflow: hidden;
    border: 1px solid var(--bso-feldrand); border-radius: var(--radius-sm); background: var(--ehbs-bg);
    font-size: var(--fs-small); line-height: 1.6;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.bso-eingabe:hover { border-color: var(--ehbs-text); }
.bso-eingabe:focus-within {
    border-color: var(--ehbs-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ehbs-focus) 30%, transparent), 0 0 0 1px var(--ehbs-focus);
}
/* 46 px im 40 px hohen Rahmen wie bei Streamlit (min-height aus theme.py),
   der Text sitzt dadurch etwas unter der Mitte. */
.bso-eingabe__feld {
    flex: 1 1 auto; width: 100%; min-width: 0; min-height: 46px; margin: 0;
    /* Nur die Rahmenart: Farbe bleibt die des Browsers wie bei Streamlit,
       der Radius kommt beim Fokus aus :focus-visible (ehbs-modern.css). */
    padding: 8px 8px 8px 12px; border-style: none; background: transparent;
    font: inherit; font-size: var(--fs-base); line-height: 1.4; color: var(--ehbs-text);
    caret-color: var(--ehbs-focus);
}
/* Platzhalter kursiv, damit sie sich von echten Eingaben abheben (#20) */
.bso-eingabe__feld::placeholder { font-style: italic; color: var(--bso-platzhalter); opacity: 1; }

/* ── Hilfe-Symbol und Tooltip ────────────────────────────────────────────── */
.bso-hilfe {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 16px; height: 16px; margin: 0; padding: 0; border: 0; background: none;
    color: var(--ehbs-text); font-size: var(--fs-small); line-height: 0; cursor: pointer;
}
.bso-hilfe svg { width: 16px; height: 16px; stroke: var(--bso-hilfe-farbe); stroke-width: 2.25px; vertical-align: middle; }

.bso-tooltip {
    position: absolute; left: 0; top: 0; z-index: 1000;
    border-radius: var(--radius); box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
    pointer-events: none;
    /* Eigene Ebene wie Streamlits Popover: Text wird in Graustufen geglättet */
    will-change: transform;
}
.bso-tooltip__flaeche {
    position: relative; border-radius: var(--radius); background: var(--ehbs-surface); color: var(--ehbs-text);
    font-size: var(--fs-small); line-height: 1.6;
}
.bso-tooltip__inhalt { max-width: 42rem; padding: 6px 12px; }
/* Schmal bricht Streamlit den Text 32 px vor der Breite des Tooltips um */
@media (max-width: 576px) { .bso-tooltip__inhalt { max-width: calc(100% - 32px); } }
.bso-tooltip__inhalt p { margin: 0; font-size: var(--fs-small); line-height: 1.6; overflow-wrap: break-word; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.bso-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 16px; height: 16px; overflow: hidden;
    font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 16px;
    line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
    word-wrap: normal; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; user-select: none;
}

/* Hauptaktion in der Leitfarbe, Nebenaktion fein umrandet, Press-Feedback
   scale(.97) wie .ehbs-btn */
.bso-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; margin: 0; padding: 4px 12px; border: 1px solid transparent; border-radius: var(--radius);
    font: inherit; font-weight: 600; line-height: 1.6; text-align: center; cursor: pointer; user-select: none;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.bso-knopf--voll { width: 100%; }
/* Ohne use_container_width so breit wie der Inhalt, auch in Spalten */
.bso-knopf:not(.bso-knopf--voll) { align-self: flex-start; }
.bso-knopf:active:not(:disabled) { transform: scale(.97); }
.bso-knopf__inhalt { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; }
.bso-knopf__text {
    font-size: var(--fs-small); font-weight: 600; line-height: 1.6;
    overflow-wrap: break-word; word-break: break-word;
}
.bso-knopf--primaer {
    background: var(--ehbs-primary); border-color: var(--ehbs-primary); color: var(--ehbs-text-on-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-sm);
}
.bso-knopf--primaer:hover:not(:disabled) {
    background: var(--ehbs-primary-dark); border-color: var(--ehbs-primary-dark); color: var(--ehbs-text-on-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow);
}
.bso-knopf--sekundaer { background: var(--ehbs-surface); border-color: var(--ehbs-line); color: var(--ehbs-text); }
.bso-knopf--sekundaer:hover:not(:disabled) { border-color: var(--ehbs-text); }
@media (prefers-color-scheme: dark) {
    .bso-knopf--primaer { background: var(--ehbs-white); border-color: var(--ehbs-white); color: var(--ehbs-blue); }
    .bso-knopf--primaer:hover:not(:disabled) {
        background: var(--ehbs-primary-tint); border-color: var(--ehbs-primary-tint); color: var(--ehbs-white);
    }
}
/* Absenden im Formular: theme.py erfasste st.form_submit_button nicht
   (stBaseButton-primaryFormSubmit), er blieb in Streamlits primaryColor
   ohne Schatten, dunkel also Gelb mit weißer Schrift. Hover: Streamlits
   primaryColor um 15 % Helligkeit abgedunkelt, in 1.58 gemessen. */
.bso-knopf--primaer.bso-knopf--formular { box-shadow: none; }
.bso-knopf--primaer.bso-knopf--formular:hover:not(:disabled) {
    background: #111632; border-color: #111632; box-shadow: none;
}
@media (prefers-color-scheme: dark) {
    .bso-knopf--primaer.bso-knopf--formular { background: var(--ehbs-yellow); border-color: var(--ehbs-yellow); color: var(--ehbs-white); }
    .bso-knopf--primaer.bso-knopf--formular:hover:not(:disabled) {
        background: #e18409; border-color: #e18409; color: var(--ehbs-white);
    }
}
.bso-knopf:focus-visible { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }
.bso-knopf:disabled {
    cursor: not-allowed; box-shadow: none;
    color: color-mix(in srgb, var(--ehbs-text) 40%, transparent);
    border-color: color-mix(in srgb, var(--ehbs-line) 60%, transparent);
    background: transparent;
}

/* ── Schalter (st.toggle) ────────────────────────────────────────────────── */
.bso-schalter { align-self: flex-start; display: flex; align-items: center; min-height: 1.5rem; max-width: 100%; }
.bso-spalte > .bso-schalter { margin-top: var(--space-2); }
.bso-schalter__label { position: relative; display: flex; align-items: flex-start; cursor: pointer; user-select: none; }
.bso-schalter__input, .bso-checkbox__input {
    position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0;
    opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
.bso-schalter__spur {
    display: flex; align-items: center; flex: none; width: 32px; height: 16px; margin-top: 4px; padding: 0 2px;
    border-radius: 9999px; background: transparent;
    /* Toggle-Kontrast (#20): sichtbarer Rahmen statt hellgrauer Fläche */
    border: 1.5px solid var(--bso-feldrand);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.bso-schalter__knopf {
    width: 12px; height: 12px; border-radius: 50%; background: var(--ehbs-white);
    transition: transform var(--dur-fast) var(--ease-out);
}
.bso-schalter__input:checked + .bso-schalter__spur { background: var(--ehbs-primary); border: 0; }
.bso-schalter__input:checked + .bso-schalter__spur .bso-schalter__knopf { transform: translateX(16px); }
.bso-schalter__input:focus-visible + .bso-schalter__spur { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .bso-schalter__input:checked + .bso-schalter__spur { background: var(--ehbs-yellow); }
}
.bso-schalter__beschriftung {
    position: relative; display: flex; align-items: center; padding-left: var(--space-2);
    font-size: var(--fs-small); line-height: 1.5;
}
.bso-schalter__text { font-size: var(--fs-small); font-weight: 600; line-height: 1.5; color: var(--ehbs-text); }
.bso-schalter__hilfe { position: relative; display: flex; margin-left: 6px; }

/* Ausstattung: jeder Schalter als Kachel, ausgewählt in der Leitfarbe getönt */
.bso-kachel {
    border: 1px solid var(--ehbs-line); border-radius: var(--radius); background: var(--ehbs-surface);
    padding: var(--space-3);
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.bso-kachel:has(.bso-schalter__input:checked) { border-color: var(--ehbs-primary); background: var(--ehbs-primary-tint); }
.bso-kachel .bso-schalter { align-self: stretch; }
.bso-kachel .bso-schalter__beschriftung { flex: 1 1 auto; min-width: 0; }
.bso-kachel .bso-schalter__text {
    font-size: .9375rem; line-height: 1.3; overflow-wrap: normal; word-break: normal;
}
@media (prefers-color-scheme: dark) {
    .bso-kachel:has(.bso-schalter__input:checked) { border-color: var(--ehbs-yellow); }
}

/* ── Checkbox (Einwilligung) ─────────────────────────────────────────────── */
.bso-checkbox { align-self: flex-start; display: flex; align-items: center; min-height: 1.5rem; max-width: 100%; }
.bso-checkbox__label { position: relative; display: flex; align-items: flex-start; cursor: pointer; user-select: none; }
.bso-checkbox__kaestchen {
    flex: none; width: 16px; height: 16px; margin: 4px 2px 0 0; outline-width: 0;
    border: 1px solid var(--ehbs-line); border-radius: 5.6px; background-color: var(--bso-checkbox-bg);
    background-position: 50% 50%; background-repeat: no-repeat; background-size: contain;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bso-checkbox__input:checked + .bso-checkbox__kaestchen {
    background-color: var(--ehbs-primary); border-color: var(--ehbs-primary);
    background-image: url("data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%2217%22%20height%3D%2213%22%20viewBox%3D%220%200%2017%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M6.50002%2012.6L0.400024%206.60002L2.60002%204.40002L6.50002%208.40002L13.9%200.900024L16.1%203.10002L6.50002%2012.6Z%22%20fill%3D%22%23f0f2f6%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20");
}
.bso-checkbox__input:focus-visible + .bso-checkbox__kaestchen { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .bso-checkbox__input:checked + .bso-checkbox__kaestchen { background-color: var(--ehbs-yellow); border-color: var(--ehbs-yellow); }
}
.bso-checkbox__beschriftung { position: relative; padding-left: var(--space-2); font-size: var(--fs-small); line-height: 1.5; }
.bso-checkbox__text { display: block; font-size: var(--fs-small); font-weight: 600; line-height: 1.5; color: var(--ehbs-text); }

/* ── Aufklappbereiche (st.expander) ──────────────────────────────────────── */
.bso-aufklapp {
    border: 1px solid var(--ehbs-line); border-radius: var(--radius); background: var(--ehbs-surface);
}
.bso-aufklapp__kopf {
    position: relative; display: flex; align-items: center; min-height: 48px; padding: 4px 12px;
    border-radius: var(--radius); list-style: none; cursor: pointer; overflow: hidden;
}
.bso-aufklapp__kopf::-webkit-details-marker { display: none; }
.bso-aufklapp[open] > .bso-aufklapp__kopf { background: var(--bso-aufklapp-kopf-offen); }
.bso-aufklapp__zeile { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; overflow: hidden; }
.bso-aufklapp__titel { font-size: var(--fs-small); font-weight: 600; line-height: 1.6; }
.bso-aufklapp__inhalt { padding: var(--space-4); border-top: 1px solid var(--ehbs-line); }

/* ── Hinweisboxen (st.info/success/warning/error) ────────────────────────── */
.bso-box { padding: var(--space-4); border-radius: var(--radius); line-height: 1.5; }
.bso-box__inhalt p { margin: 0; font-size: 1rem; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; }
.bso-box__inhalt p + p { margin-top: var(--space-4); }
.bso-box--fehler { background: var(--bso-box-fehler-bg); color: var(--bso-box-fehler-text); }
.bso-box--erfolg { background: var(--bso-box-erfolg-bg); color: var(--bso-box-erfolg-text); }
.bso-box--info { background: var(--bso-box-info-bg); color: var(--bso-box-info-text); }
.bso-box--warnung { background: var(--bso-box-warnung-bg); color: var(--bso-box-warnung-text); }

/* ── Spinner (st.spinner) ────────────────────────────────────────────────── */
.bso-spinner { align-self: flex-start; display: flex; gap: var(--space-2); font-size: 1rem; line-height: 1.6; }
.bso-spinner__huelle { display: flex; align-items: center; justify-content: center; align-self: center; width: 20px; height: 20px; }
.bso-spinner__kreis {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor;
    animation: bso-drehen 1s linear infinite;
}
.bso-spinner__text p { margin: 0; }
@keyframes bso-drehen { to { transform: rotate(360deg); } }
/* Reduzierte Bewegung: ehbs-modern.css kürzt nur die Dauer auf 1 ms, ein
   endloser Kreis würde dann flackern. Stehender Ring, der Text bleibt. */
@media (prefers-reduced-motion: reduce) { .bso-spinner__kreis { animation: none; } }

/* ── Kontaktformular (st.form) ───────────────────────────────────────────── */
.bso-formular { margin: 0; padding: 15px; border: 1px solid var(--ehbs-line); border-radius: var(--radius); }
.bso-formular > .bso-stapel { min-width: 0; }
/* Honeypot (#26): display:none statt nur visuell versteckt, damit es auch
   per Tab nicht erreichbar ist. Die Hülle bleibt als leerer Block stehen. */
.bso-honeypot { display: none; }