/*
 * woijd-ui 1.5.0 – die gemeinsame Oberfläche der woijd-Familie (Cash, timeTrack, ID, Buddy, Proof).
 *
 * Quelle: ~/woijd-marke/ui/paket/ – in jedem Produkt liegt eine KOPIE dieses Ordners (verteilen.py), nie von Hand
 * ändern. Regeln und Begründungen: woijd-ui-guide.md (IDs wie FAR-01 stehen dort). Werte aus dem woijd Markenbuch
 * und dem woijd Industrial Design Guide 1.1.
 *
 * Aufbau: 1 Token · 2 Grundlage · 3 Rahmen (Kopf, Seitenleiste, Inhalt) · 4 Bausteine · 5 Handy
 * Alle Bausteine beginnen mit „w-“. Farben außerhalb dieser Datei nur über Token (var(--primary) …).
 */
@import url("woijd-konto.css");
@font-face {
  font-family: "Manrope";
  src: url("schrift/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── 1 Token ──────────────────────────────────────────────────────────────
   Hell = Papier, Dunkel = Nachtwald. Ohne data-theme gilt das Betriebssystem (THE-01), data-theme am <html>
   überstimmt es (Umschalter im Kopf, woijd-ui.js). Die dunklen Werte stehen deshalb zweimal – gleich halten. */
:root {
  --woijd-moos: #2e6b4f; --woijd-graphit: #1d1d1f; --woijd-papier: #f5f5f2; --woijd-nachtwald: #121614;
  --woijd-spross: #8cc79a; --woijd-lichtung: #bfe0c4;
  --woijd-blau: #4e8fd6; --woijd-gelb: #e5b53a; --woijd-rot: #e05545;      /* Signalfarben nach EN 60204-1 (SIG) */

  --bg: #f5f5f2; --bg2: #ecece7;
  --surface: #ffffff; --surface2: #f5f5f2; --hover: rgba(46, 107, 79, .06);
  --border: #deded8; --text: #1d1d1f; --text-dim: #5e5e5a;
  --primary: #2e6b4f; --primary-h: #24563f; --on-primary: #ffffff;
  --success: #2e6b4f; --warning: #a8781a; --danger: #c2412f; --info: #2f6fb5;
  --shadow: rgba(29, 29, 31, .08);
  --hbg: #1d1d1f; --htx: #f5f5f2;                                           /* Kopf: Graphit wie ein Gerätesockel */

  --radius: 8px; --radius-karte: 12px; --radius-blatt: 16px;
  --kopf-h: 56px; --nav-b: 238px;
  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121614; --bg2: #0e1311;
    --surface: #18201c; --surface2: #1d2622; --hover: rgba(140, 199, 154, .07);
    --border: #2a332e; --text: #f2f2ee; --text-dim: #a3aba6;
    --primary: #8cc79a; --primary-h: #a3d4ad; --on-primary: #121614;
    --success: #8cc79a; --warning: #e5b53a; --danger: #e05545; --info: #7fb0e6;
    --shadow: rgba(0, 0, 0, .4);
    --hbg: #0c0f0d; --htx: #f2f2ee;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121614; --bg2: #0e1311;
  --surface: #18201c; --surface2: #1d2622; --hover: rgba(140, 199, 154, .07);
  --border: #2a332e; --text: #f2f2ee; --text-dim: #a3aba6;
  --primary: #8cc79a; --primary-h: #a3d4ad; --on-primary: #121614;
  --success: #8cc79a; --warning: #e5b53a; --danger: #e05545; --info: #7fb0e6;
  --shadow: rgba(0, 0, 0, .4);
  --hbg: #0c0f0d; --htx: #f2f2ee;
  color-scheme: dark;
}

/* ── 2 Grundlage ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
body.w { overflow-x: clip; overscroll-behavior-x: none; }   /* nichts schiebt sich seitlich (MOB-01) */
body.w {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift); font-size: 15px; line-height: 1.5; letter-spacing: -.003em;
  font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased;
}
.w button, .w input, .w select, .w textarea { font-family: inherit; }
.w a { color: var(--primary); text-underline-offset: 3px; }
.w h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.w h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.w :focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.w-leise { color: var(--text-dim); }
.w-klein { font-size: 13px; }
.w-zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Beschriftung in Versalien mit Sperrung (ZEI) – für Gruppen, Tabellenköpfe, Kartentitel */
.w-etikett { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

/* Wortmarke: zwei Bilder, die Regel zeigt das passende (hell/dunkel folgt den Token oben) */
.w-wortmarke { display: inline-flex; align-items: center; }
.w-wortmarke img { height: 30px; width: auto; display: block; }
.w-wortmarke .dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .w-wortmarke .hell { display: none; }
  :root:not([data-theme="light"]) .w-wortmarke .dunkel { display: block; }
}
:root[data-theme="dark"] .w-wortmarke .hell { display: none; }
:root[data-theme="dark"] .w-wortmarke .dunkel { display: block; }

/* ── 3 Rahmen ─────────────────────────────────────────────────────────── */
/* Kopf (RAH-01): Graphit, 56 px, links Wortmarke des Produkts, rechts Werkzeuge. Keine Schatten, eine Haarlinie. */
.w-kopf {
  position: sticky; top: 0; z-index: 100; height: var(--kopf-h); padding: 0 20px; flex: none;
  display: flex; align-items: center; gap: 14px;
  background: var(--hbg); color: var(--htx); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.w-kopf-marke { display: flex; align-items: center; flex: none; text-decoration: none; }
.w-kopf-marke img { height: 22px; width: auto; display: block; }
.w-kopf-titel { font-size: 14px; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-luecke { flex: 1; min-width: 0; }
.w-pille {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; flex: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--htx);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.w-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: none; }
.w-punkt.bereit { background: var(--woijd-spross); }          /* ruhig, nie blinkend (SIG-02) */
.w-punkt.dran { background: var(--woijd-blau); }
.w-punkt.achtung { background: var(--woijd-gelb); }
.w-punkt.stopp { background: var(--woijd-rot); }
.w-rund {
  height: 36px; min-width: 36px; padding: 0 10px; border-radius: 20px; flex: none; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--htx);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.w a.w-rund { color: var(--htx); }
.w-rund:hover { background: rgba(255, 255, 255, .16); }
.w-rund svg { width: 16px; height: 16px; }
.w-kopf select {
  height: 36px; border-radius: 20px; padding: 0 12px; cursor: pointer; max-width: 46vw;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--htx); font-size: 13px; font-weight: 600;
}
.w-kopf select { min-width: 0; flex: 0 1 auto; }
.w-kopf select option { color: var(--text); background: var(--surface); }
.w-burger { display: none; }
/* Sonne im dunklen, Mond im hellen Zustand – gezeigt wird, wohin der Knopf führt */
.w-thema .sonne { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .w-thema .sonne { display: block; }
  :root:not([data-theme="light"]) .w-thema .mond { display: none; }
}
:root[data-theme="dark"] .w-thema .sonne { display: block; }
:root[data-theme="dark"] .w-thema .mond { display: none; }

/* Konto oben rechts (Profilbild, Kacheln der woijd-Werkzeuge): eigene Datei woijd-konto.css, hier oben eingebunden */

/* Rumpf = Seitenleiste + Inhalt (NAV-01). Die Seitenleiste führt durch das Produkt, Reiter nur innerhalb einer Seite. */
.w-rumpf { display: flex; min-height: calc(100vh - var(--kopf-h)); min-height: calc(100dvh - var(--kopf-h)); }
.w-nav {
  width: var(--nav-b); flex: 0 0 var(--nav-b); padding: 4px 10px 12px;
  position: sticky; top: var(--kopf-h); align-self: flex-start;
  height: calc(100vh - var(--kopf-h)); height: calc(100dvh - var(--kopf-h)); overflow-y: auto; scrollbar-width: thin;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.w-nav-gruppe { padding: 14px 8px 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-nav a, .w-nav button.w-nav-punkt {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 9px; margin: 1px 0; width: 100%;
  border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer;
  font-size: 13.5px; font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap;
}
.w-nav a:hover, .w-nav button.w-nav-punkt:hover { background: var(--hover); }
.w-nav a[aria-current="page"], .w-nav a.an, .w-nav button.w-nav-punkt.an, .w-nav button.w-nav-punkt[aria-current="page"] { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; }
.w-nav svg { width: 18px; height: 18px; flex: none; color: var(--text-dim); }
.w-nav a[aria-current="page"] svg, .w-nav .an svg { color: var(--primary); }
.w-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.w-nav-fuss { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.w-schleier { display: none; }

.w-inhalt { flex: 1; min-width: 0; padding: 28px 24px 90px; }
.w-inhalt.schmal { max-width: 1088px; }
.w-seitenkopf { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.w-seitenkopf h1 { margin: 0; }
.w-seitenkopf p { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; flex-basis: 100%; }
/* Detail = eigene Ansicht (ANS-01): „‹ Liste“ + Titel, Liste und Reiter sind dann weg */
.w-zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 0 8px;
  color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.w a.w-zurueck { color: var(--text-dim); }
.w-zurueck:hover, .w a.w-zurueck:hover { color: var(--primary); }
.w-zurueck svg { width: 16px; height: 16px; }

/* Seiten ohne Anmeldung (Anmelden, Zustimmen, Einladung): eine Karte mittig auf Papier, kein Kopf (RAH-04) */
.w-mitte { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.w-anmeldung { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; padding: 34px 32px 30px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-blatt);
  box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 24px 60px var(--shadow); }
.w-anmeldung .w-wortmarke { margin-bottom: 6px; }
.w-anmeldung p { margin: 0; }
/* Anmeldekarte (ANM-01): Wortmarke, ein Satz, EIN Knopf über die ganze Breite, darunter klein die Nebenwege */
.w-anmeldung form { display: flex; flex-direction: column; gap: 14px; }
.w-anmeldung > .w-knopf, .w-anmeldung form > .w-knopf { width: 100%; min-height: 48px; font-size: 15.5px; }
.w-anmeldung h1 { margin: 0; font-size: 20px; }
.w-anmeldung .w-hinweis:empty { display: none; }

/* ── 4 Bausteine ──────────────────────────────────────────────────────── */
/* Knöpfe (KNO): neutral mit Haarlinie; je Ansicht genau EIN .haupt in Moos (FAR-02). 44 px, an Kasse/Terminal .gross 48 px. */
.w-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s;
}
.w a.w-knopf { color: var(--text); }
.w-knopf:hover { background: var(--hover); }
.w-knopf.haupt, .w a.w-knopf.haupt { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.w-knopf.haupt:hover { background: var(--primary-h); border-color: var(--primary-h); }
.w-knopf.rand, .w a.w-knopf.rand { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); color: var(--primary); }
.w-knopf.gefahr, .w a.w-knopf.gefahr { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }
.w-knopf.gefahr.haupt { background: var(--danger); border-color: var(--danger); color: #fff; }
.w-knopf.gross { min-height: 48px; padding: 0 24px; font-size: 16px; border-radius: 10px; }
.w-knopf.voll { width: 100%; }
.w-knopf.klein { min-height: 36px; padding: 0 12px; font-size: 13px; }   /* nur in Listenzeilen, die selbst 44 px hoch sind (KNO-04) */
.w-knopf:disabled, .w-knopf[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
.w-knopf svg { width: 16px; height: 16px; flex: none; }
.w-symbol { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text);
  font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.w-symbol:hover { background: var(--hover); }
.w-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.w-reihe > .w-eingabe { flex: 1 1 180px; width: auto; }

/* Zeile einer Liste: links Name und Nebentext, rechts Zustand oder ein kleiner Knopf */
.w-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--border); }
.w-zeile:first-child { border-top: 0; }
.w-zeile > :first-child { min-width: 0; overflow-wrap: anywhere; }
.w-zeile .rechts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: none; }

/* Karte: Haarlinie statt Schatten */
.w-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-karte); padding: 18px 20px; }
.w-karte > h2, .w-karte > h3 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.w-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.w-stapel { display: flex; flex-direction: column; gap: 16px; }

/* Reiter (NAV-03): linksbündig, aktive mit Lichtkante in Moos; .klein = Unterreiter */
.w-reiter { display: flex; align-items: stretch; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.w-reiter::-webkit-scrollbar { display: none; }
.w-reiter a, .w-reiter button {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; flex: none;
  border: 0; background: none; color: var(--text-dim); font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  border-radius: 6px 6px 0 0;
}
/* Nur mit echtem Zeiger: am Handy bleibt :hover nach dem Tippen an der Stelle des Fingers haften – rutscht die
 * Leiste danach weiter, lag die Hervorhebung auf dem Nachbarreiter. */
@media (hover: hover) { .w-reiter a:hover, .w-reiter button:hover { color: var(--text); background: var(--hover); } }
.w-reiter [aria-current="page"], .w-reiter [aria-selected="true"] { color: var(--text); font-weight: 700; }
.w-reiter [aria-current="page"]::after, .w-reiter [aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary);
}
.w-reiter.klein a, .w-reiter.klein button { min-height: 44px; font-size: 14px; padding: 0 12px; }

/* Felder */
.w-feld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.w-feld .hilfe { font-weight: 500; color: var(--text-dim); font-size: 12.5px; }
.w-feld input, .w-feld select, .w-feld textarea, input.w-eingabe, select.w-eingabe, textarea.w-eingabe {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text);
  font-size: 15px; font-weight: 500;
}
.w-feld textarea, textarea.w-eingabe { padding: 10px 12px; min-height: 96px; resize: vertical; line-height: 1.45; }
.w-feld input:focus, .w-feld select:focus, .w-feld textarea:focus, .w-eingabe:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 0; border-color: var(--primary);
}
.w-feld input::placeholder, .w-eingabe::placeholder { color: color-mix(in srgb, var(--text-dim) 75%, transparent); }
.w-eingabe.klein, .w-feld select.klein { min-height: 36px; padding: 0 8px; font-size: 13px; width: auto; }
.w-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.w-schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.w-schalter input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }

/* Formular in Abschnitten (FOR-01): links Nummer, Titel, Erklärung – rechts die Felder. Speichern-Leiste klebt unten. */
.w-formular { max-width: 1040px; border: 1px solid var(--border); border-radius: var(--radius-karte); background: var(--surface); }
.w-formular + .w-formular { margin-top: 18px; }
.w-abschnitt { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: 16px 40px; padding: 26px 28px; }
.w-abschnitt + .w-abschnitt { border-top: 1px solid var(--border); }
.w-abschnitt-kopf { display: flex; flex-direction: column; gap: 6px; }
.w-abschnitt-kopf .nr { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.w-abschnitt-kopf .nr::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--woijd-spross); margin-right: 8px; vertical-align: 1px; }
.w-abschnitt-kopf h3 { margin: 0; font-size: 16px; font-weight: 700; }
.w-abschnitt-kopf p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.w-abschnitt-rumpf { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.w-aktionen { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 1040px;
  margin-top: 16px; padding: 12px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.w-aktionen .w-knopf { min-height: 48px; padding: 0 24px; border-radius: 10px; }

/* Tabelle (TAB): immer feste Spalten, Kopf als Beschriftung, Zahlen in Tabellenziffern */
.w-tabelle { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.w-tabelle th, .w-tabelle td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-tabelle th { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.w-tabelle td.w-zahl, .w-tabelle th.w-zahl { text-align: right; }
.w-tabelle tr.klickbar { cursor: pointer; }
.w-tabelle tr.klickbar:hover td { background: var(--hover); }
.w-tabelle.umbruch td, .w-tabelle.umbruch th { white-space: normal; }
.w-tabelle-rahmen { border: 1px solid var(--border); border-radius: var(--radius-karte); background: var(--surface); overflow: hidden; }
.w-tabelle-rahmen .w-tabelle tr:last-child td { border-bottom: 0; }
.w-tabelle-rahmen .w-tabelle th:first-child, .w-tabelle-rahmen .w-tabelle td:first-child { padding-left: 18px; }
.w-tabelle-rahmen .w-tabelle th:last-child, .w-tabelle-rahmen .w-tabelle td:last-child { padding-right: 18px; }

/* Zustandsmarke und Hinweis – Farben wie am Leuchtband (SIG): Spross läuft/bereit, Blau du bist dran, Gelb Achtung, Rot Stopp */
.w-marke { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.w-marke.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.w-marke.dran { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.w-marke.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.w-marke.fehler { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.w-hinweis { margin: 0; padding: 10px 14px; border-radius: var(--radius); font-size: 14px;
  background: color-mix(in srgb, var(--info) 10%, transparent); border-left: 3px solid var(--info); }
.w-hinweis.ok { background: color-mix(in srgb, var(--success) 10%, transparent); border-left-color: var(--success); }
.w-hinweis.warn { background: color-mix(in srgb, var(--warning) 12%, transparent); border-left-color: var(--warning); }
.w-hinweis.fehler { background: color-mix(in srgb, var(--danger) 10%, transparent); border-left-color: var(--danger); }
.w-fehler { color: var(--danger); }

/* Vier Zustände je Ansicht (ZUS-01): lädt · leer · Fehler · Inhalt. Beim Neuladen bleibt Altes gedämpft stehen (ZUS-02). */
.w-leer, .w-laedt { padding: 36px 16px; text-align: center; color: var(--text-dim); font-size: 14px; }
.w-laedt::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: w-dreh .8s linear infinite; }
@keyframes w-dreh { to { transform: rotate(360deg); } }
.w-frischt { opacity: .55; pointer-events: none; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .w-laedt::before { animation: none; } }

/* Kennzahlen */
.w-kennzahlen { display: flex; gap: 28px; flex-wrap: wrap; }
.w-kennzahlen > div { display: flex; flex-direction: column; gap: 2px; }
.w-kennzahlen b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.w-kennzahlen span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

/* Blatt (Dialog) – statt Browser-Dialogen; für kurze Fragen und Eingaben, nie für Akten (ANS-03) */
.w-blatt { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.w-blatt-innen { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-blatt); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.w-blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.w-blatt-kopf b { font-size: 17px; font-weight: 700; }

.w-code { font-family: var(--mono); font-size: 13px; word-break: break-all; background: var(--bg2); padding: 8px 10px; border-radius: var(--radius); }

/* ── 5 Handy ──────────────────────────────────────────────────────────── */
.w-nur-handy { display: none; }
@media (max-width: 900px) {
  .w-nur-handy { display: inline-flex; }
  .w-burger { display: inline-flex; }
  .w-kopf { padding: 0 12px; gap: 10px; }
  .w-kopf-marke img { height: 19px; }
  .w-pille .w-text, .w-kopf-titel { display: none; }
  .w-nav {
    position: fixed; left: 0; top: var(--kopf-h); z-index: 450; width: 272px; flex-basis: 272px;
    transform: translateX(-105%); transition: transform .2s ease;
  }
  .w-nav.offen { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .3); }
  .w-nav a, .w-nav button.w-nav-punkt { min-height: 44px; }
  .w-schleier.an { display: block; position: fixed; inset: var(--kopf-h) 0 0 0; background: rgba(0, 0, 0, .35); z-index: 440; }
  .w-inhalt { padding: 18px 16px 90px; }
  .w-abschnitt { grid-template-columns: 1fr; padding: 20px 18px; gap: 14px; }
  .w-anmeldung { padding: 28px 22px 24px; }
  .w-mitte { padding: 16px; }
}
/* Am Finger 16 px in jedem Feld – darunter zoomt iOS beim Antippen hinein (MOB-02) */
@media (pointer: coarse) {
  .w-feld input, .w-feld select, .w-feld textarea, input.w-eingabe, select.w-eingabe, textarea.w-eingabe, .w textarea, .w input[type="text"], .w input[type="search"], .w input[type="email"], .w input[type="password"], .w input[type="number"], .w input[type="tel"] { font-size: 16px; }
}
@media (max-width: 420px) {
  .w-kopf { gap: 8px; padding: 0 10px; }
  .w-kopf-marke img { height: 17px; }
  .w-kopf select { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .w-nav { transition: none; } }