/* ==========================================================================
   Webdesign Grimm · Basis-CSS (Owner: wdf-design-system, Aufträge P5-ds, P5-ds2)
   Reset · Schrift · Typo-Stile · Links · Buttons · Fokus · Formulare · Raster
   · feste Ebenen (Lichtwolke, Korn) · Kopfzeile · Fußzeile · mobile Leiste
   · gemeinsame Komponenten (Namen = data-wdf-component, siehe wdf/design-system/komponenten.md)
   · Module der Startseite (P4-B12/B13): Preis-Vergleich, Paketwahl, Preis-Hinweis, Bausteine, Nutzen-Band,
     Team-Karte, Diagnose-Formular, FAQ; Formularfelder an P4-B12 angeglichen
   Nur Token-Werte aus tokens.css. Klassen der Komponenten wie im Prototyp
   (wdf/directions/B/hero.html), damit Abschnitte 1:1 übernommen werden können.

   Zustandsklassen am <html>:
     .js     JavaScript läuft (head.html)
     .film   Bewegung läuft (motion.js setzt sie, nicht bei Reduced Motion / ohne GSAP / Fenster < 520 px hoch)
     Statische Fassung = :root:not(.film)  (ersetzt .no-film des Prototyps; gilt auch ohne JS)
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, SIL OFL 1.1, assets/fonts/OFL-Geist.txt) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + var(--space-16));
}
@media (max-width: 1023.98px) { html { scroll-padding-bottom: calc(var(--leiste-h) + var(--space-16)); } }   /* Lauf 4, WCAG 2.4.11: Fokus nie unter der mobilen Leiste (die ab 1024 px fehlt) */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--font-weight-display); }
p, li { text-wrap: pretty; }   /* K-VIS-05 (P9-3): keine Einzelwörter in der letzten Zeile; Klassen mit balance überschreiben */
button, input, select, textarea { font: inherit; color: inherit; }
svg.i { width: 1em; height: 1em; flex: none; fill: currentColor; }
::selection { background: var(--color-accent-a40); color: var(--color-text); }

/* ---------- Barrierefreiheit ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-3); border-radius: var(--radius-focus); }
.auf-hell :focus-visible, .pe-karte :focus-visible { outline-color: var(--color-focus-on-light); }
.skip-link {
  position: fixed; left: var(--space-16); top: var(--space-16); z-index: var(--z-skip);
  background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--space-12) var(--space-16); border-radius: var(--radius-sm);
  font-weight: var(--font-weight-display); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Raster ---------- */
.wrap {
  position: relative; max-width: var(--container-max); margin: 0 auto;
  padding-left: var(--rand); padding-right: var(--rand);
}
main, header, footer { position: relative; z-index: var(--z-content); }
.abschnitt, .modul { position: relative; padding: var(--space-section) 0; }

/* ---------- Typo-Stile ---------- */
.heading-1 { font: var(--font-weight-display) min(var(--font-size-h1), var(--h1-height-cap)) / var(--leading-h1) var(--font-display); letter-spacing: var(--tracking-h1); text-wrap: balance; }
.heading-2 { font: var(--font-weight-display) var(--font-size-h2) / var(--leading-h2) var(--font-display); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.heading-story { font: var(--font-weight-display) var(--font-size-story) / var(--leading-story) var(--font-display); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.heading-3 { font: var(--font-weight-display) var(--font-size-station) / var(--leading-station) var(--font-display); letter-spacing: var(--tracking-station); text-wrap: balance; }
.heading-4 { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; }
.title-1 { font: var(--font-weight-display) var(--font-size-body-lg) / var(--leading-title) var(--font-display); letter-spacing: var(--tracking-title); }
.title-2 { font: var(--font-weight-display) var(--font-size-body) / var(--leading-snug) var(--font-text); }
.title-3 { font: var(--font-weight-display) var(--font-size-ui) / var(--leading-snug) var(--font-text); }
.statement { font: var(--font-weight-medium) var(--font-size-statement) / var(--leading-ui) var(--font-display); letter-spacing: var(--tracking-title); }
.lead { font-size: var(--font-size-lead); line-height: var(--leading-body); color: var(--color-text-secondary); max-width: 50ch; text-wrap: pretty; }
.body-1 { font-size: var(--font-size-body-lg); line-height: var(--leading-text); text-wrap: pretty; }
.body-2 { font-size: var(--font-size-body); line-height: var(--leading-body); text-wrap: pretty; }
.body-3 { font-size: var(--font-size-ui); line-height: var(--leading-compact); }
.body-4 { font-size: var(--font-size-small); line-height: var(--leading-compact); }
.caption-1 { font-size: var(--font-size-caption); line-height: var(--leading-compact); color: var(--color-text-tertiary); }
.caption-2 { font-size: var(--font-size-caption-sm); line-height: var(--leading-ui); color: var(--color-text-tertiary); }
.mono { font-family: var(--font-mono); font-size: var(--font-size-mono); font-weight: var(--font-weight-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.mono-2 { font: var(--font-weight-mono) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.mono-3 { font: var(--font-weight-mono) var(--font-size-mono-xs) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.display-rating { font: var(--font-weight-display) var(--font-size-rating) / var(--leading-rating) var(--font-display); letter-spacing: var(--tracking-rating); font-variant-numeric: tabular-nums; }
.mikro { color: var(--color-text-tertiary); font-size: var(--font-size-small); }
.ci { color: var(--color-accent); }
.zahl { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

/* Kicker: Mono-Großbuchstaben mit kurzem CI-Strich davor */
.eyebrow {
  position: relative; display: flex; align-items: center; gap: var(--space-12); min-height: var(--space-16);
  color: var(--color-text-secondary);
}
.eyebrow::before { content: ""; flex: none; width: var(--size-kicker-line); height: 1px; background: var(--color-accent); }
.eyebrow--hell { color: var(--color-accent-soft); }

/* Kapitelkopf (Kicker, H2, Lead) */
.kapitel-kopf { display: grid; gap: var(--space-16); }
.kapitel-kopf h2 { font-size: var(--font-size-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); text-wrap: balance; max-width: 20ch; }
.kapitel-kopf .lead { max-width: 50ch; }

/* ---------- Links ---------- */
.link {
  color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-line-strong);
  text-underline-offset: var(--space-4); text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link--leise { color: var(--color-text-secondary); }
/* Textlinks außerhalb von Fließtext-Absätzen (Adressblock, Umfang-Zeilen): Klickfläche ≥ 24 px, Layout bleibt gleich (Innenabstand, durch Außenabstand ausgeglichen; P9-3, A07) */
address .link, .le-umfang-optional > .link { padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.link-mehr {
  display: inline-flex; align-items: center; gap: var(--space-8); width: max-content; min-height: var(--size-target);
  color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.link-mehr svg { width: var(--space-16); height: var(--space-16); color: var(--color-accent); }
.link-mono {
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--space-40);
  font: var(--font-weight-regular) var(--font-size-caption) / var(--leading-snug) var(--font-mono);
  color: var(--color-accent-soft); text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.link-mono svg { width: var(--size-icon-xs); height: var(--size-icon-xs); }
@media (hover: hover) {
  .link:hover { text-decoration-color: var(--color-accent); }
  .link-mehr:hover { border-bottom-color: var(--color-accent); }
  .link-mono:hover { border-bottom-color: var(--color-accent-soft-a50); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--size-button); padding: 0 var(--space-24);
  border: 0; border-radius: var(--radius-sm);
  font: var(--font-weight-display) var(--font-size-body) / var(--leading-none) var(--font-text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-button);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: var(--size-icon); height: var(--size-icon); transition: transform var(--dur-base) var(--ease-out); }
/* Lauf 5 (K-UI-02, WCAG 1.4.10): unter 380 px dürfen lange Beschriftungen umbrechen statt die Spalte aufzuweiten; ab 380 px unverändert */
@media (max-width: 379.98px) { .btn { max-width: 100%; white-space: normal; text-align: center; line-height: var(--leading-snug); padding-block: var(--space-8); } }
/* Lauf 5 (Reflow 320 px): Raster- und Flex-Kinder dürfen schmaler als ihr längstes Wort werden; lange Wörter brechen notfalls. Nur unter 380 px. */
@media (max-width: 379.98px) { main :where(*) { min-width: 0; } main :where(p, h1, h2, h3, h4, li, dd, dt, figcaption, label) { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }
.btn--sm { min-height: var(--size-button-sm); padding: 0 var(--space-18); font-size: var(--font-size-ui); }
.btn--block { width: 100%; }
.btn--secondary { background: transparent; color: var(--color-text); box-shadow: var(--ring-secondary); }
.btn--icon {
  width: var(--size-target); min-height: var(--size-target); height: var(--size-target); padding: 0;
  border-radius: var(--radius-round); background: transparent; color: var(--color-text); box-shadow: var(--ring-hairline);
}
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); transition-duration: var(--dur-press); }
@media (hover: hover) {
  .btn:hover { background: var(--color-accent-hover); }
  .btn--secondary:hover, .btn--icon:hover { background: var(--color-accent-a10); box-shadow: var(--ring-accent); }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(var(--space-3)); }
}
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-surface-3); color: var(--color-text-tertiary); box-shadow: none; cursor: not-allowed;
}
.btn--secondary:disabled, .btn--secondary[aria-disabled="true"] { background: transparent; box-shadow: var(--ring-hairline); }
.btn--icon:disabled { background: transparent; box-shadow: var(--ring-hairline-disabled); color: var(--color-text-disabled); }   /* P9-3: Farbe statt opacity .35 */
/* Laden: Beschriftung bleibt, drei Punkte zeigen Arbeit (bei Reduced Motion ruhig) */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn-laden { display: inline-flex; }
.btn-laden { display: none; gap: var(--space-3); }
.btn-laden i { width: var(--space-5); height: var(--space-5); border-radius: var(--radius-round); background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .btn-laden i { animation: btn-laden var(--dur-pulse) var(--ease-in-out) infinite; }
  .btn-laden i:nth-child(2) { animation-delay: 160ms; }
  .btn-laden i:nth-child(3) { animation-delay: 320ms; }
}
@keyframes btn-laden { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ---------- Feste Ebenen: Lichtwolke + Korn ---------- */
.wolke { position: fixed; inset: 0; z-index: var(--z-wolke); pointer-events: none; overflow: hidden; }
.wolke i { position: absolute; left: 0; top: 0; border-radius: var(--radius-round); opacity: 0; will-change: transform, opacity; }
.w-hof { width: var(--wolke-hof-w); height: var(--wolke-hof-h); margin: calc(var(--wolke-hof-h) / -2) 0 0 calc(var(--wolke-hof-w) / -2); background: var(--wolke-hof); }
.w-glut { width: var(--wolke-glut-w); height: var(--wolke-glut-h); margin: calc(var(--wolke-glut-h) / -2) 0 0 calc(var(--wolke-glut-w) / -2); background: var(--wolke-glut); }
.w-kern { width: var(--wolke-kern-w); height: var(--wolke-kern-h); margin: calc(var(--wolke-kern-h) / -2) 0 0 calc(var(--wolke-kern-w) / -2); background: var(--wolke-kern); }
:root:not(.film) .wolke { display: none; }
.korn { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: var(--texture-grain-opacity); background-image: var(--texture-grain); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.kopf.is-scrolled {
  background: var(--color-overlay-header);
  -webkit-backdrop-filter: var(--blur-header); backdrop-filter: var(--blur-header);
  border-bottom-color: var(--color-line);
}
.kopf-in { position: static; display: flex; align-items: center; gap: var(--space-24); height: var(--kopf-h); }   /* static: Mega-Menü misst sich an .kopf (volle Breite) */
.logo { display: block; padding: var(--space-10) 0; flex: none; border-radius: var(--radius-focus); }
.logo img { height: var(--size-logo); width: auto; }
.fuss .logo img { height: var(--size-logo-footer); }
/* Navigation wie live (P5-nav): Leistungen ▾ · Bausteine ▾ · Branchen ▾ · Referenzen · Ratgeber · Über · Kontakt.
   Desktop-Navigation ab 1200 px (sieben Punkte + Hauptaktion brauchen die Breite); 1024–1199 px Kopfzeilen-CTA + Menü-Button. */
.nav { display: none; margin-left: auto; }
.nav-liste { display: flex; gap: var(--space-2); }
.nav-liste > li > a, .nav-trigger {
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--size-target);
  padding: 0 var(--space-12); border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  color: var(--color-text-secondary); font: var(--font-weight-regular) var(--font-size-ui) / var(--leading-none) var(--font-text); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav-trigger svg { width: var(--size-icon-xs); height: var(--size-icon-xs); color: var(--color-text-tertiary); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-trigger[aria-expanded="true"] { color: var(--color-text); background: var(--color-fill-hover); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--color-accent-soft); }
.nav-liste > li > a[aria-current="page"], .nav-trigger[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 -1px 0 var(--color-accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
@media (hover: hover) { .nav-liste > li > a:hover, .nav-trigger:hover { color: var(--color-text); background: var(--color-fill-hover); } }
/* Kopfzeilen-Hauptaktion: unter 1024 px aus (dort trägt die untere Leiste die Hauptaktion), unsichtbar und nicht bedienbar.
   Nicht display:none, weil audit.mjs (A06) die Höhe des ersten [data-wdf-cta="primary"] im DOM misst, auch wenn es ausgeblendet ist
   (Framework-Vorschlag P5-ds). Im Build genügt display:none. (P9-3) */
.kopf-cta { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; transform: translateY(-200%); }

/* Mega-Menü: volle Breite unter der Kopfzeile, Inhalt im Seitenraster */
.mega {   /* geschlossen = Attribut hidden (auch ohne CSS zu); ui.js schaltet hidden + aria-expanded */
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-header);
  max-height: calc(100dvh - var(--kopf-h)); overflow: auto; overscroll-behavior: contain;
  background: var(--color-bg); border-bottom: 1px solid var(--color-line-strong); box-shadow: var(--shadow-card);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@starting-style { .mega { opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-xs))); } }
.mega[hidden] { display: none; }
/* ohne JS: Panel per Zeigen/Fokus */
html:not(.js) .nav-item--mega:is(:hover, :focus-within) > .mega[hidden] { display: block; }
.kopf.mega-auf { background: var(--color-bg); border-bottom-color: var(--color-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mega-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-48); padding-block: var(--space-32) var(--space-40); }
.mega-haupt { display: grid; align-content: space-between; gap: var(--space-24); min-width: 0; }
.mega-spalten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-32); }
.mega-spalte { display: grid; align-content: start; gap: var(--space-12); min-width: 0; }
.mega-spalte:only-child { grid-column: 1 / -1; }
.mega-titel { color: var(--color-text-tertiary); font-size: var(--font-size-mono-sm); padding-left: var(--space-12); }
.mega-liste { display: grid; gap: var(--space-2); }
.mega-liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); }
.mega-link {
  display: flex; align-items: flex-start; gap: var(--space-14); min-height: var(--size-target);
  padding: var(--space-12); border-radius: var(--radius-md); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.mega-ico {
  flex: none; display: grid; place-items: center; width: var(--size-notice-icon); height: var(--size-notice-icon);
  border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: var(--ring-tile); color: var(--color-accent-soft);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mega-ico svg { width: var(--size-icon); height: var(--size-icon); }
.mega-txt { display: grid; gap: var(--space-4); min-width: 0; padding-top: var(--space-1); }
.mega-txt b { color: var(--color-text); font-weight: var(--font-weight-medium); font-size: var(--font-size-ui); line-height: var(--leading-snug); }
.mega-txt small { color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--leading-ui); text-wrap: pretty; }
.mega-link[aria-current="page"] { background: var(--color-fill-subtle); }
.mega-link[aria-current="page"] .mega-ico { box-shadow: var(--ring-accent); }
@media (hover: hover) {
  .mega-link:hover { background: var(--color-fill-hover); }
  .mega-link:hover .mega-ico { background: var(--color-accent-a10); box-shadow: var(--ring-accent); }
}
.mega-fuss { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-32); padding: var(--space-16) var(--space-12) 0; border-top: 1px solid var(--color-line); }
.mega-karte {
  display: grid; align-content: start; align-self: start; gap: var(--space-16); padding: var(--space-24);
  border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-panel);
}
.mega-karte-h { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; }
.mega-person { align-items: flex-start; font-size: var(--font-size-small); color: var(--color-text-secondary); }
.mega-person span { text-wrap: pretty; }
.mega-aktionen { display: grid; gap: var(--space-10); }
@media (prefers-reduced-motion: reduce) {
  .mega { transition: opacity var(--dur-fast) var(--ease-out); }
  @starting-style { .mega { transform: none; } }
  .nav-trigger svg { transition: none; }
}
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
  width: var(--size-target); height: var(--size-target); border-radius: var(--radius-md);
  border: 1px solid var(--color-line-strong); background: transparent; color: var(--color-text); cursor: pointer;
}
.menu-btn span { position: relative; width: var(--size-icon); height: var(--stroke-bold); background: currentColor; transition: background-color var(--dur-fast) var(--ease-out); }
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0; width: var(--size-icon); height: var(--stroke-bold); background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-btn span::before { top: calc(-1 * var(--space-6)); }
.menu-btn span::after { top: var(--space-6); }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(var(--space-6)) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(calc(-1 * var(--space-6))) rotate(-45deg); }
html:not(.js) .menu-btn { display: none; }   /* ohne JS: Navigation über die Fußzeile */

