/* =========================================================================
   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ß, Startseite, Banner, Rahmen des Assistenten.
   Ü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; }


/* ── Schlanker Kopf des LE-Ermittlers ─────────────────────────────────────
   Logo links, rechts der leise Link und auf der Startseite der Hauptknopf.
   Die Website-Navigation entfällt, die Stile dafür bleiben ungenutzt. */
.le-kopf__innen { justify-content: space-between; }
.le-kopf__rechts { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
:root .web-header .le-kopf__leise {
    font-size: .9375rem; font-weight: 500; color: var(--ehbs-anthracite);
    text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ehbs-blue) 35%, transparent);
    text-underline-offset: .25em;
}
:root .web-header .le-kopf__leise:hover { color: var(--ehbs-blue); text-decoration-color: var(--ehbs-orange); }
@media (max-width: 640px) {
    .le-kopf__innen { height: auto; min-height: 72px; flex-wrap: wrap; padding-block: .5rem; gap: .25rem 1rem; }
    .le-kopf__rechts { gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
    :root .web-header .le-kopf__leise { font-size: .875rem; }
}

/* ── Banner der Weihnachtsaktion ──────────────────────────────────────────
   Das Frontend füllt #le-banner und nimmt hidden weg. Ruhig, eine Zeile,
   auf dem Handy umbrechend, kein Alarm. */
.le-banner {
    background: var(--ehbs-primary-dark); color: var(--ehbs-text-on-dark);
    padding: .65rem clamp(1rem, 4vw, 3rem); text-align: center;
    font-size: var(--fs-small); line-height: 1.5; letter-spacing: .01em;
}
.le-banner[hidden] { display: none; }
.le-banner p { margin: 0; font-size: inherit; }
.le-banner strong { font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.le-hero { padding: clamp(3.5rem, 2rem + 4vw, 6.5rem) 0; }
/* Hintergrund mit Tiefe, statisch: Verlauf Nachtblau zur Leitfarbe, ein
   Lichtfeld rechts, Abdunkelung links unten, feines Korn und blasses
   Linienraster. Nur Tokens und color-mix. */
.le-hero {
    background:
        radial-gradient(34rem 30rem at 82% 40%, color-mix(in srgb, var(--ehbs-white) 18%, 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);
}
.le-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; z-index: -1;
}
:root .le-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 75% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 75% 20%, #000 0%, transparent 75%);
}
@media (prefers-contrast: more) { .le-hero::after, :root .le-hero::before { display: none; } }
.le-hero__text { max-width: 46rem; }
.le-hero__kicker {
    margin: 0 0 var(--space-4); font-size: var(--fs-small); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ehbs-yellow);
}
.le-hero h1 { font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.5rem); hyphens: manual; text-wrap: balance; }
:root .le-hero__facts { margin-top: var(--space-8); row-gap: var(--space-3); }
.le-hero__facts li { font-size: var(--fs-small); }
.le-hero__facts li::before {
    content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ehbs-yellow);
}

/* ── Gemeinsame Bausteine ─────────────────────────────────────────────── */
.le-lead { font-size: var(--fs-lg); max-width: 44rem; }

