/* ═══════════════════════════════════════════════════════════════════
   A68A — „Ocker Dark" (Designsystem, 11.09.2026)
   ═══════════════════════════════════════════════════════════════════
   Quelle: Miguels Claude-Design-Projekt „Ocker Dark Design System"
   (claude.ai/design/p/18ec2640-…), aus drei Screenshots der Werkzeug-
   Seiten gewonnen: warme Braun-Grau-Leiter, GENAU EIN Akzent (Amber),
   weiße Überschriften, großzügig gerundete Karten mit Haarlinie.
   Die Werte stehen hier 1:1 aus tokens/colors.css, typography.css,
   spacing.css, shapes.css, elevation.css, motion.css.

   Einbinden NACH a68a-basis.css und VOR dem seiteneigenen <style>:
       <link rel="stylesheet" href="a68a-basis.css">
       <link rel="stylesheet" href="ocker-dark.css">

   Zwei Ebenen:
   1. TOKEN — im Dunkelmodus werden die Basis-Variablen (--bg, --line,
      --text …) auf die Ocker-Werte umgelenkt. Alles, was schon die Basis
      benutzt, zieht damit ohne Umbau nach. Der helle Modus bleibt die
      Basis-Palette (das System ist dunkel gedacht), bekommt aber dieselben
      Radien, Schriften und Bausteine.
   2. BAUSTEINE (.od-*) — Kopfleiste, Seitenkopf, Karte, Panel, Abschnitt,
      Knopf, Chip, Umschalter, Stepper, Eingabefeld, Aufklapper. Reines CSS,
      kein Skript; Zustände über Klassen (is-active, is-selected, is-current).

   Bewusste Erweiterung über das System hinaus: die fünf STATUSFARBEN der
   Schaltzentrale (läuft/du/fertig/geplant/fehler) bleiben — sie tragen
   Bedeutung, keine Zier. Das System selbst nennt Erfolgs-/Fehlerfarben als
   „bei Bedarf im selben Ton ergänzen".
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN ─────────────────────────────────────────────────────── */
:root {
  /* Semantik (hell: auf die Basis gelegt, damit die Bausteine auch dort tragen) */
  --color-canvas:          var(--bg);
  --color-canvas-deep:     var(--bg-soft);
  --surface-card:          var(--bg-elevated);
  --surface-card-selected: var(--bg-soft);
  --surface-panel:         var(--bg-elevated);
  --surface-raised:        var(--bg-soft);
  --surface-pressed:       var(--bg-warm);
  --surface-input:         var(--bg);
  --border-hairline:       var(--line-strong);
  --border-soft:           var(--line);
  --border-strong:         var(--line-strong);
  --border-selected:       var(--accent-bright);
  --text-heading:          var(--text);
  --text-body:             var(--text);
  --text-muted:            var(--text-soft);
  --text-placeholder:      var(--text-mute);
  --text-accent:           var(--accent-bright);
  --text-on-accent:        var(--on-accent);
  --action-fill:           var(--accent-bright);
  --action-fill-hover:     oklch(0.58 0.13 68);
  --action-fill-pressed:   oklch(0.48 0.12 68);
  --action-ink:            var(--on-accent);
  --action-ghost-border:   var(--line-strong);
  --amber-tint-16:         color-mix(in oklab, var(--accent-bright) 16%, transparent);
  --amber-tint-32:         color-mix(in oklab, var(--accent-bright) 32%, transparent);
  --focus-ring:            0 0 0 3px var(--amber-tint-32);
  --link:                  var(--accent-bright);
  --link-hover:            oklch(0.45 0.12 68);

  /* Schrift: die Vorlagen sind in der Systemschrift gesetzt (SF Pro auf
     Apple). Inter nur, wenn lokal installiert — KEIN Google-Fonts-Abruf,
     das wäre auf einer DSGVO-Beratungsseite ein Eigentor. */
  --ff-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text:    var(--ff-sans);
  --font-display: var(--ff-sans);

  /* Typo-Leiter 400 / 600 / 700 — 500 kommt nicht vor */
  --type-display-size: 36px; --type-display-lh: 1.14; --type-display-ls: -0.02em;
  --type-h1-size: 28px;      --type-h1-lh: 1.2;       --type-h1-ls: -0.018em;
  --type-h2-size: 20px;      --type-h2-lh: 1.3;       --type-h2-ls: -0.012em;
  --type-h3-size: 18px;      --type-h3-lh: 1.35;      --type-h3-ls: -0.01em;
  --type-body-size: 16px;    --type-body-lh: 1.55;
  --type-body-sm-size: 15px; --type-label-size: 15px;
  --type-caption-size: 14px; --type-eyebrow-size: 13px; --type-eyebrow-ls: 0.14em;

  /* Raum: 4-px-Basis */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px;
  --pad-card: 24px; --pad-panel: 24px; --gap-card-grid: 20px; --gap-section: 48px;
  --layout-max: 1040px; --touch-min: 44px;

  /* Radien-Leiter — nicht mischen */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-pill: 999px;
  --radius: var(--radius-md);          /* Basis-Radius (war 6px) */

  /* Tiefe kommt aus dem Flächenwert, nicht aus Schatten */
  --shadow-card:     0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-selected: 0 6px 20px rgba(0, 0, 0, 0.30);
  --shadow-overlay:  0 16px 44px rgba(0, 0, 0, 0.42);
  --shadow:          var(--shadow-card);
  --shadow-lift:     var(--shadow-selected);

  --duration-fast: 120ms; --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --press-scale: 0.97;
}

