/* =============================================================
   design.css · ein Guss für alle Seiten (Designrunde, Nov 2026)
   Wird auf jeder Seite NACH theme.css und system.css geladen und
   ist die einzige Quelle für Farben, Schrift, Formen und Bauteile.
   Entscheidungen von Florian:
   - Schrift: Plus Jakarta Sans überall, Zahlen mit Tabellenziffern
   - Form: Karten 12, Buttons 8, Filter als Pille; Buttons 40 hoch
   - Raumfarbe dezent: aktiver Reiter, Primärbutton, Punkt vor
     Kartenköpfen, dünner Streifen an Karten, leiser Farbschein
   - Reiter und Kartenköpfe in Versalien
   - Schalter und Buttons stehen nebeneinander und brechen nur um,
     wenn kein Platz ist
   Raum wird in design.js gesetzt: html[data-raum=dash|privat|job|
   selbst|unox|marke|kreativ|neutral]
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--font);
  --font-code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --mono:var(--font);                          /* Zahlen: gleiche Schrift, Tabellenziffern */

  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --h-btn:40px; --h-btn-s:32px; --h-pill:36px; --h-pill-s:30px;
  --gap:12px;

  /* Grund (dunkel) */
  --bg:#050506; --panel:#0E0F12;
  --text-primary:#FAFAFA; --text-secondary:#B8B6B0; --text-tertiary:#8A8882;
  --card:rgba(255,255,255,.045); --hair:rgba(255,255,255,.09); --hair-strong:rgba(255,255,255,.18);

  /* Status: immer mit Symbol und Text, nie nur Farbe */
  --success:#4FD69C; --warning:#F2C063; --danger:#FF6B6B; --info:#8FA3BA;

  /* Raumfarben: c = Fläche, on = Schrift auf Fläche, ink = Schrift und Linien auf dem Grund */
  --c-dash:#2F6FD6;    --on-dash:#FFFFFF;    --ink-dash:#6FA0F0;
  --c-privat:#B5D44B;  --on-privat:#141C06;  --ink-privat:#B5D44B;
  --c-job:#FA7D19;     --on-job:#1A0D00;     --ink-job:#FA7D19;
  --c-selbst:#38BDF8;  --on-selbst:#04202D;  --ink-selbst:#38BDF8;
  --c-marke:#E4528F;   --on-marke:#2A0615;   --ink-marke:#F06BA0;
  --c-kreativ:#9D7BFF; --on-kreativ:#120A2E; --ink-kreativ:#B49CFF;
  --c-unox:#2CB8B0;    --on-unox:#04201E;    --ink-unox:#3CD0C7;
  --c-neutral:#E6E8EB; --on-neutral:#0B0C0E; --ink-neutral:#E6E8EB;

  --ci:#0e3975; --ci-text:var(--ink-dash);
}
html[data-theme="light"]{
  --bg:#F5F6F4; --panel:#FFFFFF;
  --text-primary:#16181B; --text-secondary:#3F454C; --text-tertiary:#5F666E;
  --card:#FFFFFF; --hair:rgba(0,0,0,.11); --hair-strong:rgba(0,0,0,.24);
  --success:#0F7A45; --warning:#7A5200; --danger:#B3261E; --info:#455A73;
  --c-dash:#0e3975;    --on-dash:#FFFFFF;    --ink-dash:#0e3975;
  --ink-privat:#556B00; --ink-job:#B04A00; --ink-selbst:#036AA3;
  --ink-marke:#B01F5C; --ink-kreativ:#5B3FD1; --ink-unox:#0A7973;
  --c-neutral:#1F2428; --on-neutral:#FFFFFF; --ink-neutral:#1F2428;
  --ci-text:#0e3975;
}

