/* ════════════════════════════════════════════════════════════════════════
   ds-komponenten.css — die Komponentenschicht des Panels (Welle 1)

   Eingebunden von partials/theme-vars.ejs, direkt nach admin.css und den
   <style>-Bloecken der Ansicht. Alle Klassen hier sind NEU; keine Ansicht
   benutzt sie bisher ausser /ds-muster (views/ds-muster.ejs), wo jede
   Komponente in jedem Zustand steht — fuer Welle 2–4 und die Pruefstaende.

   ── Vertrag ────────────────────────────────────────────────────────────
   Tokens (aus admin.css, hier nur gelesen):
     Schrift      --fs-xs < --fs-sm < --fs-base < --fs-md < --fs-lg < --fs-xl < --fs-2xl
     Dichte       --dichte  (1 am Schreibtisch, 0.75 unter 640 px) — multipliziert
                  Karten- und Abschnitts-Padding. Hier steht ein Rueckfall auf
                  `html` (niedrigere Spezifitaet als :root in admin.css).
     Farben       --surface/--ink/--muted/--faint/--line/--line-soft/--line-field,
                  --akzent (Glas) bzw. --primary (klassisch), --akzent-auf,
                  --danger/--danger-hover/--signal-auf, --tint/--tint-line,
                  --glas-*  fuer Hell UND Dunkel — keine Hex-Farben in dieser Datei.
     Ebenen       --z-schwebend (Fussleiste), --z-fenster (Blatt + Schleier)
     Masse        --bottomnav-h (untere Leiste), --sidebar-w, --r-*, --sp-*
   Bruchstellen:  640 px (Telefon)  ·  900 px (Leiste weg / Blatt wird Panel)
                  ·  1200 px (breiter Schreibtisch). Keine anderen.

   Klassen und Modifikatoren
     .ds-card            Karte. Flex-Spalte, gleich hoch im Raster.
       --dicht           weniger Padding (Listen, Kacheln)
       --klick           ganze Karte ist Ziel (<a> oder <button>): Hover-Kante, Fokusring
       --bild            Bild oben, 16:10 (.ds-card-bild), Text in .ds-card-koerper
       Teile: .ds-card-titel (--fs-md) · .ds-card-text (--fs-sm) · .ds-card-meta (--fs-xs)
              .ds-card-fuss (unten, margin-top:auto) · .ds-card-kopf (Titel + Aktion)
       Zustaende: [aria-pressed="true"] / .ds-card--gewaehlt (Akzentkante),
                  [aria-disabled="true"] (gedaempft)
     .ds-btn             Knopf (<button> oder <a>). 36 px am Schreibtisch, 44 px unter 640 px.
       --primaer         Hauptaktion (Akzentflaeche) — EINE je Bildschirm
       --leise           ohne Rahmen, Flaeche erst beim Ueberfahren
       --gefahr          gefuellte Gefahr (unwiderruflich)
       --klein           30 px am Schreibtisch, bleibt 44 px unter 640 px
       --breit           volle Breite
       --symbol          quadratisch, nur Icon (aria-label Pflicht)
       Zustaende: :disabled · [aria-busy="true"] (Punkt pulsiert, nicht klickbar)
                  · [aria-pressed="true"] (gedrueckt)
       Altnamen aus admin.css bleiben gueltig: --primary, --ghost, --danger, --sm.
     .ds-tabs / .ds-tab  Reiter. Zwei Fassungen, ein Aussehen:
       a) Links (partials/tabs.ejs): .ds-tab.on + aria-current="page", Zustand im Pfad
       b) In der Seite: .ds-tabs[role="tablist"] > button.ds-tab[role="tab"]
          [aria-selected] [aria-controls]; Felder .ds-tabfeld[role="tabpanel"][hidden].
          Zustand im URL-Hash (#reiter=<id>), Pfeiltasten, Home/End — ds-blatt.js › dsReiter
     .ds-blatt           Blatt. Unter 900 px Bottom-Sheet mit Griff (zu/halb/ganz, ziehbar),
                         ab 900 px Seitenpanel rechts, 420 px (--ds-blatt-w).
       Teile: .ds-blatt-griff · .ds-blatt-kopf (+ .ds-blatt-titel) · .ds-blatt-inhalt
              · .ds-blatt-fuss
       Zustand: data-zustand="zu|halb|ganz" (setzt ds-blatt.js), [hidden] wenn zu
       Schleier: .ds-schleier — EINE Klasse, erzeugt ds-blatt.js (modal)
       Nicht-modal (neben der Buehne): html.ds-blatt-offen setzt --ds-blatt-platz
       (420 px ab 900 px, sonst 0) — eine Buehne nimmt `padding-right: var(--ds-blatt-platz)`.
       JS-API (window.dsBlatt): oeffnen(el|id, {zustand, modal, fokus, beimSchliessen})
         · schliessen(el|id) · setzen(el|id, 'zu'|'halb'|'ganz') · zustand(el) · offen()
       Deklarativ: [data-blatt-oeffnen="#id"], im Blatt [data-blatt-zu], [data-blatt-groesse]
       Ereignisse am Blatt: ds-blatt:offen · ds-blatt:zu · ds-blatt:zustand ({detail:{zustand}})
     .ds-raster          grid auto-fill minmax(160px,1fr); alle Karten gleich hoch;
                         unter 640 px 1–2 Spalten (auto-fill, kleinerer Abstand).
       --breit (240 px) · --schmal (120 px) · --eins (eine Spalte)
     .ds-kopf            Kopfzeile (partials/ds-kopf.ejs): Brotkrume .ds-krume (<nav aria-label>),
                         Titel .ds-kopf-titel, Untertitel .ds-kopf-unter, rechts .ds-kopf-aktionen.
       --haftend         klebt oben (nur ab 900 px)
     .ds-schritte        Wizard-Rahmen (ds-schritte.js): .ds-schritte-punkte (ol) mit .ds-punkt
                         (--jetzt/--fertig), .ds-schritt (+ -titel, -koerper, -fehler[role=alert]),
                         .ds-schritte-fuss (fest: ueber --bottomnav-h; fliessend: im Fluss),
                         .ds-zusammenfassung (dl mit «Ändern»-Knoepfen).
       JS-API: dsSchritte(wurzel, {schritte:[{id,titel,zeichne,pruefe,zusammenfassung}],
                 stand, start, fuss:'fest'|'fliessend', zusammenfassung:true, hash:true,
                 fertig(stand), fertigText}) → {gehe, weiter, zurueck, zeichne, stand, zerstoere}
     body.ds-flach       Flacher Grund fuer Erstellungsweg und Uebersicht (SPEZ W2 §1):
                         eine ruhige Flaeche statt Verlauf und Aura. Hell #F2F5F8, Dunkel --bg.
     .ds-hinweis         Hinweiszeile mit optionalem Knopf; --fehler fuer Fehlschlaege.
                         Kinder: <p>, .ds-hinweis-titel, .ds-btn rechts; role setzt die Ansicht.
   Icons nur ueber dsIcon() (public/js/ds-icons.js); .ds-ico setzt admin.css.
   Glas-Fallen (admin.css): die Glasknopf-Regel «[data-glas] .ds-btn:not(…)» (0,5,0) muss
   --primaer und --leise in ihrer :not()-Liste fuehren, sonst uebermalt sie beide (Welle 2).
   Barrierefreiheit: :focus-visible (admin.css), forced-colors, prefers-reduced-motion,
   Tippziele ≥ 44 px bis 900 px fuer .ds-btn/.ds-tab/.ds-krume a (Tastbereich wie admin.css), .ds-punkt (Hoehe und Breite) bis 640 px.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Rueckfaelle ──────────────────────────────────────────────────────────
   `html` statt `:root`: admin.css setzt --dichte auf :root und gewinnt damit
   unabhaengig von der Ladereihenfolge. Hier steht nur, was fehlt, wenn
   admin.css das Token noch nicht kennt. */