/* Mobilmenü (Rückmeldung 12.11., Entwurf wdf/entwuerfe/mobilmenue/): Schnellzugriff, nummerierte Punkte mit Unterzeile,
   Akkordeon mit Symbolen (mega-link/mega-ico), Branchen als Raster, Fuß mit Ansprechpartner und Aktionen (bleibt stehen). */
.mobilmenu { position: fixed; inset: var(--kopf-h) 0 0 0; z-index: var(--z-menu); display: flex; flex-direction: column; background: var(--color-bg); overflow: hidden; max-width: 100vw; }
.mobilmenu[hidden] { display: none; }
.mm-scroll { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: grid; align-content: start; gap: var(--space-20); padding: var(--space-8) var(--rand) var(--space-24); }
.mm-licht { position: absolute; top: 0; right: 0; width: 100%; height: 50%; background-position: 70% 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 10%, rgba(42, 146, 243, .2), rgba(42, 146, 243, 0)); }
.mm-schnell { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
.mm-kachel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-10); row-gap: var(--space-4);
  padding: var(--space-12); border-radius: var(--radius-card); text-decoration: none;
  background: linear-gradient(160deg, var(--color-accent-a16, rgba(42, 146, 243, .16)), rgba(42, 146, 243, .04) 60%), var(--color-surface); box-shadow: var(--ring-tile), var(--shadow-panel);
}
.mm-kachel .mega-ico { width: 36px; height: 36px; background: var(--color-accent-a10); }
.mm-kachel b, .mm-kachel small { grid-column: 1 / -1; }
.mm-kachel b { color: var(--color-text); font: var(--font-weight-display) var(--font-size-body-lg) / var(--leading-title) var(--font-display); letter-spacing: var(--tracking-title); }
.mm-kachel small { color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--leading-ui); }
.mm-tag { font-size: var(--font-size-mono-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-soft); }
.mm-kachel[aria-current="page"] { box-shadow: var(--ring-accent), var(--shadow-panel); }
.mm-liste { position: relative; }
.mm-liste > li { border-bottom: 1px solid var(--color-line); animation: mm-ein .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
@keyframes mm-ein { from { opacity: 0; transform: translateY(var(--space-10)); } }
.mm-trigger {
  display: grid; grid-template-columns: var(--space-32) minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--size-control);
  padding: var(--space-14) 0; border: 0; background: transparent; color: var(--color-text); text-align: left; text-decoration: none; cursor: pointer; font: inherit;
}
.mm-nr { align-self: start; padding-top: var(--space-6); font-size: var(--font-size-mono-2xs); color: var(--color-accent-soft); }
.mm-wort { display: grid; gap: var(--space-2); min-width: 0; }
.mm-wort b { font: var(--font-weight-display) var(--font-size-h4, 22px) / var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-h3); color: var(--color-text); }
.mm-wort small { font-size: var(--font-size-caption); color: var(--color-text-tertiary); }
.mm-trigger[aria-current="page"] .mm-wort b { color: var(--color-accent-soft); }
.mm-trigger[aria-expanded="true"] .mm-wort small { display: none; }
.mm-trigger[aria-expanded="true"] .mm-nr { align-self: center; padding-top: 0; }
.mm-plus { position: relative; flex: none; width: var(--space-32); height: var(--space-32); border-radius: var(--radius-round); box-shadow: var(--ring-tile); color: var(--color-accent-soft); transition: background-color var(--dur-base) var(--ease-out); }
.mm-plus::before, .mm-plus::after { content: ""; position: absolute; left: var(--space-10); right: var(--space-10); top: 50%; height: var(--stroke-bold); margin-top: calc(var(--stroke-bold) / -2); background: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.mm-plus::after { transform: rotate(90deg); }
.mm-trigger[aria-expanded="true"] .mm-plus { background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; }
.mm-trigger[aria-expanded="true"] .mm-plus::after { transform: rotate(0deg); }
.mm-pfeil { width: var(--size-icon-sm); height: var(--size-icon-sm); margin-right: var(--space-6); color: var(--color-text-tertiary); }
.mm-unter { display: grid; gap: var(--space-8); margin: 0 0 var(--space-16); padding: var(--space-8); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-panel); }
.mm-unter[hidden] { display: none; }
.mm-zeilen .mega-link { padding: var(--space-10); }
.mm-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-4); }
.mm-chip {
  display: flex; align-items: center; gap: var(--space-8); min-height: var(--size-target); padding: 0 var(--space-12); border-radius: var(--radius-md);
  background: var(--color-surface-2); box-shadow: var(--ring-tile); color: var(--color-text); text-decoration: none; font-size: var(--font-size-small); font-weight: var(--font-weight-medium);
}
.mm-chip svg { flex: none; width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent-soft); }
.mm-chip[aria-current="page"] { box-shadow: var(--ring-accent); }
.mm-alle { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-target); padding: 0 var(--space-10); color: var(--color-text); font-weight: var(--font-weight-medium); font-size: var(--font-size-small); text-decoration: none; }
.mm-alle svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); }
.mm-alle-reihe { display: flex; flex-wrap: wrap; gap: 0 var(--space-8); margin: 0; }
.mm-fuss { flex: none; display: grid; gap: var(--space-12); padding: var(--space-14) var(--rand) calc(var(--space-14) + env(safe-area-inset-bottom)); background: rgba(var(--color-bg-rgb), .92); border-top: 1px solid var(--color-line); }
.mm-person { display: flex; align-items: center; gap: var(--space-10); font-size: var(--font-size-caption); line-height: var(--leading-ui); color: var(--color-text-secondary); }
.mm-person img { flex: none; width: 36px; height: 36px; border-radius: var(--radius-round); box-shadow: var(--ring-tile); }
.mm-person b { color: var(--color-text); font-weight: var(--font-weight-medium); }
.mm-sterne { display: inline-flex; gap: 1px; vertical-align: -1px; color: var(--color-accent); }
.mm-sterne svg { width: 12px; height: 12px; }
.mm-aktionen { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-control) var(--size-control); gap: var(--space-8); }
.mm-aktionen .btn { padding-inline: var(--space-12); white-space: nowrap; }
.mm-rund { display: grid; place-items: center; min-height: var(--size-control); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--ring-tile); color: var(--color-text); }
.mm-rund svg { width: var(--size-icon); height: var(--size-icon); }
@media (prefers-reduced-motion: reduce) { .mm-liste > li { animation: none; } .mm-plus, .mm-plus::before, .mm-plus::after { transition: none; } }
@media (min-width: 1024px) {
  .kopf-cta { position: static; display: inline-flex; margin-left: auto; visibility: visible; pointer-events: auto; transform: none; }
  .menu-btn { margin-left: 0; }
}
@media (min-width: 1200px) {
  .nav { display: block; }
  .kopf-cta { margin-left: 0; }
  .kopf-in { gap: var(--space-16); }
  .menu-btn { display: none; }
  .mobilmenu { display: none !important; }
}
@media (min-width: 1440px) {
  .nav-liste { gap: var(--space-4); }
  .nav-liste > li > a, .nav-trigger { padding: 0 var(--space-14); }
  .kopf-in { gap: var(--space-24); }
}

