/* KOPIE von war-app/wolke-ui.css (Quelle dort pflegen, hierher kopieren) */
/* ============================================================================
   wolke-ui.css 2.10 — EIN Bausatz für alle Wolke-Oberflächen
   Ergänzt wolke-tokens.css (CI-Farben/Status) um Abstände, Schrift, Radien, Schatten,
   Flächenebenen, Dichte, Gerüst und 16 Bausteine. Regel: neue Flächen bauen NUR hiermit —
   keine eigenen <style>-Blöcke mit eigenen Farben/Größen, nie prompt()/confirm()/alert().
   Maßstab: kontext/DESIGN-PRINZIPIEN.md · Herleitung: outputs/ui-review/designsysteme/LERNEN.md
   Musterblätter: ui-muster-sandbox.html (Bausteine) · ui-querformat-sandbox.html (Gerüst Handy → Desktop)
   Kopie in ~/Projekte/bogen/static/wolke-ui.css — nach Änderungen hier nachziehen.

   Änderungen
   2.0 · 23.10.2026 · hell/dunkel per light-dark() in EINER Zeile je Token (data-theme: hell | dunkel | auto);
         Flächenebene --surface-raised; Zustände hover/pressed; Dichte (Maus + ≥ 1024 px eine Stufe dichter,
         data-dichte überschreibt); 13 Gerüst mit Rail ab 600 px (Entscheidung V1); 14 Liste|Detail per
         Container Query; 15 Formular-Raster 12 Spalten + Feldbreite nach Eingabe (C2); 16 Hilfe hinter
         i-Symbol (B); Icons/Logo nie stauchen (object-fit); --ziel statt 44px-Literale.
   2.10 · 24.10.2026 · Karte mit generischer Ampel (data-ampel) + .erledigt; Rollout Handy-Start.
   2.9 · 23.10.2026 · Dialog-API in wolke-ui.js (wolkeToast/Hinweis/Bestaetigen/Eingabe/Wahl) als Ersatz für prompt/confirm/alert in allen Apps.
   2.8 · 23.10.2026 · Datumsfelder ohne Platzhalter im Leerzustand, Zahlenfelder mit „–“; Team-Kacheln mit Zusage-Ampel.
   2.7 · 23.10.2026 · 20 Knopfgruppe (.ui-knoepfe, gleich breit), Kacheln (.ui-kacheln) für Personen/Werte; Baustellen = Kacheln + Ampel.
   2.6 · 23.10.2026 · wolke-ui.js (Hilfe-Popover kippt, nur eines offen); Knopf-Hierarchie: sekundär = Navigation, leise = Kontakt/Nebenaktion.
   2.5 · 23.10.2026 · leise Knöpfe mit Rahmen; Nummern-Formate fmtTelefon/fmtIban/fmtBetrag in wb-regeln.js.
   2.4 · 23.10.2026 · Ansichten als Raster statt Schiebe-Reihe, Baustellen zweizeilig, Liste 20–26 rem (Rückmeldung Christian).
   2.3 · 23.10.2026 · 18 Speichern-Leiste, 19 Ansichten-Chips, Baustellen-Ampel, .nur-schmal/.nur-breit, Pille stopp (Pilot Fahrten).
   2.2 · 23.10.2026 · 17 Icons: Sprite wolke-icons.svg (Phosphor, Linie + gefüllt aktiv), Katalog ui-icons.html.
   2.1 · 23.10.2026 · Leaf-Look überall (Radien bleiben, oben rechts 0) — Karten, Knöpfe, Felder, Pillen, Blatt.
   1.0 · 18.10.2026 · Tokens + 12 Bausteine, hell/dunkel per Doppelpflege.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light;                       /* Standard hell; <html data-theme="dunkel"> oder "auto" s. u. */
  /* Abstände — nur diese sechs */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* Schrift — nur diese fünf Größen */
  --t-xs: 12px; --t-sm: 13.5px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px;
  --font: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: 'Amatic SC', var(--font);
  /* Ecken — dezent rund, nie Pille; Leaf-Look ÜBERALL: oben rechts spitz (Christian 23.10.2026).
     Echte Kreise (Punkte, i-Symbol) bleiben Kreise. */
  --r-sm: 5px 0 5px 5px; --r: 8px 0 8px 8px;
  /* Maße */
  --ziel: 44px;                              /* Mindest-Touchziel (Apple HIG, Lightning); dicht: 36 */
  --nav-h: 60px;                             /* Tableiste unten */
  --nav-w: 80px;                             /* Rail links ab 600 px */
  /* Flächen + Text: EIN Token, beide Werte nebeneinander (hell, dunkel). Im Dunkeln sind höhere Ebenen
     heller statt beschattet (Material, Atlassian, Apple). */
  --bg:             light-dark(#eef3f5, #101418);
  --surface:        light-dark(#ffffff, #181e25);
  --surface-2:      light-dark(#f3f6f8, #222a33);
  --surface-raised: light-dark(#ffffff, #2a333d);   /* Blatt, Dialog, Popover */
  --border:         light-dark(#e1e6ea, #2c3540);
  --text:           light-dark(#1f2733, #ecf0f4);
  --text-2:         light-dark(#44546a, #b4bec8);
  --text-3:         light-dark(#7c8590, #8a96a2);
  --primary:        light-dark(var(--wolke-blue, #00709E), #2f8fc0);
  --primary-fg:     #ffffff;
  --focus:          0 0 0 3px light-dark(rgba(0,112,158,.25), rgba(47,143,192,.35));
  /* Schatten statt Rahmen (hell); im Dunkeln Kante statt Schatten */
  --sh-sm: 0 1px 2px light-dark(rgba(0,60,90,.05), transparent), 0 1px 3px light-dark(rgba(0,60,90,.06), transparent);
  --sh-md: 0 3px 10px light-dark(rgba(0,60,90,.09), transparent), 0 0 0 1px light-dark(transparent, #2c3540);
  --sh-lg: 0 12px 30px light-dark(rgba(0,60,90,.16), rgba(0,0,0,.5));
}
:root[data-theme="dunkel"] { color-scheme: dark; }
:root[data-theme="auto"]   { color-scheme: light dark; }   /* folgt dem System (Apple HIG empfiehlt das) */

/* Dichte: Handy ist die Basis. Mit Maus und ab 1024 px eine Stufe dichter (Polaris Mobile-Theme umgekehrt,
   Spectrum Platform Scale). Erzwingen: <html data-dichte="dicht"> bzw. "luftig". Beide Blöcke gleich halten. */
:root[data-dichte="dicht"] {
  --t-md: 14px; --t-sm: 12.5px; --t-xs: 11px; --t-lg: 18px; --t-xl: 24px;
  --s3: 10px; --s4: 12px; --s5: 20px; --ziel: 36px; --nav-h: 52px; }
@media (pointer: fine) and (min-width: 1024px) {
  :root:not([data-dichte="luftig"]) {
    --t-md: 14px; --t-sm: 12.5px; --t-xs: 11px; --t-lg: 18px; --t-xl: 24px;
    --s3: 10px; --s4: 12px; --s5: 20px; --ziel: 36px; --nav-h: 52px; }
}

/* ---- Grundgerüst ------------------------------------------------------ */
.ui * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ui [hidden] { display: none !important; }   /* sonst gewinnt display:flex der Bausteine über das hidden-Attribut */
.ui { font: var(--t-md)/1.45 var(--font); color: var(--text); background: var(--bg);
      min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.ui:has(> .ui-shell) { padding-bottom: 0; min-height: 0; }
.ui h1, .ui h2, .ui h3 { margin: 0; line-height: 1.25; }
.ui h1 { font-size: var(--t-xl); font-weight: 700; }
.ui h2 { font-size: var(--t-lg); font-weight: 600; }
.ui h3 { font-size: var(--t-md); font-weight: 600; }
.ui p { margin: 0; }
.ui .klein { font-size: var(--t-sm); color: var(--text-2); }
.ui .winzig { font-size: var(--t-xs); color: var(--text-3); }
.ui .stapel > * + * { margin-top: var(--s3); }
.ui .seite { padding: var(--s4); max-width: 640px; margin: 0 auto; }
.ui .zahl { font-variant-numeric: tabular-nums; }   /* Beträge, Zähler: Ziffern gleich breit (Polaris) */
.ui img, .ui svg { max-width: 100%; }

/* ---- 1 Kopfzeile: eine für alle Apps ---------------------------------- */
.ui-kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s2) var(--s4); background: var(--surface);
  border-bottom: 1px solid var(--border); }
.ui-kopf img { height: 32px; width: auto; object-fit: contain; }   /* Logo 352×200: Höhe fest, Breite folgt — nie stauchen */
.ui-kopf .marke { font-family: var(--font-brand); font-size: var(--t-xl); color: var(--primary); letter-spacing: .5px; }
.ui-kopf .titel { font-size: var(--t-lg); font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kopf .aktion { margin-left: auto; }

/* ---- 2 Tableiste: unten, Icon + Wort, 44er Ziele; im Gerüst ab 600 px Rail (s. 13) ------- */
.ui-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface);
  border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.ui-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-h); color: var(--text-3); font-size: var(--t-xs); text-decoration: none; border: 0; background: none; cursor: pointer; }
.ui-tab .ico { width: 24px; height: 24px; display: block; object-fit: contain; }   /* Icons sind nicht alle quadratisch */
.ui-tab[aria-current="page"] { color: var(--primary); font-weight: 600; }
@media (hover: hover) { .ui-tab:hover { color: var(--text-2); } }

/* ---- 3 Knöpfe: ein Primär je Fläche; sekundär = Navigation/Weiter (CI-Rahmen); leise = Kontakt/Nebenaktion (grauer Rahmen).
        Gleiche Aktionsart = gleiche Optik (Christian 23.10.). Zustände hover/pressed/focus/disabled ---------------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--ziel); padding: 0 var(--s4); border-radius: var(--r); border: 1px solid transparent;
  font: 600 var(--t-md) var(--font); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .15s, background .15s; }
.ui-btn:active { transform: translateY(1px); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.ui-btn.primaer { background: var(--primary-fill, var(--primary)); color: var(--primary-fg); box-shadow: var(--sh-sm); }
.ui-btn.primaer:active { background: color-mix(in srgb, var(--primary), #000 12%); }
.ui-btn.sekundaer { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.ui-btn.leise { background: transparent; color: var(--text-2); border-color: var(--border); }   /* auch leise Knöpfe haben eine Box (Christian 23.10.) */
.ui-btn.gefahr { background: transparent; color: var(--wolke-red, #d83a2c); border-color: currentColor; }
.ui-btn.breit { width: 100%; }
.ui-btn.klein { min-height: 32px; padding: 0 var(--s3); font-size: var(--t-sm); }
.ui-btn[disabled] { opacity: .45; pointer-events: none; }   /* Atlassian: möglichst nie deaktivieren, lieber Fehler zeigen */
.ui-btn .ico { width: 20px; height: 20px; object-fit: contain; }
@media (hover: hover) {
  .ui-btn.primaer:hover { background: color-mix(in srgb, var(--primary), #000 8%); }
  .ui-btn.sekundaer:hover, .ui-btn.leise:hover { background: var(--surface-2); }
}

/* ---- 4 Karte: Fläche + optionaler Statusstreifen; tippbar mit hover/pressed/ausgewählt ---- */
.ui-karte { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-sm);
  padding: var(--s3) var(--s4); position: relative; overflow: hidden; }
.ui-karte.tippbar { cursor: pointer; transition: box-shadow .15s; }
.ui-karte.tippbar:active { box-shadow: var(--sh-md); }
.ui-karte[aria-current="true"] { box-shadow: 0 0 0 2px var(--primary); }   /* Auswahl dauerhaft zeigen (HIG Split View) */
@media (hover: hover) { .ui-karte.tippbar:hover { box-shadow: var(--sh-md); } }
.ui-karte[data-status]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--status, var(--border)); }
.ui-karte[data-status="gebucht"]       { --status: var(--st-gebucht, #1e8c39); }
.ui-karte[data-status="durchgefuehrt"] { --status: var(--st-durchgefuehrt, #e07c08); }
.ui-karte[data-status="angeboten"]     { --status: var(--st-angeboten, #c69500); }
.ui-karte[data-status="abgerechnet"]   { --status: var(--st-abgerechnet, #0086bd); }
.ui-karte[data-ampel="green"] { --status: var(--st-gebucht, #1e8c39); }        /* generische Ampel (Rückmeldungen, Aufgaben): grün = gut */
.ui-karte[data-ampel="amber"] { --status: var(--st-durchgefuehrt, #e07c08); }  /* gelb = wartet auf dich */
.ui-karte[data-ampel="red"]   { --status: var(--wolke-red, #d83a2c); }         /* rot = jetzt */
.ui-karte[data-ampel]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--status, var(--border)); }
.ui-karte.erledigt { opacity: .55; }
.ui-karte .zeile { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.ui-karte .zeile > .wachs { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-karte .meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s1); font-size: var(--t-sm); color: var(--text-2); }

/* ---- 5 Statuspille: Farbe = Bedeutung, immer MIT Wort (Carbon: nie Farbe allein) -------- */
.ui-pille { display: inline-block; padding: 2px var(--s2); border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; color: #fff; background: var(--wolke-gray, #7c8590); white-space: nowrap; }
.ui-pille.gebucht { background: var(--st-gebucht, #1e8c39); }
.ui-pille.handeln { background: var(--st-durchgefuehrt, #e07c08); }
.ui-pille.wartet  { background: var(--st-angeboten, #c69500); }
.ui-pille.erledigt{ background: var(--st-abgerechnet, #0086bd); }

/* ---- 6 Kennzahl: eine Zahl, ein Wort ---------------------------------- */
.ui-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); }
.ui-kennzahl { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-sm); padding: var(--s3); min-height: 44px; }
.ui-kennzahl b { display: block; font-size: var(--t-xl); line-height: 1; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.ui-kennzahl span { font-size: var(--t-xs); color: var(--text-2); }
.ui-kennzahl.handeln b { color: var(--st-durchgefuehrt, #e07c08); }

/* ---- 7 Feld: Label oben, Fehler nennt die Lösung und bleibt IMMER sichtbar --------------- */
.ui-feld { display: block; }
.ui-feld > span { display: block; font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s1); }
.ui-feld input, .ui-feld select, .ui-feld textarea { width: 100%; min-height: var(--ziel); padding: var(--s2) var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  font: var(--t-md) var(--font); }
.ui-feld input:focus-visible, .ui-feld select:focus-visible, .ui-feld textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.ui-feld.fehler input, .ui-feld.fehler select, .ui-feld.fehler textarea { border-color: var(--wolke-red, #d83a2c); }
.ui-feld .hinweis { display: block; margin-top: var(--s1); font-size: var(--t-sm); color: var(--text-2); }   /* nur für Fehler oder wirklich nötige Einzeiler — Erklärungen gehören in 16 Hilfe */
.ui-feld.fehler .hinweis { color: var(--wolke-red, #d83a2c); }
.ui-feld input::placeholder { color: var(--text-3); }
.ui-feld input[type="date"]:not(:focus):not([data-wert])::-webkit-datetime-edit { color: transparent; }   /* kein „tt.mm.jjjj“ im leeren Feld (wolke-ui.js setzt data-wert) */

/* ---- 8 Auswahl-Raster: gleich breite Kacheln, kein Flattersatz -------- */
.ui-wahl { display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: var(--s2); }
.ui-wahl > button { min-height: var(--ziel); padding: var(--s2); border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: var(--t-sm) var(--font); cursor: pointer; }
.ui-wahl > button[aria-pressed="true"] { background: var(--primary-fill, var(--primary)); color: var(--primary-fg); border-color: var(--primary-fill, var(--primary)); font-weight: 600; }
@media (hover: hover) { .ui-wahl > button:not([aria-pressed="true"]):hover { background: var(--surface-2); } }

/* ---- 9 Blatt von unten: Liste, eine Option je Zeile; nur EINES gleichzeitig (HIG) -------- */
.ui-schleier { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; }
.ui-blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--surface-raised);
  border-radius: 12px 0 0 0; box-shadow: var(--sh-lg); padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }   /* Leaf: oben links rund, oben rechts spitz */
.ui-blatt .griff { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto var(--s3); }
.ui-blatt .option { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; padding: 0 var(--s1);
  border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: var(--t-md) var(--font); text-align: left; cursor: pointer; }
.ui-blatt .option:last-child { border-bottom: 0; }
.ui-blatt .option.gefahr { color: var(--wolke-red, #d83a2c); }
.ui-blatt .option.leise { color: var(--text-2); }
.ui-blatt .frage { padding: var(--s2) 0 var(--s3); font-weight: 600; white-space: pre-line; }
.ui-blatt .ui-feld { margin-bottom: var(--s3); }
@media (min-width: 600px) {   /* breit: Blatt wird zentrierter Dialog (Material „bottom sheet → dialog") */
  .ui-blatt { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); border-radius: var(--r); padding-bottom: var(--s4); }
  .ui-blatt .griff { display: none; }
}

/* ---- 10 Rückmeldung: Toast (nur Erfolg/Info, nie Kritisches) + Stand ---- */
.ui-toast { position: fixed; left: var(--s4); right: var(--s4); bottom: calc(var(--nav-h) + var(--s4)); z-index: 30;
  display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s3) var(--s4);
  background: var(--text); color: var(--bg); border-radius: var(--r); box-shadow: var(--sh-lg); font-size: var(--t-sm); }
.ui-toast .ui-btn { min-height: 32px; padding: 0 var(--s2); color: #ffd166; }
@media (min-width: 600px) { .ui-toast { left: auto; right: var(--s5); bottom: var(--s5); max-width: 420px; } }
.ui-stand { font-size: var(--t-xs); color: var(--text-3); }

/* ---- 11 Skeleton statt Leere beim Laden (ab ~300 ms, Lightning) ------- */
.ui-skelett { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); min-height: 14px; }
.ui-skelett::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: ui-schimmer 1.4s infinite; }
@keyframes ui-schimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-skelett::after { animation: none; } }

/* ---- 12 Leerer Zustand: Bild, Satz (beginnt mit Verb), EIN Knopf ------ */
.ui-leer { text-align: center; padding: var(--s6) var(--s4); color: var(--text-2); }
.ui-leer img { width: 72px; height: 72px; margin-bottom: var(--s3); opacity: .9; object-fit: contain; }
.ui-leer .ui-btn { margin-top: var(--s4); }

/* ---- 13 Gerüst: Kopf + Scrollbereich + Navigation auf voller Höhe. Ab 600 px wird die Tableiste
        zur Rail links (Entscheidung V1, 23.10.: Material 3 / Apple HIG). main ist der Container für 14/15. ---- */
.ui-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; block-size: 100dvh; }
.ui-shell > .ui-kopf { grid-row: 1; grid-column: 1; position: static; }
.ui-shell > main { grid-row: 2; grid-column: 1; overflow: auto; overscroll-behavior: contain; container: inhalt / inline-size; }
.ui-shell > .ui-tabs { grid-row: 3; grid-column: 1; position: static; }
.ui-inhalt { container: inhalt / inline-size; }   /* für Seiten ohne Gerüst: Container selbst setzen */
@media (min-width: 600px) {
  .ui-shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ui-shell > .ui-kopf, .ui-shell > main { grid-column: 2; }
  .ui-shell > .ui-tabs { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-start;
    gap: var(--s1); padding: var(--s3) var(--s2); border-top: 0; border-right: 1px solid var(--border); }
  .ui-shell .ui-tab { min-height: 56px; width: 100%; border-radius: var(--r); }
  .ui-shell .ui-tab[aria-current="page"] { background: var(--surface-2); }
}

/* ---- 14 Liste | Detail: schmal EINE Ansicht (data-ansicht="liste" | "detail", Zurück zeigt die Liste),
        ab 48 rem Inhaltsbreite beide nebeneinander (Material List-Detail, HIG Split View) ---- */
.ui-liste-detail { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.ui-liste-detail > .liste { padding: var(--s4); }
.ui-liste-detail > .detail { display: none; padding: var(--s4) var(--s5); }
.ui-liste-detail[data-ansicht="detail"] > .liste { display: none; }
.ui-liste-detail[data-ansicht="detail"] > .detail { display: block; }
.ui-liste-detail .liste .ui-karte + .ui-karte { margin-top: var(--s2); }
.ui-liste-detail .detail > * + * { margin-top: var(--s5); }
@container inhalt (width >= 48rem) {
  .ui-liste-detail { grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); }   /* Liste etwas breiter (Christian 23.10.) */
  /* [data-ansicht] mit aufführen, sonst gewinnt der Handy-Zustand (höhere Spezifität) und versteckt die Liste;
     Spalten fest zuweisen, sonst rutscht das Detail in die schmale Listenspalte */
  .ui-liste-detail > .liste, .ui-liste-detail[data-ansicht] > .liste { display: block; grid-column: 1; border-right: 1px solid var(--border); }
  .ui-liste-detail > .detail, .ui-liste-detail[data-ansicht] > .detail { display: block; grid-column: 2; }
}

/* ---- 15 Formular-Raster (C2, 23.10.): schmal alles gestapelt und voll breit; ab 48 rem Reihen auf
        12 Spalten, Feldbreite nach erwarteter Eingabe (GOV.UK) — alles steht auf Linie (Ruhe im Bild) ---- */
.ui-formular > * + * { margin-top: var(--s3); }
.ui-reihe { display: grid; gap: var(--s3); }
@container inhalt (width >= 48rem) {
  .ui-reihe { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3) var(--s4); align-items: start; }
  .ui-reihe > .ui-feld       { grid-column: span 6; }   /* Standard: halbe Breite (Name, E-Mail) */
  .ui-reihe > .ui-feld.zahl  { grid-column: span 2; }   /* Zahl, kurzes Datum */
  .ui-reihe > .ui-feld.kurz  { grid-column: span 3; }   /* Klasse, PLZ */
  .ui-reihe > .ui-feld.mittel{ grid-column: span 4; }   /* Telefon, Datum, kurze Namen */
  .ui-reihe > .ui-feld.lang  { grid-column: span 6; }
  .ui-reihe > .ui-feld.voll  { grid-column: 1 / -1; }   /* Notiz, Adresse */
}
@container inhalt (width >= 48rem) and (width < 64rem) { .ui-reihe > .ui-feld.zahl { grid-column: span 3; } }   /* mittlere Breite: Zahlfelder etwas breiter, sonst stoßen Labels zusammen */

/* ---- 16 Hilfe hinter i (Entscheidung B, 23.10.): kein Erklärtext dauerhaft im Bild. <details> braucht kein JS
        und geht per Tipp, Maus und Tastatur. Fehler bleiben Inline (7). ---- */
.ui-hilfe { display: inline-block; position: relative; margin-left: 2px; vertical-align: 1px; }
.ui-hilfe > summary { list-style: none; width: 16px; height: 16px; border: 1px solid var(--text-3); border-radius: 50%;
  color: var(--text-3); font: 600 10px/14px var(--font); text-align: center; cursor: pointer; }
.ui-hilfe > summary::-webkit-details-marker { display: none; }
.ui-hilfe > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.ui-hilfe[open] > summary { color: var(--primary); border-color: var(--primary); }
.ui-hilfe > .text { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: max-content; max-width: 36ch;
  padding: var(--s2) var(--s3); background: var(--surface-raised); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--sh-md); font: 400 var(--t-sm)/1.4 var(--font); text-align: left; }
.ui-hilfe.links > .text { left: auto; right: 0; }                       /* gesetzt von wolke-ui.js, wenn es rechts rausragt */
.ui-hilfe.oben  > .text { top: auto; bottom: calc(100% + 4px); }        /* … bzw. unten */

/* ---- 17 Icons (Entscheidung D, 23.10.): EIN Sprite ui-icons/wolke-icons.svg (Phosphor, MIT; gebaut von
        tools/icons_bauen.py). Linie normal, gefüllt im aktiven Zustand. Katalog: ui-icons.html.
        <svg class="ico"><use href="ui-icons/wolke-icons.svg?v=202610240800#fahrten"/><use href="ui-icons/wolke-icons.svg?v=202610240800#fahrten-voll"/></svg> ---- */
svg.ico { width: 24px; height: 24px; display: block; fill: currentColor; flex: none; }
svg.ico use + use { display: none; }                                   /* zweites <use> = gefüllt, nur aktiv */
[aria-current="page"] > svg.ico use:first-child, [aria-pressed="true"] > svg.ico use:first-child, .aktiv > svg.ico use:first-child { display: none; }
[aria-current="page"] > svg.ico use + use, [aria-pressed="true"] > svg.ico use + use, .aktiv > svg.ico use + use { display: inline; }
.ui-btn svg.ico { width: 20px; height: 20px; }
.ui-tab svg.ico { width: 24px; height: 24px; }
.ico.klein { width: 16px; height: 16px; }

/* ---- 18 Speichern-Leiste (Polaris „Unsaved changes“): erscheint nur bei Änderungen, Knöpfe „Speichern“/„Verwerfen“ ---- */
.ui-speichern { position: fixed; left: var(--s4); right: var(--s4); bottom: calc(var(--nav-h) + var(--s4)); z-index: 25;
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s4);
  background: var(--surface-raised); border-radius: var(--r); box-shadow: var(--sh-lg); border: 1px solid var(--border); }
.ui-speichern > span { flex: 1; font-weight: 600; }
@media (min-width: 600px) { .ui-speichern { left: auto; right: var(--s5); bottom: var(--s5); min-width: 360px; } }

/* ---- 19 Ansichten: gespeicherte Filter als Chips im RASTER (gleich breit, mehrere Zeilen, kein Schieben —
        Christian 23.10.: „Sliden am Desktop fühlt sich verkehrt an“; DESIGN-PRINZIPIEN „Ruhe im Bild“) ---- */
.ui-ansichten { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--s2); }
.ui-ansichten > button { min-height: 32px; padding: 0 var(--s2); border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font: 600 var(--t-sm) var(--font); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-ansichten > button[aria-pressed="true"] { background: var(--primary-fill, var(--primary)); color: var(--primary-fg); border-color: var(--primary-fill, var(--primary)); }
.ui-ansichten > button .n { opacity: .7; font-weight: 400; margin-left: 4px; }

/* ---- Helfer: nur schmal / nur breit (bezogen auf den Inhalts-Container, nicht das Fenster) ---- */
@container inhalt (width >= 48rem) { .nur-schmal { display: none !important; } }
@container inhalt (width < 48rem)  { .nur-breit  { display: none !important; } }
.ui-pille.stopp { background: var(--wolke-red, #d83a2c); }   /* rot = jetzt handeln (überfällig) */
.ui-kacheln, .ui-baustellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s2); }   /* 2 je Reihe am Handy, 4 am Desktop */
/* Kachel = zwei Zeilen (Bezeichnung klein, Wert darunter): nichts läuft über, nichts bricht mitten im Namen (Christian 23.10.) */
.ui-kacheln > div, .ui-baustellen > div { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 48px;
  padding: var(--s2) var(--s3); background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--sh-sm); }
.ui-kacheln > div > span, .ui-baustellen > div > span { font-size: var(--t-xs); color: var(--text-3); line-height: 1.2; }
.ui-baustellen > div { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); }
.ui-baustellen > div::before { content: ""; grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.ui-baustellen > div[data-ampel="green"]::before { background: var(--st-gebucht, #1e8c39); }
.ui-baustellen > div[data-ampel="amber"]::before { background: var(--st-durchgefuehrt, #e07c08); }
.ui-baustellen > div[data-ampel="red"]::before   { background: var(--wolke-red, #d83a2c); }
.ui-baustellen > div[data-ampel="na"]            { opacity: .55; }
.ui-baustellen > div > span { grid-column: 2; }
.ui-kacheln > div > b, .ui-baustellen > div > b { font-size: var(--t-sm); font-weight: 600; color: var(--text); overflow-wrap: anywhere; line-height: 1.25; }
.ui-baustellen > div > b { grid-column: 2; }

/* ---- 20 Knopfgruppe: gleich breite Felder im Raster — am Handy untereinander in voller Breite, breit nebeneinander (Ruhe im Bild) ---- */
.ui-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s2); }
.ui-knoepfe > .ui-btn { width: 100%; }