html {
  --dichte: 1;
  --ds-blatt-w: 420px;
  --ds-blatt-platz: 0px;
  /* Der Schleier unter einem Blatt. rgba zuerst (aeltere Browser), dann
     aus der Tinte gemischt — in der Nacht ist --ink hell, darum dort aus
     der deckenden Glasflaeche. */
  --ds-schleier: rgba(20, 22, 26, .42);
  --ds-schleier: color-mix(in srgb, var(--ink) 42%, transparent);
  --ds-fuss-h: 64px;
}
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  html { --dichte: .75; }
}
:root[data-glas="dunkel"] {
  --ds-schleier: rgba(0, 0, 0, .58);
  --ds-schleier: color-mix(in srgb, var(--glas-deckend) 72%, transparent);
}

/* ══ Karte ═══════════════════════════════════════════════════════════════ */
.ds-card {
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  gap: calc(var(--sp-sm) * var(--dichte, 1));
  padding: calc(var(--sp-xl) * var(--dichte, 1));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  text-decoration: none; text-align: left;
  font: inherit;
}
.ds-card--dicht { padding: calc(var(--sp-md) * var(--dichte, 1)); gap: var(--sp-2xs); }
.ds-card--klick { cursor: pointer; }
.ds-card--klick:hover { border-color: var(--accent); box-shadow: var(--shadow-float); transform: translateY(-1px); }
.ds-card--klick:active { transform: none; }
/* Der Fokusring liegt aussen; eine Karte hat keinen Platz dafuer innen. */
.ds-card--klick:focus-visible { outline-offset: 3px; border-radius: var(--r-card); }
button.ds-card { width: 100%; }
.ds-card--gewaehlt, .ds-card[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.ds-card[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ds-card[aria-disabled="true"]:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow); }