:root[data-theme="dark"] {
  /* Die Braun-Grau-Leiter, pixelgenau aus den Vorlagen */
  --ocker-900: #2a2622; --ocker-850: #312d28; --ocker-800: #3a3530; --ocker-700: #423c37;
  --ocker-600: #4a443f; --ocker-500: #4d4742; --ocker-400: #5a544e;
  --amber-400: #ffd470; --amber-500: #f8c858; --amber-600: #e6b23f;
  --ink-100: #ffffff; --ink-200: #ded8d2; --ink-300: #a9a49e; --ink-400: #857f79;
  --ink-on-amber: #2a231a;

  --color-canvas: var(--ocker-850);      --color-canvas-deep: var(--ocker-900);
  --surface-card: var(--ocker-700);      --surface-card-selected: var(--ocker-800);
  --surface-panel: var(--ocker-700);     --surface-raised: var(--ocker-800);
  --surface-pressed: var(--ocker-600);   --surface-input: var(--ocker-850);
  --border-hairline: var(--ocker-500);   --border-soft: #403a35;
  --border-strong: var(--ocker-400);     --border-selected: var(--amber-500);
  --text-heading: var(--ink-100);        --text-body: var(--ink-200);
  --text-muted: var(--ink-300);          --text-placeholder: var(--ink-400);
  --text-accent: var(--amber-500);       --text-on-accent: var(--ink-on-amber);
  --action-fill: var(--amber-500);       --action-fill-hover: var(--amber-400);
  --action-fill-pressed: var(--amber-600); --action-ink: var(--ink-on-amber);
  --action-ghost-border: var(--ocker-500);
  --amber-tint-16: rgba(248, 200, 88, 0.16); --amber-tint-32: rgba(248, 200, 88, 0.32);
  --focus-ring: 0 0 0 3px var(--amber-tint-32);
  --link: var(--amber-500); --link-hover: var(--amber-400);

  /* Basis-Variablen umlenken: alles Bestehende zieht nach */
  --bg:            var(--color-canvas);
  --bg-soft:       var(--surface-raised);
  --bg-elevated:   var(--surface-card);
  --bg-warm:       var(--surface-pressed);
  --bg-deep:       var(--color-canvas-deep);
  --bg-deep-2:     #221e1b;
  --accent:        var(--color-canvas-deep);
  --accent-bright: var(--amber-500);
  --accent-light:  var(--amber-400);
  --gold:          var(--amber-500);
  --on-accent:     var(--ink-on-amber);
  --text:          var(--ink-200);
  --text-soft:     var(--ink-200);
  /* --text-mute bleibt bei 4,5:1 auf der Karte: #a9a49e, nicht der
     Platzhalter-Ton #857f79 (3,3:1 — nur für Platzhalter und Inaktives). */
  --text-mute:     var(--ink-300);
  --line:          var(--border-soft);
  --line-strong:   var(--border-hairline);
  --shadow:        var(--shadow-card);
  --shadow-lift:   var(--shadow-selected);
}

/* ── Grundton ─────────────────────────────────────────────────────── */
.od body, body.od { background: var(--color-canvas); color: var(--text-body); }
.od h1, .od h2, .od h3, .od h4 { color: var(--text-heading); }
.od :where(a) { color: var(--link); }
.od :where(a):hover { color: var(--link-hover); }
.od :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}
.od ::selection { background: var(--amber-tint-32); }

/* ── 2. BAUSTEINE ─────────────────────────────────────────────────── */