/* ---------- Fußzeile ---------- */
.fuss { border-top: 1px solid var(--color-line); color: var(--color-text-tertiary); font-size: var(--font-size-small); }
.fuss .wrap { display: grid; gap: var(--space-48); padding-top: var(--space-64); padding-bottom: calc(var(--space-32) + var(--leiste-h)); }
.fuss-oben { display: grid; gap: var(--space-40); }
.fuss-marke { display: grid; gap: var(--space-16); align-content: start; max-width: 34ch; }
.fuss-marke p { color: var(--color-text-secondary); line-height: var(--leading-text); text-wrap: pretty; }
.fuss-gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-24); }
.fuss-gruppen h3 { margin-bottom: var(--space-8); font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary); }
.fuss a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.fuss-gruppen a { display: inline-flex; align-items: center; min-height: var(--size-target-min); padding: var(--space-6) 0; line-height: var(--leading-snug); }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-12) var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--color-line); }
.fuss-zeile p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-12); }
.fuss-zeile p > * { display: inline-block; padding: var(--space-6) 0; }
@media (hover: hover) { .fuss a:hover { color: var(--color-text); } }
@media (min-width: 768px) { .fuss-gruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .fuss-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--space-64); }
  .fuss .wrap { padding-bottom: var(--space-32); }
}

/* ---------- Mobile Aktionsleiste (unter 1024 px; erscheint, sobald kein Haupt-Button im Bild ist) ---------- */
.leiste-m {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: flex;
  padding: var(--space-10) var(--rand) calc(var(--space-10) + env(safe-area-inset-bottom));
  background: var(--color-overlay-bar); -webkit-backdrop-filter: var(--blur-bar); backdrop-filter: var(--blur-bar);
  border-top: 1px solid var(--color-line);
  transition: transform var(--dur-base) var(--ease-out), visibility 0s var(--ease-out) 0s;
}
.leiste-m .btn { flex: 1; }
.js .leiste-m { transform: translateY(110%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s var(--ease-out) var(--dur-base); }
.js .leiste-m.sichtbar { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out), visibility 0s var(--ease-out) 0s; }
.js .leiste-m.sichtbar.fokus-darunter { transform: translateY(110%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s var(--ease-out) var(--dur-base); }   /* Lauf 4: weicht dem Tastaturfokus (ui.js) */
@media (min-width: 1024px) { .leiste-m { display: none; } }

/* ==========================================================================
   Komponenten
   ========================================================================== */

/* ---------- nutzen-tag: Nutzen einer Station, CI getönt ---------- */
.nutzen-tag {
  display: inline-flex; align-items: center; gap: var(--space-8); justify-self: start;
  padding: var(--space-6) var(--space-11) var(--space-6) var(--space-9); border-radius: var(--radius-pill);
  background: var(--color-accent-a10); box-shadow: var(--ring-tag);
  font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--color-accent-soft);
}
.nutzen-tag svg { width: var(--size-icon-xs); height: var(--size-icon-xs); color: var(--color-accent); }

/* ---------- nutzen-leiste: Nutzen der Arbeitsweise als Pillen; .an = erreicht ---------- */
.nutzen { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.nutzen li {
  display: inline-flex; align-items: center; gap: var(--space-7); padding: var(--space-7) var(--space-12) var(--space-7) var(--space-10);
  border-radius: var(--radius-pill); box-shadow: var(--ring-hairline);
  font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--color-text-secondary); transition: opacity var(--dur-base) var(--ease-out);
}
.nutzen li svg { width: var(--size-icon-xs); height: var(--size-icon-xs); color: var(--color-accent); }
.nutzen--fortschritt li { opacity: .55; }
.nutzen--fortschritt li.an { opacity: 1; color: var(--color-text); box-shadow: var(--ring-active); }

/* ---------- chip: Merkmal in App-Karten ---------- */
.chip-reihe { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-9);
  border-radius: var(--radius-pill); box-shadow: var(--ring-hairline); font-size: var(--font-size-caption-sm); color: var(--color-text-secondary);
}
.chip svg { width: var(--size-icon-xs); height: var(--size-icon-xs); color: var(--color-accent); }

/* ---------- tags: Leistungs-Tags (Mono) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.tags li {
  padding: var(--space-6) var(--space-10); border-radius: var(--radius-pill); box-shadow: var(--ring-hairline);
  font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono-tag); text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---------- badge: Status mit leuchtendem Punkt ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .5em; padding: .3em .7em .3em .55em; border-radius: var(--radius-pill);
  background: var(--color-accent-a10); box-shadow: var(--ring-badge); color: var(--color-accent-soft);
  font-size: var(--font-size-caption-sm); font-weight: var(--font-weight-medium);
}
.badge::before { content: ""; width: .45em; height: .45em; border-radius: var(--radius-round); background: var(--color-accent); box-shadow: var(--glow-dot); }

/* ---------- stempel: erledigter Schritt; --warm nur für Freigabe/Ergebnis ---------- */
.stempel {
  display: inline-flex; align-items: center; gap: var(--space-6); justify-self: start; padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-stamp); background: var(--color-accent-a10); box-shadow: var(--ring-stamp); color: var(--color-accent-soft);
  font: var(--font-weight-display) var(--font-size-mono) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
}
.stempel svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); }
.stempel--warm { background: var(--color-warm-a10); box-shadow: var(--ring-stamp-warm); color: var(--color-warm-soft); }
.stempel--warm svg { color: var(--color-warm); }
.live { display: inline-flex; align-items: center; gap: var(--space-7); font: var(--font-weight-display) var(--font-size-mono) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text); }
.live i { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--color-success); box-shadow: var(--glow-live); }

/* ---------- app-karte: Karte aus dem Kundenmanager (Kopf, Titel, Zeilen, Stempel/Status) ---------- */
.app-karte {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-card);
  background: var(--color-app-bg); box-shadow: var(--shadow-app-card); font-size: var(--font-size-small);
}
.app-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  font: var(--font-weight-mono) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono-ui); text-transform: uppercase;
  color: var(--color-text-tertiary);
}
/* Kopfzeilen enger Oberflächen: App-Kopf bleibt einzeilig (links kürzt notfalls mit …), Mitteilung darf links umbrechen; rechts bleibt immer ganz */
.app-kopf > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast .kopfz > :first-child { min-width: 0; text-wrap: balance; }
.app-kopf > :last-child, .toast .kopfz > :last-child { flex: none; white-space: nowrap; }
.app-kopf b { color: var(--color-text); font-weight: var(--font-weight-medium); }
.app-kopf .wdg { display: flex; align-items: center; gap: var(--space-8); }
.app-kopf .wdg img { height: var(--size-icon-xs); width: auto; }
.app-titel { font: var(--font-weight-display) var(--font-size-body-lg) / var(--leading-title) var(--font-display); letter-spacing: var(--tracking-title); }
.app-meta { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.zeilen { display: grid; gap: var(--space-7); }
.zeilen li { display: flex; align-items: center; gap: var(--space-10); font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); }
.zeilen li svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); flex: none; }
.person { display: flex; align-items: center; gap: var(--space-10); padding-top: var(--space-10); border-top: 1px solid var(--color-line); font-size: var(--font-size-caption-sm); line-height: var(--leading-ui); color: var(--color-text-tertiary); }
.person--ohne-linie { padding-top: 0; border-top: 0; }
.person img { width: var(--size-person); height: var(--size-person); border-radius: var(--radius-round); object-fit: cover; box-shadow: var(--ring-person); }
.person b { display: block; color: var(--color-text); font-weight: var(--font-weight-medium); font-size: var(--font-size-caption); }
.entscheidung {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-md); background: var(--color-accent-a10); box-shadow: var(--ring-decision); font-size: var(--font-size-caption);
}
.entscheidung .ja { padding: var(--space-6) var(--space-10); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-display); font-size: var(--font-size-mono); white-space: nowrap; }
.vereinfacht {
  position: absolute; z-index: var(--z-label); right: var(--space-12); top: var(--space-12); padding: var(--space-5) var(--space-8); border-radius: var(--radius-sm);
  background: var(--color-overlay-header); color: var(--color-label-simplified);
  font: var(--font-weight-medium) var(--font-size-mono-xs) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
}

/* ---------- szene: Querformat-Bild (Bildwelt B) mit überlappender App-Karte ---------- */
.szene { position: relative; display: grid; isolation: isolate; }
.szene-bild {
  position: relative; aspect-ratio: 1376 / 768; border-radius: var(--radius-lg); overflow: hidden; container-type: inline-size;
  background: var(--color-scene-ground); box-shadow: var(--shadow-scene);
}
.szene-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.szene-ui { position: relative; z-index: var(--z-raised); margin: calc(-1 * var(--space-40)) var(--space-16) 0; max-width: var(--size-app-card); }

/* ---------- mitteilung: Mitteilung beim Betrieb (dunkel, Milchglas) ---------- */
.toast {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12); align-items: start;
  padding: var(--space-14) var(--space-16); border-radius: var(--radius-toast); background: var(--color-overlay-toast);
  -webkit-backdrop-filter: var(--blur-toast); backdrop-filter: var(--blur-toast); box-shadow: var(--shadow-toast);
}
.toast .app { width: var(--size-person); height: var(--size-person); border-radius: var(--radius-status); display: grid; place-items: center; background: var(--gradient-app-icon); box-shadow: var(--ring-app-icon); }
.toast .app i { width: var(--space-14); height: var(--space-14); border-radius: var(--radius-round); background: var(--example-orb); }
.toast .kopfz { display: flex; justify-content: space-between; gap: var(--space-12); font: var(--font-weight-mono) var(--font-size-mono-sm) / var(--leading-snug) var(--font-mono); letter-spacing: var(--tracking-mono-ui); text-transform: uppercase; color: var(--color-text-tertiary); }
/* enge Oberflächen-Köpfe unter 480 px eine Stufe kleiner, damit nichts gekürzt wird (F-mono-lesbar) */
@media (max-width: 479.98px) { .app-kopf, .toast .kopfz { font-size: var(--font-size-mono-xs); } }
.toast .titel { display: block; margin-top: var(--space-3); font-weight: var(--font-weight-display); font-size: var(--font-size-ui); line-height: var(--leading-snug); }
.toast .text { display: block; font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: var(--leading-compact); }
.toast .badge { margin-top: var(--space-8); }