/* Für wen: vier Karten */
.le-zielgruppen {
    list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.le-zielgruppen .ehbs-card { margin: 0; }
.le-zielgruppen .ehbs-card p { margin: 0; color: var(--ehbs-text-sek); font-size: var(--fs-small); }

/* Schritte */
:root .le-steps { padding: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root .le-steps > li { margin: 0; padding-top: 4.5rem; }
.le-steps > li::before {
    width: 48px; height: 48px; font-size: 1.125rem;
    box-shadow: 0 0 0 6px var(--ehbs-bg-soft), var(--shadow);
}
.le-steps > li::after { top: 24px; left: 64px; right: var(--space-4); background: var(--ehbs-line); }
.le-steps p { margin: 0; max-width: 24rem; }
:root .le-steps--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (prefers-color-scheme: dark) {
    .le-steps > li::before { background: var(--ehbs-surface-2); border: 1px solid var(--ehbs-line); }
}
/* Feste Spaltenzahl, damit die Linie nie ins Leere läuft. */
@media (max-width: 960px) {
    :root .le-steps, :root .le-steps--drei { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    :root .le-steps > li { padding: 0 0 0 4.25rem; min-height: 48px; }
    .le-steps > li::after { top: 56px; bottom: calc(-1 * var(--space-8) + 8px); left: 23px; right: auto; width: 2px; height: auto; }
}

/* Aufwand und Checkliste */
.le-aufwand, .le-beispiel, .le-grenze {
    display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}
.le-checkliste {
    background: var(--ehbs-surface); border: 1px solid var(--ehbs-line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1vw, 2rem); box-shadow: var(--shadow-sm);
}
.le-checkliste h3 { margin: 0 0 var(--space-4); }
.le-checkliste ul, .le-haken, .le-grenzen { list-style: none; margin: 0; padding: 0; }
.le-checkliste li, .le-haken li {
    position: relative; padding-left: 1.75rem; margin-bottom: var(--space-3);
}
.le-checkliste li:last-child, .le-haken li:last-child { margin-bottom: 0; }
.le-checkliste li::before, .le-haken li::before {
    content: ""; position: absolute; left: 0; top: .5em; width: .75rem; height: .4rem;
    border-left: 2px solid var(--ehbs-primary); border-bottom: 2px solid var(--ehbs-primary);
    transform: rotate(-45deg) translateY(-50%);
}
@media (prefers-color-scheme: dark) {
    .le-checkliste li::before, .le-haken li::before { border-color: var(--ehbs-yellow); }
}

/* Beispiel */
.le-beispiel__bild { margin: 0; }
.le-beispiel__bild img {
    display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto;
    border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--ehbs-line);
}
.le-beispiel__ersatz { margin: 0; }
.le-beispiel__ersatz .ehbs-table { min-width: 0; }
.le-beispiel__ersatz :is(th, td) { white-space: normal; padding-inline: var(--space-3); }
.le-beispiel__ersatz figcaption { font-size: var(--fs-small); color: var(--ehbs-text-sek); margin-bottom: var(--space-3); }

/* Grenze mit Angebotskarte */
.le-grenzen li { padding: var(--space-4) 0; border-top: 1px solid var(--ehbs-line-soft); }
.le-grenzen li:last-child { border-bottom: 1px solid var(--ehbs-line-soft); }
.le-angebot { margin: 0; }
.le-angebot h3 { margin-bottom: var(--space-3); }
.le-preise { margin: var(--space-6) 0; display: grid; gap: var(--space-3); }
.le-preise > div {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--ehbs-line-soft);
}
.le-preise dt { font-weight: 600; margin: 0; }
.le-preise dd { margin: 0; font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }
.le-preise dd span { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--ehbs-text-sek); }
.le-angebot__klein { font-size: var(--fs-small); color: var(--ehbs-text-sek); }
.le-knopf { margin-top: var(--space-2); text-align: center; justify-content: center; }
.le-hinweis { color: var(--ehbs-text-sek); margin-top: var(--space-8); }

/* Über die EHBS */
.le-ueber { max-width: 48rem; }