.ds-card--bild { padding: 0; overflow: hidden; gap: 0; }
.ds-card-bild {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--sunken); border-bottom: 1px solid var(--line-soft);
  color: var(--faint);
}
/* Ein Bildplatz ohne Bild: dieselbe Flaeche, ein Zeichen in der Mitte. */
.ds-card-bild:not(img) { display: grid; place-items: center; }
.ds-card-bild .ds-ico { width: 22px; height: 22px; }
.ds-card--bild .ds-card-koerper {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
  gap: calc(var(--sp-xs) * var(--dichte, 1));
  padding: calc(var(--sp-md) * var(--dichte, 1)) calc(var(--sp-lg) * var(--dichte, 1)) calc(var(--sp-lg) * var(--dichte, 1));
}

.ds-card-kopf { display: flex; align-items: flex-start; gap: var(--sp-sm); min-width: 0; }
.ds-card-kopf .ds-card-titel { flex: 1 1 auto; }
.ds-card-titel {
  margin: 0; font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 650;
  line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; min-width: 0;
  overflow-wrap: anywhere;
}
.ds-card-text { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.ds-card-meta {
  margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-sm); align-items: center;
}
.ds-card-fuss {
  margin-top: auto; padding-top: calc(var(--sp-sm) * var(--dichte, 1));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm);
}
.ds-card-fuss > .ds-rechts { margin-left: auto; }

/* Glas: dieselbe Scheibe wie .card in admin.css. */
[data-glas] .ds-card {
  background: var(--glas-bloom), var(--glas-scheibe), var(--glas-unterlage);
  backdrop-filter: blur(var(--glas-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(150%);
  border-color: var(--glas-kante);
  box-shadow: var(--glas-tiefe), inset 0 1px 0 var(--glas-licht-oben), inset 0 -1px 0 var(--glas-licht-unten);
}
[data-glas] .ds-card--klick:hover { border-color: var(--akzent, var(--accent)); }
[data-glas] .ds-card--gewaehlt, [data-glas] .ds-card[aria-pressed="true"] {
  border-color: var(--akzent, var(--accent)); box-shadow: 0 0 0 1px var(--akzent, var(--accent)), var(--glas-tiefe);
}
[data-glas] .ds-card-bild { background: var(--glas-fuellung); border-bottom-color: var(--glas-linie); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-glas] .ds-card { background: var(--glas-deckend); }
}
@media (prefers-reduced-transparency: reduce) {
  [data-glas] .ds-card { background: var(--glas-deckend); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ══ Knopf ═══════════════════════════════════════════════════════════════
   admin.css setzt .ds-btn auf 44 px (Zeile 430) und unter 900 px auf 48 px
   mit !important (Reparaturblock). Dieser Block hier ist die Zielfassung:
   36 am Schreibtisch, 44 am Telefon. Der !important-Block in admin.css
   gewinnt, bis er durch Komponentenregeln ersetzt ist (Welle 1, admin.css). */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  min-height: 36px; padding: 0 calc(var(--sp-md) + 2px);
  font-family: var(--font-ui); font-size: var(--fs-base); font-weight: 600; line-height: 1.2;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-field); border-radius: var(--r-field);
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.ds-btn .ds-ico { width: 16px; height: 16px; }
.ds-btn:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--surface); }
.ds-btn:active { transform: translateY(0.5px); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }

.ds-btn--primaer {
  background: var(--akzent, var(--primary)); border-color: transparent; color: var(--akzent-auf);
  box-shadow: var(--shadow);
}
.ds-btn--primaer:hover {
  color: var(--akzent-auf); border-color: transparent;
  background: var(--accent-strong);
  background: color-mix(in srgb, var(--akzent, var(--primary)) 86%, var(--ink));
}
.ds-btn--leise { background: transparent; border-color: transparent; color: var(--ink); box-shadow: none; }
.ds-btn--leise:hover { background: var(--sunken); border-color: transparent; color: var(--ink); }
.ds-btn--gefahr { background: var(--danger); border-color: transparent; color: var(--signal-auf); }
.ds-btn--gefahr:hover { background: var(--danger-hover); border-color: transparent; color: var(--signal-auf); }
.ds-btn--klein { min-height: 30px; padding: 0 var(--sp-sm); font-size: var(--fs-sm); gap: var(--sp-2xs); }
.ds-btn--klein .ds-ico { width: 14px; height: 14px; }
.ds-btn--breit { width: 100%; }
.ds-btn--symbol { padding: 0; width: 36px; }
.ds-btn--symbol.ds-btn--klein { width: 30px; }
.ds-btn--symbol .ds-ico { width: 18px; height: 18px; }
.ds-btn[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); color: var(--accent-strong); }
/* Beschaeftigt: nicht klickbar, der Text bleibt (kein Springen), ein Punkt pulsiert. */
.ds-btn[aria-busy="true"] { pointer-events: none; position: relative; color: transparent !important; }
.ds-btn[aria-busy="true"] .ds-ico { visibility: hidden; }
.ds-btn[aria-busy="true"]::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: currentColor; color: var(--ink);
  animation: dsPuls .9s ease-in-out infinite;
}
.ds-btn--primaer[aria-busy="true"]::after { color: var(--akzent-auf); }
.ds-btn--gefahr[aria-busy="true"]::after { color: var(--signal-auf); }
@keyframes dsPuls { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.3); opacity: 1; } }