/* ---------- mitteilungskarte: Posteingang des Betriebs (hell); --fertig = vollständige Anfrage (dunkel) ---------- */
.pe-liste { display: grid; gap: var(--space-10); }
.pe-karte, .pe-fertig {
  position: relative; display: grid; grid-template-columns: var(--size-notice-icon) minmax(0, 1fr); column-gap: var(--space-12);
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-12); border-radius: var(--radius-lg);
}
.pe-karte { align-items: center; background: var(--color-notice-bg); color: var(--color-notice-text); box-shadow: var(--shadow-notice); }
.pe-icon { position: relative; width: var(--size-notice-icon); height: var(--size-notice-icon); border-radius: var(--radius-round); display: grid; place-items: center; background: var(--color-notice-icon-bg); color: var(--color-notice-icon); }
.pe-icon svg { width: var(--size-icon); height: var(--size-icon); }
.pe-karte--frei .pe-icon { background: var(--color-notice-icon-warm-bg); color: var(--color-notice-icon-warm); }
.pe-text { display: grid; gap: var(--space-2); min-width: 0; }
.pe-meta { display: grid; }
.pe-meta > * { grid-area: 1 / 1; font-size: var(--font-size-ui); line-height: var(--leading-snug); color: var(--color-notice-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-zeile { position: relative; justify-self: start; max-width: 100%; font-weight: var(--font-weight-display); font-size: var(--font-size-body); line-height: var(--leading-snug); text-wrap: balance; }
.pe-fertig { align-items: start; padding-bottom: var(--space-14); background: var(--color-notice-done-bg); color: var(--color-text); box-shadow: var(--shadow-notice-done); }
.pe-fertig .pe-icon { background: var(--color-accent); color: var(--color-white); }
.pe-fertig .pe-meta > * { color: var(--color-accent-soft); }
.pe-daten { display: block; margin-top: var(--space-2); font-size: var(--font-size-ui); line-height: var(--leading-ui); color: var(--color-text-secondary); }
.pe-fertig .badge { justify-self: start; margin-top: var(--space-8); font-size: var(--font-size-small); white-space: nowrap; }
@media (min-width: 1024px) {
  .pe-karte, .pe-fertig { grid-template-columns: var(--size-notice-icon-lg) minmax(0, 1fr); column-gap: var(--space-14); padding: var(--space-14) var(--space-18) var(--space-14) var(--space-14); border-radius: var(--radius-card); }
  .pe-icon { width: var(--size-notice-icon-lg); height: var(--size-notice-icon-lg); }
  .pe-zeile { font-size: var(--font-size-body-lg); }
}

/* ---------- browser-huelle / telefon-huelle: Gerät, in dem eine Website gezeigt wird ---------- */
.geraet {
  position: relative; width: 100%; container-type: inline-size; border-radius: var(--radius-device); overflow: hidden; isolation: isolate;
  background: var(--color-device-screen); box-shadow: var(--shadow-device);
}
.geraet--browser { aspect-ratio: 16 / 10; }
.chrome {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-device-chrome); height: calc(100cqi / 64 * 2.3);
  display: flex; align-items: center; gap: calc(100cqi / 64 * .9); padding: 0 calc(100cqi / 64 * 1.1);
  background: var(--color-device-chrome); border-bottom: 1px solid var(--color-line);
  font: var(--font-weight-medium) calc(100cqi / 64 * .66) / var(--leading-none) var(--font-text); color: var(--color-device-chrome-text);
}
.chrome .ampel { display: flex; gap: calc(100cqi / 64 * .42); }
.chrome .ampel i { width: calc(100cqi / 64 * .58); height: calc(100cqi / 64 * .58); border-radius: var(--radius-round); background: var(--color-device-dot); }
.chrome .tab { display: flex; align-items: center; gap: .5em; align-self: flex-end; height: 78%; padding: .45em .9em; border-radius: .5em .5em 0 0; background: var(--color-device-screen); color: var(--color-device-tab-text); }
.chrome .tab i { width: .85em; height: .85em; border-radius: var(--radius-round); background: var(--example-orb); }
.chrome .url { flex: 1; display: flex; align-items: center; gap: .5em; max-width: 34em; height: 62%; margin: 0 auto; padding: 0 .9em; border-radius: 99em; background: var(--color-device-url-bg); color: var(--color-device-url-text); }
.chrome .url svg { width: .95em; height: .95em; }
.chrome .url span { display: block; height: .5em; width: 42%; border-radius: .3em; background: var(--color-device-url-bar); }
.chrome .fiktiv { font: var(--font-weight-medium) calc(100cqi / 64 * .58) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono-wide); text-transform: uppercase; color: var(--color-accent-soft); white-space: nowrap; }
.vp { position: absolute; left: 0; right: 0; bottom: 0; top: calc(100cqi / 64 * 2.3); overflow: hidden; }
/* Telefon 9:16 mit Statusleiste „9:41“ (Entwurfsmaß 390 px). .geraet--wechsel = Telefon unter 768 px, Browser ab 768 px */
.geraet--telefon { aspect-ratio: 9 / 16; border-radius: var(--radius-phone); }
.geraet--telefon .chrome { height: calc(100cqi / 21 * 1.9); padding: 0 calc(100cqi / 21 * 1.1); background: var(--color-device-screen); border-bottom: 0; font-size: calc(100cqi / 21 * .62); }
.geraet--telefon .chrome .ampel, .geraet--telefon .chrome .tab, .geraet--telefon .chrome .url { display: none; }
.geraet--telefon .chrome::before { content: "9:41"; font: var(--font-weight-display) calc(100cqi / 21 * .68) / var(--leading-none) var(--font-text); color: var(--color-device-tab-text); }
.geraet--telefon .chrome .fiktiv { margin-left: auto; font-size: calc(100cqi / 21 * .5); }
.geraet--telefon .vp { top: calc(100cqi / 21 * 1.9); }
@media (max-width: 767.98px) {
  .geraet--wechsel { aspect-ratio: 9 / 16; border-radius: var(--radius-phone); }
  .geraet--wechsel .chrome { height: calc(100cqi / 21 * 1.9); padding: 0 calc(100cqi / 21 * 1.1); background: var(--color-device-screen); border-bottom: 0; font-size: calc(100cqi / 21 * .62); }
  .geraet--wechsel .chrome .ampel, .geraet--wechsel .chrome .tab, .geraet--wechsel .chrome .url { display: none; }
  .geraet--wechsel .chrome::before { content: "9:41"; font: var(--font-weight-display) calc(100cqi / 21 * .68) / var(--leading-none) var(--font-text); color: var(--color-device-tab-text); }
  .geraet--wechsel .chrome .fiktiv { margin-left: auto; font-size: calc(100cqi / 21 * .5); }
  .geraet--wechsel .vp { top: calc(100cqi / 21 * 1.9); }
}

/* ---------- avatar-reihe + google-bewertung ---------- */
.vertrauen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-16); }
.avatare { display: flex; padding-left: var(--space-8); }
.avatare img {
  width: var(--size-avatar); height: var(--size-avatar); margin-left: calc(-1 * var(--space-9)); border-radius: var(--radius-round); object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.97); box-shadow: var(--ring-avatar);
}
.avatare--gross img { width: var(--size-avatar-lg); height: var(--size-avatar-lg); margin-left: calc(-1 * var(--space-11)); }
.sterne { display: flex; gap: var(--space-2); color: var(--color-accent); }
.sterne svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.sterne--gross svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.google { display: grid; gap: var(--space-2); font-size: var(--font-size-small); line-height: var(--leading-snug); color: var(--color-text-secondary); }
.google b { color: var(--color-text); font-weight: var(--font-weight-display); font-size: var(--font-size-body); }
.google .zeile { display: flex; align-items: center; gap: var(--space-8); }
.trenner { width: 1px; height: var(--size-kicker-line); background: var(--color-line-strong); }

/* ---------- portraet: echtes Foto, getönt, mit CI-Ring ---------- */
.por {
  width: var(--size-avatar-lg); height: var(--size-avatar-lg); flex: none; border-radius: var(--radius-round); object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.96); box-shadow: var(--ring-portrait);
}
.portraet-gross {
  position: relative; width: min(100%, var(--size-portrait-final)); aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-portrait-final);
}
.portraet-gross img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) contrast(1.06) brightness(.97); }   /* K-PRJ-04 (P9-3): Porträts einheitlich grau wie .por/.up-bild */
.portraet-gross::after { content: ""; position: absolute; inset: 0; background: var(--gradient-portrait-fade); }
.portraet-gross figcaption { position: absolute; z-index: var(--z-content); left: var(--space-20); right: var(--space-20); bottom: var(--space-18); color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--leading-caption); }
.portraet-gross figcaption b { display: block; color: var(--color-text); font-weight: var(--font-weight-display); font-size: var(--font-size-ui); }

/* ---------- projektfarbe: Markenfarbe je Kundenprojekt als --pf (Bühnen der Projektkarten; Werte: tokens.css § Projektfarben) ---------- */
[data-projekt="hautarzt-pawlowska"] { --pf: var(--color-projekt-hautarzt-pawlowska); }
[data-projekt="physiotherapie-mocker"] { --pf: var(--color-projekt-physiotherapie-mocker); }
[data-projekt="immobilien-kraemer"] { --pf: var(--color-projekt-immobilien-kraemer); }
[data-projekt="edelstahlbau-tannroda-projekt-iris"] { --pf: var(--color-projekt-edelstahlbau-tannroda-projekt-iris); }
[data-projekt="steuerberater-sieger"] { --pf: var(--color-projekt-steuerberater-sieger); }
[data-projekt="redesign-ines-zu-castel"] { --pf: var(--color-projekt-redesign-ines-zu-castel); }
[data-projekt="neue-website-markus-kortschak"] { --pf: var(--color-projekt-neue-website-markus-kortschak); }
[data-projekt="arbeitsmedizin-weiss"] { --pf: var(--color-projekt-arbeitsmedizin-weiss); }
[data-projekt="hubert-haustechnik"] { --pf: var(--color-projekt-hubert-haustechnik); }
[data-projekt="mf-immobilien"] { --pf: var(--color-projekt-mf-immobilien); }

/* ---------- werkstueck: Referenzprojekt (Desktop- + Telefon-Screen, Etikett) ---------- */
.werkstueck { display: grid; gap: var(--space-24); }
.werkstueck-screens { position: relative; padding: 0 14% 6% 0; }
.werkstueck-screens .sc-d {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius-md);
  background: var(--color-surface-2); box-shadow: var(--shadow-screen);
}
.werkstueck-screens .sc-m {
  position: absolute; right: 0; bottom: 0; width: 24%; aspect-ratio: 420 / 909; object-fit: cover; object-position: top; border-radius: var(--radius-lg);
  background: var(--color-surface-2); box-shadow: var(--shadow-screen-phone);
}
.werkstueck-screens::after {
  content: ""; position: absolute; left: 6%; right: 24%; top: -1px; height: 1px; background: var(--gradient-screen-glint);
  opacity: .9; transition: opacity var(--dur-glint) var(--ease-out);
}
.werkstueck--inaktiv .werkstueck-screens::after { opacity: 0; }
.werkstueck-text { position: relative; display: grid; gap: var(--space-12); align-content: start; min-width: 0; isolation: isolate; }
.werkstueck-nr {
  position: absolute; right: calc(-1 * var(--space-4)); top: -.55em; z-index: -1;
  font: var(--font-weight-display) var(--font-size-index) / var(--leading-none) var(--font-display); letter-spacing: var(--tracking-index);
  color: transparent; -webkit-text-stroke: 1px var(--color-text-outline); font-variant-numeric: tabular-nums; user-select: none;
  pointer-events: none;   /* Deko-Ziffer liegt über Links des Etiketts (Kritik Referenzen) */
}
.werkstueck-text .meta { color: var(--color-text-tertiary); }
.werkstueck-text h3 { font-size: var(--font-size-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); max-width: 18ch; }
.werkstueck-nutzen { color: var(--color-text-secondary); text-wrap: pretty; }
.werkstueck-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-24); }
.werkstueck-links .link-projekt {
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--space-40); color: var(--color-text); text-decoration: none;
  font-weight: var(--font-weight-medium); font-size: var(--font-size-ui); border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .werkstueck-links .link-projekt:hover { border-bottom-color: var(--color-accent); } }
@media (min-width: 1024px) {
  .werkstueck { grid-template-columns: minmax(0, 1fr) var(--size-side-label); gap: var(--space-64); align-items: end; }
}