/* Kopfleiste: vertiefte Fläche, Wortmarke mit Amber-Punkt, Pillen-Navigation */
.od-top { position: sticky; top: 0; z-index: 30; background: var(--color-canvas-deep);
  border-bottom: 1px solid var(--border-soft); }
.od-top-in { max-width: var(--layout-max); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 20px; min-height: 60px; flex-wrap: wrap; }
.od-wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-heading); text-decoration: none; white-space: nowrap; }
.od-wordmark:hover { color: var(--text-heading); text-decoration: none; }
.od-wordmark i { font-style: normal; color: var(--text-accent); }
.od-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.od-nav a, .od-nav button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 8px 16px; border-radius: var(--radius-pill); border: 0; background: transparent;
  color: var(--text-muted); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.od-nav a:hover, .od-nav button:hover { color: var(--text-heading); background: rgba(255,255,255,0.04); text-decoration: none; }
.od-nav .is-active { background: var(--surface-card); color: var(--text-heading); font-weight: 600; }
.od-top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Seite */
.od-page { max-width: var(--layout-max); margin: 0 auto; padding: 48px 24px 80px; }
.od-stack { display: flex; flex-direction: column; gap: 44px; }
.od-stack-sm { display: flex; flex-direction: column; gap: 20px; }

/* Seitenkopf: Eyebrow, Display-Zeile mit GENAU EINEM Amber-Wort, Vorspann */
.od-eyebrow { margin: 0 0 18px; color: var(--text-muted); font-size: var(--type-eyebrow-size);
  font-weight: 600; letter-spacing: var(--type-eyebrow-ls); text-transform: uppercase; }
.od-display { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4vw, var(--type-display-size));
  line-height: var(--type-display-lh); font-weight: 700; letter-spacing: var(--type-display-ls);
  color: var(--text-heading); text-wrap: balance; }
.od-display em, .od-accent { font-style: normal; color: var(--text-accent); }
.od-lead { margin: 16px 0 0; color: var(--text-body); font-size: 17px; line-height: 1.55; max-width: 660px; }
.od-h2 { margin: 0; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: 700;
  letter-spacing: var(--type-h2-ls); color: var(--text-heading); }
.od-h3 { margin: 0; font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: 700;
  letter-spacing: var(--type-h3-ls); color: var(--text-heading); }
.od-muted { color: var(--text-muted); }
.od-caption { color: var(--text-muted); font-size: var(--type-caption-size); line-height: 1.45; }

/* Abschnitt: Nummer + Titel + gedämpfte Frage + Haarlinie bis zum rechten Rand.
   Diese Linie IST der Trenner — keine weiteren Divider daneben. */
.od-section { display: flex; align-items: center; gap: 16px; min-width: 0; }
.od-section h2, .od-section .titel { margin: 0; font-size: var(--type-h2-size); line-height: var(--type-h2-lh);
  font-weight: 700; letter-spacing: var(--type-h2-ls); color: var(--text-heading); white-space: nowrap; }
.od-section .hint { color: var(--text-muted); font-size: var(--type-body-size); min-width: 0; }
.od-section::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); min-width: 24px; }
.od-badge { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--radius-sm); background: var(--action-fill);
  color: var(--action-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.od-badge.round { border-radius: var(--radius-pill); }
.od-badge.sm { width: 26px; height: 26px; font-size: 12px; }

/* Karte: Amber-Linien-Icon, fette weiße Zeile, gedämpfter Text. Gewählt =
   Amber-Rahmen + ruhigere Fläche + Lift. Kein Häkchen, keine Füllfarbe. */
.od-card { display: flex; flex-direction: column; gap: 14px; padding: var(--pad-card);
  border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card); color: var(--text-body); text-decoration: none; min-width: 0;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard); }
a.od-card:hover, button.od-card:hover, .od-card.is-link:hover { background: var(--surface-pressed);
  color: var(--text-body); text-decoration: none; }
.od-card.is-selected { background: var(--surface-card-selected); border: 1.5px solid var(--border-selected);
  box-shadow: var(--shadow-selected); }
.od-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.od-card-head .od-icon, .od-card-head > svg { color: var(--text-accent); width: 22px; height: 22px; flex: 0 0 auto; }
.od-card h2, .od-card h3 { margin: 0; font-size: var(--type-h3-size); line-height: var(--type-h3-lh);
  font-weight: 700; letter-spacing: var(--type-h3-ls); color: var(--text-heading); }