/* aktive Raumfarbe */
html{--a:var(--c-dash);--a-on:var(--on-dash);--a-ink:var(--ink-dash)}
html[data-raum="privat"] {--a:var(--c-privat); --a-on:var(--on-privat); --a-ink:var(--ink-privat)}
html[data-raum="job"]    {--a:var(--c-job);    --a-on:var(--on-job);    --a-ink:var(--ink-job)}
html[data-raum="selbst"] {--a:var(--c-selbst); --a-on:var(--on-selbst); --a-ink:var(--ink-selbst)}
html[data-raum="unox"]   {--a:var(--c-unox);   --a-on:var(--on-unox);   --a-ink:var(--ink-unox)}
html[data-raum="marke"]  {--a:var(--c-marke);  --a-on:var(--on-marke);  --a-ink:var(--ink-marke)}
html[data-raum="kreativ"]{--a:var(--c-kreativ);--a-on:var(--on-kreativ);--a-ink:var(--ink-kreativ)}
html[data-raum="neutral"]{--a:var(--c-neutral);--a-on:var(--on-neutral);--a-ink:var(--ink-neutral)}
html{
  --a-soft:color-mix(in srgb,var(--a) 16%,transparent);
  --a-line:color-mix(in srgb,var(--a) 55%,transparent);
  --a-glow:color-mix(in srgb,var(--a) 9%,transparent);
  --ok-soft:color-mix(in srgb,var(--success) 14%,transparent);
  --warn-soft:color-mix(in srgb,var(--warning) 14%,transparent);
  --err-soft:color-mix(in srgb,var(--danger) 14%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 14%,transparent);
}

/* ---------- 2. Schrift ---------- */
html body{font-family:var(--font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
button,input,select,textarea{font-family:inherit;font-variant-numeric:inherit}
code,kbd,pre,samp{font-family:var(--font-code)}
.mono{font-family:inherit;font-variant-numeric:tabular-nums}
.eyebrow,.sub{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}

/* ---------- 3. Hintergrund: ruhig, ein leiser Schein in der Raumfarbe ---------- */
html:root body::before{
  animation:none !important;filter:none !important;inset:0 !important;
  background:radial-gradient(900px 420px at 80% -8%,var(--a-glow),transparent 70%) !important;
  opacity:1 !important;
}

/* ---------- 4. Karten ---------- */
html:root .card,html:root .preview{border-radius:var(--r-card)}
html:root .card{background:var(--card);border:1px solid var(--hair);box-shadow:inset 0 2px 0 var(--a-line)}
html:root .card .card{box-shadow:none}
html[data-theme="light"] .card{background:#FFFFFF;border:1px solid var(--hair)}
html:root .card>.eyebrow:first-child::before,html:root .card summary>.eyebrow::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a);margin-right:8px;vertical-align:1px}

/* ---------- 5. Buttons ---------- */
/* Primär: Raumfarbe als Fläche */
html:root .btn,html:root .rpbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--h-btn);padding:0 18px;border-radius:var(--r-btn);border:1px solid transparent;
  background:var(--a);color:var(--a-on);font:700 var(--fs-md)/1 var(--font);
  white-space:nowrap;cursor:pointer;text-decoration:none;box-shadow:none;transition:filter .12s,transform .08s}
html:root .btn:hover,html:root .rpbtn:hover{filter:brightness(1.08)}
html:root .btn:active,html:root .rpbtn:active{transform:scale(.98)}
html:root .btn svg{width:18px;height:18px;flex:none}
html:root .btn.small,html:root .btn.klein{min-height:var(--h-btn-s);padding:0 12px;font-size:var(--fs-sm)}
html:root .btn[disabled],html:root .btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
/* Sekundär: Kontur */
html:root .btn.ghost,html:root .tsb,html:root .bz .x,html:root .nxnav .nxtheme,html:root .rpbtn{
  background:transparent;color:var(--text-primary);border:1px solid var(--hair-strong)}
html:root .btn.ghost:hover,html:root .tsb:hover,html:root .bz .x:hover,html:root .rpbtn:hover{background:var(--a-soft);filter:none}
html:root .tsb,html:root .bz .x{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-btn-s);padding:0 12px;
  border-radius:var(--r-btn);font:600 var(--fs-sm)/1 var(--font);cursor:pointer;white-space:nowrap}
html:root .rpbtn{font-weight:700;border-color:var(--a-line);background:var(--a-soft)}
html:root .tsb.on,html:root .tsb[aria-pressed="true"],html:root .bz .x[aria-pressed="true"],html:root .bz .x.on{
  background:var(--a-soft);border-color:var(--a-line);color:var(--a-ink)}