/* ---------- zaehler + Blätter-Buttons (Bühne ohne Pin) ---------- */
.zaehler { display: flex; align-items: center; gap: var(--space-16); font-family: var(--font-mono); font-size: var(--font-size-caption); letter-spacing: var(--tracking-mono); color: var(--color-text-tertiary); }
.zaehler b { color: var(--color-text); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.blaettern { display: flex; gap: var(--space-8); }
.blaettern .btn--icon svg { width: var(--size-icon); height: var(--size-icon); }
.blaettern .zurueck svg { transform: scaleX(-1); }

/* ---------- zitat: Stimme am Projekt (.stimme) und als Karte (.karte-stimme) ---------- */
.stimme, .inhaber { margin-top: var(--space-4); padding-top: var(--space-16); border-top: 1px solid var(--color-line); display: grid; gap: var(--space-12); }
.stimme blockquote { font-size: var(--font-size-body); line-height: var(--leading-text); color: var(--color-text); text-wrap: pretty; }
.stimme figcaption, .inhaber, .karte-stimme figcaption { display: flex; gap: var(--space-12); align-items: center; font-size: var(--font-size-caption); line-height: var(--leading-compact); color: var(--color-text-tertiary); }
.stimme figcaption b, .inhaber b, .karte-stimme figcaption b { display: block; color: var(--color-text); font-weight: var(--font-weight-medium); font-size: var(--font-size-small); }
.karte-stimme {
  position: relative; display: grid; gap: var(--space-16); align-content: start; padding: var(--space-32) var(--space-24) var(--space-24);
  border-radius: var(--radius-lg); background: var(--gradient-card-voice); box-shadow: var(--shadow-card);
}
.karte-stimme blockquote { font-size: var(--font-size-body-lg); line-height: var(--leading-text); text-wrap: pretty; }
.karte-stimme .zeichen { width: var(--size-chain-icon); height: var(--size-chain-icon); color: var(--color-accent); margin-bottom: var(--space-4); }
/* Langtext zum Aufklappen (natives details) */
details.voll { font-size: var(--font-size-small); color: var(--color-text-secondary); }
details.voll summary {
  display: inline-flex; align-items: center; min-height: var(--space-32); cursor: pointer; list-style: none; color: var(--color-text);
  text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: var(--space-4);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
details.voll summary::-webkit-details-marker { display: none; }
details.voll .zu { display: none; }
details.voll[open] .auf { display: none; }
details.voll[open] .zu { display: inline; }
details.voll p { margin-top: var(--space-8); max-height: 12em; overflow: auto; }
@media (hover: hover) { details.voll summary:hover { text-decoration-color: var(--color-accent); } }

/* ---------- pfeil-link: weiterführender Link in Karten und Modulen (Prototyp P4-B12) ---------- */
.pfeil-link {
  display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-target); justify-self: start; align-self: end;
  color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-ui);
  border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pfeil-link svg { width: var(--space-16); height: var(--space-16); color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
/* Neben-Link in Mono (z. B. „Und wenn Bernd ausfällt? Zur Antwort“); Prototyp: .ueber-links a + a */
.pfeil-link--mono { font: var(--font-weight-regular) var(--font-size-caption) / var(--leading-snug) var(--font-mono); color: var(--color-accent-soft); border-bottom-color: var(--color-accent-soft-a30); }
@media (hover: hover) { .pfeil-link:hover { border-bottom-color: var(--color-accent); } }
@media (hover: hover) and (pointer: fine) { .pfeil-link:hover svg { transform: translateX(var(--space-3)); } }

/* ---------- modul-karte: dunkle Karte der Module (Preise, Nutzen-Band, Bausteine, Team) ---------- */
.modul-karte { position: relative; border-radius: var(--radius-xl); background: var(--gradient-card-module); box-shadow: var(--shadow-card-module); }

/* ==========================================================================
   preis-vergleich: zwei gleichwertige Preis-Karten (Kaufen · Mieten), „oder“-Trenner, Hauptaktion darunter.
   Ab 1024 px Zeile für Zeile ausgerichtet (Subgrid, 6 Zeilen je Karte:
   Kicker · Titel · Preis-Block · App-Fläche · Liste · Pfeil-Link).
   ========================================================================== */
.preis-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-48); }
.preis-karte { display: grid; gap: var(--space-24); align-content: start; padding: var(--space-32) var(--space-24) var(--space-24); }
.preis-karte > .eyebrow { color: var(--color-accent-soft); }
.preis-karte h3 { font-size: var(--font-size-station); line-height: var(--leading-station); letter-spacing: var(--tracking-station); text-wrap: balance; }
.preis-block { display: grid; gap: var(--space-6); align-content: start; }
.preis-label { display: grid; color: var(--color-text-tertiary); }
.preis-label > * { grid-area: 1 / 1; }
.preis-wert { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-12); min-height: calc(var(--font-size-price) * var(--leading-price)); }
.preis-zahl { display: grid; font: var(--font-weight-display) var(--font-size-price) / var(--leading-price) var(--font-display); letter-spacing: var(--tracking-h1); font-variant-numeric: tabular-nums; }
.preis-zahl > * { grid-area: 1 / 1; }
.preis-zahl > span { display: flex; align-items: baseline; gap: var(--space-12); }
.preis-einheit { font: var(--font-weight-medium) var(--font-size-ui) / var(--leading-mono) var(--font-text); letter-spacing: 0; color: var(--color-text-secondary); }
.preis-unter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); color: var(--color-text-secondary); font-size: var(--font-size-small); line-height: var(--leading-caption); }

/* preis-hinweis: Fußnote an einem Preis (z. B. Geltungsbereich „ab“-Preis). Marke * direkt hinter der Zahl,
   Text im Preis-Block unter .preis-unter. Variante --ohne-marke: Hinweis steht ohne Sternchen direkt am Preis. */
.preis-marke { align-self: flex-start; margin: var(--space-6) 0 0 calc(-1 * var(--space-8)); font: var(--font-weight-medium) var(--font-size-ui) / var(--leading-none) var(--font-mono); letter-spacing: 0; color: var(--color-accent-soft); }
.preis-hinweis {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); max-width: 46ch; margin-top: var(--space-2);
  font-size: var(--font-size-caption-sm); line-height: var(--leading-caption); color: var(--color-text-tertiary); text-wrap: pretty;
}
.preis-hinweis::before { content: "*" / ""; font-family: var(--font-mono); color: var(--color-accent-soft); }
.preis-hinweis--ohne-marke { grid-template-columns: minmax(0, 1fr); }
.preis-hinweis--ohne-marke::before { content: none; }

/* Paketwahl: Werte je Paket liegen übereinander (.pw, gleiche Reihenfolge wie die Optionen).
   Mit JS setzt ui.js .an am gewählten Wert; ohne JS wählt :has() nach Position (bis 4 Pakete). */
.pw { opacity: 0; visibility: hidden; }
.pw.an { opacity: 1; visibility: visible; animation: pw-ein var(--dur-fade) var(--ease-out); }
html:not(.js) .preis-karte:has(.paket:nth-of-type(1) input:checked) .pw:nth-child(1),
html:not(.js) .preis-karte:has(.paket:nth-of-type(2) input:checked) .pw:nth-child(2),
html:not(.js) .preis-karte:has(.paket:nth-of-type(3) input:checked) .pw:nth-child(3),
html:not(.js) .preis-karte:has(.paket:nth-of-type(4) input:checked) .pw:nth-child(4) { opacity: 1; visibility: visible; }
@keyframes pw-ein { from { opacity: 0; transform: translateY(var(--motion-distance-digit)); } }
.preis-app { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-16); border-radius: var(--radius-card); background: var(--color-app-panel); box-shadow: var(--shadow-panel); }
.paket-wahl { display: grid; gap: var(--space-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.paket-wahl legend { padding: 0; margin-bottom: var(--space-10); color: var(--color-text-tertiary); font-size: var(--font-size-mono-sm); }
.paket {
  position: relative; display: grid; grid-template-columns: var(--size-radio) minmax(0, 1fr) auto; align-items: center; gap: var(--space-12);
  min-height: var(--size-control); padding: var(--space-10) var(--space-14); border-radius: var(--radius-control); cursor: pointer;
  background: var(--color-fill-option); box-shadow: var(--ring-option);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.paket input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.paket-punkt { width: var(--size-radio); height: var(--size-radio); border-radius: var(--radius-round); display: grid; place-items: center; box-shadow: var(--ring-radio); transition: box-shadow var(--dur-fast) var(--ease-out); }
.paket-punkt::after { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-accent); box-shadow: var(--glow-status); transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.paket-name { font-size: var(--font-size-ui); line-height: var(--leading-snug); color: var(--color-text-secondary); }
.paket-preis { font: var(--font-weight-medium) var(--font-size-ui) / var(--leading-none) var(--font-text); color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .paket:not(:has(input:checked, input:disabled)):hover { background: var(--color-fill-option-hover); } }
.paket:has(input:checked) { background: var(--color-accent-a10); box-shadow: var(--ring-option-checked); }
.paket:has(input:checked) .paket-punkt { box-shadow: var(--ring-radio-checked); }
.paket:has(input:checked) .paket-punkt::after { transform: scale(1); }
.paket:has(input:checked) .paket-name, .paket:has(input:checked) .paket-preis { color: var(--color-text); }
.paket:has(input:focus-visible) { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-2); }
.paket:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.paket input:disabled { cursor: not-allowed; }
.paket-summe { display: grid; padding-top: var(--space-12); border-top: 1px solid var(--color-line); font-size: var(--font-size-caption); line-height: var(--leading-caption); color: var(--color-text-tertiary); }
.paket-summe > * { grid-area: 1 / 1; }
.paket-summe b { color: var(--color-text); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
/* Kaufen: Festpreisangebot als App-Fläche (gleiches Gewicht wie die Paketwahl) */
.angebot-zeilen { display: grid; margin: 0; }
.angebot-zeilen > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); padding: var(--space-9) 0; border-top: 1px solid var(--color-line); font-size: var(--font-size-small); }
.angebot-zeilen > div:first-child { border-top: 0; padding-top: var(--space-2); }
.angebot-zeilen dt { color: var(--color-text-tertiary); }
.angebot-zeilen dd { margin: 0; color: var(--color-text); text-align: right; }
.preis-app .stempel { margin-top: var(--space-2); }
.preis-liste { display: grid; gap: var(--space-10); align-content: start; }
.preis-liste li { display: grid; grid-template-columns: var(--size-icon) minmax(0, 1fr); gap: var(--space-10); align-items: start; color: var(--color-text-secondary); font-size: var(--font-size-ui); line-height: var(--leading-caption); }
.preis-liste svg { width: var(--size-icon); height: var(--size-icon); margin-top: var(--space-2); color: var(--color-accent); }
.preis-oder { position: relative; display: grid; place-items: center; height: var(--space-24); margin: var(--space-2) 0; }
.preis-oder::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: var(--gradient-divider-h); }
.preis-oder span {
  position: relative; padding: var(--space-5) var(--space-12); border-radius: var(--radius-pill); background: var(--color-bg); box-shadow: var(--ring-hairline);
  font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono-loose); text-transform: uppercase; color: var(--color-text-secondary);
}
.preis-aktion { display: grid; gap: var(--space-24); margin-top: var(--space-48); padding-top: var(--space-32); border-top: 1px solid var(--color-line); }
.preis-ruhe { max-width: 46ch; color: var(--color-text-secondary); font-size: var(--font-size-lead); line-height: var(--leading-text); text-wrap: pretty; }
.preis-btn { display: grid; gap: var(--space-12); justify-items: start; }
.preis-btn .btn { width: 100%; }
.preis-btn .mikro { color: var(--color-text-secondary); }
@media (min-width: 560px) { .preis-btn .btn { width: auto; } }
@media (min-width: 1024px) {
  .preis-raster { grid-template-columns: minmax(0, 1fr) var(--size-price-divider) minmax(0, 1fr); grid-template-rows: repeat(6, auto); column-gap: 0; row-gap: var(--space-24); }
  .preis-karte { grid-row: 1 / span 6; grid-template-rows: subgrid; row-gap: var(--space-24); padding: var(--space-48) var(--space-48) var(--space-32); }
  .preis-karte--kauf { grid-column: 1; }
  .preis-karte--miete { grid-column: 3; }
  .preis-oder { grid-column: 2; grid-row: 1 / span 6; height: auto; margin: 0; }
  .preis-oder::before { left: 50%; right: auto; top: 8%; bottom: 8%; width: 1px; height: auto; background: var(--gradient-divider-v); }
  .preis-aktion { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-64); }
  .preis-btn { grid-template-columns: auto auto; align-items: center; column-gap: var(--space-24); }
}

/* ==========================================================================
   Bausteine: Verweis-Karte (zur Live-Demo), Nutzen-Band (Für Sie / Für Ihre Kunden),
   Baustein-Karte mit Oberfläche (2 je Reihe ab 768 px, per Subgrid ausgerichtet)
   ========================================================================== */