[data-glas] .ds-btn { background: var(--glas-fuellung); border-color: var(--glas-linie); color: var(--text); }
[data-glas] .ds-btn:hover { background: var(--glas-fuellung-stark); border-color: var(--akzent, var(--accent)); color: var(--text); }
[data-glas] .ds-btn--primaer, [data-glas] .ds-btn--primaer:hover {
  background: var(--akzent-fuell, var(--akzent)); color: var(--akzent-auf); border-color: transparent;
  box-shadow: var(--glas-tiefe);
}
[data-glas] .ds-btn--primaer:hover { background: color-mix(in srgb, var(--akzent) 86%, var(--text)); }
[data-glas] .ds-btn--leise { background: transparent; border-color: transparent; }
[data-glas] .ds-btn--leise:hover { background: var(--glas-fuellung); border-color: transparent; }
[data-glas] .ds-btn--gefahr, [data-glas] .ds-btn--gefahr:hover { color: var(--signal-auf); border-color: transparent; }
[data-glas] .ds-btn--gefahr { background: var(--danger); }
[data-glas] .ds-btn--gefahr:hover { background: var(--danger-hover, var(--danger)); }
[data-glas] .ds-btn[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--akzent, var(--accent)); color: var(--text); }

/* Tastbereich wie in admin.css: bis 900 px (nicht nur 640), sonst gewaenne die
   36-px-Regel oben zwischen 641 und 900 px ueber admin.css. */
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .ds-btn, .ds-btn--klein { min-height: 44px; min-width: 44px; }
  .ds-btn--symbol, .ds-btn--symbol.ds-btn--klein { width: 44px; }
}
/* Eine Knopfreihe: rechts buendig, am Telefon untereinander, Hauptaktion zuerst. */
.ds-knoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-sm); }
.ds-knoepfe--links { justify-content: flex-start; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-knoepfe--stapel { flex-direction: column-reverse; align-items: stretch; }
  .ds-knoepfe--stapel .ds-btn { width: 100%; }
}

/* ══ Reiter ══════════════════════════════════════════════════════════════
   Aussehen der Linkfassung steht in admin.css (.ds-tabs/.ds-tab/.on). Hier
   kommt die Knopffassung dazu und das Tippziel am Telefon: admin.css setzt
   die Pillen dort auf 34 px, das ist zu klein. */
.ds-tabs[role="tablist"] { position: relative; }
button.ds-tab { appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--fs-base); font-weight: 500; }
.ds-tab[aria-selected="true"] { color: var(--ink); font-weight: 650; border-bottom-color: var(--ink); }
.ds-tab:focus-visible { outline-offset: -2px; border-radius: var(--r-field); }
.ds-tab:disabled { opacity: .45; cursor: not-allowed; }
/* [hidden] verlor gegen das display der Reiter: der Reiter «Katalog» (nur fuer SOBi-Websites,
   ae-katalog.js) stand bei JEDER Website in der Leiste, obwohl er hidden trug. */
.ds-tab[hidden] { display: none !important; }
.ds-tab .ds-zaehler {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
}
.ds-tab.on .ds-zaehler, .ds-tab[aria-selected="true"] .ds-zaehler { background: var(--tint); color: var(--accent-strong); }
.ds-tabfeld { min-width: 0; }
.ds-tabfeld[hidden] { display: none; }
.ds-tabfeld:focus { outline: none; }
[data-glas] .ds-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
[data-glas] .ds-tab .ds-zaehler { background: var(--glas-fuellung); color: var(--text-2, var(--muted)); }
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .ds-tab { height: auto; min-height: 44px; }
}
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-tab { padding: 0 14px; }
  .ds-tab[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  [data-glas] .ds-tab[aria-selected="true"] { background: var(--akzent, var(--accent)); color: var(--akzent-auf); border-color: transparent; }
  .ds-tab[aria-selected="true"] .ds-zaehler, .ds-tab.on .ds-zaehler { background: transparent; color: inherit; }
}