/* Häufige Fragen */
.le-faq { max-width: 52rem; }
.le-faq__liste { border-top: 1px solid var(--ehbs-line); }
.le-frage { border-bottom: 1px solid var(--ehbs-line); }
.le-frage summary {
    list-style: none; cursor: pointer; padding: var(--space-4) 2.5rem var(--space-4) 0;
    font-weight: 600; position: relative; transition: color var(--dur-fast) var(--ease-out);
}
.le-frage summary::-webkit-details-marker { display: none; }
.le-frage summary::after {
    content: ""; position: absolute; right: .5rem; top: 50%; width: .6rem; height: .6rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg); transition: transform var(--dur) var(--ease-out);
}
.le-frage[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.le-frage summary:hover { color: var(--ehbs-primary); }
.le-frage summary:focus-visible { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; border-radius: 4px; }
.le-frage p { margin: 0 0 var(--space-4); max-width: 44rem; color: var(--ehbs-text-sek); }

@media (max-width: 960px) {
    .le-aufwand, .le-beispiel, .le-grenze { grid-template-columns: minmax(0, 1fr); }
}

/* ── Assistent-Seite: Rahmen um die Karte ─────────────────────────────── */
.le-assistent { background: var(--ehbs-bg-soft); padding: var(--section-y) clamp(1rem, .5rem + 2vw, 2rem); }
.le-assistent__karte { width: 100%; max-width: 920px; margin: 0 auto; }
.le-noscript { margin: 0; }

/* ── Scrollgebundene Einblendungen (nur Startseite) ───────────────────────
   Nur die Akzentlinie unter den Überschriften, Inhalte bleiben immer sichtbar. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .le-seite--start .ehbs-section .ehbs-heading { view-timeline-name: --le-kopf; }
        .le-seite--start .ehbs-section .ehbs-heading::after {
            animation: ehbs-line linear both; animation-timeline: --le-kopf;
            animation-range: entry 60% cover 40%;
        }
    }
}
/* ── 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). */
    --lw-feldrand: var(--ehbs-anthracite);
    --lw-abstand: 1rem;
    /* Hinweisboxen und roter Hinweistext wie Streamlits Ampelfarben (config.toml) */
    --lw-rot-text: rgb(129, 39, 29);
    --lw-box-fehler-bg: rgba(192, 57, 43, .1);   --lw-box-fehler-text: rgb(129, 39, 29);
    --lw-box-erfolg-bg: rgba(46, 125, 50, .1);   --lw-box-erfolg-text: rgb(26, 71, 28);
    --lw-box-info-bg: rgba(28, 131, 255, .1);    --lw-box-info-text: rgb(0, 84, 163);
    --lw-box-warnung-bg: rgba(255, 255, 18, .1); --lw-box-warnung-text: rgb(146, 108, 5);
    --lw-aufklapp-kopf-offen: rgb(250, 251, 253);
    --lw-checkbox-bg: var(--ehbs-bg);
    --lw-hilfe-farbe: rgba(0, 0, 0, .6);
    /* Platzhalter: Streamlits Regel schlug die aus theme.py (Text 60 %) */
    --lw-platzhalter: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
    :root {
        --lw-feldrand: var(--ehbs-text-sek);
        --lw-rot-text: rgb(246, 184, 177);
        --lw-box-fehler-bg: rgba(239, 122, 109, .2); --lw-box-fehler-text: rgb(246, 184, 177);
        --lw-box-erfolg-bg: rgba(46, 125, 50, .2);   --lw-box-erfolg-text: rgb(67, 182, 73);
        --lw-box-info-bg: rgba(61, 157, 243, .2);    --lw-box-info-text: rgb(61, 157, 243);
        --lw-box-warnung-bg: rgba(255, 255, 18, .2); --lw-box-warnung-text: rgb(255, 255, 194);
        --lw-aufklapp-kopf-offen: rgb(16, 21, 51);
        --lw-checkbox-bg: rgb(15, 20, 51);
        --lw-hilfe-farbe: rgba(255, 255, 255, .6);
        --lw-platzhalter: rgba(255, 255, 255, .6);
    }
}

/* ── Karte ───────────────────────────────────────────────────────────────── */
.lw-testkarte {
    position: relative; width: 100%; max-width: 920px; margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--lw-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);
}
.lw-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) {
    .lw-testkarte { border-color: var(--ehbs-line); }
    .lw-testkarte::before { background: var(--ehbs-yellow); }
}
.lw-noscript { margin: 0; }

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