.bs-demo {
  display: grid; grid-template-columns: var(--size-link-icon) minmax(0, 1fr); gap: var(--space-14); align-items: center;
  padding: var(--space-14) var(--space-18) var(--space-14) var(--space-14); border-radius: var(--radius-card); text-decoration: none;
  color: var(--color-text-secondary); font-size: var(--font-size-small); line-height: var(--leading-caption);
  background: var(--color-accent-a06); box-shadow: var(--ring-hint);
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bs-demo b { display: block; color: var(--color-text); font-weight: var(--font-weight-display); font-size: var(--font-size-ui); }
.bs-demo-ico { width: var(--size-link-icon); height: var(--size-link-icon); border-radius: var(--radius-round); display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--glow-icon); }
.bs-demo-ico svg { width: var(--size-icon); height: var(--size-icon); transform: rotate(-90deg); }
@media (hover: hover) { .bs-demo:hover { background: var(--color-accent-a10); box-shadow: var(--ring-hint-hover); } }
.bs-demo:active { transform: translateY(1px); transition-duration: var(--dur-press); }

/* nutzen-band: Formel in der Mitte, Wirkung nach beiden Seiten. Mobil untereinander, ab 768 px zwei Spalten, ab 1100 px symmetrisch */
.bs-nutzen { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; margin-top: var(--space-48); padding: var(--space-24); }
.bsn-formel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.bsn-chip {
  display: inline-flex; align-items: center; min-height: var(--size-chip-lg); padding: 0 var(--space-14); border-radius: var(--radius-pill);
  background: var(--color-fill-subtle); box-shadow: var(--ring-hairline); white-space: nowrap;
  font: var(--font-weight-medium) var(--font-size-mono) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text);
}
.bsn-chip--auto { background: var(--color-accent-a10); box-shadow: var(--ring-chip-auto); color: var(--color-accent-soft); }
.bsn-plus { width: var(--size-plus); height: var(--size-plus); flex: none; border-radius: var(--radius-round); display: grid; place-items: center; box-shadow: var(--ring-hairline); font: var(--font-weight-medium) var(--font-size-ui) / var(--leading-none) var(--font-mono); color: var(--color-text-secondary); }
.bsn-fluss { position: relative; display: block; width: 1px; height: var(--size-flow); margin: var(--space-10) 0 var(--space-10) var(--space-16); background: var(--gradient-flow-down); transform-origin: top; }
.bsn-fluss i { position: absolute; left: calc(-1 * var(--space-3)); bottom: calc(-1 * var(--space-3)); width: var(--size-runner-sm); height: var(--size-runner-sm); border-radius: var(--radius-round); background: var(--color-runner-core); box-shadow: var(--glow-runner-sm); }
.bsn-fluss--kunden { display: none; }
.bsn-seite { display: grid; gap: var(--space-8); align-content: start; width: 100%; }
.bsn-seite .eyebrow { color: var(--color-accent-soft); }
.bsn-kern { font: var(--font-weight-display) var(--font-size-benefit) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); color: var(--color-text); text-wrap: balance; }
.bsn-text { max-width: 44ch; color: var(--color-text-secondary); text-wrap: pretty; }
.bsn-seite--kunden { margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--color-line); }
@media (min-width: 768px) {
  .bs-nutzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-32); padding: var(--space-32); }
  .bsn-formel { grid-column: 1 / -1; margin-bottom: var(--space-24); }
  .bsn-fluss--sie { display: none; }
  .bsn-seite--kunden { margin-top: 0; padding-top: 0; border-top: 0; padding-left: var(--space-32); box-shadow: -1px 0 0 var(--color-line); }
}
@media (min-width: 1100px) {
  .bs-nutzen { grid-template-columns: minmax(0, 1fr) minmax(var(--size-flow-min), var(--size-flow-max)) auto minmax(var(--size-flow-min), var(--size-flow-max)) minmax(0, 1fr); column-gap: var(--space-16); align-items: center; padding: var(--space-32) var(--space-48); }
  .bsn-formel { grid-column: 3; grid-row: 1; flex-direction: column; flex-wrap: nowrap; gap: var(--space-8); margin-bottom: 0; }
  .bsn-text { max-width: 38ch; }
  .bsn-seite--sie { grid-column: 1; grid-row: 1; justify-items: end; text-align: right; }
  .bsn-seite--kunden { grid-column: 5; grid-row: 1; padding-left: 0; box-shadow: none; }
  .bsn-seite--sie .eyebrow { flex-direction: row-reverse; }
  .bsn-fluss { grid-row: 1; width: auto; height: 1px; margin: 0; align-self: center; justify-self: stretch; }
  .bsn-fluss--sie { display: block; grid-column: 2; background: var(--gradient-flow-left); transform-origin: right; }
  .bsn-fluss--kunden { display: block; grid-column: 4; background: var(--gradient-flow-right); transform-origin: left; }
  .bsn-fluss i { top: calc(-1 * var(--space-3)); bottom: auto; }
  .bsn-fluss--sie i { left: calc(-1 * var(--space-3)); }
  .bsn-fluss--kunden i { left: auto; right: calc(-1 * var(--space-3)); }
}

/* baustein-karte: Oberfläche oben (aria-hidden, vereinfacht), Text darunter */
.bs-raster { display: grid; gap: var(--space-16); margin-top: var(--space-16); }
.bs-karte { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-xl); overflow: hidden; }
.bs-text { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-24); }
.bs-text .eyebrow { color: var(--color-accent-soft); }
.bs-text h3 { font-size: var(--font-size-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); text-wrap: balance; }
.bs-text p:not(.eyebrow) { max-width: 56ch; color: var(--color-text-secondary); text-wrap: pretty; }
.bs-text .pfeil-link { margin-top: var(--space-4); }
.bs-hinweis { margin-top: var(--space-24); color: var(--color-text-tertiary); font-size: var(--font-size-caption-sm); }
/* Oberfläche (Rahmen) */
.bs-ui {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-10);
  height: var(--size-ui-preview); margin: var(--space-12) var(--space-12) 0; padding: var(--space-14); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-app-solid); box-shadow: var(--shadow-panel); color: var(--color-text); font-size: var(--font-size-caption); line-height: var(--leading-snug);
}
.bs-ui > * { min-width: 0; }
.bsu-kopf { display: flex; justify-content: space-between; gap: var(--space-10); white-space: nowrap; font: var(--font-weight-medium) var(--font-size-mono-xs) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary); }
.bsu-kopf span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bsu-kopf span:last-child { flex: none; }
/* Oberfläche --rechner: Fortschritt, Antworten, Preisspanne */
.bsu-fort { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.bsu-fort i { height: var(--size-bar); border-radius: var(--radius-bar); background: var(--color-accent); transform-origin: left; }
.bsu-antw { display: none; }
.bsu-label { margin-top: var(--space-4); color: var(--color-text-tertiary); font-size: var(--font-size-micro); }
.bsu-wert { font: var(--font-weight-display) var(--font-size-ui-value) / var(--leading-none) var(--font-display); letter-spacing: var(--tracking-h2); font-variant-numeric: tabular-nums; }
.bsu-spanne { position: relative; height: var(--space-18); margin-top: var(--space-2); }
.bsu-spanne::before { content: ""; position: absolute; left: 0; right: 0; top: var(--space-8); height: var(--space-2); border-radius: var(--radius-hairline); background: var(--color-fill-step); }
.bsu-band { position: absolute; left: 34%; right: 22%; top: var(--space-7); height: var(--size-bar); border-radius: var(--radius-bar); background: var(--gradient-range); }
.bsu-griff { position: absolute; top: var(--space-2); width: var(--size-handle); height: var(--size-handle); margin-left: calc(var(--size-handle) / -2); border-radius: var(--radius-round); background: var(--color-text); box-shadow: var(--shadow-handle); }
.bsu-griff.l { left: 34%; }
.bsu-griff.r { left: 78%; }
/* Oberfläche --routing: Kriterien, Lichtpunkt zur Person */
.bsu-krit { display: grid; gap: var(--space-6); }
.bsu-krit li { display: grid; grid-template-columns: var(--size-check-sm) var(--size-route-label) minmax(0, 1fr); gap: var(--space-8); align-items: center; font-size: var(--font-size-caption-sm); color: var(--color-text); white-space: nowrap; }
.bsu-krit li b { font: var(--font-weight-medium) var(--font-size-mono-xs) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary); }
.bsu-krit li span:last-child { overflow: hidden; text-overflow: ellipsis; }
.bsu-ok { width: var(--size-check-sm); height: var(--size-check-sm); border-radius: var(--radius-round); display: grid; place-items: center; background: var(--color-accent); color: var(--color-white); }
.bsu-ok svg { width: var(--size-icon-3xs); height: var(--size-icon-3xs); }
.bsu-ziel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-10); margin-top: var(--space-4); }
.bsu-bahn { position: relative; height: var(--space-2); border-radius: var(--radius-hairline); background: var(--color-track-route); }
.bsu-bahn i { position: absolute; right: 0; top: calc(-1 * var(--space-4)); width: var(--size-runner); height: var(--size-runner); border-radius: var(--radius-round); background: var(--color-runner-core); box-shadow: var(--glow-runner-md); }
.bsu-person { display: grid; gap: var(--space-2); padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); background: var(--color-accent-a14); box-shadow: var(--ring-route-target); font-size: var(--font-size-micro); color: var(--color-text-secondary); white-space: nowrap; }
.bsu-person b { color: var(--color-text); font-weight: var(--font-weight-display); font-size: var(--font-size-caption); }
/* Oberfläche --angebot: vorbereiteter Entwurf mit Herkunft je Zeile */
.bsu-status { color: var(--color-warm-soft); }
.bsu-doc { display: grid; }
.bsu-doc li { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-7) 0; border-top: 1px solid var(--color-line); font-size: var(--font-size-caption-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; }
.bsu-doc li:first-child { border-top: 0; padding-top: 0; }
.bsu-doc li svg { width: var(--size-icon-xs); height: var(--size-icon-xs); flex: none; color: var(--color-accent); }
.bsu-doc li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bsu-doc li small { display: none; }
.bsu-doc li.ci { color: var(--color-accent-soft); }
/* Oberfläche --portal: Reiter, Auftrag mit Fortschritt, Mini-Mitteilung */
.bsu-tabs { display: flex; gap: var(--space-12); border-bottom: 1px solid var(--color-line); font-size: var(--font-size-micro); color: var(--color-text-tertiary); white-space: nowrap; }
.bsu-tabs li { padding-bottom: var(--space-7); }
.bsu-tabs li.an { color: var(--color-text); box-shadow: var(--ring-tab-active); }
.bsu-auftrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-10); align-items: center; font-size: var(--font-size-caption-sm); }
.bsu-auftrag small { font: var(--font-weight-medium) var(--font-size-mono-xs) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-accent-soft); }
.bsu-auftrag .bsu-mini { grid-column: 1 / -1; height: var(--size-bar); border-radius: var(--radius-bar); background: var(--color-fill-bar); overflow: hidden; }
.bsu-auftrag .bsu-mini i { display: block; width: 62%; height: 100%; border-radius: var(--radius-bar); background: var(--color-accent); transform-origin: left; }
.bsu-toast { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-10); align-items: center; padding: var(--space-8) var(--space-10); border-radius: var(--radius-control); background: var(--color-app-ticket); box-shadow: var(--shadow-mini-toast); font-size: var(--font-size-micro); line-height: var(--leading-snug); color: var(--color-text-secondary); }
.bsu-toast b { display: block; color: var(--color-text); font-weight: var(--font-weight-display); font-size: var(--font-size-caption-sm); }
.bsu-toast > i { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-warm); box-shadow: var(--glow-warm-dot); }
@media (min-width: 768px) {
  .bs-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bs-karte { grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-12); padding-bottom: var(--space-24); }
  .bs-text { display: contents; }
  .bs-text > * { margin-left: var(--space-24); margin-right: var(--space-24); }
  .bs-text > .eyebrow { margin-top: var(--space-12); align-self: start; }
  .bs-text > .pfeil-link { margin-top: var(--space-4); }
}
@media (min-width: 1024px) {
  .bs-raster { gap: var(--space-24); }
  .bs-karte { row-gap: var(--space-14); padding-bottom: var(--space-32); }
  .bs-text > * { margin-left: var(--space-32); margin-right: var(--space-32); }
  .bs-text > .eyebrow { margin-top: var(--space-16); }
  /* größere Karten → größere, lesbare Oberflächen */
  .bs-ui { height: var(--size-ui-preview-lg); margin: var(--space-14) var(--space-14) 0; padding: var(--space-22) var(--space-24); gap: var(--space-14); border-radius: var(--radius-card); font-size: var(--font-size-ui-lg); }
  .bsu-kopf { font-size: var(--font-size-mono-md); }
  .bsu-fort { gap: var(--space-6); }
  .bsu-fort i { height: var(--size-bar-lg); }
  .bsu-antw { display: flex; flex-wrap: wrap; gap: var(--space-6); }
  .bsu-antw li { padding: var(--space-5) var(--space-10); border-radius: var(--radius-pill); background: var(--color-accent-a08); box-shadow: var(--ring-answer); font-size: var(--font-size-caption-sm); line-height: var(--leading-mono); color: var(--color-text-secondary); white-space: nowrap; }
  .bsu-label { margin-top: var(--space-2); font-size: var(--font-size-caption); }
  .bsu-wert { font-size: var(--font-size-ui-value-lg); }
  .bsu-spanne { height: var(--space-20); }
  .bsu-spanne::before { top: var(--space-9); }
  .bsu-band { top: var(--space-8); }
  .bsu-griff { width: var(--size-handle-lg); height: var(--size-handle-lg); margin-left: calc(var(--size-handle-lg) / -2); }
  .bsu-krit { gap: var(--space-12); align-content: center; }
  .bsu-krit li { grid-template-columns: var(--size-check) var(--size-route-label-lg) minmax(0, 1fr); gap: var(--space-10); font-size: var(--font-size-ui-lg); }
  .bsu-krit li b { font-size: var(--font-size-mono-md); }
  .bsu-ok { width: var(--size-check); height: var(--size-check); }
  .bsu-ok svg { width: var(--size-icon-2xs); height: var(--size-icon-2xs); }
  .bsu-ziel { margin-top: 0; align-self: center; gap: var(--space-12); }
  .bsu-person { padding: var(--space-12) var(--space-16); border-radius: var(--radius-control); font-size: var(--font-size-ui-sm); }
  .bsu-person b { font-size: var(--font-size-ui); }
  .bsu-doc li { gap: var(--space-10); padding: var(--space-12) 0; font-size: var(--font-size-ui-lg); }
  .bsu-doc li svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
  .bsu-doc li small { display: block; flex: none; margin-left: auto; padding-left: var(--space-12); font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary); }
  .bsu-doc li.ci small { color: var(--color-accent-soft); }
  .bsu-tabs { gap: var(--space-18); font-size: var(--font-size-ui-sm); }
  .bsu-tabs li { padding-bottom: var(--space-10); }
  .bsu-auftrag { gap: var(--space-10) var(--space-12); margin-top: var(--space-4); font-size: var(--font-size-ui-lg); }
  .bsu-auftrag small { font-size: var(--font-size-mono-md); }
  .bsu-auftrag .bsu-mini { height: var(--size-bar-lg); }
  .bsu-toast { gap: var(--space-12); margin-top: var(--space-6); padding: var(--space-12) var(--space-14); font-size: var(--font-size-caption); }
  .bsu-toast b { font-size: var(--font-size-ui-lg); }
}
@media (min-width: 1280px) {
  /* Routing nebeneinander: Kriterien links, Lichtpunkt läuft nach rechts zur Person */
  .bs-ui--routing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-24); align-content: stretch; }
  .bs-ui--routing .bsu-kopf { grid-column: 1 / -1; }
}