/* Status-Buttons: Kontur in Statusfarbe */
html:root .btn.ok,html:root .bz .x.go{background:var(--ok-soft);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 45%,transparent)}
html:root .btn.warnb{background:var(--warn-soft);color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 45%,transparent)}
html:root .btn.danger,html:root .btn.crit{background:var(--err-soft);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent)}
html:root .btn.ok:hover,html:root .bz .x.go:hover,html:root .btn.warnb:hover,html:root .btn.danger:hover{filter:brightness(1.12)}
/* Buttons stehen nebeneinander und brechen nur um, wenn kein Platz ist */
.actions,.act,.ctl,.btnrow,.bar,.zl-foot,.zl-act,.tract,.pmact,.plact,.trfoot,.zl-fa{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html:root .actions .btn{flex:0 1 auto}

/* ---------- 6. Filter, Schalter, Chips: eine Pille ---------- */
html:root .seg button,html:root .chip,html:root .kind,html:root .zl .zl-chips button,html:root .nxsub a,html:root .stamm .chip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-pill);padding:0 14px;
  border-radius:var(--r-pill);border:1px solid var(--hair-strong);background:transparent;color:var(--text-secondary);
  font:600 var(--fs-sm)/1 var(--font);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;text-decoration:none;
  box-shadow:none}
html:root .seg.small button,html:root .zl .zl-chips button,html:root .chips .chip{min-height:var(--h-pill-s);padding:0 12px;font-size:var(--fs-xs)}
html:root .seg button:hover,html:root .chip:hover,html:root .kind:hover,html:root .zl .zl-chips button:hover,html:root .nxsub a:hover{background:var(--a-soft);color:var(--text-primary)}
html:root .seg button[aria-pressed="true"],html:root .seg button[aria-selected="true"],html:root .seg button.on,
html:root .chip.on,html:root .chip[aria-pressed="true"],html:root .kind.on,
html:root .zl .zl-chips button[aria-pressed="true"],html:root .nxsub a.on,html:root .viz .seg button[aria-pressed="true"]{
  background:var(--a-soft);border-color:var(--a-line);color:var(--a-ink);font-weight:700}
html:root .kind.on{background:color-mix(in srgb,var(--kindc,var(--a)) 18%,transparent);border-color:color-mix(in srgb,var(--kindc,var(--a)) 60%,transparent);color:var(--kindc,var(--a-ink))}
html:root #sub .chip.on{background:color-mix(in srgb,var(--chipc,var(--a)) 18%,transparent);border-color:color-mix(in srgb,var(--chipc,var(--a)) 60%,transparent);color:var(--chipc,var(--a-ink))}
html:root .seg .n,html:root .seg button .n{opacity:.7;margin-left:4px;font-family:inherit}
/* Gruppen von Schaltern: eine Zeile, feine Trennlinie zwischen den Gruppen */
.seg,.zl-chips,.nxsub{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.zl-bar,.fbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 10px}
.zl-bar>.zl-chips,.fbar>.seg{margin:0}
.zl-bar>.zl-chips+.zl-chips,.fbar>.seg+.seg{padding-left:14px;border-left:1px solid var(--hair)}
.nxsub{margin:10px auto 12px}

/* ---------- 7. Navigation ---------- */
.nxnav{position:sticky;top:0;z-index:60;display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:max(8px,env(safe-area-inset-top)) 0 8px;background:var(--bg);border-bottom:1px solid var(--hair);font-family:var(--font)}
.nxnav a[data-tab]{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-btn);padding:0 14px;
  border-radius:var(--r-btn);background:var(--card);border:1px solid var(--hair);color:var(--text-secondary);text-decoration:none;
  font-size:var(--fs-sm);font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;transition:background .15s,color .15s}
.nxnav a[data-tab]:hover{color:var(--text-primary);background:var(--a-soft)}
.nxnav a[data-tab].on{background:var(--a);color:var(--a-on);border-color:transparent}
.nxnav .nxspacer{flex:1 1 auto;min-width:8px}
/* Entscheidung: Hauptleiste wirklich fest, aber nur so breit wie ihr Inhalt (schwebende Leiste, kein Streifen ueber die volle Breite).
   Die Unterleiste (.nxsub) ist nicht fest und scrollt mit. html:root schlaegt die Hellmodus-Regeln aus theme.css. */
html:root .nxnav{top:max(8px,env(safe-area-inset-top));margin-top:max(8px,env(safe-area-inset-top));width:fit-content;max-width:100%;
  flex-wrap:nowrap;padding:6px;border:1px solid var(--hair-strong);border-bottom-color:var(--hair-strong);border-radius:calc(var(--r-btn) + 8px);
  background:var(--panel);box-shadow:0 8px 28px rgba(0,0,0,.28)}