/* ── Fortschrittsanzeige (Port von landing.stepper) ─────────────────────── */
.lw-stepper {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lw-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);
}
.lw-stepper > li:not(:last-child)::after {
    content: ""; flex: 1 1 auto; min-width: 12px; height: 2px; border-radius: 1px; background: var(--ehbs-line);
}
.lw-stepper > li.is-done::after { background: var(--ehbs-primary); }
.lw-stepper > li.is-current, .lw-stepper > li.is-done { color: var(--ehbs-text); }
.lw-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;
}
.lw-stepper__nr img { width: 16px; height: 16px; }
.is-done .lw-stepper__nr, .is-current .lw-stepper__nr {
    background: var(--ehbs-primary); border-color: var(--ehbs-primary); color: var(--ehbs-text-on-dark);
}
.is-current .lw-stepper__nr { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ehbs-primary) 16%, transparent); }
.lw-stepper__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) {
    .is-done .lw-stepper__nr, .is-current .lw-stepper__nr {
        background: var(--ehbs-yellow); border-color: var(--ehbs-yellow); color: #000;
    }
    .is-done .lw-stepper__nr img { filter: brightness(0); }
    .lw-stepper > li.is-done::after { background: var(--ehbs-yellow); }
    .is-current .lw-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. */
.lw-fortschritt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.lw-fortschritt__text { margin: 0; font-size: var(--fs-small); font-weight: 400; line-height: normal; }
@media (max-width: 640px) {
    .lw-stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .lw-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. */
.lw-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(--lw-abstand));
}
@media (prefers-color-scheme: dark) { .lw-trenner { border-top-color: var(--ehbs-line); } }

/* Zwischenüberschriften mit Akzentlinie wie .ehbs-heading */
.lw-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(--lw-abstand));
}
.lw-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). */
.lw-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;
}
.lw-rot { color: var(--lw-rot-text); }
.lw-hinweis[hidden] { display: none; }

/* st.markdown/st.write: 1rem, Absatz ohne Rand */
.lw-md { font-size: 1rem; line-height: 1.6; }
.lw-md > p { margin: 0; overflow-wrap: break-word; word-break: break-word; }
.lw-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)_"). */
.lw-md:has(> p:only-child > strong:only-child) { margin-bottom: -.5rem; }

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

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

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

/* ── Textfelder ──────────────────────────────────────────────────────────── */
.lw-feld { position: relative; min-width: 0; }
.lw-feld__kopf { display: flex; align-items: center; min-height: 1.5rem; margin-bottom: .25rem; }
.lw-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;
}
.lw-feld__hilfe { flex: 1 1 0%; display: flex; justify-content: flex-end; }
.lw-eingabe {
    display: flex; height: 2.5rem; overflow: hidden;
    border: 1px solid var(--lw-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);
}
.lw-eingabe:hover { border-color: var(--ehbs-text); }
.lw-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. */
.lw-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) */
.lw-eingabe__feld::placeholder { font-style: italic; color: var(--lw-platzhalter); opacity: 1; }

/* ── Hilfe-Symbol und Tooltip ────────────────────────────────────────────── */
.lw-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;
}
.lw-hilfe svg { width: 16px; height: 16px; stroke: var(--lw-hilfe-farbe); stroke-width: 2.25px; vertical-align: middle; }