/* ---------- team-karte (Wer dahintersteht): zwei echte Fotos, kleine Werkzeugkette Bernd → 7 Agenten ---------- */
.ueber-team { display: grid; gap: var(--space-16); padding: var(--space-16); border-radius: var(--radius-xl); }
.ueber-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.ueber-person { display: grid; gap: var(--space-10); align-content: start; }
.up-bild { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); box-shadow: var(--ring-photo); }
.up-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.97); }
.up-bild::after { content: ""; position: absolute; inset: 0; background: var(--gradient-photo-fade-soft); pointer-events: none; }
.ueber-person figcaption { font-size: var(--font-size-caption); line-height: var(--leading-compact); color: var(--color-text-tertiary); }
.ueber-person figcaption b { display: block; color: var(--color-text); font-weight: var(--font-weight-display); font-size: var(--font-size-ui-lg); }
.ueber-kette { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12) var(--space-14); align-items: center; padding-top: var(--space-14); border-top: 1px solid var(--color-line); }
.uk-chef { position: relative; width: var(--size-lead-avatar); height: var(--size-lead-avatar); }
.uk-chef img { width: var(--size-lead-avatar); height: var(--size-lead-avatar); border-radius: var(--radius-round); object-fit: cover; }
.uk-chef i { position: absolute; inset: calc(-1 * var(--space-4)); border-radius: var(--radius-round); box-shadow: var(--ring-lead); }
.uk-reihe { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: var(--size-chain-mini); }
.uk-reihe::before { content: ""; position: absolute; left: var(--space-12); right: var(--space-12); top: 50%; height: 1px; background: var(--color-line-strong); }
.uk-reihe li { position: relative; width: var(--size-chain-icon-sm); height: var(--size-chain-icon-sm); border-radius: var(--radius-round); display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-accent-soft); box-shadow: var(--ring-chain-mini); }
.uk-reihe li svg { width: var(--size-icon-2xs); height: var(--size-icon-2xs); }
.uk-reihe li.uk-auditor { color: var(--color-warm-soft); box-shadow: var(--ring-chain-auditor-mini); }
.uk-satz { grid-column: 1 / -1; font-size: var(--font-size-small); line-height: var(--leading-caption); color: var(--color-text-secondary); }
.uk-satz b { color: var(--color-text); font-weight: var(--font-weight-medium); }
@media (min-width: 1024px) {
  .ueber-team { width: 100%; max-width: var(--size-team-card); padding: var(--space-20); gap: var(--space-20); }
  .ueber-paar { gap: var(--space-16); }
}

/* ==========================================================================
   formular + feld (an P4-B12 angeglichen): eingelassenes Feld, Rand mit ≥ 3 : 1, Fokus als CI-Ring mit Schein,
   Fehler als Kasten unter dem Feld. Zustände über aria-invalid / disabled / ?state= (ui.js)
   ========================================================================== */
.formular { display: grid; gap: var(--space-24); max-width: 36rem; }
.feld { display: grid; gap: var(--space-8); }
.feld label, .feld legend { font-size: var(--font-size-ui); font-weight: var(--font-weight-display); line-height: var(--leading-snug); color: var(--color-text); }
.feld .pflicht { color: var(--color-text-tertiary); font-weight: var(--font-weight-regular); }
.feld-hinweis { font-size: var(--font-size-ui-sm); line-height: var(--leading-caption); color: var(--color-text-tertiary); }
.eingabe {
  width: 100%; min-height: var(--size-button); padding: 0 var(--space-14); border: 0; border-radius: var(--radius-control);
  background: var(--color-field-bg); box-shadow: var(--ring-field); color: var(--color-text);
  font-size: var(--font-size-body); line-height: var(--leading-text);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
textarea.eingabe { min-height: var(--size-textarea); padding: var(--space-14); resize: vertical; }
select.eingabe { padding-right: var(--space-40); }
.eingabe::placeholder { color: var(--color-text-tertiary); opacity: 1; }
@media (hover: hover) { .eingabe:not(:disabled):not(:focus):hover { box-shadow: var(--ring-field-hover); } }
/* Fokus: Ring + Schein (P4-B12); transparente Kontur bleibt für den Kontrastmodus von Windows sichtbar */
.eingabe:focus { outline: var(--stroke-focus) solid transparent; outline-offset: var(--space-2); box-shadow: var(--ring-field-focus-glow); }
.eingabe[aria-invalid="true"] { box-shadow: var(--ring-field-error); }
.eingabe[aria-invalid="true"]:focus { box-shadow: var(--ring-field-error-focus); }
.eingabe:disabled { cursor: not-allowed; opacity: .55; }
.feld-fehler, .dg-meldung {
  display: grid; grid-template-columns: var(--size-icon) minmax(0, 1fr); gap: var(--space-8); align-items: start;
  padding: var(--space-10) var(--space-12); border-radius: var(--radius-md); background: var(--color-danger-a12); box-shadow: var(--ring-danger-soft);
  font-size: var(--font-size-small); line-height: var(--leading-caption); color: var(--color-text);
}
.feld-fehler svg, .dg-meldung svg { width: var(--size-icon); height: var(--size-icon); margin-top: var(--space-1); color: var(--color-danger); }
.feld-fehler:not(:empty):not([hidden]) { animation: dg-ein var(--dur-state) var(--ease-out); }
.feld-fehler:empty, .feld-fehler[hidden] { display: none; }
.auswahl { display: flex; align-items: flex-start; gap: var(--space-12); min-height: var(--size-target-min); font-size: var(--font-size-ui); line-height: var(--leading-ui); color: var(--color-text-secondary); cursor: pointer; }
.auswahl input { width: var(--size-check); height: var(--size-check); margin: var(--space-1) 0 0; flex: none; accent-color: var(--color-accent); }
.formular-status { display: flex; gap: var(--space-10); align-items: flex-start; padding: var(--space-12); border-radius: var(--radius-control); font-size: var(--font-size-ui); line-height: var(--leading-text); color: var(--color-text); }
.formular-status:empty { display: none; }
.formular-status svg { width: var(--size-icon); height: var(--size-icon); flex: none; margin-top: var(--space-2); }
.formular-status--erfolg { background: var(--color-accent-a10); box-shadow: var(--ring-panel-accent); animation: dg-ein var(--dur-state-long) var(--ease-out); }
.formular-status--erfolg svg { color: var(--color-accent); }
.formular-status--fehler { border-radius: var(--radius-md); background: var(--color-danger-a12); box-shadow: var(--ring-danger-soft); animation: dg-ein var(--dur-state) var(--ease-out); }
.formular-status--fehler svg { color: var(--color-danger); }
@keyframes dg-ein { from { opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-2xs))); } }

/* ==========================================================================
   diagnose-formular: URL-Feld in einer App-Karte über einem Bild (wie Story 2), Prüfliste daneben.
   Zustände am <form class="app-karte dg-karte" data-zustand="leer | fehler | erfolg">; ui.js setzt sie
   (Absenden, Eingabe, „Andere Adresse eingeben“, ?state=empty | error | success | loading). Kein Versand.
   ========================================================================== */