html[data-theme="light"]:root .nxnav{box-shadow:0 8px 24px rgba(0,0,0,.12)}
/* Kopfband in der Akzentfarbe des Bereichs: der Streifen ueber der schwebenden Leiste (inkl. Statusleiste am iPhone). */
html.nx-head::before{content:'';position:fixed;left:0;right:0;top:0;z-index:59;pointer-events:none;
  height:calc(max(8px,env(safe-area-inset-top)) + 6px);background:var(--a);box-shadow:0 1px 0 rgba(0,0,0,.12)}
@media print{html.nx-head::before{display:none}}
html:root .nxnav .nxspacer{min-width:20px}
.nxtools{display:flex;gap:6px;align-items:center;flex:none}
.nxnav .nxtheme{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-btn);padding:0 12px;border-radius:var(--r-btn);
  background:var(--card);border:1px solid var(--hair);color:var(--text-secondary);font:600 var(--fs-sm)/1 var(--font);cursor:pointer;white-space:nowrap}
.nxnav .nxtheme:hover{color:var(--text-primary);background:var(--a-soft)}
.nxnav .nxsens,.nxnav .nxprof{position:relative;width:var(--h-btn);min-width:var(--h-btn);padding:0}
.nxnav .nxsens svg{width:22px;height:22px;display:block}
.nxnav .nxsens .lens{fill:none;transition:fill .15s}
.nxnav .nxsens[data-stand="aus"]{background:var(--c-dash);border-color:transparent;color:#fff}
.nxnav .nxsens[data-stand="aus"] .lens{fill:currentColor}
.nxnav .nxsens[data-stand="teils"]::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:99px;background:var(--warning)}
.nxnav .nxprof{font-size:20px;line-height:1}
.nxnav .nxmono{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:99px;background:var(--c-dash);color:#fff;font-size:13px;font-weight:800;letter-spacing:0}
.nxnav .nxprof[aria-expanded="true"],.nxnav .nxprof.on{background:var(--a-soft);border-color:var(--a-line)}
.nxmenu{position:fixed;z-index:80;min-width:200px;padding:6px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--hair-strong);
  box-shadow:0 18px 50px rgba(0,0,0,.45);font-family:var(--font)}
html[data-theme="light"] .nxmenu{box-shadow:0 18px 50px rgba(0,0,0,.18)}
.nxmenu[hidden]{display:none}
.nxmenu a{display:flex;align-items:center;min-height:var(--h-btn);padding:0 12px;border-radius:var(--r-btn);color:var(--text-primary);text-decoration:none;font-size:var(--fs-md);font-weight:600}
.nxmenu a:hover,.nxmenu a:focus-visible{background:var(--a-soft);outline:none}
.nxmenu a.on{background:var(--a-soft);color:var(--a-ink)}
.nxmenu .nxsep{height:1px;margin:5px 6px;background:var(--hair)}
.nxmenu .nxname{padding:8px 12px 6px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
.nxmenu .nxm-design{display:none}
@media(max-width:480px){
  html:root .nxnav{width:100%;padding:4px}
  .nxnav{gap:3px;flex-wrap:nowrap;overflow:hidden}
  .nxnav a[data-tab]{flex:1 1 0;min-width:0;padding:0 1px;font-size:11.5px;letter-spacing:0;text-transform:none}
  .nxnav .nxspacer{display:none}
  .nxnav .nxtools{gap:3px;margin-left:2px}
  .nxnav .nxmode{display:none}
  .nxnav .nxsens,.nxnav .nxprof{width:36px;min-width:36px;min-height:36px;height:36px}
  .nxmenu .nxm-design{display:flex}
}
@media(max-width:380px){.nxnav a[data-tab]{font-size:10.5px}}
@media(max-width:340px){.nxnav a[data-tab]{font-size:9.5px}}

/* ---------- 8. Hinweise, Status, Toasts: ein Bauteil ---------- */
.hin,.notice,.fehler-box{position:relative}
.toast{background:var(--panel) !important;color:var(--text-primary) !important;border:1px solid var(--hair-strong) !important;
  border-radius:var(--r-btn) !important;padding:10px 16px !important;font:600 var(--fs-sm)/1.3 var(--font) !important;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toast::before{content:"✓";color:var(--success);margin-right:8px;font-weight:800}
.hin.gut,.hin.warn,.hin.fehler,.notice,.notice.fehler{
  padding:10px 12px 10px 14px;border-radius:var(--r-btn);border:1px solid var(--hair);border-left-width:3px;background:var(--card);color:var(--text-primary)}
.hin.gut{border-left-color:var(--success);background:var(--ok-soft)}
.hin.warn{border-left-color:var(--warning);background:var(--warn-soft)}
.hin.fehler,.notice.fehler{border-left-color:var(--danger);background:var(--err-soft)}
.hin.gut::before{content:"✓ ";color:var(--success);font-weight:800}
.hin.warn::before{content:"! ";color:var(--warning);font-weight:800}
.hin.fehler::before,.notice.fehler::before{content:"× ";color:var(--danger);font-weight:800}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);border:1px solid var(--hair-strong);color:var(--text-secondary);white-space:nowrap}
.pill.w{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 50%,transparent);background:var(--warn-soft)}
.pill.g,.pill.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 50%,transparent);background:var(--ok-soft)}
.pill.r,.pill.err{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent);background:var(--err-soft)}
.dot{background:var(--success)} .dot.warn{background:var(--warning)} .dot.crit{background:var(--danger)} .dot.neutral{background:var(--text-tertiary)}