.lw-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;
}
.lw-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;
}
.lw-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) { .lw-tooltip__inhalt { max-width: calc(100% - 32px); } }
.lw-tooltip__inhalt p { margin: 0; font-size: var(--fs-small); line-height: 1.6; overflow-wrap: break-word; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.lw-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 */
.lw-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);
}
.lw-knopf--voll { width: 100%; }
/* Ohne use_container_width so breit wie der Inhalt, auch in Spalten */
.lw-knopf:not(.lw-knopf--voll) { align-self: flex-start; }
.lw-knopf:active:not(:disabled) { transform: scale(.97); }
.lw-knopf__inhalt { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; }
.lw-knopf__text {
    font-size: var(--fs-small); font-weight: 600; line-height: 1.6;
    overflow-wrap: break-word; word-break: break-word;
}
.lw-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);
}
.lw-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);
}
.lw-knopf--sekundaer { background: var(--ehbs-surface); border-color: var(--ehbs-line); color: var(--ehbs-text); }
.lw-knopf--sekundaer:hover:not(:disabled) { border-color: var(--ehbs-text); }
@media (prefers-color-scheme: dark) {
    .lw-knopf--primaer { background: var(--ehbs-white); border-color: var(--ehbs-white); color: var(--ehbs-blue); }
    .lw-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. */
.lw-knopf--primaer.lw-knopf--formular { box-shadow: none; }
.lw-knopf--primaer.lw-knopf--formular:hover:not(:disabled) {
    background: #111632; border-color: #111632; box-shadow: none;
}
@media (prefers-color-scheme: dark) {
    .lw-knopf--primaer.lw-knopf--formular { background: var(--ehbs-yellow); border-color: var(--ehbs-yellow); color: var(--ehbs-white); }
    .lw-knopf--primaer.lw-knopf--formular:hover:not(:disabled) {
        background: #e18409; border-color: #e18409; color: var(--ehbs-white);
    }
}
.lw-knopf:focus-visible { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }
.lw-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) ────────────────────────────────────────────────── */
.lw-schalter { align-self: flex-start; display: flex; align-items: center; min-height: 1.5rem; max-width: 100%; }
.lw-spalte > .lw-schalter { margin-top: var(--space-2); }
.lw-schalter__label { position: relative; display: flex; align-items: flex-start; cursor: pointer; user-select: none; }
.lw-schalter__input, .lw-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;
}
.lw-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(--lw-feldrand);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.lw-schalter__knopf {
    width: 12px; height: 12px; border-radius: 50%; background: var(--ehbs-white);
    transition: transform var(--dur-fast) var(--ease-out);
}
.lw-schalter__input:checked + .lw-schalter__spur { background: var(--ehbs-primary); border: 0; }
.lw-schalter__input:checked + .lw-schalter__spur .lw-schalter__knopf { transform: translateX(16px); }
.lw-schalter__input:focus-visible + .lw-schalter__spur { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .lw-schalter__input:checked + .lw-schalter__spur { background: var(--ehbs-yellow); }
}
.lw-schalter__beschriftung {
    position: relative; display: flex; align-items: center; padding-left: var(--space-2);
    font-size: var(--fs-small); line-height: 1.5;
}
.lw-schalter__text { font-size: var(--fs-small); font-weight: 600; line-height: 1.5; color: var(--ehbs-text); }
.lw-schalter__hilfe { position: relative; display: flex; margin-left: 6px; }

/* Ausstattung: jeder Schalter als Kachel, ausgewählt in der Leitfarbe getönt */
.lw-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;
}
.lw-kachel:has(.lw-schalter__input:checked) { border-color: var(--ehbs-primary); background: var(--ehbs-primary-tint); }
.lw-kachel .lw-schalter { align-self: stretch; }
.lw-kachel .lw-schalter__beschriftung { flex: 1 1 auto; min-width: 0; }
.lw-kachel .lw-schalter__text {
    font-size: .9375rem; line-height: 1.3; overflow-wrap: normal; word-break: normal;
}
@media (prefers-color-scheme: dark) {
    .lw-kachel:has(.lw-schalter__input:checked) { border-color: var(--ehbs-yellow); }
}

/* ── Checkbox (Einwilligung) ─────────────────────────────────────────────── */
.lw-checkbox { align-self: flex-start; display: flex; align-items: center; min-height: 1.5rem; max-width: 100%; }
.lw-checkbox__label { position: relative; display: flex; align-items: flex-start; cursor: pointer; user-select: none; }
.lw-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(--lw-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);
}
.lw-checkbox__input:checked + .lw-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");
}
.lw-checkbox__input:focus-visible + .lw-checkbox__kaestchen { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .lw-checkbox__input:checked + .lw-checkbox__kaestchen { background-color: var(--ehbs-yellow); border-color: var(--ehbs-yellow); }
}
.lw-checkbox__beschriftung { position: relative; padding-left: var(--space-2); font-size: var(--fs-small); line-height: 1.5; }
.lw-checkbox__text { display: block; font-size: var(--fs-small); font-weight: 600; line-height: 1.5; color: var(--ehbs-text); }

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

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