.dg-pruef-titel { margin-top: var(--space-12); color: var(--color-text-tertiary); }
.dg-pruef { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.dg-pruef li {
  display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-10) var(--space-6) var(--space-8); border-radius: var(--radius-pill); box-shadow: var(--ring-hairline);
  font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-secondary);
}
.dg-pruef li svg { width: var(--size-icon-xs); height: var(--size-icon-xs); color: var(--color-accent); }
/* Erfolg: die Prüfpunkte reihen sich nacheinander ein (Zustand am Abschnitt) */
[data-zustand="erfolg"] .dg-pruef li { color: var(--color-text); box-shadow: var(--ring-active); animation: dg-reihe var(--dur-queue) var(--ease-in-out) both; }
[data-zustand="erfolg"] .dg-pruef li:nth-child(2) { animation-delay: var(--motion-stagger-queue); }
[data-zustand="erfolg"] .dg-pruef li:nth-child(3) { animation-delay: calc(var(--motion-stagger-queue) * 2); }
[data-zustand="erfolg"] .dg-pruef li:nth-child(4) { animation-delay: calc(var(--motion-stagger-queue) * 3); }
[data-zustand="erfolg"] .dg-pruef li:nth-child(5) { animation-delay: calc(var(--motion-stagger-queue) * 4); }
[data-zustand="erfolg"] .dg-pruef li:nth-child(6) { animation-delay: calc(var(--motion-stagger-queue) * 5); }
[data-zustand="erfolg"] .dg-pruef li:nth-child(n + 7) { animation-delay: calc(var(--motion-stagger-queue) * 6); }
@keyframes dg-reihe { 0% { opacity: .4; transform: translateY(var(--space-3)); } 40% { opacity: 1; transform: none; } }
.dg-szene { grid-template-columns: minmax(0, 1fr); }
.dg-szene .szene-ui { min-width: 0; max-width: var(--size-tool-card); }
.dg-karte { gap: var(--space-12); }
.dg-label { font-weight: var(--font-weight-display); font-size: var(--font-size-ui); color: var(--color-text); }
.dg-feld {
  display: flex; align-items: center; gap: var(--space-10); min-height: var(--size-button); padding: 0 var(--space-14); border-radius: var(--radius-control);
  background: var(--color-field-bg); box-shadow: var(--ring-field); transition: box-shadow var(--dur-fast) var(--ease-out);
}
.dg-feld svg { width: var(--size-icon); height: var(--size-icon); flex: none; color: var(--color-text-tertiary); transition: color var(--dur-fast) var(--ease-out); }
.dg-feld input { flex: 1; min-width: 0; height: calc(var(--size-button) - var(--space-2)); border: 0; background: transparent; color: var(--color-text); font: var(--font-weight-regular) var(--font-size-body) / var(--leading-none) var(--font-text); outline: none; }
.dg-feld input::placeholder { color: var(--color-text-tertiary); opacity: 1; }
@media (hover: hover) { .dg-feld:not(:focus-within):hover { box-shadow: var(--ring-field-hover); } }
.dg-feld:focus-within { outline: var(--stroke-focus) solid transparent; outline-offset: var(--space-2); box-shadow: var(--ring-field-focus-glow); }
.dg-hilfe { font-size: var(--font-size-ui-sm); line-height: var(--leading-caption); color: var(--color-text-tertiary); }
.dg-meldung { display: none; }
.dg-start { justify-self: start; min-height: var(--size-control); background: transparent; color: var(--color-text); box-shadow: var(--ring-button-tool); }
@media (hover: hover) { .dg-start:hover { background: var(--color-accent-a10); } }
.dg-erfolg { display: none; gap: var(--space-10); padding: var(--space-12); border-radius: var(--radius-control); background: var(--color-accent-a10); box-shadow: var(--ring-panel-accent); }
.dg-laedt { display: flex; align-items: center; gap: var(--space-10); font-weight: var(--font-weight-display); font-size: var(--font-size-ui); color: var(--color-text); }
.dg-kreis { width: var(--size-icon); height: var(--size-icon); flex: none; border-radius: var(--radius-round); box-shadow: var(--ring-spinner-track); border-top: var(--stroke-strong) solid var(--color-accent); border-right: var(--stroke-strong) solid transparent; }
@media (prefers-reduced-motion: no-preference) { .dg-kreis { animation: dg-dreh var(--dur-spin) var(--ease-linear) infinite; } }
@keyframes dg-dreh { to { transform: rotate(360deg); } }
.dg-weiter { font-size: var(--font-size-ui-sm); line-height: var(--leading-caption); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.dg-weiter b { color: var(--color-text); font-weight: var(--font-weight-medium); }
.dg-zurueck {
  justify-self: start; min-height: var(--size-target-sm); padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--font-weight-regular) var(--font-size-caption) / var(--leading-none) var(--font-mono); color: var(--color-accent-soft);
  text-decoration: underline; text-underline-offset: var(--space-4); text-decoration-color: var(--color-accent-soft-a40);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .dg-zurueck:hover { text-decoration-color: var(--color-accent-soft); } }
.dg-klein { font-size: var(--font-size-caption-sm); line-height: var(--leading-caption); color: var(--color-text-tertiary); }
.dg-klein a { color: var(--color-text-secondary); text-underline-offset: var(--space-3); }
/* Zustände: leer (Grundzustand) · fehler · erfolg */
.dg-karte[data-zustand="fehler"] .dg-feld { box-shadow: var(--ring-field-error); }
.dg-karte[data-zustand="fehler"] .dg-feld:focus-within { box-shadow: var(--ring-field-error-focus); }
.dg-karte[data-zustand="fehler"] .dg-feld svg { color: var(--color-danger); }
.dg-karte[data-zustand="fehler"] .dg-meldung { display: grid; animation: dg-ein var(--dur-state) var(--ease-out); }
.dg-karte[data-zustand="fehler"] .dg-hilfe { display: none; }
.dg-karte[data-zustand="erfolg"] .dg-erfolg { display: grid; animation: dg-ein var(--dur-state-long) var(--ease-out); }
.dg-karte[data-zustand="erfolg"] .dg-start, .dg-karte[data-zustand="erfolg"] .dg-hilfe { display: none; }
.dg-karte[data-zustand="erfolg"] .dg-feld { box-shadow: var(--ring-field-done); }
@media (min-width: 1024px) {
  .dg-szene .szene-ui { width: min(var(--size-tool-card), 62%); max-width: none; margin: calc(-1 * var(--space-96)) 0 0 var(--space-32); }
}

/* ==========================================================================
   faq-eintrag (P4-B12): Akkordeon. Frage = <button> in <h3 class="faq-frage">, Zustand per aria-expanded + .offen am Eintrag.
   Ohne JS alle Antworten offen. Mit JS zu, weich auf (Höhe über grid-template-rows, Inhalt mit Deckkraft und kleinem Weg).
   Tastatur: Tab, Enter/Leertaste, Pfeil hoch/runter, Pos1/Ende (ui.js).
   ========================================================================== */
.faq-liste { border-top: 1px solid var(--color-line); }
.faq-item { position: relative; border-bottom: 1px solid var(--color-line); transition: background-color var(--dur-base) var(--ease-out); }
.faq-item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: var(--stroke-strong); background: var(--color-accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-out); }
.faq-frage { margin: 0; font: inherit; }
.faq-frage button {
  display: grid; grid-template-columns: auto minmax(0, 1fr) var(--size-faq-toggle); gap: var(--space-14); align-items: start;
  width: 100%; min-height: var(--size-faq-row); padding: var(--space-18) var(--space-4) var(--space-18) 0; border: 0; background: none; cursor: pointer; text-align: start;
  font: var(--font-weight-display) var(--font-size-question) / var(--leading-ui) var(--font-display); letter-spacing: var(--tracking-title); color: var(--color-text);
}
.faq-frage button:focus-visible { outline-offset: calc(-1 * var(--space-2)); }
.faq-nr { width: var(--size-faq-nr); padding-top: .3em; font-size: var(--font-size-mono-sm); color: var(--color-text-tertiary); }
.faq-nr[data-nr]::before { content: attr(data-nr); }   /* SEO-Parität (Lauf 5, Q2): Nummer nicht im h3-Text, Optik gleich */
:is(.pa-mehr-label, .pi-mehr-label, .pfo-mehr-label, .pa-k-label, .pi-k-label, .pfo-k-label)[data-label]::before { content: attr(data-label); }   /* SEO-Parität (Q3): Etikett nicht im h3-Text */
.faq-text { text-wrap: balance; }
.faq-plus {
  position: relative; width: var(--size-faq-toggle); height: var(--size-faq-toggle); margin-top: calc(-1 * var(--space-3)); border-radius: var(--radius-round); box-shadow: var(--ring-hairline);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--space-12); height: var(--stroke-bold);
  margin: calc(var(--stroke-bold) / -2) 0 0 calc(var(--space-12) / -2); border-radius: var(--radius-hairline); background: var(--color-text);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.faq-plus::after { transform: rotate(90deg); }
@media (hover: hover) { .faq-frage button:hover .faq-plus { background: var(--color-accent-a10); box-shadow: var(--ring-accent); } }
.faq-antwort { display: grid; grid-template-rows: 1fr; }
.faq-innen { min-height: 0; overflow: hidden; }
.faq-innen > div {
  display: grid; gap: var(--space-12); max-width: 68ch;
  padding: 0 calc(var(--size-faq-toggle) + var(--space-16)) var(--space-24) calc(var(--size-faq-nr) + var(--space-14));
  color: var(--color-text-secondary); text-wrap: pretty;
}
.faq-innen > div > * { margin: 0; }
.js .faq-antwort { grid-template-rows: 0fr; transition: grid-template-rows var(--dur-fade) var(--ease-out); }
.js .faq-innen { visibility: hidden; transition: visibility 0s var(--ease-out) var(--dur-fade); }
.js .faq-innen > div { opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-xs))); transition: opacity var(--dur-fade-fast) var(--ease-out), transform var(--dur-state-long) var(--ease-out); }
.faq-item.offen { background: var(--gradient-faq-open); }
.faq-item.offen::before { transform: scaleY(1); }
.faq-item.offen .faq-antwort { grid-template-rows: 1fr; }
.faq-item.offen .faq-innen { visibility: visible; transition: visibility 0s var(--ease-out) 0s; }
.faq-item.offen .faq-innen > div { opacity: 1; transform: none; transition-delay: var(--delay-content); }
.faq-item.offen .faq-plus { transform: rotate(180deg); background: var(--color-accent); box-shadow: none; }
.faq-item.offen .faq-plus::before, .faq-item.offen .faq-plus::after { background: var(--color-on-accent); }
.faq-item.offen .faq-plus::after { transform: rotate(0deg); }
.faq-item.offen .faq-nr { color: var(--color-accent-soft); }
@media (max-width: 559.98px) {
  .faq-frage button { grid-template-columns: minmax(0, 1fr) var(--size-faq-toggle); gap: var(--space-12); }
  .faq-nr { display: none; }
  .faq-innen > div { padding: 0 var(--space-8) var(--space-24) 0; }
}
@media (min-width: 1024px) {
  .faq-frage button { min-height: var(--size-faq-row-lg); padding: var(--space-22) var(--space-8) var(--space-22) var(--space-16); }
  .faq-innen > div { padding-left: calc(var(--space-16) + var(--size-faq-nr) + var(--space-14)); }
}

/* ---------- Zustandsblöcke (?state=, ui.js): ohne JS nur der Normalzustand ---------- */
html:not(.js) [data-wdf-state] { display: none; }

/* ---------- Reduced Motion: Endzustand sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Komponente ausfall-kasten (K-CONV-04, K-PRJ-09; aus home/ueber übernommen, P9-3) ----------
   Antwort auf „Was, wenn er ausfällt?“: Fortbetrieb + kein Lock-in. Markup: <div class="ausfall"><p class="ausfall-h">…</p><ul class="ausfall-liste"><li><svg class="i">…</svg><span><b>…</b> …</span></li></ul></div> */
.ausfall {
  display: grid; gap: var(--space-12); padding: var(--space-16) var(--space-20); max-width: 56ch;
  border-radius: var(--radius-card); background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-line), inset var(--stroke-bold) 0 0 var(--color-accent);
}
.ausfall-h {
  font: var(--font-weight-mono) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono-ui);
  text-transform: uppercase; color: var(--color-accent-soft); text-wrap: balance;
}
.ausfall-liste { display: grid; gap: var(--space-10); }
.ausfall-liste li {
  display: grid; grid-template-columns: var(--space-20) minmax(0, 1fr); gap: var(--space-10); align-items: start;
  font-size: var(--font-size-small); line-height: var(--leading-caption); color: var(--color-text-secondary); text-wrap: pretty;
}
.ausfall-liste svg { width: var(--space-16); height: var(--space-16); margin-top: .2em; color: var(--color-accent); }
.ausfall-liste b { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* Scurio-Terminbuchung (Popup aus ui.js): auf breiten Bildschirmen Kalender und Uhrzeiten nebeneinander, wie auf der
   bisherigen Seite (globals.css im Produktiv-Repo). Doppelte Klasse schlägt das später geladene Scurio-Stylesheet. */
.scurio-bk-overlay .scurio-bk-modal { max-width: 960px; }