/* ══ Raster ══════════════════════════════════════════════════════════════ */
.ds-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: calc(var(--sp-lg) * var(--dichte, 1)); align-items: stretch;
}
.ds-raster > * { min-width: 0; height: 100%; }
.ds-raster--breit { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.ds-raster--schmal { grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); }
.ds-raster--eins { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-raster { gap: var(--sp-sm); }
  .ds-raster--breit { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Kopfzeile ═══════════════════════════════════════════════════════════ */
.ds-kopf {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  padding: calc(var(--sp-xl) * var(--dichte, 1)) 1.75rem calc(var(--sp-md) * var(--dichte, 1));
  border-bottom: 1px solid var(--line); background: transparent;
  max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.ds-kopf--voll { max-width: none; }
.ds-kopf-links { min-width: 0; flex: 1 1 18rem; display: flex; flex-direction: column; gap: var(--sp-2xs); }
.ds-krume { font-size: var(--fs-sm); color: var(--faint); }
.ds-krume ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2xs); }
.ds-krume li { display: inline-flex; align-items: center; gap: var(--sp-2xs); min-width: 0; }
.ds-krume li + li::before { content: '›'; color: var(--faint); opacity: .7; }
.ds-krume a { color: var(--faint); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; border-radius: var(--r-xs); }
.ds-krume a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ds-krume [aria-current="page"] { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-krume .ds-krume-zurueck { display: none; }
/* Der Zurueck-Eintrag ist am Schreibtisch unsichtbar: der erste sichtbare Eintrag braucht kein › davor. */
.ds-krume .ds-krume-zurueck + li::before { content: none; }
.ds-kopf-titel {
  margin: 0; font-family: var(--font-head); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: center; gap: var(--sp-sm); min-width: 0;
  overflow-wrap: anywhere;
}
.ds-kopf-titel .ds-ico { width: 20px; height: 20px; color: var(--accent-strong); }
.ds-kopf-titel:focus { outline: none; }
.ds-kopf-unter { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 70ch; }
.ds-kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-sm); flex: 0 1 auto; min-width: 0; }
.ds-kopf-aktionen:empty { display: none; }
[data-glas] .ds-kopf { border-bottom-color: var(--glas-kante); }
/* Auf dem Glasgrund liegt die Aura — --label/--faint kamen in Hell gerastert
   auf 4,0–4,3:1. --text-muted (hell #4C5158, dunkel #AEBEC7) traegt. */
[data-glas] .ds-krume, [data-glas] .ds-krume a { color: var(--text-muted); }
[data-glas] .ds-krume a:hover, [data-glas] .ds-krume [aria-current="page"] { color: var(--text); }
/* «Ab 901 px, aber nicht Telefon quer» in der alten Schreibweise (hoch ODER hoeher als 500):
   «and (not (…))» kennt Safari erst ab 16.4 — davor waere die ganze Regel ungueltig, und am
   Schreibtisch staende jedes Blatt als Bodenblatt da. */
@media (min-width: 901px) and (min-height: 501px), (min-width: 901px) and (orientation: portrait) {
  .ds-kopf--haftend { position: sticky; top: 0; z-index: var(--z-leiste); background: var(--bg); }
  [data-glas] .ds-kopf--haftend { background: var(--glas-unterlage-frei); backdrop-filter: blur(var(--glas-blur)); -webkit-backdrop-filter: blur(var(--glas-blur)); }
}
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .ds-kopf { padding-left: 1rem; padding-right: 1rem; }
  /* Brotkrumen sind Leisten-Links: im Tastbereich 44 px (admin.css macht das
     fuer .breadcrumb/.topbar-breadcrumb, diese Klasse gehoert hierher). */
  .ds-krume a { min-height: 44px; min-width: 44px; justify-content: center; }
}
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-kopf { align-items: flex-start; gap: var(--sp-sm); }
  .ds-kopf-titel { font-size: var(--fs-xl); }
  /* Am Telefon bleibt von der Brotkrume der Weg zurueck: ein Ziel, 44 px. */
  .ds-krume li { display: none; }
  .ds-krume li.ds-krume-zurueck { display: inline-flex; }
  .ds-krume li + li::before { content: none; }
  .ds-krume .ds-krume-zurueck a { min-height: 44px; min-width: 44px; padding: 0 var(--sp-xs) 0 0; gap: var(--sp-2xs); }
  .ds-krume .ds-krume-zurueck .ds-ico { width: 16px; height: 16px; }
  .ds-kopf-aktionen { width: 100%; justify-content: flex-start; }
}

/* ══ Blatt ═══════════════════════════════════════════════════════════════
   Ein Fenster, das weiss, wo es ist: unter 900 px kommt es von unten und
   laesst sich am Griff ziehen (zu/halb/ganz), ab 900 px steht es rechts
   neben der Buehne, 420 px breit, volle Hoehe. Beides ist dasselbe Markup. */