.od-card p { margin: 0; color: var(--text-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); }
.od-card.compact { padding: 20px; gap: 12px; }
.od-grid { display: grid; gap: var(--gap-card-grid); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.od-grid-3 { display: grid; gap: var(--gap-card-grid); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.od-icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Panel: umschließende Fläche für einen Schritt, größerer Radius */
.od-panel { padding: var(--pad-panel); border-radius: var(--radius-xl); background: var(--surface-panel);
  border: 1px solid var(--border-hairline); }
.od-panel > h3, .od-panel > .titel { margin: 0; font-size: var(--type-h3-size); font-weight: 700;
  letter-spacing: var(--type-h3-ls); color: var(--text-heading); }
.od-panel > .beschreibung { margin: 10px 0 0; color: var(--text-body); }
.od-panel > .inhalt { margin-top: 20px; }

/* Aufklapper: breite Haarlinien-Leiste, fette Zeile links, ehrlicher Status rechts */
details.od-disclosure { border-radius: var(--radius-lg); background: var(--surface-card);
  border: 1px solid var(--border-hairline); }
.od-disclosure > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 20px 24px;
  cursor: pointer; color: var(--text-heading); font-size: var(--type-h3-size); font-weight: 700;
  letter-spacing: -0.01em; min-height: var(--touch-min); }
.od-disclosure > summary::-webkit-details-marker { display: none; }
.od-disclosure > summary::before { content: "▶"; font-size: 11px; color: var(--text-muted);
  transition: transform var(--duration-base) var(--ease-standard); flex: 0 0 auto; }
.od-disclosure[open] > summary::before { transform: rotate(90deg); }
.od-disclosure > summary .status { margin-left: auto; color: var(--text-muted); font-size: var(--type-body-size);
  font-weight: 400; text-align: right; }
.od-disclosure > .inhalt { padding: 0 24px 22px; color: var(--text-body); }

/* Knöpfe: Amber-Primär (EINER je Ansicht), dunkler Solid, Ghost mit Haarlinie,
   Quiet. Druck = scale(.97). Nie ein Schatten auf einem Knopf. */
.od-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--touch-min);
  padding: 12px 22px; border-radius: var(--radius-md); border: 1px solid transparent; font: inherit;
  font-size: var(--type-label-size); font-weight: 600; letter-spacing: -0.005em; color: var(--action-ink);
  background: var(--action-fill); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.od-btn:hover { background: var(--action-fill-hover); color: var(--action-ink); text-decoration: none; }
.od-btn:active { transform: scale(var(--press-scale)); background: var(--action-fill-pressed); }
.od-btn:disabled, .od-btn[aria-disabled="true"] { background: var(--surface-raised); color: var(--text-placeholder);
  border-color: var(--border-soft); cursor: default; transform: none; }
.od-btn.solid { background: var(--surface-card); color: var(--text-heading); border-color: var(--border-hairline); }
.od-btn.solid:hover { background: var(--surface-pressed); color: var(--text-heading); }
.od-btn.solid:active { background: var(--surface-pressed); }
.od-btn.ghost { background: transparent; color: var(--text-body); border-color: var(--action-ghost-border); }
.od-btn.ghost:hover { background: rgba(255,255,255,0.04); color: var(--text-heading); }
.od-btn.ghost:active { background: rgba(255,255,255,0.06); }
.od-btn.quiet { background: transparent; color: var(--text-muted); }
.od-btn.quiet:hover { background: rgba(255,255,255,0.04); color: var(--text-heading); }
.od-btn.quiet:active { background: rgba(255,255,255,0.06); }
.od-btn.pill { border-radius: var(--radius-pill); }
.od-btn.sm { min-height: 34px; padding: 8px 16px; font-size: 14px; }
.od-btn.lg { min-height: 52px; padding: 15px 28px; font-size: 17px; }
.od-btn .od-icon, .od-btn > svg { width: 18px; height: 18px; }
.od-btn.solid .od-icon, .od-btn.ghost .od-icon, .od-btn.quiet .od-icon { color: var(--text-accent); }

/* Chip: kleine Haarlinien-Pille mit Amber-Icon — in Reihen, nie allein */
.od-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 18px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-hairline); background: transparent;
  color: var(--text-body); font: inherit; font-size: var(--type-body-sm-size); font-weight: 400; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.od-chip:hover { background: rgba(255,255,255,0.04); color: var(--text-heading); text-decoration: none; }
.od-chip .od-icon, .od-chip > svg { width: 18px; height: 18px; color: var(--text-accent); }
.od-chip.is-active, .od-chip[aria-pressed="true"] { border-color: var(--border-selected);
  background: var(--amber-tint-16); color: var(--text-heading); }
.od-chip.sm { min-height: 32px; padding: 6px 12px; font-size: 13px; gap: 6px; }
.od-chip.static { cursor: default; }
.od-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.od-chips.sm { gap: 8px; }