/* ---------- 9. Eingabefelder ---------- */
html:root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html:root select,html:root textarea{
  border-radius:var(--r-btn);border:1px solid var(--hair-strong);background:var(--card);color:var(--text-primary);min-height:var(--h-btn)}
html[data-theme="light"] input:not([type=checkbox]):not([type=radio]),html[data-theme="light"] select,html[data-theme="light"] textarea{background:#FFFFFF}
html:root input:focus,html:root select:focus,html:root textarea:focus{border-color:var(--a-line);outline:none;box-shadow:0 0 0 3px var(--a-soft)}
:focus-visible{outline:2px solid var(--a-ink) !important;outline-offset:2px}
html:root input[type=checkbox],html:root input[type=radio]{accent-color:var(--a)}
::selection{background:var(--a-soft)}

/* Buttons: Text immer mittig, auch bei Links (a.btn) und hoeheren Buttons */
html:root .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
html:root .btn[hidden]{display:none}

/* A) Ein Rahmen pro Gruppe: Hauptleiste = Rahmen nur am Container, Pillen und Knoepfe darin ohne Rand */
html:root .nxnav a[data-tab]:not(.on),
html:root .nxnav .nxtheme:not([data-stand="aus"]):not(.on):not([aria-expanded="true"]){background:transparent;border-color:transparent}
html:root .nxnav a[data-tab]:not(.on):hover,
html:root .nxnav .nxtheme:not([data-stand="aus"]):not(.on):hover{background:var(--a-soft)}
/* B) Filtergruppen (.seg aus auswertung.js): nur Rahmen je Pille, kein Aussenrahmen (wie schon in finanzen.html) */
html:root .viz .seg{display:flex;flex-wrap:wrap;gap:6px;border:0;border-radius:0;overflow:visible}
/* C) Mobil: nichts scheint hinter der schwebenden Leiste durch, Kopfband beruehrt sie nicht */
@media(max-width:480px){
  html.nx-head::after{content:'';position:fixed;left:0;right:0;top:0;z-index:58;pointer-events:none;
    height:calc(max(8px,env(safe-area-inset-top)) + 72px);
    background:linear-gradient(var(--bg) calc(100% - 14px),transparent)}
  html.nx-head::before{height:max(4px,env(safe-area-inset-top))}
}
/* D) Mobil: Reiter nach Textbreite statt gleich breit, damit Kalender und Finanzen den Pillenrand nicht beruehren */
@media(max-width:480px){
  html:root .nxnav a[data-tab]{flex:1 1 auto;padding:0 3px}
}

/* ---------- W8 (c5): Feinschliff Designsystem ---------- */
/* 1) Luft unter der schwebenden Leiste (die Leiste ist sticky und im Fluss: der Abstand schiebt den Inhalt nach unten, verdeckt nichts.
      Folgt die Unterleiste .nxsub (margin-top 10px), fallen beide Raender zusammen, es gibt keinen Doppelabstand.) */
html:root .nxnav{margin-bottom:12px}
/* 2) Ein Rahmen pro Gruppe: Filterpillen (.seg) tragen nur den Rahmen je Pille, kein Container mit Rand, Grund und Innenabstand */
html:root .seg{border:0;padding:0;background:none;border-radius:0;gap:6px;flex-wrap:wrap}
/* Zaehler in der Pille: volle Deckkraft (in Hell sonst nur 3,99:1) */
html:root .seg .n,html:root .seg button .n{opacity:1}
/* 3) Reduzierte Bewegung: keine Animationen und Uebergaenge, kein weiches Scrollen */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* 4) Hell: Schrift auf hellem Grund mit mindestens 4,5:1. html:root[...] schlaegt auch die von profil.js zur Laufzeit eingefuegten Raum-Tokens (gleiche Rangfolge, aber spaeter im Dokument). Dunkel bleibt unveraendert. */
html:root[data-theme="light"]{--ink-job:#9A3F00;--ink-unox:#08655F;--success:#0B6B3C}
/* 5) Seitentitel: h1.title ist in system.css ausgeblendet (sr-only, Selektor mit #greet-Ausnahme).
      Mit der Klasse .show wird er sichtbar. Das :not(#nx-ts) hebt die Rangfolge ueber die id in system.css. */
html:root h1.title.show:not(#nx-ts){position:static;width:auto;height:auto;margin:8px 2px 12px;padding:0;overflow:visible;clip:auto;white-space:normal;border:0;
  display:block;font-size:17px;font-weight:600;letter-spacing:0;color:var(--text-primary);font-family:var(--font)}

/* ---------- 10. Touch ---------- */
@media (pointer: coarse){
  html:root .btn{min-height:44px}
  html:root .btn.small,html:root .tsb,html:root .bz .x{min-height:40px}
  html:root .seg button,html:root .chip,html:root .kind,html:root .zl .zl-chips button,html:root .nxsub a{min-height:40px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* ---------- 11. Anstehende Zahlungen (zahlungen.js) auf Standard ---------- */
html:root .zl .zl-act button,html:root .zl .zl-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-btn-s);padding:0 12px;border-radius:var(--r-btn);
  border:1px solid var(--hair-strong);background:transparent;color:var(--text-primary);font:600 var(--fs-sm)/1 var(--font);cursor:pointer;white-space:nowrap}
html:root .zl .zl-act button:hover,html:root .zl .zl-btn:hover{background:var(--a-soft)}
html:root .zl .zl-act button.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--success) 45%,transparent);color:var(--success)}
html:root .zl .zl-btn.pri{background:var(--a);border-color:transparent;color:var(--a-on);font-weight:700;min-height:var(--h-btn);padding:0 18px}
html:root .zl .zl-act button.link,html:root .zl .zl-btn.link{border-color:transparent;background:transparent;color:var(--text-tertiary);text-decoration:underline}
html:root .zl .zl-act select{border-radius:var(--r-btn);min-height:var(--h-btn-s);border:1px solid var(--hair-strong);background:transparent}
html:root .zl .zl-warn{border-radius:var(--r-btn);border:1px solid var(--hair);border-left:3px solid var(--warning);background:var(--warn-soft)}
html:root .zl .zl-warn::before{content:"! ";color:var(--warning);font-weight:800}
html:root .zl .zl-form{border-radius:var(--r-card)}
html:root .zl .zl-form input,html:root .zl .zl-form select{border-radius:var(--r-btn)}
html:root .zl .zl-t,html:root .zl .zl-form label{letter-spacing:.12em}
html:root .zl .zl-foot,html:root .zl .zl-act{flex-wrap:wrap}

/* ---------- 12. Weitere Standards ---------- */
html:root .note{padding:10px 12px 10px 14px;border-radius:var(--r-btn);border:1px solid var(--hair);border-left:3px solid var(--warning);background:var(--warn-soft);color:var(--text-primary);font-size:var(--fs-sm)}
@media (pointer: fine){ html:root select,html:root input:not([type=checkbox]):not([type=radio]),html:root textarea{font-size:var(--fs-md)} }
html:root select{padding:0 32px 0 12px}
html:root textarea{padding:10px 12px}
html:root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){padding-left:12px;padding-right:12px}
@media(max-width:520px){ .zl-bar>.zl-chips+.zl-chips,.fbar>.seg+.seg{padding-left:0;border-left:0} }
html:root [hidden]{display:none !important}
html:root select,html:root input,html:root textarea{max-width:100%;box-sizing:border-box}