.ds-schleier {
  position: fixed; inset: 0; z-index: calc(var(--z-fenster, 400) - 1);
  background: var(--ds-schleier);
  animation: dsEinblenden .18s ease-out;
}
.ds-blatt {
  position: fixed; z-index: var(--z-fenster, 400);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font-size: var(--fs-base);
}
.ds-blatt[hidden] { display: none; }
.ds-blatt-griff { display: none; }
.ds-blatt-kopf {
  flex: none; display: flex; align-items: center; gap: var(--sp-2xs);
  padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-lg);
  border-bottom: 1px solid var(--line-soft);
}
.ds-blatt-titel {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-blatt-titel:focus { outline: none; }
/* Am Telefon bricht ein langer Titel auf zwei Zeilen um, statt mit «…» zu enden
   («Alle Texte dieser Seite neu schreiben» bei 320 px, Panel-U4). */
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-blatt-titel {
    white-space: normal; text-overflow: clip; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
}
.ds-blatt-inhalt {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(var(--sp-lg) * var(--dichte, 1)) var(--sp-lg);
  display: flex; flex-direction: column; gap: calc(var(--sp-lg) * var(--dichte, 1));
}
.ds-blatt-fuss {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg) calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft); background: var(--surface);
}
.ds-blatt-fuss:empty { display: none; }
/* Der Groessenknopf gibt es nur am Telefon. */
.ds-blatt [data-blatt-groesse] { display: none; }
[data-glas] .ds-blatt {
  background: var(--glas-unterlage-frei); color: var(--text);
  backdrop-filter: blur(var(--glas-blur-float)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur-float)) saturate(140%);
  border-color: var(--glas-kante); box-shadow: var(--glas-tiefe);
}
[data-glas] .ds-blatt-kopf, [data-glas] .ds-blatt-fuss { border-color: var(--glas-linie); }
[data-glas] .ds-blatt-fuss { background: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-glas] .ds-blatt { background: var(--glas-deckend); }
}
@media (prefers-reduced-transparency: reduce) {
  [data-glas] .ds-blatt { background: var(--glas-deckend); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Als Bodenblatt am Telefon DECKEND: es steht ueber rollendem Inhalt, und durch die Glasflaeche
   (Deckkraft .92) schienen Texte als Geist hindurch (Panel-N13/U5). */
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  [data-glas] .ds-blatt { background: var(--glas-deckend); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Ab 901 px: Seitenpanel rechts (900 selbst zaehlt zum Tastbereich, wie ueberall). */
@media (min-width: 901px) and (min-height: 501px), (min-width: 901px) and (orientation: portrait) {
  .ds-blatt {
    top: 0; right: 0; bottom: 0; width: min(var(--ds-blatt-w), 100vw);
    border-top: 0; border-bottom: 0; border-right: 0;
    animation: dsVonRechts .22s cubic-bezier(.32, .72, 0, 1);
  }
  html.ds-blatt-offen { --ds-blatt-platz: var(--ds-blatt-w); }
  /* Modal am Schreibtisch: die Seite dahinter steht still. */
  html.ds-blatt-modal { overflow: hidden; }
}
/* Bis 900 px: Blatt von unten. */
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .ds-blatt {
    left: 0; right: 0; bottom: 0; top: auto; width: auto;
    height: 50vh; height: 50dvh; max-height: calc(100dvh - 24px);
    border-radius: 18px 18px 0 0; border-bottom: 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .22);
    animation: dsVonUnten .22s cubic-bezier(.32, .72, 0, 1);
    transition: height .2s cubic-bezier(.32, .72, 0, 1);
  }
  .ds-blatt.ds-blatt--zieht { transition: none; }
  .ds-blatt[data-zustand="ganz"] { height: calc(100vh - 24px); height: calc(100dvh - 24px); }
  .ds-blatt-griff {
    display: flex; justify-content: center; align-items: center; flex: none;
    height: 22px; cursor: grab; touch-action: none; background: transparent; border: 0; width: 100%; padding: 0;
  }
  .ds-blatt-griff > span { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-field); }
  [data-glas] .ds-blatt-griff > span { background: var(--glas-linie); }
  .ds-blatt-kopf { touch-action: none; padding-top: 0; }
  .ds-blatt [data-blatt-groesse] { display: inline-flex; }
  .ds-blatt[data-zustand="ganz"] [data-blatt-groesse] .ds-ico { transform: rotate(180deg); }
  html.ds-blatt-modal { overflow: hidden; }
  /* Niedriger Schirm (Telefon quer): halb ist nichts, offen ist ganz. */
  @media (max-height: 540px) {
    .ds-blatt[data-zustand="halb"], .ds-blatt[data-zustand="ganz"] { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
    .ds-blatt [data-blatt-groesse] { display: none; }
    /* Quer ist jeder Pixel Hoehe Arbeitsflaeche: kein Griff (die Stellung ist ohnehin fest),
       ein schmalerer Kopf. */
    .ds-blatt-griff { display: none; }
    .ds-blatt-kopf { padding-top: var(--sp-2xs); padding-bottom: var(--sp-2xs); }
  }
}
@keyframes dsEinblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsVonUnten { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dsVonRechts { from { transform: translateX(100%); } to { transform: none; } }

/* ══ Schritte (Wizard-Rahmen) ════════════════════════════════════════════ */
.ds-schritte { display: flex; flex-direction: column; gap: calc(var(--sp-lg) * var(--dichte, 1)); min-width: 0; }
.ds-schritte-punkte {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2xs);
}
.ds-punkt {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 0 var(--sp-sm) 0 var(--sp-2xs); min-height: 32px; border-radius: 999px;
  font-size: var(--fs-sm); color: var(--muted); background: transparent; border: 0; font-family: inherit; cursor: default;
}
.ds-punkt .nr {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--sunken); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono);
}
.ds-punkt .nr .ds-ico { width: 13px; height: 13px; }
.ds-punkt--jetzt { background: var(--tint); color: var(--ink); font-weight: 650; }
.ds-punkt--jetzt .nr { background: var(--akzent, var(--primary)); color: var(--akzent-auf); }
.ds-punkt--fertig .nr { background: var(--ok); color: var(--signal-auf); }
button.ds-punkt--fertig { cursor: pointer; }
button.ds-punkt--fertig:hover { background: var(--sunken); color: var(--ink); }
.ds-punkt--fertig .ds-punkt-t { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
button.ds-punkt--fertig:hover .ds-punkt-t { text-decoration-color: currentColor; }
.ds-schritte-trenner { flex: none; width: 14px; height: 1px; background: var(--line-field); }
[data-glas] .ds-punkt--jetzt { background: var(--accent-tint); color: var(--text); }
[data-glas] .ds-punkt .nr { background: var(--glas-fuellung); color: var(--text-2, var(--muted)); }
[data-glas] .ds-punkt--jetzt .nr { background: var(--akzent); color: var(--akzent-auf); }
[data-glas] .ds-schritte-trenner { background: var(--glas-linie); }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-schritte-punkte { gap: 0; }
  /* Fertige Punkte sind Knoepfe: 44px hoch UND breit (gemessen 34px breit). */
  .ds-punkt { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 var(--sp-xs); }
  .ds-punkt .ds-punkt-t { display: none; }
  .ds-punkt--jetzt .ds-punkt-t { display: inline; }
  .ds-schritte-trenner { width: 8px; }
}