/* Umschalter: gewählt = Amber-Pille, sonst Haarlinien-Ghost. Darunter die Linie. */
.od-toggle { display: flex; gap: 12px; flex-wrap: wrap; }
.od-toggle > a, .od-toggle > button { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-min);
  padding: 11px 26px; border-radius: var(--radius-pill); border: 1px solid var(--action-ghost-border);
  background: transparent; color: var(--text-body); font: inherit; font-size: var(--type-label-size); font-weight: 400;
  cursor: pointer; text-decoration: none; transition: all var(--duration-base) var(--ease-standard); }
.od-toggle > a:hover, .od-toggle > button:hover { color: var(--text-heading); text-decoration: none; }
.od-toggle > .is-active, .od-toggle > [aria-pressed="true"], .od-toggle > [aria-current] {
  background: var(--action-fill); border-color: var(--action-fill); color: var(--action-ink); font-weight: 600; }
.od-toggle.sm > a, .od-toggle.sm > button { min-height: 38px; padding: 8px 18px; font-size: 14px; }
.od-toggle-rule { height: 1px; background: var(--border-hairline); margin-top: 20px; }

/* Stepper: der aktuelle Schritt als Amber-Pille mit dunkler Zählscheibe */
.od-stepper { display: flex; gap: 12px; flex-wrap: wrap; }
.od-step { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min); padding: 9px 22px 9px 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--surface-raised);
  color: var(--text-placeholder); font: inherit; font-size: var(--type-label-size); font-weight: 400;
  cursor: default; text-decoration: none; transition: all var(--duration-base) var(--ease-standard); }
.od-step i { width: 26px; height: 26px; border-radius: var(--radius-pill); display: inline-flex; align-items: center;
  justify-content: center; font-style: normal; font-size: 13px; font-weight: 700; }
.od-step.is-done { color: var(--text-body); }
.od-step.is-current { background: var(--action-fill); border-color: var(--action-fill); color: var(--action-ink); font-weight: 700; }
.od-step.is-current i { background: rgba(0,0,0,0.12); }
a.od-step, button.od-step { cursor: pointer; }

/* Eingabefeld: eingelassen (Seitengrund) in Karte/Panel, Haarlinie, 12 px. Fokus = Amber-Ring. */
.od-field { display: block; }
.od-field > .label { display: block; margin-bottom: 8px; color: var(--text-heading);
  font-size: var(--type-label-size); font-weight: 600; }
.od-field > .hint { display: block; margin-top: 8px; color: var(--text-muted); font-size: var(--type-caption-size); }
.od-input { width: 100%; padding: 14px 18px; border-radius: var(--radius-md); background: var(--surface-input);
  color: var(--text-heading); border: 1px solid var(--border-hairline); font: inherit; font-size: 16px;
  line-height: 1.4; outline: none; min-height: var(--touch-min);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.od-input::placeholder { color: var(--text-placeholder); }
.od-input:focus, .od-input:focus-visible { border-color: var(--border-selected); box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
textarea.od-input { resize: vertical; }
select.od-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9a49e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.od-input.sm { padding: 9px 14px; min-height: 40px; font-size: 15px; }

/* Linie */
.od-rule { height: 1px; background: var(--border-soft); border: 0; margin: 0; }

/* Status — die bewusste Erweiterung. Ein Punkt vor dem Wort, sonst der
   normale Chip: Farbe trägt Bedeutung, nie Fläche. */
.od-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; display: inline-block; }

/* Fuß */
.od-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-muted); font-size: var(--type-caption-size); }
.od-foot a { color: var(--text-body); display: inline-flex; align-items: center; min-height: 32px; }

@media (max-width: 640px) {
  .od-page { padding: 28px 16px 64px; }
  .od-stack { gap: 32px; }
  .od-top-in { padding: 8px 16px; gap: 10px; }
  .od-top-right { margin-left: 0; width: 100%; }
  .od-card { padding: 20px; }
  .od-panel { padding: 20px; border-radius: var(--radius-lg); }
  .od-section { flex-wrap: wrap; gap: 10px 14px; }
  .od-section h2, .od-section .titel { white-space: normal; }
  .od-section .hint { flex-basis: 100%; }
  .od-section::after { display: none; }
  .od-toggle > a, .od-toggle > button { padding: 10px 18px; }
  .od-foot a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .od-btn, .od-chip, .od-card, .od-toggle > *, .od-step, .od-disclosure > summary::before { transition: none; }
  .od-btn:active { transform: none; }
}