/* ── Spinner (st.spinner) ────────────────────────────────────────────────── */
.lw-spinner { align-self: flex-start; display: flex; gap: var(--space-2); font-size: 1rem; line-height: 1.6; }
.lw-spinner__huelle { display: flex; align-items: center; justify-content: center; align-self: center; width: 20px; height: 20px; }
.lw-spinner__kreis {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor;
    animation: lw-drehen 1s linear infinite;
}
.lw-spinner__text p { margin: 0; }
@keyframes lw-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) { .lw-spinner__kreis { animation: none; } }

/* ── Kontaktformular (st.form) ───────────────────────────────────────────── */
.lw-formular { margin: 0; padding: 15px; border: 1px solid var(--ehbs-line); border-radius: var(--radius); }
.lw-formular > .lw-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. */
.lw-honeypot { display: none; }
/* ── LE-Ermittler: Ergänzungen zum Assistenten ─────────────────────────────
   Bausteine, die der BSO-Assistent (wizard.css) nicht hatte. Farben nur aus
   den Tokens von ehbs-modern.css und den Variablen aus wizard.css. */

/* Acht Schritte: auf breiten Bildschirmen mit Text, schmaler nur die Nummern
   und der aktuelle Schritt ausgeschrieben. */
.lw-stepper { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (min-width: 641px) {
    .lw-stepper > li:not(.is-current) .lw-stepper__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    }
    .lw-stepper { display: flex; }
    .lw-stepper > li { flex: 1 1 0; }
    .lw-stepper > li.is-current { flex: 3 1 0; }
}
@media (max-width: 640px) {
    .lw-stepper { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .lw-stepper > li.is-current { grid-column: auto; }
    .lw-stepper > li:not(:last-child)::after { min-width: 4px; }
    .lw-stepper__nr { width: 28px; height: 28px; }
}

/* Auswahlliste und Textbereich im selben Rahmen wie Textfelder */
.lw-auswahl { appearance: auto; cursor: pointer; background: transparent; }
.lw-eingabe:has(.lw-textbereich) { height: auto; }
.lw-textbereich { resize: vertical; min-height: 4.5rem; padding-top: .5rem; padding-bottom: .5rem; font: inherit; }

/* Radiogruppe als Segmente */
.lw-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.lw-legende { display: flex; align-items: center; gap: .35rem; padding: 0; margin-bottom: .35rem; }
.lw-segmente { display: flex; flex-wrap: wrap; gap: .5rem; }
.lw-segment { position: relative; display: inline-flex; cursor: pointer; }
.lw-segment__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lw-segment__text {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
    border: 1px solid var(--lw-feldrand); border-radius: var(--radius-sm); background: var(--ehbs-bg);
    font-size: var(--fs-small); font-weight: 550; color: var(--ehbs-text);
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lw-segment:hover .lw-segment__text { border-color: var(--ehbs-text); }
.lw-segment__input:checked + .lw-segment__text {
    background: var(--ehbs-primary); border-color: var(--ehbs-primary); color: var(--ehbs-text-on-dark);
}
.lw-segment__input:focus-visible + .lw-segment__text { outline: 2px solid var(--ehbs-primary); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .lw-segment__input:checked + .lw-segment__text { background: var(--ehbs-yellow); border-color: var(--ehbs-yellow); color: #000; }
}

/* Brandklassen als Raster */
.lw-klassen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .5rem 1rem; }

.lw-einrueckung {
    display: flex; flex-direction: column; gap: .75rem; padding: .75rem 1rem;
    background: var(--ehbs-bg-soft); border-radius: var(--radius-md);
}

/* Leiser Link (Knopf in Textform) */
.lw-leise {
    appearance: none; border: 0; background: none; padding: .6rem 0; min-height: 44px; cursor: pointer; font: inherit; text-align: left;
    font-size: var(--fs-small); font-weight: 600; color: var(--ehbs-primary);
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.lw-leise:hover { text-decoration-thickness: 2px; }
@media (prefers-color-scheme: dark) { .lw-leise { color: var(--ehbs-yellow); } }

.lw-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: .25rem; }
.lw-werkzeuge > :last-child { margin-left: auto; }
.lw-navigation { position: sticky; bottom: 0; z-index: 2; background: var(--ehbs-surface); padding: .5rem 0; }

.lw-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.lw-aktionen .lw-knopf { width: auto; }

/* Vorab-Kasten (bereithalten, Ablauf) */
.lw-vorab {
    background: var(--ehbs-bg-soft); border-radius: var(--radius-md); padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.lw-vorab__titel { margin: 0; font-weight: 650; }
.lw-liste { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-small); }

/* Bereichskarten und Abschnitte je Bereich */
.lw-bereich[open] { border-color: var(--ehbs-primary); }
.lw-aufklapp__zeile .lw-ampel { margin-left: auto; }
.lw-abschnitt {
    border: 1px solid var(--ehbs-line-soft); border-radius: var(--radius-md); padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.lw-abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.lw-abschnitt__titel { margin: 0; font-size: 1rem; font-weight: 650; }
.lw-abschnitt__wert { font-size: var(--fs-small); color: var(--ehbs-text-sek); font-variant-numeric: tabular-nums; }
.lw-abschnitt__kopf .lw-ampel { margin-left: auto; }

/* Löscherzeile */
.lw-loescher {
    display: flex; flex-direction: column; gap: .5rem; padding-bottom: .75rem;
    border-bottom: 1px dashed var(--ehbs-line-soft);
}
.lw-loescher__zahlen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(5rem, 1fr) auto; gap: .75rem; align-items: end; }
.lw-loescher__zahlen:not(:has(> button)) { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.lw-le { font-size: var(--fs-small); font-weight: 600; color: var(--ehbs-text-sek); font-variant-numeric: tabular-nums; }
.lw-le:empty { display: none; }
.lw-le--null { color: var(--lw-rot-text); }

/* Ampel */
.lw-ampel {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    font-size: .8125rem; font-weight: 600; line-height: 1; padding: .3rem .55rem; border-radius: 999px;
}
.lw-ampel::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.lw-ampel--gruen { background: var(--lw-box-erfolg-bg); color: var(--lw-box-erfolg-text); }
.lw-ampel--gelb { background: var(--lw-box-warnung-bg); color: var(--lw-box-warnung-text); }
.lw-ampel--rot { background: var(--lw-box-fehler-bg); color: var(--lw-box-fehler-text); }

/* Tabellen */
.lw-tabelle__huelle { overflow-x: auto; }
.lw-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.lw-tabelle th, .lw-tabelle td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--ehbs-line-soft); }
.lw-tabelle th { font-weight: 650; color: var(--ehbs-text-sek); white-space: nowrap; }
.lw-tabelle td:nth-child(n+3), .lw-tabelle th:nth-child(n+3) { text-align: right; }
.lw-tabelle tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--ehbs-line); }
.lw-zelle-name { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Vorschlag und Plan-Kasten */
.lw-vorschlag { display: flex; flex-direction: column; gap: .35rem; }
.lw-vorschlag__summe { margin: 0; font-weight: 600; font-size: var(--fs-small); }
.lw-plan {
    background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem); display: flex; flex-direction: column; gap: .75rem;
}
.lw-plan p { margin: 0; }
.lw-plan__titel { margin: 0; font-size: 1.25rem; font-weight: 650; }

.lw-plan__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.lw-plan .lw-knopf--primaer { background: var(--ehbs-yellow); border-color: var(--ehbs-yellow); color: #000; width: auto; }
.lw-plan .lw-leise { color: var(--ehbs-text-on-dark); }
.lw-plan__preis { margin: 0; font-size: var(--fs-small); color: var(--ehbs-text-sek); }

.lw-box--mit-knopf { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; padding: 1rem 1.25rem; }
.lw-box--mit-knopf p { margin: 0; }

/* Datei laden: Eingabe unsichtbar über dem Knopf */
.lw-datei__label { position: relative; cursor: pointer; }
.lw-datei { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

@media (max-width: 640px) {
    .lw-loescher__zahlen { grid-template-columns: minmax(0, 1fr) minmax(4.5rem, .6fr) auto; }
    .lw-tabelle th, .lw-tabelle td { padding: .45rem .4rem; }
}

.lw-plan .lw-plan__preis { color: var(--ehbs-text-on-dark); opacity: .88; }