.ds-schritt { display: flex; flex-direction: column; gap: calc(var(--sp-sm) * var(--dichte, 1)); min-width: 0; }
.ds-schritt-titel {
  margin: 0; font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.015em; color: var(--ink);
}
.ds-schritt-titel:focus { outline: none; }
.ds-schritt-warum { margin: 0 0 var(--sp-sm); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; max-width: 70ch; }
.ds-schritt-koerper { display: flex; flex-direction: column; gap: calc(var(--sp-md) * var(--dichte, 1)); min-width: 0; }
.ds-schritt-fehler {
  margin: 0; padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-field);
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger);
  font-size: var(--fs-sm); line-height: 1.45; font-weight: 600;
}
.ds-schritt-fehler:empty, .ds-schritt-fehler[hidden] { display: none; }
.ds-schritt-fehler ul { margin: var(--sp-2xs) 0 0; padding-left: 1.1em; font-weight: 500; }
.ds-schritt-fehler:focus { outline: none; }

/* Eine Zeile je Angabe: Beschriftung ueber dem Wert, rechts «Ändern».
   dl > div > dt + dd + dd.ds-zf-aendern (gueltiges HTML, jede Gruppe ein
   eigenes Raster — display:contents liess den Aendern-Knopf eine Zeile
   zu tief rutschen). */
.ds-zusammenfassung { margin: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.ds-zusammenfassung > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt a" "dd a";
  align-items: center; column-gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border-top: 1px solid var(--line-soft);
}
.ds-zusammenfassung > div:first-child { border-top: 0; }
.ds-zusammenfassung dt, .ds-zusammenfassung dd { margin: 0; min-width: 0; }
.ds-zusammenfassung dt { grid-area: dt; font-size: var(--fs-xs); color: var(--faint); }
.ds-zusammenfassung dd { grid-area: dd; font-size: var(--fs-base); color: var(--ink); overflow-wrap: anywhere; }
.ds-zusammenfassung dd.leer { color: var(--faint); font-style: italic; }
.ds-zusammenfassung dd.ds-zf-aendern { grid-area: a; display: flex; align-items: center; }
[data-glas] .ds-zusammenfassung { border-color: var(--glas-kante); }
[data-glas] .ds-zusammenfassung > div { border-color: var(--glas-linie); }

.ds-schritte-fuss {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) 0 0; border-top: 1px solid var(--line);
}
.ds-schritte-fuss .ds-schritte-stand { margin: 0 auto; font-size: var(--fs-xs); color: var(--faint); font-family: var(--font-mono); white-space: nowrap; }
.ds-schritte-fuss .ds-btn--leise:disabled { visibility: hidden; }
[data-glas] .ds-schritte-fuss { border-top-color: var(--glas-kante); }
/* Fest: ueber der unteren Leiste, neben der Seitenleiste, unter dem Blatt. */
.ds-schritte--fest { padding-bottom: calc(var(--ds-fuss-h) + var(--sp-lg)); }
.ds-schritte--fest .ds-schritte-fuss {
  position: fixed; left: var(--sidebar-w); right: 0; bottom: var(--bottomnav-h, 0px);
  z-index: var(--z-schwebend, 200);
  padding: var(--sp-sm) 1.75rem calc(var(--sp-sm) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -18px rgba(0, 0, 0, .25);
}
[data-glas] .ds-schritte--fest .ds-schritte-fuss {
  background: var(--glas-unterlage-frei); border-top-color: var(--glas-kante);
  backdrop-filter: blur(var(--glas-blur-float)); -webkit-backdrop-filter: blur(var(--glas-blur-float));
}
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .ds-schritte--fest .ds-schritte-fuss { left: 0; padding-left: 1rem; padding-right: 1rem; }
  /* Unter 900 px hebt die untere Leiste alles an; der Fuss liegt ueber ihr. */
  .ds-schritte--fest .ds-schritte-fuss { bottom: var(--bottomnav-h, 0px); }
}
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .ds-schritte-fuss .ds-btn--primaer { flex: 1 1 auto; }
}

/* ══ Flacher Grund (body.ds-flach) ═══════════════════════════════════════
   Erstellungsweg und Uebersicht (SPEZ Welle 2 §1) liegen auf EINER ruhigen
   Flaeche: kein Seitenverlauf, keine Aura-Lichter aus ds-glas.css. «body auf
   var(--bg)» allein ergibt das nicht — in Hell ist --bg transparent und
   body::before zeichnet die Aura. Darum hier eine eigene Farbe aus der
   Familie der Aura-Stuetzpunkte (#F3F8FB / #E7EFF5), in Dunkel der dunkle
   Grund. Spezifischer als `[data-glas="hell"] body` (0,1,1). */
body.ds-flach { --ds-flach-grund: #F2F5F8; }
html[data-glas="dunkel"] body.ds-flach { --ds-flach-grund: var(--bg); }
html body.ds-flach, html[data-glas] body.ds-flach { background: var(--ds-flach-grund); }
html[data-glas] body.ds-flach::before, html[data-glas] body.ds-flach::after { display: none; content: none; }

/* ══ Hinweis .ds-hinweis ═════════════════════════════════════════════════
   Eine Zeile Hinweis oder Fehler mit optionalem Knopf (role="status" oder
   role="alert" setzt die Ansicht). --fehler fuer alles, was nicht geklappt
   hat. Kinder: <p> ohne Rand, .ds-hinweis-titel fett, .ds-btn rechts. */
.ds-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-md);
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-field);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  font-size: var(--fs-sm); line-height: 1.45;
}
.ds-hinweis p { margin: 0; }
.ds-hinweis ul { margin: 0; padding-left: 1.1em; flex: 1 0 100%; }
.ds-hinweis .ds-hinweis-titel { margin: 0; font-size: var(--fs-md); font-weight: 700; flex: 1 0 100%; }
.ds-hinweis .ds-knoepfe { flex: 1 0 100%; }
.ds-hinweis--fehler { background: var(--danger-bg); border-color: var(--danger); border-left-color: var(--danger); }
.ds-hinweis--fehler .ds-hinweis-titel { color: var(--danger); }
[data-glas] .ds-hinweis { background: var(--glas-fuellung); border-color: var(--glas-linie); border-left-color: var(--warn); color: var(--text); }
[data-glas] .ds-hinweis--fehler { background: var(--danger-bg); border-color: var(--danger); border-left-color: var(--danger); }

/* ══ Kleinteile, die die Komponenten brauchen ═══════════════════════════ */
.ds-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-rechts { margin-left: auto; }
.ds-abschnitt { display: flex; flex-direction: column; gap: calc(var(--sp-md) * var(--dichte, 1)); padding: calc(var(--sp-xl) * var(--dichte, 1)) 0; }
.ds-abschnitt + .ds-abschnitt { border-top: 1px solid var(--line-soft); }
.ds-abschnitt-titel { margin: 0; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ds-abschnitt-text { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; max-width: 70ch; }
[data-glas] .ds-abschnitt + .ds-abschnitt { border-top-color: var(--glas-linie); }
/* Nebenzeilen, die auf dem Glasgrund (nicht auf einer Karte) stehen: --muted
   kam in Hell gerastert auf 4,2–4,3:1 (Aura unter dem Text). */
[data-glas] .ds-kopf-unter, [data-glas] .ds-abschnitt-text, [data-glas] .ds-schritt-warum { color: var(--text-muted); }

/* ══ Bewegung und Kontrast ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ds-card, .ds-btn, .ds-blatt, .ds-schleier, .ds-blatt [data-blatt-groesse] .ds-ico { transition: none; animation: none; }
  .ds-btn[aria-busy="true"]::after { animation: none; opacity: 1; }
  .ds-card--klick:hover { transform: none; }
}
@media (forced-colors: active) {
  .ds-card, .ds-btn, .ds-blatt, .ds-tab, .ds-punkt .nr { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .ds-btn--primaer, .ds-punkt--jetzt .nr, .ds-tab[aria-selected="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
  .ds-schleier { background: rgba(0, 0, 0, .6); }
}

/* ══ Aufklappbare Zeilen am Telefon ═══════════════════════════════════════
   <details><summary> ist ein Tippziel wie ein Knopf (Welle 3b: A/B-Test und Shop
   hatten «So funktioniert es» mit 21–36 px). Nur die Hoehe; Polster und Marke
   bleiben, wie die Ansicht sie setzt. */
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
  :where(.main) details > summary { min-height: 44px; box-sizing: border-box; padding-block: 10px; }
}