@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("/schrift/archivo-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;
  src:url("/schrift/archivo-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("/schrift/archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("/schrift/archivo-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/schrift/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/schrift/plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("/schrift/plex-mono-600.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("/schrift/source-serif-600.woff2") format("woff2")}


:root{
  /* Grundstimmung: cremiges Papier, Marineblau als Marke */
  --paper:#fffbf5; --surface:#ffffff; --surface-2:#f7f0e6; --surface-3:#fbf6ef;
  --ink:#14213d; --ink-2:#5a6478; --ink-3:#6b7382;
  --line:#ede3d6; --line-2:#f5eee4; --line-feld:#9c8f7a; --platz:#8c93a1;
  --marke:#123a6b; --marke-soft:#dee7f3;
  /* Bereichsfarbe: wird je Reiter gesetzt, siehe unten */
  --sec:#1c6ba0; --sec-soft:#e1ebf3; --sec-tief:#134d76;
  --accent:var(--sec); --accent-ink:#ffffff; --accent-soft:var(--sec-soft); --accent-mid:var(--sec);
  --warn:#9c6108; --warn-soft:#fdf0d5;
  /* Terracotta: die Farbe fuer «was es dich kostet» und fuer alles,
     was man antippen darf. Warm, gedeckt, nie grell. */
  --terra:#b85f32; --terra-ink:#8a5a3c; --terra-soft:#fbead9; --terra-line:#f1d5b8;
  --stop:#c0392b; --stop-soft:#fbe7e3;
  --gut:#15803d; --gut-soft:#e2f2e8;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --r:16px;
  --sp:620px;          /* Breite der Inhaltsspalte */
  --ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Eine Farbe pro Bereich. Nie zwei gleichzeitig auf einem Bildschirm. */
:root[data-tab="kal"]  {--sec:#4d7c0f;--sec-soft:#eaf0dc;--sec-tief:#3a5f0b}
:root[data-tab="erf"]  {--sec:#1c6ba0;--sec-soft:#e1ebf3;--sec-tief:#134d76}
:root[data-tab="mon"]  {--sec:#0f766e;--sec-soft:#dfedeb;--sec-tief:#0b564f}
:root[data-tab="lohn"] {--sec:#b45309;--sec-soft:#f7ead9;--sec-tief:#8a3f07}
:root[data-tab="konto"]{--sec:#7e22ce;--sec-soft:#f0e4f9;--sec-tief:#601a9c}
:root[data-tab="papiere"]{--sec:#9b2c3d;--sec-soft:#f6e4e6;--sec-tief:#78202e}
:root[data-tab="set"]  {--sec:#123a6b;--sec-soft:#dee7f3;--sec-tief:#0c2a4f}
:root[data-tab="vert"] {--sec:#123a6b;--sec-soft:#dee7f3;--sec-tief:#0c2a4f}
/* Hilfe: ein ruhiges Gruen. Nicht Rot - wer hier landet, hat ein Problem,
   und eine Warnfarbe macht es groesser, als es ist. */
:root[data-tab="hilfe"]{--sec:#1f6b4f;--sec-soft:#e0eee8;--sec-tief:#154d39}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17181c; --surface:#202228; --surface-2:#2a2d34; --surface-3:#22252b;
    --ink:#f2f3f5; --ink-2:#a8aeba; --ink-3:#8b92a1;
    --line:#333740; --line-2:#2a2e36; --line-feld:#6b7280; --platz:#6b7280;
    --marke:#7fb0e8; --marke-soft:#1e2a3d;
    --sec:#58b0e8; --sec-soft:#1b2c3a; --sec-tief:#8cc8f0;
    --accent-ink:#0d1620;
    --warn:#e7b45c; --warn-soft:#3a2e16;
  --terra:#e39466; --terra-ink:#e0a882; --terra-soft:#3b2a21; --terra-line:#4d382c;
    --stop:#ee8b7e; --stop-soft:#3b221e;
    --gut:#57c98a; --gut-soft:#1c3327;
  }
}
:root[data-theme="dark"]{
  --paper:#17181c; --surface:#202228; --surface-2:#2a2d34; --surface-3:#22252b;
  --ink:#f2f3f5; --ink-2:#a8aeba; --ink-3:#8b92a1;
  --line:#333740; --line-2:#2a2e36; --line-feld:#6b7280; --platz:#6b7280;
  --marke:#7fb0e8; --marke-soft:#1e2a3d;
  --sec:#58b0e8; --sec-soft:#1b2c3a; --sec-tief:#8cc8f0;
  --accent-ink:#0d1620;
  --warn:#e7b45c; --warn-soft:#3a2e16;
  --terra:#e39466; --terra-ink:#e0a882; --terra-soft:#3b2a21; --terra-line:#4d382c;
  --stop:#ee8b7e; --stop-soft:#3b221e;
  --gut:#57c98a; --gut-soft:#1c3327;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-tab="kal"]  {--sec:#a3c94a;--sec-soft:#232b16;--sec-tief:#bcd97a}
  :root:not([data-theme="light"])[data-tab="erf"]  {--sec:#58b0e8;--sec-soft:#1b2c3a;--sec-tief:#8cc8f0}
  :root:not([data-theme="light"])[data-tab="mon"]  {--sec:#2fb3a6;--sec-soft:#15302d;--sec-tief:#6fd2c8}
  :root:not([data-theme="light"])[data-tab="lohn"] {--sec:#e8a33f;--sec-soft:#352817;--sec-tief:#f2c27a}
  :root:not([data-theme="light"])[data-tab="konto"]{--sec:#b78bf0;--sec-soft:#2a2138;--sec-tief:#cfb2f6}
  :root:not([data-theme="light"])[data-tab="papiere"]{--sec:#e8899a;--sec-soft:#331a1f;--sec-tief:#f2b0bc}
  :root:not([data-theme="light"])[data-tab="hilfe"]{--sec:#6fc2a0;--sec-soft:#17291f;--sec-tief:#9bd9bd}
  :root:not([data-theme="light"])[data-tab="set"]  {--sec:#8fb2e2;--sec-soft:#1e2733;--sec-tief:#b5cdee}
  :root:not([data-theme="light"])[data-tab="vert"] {--sec:#8fb2e2;--sec-soft:#1e2733;--sec-tief:#b5cdee}
}
:root[data-theme="dark"][data-tab="kal"]  {--sec:#a3c94a;--sec-soft:#232b16;--sec-tief:#bcd97a}
:root[data-theme="dark"][data-tab="erf"]  {--sec:#58b0e8;--sec-soft:#1b2c3a;--sec-tief:#8cc8f0}
:root[data-theme="dark"][data-tab="mon"]  {--sec:#2fb3a6;--sec-soft:#15302d;--sec-tief:#6fd2c8}
:root[data-theme="dark"][data-tab="lohn"] {--sec:#e8a33f;--sec-soft:#352817;--sec-tief:#f2c27a}
:root[data-theme="dark"][data-tab="konto"]{--sec:#b78bf0;--sec-soft:#2a2138;--sec-tief:#cfb2f6}
:root[data-theme="dark"][data-tab="papiere"]{--sec:#e8899a;--sec-soft:#331a1f;--sec-tief:#f2b0bc}
:root[data-theme="dark"][data-tab="hilfe"]{--sec:#6fc2a0;--sec-soft:#17291f;--sec-tief:#9bd9bd}
:root[data-theme="dark"][data-tab="set"]  {--sec:#8fb2e2;--sec-soft:#1e2733;--sec-tief:#b5cdee}
:root[data-theme="dark"][data-tab="vert"] {--sec:#8fb2e2;--sec-soft:#1e2733;--sec-tief:#b5cdee}

:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.45;
     -webkit-font-smoothing:antialiased}

/* ---------------- Kopf ---------------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.top-in{max-width:var(--sp);margin:0 auto;padding:12px 18px 10px}
.brand{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.brand .mk{width:17px;height:17px;border:1.2px solid var(--marke);border-radius:4px;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:10.5px;
  color:var(--ink-3);line-height:1;flex:none}
.brand .wm{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.015em;color:var(--marke)}
.brand.big .mk{width:32px;height:32px;border-width:1.5px;border-radius:7px;font-size:20px;color:var(--marke)}
.brand.big .wm{font-size:26px;color:var(--marke)}
.doc .dhd{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.doc .brand{margin-bottom:0;padding-top:3px}
.ttl > div:first-child{flex:1 1 auto;min-width:0}
.ttl{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ttl h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.ttl .sub{font-size:12.5px;color:var(--ink-2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
       padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge.ro{background:var(--warn-soft);color:var(--warn)}

/* Die Personenleiste. Sie erscheint erst, wenn ein Haushalt mehr als eine
   Person hat - bei einem Haushalt mit einer Angestellten waere sie nur eine
   Zeile, die nichts sagt. Jede Person behaelt ihre Farbe ueberall in der App,
   damit man am Punkt erkennt, wessen Monat man gerade ansieht. */
.pbar{display:flex;gap:8px;max-width:var(--sp);margin:0 auto;padding:6px 18px 2px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pbar::-webkit-scrollbar{display:none}
.pbar button{display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:6px 12px 6px 10px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.pbar button .pk{width:9px;height:9px;border-radius:50%;flex:none}
.pbar button.an{color:var(--ink);border-color:var(--ink-2);
  box-shadow:0 1px 0 var(--ink-2) inset,0 -1px 0 var(--ink-2) inset}
.pbar button.neu{font-weight:500}
.pz{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:15px;
  border-bottom:1px solid var(--line)}
.pz .pk{width:10px;height:10px;border-radius:50%;flex:none}
.pz .pnow{margin-left:auto;font-size:12.5px;color:var(--ink-2);font-weight:600}
.pneu{margin-top:13px}
.pz.pweg{opacity:.55}
.pz .pbis{margin-left:auto;font-size:12.5px;color:var(--ink-2)}
.pz .ptun{margin-left:auto;display:flex;gap:12px;flex:none}
.pz .pbis + .ptun{margin-left:12px}
.pz .ptun button{font-size:12.5px}
.paus{padding:10px 0 4px}
.wkbar{display:flex;align-items:center;gap:10px;max-width:var(--sp);margin:0 auto;padding:8px 18px 0}
.wkbar .lb{flex:1;text-align:center;font-weight:700;font-size:13.5px;color:var(--ink-2)}
.wkbar button{width:32px;height:32px;border-radius:9px;background:var(--surface);border:1px solid var(--line);
  font-family:var(--ui);font-size:17px;line-height:1;color:var(--ink);cursor:pointer;flex:none}
.wkbar button:disabled{opacity:.35;cursor:default}
/* Wischspur: drei Wochen nebeneinander, die mittlere ist die aktuelle.
   Daneben bleiben die beiden Pfeile — jede Geste braucht einen Knopf. */
.wk{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none;
  max-width:var(--sp);margin:0 auto;padding:8px 0 12px}
.wk::-webkit-scrollbar{display:none}
.wkpg{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;gap:6px;padding:0 18px}
.wkpg.ab{opacity:.45}
.wkhint{max-width:var(--sp);margin:-6px auto 0;padding:0 18px 10px;display:flex;align-items:center;
  justify-content:center;gap:6px;font-size:10.5px;color:var(--ink-3)}
.mtrack{flex:1;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none}
.mtrack::-webkit-scrollbar{display:none}
.mtrack > *{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;text-align:center}
.mtrack .nb{font-weight:600;font-size:15px;color:var(--ink-3);align-self:center}
.wk button{flex:1;height:60px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  font-family:var(--ui);padding:0}
.wk .dn{font-size:10px;line-height:1;color:var(--ink-3);letter-spacing:.06em}
.wk .dd{font-size:15px;line-height:1;font-weight:700;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.wk .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-mid)}
.wk .sp{height:5px}
.wk button.on{background:var(--accent);border-color:var(--accent)}
.wk button.on .dn{color:var(--accent-soft)}
.wk button.on .dd{color:var(--accent-ink)}
.wk button.on .dot{background:var(--accent-ink)}
.wk button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

[hidden]{display:none !important}
.mbar{display:flex;align-items:center;gap:10px;max-width:var(--sp);margin:0 auto;padding:2px 18px 12px}
.mbar .lb{font-weight:700;font-size:16px;align-self:center}
.mbar button{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:17px;line-height:1;cursor:pointer}
.mbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mbar button:disabled{opacity:.3;cursor:default}

/* ---------------- Inhalt ---------------- */
main{max-width:var(--sp);margin:0 auto;padding:0 18px 56px}
h2{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
   margin:20px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
h2 .as{font-weight:600;letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--ink-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pad{padding:14px 16px}

button.btn{font-family:var(--ui);font-size:15px;font-weight:700;background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:14px;padding:15px 18px;cursor:pointer;width:100%}
button.btn.sm{padding:10px 14px;font-size:13.5px;border-radius:11px;width:auto}
button.btn.gh{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.btn.dk{background:var(--ink);color:var(--paper)}
button.btn.wn{background:var(--warn);color:#fff}
button.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.btn:disabled{opacity:.4;cursor:not-allowed}
/* Ein Knopf, der wie ein Link aussieht. Es gab ihn bisher nur innerhalb der
   Zahlungskarte; seit der Gutscheinliste einen Papierkorb hat, braucht es
   ihn allgemein. */
.lnk{background:none;border:0;padding:2px 0;margin-left:auto;color:var(--ink-3);
  font-family:var(--ui);font-size:12px;cursor:pointer;flex:none;white-space:nowrap}
.lnk:hover{color:var(--ink)}
.lnk.wn{color:var(--warn);font-weight:700}

input,select,textarea{font-family:var(--ui);font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-feld);border-radius:12px;padding:11px 12px;width:100%;min-width:0}
textarea{resize:vertical;line-height:1.5}
input.fehlt,select.fehlt{border-color:var(--stop);background:var(--stop-soft)}
/* Vorschläge sollen nach Vorschlag aussehen, nicht nach Eingabe. */
input::placeholder,textarea::placeholder{color:var(--platz);opacity:1;font-weight:400;
  font-family:var(--ui);font-size:14px;letter-spacing:0}
input:focus::placeholder,textarea:focus::placeholder{opacity:.5}
input[type=time],input[type=date],input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
input:disabled{background:var(--surface-3);color:var(--ink-2);border-style:dashed}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
label.f,.f2{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:700;color:var(--ink-3);
        letter-spacing:.08em;text-transform:uppercase}
/* Ein Wert, den das Gesetz setzt und niemand waehlen kann. Er sieht aus wie
   ein Feld, damit die Zeile in der Reihe nicht aus dem Takt faellt - aber
   ohne Rahmen und ohne Zeiger, damit niemand darauf klickt und wartet. */
.festwert{font-size:15px;font-weight:500;color:var(--ink);text-transform:none;
  letter-spacing:0;padding:11px 0 0;line-height:1.4}

.tt{display:flex;gap:12px}
.tt .fld{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.tt .fld .l{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tt .fld input{border:0;padding:2px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em;background:none;border-radius:0;width:100%;min-width:0}
.tt .fld input:focus{outline:0;color:var(--accent)}
/* Die Zahl ist der Held: gross, ruhig, in der Bereichsfarbe. */
.dur{text-align:center;margin-top:16px}
.dur .vor{font-size:12px;color:var(--ink-2);display:block}
.dur b{display:block;font-family:var(--mono);font-size:38px;line-height:1.12;color:var(--sec);
  font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:1px}
.dur .nach{font-size:13px;color:var(--ink-2);display:block;margin-top:1px;font-variant-numeric:tabular-nums}
.chk2{display:flex;align-items:center;gap:10px;margin-top:13px;padding:11px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--ink);cursor:pointer}
.chk2 input{width:20px;height:20px;flex:none;accent-color:var(--accent);margin:0}
.chips{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:8px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
      color:var(--ink-2);cursor:pointer;font-family:var(--ui)}
.chip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:700}
.note{font-size:12px;color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.45}
/* Ein Hinweis, den man nicht uebersehen darf: linksbuendig, groesser, in der
   Warnfarbe. Zentrierter Kleintext liest sich wie eine Fussnote - und eine
   Fussnote uebersieht man. */
.note.wn{text-align:left;font-size:13px;color:var(--ink);background:var(--warn-soft);
  border:1px solid var(--warn);border-radius:var(--r);padding:11px 13px}
.note.wn b{color:var(--warn)}

.kpis{display:flex;gap:10px}
.kpi{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px}
.kpi .k{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.kpi .v{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .v s{text-decoration:none;font-size:10.5px;color:var(--ink-3);font-weight:400;margin-left:3px}
/* DIE ERSTE ZAHL IST DIE WICHTIGSTE UND TRAEGT DIE BEREICHSFARBE.
   ================================================================
   Das galt seit JR nur in der rechten Randspalte, also erst ab 1200
   Punkten - am Telefon standen alle drei Kacheln gleich hell da, und die
   Farbe des Bereichs kam im Bild gar nicht vor. Jetzt steht die Regel an
   EINER Stelle und gilt fuer jede Breite; `--sec` ist die Farbe des
   Reiters, im Monat gruen, im Lohnblatt orange - sie sagt also zugleich,
   wo man ist (24. Oktober 2026). */
.kpis .kpi:first-child{background:var(--sec);border-color:var(--sec)}
.kpis .kpi:first-child .k{color:#fff;opacity:.82}
.kpis .kpi:first-child .v{color:#fff}
.kpis .kpi:first-child .v s{color:#fff;opacity:.72}

.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border:0;border-top:1px solid var(--line-2);
     background:none;width:100%;text-align:left;font-family:var(--ui);color:var(--ink)}
.row:first-child{border-top:0}
button.row{cursor:pointer}
button.row:hover{background:var(--surface-3)}
.row .dt{font-family:var(--mono);font-size:12px;color:var(--ink-3);width:50px;flex:none;font-variant-numeric:tabular-nums}
/* Marco: «Siehst du dort, dass die Textfelder ineinander gehen?» - ja, und
   zwar weil .dt auf 50px festgenagelt ist. Das passt fuer «Tag» und ein
   Datum, nicht fuer «Zuletzt heruntergeladen». Darum eine Variante, in der
   die Beschriftung so breit sein darf, wie sie ist. */
.row.wide{align-items:flex-start}
.row.wide .dt{font-family:var(--ui);font-size:12.5px;width:auto;flex:0 0 auto;
  min-width:132px;max-width:46%;line-height:1.35;padding-top:1px}
.row .mn{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
.row .mn em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3)}
.row .vl{font-family:var(--mono);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .cv{color:var(--ink-3);font-size:15px;flex:none}
h3.ovh{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin:22px 0 10px;font-weight:700}
/* Zeilen, deren linke Spalte ein Wort statt eines Datums tr\u00e4gt */
.row.lbl .dt{width:120px;white-space:normal;line-height:1.25;font-family:var(--ui);font-size:12.5px;
  overflow-wrap:anywhere}
@media (max-width:430px){
  .row.lbl{flex-wrap:wrap}
  .row.lbl .dt{width:100%;margin-bottom:3px}
  .row.lbl .vl{margin-left:auto}
}
.row.neg .vl{color:var(--stop)}
.row.pend{background:var(--warn-soft)}
/* Die Probezeit-Zeilen.
   Auf dem Telefon gehoert der Knopf UNTER den Text. Daneben quetscht er
   ihn auf drei Woerter Breite - das sah am 13.10.2026 so aus, als waere
   die Seite kaputt. Erledigtes verblasst und bleibt stehen, bis neu
   geladen wird: Marco soll sehen, was er heute abgearbeitet hat. */
.row.pz{align-items:flex-start}
.row.pz .dt{width:72px;white-space:normal;line-height:1.3}
.row.pz .vl{font-family:var(--ui);white-space:normal}
.row.pz.fertig{opacity:.5}
.btn.fertig{color:var(--gut);border-color:var(--gut)}
.btn.warnend{color:var(--warn);border-color:var(--warn);font-weight:700}
/* Karten, die auf eine Antwort von Marco warten. Der Rand ist das
   einzige Signal - Farbe im Hintergrund macht den Text schlechter
   lesbar, und gelesen werden muss er ja. */
.card.wartet:not([hidden]){border:2px solid var(--warn)}
@media (max-width:620px){
  .row.pz{flex-wrap:wrap;gap:6px}
  .row.pz .dt{width:100%}
  .row.pz .mn{flex:1 0 100%}
  .row.pz .vl{flex:1 0 100%;margin-top:6px}
  .row.pz .vl .btn{width:100%}
}
.empty{padding:20px 16px;color:var(--ink-3);font-size:13px;text-align:center}

.ed{border-top:1px solid var(--line);background:var(--surface-3);padding:14px 16px}
.ed .g2{display:flex;gap:10px}
.ed .g2 label{flex:1}
.ed .act{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.ed .act .sp{flex:1}

.slip .sh{padding:13px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.slip .sh .n{font-size:15px;font-weight:700}
.slip .sh .p{font-size:11.5px;color:var(--ink-2);font-family:var(--mono);margin-top:1px;font-variant-numeric:tabular-nums}
.sr{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;font-size:13.5px;border-top:1px solid var(--line-2)}
.sr.sub{color:var(--ink-2);font-size:12.5px;padding-left:28px}
.sr.tot{background:var(--surface-3);font-weight:700}
.sr.sec{background:var(--surface-3);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding-top:12px;padding-bottom:6px}
.sr span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sr.txt span:last-child{font-family:inherit;white-space:normal;text-align:right}
.unit{display:flex;justify-content:space-between;padding:10px 16px 2px;font-size:9.5px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--ink-3);font-weight:700}

.pay{margin-top:12px;background:var(--surface);border:2px solid var(--accent);border-radius:var(--r);padding:13px 16px}
.pay.lk{border:1px solid var(--line);background:var(--surface-3)}
.pay .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:700;
        display:flex;justify-content:space-between;gap:10px}
.pay.lk .k{color:var(--ink-3)}
.pay .in{display:flex;align-items:baseline;gap:9px;margin-top:5px}
.pay .in .cu{font-size:13px;color:var(--ink-3);font-family:var(--mono);font-variant-numeric:tabular-nums}
.pay .in{flex-wrap:wrap}
.pay .in input{flex:1;min-width:110px;border:1px solid var(--accent);border-radius:10px;padding:7px 10px;
  font-size:24px;font-weight:700;background:var(--surface);font-family:var(--mono);font-variant-numeric:tabular-nums}
.pay .in input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.pay .in .pv{flex:none;align-self:center}
.pay .in input::placeholder{color:var(--ink-3);font-weight:400}
.pay .take{margin-top:10px}
/* Der abgeschlossene Monat: statt Eingabefeld eine ruhige Erklaerung. */
.pay .pzu{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.pay .in .ro{font-size:26px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pay .pl{margin-top:10px;border-top:1px solid var(--line)}
.pay .plr{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.pay .plr .d{color:var(--ink-2);font-family:var(--mono);font-size:13px;min-width:74px;font-variant-numeric:tabular-nums}
.pay .plr .v{flex:1;text-align:right;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.pay .plr .lnk{background:none;border:0;padding:2px 0;color:var(--ink-3);font-size:12px;
  text-decoration:underline;cursor:pointer;font-family:inherit}
.pay .plr .lnk:hover{color:var(--warn)}
.inf{background:none;border:0;padding:4px 0;margin-top:2px;color:var(--accent);font-size:12.5px;
  font-family:inherit;text-decoration:underline;cursor:pointer;text-align:left}
.infbox{margin-top:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.infr{padding:12px 14px;border-top:1px solid var(--line-2)}
.infr:first-child{border-top:0}
.infr.on{background:var(--surface-3)}
.infr .t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.infr p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:5px 0 0}
.infr p.ex{color:var(--ink-3);font-style:italic}
.pay .pah{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-top:13px}
.pay .padd{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pay .padd input{border:1px solid var(--accent);border-radius:10px;padding:7px 10px;
  font-size:15px;font-family:var(--mono);background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
.pay .padd input#payDatum{flex:1;min-width:130px}
.pay .padd input#payBetrag{flex:1;min-width:96px;font-weight:600}
.pay .padd input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.pay .perr{font-size:12.5px;color:var(--warn);margin-top:9px;line-height:1.45;font-weight:600}
.pay .df{font-size:12px;color:var(--ink-2);margin-top:8px;line-height:1.45}
.pay .df b{color:var(--accent)}

/* Der Saldo traegt eine Zahl — also helle Flaeche, dunkle Schrift.
   Farbe markiert, sie uebermalt nicht. */
.acc{background:var(--sec-soft);color:var(--sec-tief);border-radius:20px;padding:18px 18px 16px}
.acc .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.85}
.acc .big{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-.03em;margin-top:4px;
  font-variant-numeric:tabular-nums}
.acc .big s{text-decoration:none;font-size:14px;opacity:.72;margin-right:7px;font-weight:400}
.acc .wh{font-size:13.5px;margin-top:6px;opacity:.85;line-height:1.4}
.acc.zero,.acc.flat{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.acc.zero .k,.acc.flat .k{color:var(--ink-3);opacity:1}
.acc.zero .wh,.acc.flat .wh{color:var(--ink-2);opacity:1}
.acc.owe{background:var(--warn-soft);color:#7a4c06}
.acc.owe .k,.acc.owe .wh{opacity:.9}

.scroll{overflow-x:auto}
table.yr{width:100%;border-collapse:collapse;font-size:12.5px;min-width:352px}
table.yr th{text-align:right;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:10px 7px;border-bottom:1px solid var(--line)}
table.yr th:first-child{text-align:left}
table.yr td{padding:8px 7px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line-2)}
table.yr td:first-child{text-align:left;font-family:var(--ui)}
table.yr tr.now td{background:var(--accent-soft)}
table.yr tr.auf td{background:var(--warn-soft)}
table.yr tr.auf td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.yr tr.auf td:first-child::before{content:"\2022\00a0";color:var(--warn);font-weight:700}
.band{display:flex;align-items:center;gap:9px;width:100%;max-width:var(--sp);margin:0 auto;
  padding:8px 14px;border:0;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);
  font:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer}
.band .pt{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.vsb{display:flex;align-items:center;gap:9px;width:100%;max-width:var(--sp);margin:0 auto;
  padding:8px 14px;border-radius:var(--r);background:#ede9fe;color:#5b21b6;
  font-size:12.5px;font-weight:600;transition:background .2s}
.vsb .pt{width:7px;height:7px;border-radius:50%;background:#7c3aed;flex:none}
.vsb .tx{flex:1;min-width:0}
/* Der Knopf im Balken war 27 Punkte hoch - zu klein fuer einen Daumen, und
   im Test ist er der einzige Weg weiter. 36 Punkte sind das Mindeste, das
   man auf einem Telefon zuverlaessig trifft. */
.vsb .vsx{border:1px solid #c4b5fd;background:#fff;color:#5b21b6;border-radius:999px;
  padding:8px 14px;min-height:36px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;flex:none}
.vsb.blink{background:#ddd6fe}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vsb{background:#2e1065;color:#ddd6fe}
  :root:not([data-theme="light"]) .vsb .vsx{background:transparent;color:#ddd6fe;border-color:#6d28d9}}
:root[data-theme="dark"] .vsb{background:#2e1065;color:#ddd6fe}
:root[data-theme="dark"] .vsb .vsx{background:transparent;color:#ddd6fe;border-color:#6d28d9}
/* Die Uebung traegt dasselbe Band, aber eine andere Farbe: die Vorschau zeigt
   eine fremde Sicht, die Uebung einen fremden Haushalt. Zwei verschiedene
   Dinge duerfen nicht gleich aussehen. */
.vsb.ueb{background:#fef3c7;color:#854d0e}
.vsb.ueb .pt{background:#d97706}
.vsb.ueb .vsx{border-color:#fcd34d;color:#854d0e}
/* Der Test ohne Konto. Markenblau statt Warngelb: das hier ist kein
   Hinweis, sondern das Angebot - und der Knopf darin ist der Weg weiter,
   nicht der Weg hinaus. */
.vsb.ueb.test{background:#123a6b;color:#fff}
.vsb.ueb.test .pt{background:#fff}
.vsb.ueb.test .vsx{background:#fff;border-color:#fff;color:#123a6b;font-weight:700}
/* Und sobald wirklich etwas zu verlieren ist, faellt es auf.
   =========================================================
   Erst ab dem ersten selber erfassten Eintrag - vorher waere es dasselbe
   Draengen, nur an einer anderen Stelle. Der Punkt pulst, damit das Auge
   hinfaellt, ohne dass der Text lauter werden muss; wer das nicht mag,
   bekommt es nach prefers-reduced-motion gar nicht. */
.vsb.ueb.test.hat{background:#0f5132;box-shadow:0 2px 10px rgba(15,81,50,.35)}
.vsb.ueb.test.hat .vsx{color:#0f5132}
.vsb.ueb.test.hat .pt{animation:vsbPuls 2.2s ease-in-out infinite}
@keyframes vsbPuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.vsb.ueb.test.hat .pt{animation:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vsb.ueb{background:#451a03;color:#fde68a}
  :root:not([data-theme="light"]) .vsb.ueb .vsx{color:#fde68a;border-color:#b45309}}
:root[data-theme="dark"] .vsb.ueb{background:#451a03;color:#fde68a}
:root[data-theme="dark"] .vsb.ueb .vsx{color:#fde68a;border-color:#b45309}
.band .tx{flex:1;min-width:0}
.band .cv{opacity:.7}
@media (hover:hover){.band:hover{filter:brightness(.97)}}
table.yr td.neg{color:var(--stop)}
table.yr tfoot td{font-weight:700;border-top:1px solid var(--line);background:var(--surface-3)}

/* ---------- Der Mannschaftsbogen ----------
   Zeilen sind Personen, Spalten sind Tage. Die Namensspalte bleibt beim
   Querscrollen stehen: ohne sie weiss nach der dritten Spalte niemand mehr,
   wessen Zeile er gerade ausfuellt - und dann traegt er die Stunden beim
   Falschen ein. Darum "position:sticky" und nicht bloss eine breite Spalte. */
.mb{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.mb th,.mb td{padding:0;border-top:1px solid var(--line-2);background:var(--surface)}
.mb thead th{border-top:0;border-bottom:1px solid var(--line);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  padding:9px 6px;text-align:center;white-space:nowrap;line-height:1.35}
.mb thead th i{display:block;font-style:normal;font-size:10.5px;letter-spacing:0;
  text-transform:none;font-variant-numeric:tabular-nums}
.mb .nm{position:sticky;left:0;z-index:2;min-width:102px;max-width:122px;
  padding:8px 10px 8px 2px;text-align:left;box-shadow:1px 0 0 var(--line-2)}
.mb thead .nm{z-index:3;box-shadow:1px 0 0 var(--line)}
.mb .nm b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb .nm em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.mb thead th.we{opacity:.7}
.mb td.we{background:var(--surface-3)}
.mb thead th.hh{color:var(--sec);opacity:1}
.mb input{width:100%;min-width:56px;box-sizing:border-box;border:0;background:transparent;
  padding:11px 3px;font:inherit;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;text-align:center;color:var(--ink);border-radius:7px;min-height:44px}
.mb input:focus{outline:2px solid var(--sec);outline-offset:-2px;background:var(--surface)}
.mb input:disabled{color:var(--ink-3);opacity:.55;cursor:not-allowed}
.mb input.bad{outline:2px solid var(--stop);outline-offset:-2px}
.mb .fix{display:block;padding:11px 6px;text-align:center;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12.5px;min-height:44px;
  line-height:22px;min-width:56px;max-width:84px;margin:0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Plan ist gruen: er zeigt, was gelten soll, nicht was war. Zwei
   Tabellen, die gleich aussehen und Verschiedenes bedeuten, waeren die
   Stelle, an der jemand die falsche fuer die richtige haelt. */
.mb.pl tbody td,.mb.pl thead th{background:var(--gut-soft)}
.mb.pl tbody td.we{background:var(--gut-soft);filter:brightness(.97)}
.mb.pl .fix{color:var(--ink-2)}
.mb td.sm,.mb tfoot td{text-align:center;font-weight:700;font-family:var(--mono);
  font-variant-numeric:tabular-nums;padding:9px 6px;background:var(--surface-3)}
.mb tfoot td{border-top:1px solid var(--line)}
.mb tfoot .nm{text-align:left;font-family:var(--ui);font-weight:700}
/* Die Fehlermeldung einer einzelnen Zelle steht unter der Tabelle und nicht
   als Sprechblase daneben: auf dem Telefon waere sie dort halb abgeschnitten. */
.mbf{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.mbf div{background:var(--stop-soft);color:var(--stop);border-radius:9px;
  padding:9px 12px;font-size:12px;line-height:1.45}
/* Sechs Spalten auf einem Telefon: aus jeder Zeile wird ein Block mit
   Beschriftung. Nur fuer Tabellen mit dem Merkmal "stapeln" - die reinen
   Zahlentabellen (Jahr, Kosten) bleiben, wie sie sind. */
@media (max-width:560px){
  table.yr.stapel{min-width:0}
  table.yr.stapel thead{display:none}
  table.yr.stapel tbody tr{display:block;padding:10px 0;border-top:1px solid var(--line-2)}
  table.yr.stapel tbody tr:first-child{border-top:0}
  table.yr.stapel tbody td{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;border:0;padding:2px 0;text-align:right}
  table.yr.stapel tbody td:empty{display:none}
  table.yr.stapel tbody td::before{content:attr(data-l);flex:0 0 auto;
    font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;color:var(--ink-3)}
  table.yr.stapel tbody td:nth-child(2){font-family:var(--ui);font-weight:600;
    text-align:right}
  table.yr.stapel tfoot tr{display:flex;align-items:baseline;justify-content:space-between;
    border-top:1px solid var(--line);background:var(--surface-3);padding:0 8px}
  table.yr.stapel tfoot td{border:0;padding:10px 0}
  table.yr.stapel tfoot td:empty{display:none}
  table.yr.stapel tfoot td::before{content:""}
  table.yr.stapel tfoot td:nth-child(2){font-family:var(--ui);letter-spacing:.01em}
}

/* overflow-wrap UND min-width:0 - beides, und beides noetig.
   ==========================================================
   Am 23. Oktober 2026 zeigte Marcos iPhone den Kasten «Der Zugang zu
   Stripe ist abgelaufen» mit uebereinanderliegenden Zeilen: der
   technische Hinweis daneben war eine Zeichenkette von ueber hundert
   Zeichen ohne ein einziges Leerzeichen. Ein flex-Kind schrumpft nicht
   unter seinen Inhalt (min-width:auto), und ohne Umbruchstelle wird der
   Kasten so breit wie die Kette - der eigentliche Satz lief hinaus.

   Ein Kasten, der im Normalfall gut aussieht und bei der einen langen
   Meldung zerfaellt, ist genau dort kaputt, wo er gebraucht wird. */
.chk{display:flex;gap:11px;padding:11px 13px;border-radius:var(--r);border:1px solid var(--line);
     background:var(--surface);align-items:flex-start;margin-bottom:8px;
     min-width:0;overflow-wrap:anywhere}
.chk > *{min-width:0}
.chk .d{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;background:var(--ink-3)}
.chk.warn{background:var(--warn-soft);border-color:transparent}.chk.warn .d{background:var(--warn)}
.chk.stop{background:var(--stop-soft);border-color:transparent}.chk.stop .d{background:var(--stop)}
.chk.gut{background:var(--gut-soft);border-color:transparent}.chk.gut .d{background:var(--gut)}
.foot.gut{color:var(--gut)}
.chk .t{font-size:13.5px;line-height:1.4}
.chk .t b{display:block;font-size:13px;margin-bottom:1px}
/* Erklaerkaesten, die aus einer Ueberschrift und mehreren Absaetzen bestehen.
   .chk ist eine ZEILE (display:flex) - gedacht fuer Punkt plus Text. Wer dort
   drei Kinder hineinlegt, bekommt drei Spalten: auf dem Telefon stand die
   Ueberschrift in einer schmalen Spalte links, der Hinweis in einer noch
   schmaleren rechts, und das letzte Wort lief aus dem Kasten hinaus.
   Marco am 6. Oktober mit dem Bild. Diese vier Kaesten stapeln darum. */
.chk.erkl{flex-direction:column;gap:4px}
.chk.erkl > b{font-size:13px}
.chk.erkl > div{font-size:13.5px;line-height:1.45}
.chk.stop#saveErr,.chk.stop#dErr{display:block;font-size:13px;line-height:1.45;color:var(--stop)}
.lg{padding:10px 16px;border-top:1px solid var(--line-2);font-size:13px;line-height:1.45}
.lg:first-child{border-top:0}
.lg .w{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:block;font-variant-numeric:tabular-nums}
.lg .g{color:var(--ink-2);font-size:12.5px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:450px){.grid2{grid-template-columns:1fr}}
.grid2 .full{grid-column:1/-1}
.hint{font-size:12px;color:var(--ink-2);margin-top:9px;line-height:1.5}
/* Ein Fuss steht oft INNERHALB von label.f, und das Etikett dort ist
   gesperrt, fett und GROSSGESCHRIEBEN. Ohne diese drei Zeilen erbt der Fuss
   das - und ein erklaerender Satz von drei Zeilen schreit den Haushalt an.
   Marco am 16. Oktober 2026: «Auf der Vorschau hast du alles gross
   geschrieben. Es sollte kleingeschrieben sein, also normal.»
   Betraf nicht nur die neuen FLG-Fuesse, sondern auch lgavStufeFuss und
   landwKlasseFuss - ein Etikett vererbt seinen Stil an alles darin. */
.foot{font-size:11px;color:var(--ink-3);margin-top:8px;line-height:1.45;
      text-transform:none;letter-spacing:normal;font-weight:400}

/* ==================================================================
   RUHE UND HIERARCHIE IN DEN ANGABEN  (21. Oktober 2026)
   ==================================================================
   Marco: «Es muss besonders aufgeräumt sein, nicht überall noch Hinweise
   und kleine Bemerkungen.» Gezählt waren es 186 Hinweiskästen und
   Kleintexte, sieben Knopfstile und 39 Schriftgrössen.

   DIE IDEE IST NICHT, WENIGER ZU ERKLÄREN. Die Erklärungen sind oft
   rechtlich nötig; eine, die fehlt, kostet mehr als eine, die stört. Die
   Idee ist, nicht alles GLEICHZEITIG zu zeigen - und die Hierarchie so zu
   setzen, dass man beim Hinschauen die Antwort liest und nicht die Frage.

   WAS NICHT EINKLAPPT: alles mit `warn`, und alles, was AUSSERHALB eines
   Feldes steht. Ein Hinweis, der eine Rechtsaussage trägt, darf nie
   verschwinden - das wäre dieselbe Krankheit wie ein Vorgabewert, der
   eine Rechtsaussage trägt. */

/* Die Frage tritt zurück, die Antwort kommt nach vorne. */
label.f,.f2{ color:var(--ink-3); font-size:10.5px }
label.f > input, label.f > select, label.f > textarea,
.f2 > input, .f2 > select, .f2 > textarea{
  border:0; border-bottom:1.5px solid var(--line); border-radius:0;
  background:transparent; padding-left:0; padding-right:0;
  font-size:17px; font-weight:500; color:var(--ink);
  padding-top:5px; padding-bottom:8px; letter-spacing:-.2px;
  transition:border-color .18s ease;
}
label.f:focus-within > input, label.f:focus-within > select,
label.f:focus-within > textarea,
.f2:focus-within > input, .f2:focus-within > select, .f2:focus-within > textarea{
  border-bottom-color:var(--accent);
}
/* Der Rahmen ist weg — der Fokusring darf darum nicht mehr als Kasten
   gezeichnet werden, sonst springt beim Antippen ein Rechteck auf. */
label.f > input:focus, label.f > select:focus, label.f > textarea:focus,
.f2 > input:focus, .f2 > select:focus, .f2 > textarea:focus{
  outline:0;
}
/* Ein gesperrtes Feld bekommt keine gestrichelte Box mehr, sondern eine
   gestrichelte Linie — dieselbe Aussage, ein Zehntel des Gewichts. */
label.f > input:disabled, .f2 > input:disabled{
  background:transparent; border-bottom-style:dashed;
}

/* NÄHE: der Erklärtext gehört zum Feld DARÜBER.
   Marco am 21.10.: «Es sieht aus, als würde es zum nächsten Punkt gehören,
   weil es näher dran ist.» Genau so war es - gleicher Abstand nach oben
   und unten heisst für das Auge: gehört zu beiden, also zu keinem. */
label.f{ margin-bottom:26px }
label.f > .foot, label.f > .hint{ margin-top:6px; margin-bottom:0 }
/* Dieselbe Nähe für die Hinweise, die NEBEN dem Feld stehen statt darin.
   Sie bleiben sichtbar - sie tragen oft eine Rechtsaussage -, rücken aber
   an das Feld heran, zu dem sie gehören. Ohne diese Zeile stehen sie genau
   in der Mitte zwischen zwei Feldern und gehören für das Auge zum
   falschen. */
label.f + .hint, label.f + .foot,
label.f + .full.hint, label.f + .full.foot{
  margin-top:-19px; margin-bottom:26px;
}
/* Ein Knopf zwischen zwei Feldern braucht eigenen Raum, sonst klebt er am
   Etikett darunter und sieht aus, als gehöre er dorthin. */
.grid2 > .full > .btn, .grid2 > .full > .btn.sm{ margin-bottom:10px }

/* Und die neutralen davon erscheinen erst beim Anfassen des Feldes. */
label.f > .foot:not(.warn):not(.gut):not(.stop),
label.f > .hint:not(.warn):not(.gut):not(.stop){
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height .22s ease, opacity .18s ease, margin-top .2s ease;
}
label.f:focus-within > .foot:not(.warn):not(.gut):not(.stop),
label.f:focus-within > .hint:not(.warn):not(.gut):not(.stop){
  max-height:340px; opacity:1; margin-top:6px;
}
/* Wer mit der Tastatur arbeitet oder die Bewegungsreduktion eingeschaltet
   hat, soll nichts verpassen und nichts wackeln sehen. */
@media (prefers-reduced-motion:reduce){
  label.f > .foot, label.f > .hint{ transition:none }
}

/* DIE THEMEN. Marco: «Thema Ferien, dann ein bisschen abgesetzt, alles was
   zu den Ferien gehört, dann Thema Stunden.» Der Titel steht aussen, was
   dazugehört rückt leicht ein - so sieht man die Zugehörigkeit, ohne dass
   ein Kasten darum nötig wäre. */
   Gebaut OHNE Hüllelement: ein zusätzliches <div> um die Felder würde das
   Raster (.grid2) zerschneiden und jede zweispaltige Zeile brechen. Statt
   dessen rückt das Raster selber ein, und die Themenzeile zieht sich mit
   negativem Rand wieder heraus. Eine Regel, kein Umbau. */
.grid2:has(.thema){ padding-left:15px }
.thema{ display:flex; align-items:baseline; gap:11px; margin:34px 0 18px;
        margin-left:-15px }
.thema:first-child{ margin-top:4px }
.thema > b{ font-size:16px; font-weight:700; color:var(--ink);
            letter-spacing:-.3px; white-space:nowrap }
.thema > i{ flex:1; height:1px; background:var(--line); font-style:normal;
            min-width:14px }
.thema > em{ font-style:normal; font-size:11px; color:var(--ink-3);
             letter-spacing:.2px; white-space:nowrap }
@media (max-width:380px){
  .grid2:has(.thema){ padding-left:10px }
  .thema{ margin-left:-10px }
  .thema > em{ display:none }
}

/* DIE KNÖPFE: leicht erhaben, Licht von oben.
   Marco: «vielleicht muss man die Knöpfe ein bisschen 3D machen … nur ganz
   leicht irgendwie so an zwei Kanten etwas Schatten, so dass die Höhe
   darstellen». Genau zwei Kanten: eine helle Linie innen oben, ein weicher
   Schatten unten. Beim Drücken sinkt der Knopf ein. */
.btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             0 1px 1px rgba(20,33,61,.10),
             0 3px 7px rgba(20,33,61,.07);
  transition:transform .11s ease, box-shadow .11s ease, background .15s ease;
}
.btn:active{ transform:translateY(1.5px);
             box-shadow:0 1px 2px rgba(20,33,61,.12) }
.btn.gh, .btn.sm, .btn.wn{
  box-shadow:inset 0 1px 0 #fff,
             0 1px 1px rgba(20,33,61,.07),
             0 2px 5px rgba(20,33,61,.05);
}
@media (prefers-reduced-motion:reduce){ .btn{ transition:none } .btn:active{ transform:none } }
/* Ein kleiner zugeklappter Teil in den Angaben: alles, was man einmal
   liest und dann nie wieder - Fundstellen, Sonderfaelle, ein Feld, das
   fast nie jemand anfasst. Bewusst leise gehalten. Er soll die Maske
   nicht fuellen, aber auch nicht versteckt wirken: ein Winkel, der sich
   dreht, sagt «hier geht etwas auf». Marco am 16. Oktober 2026: «nur
   Informationen die wirklich aktuell und noetig sind anzeigen». */
details.mehr{margin-top:10px}
details.mehr>summary{list-style:none;cursor:pointer;font-size:12.5px;
  font-weight:600;color:var(--ink-3);font-family:var(--ui);
  text-transform:none;letter-spacing:normal;padding:3px 0}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary::before{content:"\203A";display:inline-block;
  margin-right:7px;transition:transform .15s}
details.mehr[open]>summary::before{transform:rotate(90deg)}
details.mehr>summary:hover{color:var(--ink)}
/* Was in einem zugeklappten Block steht, steht in seiner Kopfzeile.
   Ein Deckel, unter dem man erst nachsehen muss, was darunter liegt,
   macht die Seite kuerzer und die Arbeit laenger — und ein Wert, den
   niemand mehr sieht, ist derselbe Fehler wie `so:50` in NACHT, nur von
   der anderen Seite: dort las ihn keine Zeile, hier sieht ihn kein Mensch. */
details.mehr>summary .mz{color:var(--ink-2);font-weight:400}
details.mehr>summary .mz:not(:empty)::before{content:"\00a0\00b7\00a0"}
details.mehr[open]>summary .mz{display:none}
.bar.two{display:flex;gap:10px;flex-wrap:nowrap}
.bar.two .btn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Drei gleich breite Knoepfe. Die drei Ausgaben der Rapporte sind
   gleichwertig - keine ist die Hauptsache, also traegt keine mehr
   Gewicht als die anderen. */
.bar.three{display:flex;gap:8px;flex-wrap:nowrap}
.bar.three .btn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Auf dem Telefon steht jeder Knopf auf einer eigenen Zeile — sonst wird
   aus "Steuerbescheinigung ansehen" ein abgeschnittenes "Steuerbescheinigung …". */
@media (max-width:470px){.bar.two{flex-wrap:wrap}.bar.two .btn{flex:1 1 100%;white-space:normal}}
.docbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
/* Das Blatt ist Papier: immer dunkle Schrift auf Weiss, auch im Nachtmodus. */
.doc{background:#fff;color:#1a1a18;border:1px solid #ddd9d1;border-radius:var(--r);padding:26px 22px 30px;
  --ink:#1a1a18; --ink-2:#5c645e; --ink-3:#7b847d;
  --line:#ddd9d1; --line-2:#e9e5dd; --line-feld:#a9a49a;
  --surface:#ffffff; --surface-2:#f4f2ec; --surface-3:#faf8f4;
  --marke:#123a6b;
  --sec:#123a6b; --sec-soft:#e6ebf2; --sec-tief:#0c2a4f;
  --accent:#123a6b; --accent-soft:#e6ebf2; --accent-mid:#2d5b91}
.doc h1{font-size:21px;font-weight:700;margin:0 0 3px;letter-spacing:-.01em}
.doc .dsub{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.doc hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.doc .pt{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-top:14px}
.doc .pv{font-size:14px;line-height:1.5;margin-top:3px;white-space:pre-line}
.doc h2{font-size:14.5px;font-weight:700;margin:20px 0 5px;letter-spacing:0;text-transform:none;color:var(--ink)}
.doc p{font-size:13.5px;line-height:1.62;margin:0 0 7px;white-space:pre-line}
.doc .drows{margin:8px 0 16px;border-bottom:1px solid var(--line-2)}
.doc .drows .sr{padding:8px 0}
.doc .drows .sr.sub{padding-left:14px}
.doc .drows .sr.tot,.doc .drows .sr.sec{background:none;border-top:1px solid var(--ink-3)}
.doc .drows .sr.sec{border-top:0;padding-top:16px;padding-bottom:2px}
.doc .dunit{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;padding-bottom:4px}
.doc .dnote{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin:0 0 10px}
.doc .dscroll{overflow-x:auto;margin:6px 0 16px}
/* Das amtliche Formular auf dem Bildschirm */
.doc .fadr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.doc .ffeld{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:10px 0}
.doc .fbox{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.5}
.doc .flab{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-bottom:3px}
.doc .fhak{margin:10px 0 14px;font-size:12.5px}
.doc .fhak div{display:flex;align-items:center;gap:8px;padding:3px 0}
.doc .fkast{width:14px;height:14px;flex:none;border:1px solid var(--ink-3);border-radius:3px;
  display:grid;place-items:center;font-size:10px;line-height:1}
.doc .fkast.an{background:var(--ink);border-color:var(--ink);color:#fff}
.doc .drows .sr.fz{display:flex;gap:10px;align-items:baseline}
.doc .fnr{flex:none;width:44px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Marcos Bildschirm vom 3. Oktober zeigt es in der Anmeldung: «Name, Vorname
   oder Firma» steht vierzeilig und ganz schmal da, und der Wert liegt QUER
   darueber. Grund: die Beschriftung hatte min-width:0 und schrumpfte bis auf
   nichts, waehrend der Wert daneben nicht umbrechen konnte. Beide Texte liefen
   dann aus ihren Kaesten heraus und uebereinander.

   Jetzt behaelt die Beschriftung mindestens ein gutes Drittel, und beide
   Spalten brechen um, statt herauszulaufen. */
.doc .drows .sr.fz{flex-wrap:wrap}
.doc .ftx{flex:1 1 auto;min-width:38%;overflow-wrap:anywhere}
.doc .drows .sr.fz > span:last-child{flex:0 1 auto;min-width:0;text-align:right;
  overflow-wrap:anywhere}
/* Dasselbe fuer die einfachen zweispaltigen Zeilen. */
.doc .drows .sr > span:first-child{min-width:0;overflow-wrap:anywhere}
.doc .drows .sr > span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
.doc .drows .sr.fz.sub .fnr{padding-left:12px;width:56px}
/* Hat ein Dokument keine Feldnummern, darf die Spalte auch keinen Platz
   brauchen. Sonst steht jede Zeile 54 px eingerueckt, und lange
   Beschriftungen stossen den Wert auf die naechste Zeile. */
.doc .fnr:empty{display:none}
/* Und landet ein Wert doch auf einer eigenen Zeile, gehoert er an den
   rechten Rand - nicht nach links, wo er wie ein neuer Eintrag aussieht. */
.doc .drows .sr.fz > span:last-child{margin-left:auto}
.doc .sig{display:flex;gap:22px;margin-top:34px}
.doc .sig div{flex:1;border-top:1px solid var(--ink-3);padding-top:6px;font-size:12px;color:var(--ink-2)}
.natrow{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:13.5px;
  border-top:1px solid var(--line-2);align-items:center;cursor:pointer}
.natrow:first-child{border-top:0}
.natrow input{width:auto;flex:0 0 auto;margin:0}
.natrow .lbl{flex:1}
.natrow .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.callout{background:var(--accent);color:#fff;border-radius:var(--r);padding:18px 18px 16px;margin-bottom:18px}
.callout h3{font-size:16px;font-weight:700;margin:0 0 6px}
.callout p{font-size:13px;line-height:1.5;margin:0;opacity:.88}
.callout .cb{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.callout button{background:#fff;color:var(--accent);border:0;border-radius:11px;padding:11px 16px;
  font-size:14px;font-weight:700;font-family:var(--ui);cursor:pointer}
.callout button.gh2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
/* Ein Hinweiskasten, der nicht wirbt, sondern warnt: hier ist etwas schief,
   und es laesst sich richten. Darum die Warnfarbe statt der Markenfarbe. */
.callout.warn{background:var(--warn)}
.callout.warn button{color:var(--warn)}
.callout.warn .foot{color:#fff;opacity:.85;margin-top:12px}
.callout.warn .note{color:#fff;opacity:.95;margin-top:10px;font-weight:600}
.bar{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}

/* ---------- Die Erfassen-Maske nach Entwurf A (seit KP) ----------
   Marco am 24. Oktober 2026, vor dem Bildschirmfoto der Maske: «Die
   Eingabemaske finde ich etwas unaufgeraeumt … es ist gross und klein
   vermischt, es hat keine klare Linie … die Knoepfe, die sind so breit
   und so voluminoes … es muss ein bisschen kompakt sein und schoen nur
   die Informationen ins Auge bekommen, was wirklich noetig ist.»

   Geaendert wird NUR die Gestalt, kein Wort und keine id. «Ankunft und
   Abfahrt» und «Nur Stunden» stehen in vier Pruefdateien, in einem
   Flyer, in der Kurzanleitung und in einem Drehbuch - wer sie hier
   kuerzt, macht aus einer Gestaltungsfrage eine Nachfuehrung an sieben
   Stellen. Die Knoepfe werden klein, nicht anders benannt. */

/* Ein Umschalter, der nicht mehr quer ueber die Seite laeuft: zwei
   Woerter in einer Schiene, rechtsbuendig ueber ihrem Block. */
/* `width:fit-content` mit `margin-left:auto` ruecht die Schiene nach
   rechts, ohne dass sie einen Behaelter braucht - und ein Behaelter
   waere hier eine Falle: `hidden` liegt auf der Schiene selbst, der
   leere Behaelter bliebe als Luecke stehen. */
.seg{display:flex;gap:0;margin:0 0 0 auto;background:var(--surface-3);
     border-radius:999px;padding:2px;flex-wrap:nowrap;width:fit-content}
.seg[hidden]{display:none}
.seg .chip{font-size:11.5px;padding:5px 11px;border:0;background:none;
     color:var(--ink-3);font-weight:600;border-radius:999px;white-space:nowrap}
.seg .chip.on{background:var(--surface);color:var(--ink);font-weight:700;
     box-shadow:0 1px 2px rgba(20,24,30,.10)}
.segz{display:flex;align-items:center;justify-content:flex-end;margin-bottom:10px}

/* EINE Karte fuer Zeit, Pause und Ergebnis. Vorher standen die drei als
   drei Bloecke untereinander, jeder mit eigenem Rand - das war die
   Haelfte des «gross und klein vermischt». */
.erfk{background:var(--surface);border:1px solid var(--line);border-radius:16px;
      padding:14px}
/* Wort links, Umschalter rechts - eine Zeile statt zwei Bloecke. */
.erfk-kopf{display:flex;align-items:center;justify-content:space-between;
      gap:10px;min-height:26px;margin-bottom:12px}
.erfk-kopf .kl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--ink-3);font-weight:700}
.erfk .tt{gap:10px}
.erfk .tt .fld{background:none;border:0;padding:0}
.erfk .tt .fld input{font-size:27px}
/* Die zweite Spalte steht rechts - sonst klebt «Abfahrt» in der Mitte
   und die beiden Zahlen stehen nicht an den Raendern. */
.erfk .tt .fld:last-child{text-align:right}
.erfk .tt .fld:last-child input{text-align:right}
/* Das Uhrensymbol des Browsers nimmt ein Drittel der Breite und sagt
   nichts, was die Zahl nicht schon sagt. */
.erfk .tt .fld input[type=time]::-webkit-calendar-picker-indicator{display:none}
/* Die Pause als Zeile: Wort links, Schalter rechts. Das Kaestchen
   bleibt ein echtes <input type=checkbox> - nur gelegt, nicht ersetzt;
   ein nachgebauter Schalter waere fuer die Tastatur unerreichbar. */
.erfk .chk2{margin:13px 0 0;background:none;border:0;border-top:1px solid var(--line);
      padding:13px 0 0;justify-content:space-between;gap:12px}
.erfk .chk2 span{font-size:13px;color:var(--ink-2);order:1}
/* Ein Schalter statt eines Kaestchens - aber derselbe <input
   type=checkbox>, nur anders gezeichnet. Ein nachgebauter Schalter aus
   zwei <div> waere mit der Tastatur nicht erreichbar, und jede Pruefung,
   die `.checked` liest, fiele ins Leere. */
.erfk .chk2 input{order:2;appearance:none;-webkit-appearance:none;flex:none;
      width:40px;height:23px;border-radius:999px;background:var(--line);
      position:relative;cursor:pointer;transition:background .15s}
.erfk .chk2 input::after{content:"";position:absolute;top:2px;left:2px;width:19px;
      height:19px;border-radius:999px;background:#fff;transition:left .15s;
      box-shadow:0 1px 2px rgba(20,24,30,.25)}
.erfk .chk2 input:checked{background:var(--accent)}
.erfk .chk2 input:checked::after{left:19px}
.erfk .chk2 input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.erfk .tl{height:1px;background:var(--line);margin:13px 0}
/* Das Ergebnis als Zeile statt als Block in der Mitte: links das Wort,
   rechts die Zahl. Gebaut wird der Inhalt weiterhin von
   erfDauerSetzen() - hier wird nur gelegt, nicht gebaut. */
.erfk .dur{margin-top:0;text-align:left;display:flex;flex-wrap:wrap;
      align-items:baseline;justify-content:space-between}
.erfk .dur .vor{display:inline;font-size:13px}
.erfk .dur b{display:inline;font-size:27px;margin-left:auto}
.erfk .dur .nach{flex:0 0 100%;text-align:right;margin-top:2px}

/* Bemerkung und Auslagen als schmale Zeilen: zu, bis jemand sie braucht. */
/* Bemerkung und Auslagen sind im Alltag leer. Sie bekommen je EINE
   Zeile ohne Rahmen und ohne Untertitel: der Untertitel «Einkauf,
   Ausflug, Fahrkosten — nur falls etwas angefallen ist» erklaerte drei
   Zeilen lang etwas, das niemand fragt, solange nichts angefallen ist.
   Er steht weiter im Dokument und erscheint, sobald die Zeile offen
   ist - der Deckel verschweigt also nichts (die Regel von JP). */
.grp.duenn{margin:0;border:0;border-bottom:1px solid var(--line);
      border-radius:0;background:none}
.grp.duenn:first-of-type{margin-top:14px;border-top:1px solid var(--line)}
.grp.duenn > summary{padding:13px 2px;gap:8px}
.grp.duenn > summary .gt b{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.grp.duenn:not([open]) > summary .gt span{display:none}
.grp.duenn > summary .gp{color:var(--ink-3)}
.grp.duenn .inh{padding:0 2px 14px}

/* Die Bewertung. Sie stand als grosse Karte unter dem Wochenblock und
   war darum das Auffaelligste der ganzen Seite - Marco: «Die grosse
   Bewertung unten ist einfach ein bisschen stoerend.» Jetzt ein
   umrandeter Knopf in der Bereichsfarbe, klein, aber sichtbar: «ein
   bisschen auffaelliger, aber nicht zu gross». */
/* Eine Warnung, die sich auf eine Zeile legt. Das Dreieck bleibt, die
   Farbe bleibt - nur der Fliesstext liegt unter dem Deckel. */
.warnz > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
      gap:8px;font-size:13px;line-height:1.35}
.warnz > summary::-webkit-details-marker{display:none}
.warnz > summary::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;
      border-bottom:1.8px solid currentColor;transform:rotate(45deg);margin-left:auto;
      flex:none;opacity:.6;margin-top:-3px}
.warnz[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.warnz-mehr{font-size:13px;line-height:1.5;margin-top:9px}

/* Dasselbe, eine Stufe leiser: ein Wort und ein rundes «i». */
.infoz > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
      gap:7px;font-size:12.5px;color:var(--ink-3)}
.infoz > summary::-webkit-details-marker{display:none}
.infoz .iz{width:17px;height:17px;border-radius:999px;border:1px solid currentColor;
      display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;
      font-weight:700;font-style:italic;line-height:1;flex:none}
.infoz-mehr{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-top:7px}
/* Der Hinweis zur fremden Erfassung steht in einem gelben Kasten. Zu
   bleibt davon nur das «i» - ein Kasten um ein einzelnes Zeichen sieht
   aus wie ein Fehler. */
.note.wn:has(.infoz:not([open])){background:none;border:0;padding:0}

.bwGrp{margin-top:18px}
.bwGrp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
      justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;
      background:var(--accent-soft);border:1px solid var(--accent-line, #CBDCEF);
      color:var(--accent);font-size:13px;font-weight:600}
.bwGrp > summary::-webkit-details-marker{display:none}
.bwGrp > summary svg{flex:none}
.bwGrp[open] > summary{margin-bottom:12px}
/* Der Titel steht jetzt auf dem Deckel. Er BLEIBT im Dokument, weil
   bwBauen() und mehrere Pruefungen ihn lesen - nur sehen soll man ihn
   nicht zweimal. */
.bwGrp h2{display:none}
.bwGrp[hidden]{display:none}
/* Empfehlung durch die angestellte Person */
.empf-lead{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.empf-lb{font-size:12px;color:var(--ink-3);margin:16px 0 7px;line-height:1.45}
.empf-ta{width:100%;font-size:14px;line-height:1.55;padding:12px 13px;border:1px solid var(--line-feld);
  border-radius:11px;background:var(--surface);color:var(--ink);font-family:var(--ui)}
.empf-btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.empf-hi{background:var(--marke-soft);border-radius:13px;padding:17px 18px;margin-bottom:20px}
.ntsp{position:sticky;top:0;z-index:60;background:#b3291b;color:#fff;
  padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ntsp-t{font-weight:800;font-size:15px;letter-spacing:.2px}
.ntsp-s{font-size:13.5px;line-height:1.45;flex:1 1 220px;opacity:.95}
.ntsp-x{background:#fff;color:#b3291b;border:0;border-radius:9px;
  padding:7px 13px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
/* ---------- Die Rueckfrage (24. Oktober 2026) ----------
   Marco, nach einem Blick auf eine fremde App: «Die Dialoge finde ich
   super.» Gemeint ist die ruhige Form: weisser Kasten in der Mitte, Titel,
   ein Satz, der sagt was folgt, und zwei gleich grosse Knoepfe nebeneinander.

   Sie ersetzt das zweimalige Druecken («Wirklich abschliessen») genau dort,
   wo etwas NICHT rueckgaengig zu machen ist. Zweimal druecken sagt nicht,
   WAS passiert - der Kasten schon. Der Kasten steht fest im Dokument und
   wird beschrieben, nie neu gebaut: ein Element, das bei jedem Zeichnen
   neu entsteht, verschluckt den Druck des Fingers (renderNatural(),
   18. Oktober). */
.frg{position:fixed;inset:0;z-index:200;background:rgba(18,32,45,.44);
  display:flex;align-items:center;justify-content:center;padding:22px}
.frg-k{width:100%;max-width:320px;background:var(--surface);border-radius:18px;
  overflow:hidden;text-align:center;box-shadow:0 18px 50px rgba(18,32,45,.3)}
.frg-k h3{font-size:18px;font-weight:800;padding:24px 22px 9px;margin:0}
.frg-k p{font-size:14.5px;line-height:1.5;color:var(--muted);padding:0 22px 22px;margin:0}
.frg-b{display:flex;border-top:1px solid var(--line)}
.frg-b button{flex:1;padding:15px 8px;border:0;background:none;font:inherit;
  font-size:16.5px;color:var(--ink);cursor:pointer}
.frg-b button+button{border-left:1px solid var(--line);font-weight:700}
.frg-b button.gefahr{color:#b3291b}
/* ---------- Das Blatt «Dein Konto» (24. Oktober 2026) ----------
   Eine eigene Seite ueber allem: ruhiger Kopf mit Zurueck-Pfeil, darunter
   nur, was das Konto angeht. Es scrollt selber; der Rumpf dahinter steht
   still (`body.kto-auf`), sonst ist man beim Schliessen woanders. */
/* z-index 160: ueber Kopfleiste (30), Reiterleiste (41) und dem Blatt
   «aufbewahren?» (70), aber UNTER der Rueckfrage (200) - die darf auch
   hier oben noch fragen. Ein Blatt, unter dem die Leisten weiter
   durchscheinen, sieht aus wie ein Fehler und faengt Klicks ab, die man
   dort gar nicht erwartet (24. Oktober 2026, beim ersten Bild gesehen).
   `--paper` ist der deckende Seitengrund; `--bg` gibt es nicht, und eine
   unbekannte Variable heisst «durchsichtig». */
.kto{position:fixed;inset:0;z-index:160;background:var(--paper);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.kto-kopf{position:sticky;top:0;z-index:2;background:var(--paper);
  display:flex;align-items:center;gap:6px;padding:14px 14px 12px;
  border-bottom:1px solid var(--line)}
.kto-zu{width:38px;height:38px;border:0;background:none;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:50%}
.kto-zu:hover{background:var(--line)}
.kto-t{font-size:17px;font-weight:800;letter-spacing:-.2px}
.kto-inh{padding:16px 16px 60px;max-width:640px;margin:0 auto}
/* Die Liste im Blatt: dieselbe Zeile wie bei den Kapiteln der Angaben -
   Zeichen, Titel, kurze Zeile darunter, Pfeil. Eine zweite Bauart fuer
   dieselbe Sache waere eine zweite Antwort auf dieselbe Frage. */
.ktoliste{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:18px}
.ktoliste .lz{display:flex;align-items:center;gap:13px;width:100%;padding:16px;
  background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  position:relative}
.ktoliste .lz + .lz::before{content:"";position:absolute;left:61px;right:0;top:0;
  height:1px;background:var(--line)}
.ktoliste .lz .lt{flex:1;min-width:0}
.ktoliste .lz .lt b{display:block;font-size:16px;font-weight:700}
.ktoliste .lz .lt > span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;
  line-height:1.4;overflow-wrap:anywhere}
.ktoliste .lz .lp{color:var(--ink-3);font-size:19px;font-weight:600;flex:none}
.ktoliste .lz.rot .lt b{color:#b3291b}
.ktoliste .lz.rot .gi{color:#b3291b;background:#fbecea}
@media (hover:hover){.ktoliste .lz:hover{background:var(--surface-3)}}
.ktohd{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:2px 4px 9px}
body.kto-auf{overflow:hidden}
/* Die Abweichung vom Vertrag ist der Kern des Ganzen - sie gehoert zuoberst
   und nicht in eine zugeklappte Gruppe. */
.zvtop{border:1.5px solid var(--warn);background:var(--warn-soft);
  border-radius:var(--r);padding:16px 17px 15px;margin-bottom:20px}
.zvtop .zk{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:800;color:var(--warn);display:flex;align-items:center;gap:6px}
.zvtop .zh{font-size:17px;font-weight:700;line-height:1.3;margin-top:7px;color:var(--ink)}
.zvtop .zliste{margin-top:13px;border-top:1px solid var(--warn);
  border-top-color:color-mix(in srgb, var(--warn) 35%, transparent)}
.zvtop .zr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--warn);
  border-bottom-color:color-mix(in srgb, var(--warn) 22%, transparent)}
.zvtop .zr b{font-weight:600;font-size:14px;flex:none}
.zvtop .zr span{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.zvtop .zr span em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px}
.zvtop .zf{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:12px}
/* Der PDF-Knopf ueber die ganze Breite, die zwei leisen daneben. */
.zvtop .bar{margin-top:14px;gap:9px}
.zvtop .bar .btn.dk{flex:1 1 100%}
.zvtop .bar .btn.gh{flex:1 1 40%;white-space:normal}
.zvtop .note{margin-top:9px}
/* ---------------- Der Kalender ----------------
   Ein Monat auf einen Blick, vier Zustaende, und ein Tipp klappt die
   Woche auf. Keine Ziehgesten: eine Tageszelle ist so gross wie eine
   Fingerkuppe, und Ziehen und Scrollen sind dieselbe Bewegung. */
.knav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.knav b{font-size:17px;color:var(--ink);font-weight:700}
.knav button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:16px;cursor:pointer}
.knav button:disabled{opacity:.35}
.kwd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.kwd span{text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  color:var(--ink-3);text-transform:uppercase}
.kgr{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.kd{aspect-ratio:1/1.16;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;font-size:13.5px;color:var(--ink);background:none;border:0;
  font-family:var(--ui);font-variant-numeric:tabular-nums;cursor:pointer;padding:0}
.kd .kt{font-size:8px;font-weight:700;line-height:1.12;letter-spacing:-.01em}
.kd .kt.ab{opacity:.62}
.kd.aus{color:var(--ink-3);opacity:.4}
.kd.erfasst{background:var(--sec);color:#fff;font-weight:700}
.kd.erfasst .kt{color:var(--sec-soft)}
.kd.geplant{border:1.6px dashed var(--sec);color:var(--sec-tief);font-weight:700}
.kd.geplant .kt{color:var(--sec-tief)}
/* Ein Tag, an dem die Zeiten von den festen Tagen abweichen. Er behaelt
   die gestrichelte Umrandung - geplant ist er ja - wechselt aber die
   Farbe, damit man beim Ueberfliegen sieht: hier ist etwas anders. */
.kd.anders{border-color:var(--marke);color:var(--marke)}
.kd.anders .kt{color:var(--marke)}
.kd.offen{background:var(--warn-soft);border:1.6px solid var(--warn);color:var(--warn);font-weight:700}
.kd.offen .kt{color:var(--warn)}
.kd.weg{color:var(--ink-3);opacity:.55;text-decoration:line-through}
.kd.heute{box-shadow:0 0 0 2px var(--marke)}
.kd.sel{background:var(--marke);color:#fff;font-weight:700;box-shadow:none}
.kd.sel .kt{color:var(--marke-soft)}
.kd.ziel{border:2px solid var(--marke);background:var(--marke-soft);color:var(--marke);font-weight:700}
.kd.matt{opacity:.3}
/* Ein Strich je Person, die an diesem Tag arbeitet. Voll heisst erfasst,
   blass heisst geplant - dieselbe Unterscheidung wie die gestrichelte
   Umrandung bei einer einzelnen Person, nur auf Strichbreite gebracht. */
.kd .kp{display:flex;gap:2px;justify-content:center;align-items:center;height:5px;margin-top:2px}
.kd .kp i{display:block;width:6px;height:5px;border-radius:2px}
.kd .kp i.pl{opacity:.4}
/* Auf dem dunklen, angetippten Tag verschwindet ein Strich mit 40 Prozent
   fast ganz - dort braucht auch der blasse Strich Deckung, sonst sieht es
   aus, als arbeite an diesem Tag niemand. */
.kd.sel .kp i{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.kd.sel .kp i.pl{opacity:.72}
.kd .kp b{font-size:8px;font-weight:700;color:var(--ink-3);line-height:1;margin-left:1px}
#kaTag{margin-top:11px;padding-top:10px;border-top:1px solid var(--line-2)}
.kahead{font-weight:700;font-size:13px;margin-bottom:7px}
.kahint{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.kazeile{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
.kazeile+.kazeile{border-top:1px solid var(--line-2)}
.kazeile .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kazeile .zt{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:700;font-size:12.5px}
/* In der Mannschaftsansicht sprechen die Bloecke darunter alle von EINER
   Person - feste Tage, Gleitzeit, die naechsten Einsaetze. Sie stehen zu
   lassen hiesse, sie auf alle zu beziehen, und genau das waere falsch. */
#v-kal.kaOnly #kalFragen,#v-kal.kaOnly #kalNaechst,#v-kal.kaOnly #kalMuster,
#v-kal.kaOnly #kalWoche,#v-kal.kaOnly #kalGleit{display:none}
.kleg{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line-2)}
.kleg i{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);font-style:normal}
.ksw{width:13px;height:13px;border-radius:4px;flex:none}
.ksw.a{background:var(--sec)}
.ksw.b{border:1.6px dashed var(--sec)}
.ksw.c{background:var(--warn-soft);border:1.5px solid var(--warn)}
.ksw.d{border:1.6px dashed var(--marke)}
.kmu{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:13px;padding:0 2px}
.kzeile{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:12px 13px;margin-top:8px;width:100%;text-align:left;
  font-family:var(--ui);cursor:pointer}
.kzeile.jetzt{border-color:var(--sec);border-width:1.6px}
.kzeile.leer{background:none;border-style:dashed;opacity:.8}
.kzeile .kdt{width:40px;flex:none;text-align:center}
.kzeile .kdt b{display:block;font-size:17px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.kzeile .kdt span{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.kzeile .kin{flex:1;min-width:0}
.kzeile .kin b{display:block;font-size:14.5px;color:var(--ink);font-family:var(--mono);font-weight:600}
.kzeile.leer .kin b{color:var(--ink-3);font-weight:400;font-family:var(--ui);font-size:14px}
.kzeile .kin span{font-size:12px;color:var(--ink-3);display:block;margin-top:1px}
/* Eine Anfrage: was gefragt wird, von wem - und die Antwort gleich daneben.
   Ja und Nein sind zwei kurze Woerter, die gehoeren nebeneinander, auch auf
   dem schmalsten Telefon. Untereinander gestapelt saehen sie aus wie zwei
   getrennte Entscheide statt wie eine Frage mit zwei Antworten. */
.anfr{border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-top:10px;
  background:var(--surface)}
.anfr:first-child{margin-top:0}
.anfr b{display:block;font-size:14.5px;color:var(--ink);font-weight:650;line-height:1.3}
.anfr span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.35}
.anfr .bar{display:flex;gap:9px;flex-wrap:nowrap;margin-top:11px}
.anfr .bar .btn{flex:1;min-width:0;white-space:nowrap;padding:9px 10px}
.krt{flex:none;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px}
.krt.g{background:var(--sec-soft);color:var(--sec-tief)}
.krt.e{background:var(--gut-soft);color:var(--gut)}
.krt.w{background:var(--warn-soft);color:var(--warn)}
/* Die andere Seite hat etwas geaendert */
/* Die Wochenauswahl beim Verschieben */
.knav.wnav{margin-top:14px}
.knav.wnav b{font-size:14px}
.wgr{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.wz{position:relative;aspect-ratio:1/1.25;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;font-family:var(--ui);cursor:pointer;padding:0;color:var(--ink)}
.wz .ww{font-size:8.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.wz b{font-size:15px;font-variant-numeric:tabular-nums;line-height:1}
.wz.heute{box-shadow:0 0 0 1.5px var(--marke)}
.wz.an{background:var(--marke);border-color:var(--marke);color:#fff}
.wz.an .ww{color:var(--marke-soft)}
.wz.her{opacity:.42;text-decoration:line-through;cursor:default}
.wz.voll::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:99px;background:var(--sec)}
.wz.an.voll::after{background:#fff}
.wleg{font-size:11.5px;color:var(--ink-3);margin-top:7px}
.kmeld{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-top:12px;
  background:var(--sec-soft);border:0;border-radius:13px;padding:11px 13px;
  font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--sec-tief);cursor:pointer}
/* Ein Nein darf nicht aussehen wie eine gute Nachricht. Nicht rot - es ist
   kein Fehler, sondern eine Antwort -, aber auch nicht gruen. */
.kmeld.nein{background:var(--surface-2);color:var(--ink-2)}
.kmeld.nein .bic{background:var(--ink-3)}
.kmeld .bic{flex:none;width:22px;height:22px;border-radius:99px;background:var(--sec);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800}
/* Das Blatt von unten */
.blatt-hg{position:fixed;inset:0;background:rgba(20,33,61,.38);z-index:70}
.blatt{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--surface);
  border-radius:24px 24px 0 0;box-shadow:0 -14px 40px rgba(20,33,61,.22);
  padding:9px 18px calc(24px + env(safe-area-inset-bottom,0px));max-width:var(--sp);margin:0 auto;
  max-height:86vh;overflow-y:auto}
.blatt-griff{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 15px}
.blatt h3{font-size:19px;font-weight:700;color:var(--ink);line-height:1.25;margin:0}
.blatt .bs{font-size:14px;color:var(--ink-3);margin-top:3px;font-family:var(--mono)}
.blatt .bs.klar{font-family:var(--ui)}
/* Eine erklaerende Zeile im Blatt - dort, wo sonst geraten wird, welcher
   Knopf der richtige ist. */
.blatt .bh{font-size:13px;line-height:1.5;color:var(--ink-3);font-family:var(--ui);
  background:var(--surface-3);border-radius:11px;padding:11px 13px}
.bopt{display:flex;align-items:center;gap:13px;padding:14px 4px;border-bottom:1px solid var(--line-2);
  width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;
  font-family:var(--ui);cursor:pointer}
.bopt:last-of-type{border-bottom:0}
.bopt .bic{width:34px;height:34px;border-radius:10px;background:var(--surface-3);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--sec)}
.bopt.warn .bic{color:var(--warn);background:var(--warn-soft)}
.bopt b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.bopt small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.bchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bchip{border:1.5px solid var(--line);background:var(--surface);border-radius:13px;padding:10px 13px;
  font-size:15px;font-weight:700;color:var(--ink);text-align:center;min-width:74px;
  font-family:var(--ui);cursor:pointer}
.bchip small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);margin-top:2px}
.bchip.an{border-color:var(--marke);background:var(--marke);color:#fff}
.bchip.an small{color:var(--marke-soft)}
.bchip.mehr{font-weight:600;font-size:13.5px;color:var(--ink-3)}
.blatt .bar{margin-top:16px}
.blatt .bar .btn{flex:1}
/* Wochentage waehlen */
.wtw{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.wtb{flex:1;min-width:40px;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;
  padding:11px 0;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.wtb.an{border-color:var(--sec);background:var(--sec);color:#fff}
/* ---------- Impressum, Datenschutz und AGB ----------
   Erreichbar auch ohne Anmeldung: wer ein Konto eroeffnen soll, muss vorher
   nachlesen koennen, was mit seinen Daten geschieht. */
#v-recht{max-width:760px;margin:0 auto;padding:22px 18px 70px}
.rt-kopf{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.rt-kopf h1{font-size:25px;line-height:1.15;margin:0;flex:1}
.rt-nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}
.rt-nav button{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.rt-nav button.an{background:var(--marke);border-color:var(--marke);color:#fff}
.rt-stand{font-size:12px;color:var(--ink-3)}
.rt h2{font-size:11px;letter-spacing:.09em;margin:26px 0 8px}
.rt h3{font-size:15.5px;font-weight:700;margin:22px 0 6px;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--ink)}
.rt p{font-size:14.5px;line-height:1.65;margin:0 0 11px;color:var(--ink-2)}
.rt p b{color:var(--ink)}
.rt ul{margin:0 0 12px;padding-left:20px}
.rt li{font-size:14.5px;line-height:1.6;margin-bottom:6px;color:var(--ink-2)}
.rt .lead{font-size:15.5px;line-height:1.6;color:var(--ink);margin-bottom:18px}
.rt .kasten{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:16px 0}
.rt .kasten p:last-child{margin-bottom:0}
.rt .luecke{background:var(--warn-soft);color:var(--warn);font-weight:700;
  padding:1px 6px;border-radius:5px}
/* Die Anleitung: Schritte mit Nummer, und sie muss sich sauber ausdrucken. */
.bereit{background:var(--surface-3);border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;margin-top:14px}
.bereit-t{font-size:13px;font-weight:700;color:var(--ink)}
.bereit-s{font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:3px}
/* Fuenf Karten, jede ein Bild und eine Zeile. Viel Luft - die Leichtigkeit
   kommt aus dem Tempo, nicht aus Verzierung. */
.anl-lead{font-size:16px;line-height:1.5;color:var(--ink-2);margin:2px 0 26px}
/* Drei Bloecke, dazwischen der Pfeil: wer macht was, und wann geht es
   an die andere Seite ueber. */
.anl-gr{border:1px solid var(--line);border-radius:20px;background:var(--surface-3);
  padding:14px;overflow:hidden}
.anl-gk{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding:0 6px 12px}
.anl-p{flex:none;width:38px;height:38px;border-radius:50%;background:var(--marke);color:#fff;
  display:flex;align-items:center;justify-content:center;line-height:0}
.anl-gi{display:flex;flex-direction:column;gap:10px}
.anl-pf{display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--marke);padding:11px 0 9px}
.anl-pf span{font-size:12.5px;color:var(--ink-3);font-weight:600;text-align:center;
  letter-spacing:0;text-transform:none}
.anl-k{display:flex;align-items:center;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.anl-b{position:relative;flex:none;color:var(--marke);line-height:0}
.anl-z{position:absolute;right:-7px;top:-7px;width:26px;height:26px;border-radius:50%;
  background:var(--marke);color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.anl-w{min-width:0}
.anl-t{font-size:17.5px;font-weight:700;color:var(--ink);line-height:1.25}
.anl-u{font-size:13.5px;color:var(--ink-3);line-height:1.45;margin-top:4px}
.anl-ende{font-size:14px;color:var(--ink-3);text-align:center;margin-top:26px;line-height:1.5}
/* «Soldena aufs Handy legen» — der Block auf der Anleitungsseite.
   Zwei Spalten am Bildschirm, untereinander auf dem Telefon. Genau dort
   wird er am ehesten gelesen, darum ist die einspaltige Form die
   wichtigere. */
.hb-ab{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.hb-h{font-size:21px;font-weight:700;color:var(--ink);margin:0 0 8px}
.hb-lead{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 20px}
.hb-wege{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hb-w{border:1px solid var(--line);border-radius:16px;background:var(--surface-3);padding:16px 17px}
.hb-wt{font-size:16px;font-weight:700;color:var(--ink)}
.hb-wb{font-size:12.5px;font-weight:600;color:var(--marke);margin-top:2px}
.hb-s{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.hb-s li{font-size:14px;line-height:1.45;color:var(--ink-2)}
.hb-f{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:12px 0 0;
  padding-top:10px;border-top:1px dashed var(--line)}
.hb-ende{font-size:14px;line-height:1.5;color:var(--ink-3);margin:18px 0 0}
@media(max-width:620px){ .hb-wege{grid-template-columns:1fr} }
/* Der Streifen im angemeldeten Bereich. Die Knoepfe sind 36 Punkte hoch —
   dieselbe Untergrenze wie beim Vorschau-Balken, ein Daumen trifft
   weniger nicht. */
.hbb{display:flex;align-items:center;gap:10px;width:100%;max-width:var(--sp);
  margin:0 auto;padding:9px 12px;border-radius:var(--r);
  background:var(--surface-3);border:1px solid var(--line);font-size:12.5px}
.hbb .tx{flex:1;min-width:0;color:var(--ink-2);line-height:1.4}
.hbb .tx b{color:var(--ink)}
.hbb-j{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:9px;
  background:var(--marke);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.hbb-x{flex:none;width:36px;height:36px;border:0;border-radius:9px;background:transparent;
  color:var(--ink-3);font:inherit;font-size:15px;line-height:1;cursor:pointer}
.hbb-x:hover{background:var(--surface-2);color:var(--ink)}
/* Das Versions-Band. Es benutzt die Bauteile des Streifens darueber und
   aendert nur die Farbe: wer die App offen hat, soll es BEMERKEN, ohne dass
   es wie eine Stoerung aussieht. Warn-Ton, nicht Stop-Ton — es ist nichts
   kaputt, es ist nur etwas Neueres da.
   KEIN Wegklick-Kreuz, mit Absicht: eine veraltete Fassung rechnet unter
   Umstaenden mit alten Saetzen weiter. Das darf man nicht wegwischen
   koennen, sonst sitzt jemand monatelang auf alten Zahlen und weiss es
   nicht. */
.vbb{background:var(--warn-soft);border-color:var(--warn)}
.vbb .tx{color:var(--ink-2)}
.vbb .tx b{color:var(--warn)}
.vbb .hbb-j[disabled]{opacity:.6;cursor:default}
/* Der Streifen fuer die Angaben, die seit dem 17. Oktober 2026 nicht
   mehr beim Einrichten verlangt werden. Er benutzt dieselben Bauteile
   und traegt den Markenton, nicht den Warnton: es ist nichts kaputt und
   nichts versaeumt - es ist nur noch etwas zu tun. Ein Warnton waere
   hier eine Drohung, und eine Drohung gleich beim ersten Oeffnen ist
   genau das, was wir eben abgeschafft haben.
   KEIN Wegklick-Kreuz: ohne diese Angaben gibt es keinen Vertrag und
   kein Lohnblatt. Er verschwindet von selber, sobald sie da sind. */
.fbb{background:var(--marke-soft);border-color:var(--marke)}
.fbb .tx b{color:var(--marke)}
/* Der Vermerk zur unbestaetigten Adresse. Bernstein statt Markenfarbe:
   er ist ein Hinweis, kein Angebot - und blasser als das Lohnband
   darueber, weil er nichts aufhaelt. */
.mbb{background:var(--warn-soft,#fef3c7);border-color:var(--warn,#d97706)}

/* Das Blatt, das von unten hochfaehrt.
   ===================================
   Marco am 18. Oktober 2026: «dann kommt eben die Abfrage, nachdem man
   zwei Sachen gemacht hat. Nur E-Mail und Passwort, fertig.»

   Warum ein Blatt und kein Band: ein Band oben uebersieht man, waehrend
   man unten tippt - und genau dort steht der Finger. Ein Blatt kommt dem
   Daumen entgegen und verdeckt die App nur, solange die Frage offen ist.
   Warum keine eigene Seite: eine Seite nimmt den Zusammenhang weg, und
   der Zusammenhang IST hier das Argument - «das hier willst du behalten».

   Es blockiert nicht: der dunkle Grund und «noch nicht» fuehren beide
   zurueck, und was erfasst ist, bleibt erfasst. */
#blatt{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
#blatt[hidden]{display:none}
.bl-ovl{position:absolute;inset:0;background:rgba(20,33,61,.42);border:0;padding:0;width:100%;cursor:pointer}
.bl-box{position:relative;width:100%;max-width:var(--sp,620px);background:var(--surface,#fff);color:var(--ink,#14213d);
  border-radius:var(--r,16px) var(--r,16px) 0 0;box-shadow:0 -10px 34px rgba(20,33,61,.22);
  padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow:auto;
  animation:blAuf .22s ease-out}
@keyframes blAuf{from{transform:translateY(18px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bl-box{animation:none}}
.bl-griff{width:38px;height:4px;border-radius:2px;background:var(--line,#ede3d6);margin:2px auto 12px}
.bl-ok{display:flex;align-items:center;gap:8px;color:var(--gut,#15803d);font-weight:600;font-size:15px;margin-bottom:10px}
.bl-box h2{margin:0 0 8px;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.bl-lead{margin:0 0 4px;color:var(--ink-2,#5a6478);line-height:1.5}
.bl-spaeter{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink-2,#5a6478);
  font:inherit;text-decoration:underline;cursor:pointer;padding:8px}
.bl-fuss{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3,#6b7382);text-align:center}

/* Der Knopf an der Stelle, wo der Betrag stuende. */
.row.lohnweg .dt{color:var(--ink-2,#5a6478)}
.row.lohnweg .vl{text-align:right}

/* Die laute Warnung im Monat und im Lohnblatt.
   ===========================================
   Oben im Balken steht dieselbe Sache leise, und das ist dort richtig:
   wer Stunden erfasst, soll nicht angeschrien werden. Hier ist es anders
   - aus diesen Zahlen entsteht eine Auszahlung, und eine Auszahlung auf
   unvollstaendiger Grundlage holt niemand zurueck. Darum Rot, darum ein
   Kasten, darum der Satz, was man NICHT tun darf. */
.rechWarn{background:var(--stop-soft,#fbe7e3);border-left:3px solid var(--stop,#c0392b);
  border-radius:0 10px 10px 0;padding:14px 16px;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}
.rechWarn[hidden]{display:none}
.rechWarn b{display:block;margin-bottom:3px}
.rechWarn p{margin:0;line-height:1.5;font-size:14px}
.rechWarn .hbb-j{align-self:flex-start}
.mbb .tx b{color:var(--warn,#92400e)}
@media (max-width:420px){
  .anl-k{gap:12px;padding:12px 13px}
  .anl-t{font-size:16px}
  .anl-gr{padding:12px 11px}
}
.rt .kasten.warn{background:var(--warn-soft);border-color:var(--warn)}
.rt .kasten.warn p{color:var(--ink-2)}
/* ---------- Die Verkaufsseite ----------
   Sie soll auf dem Telefon gelesen werden, wo die meisten den Link
   oeffnen. Darum eine Spalte, grosse Zeilenabstaende und Knoepfe, die
   man mit dem Daumen trifft. Auf dem Computer wird aus jeder Reihe ein
   Raster - derselbe Text, mehr Luft. */
#v-start{max-width:1000px;margin:0 auto;padding:0 0 60px}
.st-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;max-width:1000px;margin:0 auto}
.st-an{background:none;border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.st-an:hover{border-color:var(--marke);color:var(--marke)}
/* Der Weg in die App gehoert in den Kopf.
   Am 17. Oktober 2026 am iPhone nachgemessen: der erste Knopf, der
   irgendwo in die App fuehrt, lag 923 Pixel weit unten - eine ganze
   Bildschirmhoehe. Oben stand nur «Anmelden», und das ist fuer Leute,
   die schon ein Konto haben. Ein Fremder, der auf eine Anzeige geklickt
   hat, sah also keinen einzigen Weg hinein, ohne zu scrollen.
   Gefuellt, damit er der staerkere der beiden Knoepfe ist: ausprobieren
   kostet nichts, anmelden setzt ein Konto voraus. */
.st-test{background:var(--marke);border-color:var(--marke);color:#fff}
.st-test:hover{background:var(--marke);border-color:var(--marke);color:#fff;opacity:.9}
@media(max-width:560px){
  /* Am Handy ist der Platz knapp: enger setzen, aber beide behalten. */
  .st-an{padding:7px 12px;font-size:13px}
}
.st-hero{padding:30px 20px 24px;max-width:1000px;margin:0 auto}
.st-hero h1{font-size:40px;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--ink);
  font-weight:700;text-transform:none}
.st-sub{font-size:18px;line-height:1.55;color:var(--ink-2);margin:18px 0 0;max-width:34em}
/* Der Film. Er liegt auf unserem eigenen Server, nicht bei YouTube: ein
   eingebettetes Video von dort setzt Cookies und meldet jeden Besucher
   weiter, bevor er auch nur auf Abspielen gedrueckt hat - und die ganze
   Seite laedt sonst nichts von Dritten.
   `preload="none"` ist Absicht: 3,4 MB gehoeren nicht ungefragt ueber das
   Mobilfunknetz. Sichtbar ist zuerst nur das Standbild; geladen wird erst,
   wenn jemand wirklich hinschaut. */
.st-kino{max-width:920px;margin:22px auto 0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 14px 38px rgba(20,33,61,.13)}
.st-kino video{display:block;width:100%;height:auto;background:var(--paper)}
@media (max-width:760px){ .st-kino{border-radius:14px;margin-top:16px} }

/* Die Filmseite /filme. Zweiunddreissig kurze Filme auf einer Seite.
   Zwei Entscheide, die hier wichtig sind:

   1. Das Standbild ist die Titelkarte des Films - blau, mit der Frage
      darauf. Ein Bild aus der Mitte sieht huebscher aus, zeigt aber ein
      Formular, das ohne Zusammenhang niemand versteht. Wer die Seite
      ueberfliegt, soll in einer Sekunde sehen, welche Frage welcher Film
      beantwortet.

   2. Geladen wird nichts, bevor jemand draufdrueckt. Auf der Seite liegen
      58 MB Film. Stuende da neunundzwanzigmal <video preload="metadata">,
      zoege ein einziger Seitenaufruf ueber dem Mobilfunknetz schon ein
      paar Megabyte - fuer Filme, die niemand anschaut. Darum ist jede
      Kachel zuerst nur ein Bild; das <video> entsteht erst beim Klick. */
.st-fgruppe{margin:0 0 38px}
.st-fgitter{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
@media (max-width:900px){ .st-fgitter{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (max-width:560px){ .st-fgitter{grid-template-columns:1fr} }
.st-fk{display:flex;flex-direction:column;min-width:0}
.st-fk-bild{position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);padding:0;margin:0;border-radius:12px;
  overflow:hidden;cursor:pointer;
  background:var(--surface);box-shadow:0 6px 18px rgba(20,33,61,.10)}
.st-fk-bild img{display:block;width:100%;height:100%;object-fit:cover}
.st-fk-bild:hover{box-shadow:0 10px 26px rgba(20,33,61,.22)}
.st-fk-bild:focus-visible{outline:3px solid var(--marke);outline-offset:3px}
/* Der Abspielpfeil. Er steht unten links und NICHT in der Mitte: das
   Standbild ist eine Aufnahme aus der App, und in der Mitte steht dort
   die Zeile, die den Film erklaert. Ein Knopf in der Mitte liegt genau
   darauf - beim ersten Versuch war das so, und man las weder das eine
   noch das andere.
   Blauer Kreis statt weissem, weil die Aufnahmen hell sind. 48 Punkte:
   knapp ueber dem Mass, unter dem ein Daumen danebentrifft. */
.st-fk-pfeil{position:absolute;left:10px;bottom:10px;
  width:48px;height:48px;border-radius:50%;background:var(--marke);
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.3);
  transition:transform .12s ease}
.st-fk-bild:hover .st-fk-pfeil{transform:scale(1.09)}
.st-fk-pfeil svg{display:block;width:18px;height:18px;margin-left:3px;
  fill:var(--paper)}
.st-fk-dauer{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.66);
  color:#fff;font-size:12px;font-weight:600;line-height:1;padding:4px 7px;
  border-radius:6px;font-variant-numeric:tabular-nums}
/* «height:auto» ist hier nicht Zierde, sondern noetig: das <video> traegt
   width="1920" height="1080" als Attribut. Das zaehlt als gesetzte Hoehe,
   und sobald Breite UND Hoehe feststehen, wird aspect-ratio ignoriert -
   der Film stand dann als hoher schwarzer Kasten in der Kachel. */
.st-fk video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  border-radius:12px;background:#000;
  box-shadow:0 6px 18px rgba(20,33,61,.12)}
.st-fk b{display:block;font-size:15px;line-height:1.35;color:var(--ink);
  font-weight:700;margin:10px 0 3px}
/* ACHTUNG: hier stand zuerst «.st-fk span». Das traf auch den Abspielpfeil
   und das Dauer-Etikett - beides sind <span> in derselben Kachel. Sie
   bekamen display:block statt display:grid, und der Pfeil sass darauf
   oben links in der Ecke statt in der Mitte des Kreises. Darum eine
   eigene Klasse fuer die Textzeile. */
.st-fk-satz{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}
.st-fk-text{margin-top:8px}
.st-fk-text>summary{display:inline-block;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--sec);list-style:none;padding:2px 0}
.st-fk-text>summary::-webkit-details-marker{display:none}
.st-fk-text>summary::marker{content:""}
.st-fk-text>summary::before{content:"+";display:inline-block;width:12px}
.st-fk-text[open]>summary::before{content:"\2013"}
.st-fk-text>summary:hover{text-decoration:underline}
.st-fk-text>summary:focus-visible{outline:3px solid var(--marke);outline-offset:3px}
.st-fk-text p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.st-fmehr{max-width:920px;margin:14px auto 0;text-align:right}
.st-fmehr a{color:var(--marke);font-weight:600;font-size:15px;text-decoration:none}
.st-fmehr a:hover{text-decoration:underline}
@media (max-width:760px){ .st-fmehr{text-align:left} }

/* Echte Bilder aus der App. Gezeichnete Symbole erklaeren, was die App tut -
   aber wer Geld ausgeben soll, will das Ding sehen. Darum drei Aufnahmen aus
   der laufenden App: erfundene Personen, erfundene Zahlen, echte Oberflaeche.
   Auf dem Telefon nebeneinander zum Wischen, am Computer nebeneinander. */
.st-schirme{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.st-schirme figure{margin:0}
.st-schirme img{display:block;width:100%;height:auto;border-radius:18px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 14px 38px rgba(20,33,61,.13)}
.st-schirme figcaption{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.st-schirme figcaption b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:3px}
.st-rat-bild{margin:22px auto 0;max-width:270px;text-align:center}
.st-rat-bild img{display:block;width:100%;height:auto;border-radius:18px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 14px 38px rgba(20,33,61,.13)}
.st-rat-bild figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
@media (max-width:760px){
  .st-schirme{grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .st-schirme figure{scroll-snap-align:center}
  .st-schirme figcaption{font-size:14px}
}

/* Die Kategoriezeile. Marco: «Eigentlich ist es eine Zeiterfassungs-, Lohn-
   und Kalender-App.» Als Schlagzeile waere das eine Zutatenliste - und sie
   stellte uns gleichzeitig in drei volle Regale, in denen je ein Spezialist
   sitzt. Darum steht oben die Arbeit, die wir abnehmen, und gleich darunter
   die Zutaten: sie sind der Beweis, dass es wirklich alles an einem Ort ist,
   und es sind die Woerter, nach denen bei Google gesucht wird. */
.st-kat{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.st-kat b{font-weight:700;color:var(--marke)}
.st-kat .p{color:var(--ink-3);padding:0 3px}
.st-kat + .st-sub{margin-top:11px}
@media (max-width:760px){ .st-kat{font-size:15px} }
.st-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.st-b1{background:var(--marke);color:#fff;border:0;border-radius:999px;padding:15px 26px;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.st-b1:hover{background:var(--marke-tief,#0c2a4f)}
/* Der zweite Knopf traegt seit dem 17. Oktober 2026 die Markenfarbe
   statt Grau. Marco: «beide ein bisschen farbig». Grau liest sich wie
   abgeschaltet - und ein Knopf, den man fuer tot haelt, drueckt
   niemand. Zweitrangig bleibt er trotzdem: Umriss statt Fuellung. */
.st-b2{background:none;color:var(--marke);border:1.5px solid var(--marke);border-radius:999px;
  padding:15px 24px;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.st-b2:hover{background:var(--marke-soft)}
.st-klein{font-size:13px;color:var(--ink-3);line-height:1.6;margin:16px 0 0}
.st-link{background:none;border:0;padding:0;font:inherit;color:var(--marke);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.st-ab{padding:40px 20px;max-width:1000px;margin:0 auto}
.st-hell{background:var(--surface-3);max-width:none;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.st-hell > *{max-width:1000px;margin-left:auto;margin-right:auto}
.st-ab h2{font-size:26px;line-height:1.15;margin:0 0 6px;color:var(--ink);font-weight:700;
  letter-spacing:-.01em;text-transform:none}
.st-lead{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;max-width:36em}
.st-drei, .st-vier{display:grid;gap:14px;margin-top:22px}
.st-drei{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.st-vier{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.st-k{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 19px}
.st-k b{display:block;font-size:16.5px;color:var(--ink);line-height:1.3;margin-bottom:7px}
.st-k p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.st-schritte{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.st-schritte li{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 19px}
.st-nr{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;background:var(--marke);color:#fff;font-size:16px;font-weight:700;
  margin-bottom:12px}
.st-schritte b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}
.st-schritte p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.st-preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin:6px 0 22px}
.st-p{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.st-p2{border-color:var(--marke);box-shadow:0 0 0 1px var(--marke)}
.st-pl{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.st-p b{display:block;font-size:30px;line-height:1.15;color:var(--ink);margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.st-ps{display:block;font-size:13.5px;color:var(--ink-3)}
.st-unser-k{display:block;width:100%;margin-top:12px;background:#fff;color:var(--marke);
  border:0;font-weight:700}
.st-unser-k:hover{background:rgba(255,255,255,.88)}
.abo-knapp{border-color:#e0a63a;box-shadow:0 0 0 2px rgba(224,166,58,.16)}
/* Gesperrt heisst sichtbar gesperrt - nicht ausgegraut und tot, sondern
   gedaempft und anklickbar: der Klick erklaert dann, woran es haengt. */
.btn.gesperrt{opacity:.62;border-style:dashed}
.abo-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:13px 16px;margin-bottom:12px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface-2,#fff);cursor:pointer;
  font:inherit;text-align:left}
.abo-zeile:hover{border-color:var(--marke)}
.abo-zl{font-size:14.5px;color:var(--ink-2)}
.abo-zr{flex:none;font-size:14.5px;font-weight:700;color:var(--marke)}
.gut-oder{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.gut-zeile{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.gut-zeile input{flex:1 1 180px;min-width:0;text-transform:uppercase;letter-spacing:.06em}
/* Die sechs grossen Karten. Eine je Bildschirm, im Wechsel links/rechts. */
.st-gross{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.st-gk{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  background:var(--surface-2,#fff);border:1px solid var(--line);border-radius:24px;
  padding:34px 38px}
.st-gk.um .st-gk-b{order:2}
.st-gk-b{background:var(--surface-3,#f2f6fb);border-radius:18px;padding:14px;
  display:flex;align-items:center;justify-content:center}
.st-gk-b svg{width:100%;height:auto;display:block}
.st-gk-k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--marke);background:rgba(18,58,107,.09);
  padding:5px 11px;border-radius:99px}
.st-gk-t h3{font-size:29px;line-height:1.14;letter-spacing:-.015em;margin:14px 0 10px}
.st-gk-t p{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.st-gk-l{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px}
.st-gk-l li{position:relative;padding-left:27px;font-size:15px;line-height:1.45;
  color:var(--ink-2)}
.st-gk-l li:before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;
  border-radius:99px;background:var(--marke)}
.st-gk-l li:after{content:"";position:absolute;left:4.6px;top:9.4px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@media (max-width:820px){
  .st-gk{grid-template-columns:1fr;gap:20px;padding:22px 20px;border-radius:20px}
  .st-gk.um .st-gk-b{order:0}
  .st-gk-t h3{font-size:24px}
  .st-gk-t p{font-size:15.5px}
}
.st-pk{display:block;margin-top:14px}
.st-p-k{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.st-p-k:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(18,58,107,.14)}
.st-pk .btn{width:100%}
.st-klein{font-size:14px;margin-top:14px}
/* Der Einmalpreis. Bewusst ruhiger als die zwei Abokacheln: ein Balken
   links, kein Rahmen, keine grosse Zahl. Er soll gefunden werden, nicht
   gewaehlt. */
.st-einmal{margin-top:18px;border-left:4px solid var(--marke);
  background:var(--surface-3,#f2f6fb);border-radius:10px;padding:14px 16px}
.st-einmal b{display:block;font-size:16.5px;line-height:1.3;color:var(--ink)}
.st-einmal p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:6px}
.st-einmal .st-einmal-f{color:var(--ink-3);font-size:13.5px}
/* Der Vergleich. Er stand vorher als drei nackte Zahlen da, und niemand
   sah, dass es drei verschiedene Abrechnungsmodelle sind. Jetzt steht
   ueber jedem Beispiel, um wen es geht, und unter jeder Zeile die
   Rechnung, die zur Zahl fuehrt. */
.st-h3{font-size:19px;line-height:1.25;margin:34px 0 8px;color:var(--ink);font-weight:700;
  letter-spacing:0;text-transform:none}
.st-bsp{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px 19px;margin-bottom:14px}
.st-bsp-k{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.3}
.st-bsp-s{font-size:14px;line-height:1.55;color:var(--ink-3);margin:5px 0 12px}
.st-bsp table{width:100%;border-collapse:collapse}
.st-bsp td{padding:11px 0;border-top:1px solid var(--line-2);vertical-align:top}
.st-bsp tr:first-child td{border-top:0}
.st-bsp td b{display:block;font-size:14.5px;color:var(--ink-2);font-weight:600;line-height:1.35}
.st-bsp td span{display:block;font-size:13px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.st-bsp td:last-child{text-align:right;white-space:nowrap;padding-left:16px;
  font-size:19px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.st-bsp td em{display:block;font-style:normal;font-size:12px;font-weight:400;
  color:var(--ink-3);margin-top:1px}
.st-bsp .st-uns td b{color:var(--ink)}
.st-bsp .st-uns td:last-child{color:var(--marke);font-size:23px}
/* Zwei Ebenen, und zwar so, dass man sie nicht verwechseln kann: links
   gedaempft, was ANDERE verlangen, rechts in Markenfarbe, was wir kosten.
   Frueher standen beide Zahlen in derselben Tabelle untereinander - und
   wer schnell las, hielt den hohen Betrag fuer unseren. */
.st-allein{grid-template-columns:1fr !important}
.st-gegen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;
  align-items:stretch}
.st-seite{border-radius:13px;padding:14px 15px 15px;display:flex;flex-direction:column}
.st-fremd{background:var(--surface-3);border:1px solid var(--line)}
.st-unser{background:var(--marke);border:1px solid var(--marke)}
.st-etikett{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  margin-bottom:10px}
.st-fremd .st-etikett{background:var(--line);color:var(--ink-3)}
.st-unser .st-etikett{background:rgba(255,255,255,.22);color:#fff}
.st-seite b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.st-fremd b{color:var(--ink-2)}
.st-unser b{color:#fff}
.st-rech{display:block;font-size:12.5px;line-height:1.5;margin-top:4px;flex:1}
.st-fremd .st-rech{color:var(--ink-3)}
.st-unser .st-rech{color:rgba(255,255,255,.8)}
.st-seite strong{display:block;font-size:27px;font-weight:700;line-height:1.1;
  margin-top:12px;white-space:nowrap}
.st-fremd strong{color:var(--ink-3)}
.st-unser strong{color:#fff}
.st-seite em{display:block;font-style:normal;font-size:12px;font-weight:400;margin-top:2px}
.st-fremd em{color:var(--ink-3)}
.st-unser em{color:rgba(255,255,255,.75)}
.st-spar{margin-top:12px;padding:11px 14px;border-radius:11px;background:var(--marke-soft,#eef3f9);
  font-size:15px;line-height:1.45;color:var(--ink)}
.st-spar b{color:var(--marke);font-weight:700}

/* Das Saisonband. Marco: «Die 60 Franken versteht man nicht. Der Punkt ist,
   dass du nur ein paar Monate zahlst und dann nicht mehr — das musst du ganz
   klar und deutlich zeigen.» Also nicht erklaeren, sondern hinschreiben:
   zwoelf Monate nebeneinander, die bezahlten in Markenfarbe, die ruhenden
   grau mit einer Null. Zwoelf Kaestchen, die man ansieht, wirken staerker
   als ein Satz, den man lesen muss. */
.st-saison{margin-top:12px;padding:13px 14px 14px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface-3)}
.st-saison-k{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:10px;
  color:var(--ink)}
.st-monate{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.st-monat{border-radius:8px;padding:7px 0 8px;text-align:center;
  background:var(--surface-2);color:var(--ink-3)}
.st-monat.an{background:var(--marke);color:#fff}
.st-monat b{display:block;font-size:12px;font-weight:700;line-height:1}
.st-monat span{display:block;font-size:10.5px;line-height:1;margin-top:5px;
  font-variant-numeric:tabular-nums}
.st-monat.an span{color:rgba(255,255,255,.9)}
.st-saison-f{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:11px}
.st-saison-f b{color:var(--ink);font-weight:700}
@media (max-width:520px){
  .st-monate{grid-template-columns:repeat(6,1fr)}
  .st-monat{padding:6px 0 7px}
}
@media (max-width:520px){
  .st-gegen{grid-template-columns:1fr}
  .st-seite strong{font-size:24px}
}
.st-bsp-f{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line-2)}
/* Die Abzugstabelle auf der Seite für die Angestellte. Drei Spalten, auf
   dem Telefon zwei Zeilen: Prozentsatz immer rechts oben, damit das Auge
   die Zahlen untereinander findet. */
.ang-z{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  padding:12px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.ang-z b{font-size:15.5px;color:var(--ink);font-weight:600}
.ang-p{font-size:17px;font-weight:700;color:var(--marke);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ang-w{grid-column:1/-1;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.ang-su{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px}
.ang-su b{font-size:16.5px;font-weight:700}
.ang-su .ang-p{font-size:20px;color:var(--ink)}
.ang-su .ang-w{color:var(--ink-2);font-weight:600}
/* Der Satz, der die Sorge wegnimmt: «kostet dich nichts». Er steht im
   Kopf der Seite, nicht im Kleingedruckten - dort wird er nicht gelesen. */
.st-gratis{margin-top:16px;display:inline-block;background:var(--marke-soft);
  color:var(--marke);border-radius:999px;padding:9px 18px;
  font-size:15.5px;font-weight:600;line-height:1.4}
/* Die Positionierung in einem Satz. Marcos Idee, mit der zweiten Hälfte,
   die aus einer Behauptung ein Versprechen macht. */
.st-spruch{font-size:19px;line-height:1.45;color:var(--marke);font-weight:600;
  letter-spacing:-.01em;margin:0 0 6px}
@media (max-width:620px){ .st-spruch{font-size:17px} }
.st-punkte{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.st-punkte li{font-size:15px;line-height:1.6;color:var(--ink-2);padding-left:26px;position:relative}
.st-punkte li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:3px;background:var(--marke)}
.st-punkte b{color:var(--ink)}
/* Wer dahinter steht. Das Bild steht links, der Text daneben - und auf dem
   Telefon unter dem Bild. flex-wrap macht das ohne eigene Abfrage; nur die
   Bildgroesse wird auf schmalen Geraeten kleiner, sonst frisst der Kopf den
   halben Bildschirm. */
/* ACHTUNG beim Benennen: .st-wer gab es schon - das ist das kleine graue
   Etikett im Aenderungsprotokoll (wer etwas erfasst hat). Beim ersten Versuch
   hiess dieser Block auch so, und das Portraet stand dann unter dem Text
   statt daneben. Darum .st-gruender. */
.st-gruender{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-top:20px}
.st-gruender-bild{width:160px;height:160px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 2px 16px rgba(18,58,107,.18)}
.st-gruender-text{flex:1 1 280px;min-width:0}
.st-gruender-text p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 .8em}
.st-gruender-text p:last-child{margin-bottom:0}
.st-gruender-text b{color:var(--ink)}
@media (max-width:560px){.st-gruender{gap:18px}.st-gruender-bild{width:112px;height:112px}}
.st-faq{margin-top:18px;display:grid;gap:8px}
.st-faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px}
.st-faq summary{font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;line-height:1.45}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:9px 0 0}
.st-schluss{text-align:center;padding:52px 20px 44px;max-width:640px;margin:0 auto}
.st-schluss h2{font-size:28px;margin:0 0 10px;color:var(--ink);font-weight:700;
  letter-spacing:-.01em;text-transform:none}
.st-schluss p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 22px}
.st-fuss{text-align:center;padding:26px 20px 0;border-top:1px solid var(--line);
  max-width:1000px;margin:0 auto}
.st-fuss .brand{justify-content:center;display:inline-flex}
/* Die Seitenkarte im Fuss.
   ------------------------
   Sie gibt es seit dem 8. Oktober 2026. Vorher standen im Quelltext der
   ganzen Startseite genau DREI <a href> - und keiner davon fuehrte auf
   eine der 21 Unterseiten. Google fand sie nur ueber die sitemap.xml,
   und keine Seite stuetzte eine andere. In der Search Console waren
   darum vier Seiten indexiert und acht lagen seit Wochen als «gefunden,
   aber nie abgerufen» herum.

   Hier stehen sie als echte Links mit echter Adresse: lesbar fuer
   Google, fuer einen Besucher ohne Javascript und fuer jeden, der einen
   Link im neuen Tab oeffnen will. Das Javascript faengt den einfachen
   Klick ab und blaettert ohne Neuladen weiter - das Flackern, das den
   Fusslink darueber zu einem Knopf gemacht hat, gibt es damit nicht. */
.st-karte{text-align:left;max-width:860px;margin:0 auto 30px;
  display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.st-karte h3{font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.st-karte ul{list-style:none;margin:0;padding:0}
.st-karte li{margin:0 0 6px}
.st-karte a{font-size:14px;line-height:1.5;color:var(--ink-2);
  text-decoration:none}
.st-karte a:hover{color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}
@media(max-width:720px){
  .st-karte{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
}
@media(max-width:430px){
  .st-karte{grid-template-columns:1fr;gap:16px}
}
/* Die Flyer-Kacheln: dieselbe Gitterlogik wie bei den Filmen, aber
   hochformatig - ein A4-Blatt ist hoeher als breit. */
.st-fl-gitter{display:grid;gap:22px;margin-top:20px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.st-fl-gitter .st-fk-bild{display:block;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:744/1052}
.st-fl-gitter .st-fk-bild img{width:100%;height:100%;object-fit:cover;display:block}
.st-fl-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.st-fl-bar .btn{text-decoration:none;display:inline-flex;align-items:center}
.st-fz{font-size:12.5px;color:var(--ink-3);margin-top:4px}
@media (max-width:560px){
  .st-hero h1{font-size:31px}
  .st-sub{font-size:16.5px}
  .st-ab h2{font-size:22px}
  .st-b1, .st-b2{width:100%}
}
/* ---------- Verkaufsseite: Kopf, Kacheln, Segmentseiten ---------- */
.st-heim{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.st-nav{display:flex;gap:2px;flex:1;justify-content:center}
/* button UND a: auf der Startseite blaettert Javascript ohne Neuladen,
   auf einer schlanken Ratgeberseite gibt es kein Javascript und der Kopf
   besteht aus echten Links. Beide muessen gleich aussehen - sonst sieht
   der Besucher beim Wechsel zwei verschiedene Kopfzeilen und haelt die
   eine fuer kaputt. */
.st-nav button, .st-nav a{background:none;border:0;padding:8px 13px;border-radius:999px;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.st-nav button:hover, .st-nav a:hover{background:var(--surface-3);color:var(--ink)}
.st-nav button.an, .st-nav a.an{background:var(--marke-soft);color:var(--marke)}
/* Auf dem Handy passen sechs Knoepfe nicht neben Logo und Anmelden.
   Vorher wurde die Leiste darum ganz ausgeblendet - und damit war die
   Anleitung auf dem Handy ueberhaupt nicht mehr erreichbar. Jetzt
   rutscht sie in eine eigene Zeile unter den Kopf und laesst sich
   seitlich wischen: die ersten Knoepfe stehen da, der angeschnittene
   naechste zeigt, dass es weitergeht. Kein Burger-Menue - das kostet
   einen Klick mehr und wird oft uebersehen. */
@media (max-width:760px){
  .st-top{flex-wrap:wrap; padding:14px 16px 8px}
  .st-nav{
    /* st-nav-wisch */
    order:3; flex:0 0 100%; width:100%;
    justify-content:flex-start;
    margin-top:10px; gap:4px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .st-nav::-webkit-scrollbar{display:none}
  .st-nav button{flex:0 0 auto; padding:7px 12px; font-size:14px; white-space:nowrap}
  .st-nav button:last-child{margin-right:14px}
}

.st-kacheln{display:grid;gap:12px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
.st-kachel{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 15px 14px;font:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;transition:border-color .12s, transform .12s}
.st-kachel:hover{border-color:var(--marke);transform:translateY(-2px)}
.st-kachel .st-kf{width:64px;height:auto;margin:0 0 8px}
.st-kachel b{display:block;font-size:15.5px;color:var(--ink);line-height:1.25}
.st-kachel > span{display:block;font-size:13px;color:var(--ink-3);line-height:1.45;
  margin-top:3px;flex:1}
.st-kachel em{display:block;font-style:normal;font-size:13px;font-weight:700;
  color:var(--marke);margin-top:10px}
.st-kachel em:after{content:"  \203A"}

.st-zurueck{max-width:1000px;margin:0 auto;padding:6px 20px 0}
.st-zb{background:none;border:0;padding:6px 0;font:inherit;font-size:14.5px;
  font-weight:600;color:var(--ink-3);cursor:pointer}
.st-zb:hover{color:var(--marke)}
.st-seg-kopf{max-width:1000px;margin:0 auto;padding:14px 20px 30px;
  display:grid;grid-template-columns:1fr 168px;gap:30px;align-items:center}
.st-seg-kopf.eins{grid-template-columns:1fr}
.st-seg-fig{display:block;width:100%;height:auto}
/* Als Bild statt als Zeichenbefehl: ohne Deckel zoege eine breite Spalte
   die Figur ins Riesenhafte. Die SVG-Fassung hatte ihre Grenze im
   viewBox, ein Bild hat keine. */
img.st-seg-fig{max-width:240px;object-fit:contain}
/* Alle Kachelfiguren belegen dieselbe Hoehe und stehen auf derselben
   Grundlinie. Ohne das richtet sich die Hoehe nach der Breite der
   jeweiligen Zeichnung, und die Titel darunter rutschen von Kachel zu
   Kachel gegeneinander - man sieht es sofort, ohne zu wissen warum. */
img.st-kf{width:auto;height:122px;max-width:100%;
  object-fit:contain;object-position:bottom left}
.st-kachel img.st-kf{height:92px}
.st-seg-et{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--marke);background:var(--marke-soft);
  padding:4px 11px;border-radius:999px;margin-bottom:14px}
.st-seg-kopf h1{font-size:36px;line-height:1.1;letter-spacing:-.02em;margin:0;
  color:var(--ink);font-weight:700;text-transform:none}
.st-haken{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.st-haken li{font-size:15px;line-height:1.55;color:var(--ink-2);
  padding-left:28px;position:relative}
.st-haken li:before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  border-radius:50%;background:var(--marke)}
.st-haken li:after{content:"";position:absolute;left:4.8px;top:8px;width:7px;height:3.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.st-klein-kacheln{display:grid;gap:10px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(188px,1fr))}
/* Der farbige Kasten im Ratgeber. Marco am 16. Oktober 2026: «vielleicht
   mit etwas farbe aber dezent. es soll ruhig etwas froehlicher und nicht
   so trocken wirken.»

   DREI TOENE, UND JEDER SAGT ETWAS: gruen, was Soldena abnimmt;
   terracotta, was es sonst kostet; sandfarben fuer den Merksatz. Die
   Farben sind die bestehenden Variablen - sie haben ihre
   Dunkelmodus-Entsprechung schon, und eine neue Farbe waere ein zweiter
   Satz Werte fuer dieselbe Sache. */
.st-kasten{border-radius:14px;padding:16px 18px;margin:18px 0;
  border:1px solid var(--line);background:var(--surface-3)}
.st-kasten b{display:block;font-size:15px;margin-bottom:5px}
.st-kasten p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.st-kasten.gut{background:var(--gut-soft);border-color:transparent}
.st-kasten.gut b{color:var(--gut)}
.st-kasten.kostet{background:var(--terra-soft);border-color:var(--terra-line)}
.st-kasten.kostet b{color:var(--terra)}
.st-kasten.merk{background:var(--warn-soft);border-color:transparent}
.st-kasten.merk b{color:var(--warn)}
.st-kk{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:13px 14px;font:inherit;text-align:left;cursor:pointer}
/* Die Kacheln und Rueckwege sind seit dem 16. Oktober 2026 <a href>, nicht
   mehr <button>. Grund: die Messung an diesem Tag fand im ganzen
   Inhaltsbereich einer Ratgeberseite GENAU DREI echte Links - obwohl der
   Block «Weitere Ratgeber» mit allen elf Seiten darunterstand. Er sah
   vollstaendig aus und trug kein einziges href; fuer Google ist ein
   <button> kein Verweis. Dieselbe Krankheit wie der Flyer-Bauer, der den
   Fehler kannte und nicht weitergab: eine Stelle, die ihre Aufgabe
   scheinbar erfuellt, verhindert, dass jemand nachschaut.
   Der Klick geht weiter ueber stGehe() - der href ist fuer Google, fuer
   den Mittelklick und fuer den, dessen JavaScript nicht laeuft. */
a.st-kk, a.st-kachel, a.st-zb{display:block;text-decoration:none;color:inherit}
a.st-zb{display:inline-block}
/* Dieselbe Ueberlegung fuer die drei Knopfformen: auf einer schlanken
   Ratgeberseite sind sie <a>, in der App <button>. Ohne diese Zeile
   unterstreicht der Browser den Text im Knopf. */
a.st-b1, a.st-b2, a.st-an, a.st-heim{text-decoration:none;display:inline-block}
.st-kk:hover{border-color:var(--marke)}
.st-kk b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.st-kk span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.st-pfeil{font-size:14px;color:var(--marke);font-weight:600;margin:4px 0 18px;
  text-align:center}
.st-h3{font-size:19px;font-weight:700;color:var(--ink);margin:26px 0 10px;
  text-transform:none;letter-spacing:-.01em}
@media (max-width:560px){
  .st-seg-kopf{grid-template-columns:1fr}
  .st-seg-fig{width:96px;justify-self:start}
  .st-seg-kopf h1{font-size:28px}
}
/* ---------- Verkaufsseite: Bilder, Fakten, Zahlen ---------- */
.st-bild{max-width:680px;margin:0 auto;padding:0 20px 4px}
.st-bild svg{display:block;width:100%;height:auto}

/* ---------- Der Kopf: das lebende Lohnblatt ----------
   Bis zum 15. Oktober 2026 standen hier zwei gezeichnete Menschen mit
   Handys. Die Zeichnung erklaerte, WIE die App arbeitet - bevor jemand
   wusste, WAS er bekommt. Von 575 Besuchen probierten acht die App aus.

   Jetzt steht hier das Ergebnis selbst: ein echtes Lohnblatt, in dem man
   den Stundenlohn mit - und + aendert. Die Zahlen rechnen sofort neu.
   Wer das antippt, hat die App bereits benutzt, ohne es zu merken. */
.st-lb{position:relative;max-width:460px;margin:26px 0 0}
.st-lb .st-lb-fl{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.st-lb .st-lb-f1{right:-20px;top:-14px;width:250px;height:250px;background:var(--terra-soft)}
.st-lb .st-lb-f2{left:-20px;bottom:-14px;width:160px;height:160px;background:var(--gut-soft)}
.st-lb-k{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:0 20px 38px rgba(20,33,61,.14);
  display:flex;flex-direction:column;gap:11px}
.st-lb-kopf{display:flex;align-items:baseline;justify-content:space-between}
.st-lb-kopf b{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--marke)}
.st-lb-kopf span{font-size:10.5px;color:var(--ink-3)}
.st-lb-tr{height:1px;background:var(--line)}
.st-lb-feld{background:var(--terra-soft);border:1px solid var(--terra-line);border-radius:10px;
  padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.st-lb-feld label{font-size:12.5px;font-weight:600;color:var(--terra-ink)}
.st-lb-st{display:flex;align-items:center;gap:9px}
.st-lb-st button{width:38px;height:38px;border-radius:50%;border:0;background:var(--terra);
  color:#fff;font-family:inherit;font-size:19px;font-weight:700;line-height:1;cursor:pointer}
.st-lb-st button:hover{filter:brightness(.93)}
.st-lb-st output{min-width:76px;text-align:center;font-size:22px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* Das Eingabefeld sieht aus wie die Anzeige davor - nur dass man
   hineintippen kann. Die Pfeilchen des Browsers (spin buttons) sind weg:
   daneben stehen schon zwei richtige Knoepfe, und doppelte Bedienung
   verwirrt mehr, als sie hilft. */
.st-lb-st input{width:92px;text-align:center;font-family:inherit;font-size:22px;
  font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  background:var(--surface);border:1.5px solid var(--line);border-radius:9px;
  padding:4px 2px;-moz-appearance:textfield}
.st-lb-st input::-webkit-outer-spin-button,
.st-lb-st input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-lb-st input:focus{outline:none;border-color:var(--terra);
  box-shadow:0 0 0 3px var(--terra-soft)}
/* Der Kasten mit der Arbeitgeberpflicht. Er steht zwischen dem Lohnblatt
   und den zwei Knoepfen und ist bewusst ruhig gehalten: eine Pflicht
   schreit man nicht an, man nennt sie. */
.st-folge{margin:16px auto 0;max-width:560px;text-align:left;
  background:var(--terra-soft);border:1px solid var(--terra-line);
  border-radius:14px;padding:16px 18px}
.st-folge-t{margin:0 0 7px;font-size:17px;font-weight:700;color:var(--terra-ink);
  line-height:1.3}
.st-folge-p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.st-folge-p b{color:var(--ink)}
.st-folge .st-b1{margin-top:3px}
@media(max-width:560px){ .st-folge{padding:14px 15px} .st-folge-t{font-size:16px} }
.st-lb-z{display:flex;justify-content:space-between;font-size:12.5px;gap:10px}
.st-lb-z span:first-child{color:var(--ink-2)}
.st-lb-z span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.st-lb-kach{display:flex;gap:9px;margin-top:4px}
.st-lb-kach>div{flex:1 1 0;border-radius:10px;padding:10px 11px}
.st-lb-kach p{margin:0}
.st-lb-kach .t{font-size:11px;font-weight:600;margin-bottom:3px}
.st-lb-kach .w{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.st-lb-netto{background:var(--marke-soft);border:1px solid var(--line)}
.st-lb-netto .t{color:var(--marke)} .st-lb-netto .w{color:var(--marke)}
.st-lb-kost{background:var(--terra-soft);border:1px solid var(--terra-line)}
.st-lb-kost .t{color:var(--terra-ink)} .st-lb-kost .w{color:var(--terra)}
.st-lb-ok{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  background:var(--gut-soft);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-size:10.5px;font-weight:600;color:var(--gut)}

/* ---------- Der zweite Block: die Stunden ----------
   Ein Versprechen pro Block. Oben das Geld, hier die Zeit. Der Umschalter
   ist nicht Technik, sondern das Verkaufsargument: ein Haushalt mit einer
   Putzhilfe und ein Bauer mit dreizehn Erntehelfern sehen beide SICH. */
.st-zeit{background:var(--surface-2);padding:36px 20px 40px;margin-top:30px}
.st-zeit-in{max-width:560px;margin:0 auto}
.st-zeit-kick{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--terra)}
.st-zeit h2{margin:0;text-transform:none;font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);
  font-weight:700}
.st-zeit-sub{margin:11px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.st-um{display:flex;gap:6px;background:var(--line);border-radius:999px;padding:4px;margin-top:16px}
.st-um button{flex:1 1 0;border:0;border-radius:999px;padding:11px 10px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;background:none;color:var(--ink-2)}
.st-um button[aria-pressed="true"]{background:var(--marke);color:#fff}
.st-zt{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 30px rgba(20,33,61,.10);overflow:hidden}
.st-zt-kopf{display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--line)}
.st-zt-kopf .n{flex-grow:1;font-size:13.5px;font-weight:700}
.st-zt-mark{font-size:11px;font-weight:600;color:var(--terra-ink);background:var(--terra-soft);
  border-radius:999px;padding:4px 10px}
.st-zt-pk{width:26px;height:26px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.st-zt-stapel{display:flex}
.st-zt-stapel .st-zt-pk{width:23px;height:23px;border:2px solid var(--surface);margin-left:-7px;font-size:9px}
.st-zt-tag{display:flex;align-items:center;gap:10px;padding:11px 15px;border-top:1px solid var(--line-2)}
.st-zt-tag .d{width:32px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.st-zt-tag .bal{width:44px;height:7px;border-radius:4px;background:var(--terra);flex:0 0 auto}
.st-zt-tag .z{flex-grow:1;font-size:13.5px}
.st-zt-tag .h{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.st-zt-git{display:grid;grid-template-columns:112px repeat(7,minmax(0,1fr)) 46px;align-items:center;
  padding:7px 15px;border-top:1px solid var(--line-2)}
.st-zt-git.kopf{padding:9px 15px 4px;border-top:0;font-size:10px;color:var(--ink-3)}
.st-zt-git.kopf span{text-align:center}
.st-zt-git.kopf span:first-child{text-align:left}
.st-zt-git.kopf span:last-child{text-align:right}
.st-zt-nam{display:flex;align-items:center;gap:7px;min-width:0}
.st-zt-nam .st-zt-pk{width:22px;height:22px;font-size:9px}
.st-zt-nam b{font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-zt-sp{display:flex;justify-content:center}
.st-zt-sp i{display:block;width:12px;border-radius:3px}
.st-zt-git .tot{font-size:11.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.st-zt-frei{display:flex;align-items:center;gap:9px;padding:11px 15px;background:var(--terra-soft);
  border-top:1px solid var(--terra-line)}
.st-zt-frei .pt{width:7px;height:7px;border-radius:50%;background:var(--terra);flex:0 0 auto}
.st-zt-frei .tx{font-size:12px;color:var(--terra-ink);flex-grow:1}
.st-zt-frei .kn{font-family:inherit;font-size:11.5px;font-weight:600;color:#fff;background:var(--gut);
  border:0;border-radius:999px;padding:7px 13px;cursor:pointer}
.st-zt-sum{display:flex;justify-content:space-between;padding:12px 15px;border-top:1px solid var(--line)}
.st-zt-sum span{font-size:12.5px;font-weight:700}
.st-zt-sum span:last-child{color:var(--marke)}
.st-zt-pkt{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.st-zt-pkt div{display:flex;gap:11px;align-items:flex-start}
.st-zt-pkt .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.st-zt-pkt p{margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}

/* ---------- Die Presse-Zeile unter den Knoepfen ---------- */
.st-pr{max-width:460px;margin:24px 0 0}
.st-pr-l{display:flex;align-items:center;gap:12px}
.st-pr-l i{flex-grow:1;height:1px;background:var(--line)}
.st-pr-l span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.st-pr p{margin:8px 0 0;font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:center}

@media (max-width:620px){
  .st-lb{margin-top:22px}
  .st-zeit{padding:30px 16px 34px;margin-top:24px}
  .st-zeit h2{font-size:25px}
  .st-zt-git{grid-template-columns:112px repeat(7,minmax(0,1fr)) 40px}
  .st-zt-nam b{font-size:11px}
}
.st-gruppen{display:grid;gap:14px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.st-g{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 19px}
.st-g > b{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marke);margin-bottom:13px}
.st-g ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.st-g li{font-size:14.5px;line-height:1.55;color:var(--ink-2);padding-left:25px;position:relative}
.st-g li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;
  border-radius:50%;background:var(--marke)}
.st-g li::after{content:"";position:absolute;left:4.2px;top:8.4px;width:6px;height:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.st-g li b{color:var(--ink)}
.st-zahlen{width:100%;border-collapse:collapse;margin-top:6px;font-size:15px}
.st-zahlen td{padding:12px 0;border-bottom:1px solid var(--line-2);vertical-align:top;
  line-height:1.5}
.st-zahlen td:first-child{color:var(--ink);font-weight:600;padding-right:18px}
.st-zahlen td:last-child{text-align:right;white-space:nowrap;color:var(--marke);font-weight:700}
.st-wer{display:block;font-size:13px;color:var(--ink-3);font-weight:400;margin-top:3px;
  line-height:1.5}
.st-kf{display:block;width:84px;height:auto;margin:-2px 0 10px}
@media (max-width:560px){
  .st-zahlen{font-size:14.5px}
  .st-zahlen td:last-child{font-size:15px}
}
/* ---------- Ratgeberseiten ----------
   Bewusst nuechtern: hier wird gelesen, nicht geschaut. Eine Textspalte,
   eine hervorgehobene Antwort zuoberst, Tabellen ohne Zierat. Die
   Hervorhebung ist die einzige Farbe auf der Seite - sie zeigt, wo die
   Antwort steht, und sonst nichts. */
.st-rat-kopf{margin:6px 0 20px}
.st-rat-kopf h1{font-size:30px;line-height:1.18;margin:8px 0 0;max-width:17em;
  text-wrap:balance}
.st-rat-ant{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--marke);border-radius:14px;padding:16px 18px;
  margin:0 0 26px;max-width:38em}
.st-rat-ant b{display:block;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marke);margin-bottom:6px}
.st-rat-ant p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}
/* Der naechste Schritt, direkt unter der kurzen Antwort. Bewusst RUHIG
   gehalten: kein Kasten, kein Farbfeld, keine zweite Umrandung neben der
   Antwort darueber. Die Seite soll ein Ratgeber bleiben und nicht zur
   Werbeflaeche werden - sonst verliert sie genau das Vertrauen, das die
   Leute ueberhaupt erst herbringt. Darum nur ein feiner Strich oben,
   dieselbe Textbreite wie die Antwort, und ein einzelner Knopf. */
.st-rat-weiter{max-width:38em;margin:-10px 0 30px;padding:18px 0 0;
  border-top:1px solid var(--line)}
.st-rat-weiter b{display:block;font-size:17px;color:var(--ink);
  margin-bottom:6px}
.st-rat-weiter p{margin:0 0 14px;font-size:15.5px;line-height:1.6;
  color:var(--ink-2)}
.st-rat-b{display:inline-block}
@media (max-width:620px){
  .st-rat-weiter{margin:-6px 0 26px}
  .st-rat-b{width:100%}
}
.st-rat-t{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px;
  text-align:left}
.st-rat-t th{padding:0 0 8px;border-bottom:1px solid var(--line);
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.st-rat-t td{padding:11px 0;border-bottom:1px solid var(--line-2);
  vertical-align:top;line-height:1.5;color:var(--ink-2)}
.st-rat-t td:first-child{color:var(--ink);font-weight:600;padding-right:20px;
  width:38%}
.st-rat-t th:first-child{padding-right:20px}
.st-rat-fuss{max-width:38em;margin-top:22px}
/* Der Zaehl-Schalter im Fuss. Klein, aber anklickbar: 44 Pixel hohe
   Trefferflaeche, sonst trifft ihn auf dem Handy niemand. */
/* Der Rechtevermerk im Fuss. Kleiner als alles andere und ohne Farbe —
   er soll nicht werben, sondern dastehen. Wer ihn sucht, findet ihn;
   wer die Seite benutzt, stolpert nicht darueber. */
.st-rechte{margin-top:16px;max-width:46em;margin-left:auto;margin-right:auto;
  font-size:11.5px;line-height:1.55;color:var(--ink-3);opacity:.85}
.st-zaehl{margin-top:18px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.st-zaehl label{display:inline-flex;align-items:center;gap:7px;min-height:44px;cursor:pointer}
.st-zaehl input{width:16px;height:16px;accent-color:var(--mk, currentColor)}
.st-zaehl-m{max-width:34em;margin:0 auto}
@media (max-width:560px){
  .st-rat-kopf h1{font-size:25px}
  .st-rat-t{font-size:14.5px}
  .st-rat-t td:first-child{width:44%}
}
/* ---------- Der Assistenz-Rechner ----------
   Ein Kasten, keine Seite: Felder oben, Ergebnis unten, dazwischen eine
   Linie. Die Zahl ist das einzige Grosse auf der Seite - sie ist der
   Grund, weshalb jemand hier ist. Die Aufschluesselung darunter darf man
   uebergehen; wer sie liest, soll jeden Rappen wiederfinden. */
.ass-r{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--marke);border-radius:16px;padding:18px 18px 20px;
  margin-top:18px}
.ass-felder{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.ass-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.ass-f > span{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.ass-f select,.ass-f input{font-family:var(--ui);font-size:15px;padding:9px 10px;
  border:1px solid var(--line-feld);border-radius:10px;background:var(--surface);
  color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.ass-f em{font-style:normal;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.ass-erg{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ass-et{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.ass-zahl{font-size:38px;font-weight:700;color:var(--marke);line-height:1.08;
  font-variant-numeric:tabular-nums;margin:6px 0 0}
.ass-sub{font-size:15px;color:var(--ink-2);line-height:1.6;margin:8px 0 0;
  max-width:34em}
.ass-hinw{font-size:14px;line-height:1.55;margin:14px 0 0;padding:10px 12px;
  border-radius:10px;background:var(--surface-3);border:1px solid var(--line);
  color:var(--ink-2)}
.ass-hinw.warn{border-color:var(--marke);background:var(--marke-soft);
  color:var(--ink)}
.ass-r .st-rat-t{margin-top:18px}
.ass-r .st-rat-t td:last-child{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ass-r .st-rat-t td:first-child{width:auto;font-weight:400;color:var(--ink-2)}
.ass-r .st-rat-t tr.tot td{font-weight:700;color:var(--ink)}
@media (max-width:560px){
  .ass-zahl{font-size:31px}
  .ass-r{padding:15px 14px 17px}
}
/* ---------- Abo und Rechnung ---------- */
/* ---------------- Papiere ----------------
   Vier Karten, jede in ihrer eigenen Farbe. Die Farben unterscheiden sich
   nicht nur im Ton, sondern auch in der Helligkeit - wer Farben schlecht
   auseinanderhaelt, erkennt sie trotzdem. Und jede Karte traegt ihr Zeichen
   und ihren Text; die Farbe ist die Zugabe, nie die einzige Auskunft. */
/* Was nicht zum gewaehlten Bereich gehoert, ist weg - nicht bloss blass.
   Eigene Klasse statt [hidden], weil [hidden] an diesen Bloecken schon eine
   andere Bedeutung hat: dort entscheidet die App, ob es den Block ueberhaupt
   gibt. Zwei Fragen, zwei Schalter. */
.pap-weg{display:none !important}
/* Auf einer Unterseite ist die Gruppe die ganze Seite. Ihr Klappkopf wuerde
   nur den Titel wiederholen, der oben schon steht - also weg damit. Die
   Gruppe bleibt offen; zuklappen gibt es hier nichts mehr. */
#v-set.pap-seite > details.grp > summary{display:none}
#v-set.pap-seite > details.grp{border:0;background:none;padding:0;margin:0}
.pap-intro{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:2px 0 14px}
.pap-liste{display:flex;flex-direction:column;gap:11px}
.pap-k{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--pf,var(--marke));
  border-radius:14px;padding:13px 15px;cursor:pointer;font-family:var(--ui);color:var(--ink);
  transition:border-color .16s cubic-bezier(.2,0,0,1)}
.pap-k:hover{border-color:var(--pf,var(--marke))}
.pap-k.k-vertrag  {--pf:#1c4f8f;--ps:#e1ebf3}
.pap-k.k-behoerden{--pf:#9b2c3d;--ps:#f6e4e6}
.pap-k.k-bvg      {--pf:#0f766e;--ps:#dfedeb}
.pap-k.k-zeugnis  {--pf:#8a5a00;--ps:#f7ead9}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pap-k.k-vertrag  {--pf:#8fb6e6;--ps:#1b2735}
  :root:not([data-theme="light"]) .pap-k.k-behoerden{--pf:#ea97a6;--ps:#331a1f}
  :root:not([data-theme="light"]) .pap-k.k-bvg      {--pf:#5fcabe;--ps:#14302d}
  :root:not([data-theme="light"]) .pap-k.k-zeugnis  {--pf:#dfae53;--ps:#322616}
}
:root[data-theme="dark"] .pap-k.k-vertrag  {--pf:#8fb6e6;--ps:#1b2735}
:root[data-theme="dark"] .pap-k.k-behoerden{--pf:#ea97a6;--ps:#331a1f}
:root[data-theme="dark"] .pap-k.k-bvg      {--pf:#5fcabe;--ps:#14302d}
:root[data-theme="dark"] .pap-k.k-zeugnis  {--pf:#dfae53;--ps:#322616}
.pap-k .zl{display:flex;align-items:flex-start;gap:12px}
.pap-k .ik{flex:none;width:34px;height:34px;border-radius:10px;background:var(--ps,var(--marke-soft));
  display:flex;align-items:center;justify-content:center;color:var(--pf,var(--marke))}
.pap-k .tx{flex:1 1 auto;min-width:0}
.pap-k .tt{display:block;font-size:15.5px;font-weight:700;line-height:1.25}
.pap-k .us{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px;
  overflow-wrap:anywhere}
.pap-k .st{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border-radius:6px;padding:3px 7px;margin-top:8px}
.pap-k .st.gut{color:var(--gut);background:var(--gut-soft)}
.pap-k .st.off{color:var(--warn);background:var(--warn-soft)}
.pap-k .st.aus{color:var(--ink-2);background:var(--surface-2)}
/* Der Weg zurueck. Er steht zuoberst auf jeder Unterseite und traegt die
   Farbe des Bereichs - man sieht, wo man ist, bevor man liest. */
/* Das Blatt zuoberst auf einer Papiere-Unterseite. */
.pb-t{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sec);margin-bottom:11px}
.pb-bar{display:flex;flex-wrap:wrap;gap:9px}
.pb-bar .btn{flex:1 1 auto;min-width:46%}
#papBlatt{margin-bottom:16px}
#papBlatt .card{border-color:var(--sec)}
.pap-zur{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);font-size:13px;
  font-weight:600;color:var(--sec);background:none;border:0;cursor:pointer;padding:6px 2px;
  margin-bottom:6px;min-height:44px}

/* Die Jahreswahl der Lohndeklaration. Gross genug, dass die Jahreszahl das
   Erste ist, was man sieht - sie entscheidet, was aufs Formular kommt. */
.jwahl{display:flex;align-items:center;gap:9px;margin-top:12px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-3);padding:7px 8px}
.jwahl .jw{flex:none;width:44px;height:44px;font-family:var(--ui);font-size:18px;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:10px;cursor:pointer;line-height:1}
.jwahl .jw:disabled{opacity:.35;cursor:default}
.jwahl .jwl{flex:1 1 auto;min-width:0;text-align:center;font-size:24px;font-weight:700;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Die Angaben warten auf die Datenbank. Sichtbar, aber nicht anfassbar -
   siehe angabenAntwort im Javascript. Ein Augenblick, in dem man nichts
   tippen kann, ist nichts gegen eine ueberschriebene Angabe. */
#v-set.warten > *:not(#setWarten){opacity:.42;pointer-events:none}
.setwarn{display:flex;align-items:center;gap:10px;background:var(--marke-soft);
  border:1px solid var(--marke);border-radius:12px;padding:12px 14px;margin-bottom:14px;
  font-size:13.5px;color:var(--marke);line-height:1.45}
.setwarn .pt{flex:none;width:9px;height:9px;border-radius:50%;background:var(--marke)}
.abo-z{border-left:4px solid var(--marke);background:var(--surface-3);border-radius:10px;
  padding:12px 14px}
.abo-z.gut{border-left-color:var(--ok,#2f7d4f)}
.abo-z.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.abo-z b{display:block;font-size:15px;color:var(--ink);line-height:1.3}
.abo-z span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.abo-t{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.abo-preise{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.abo-p{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:13px 14px;display:flex;flex-direction:column;gap:3px}
.abo-pl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.abo-p b{font-size:20px;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.abo-ps{font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-bottom:9px}
.abo-p .btn{width:100%;margin-top:auto}
@media (max-width:420px){ .abo-preise{grid-template-columns:1fr} }
/* ---------- Das Handbuch ----------
   Ein langer Text braucht drei Dinge: ein Verzeichnis, das man anklickt,
   sichtbare Stufen (Teil, Kapitel, Zwischentitel) und Tabellen, die auch
   auf einem Telefon lesbar bleiben - darum untereinander statt nebeneinander,
   sobald es eng wird. */
.hb-lead{font-size:16px;line-height:1.55;color:var(--ink-2);margin:2px 0 22px}
.hb-iv{border:1px solid var(--line);border-radius:16px;background:var(--surface-3);
  padding:14px 12px;margin-bottom:30px}
.hb-ivk{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:0 6px 10px}
.hb-ivt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--marke);padding:12px 6px 6px}
.hb-ivt:first-of-type{padding-top:2px}
.hb-ivz{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:6px;font:inherit;font-size:14.5px;color:var(--ink);
  cursor:pointer;border-radius:8px;line-height:1.35}
.hb-ivz:hover{background:var(--surface)}
.hb-ivn{flex:none;min-width:18px;font-size:12.5px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.hb-teil{border-top:2px solid var(--marke);padding-top:14px;margin:38px 0 10px}
.hb-teila{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marke)}
.hb-teilt{font-size:26px;line-height:1.12;margin:6px 0 0;letter-spacing:0;
  text-transform:none;color:var(--ink);font-weight:700}
.hb-teill{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:9px 0 0}
.hb-kap{padding-top:26px;scroll-margin-top:12px}
.hb-kk1{display:flex;align-items:baseline;gap:11px;margin-bottom:4px}
.hb-nr{flex:none;font-size:13px;font-weight:700;color:#fff;background:var(--marke);
  border-radius:999px;min-width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;font-variant-numeric:tabular-nums;align-self:flex-start;
  margin-top:1px}
.hb-kk1 h3{font-size:20px;line-height:1.2;margin:0;font-weight:700;color:var(--ink);
  text-transform:none;letter-spacing:0}
.hb-kl{font-size:14px;line-height:1.55;color:var(--ink-3);margin:0 0 14px 37px}
.rt .hb-h{font-size:15px;font-weight:700;color:var(--ink);margin:22px 0 7px;
  padding-bottom:5px;border-bottom:1px solid var(--line);line-height:1.35}
.rt ol.hb-s{margin:0 0 14px;padding-left:0;list-style:none;counter-reset:hbs}
.rt ol.hb-s li{position:relative;padding-left:32px;margin-bottom:12px;
  font-size:14.5px;line-height:1.6;color:var(--ink-2);counter-increment:hbs}
.rt ol.hb-s li::before{content:counter(hbs);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:999px;background:var(--marke-soft);
  color:var(--marke);font-size:12px;font-weight:700;display:flex;
  align-items:center;justify-content:center}
.rt ol.hb-s li b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.hb-tab{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:12px 0 18px;
  background:var(--surface)}
.hb-tk{display:flex;gap:14px;padding:8px 13px;background:var(--surface-2);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.hb-tk span:first-child{flex:0 0 34%}
.hb-tk span:last-child{flex:1}
.hb-tz{display:flex;gap:14px;padding:10px 13px;border-top:1px solid var(--line-2)}
.hb-tz:nth-child(even){background:var(--surface-3)}
.hb-ta{flex:0 0 34%;font-size:14px;font-weight:700;color:var(--ink);line-height:1.45}
.hb-tb{flex:1;font-size:14px;color:var(--ink-2);line-height:1.55}
.hb-k{border:1px solid var(--marke-soft);border-left:4px solid var(--marke);
  background:var(--surface-3);border-radius:10px;padding:12px 14px;margin:14px 0 18px}
.hb-k.warn{border-color:var(--warn-soft);border-left-color:var(--warn);
  background:var(--warn-soft)}
.hb-kk{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.35}
.hb-k p{font-size:14px;line-height:1.6;margin:0 0 7px}
.hb-k p:last-child{margin-bottom:0}
.hb-wo{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:10px 0 16px;
  font-size:13.5px;color:var(--marke);font-weight:600}
.hb-wl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.hb-up{display:block;margin:20px 0 0;background:none;border:0;padding:4px 0;
  font:inherit;font-size:12.5px;color:var(--ink-3);text-decoration:underline;cursor:pointer}
@media (max-width:560px){
  .hb-tk{display:none}
  .hb-tz{display:block;padding:11px 13px}
  /* Untereinander statt nebeneinander - dann muessen die beiden Spans auch
     Bloecke sein, sonst klebt die Beschriftung am Text. */
  .hb-ta, .hb-tb{display:block;flex:none}
  .hb-ta{margin-bottom:3px}
  .hb-teilt{font-size:22px}
  .hb-kk1 h3{font-size:18px}
  .hb-kl{margin-left:0}
}
@media print{
  .ntsp, .rt-nav, .rt-kopf .btn, .rt-links, #topbar, #tabbar, .tabbar{display:none !important}
  /* Bedienhinweise gehoeren auf den Bildschirm, nicht aufs Papier. Der
     Balken «Soldena aufs Handy legen» steht hier und NICHT bei seinem
     eigenen Stil weiter oben: Druckregeln gehoeren alle an eine Stelle,
     sonst findet sie niemand. */
  #druckHinweis, #hbMsg, #anlMsg, #homeBand, #standBand, #fehltBand{display:none !important}
  #v-recht{max-width:none;padding:0}
  .anl-gr, .anl-k{break-inside:avoid;page-break-inside:avoid}
  .anl-gr{background:none}
  .rt p, .rt li{color:#000}
  .rt .kasten{border-color:#bbb;background:none}
  body{background:#fff}
  .hb-up{display:none !important}
  .hb-teil{break-before:page;page-break-before:always}
  .hb-kap{break-inside:auto}
  .hb-kk1, .hb-tz, .hb-k, ol.hb-s li{break-inside:avoid;page-break-inside:avoid}
  .hb-kk1{break-after:avoid;page-break-after:avoid}
  .rt .hb-h{break-after:avoid;page-break-after:avoid}
  .hb-tz:nth-child(even){background:none}
  .hb-tab, .hb-k{background:none}
  .hb-ta, .hb-tb, .hb-k p{color:#000}
}
.rt-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.rt-links button{background:none;border:0;padding:2px 0;font:inherit;font-size:12px;
  color:var(--ink-3);text-decoration:underline;cursor:pointer}
#v-betrieb{max-width:900px;margin:0 auto;padding:26px 18px 60px}
.btr-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.btr-kopf h1{font-size:26px;line-height:1.1;margin:0}
.btr-sub{font-size:13.5px;color:var(--ink-3);margin-top:5px}
.btr-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.btr-k{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.btr-k b{display:block;font-size:27px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.btr-k span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.35}
.btr-nr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.5px}
.btr-alt{opacity:.55}
/* Die Zeile unter der Liste: ausgeblendete Konten und der Weg zurueck.
   Sie steht IN der Liste, nicht darunter als eigene Karte - was
   ausgeblendet ist, gehoert dorthin, wo es fehlt. */
.btr-leerzeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 2px 2px;font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* ---------- Die Besucherzaehlung ----------
   Die Reihenfolge der Farben ist fest und wird nie durchgetauscht: wer
   einmal Google ist, bleibt Google, auch wenn Instagram wegfaellt. Die
   Werte sind gegen beide Hintergruende geprueft (hell #fffbf5, dunkel
   #17181c) - Helligkeitsband, Farbsaettigung, Farbenblindheit und
   Kontrast. Soldenas eigenes Markenblau faellt als Flaechenfarbe durch:
   zu dunkel und zu grau. Darum hier ein eigener Satz, nur fuer
   Diagramme. */
.zl{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#7a5cd6;--s7:#0f8fa3;--s8:#b5611f;--s9:#5c8f1f;--s10:#c0407a;--s0:#9aa0ab}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .zl{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#8c72e0;--s7:#17a0b5;--s8:#cf7a2e;--s9:#78ab31;--s10:#d2558c;--s0:#6f7684}
}
:root[data-theme="dark"] .zl{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#8c72e0;--s7:#17a0b5;--s8:#cf7a2e;--s9:#78ab31;--s10:#d2558c;--s0:#6f7684}

.zl-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.zl-kopf h3{margin:0;font-size:17px}
.zl-zeit{display:flex;gap:6px;flex-wrap:wrap}
.zl-zeit button{font-size:12.5px;padding:7px 11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);border-radius:999px;cursor:pointer;min-height:36px}
.zl-zeit button[aria-pressed="true"]{border-color:var(--marke);color:var(--marke);font-weight:600}
.zl-kennz{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.zl-kennz div{border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;background:var(--surface)}
.zl-kennz b{display:block;font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.zl-kennz span{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.zl-kennz em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.zl-titel{font-size:13.5px;font-weight:600;margin:22px 0 2px}
.zl-unter{font-size:12px;color:var(--ink-3);margin-bottom:9px}
.btr-mail{font-size:12px;color:var(--ink-2);margin-top:2px;word-break:break-all}
.btr-mail.fehlt{color:var(--ink-3);font-style:italic}
.zl-warn{border:1px solid var(--warn-b,#d9a21b);background:var(--warn-bg,#fff8e6);border-radius:10px;padding:11px 13px;margin:10px 0 14px}
.zl-warn-t{font-size:13px;font-weight:700;margin-bottom:5px}
.zl-warn-z{font-size:12px;line-height:1.5;margin-top:3px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .zl-warn{background:#3a2f12;border-color:#8a6a14}
}
:root[data-theme="dark"] .zl-warn{background:#3a2f12;border-color:#8a6a14}
.zl-bild{position:relative}
.zl-bild svg{display:block;max-width:100%}
.zl-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:7px}
.zl-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* Die Balken sind gewoehnliches HTML, nicht SVG: so steht die
   Beschriftung immer daneben und die Farbe traegt die Information nie
   allein. */
.zl-bal{display:grid;grid-template-columns:minmax(7em,auto) 1fr auto;gap:7px 10px;align-items:center;font-size:13px}
.zl-bal .n{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zl-bal .s{background:var(--line-2);border-radius:0 4px 4px 0;height:12px}
.zl-bal .s i{display:block;height:12px;border-radius:0 4px 4px 0;background:var(--s1)}
.zl-bal .w{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.zl-hinw{position:absolute;pointer-events:none;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;font-size:12px;line-height:1.45;box-shadow:0 4px 14px rgba(0,0,0,.14);
  white-space:nowrap;opacity:0;transition:opacity .09s;z-index:5}
.zl-tag{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}
.zl-leer{font-size:13.5px;color:var(--ink-3);padding:10px 0}
/* Die Erklaerung je Herkunft. Eingerueckt und kleiner als der Balken,
   damit sie zur Zeile darueber gehoert und nicht mit ihr wetteifert. */
.zl-erkl{margin:8px 0 2px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.zl-erkl-z{font-size:12px;line-height:1.55;color:var(--ink-2);margin:0 0 5px}
.zl-erkl-z:last-child{margin-bottom:0}
.zl-erkl-z b{color:var(--ink);font-weight:600}
.zl-leer-grund{margin-top:6px;font-size:12.5px;line-height:1.5}
.opt{font-weight:400;font-size:11.5px;color:var(--ink-3);letter-spacing:0}
.kneu{border:1px dashed var(--line);border-radius:var(--r);background:var(--surface);margin-top:10px}
.kneu[open]{border-style:solid;border-color:var(--sec,var(--marke))}
.kneu[open]>summary .kneu-p svg{transform:rotate(180deg)}
.kneu-p svg{transition:transform .18s cubic-bezier(.2,0,0,1)}
.kneu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 15px}
.kneu>summary::-webkit-details-marker{display:none}
.kneu-p{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--sec-soft,var(--marke-soft));color:var(--sec,var(--marke))}
.kneu-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.kneu-t b{font-size:14.5px;font-weight:700;line-height:1.25}
.kneu-t span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.kneu-inh{padding:0 15px 15px}
.zurueck{border:1.5px solid var(--marke);border-radius:13px;padding:16px 17px;margin-bottom:20px}
.zurueck-t{font-weight:700;font-size:16px;line-height:1.3}
.zurueck-s{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:6px}
.zurueck .btn{margin-top:12px;width:100%}
.zurueck-mehr{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.empf-hi-t{font-weight:700;font-size:17px;color:var(--marke);line-height:1.3}
.empf-hi-s{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:7px}

.ok{font-size:12.5px;color:var(--accent);opacity:0;transition:opacity .2s}
.ok.on{opacity:1}
.storage{margin-top:16px;font-size:12px;color:var(--ink-3);padding:10px 13px;border:1px dashed var(--line);border-radius:12px}

/* ---------------- Reiter ----------------
   Am Handy unten, in Daumenreichweite. Am Computer oben.
   Der aktive Reiter traegt drei Signale: Farbe, kraeftigere Zeichnung und eine Pille. */
nav.tabs{display:flex;gap:2px;max-width:var(--sp);margin:0 auto;padding:0 6px;
  border-bottom:1px solid var(--line)}
nav.tabs button{flex:1;min-width:0;background:none;border:0;cursor:pointer;
  font-family:var(--ui);padding:9px 2px 0;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--ink-3);
  transition:color .18s cubic-bezier(.2,0,0,1)}
nav.tabs .lb{font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Der Strich traegt die Bereichsfarbe und ist beim nicht gewaehlten
   Reiter durchsichtig - so springt beim Wechsel nichts, es faerbt sich
   nur. Ein Element, das erscheint und verschwindet, verschiebt die
   Beschriftung um zwei Punkte, und das sieht man. */
nav.tabs .str{display:block;height:2.5px;width:26px;border-radius:2px;
  background:transparent;margin-top:6px;margin-bottom:2px;
  transition:background-color .18s cubic-bezier(.2,0,0,1)}
nav.tabs button.an{color:var(--sec)}
nav.tabs button.an .lb{font-weight:600}
nav.tabs button.an .str{background:var(--sec)}
@media (max-width:340px){ nav.tabs .lb{font-size:10px} }

/* ---------- Das Blatt hinter «Mehr» ---------- */
.tabmehr{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:41;
  max-width:var(--sp);margin:0 auto;background:var(--surface);
  border-top:1px solid var(--line);border-radius:14px 14px 0 0;
  box-shadow:0 -10px 30px rgba(10,22,40,.10);padding:8px 8px 12px}
.tabmehr .tm-z{display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;font-family:var(--ui);font-size:15px;
  color:var(--ink);padding:13px 12px;border-radius:10px;text-align:left}
.tabmehr .tm-z:hover{background:var(--surface-3)}
.tabmehr .tm-z.an{color:var(--sec);font-weight:600;background:var(--sec-soft)}

/* ---------------- Hilfe ----------------
   Die Antwortenliste liest sich wie die Papiere-Karten: Titel fett, die
   Antwort darunter in Ruhe. Ein Link, der aussieht wie ein Link, waere
   hier eine Liste blauer Zeilen - und niemand laese die Antworten. */
/* ---------- Die Bewertung ----------
   Zugeklappt eine ruhige Zeile, aufgeklappt fuenf grosse Sterne. Gross,
   weil das die einzige Stelle der App ist, an der man mit dem Daumen
   zielt, ohne etwas zu verlieren - und weil ein zu kleiner Stern auf dem
   Telefon den danebenliegenden trifft. 44 Pixel ist das Mass, unter dem
   Fingerziele unzuverlaessig werden. */
.bw-st{color:var(--sec);font-size:17px;line-height:1}
.bw-stand{color:var(--ink-3);font-size:13px;margin-top:8px}
.bw-frage{color:var(--ink-2);font-size:14px;line-height:1.5;margin-bottom:10px}
/* Die Sterne sind das Bedienelement der ganzen Karte. 44 Pixel ist das
   Mass, unter dem Fingerziele unzuverlaessig werden - ein zu kleiner
   Stern auf dem Telefon trifft den danebenliegenden. */
.bw-sterne{display:flex;gap:4px;margin-left:-4px}
.bw-sterne button{background:none;border:0;padding:4px;cursor:pointer;
  font-size:30px;line-height:1;min-width:44px;min-height:44px;color:var(--line-feld);
  transition:color .12s cubic-bezier(.2,0,0,1)}
.bw-sterne button:hover{color:#e0a516}
.bw-sterne button.an{color:#e0a516}
.bw-sterne button:focus-visible{outline:2px solid var(--sec);outline-offset:2px;border-radius:8px}
.bw-text{display:block;margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.bw-text textarea{display:block;width:100%;margin-top:6px}
/* Fuer den Haken gilt das Muster, das die ganze App benutzt: .chk2.
   Eine eigene Regel dafuer war ein Fehler - sie setzte die Breite des
   Kaestchens nicht zurueck, und weil input hier grundsaetzlich
   width:100% hat, nahm das Kaestchen die ganze Zeile ein und schob den
   Satz in eine 70 Pixel schmale Spalte. */
#bwBox .chk2{margin-top:14px;align-items:flex-start;line-height:1.45}
#bwBox .chk2 input{margin-top:1px}
/* Die Linie zwischen Bewerten und Weiterempfehlen. Zwei Anliegen, eine
   Karte - die Linie sagt, wo das eine aufhoert. */
#bwMsg{text-align:left;margin-top:10px}
.bw-weg{display:flex;margin-top:10px}
.bw-weg button{margin-left:0}
.bw-trenn{height:1px;background:var(--line);margin:18px -16px 16px}
#bwEmpfBox .empf-lead{margin-top:0}
.hi-liste{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.hi-k{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;
  text-decoration:none;color:inherit;background:transparent;
  transition:background-color .15s cubic-bezier(.2,0,0,1)}
.hi-k:hover{background:var(--sec-soft)}
.hi-k .tt{font-weight:600;font-size:15px;color:var(--ink)}
.hi-k .us{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.hi-k:focus-visible{outline:2px solid var(--sec);outline-offset:-2px}
.hi-tel{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-size:19px;font-weight:700;letter-spacing:.01em;
  background:var(--accent);color:var(--accent-ink);border-radius:14px;
  padding:14px 24px;text-decoration:none;min-height:52px}
.hi-tel:hover{filter:brightness(1.06)}
.hi-tel.hi-mail{background:transparent;color:var(--sec);font-size:16px;
  box-shadow:inset 0 0 0 1.5px var(--line);margin-left:8px}
.hi-tel.hi-mail:hover{background:var(--sec-soft);filter:none}
@media (max-width:420px){
  .hi-tel{display:flex;width:100%}
  .hi-tel.hi-mail{margin-left:0;margin-top:8px}
}
.hi-tel:focus-visible{outline:2px solid var(--sec);outline-offset:2px}
.hi-zeiten{margin-top:14px}
.hi-zeiten .sr{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  font-size:14px;color:var(--ink-2)}
.hi-zeiten .sr span:first-child{white-space:nowrap}
.hi-zeiten .sr span:last-child{font-family:var(--ui);color:var(--ink);text-align:right}
/* Auf schmalen Geraeten untereinander statt nebeneinander: Sonst bricht
   "Montag bis Freitag" in drei Zeilen um und die Zeit steht daneben in
   der Luft. */
@media (max-width:400px){
  .hi-zeiten .sr{flex-direction:column;gap:1px;padding:7px 0}
  .hi-zeiten .sr span:last-child{text-align:left}
}
/* "Erfassen" ist die Taetigkeit: ein leiser Ring, auch wenn der Reiter
   nicht gewaehlt ist. Kein zweiter Farbton - nur eine Andeutung. */
nav.tabs .pil.tun{box-shadow:inset 0 0 0 1.5px var(--line)}
nav.tabs button[aria-selected=true] .pil.tun{box-shadow:none}
nav.tabs .ic{display:block;color:var(--ink-3)}
nav.tabs .lb{font-size:11px;color:var(--ink-3);letter-spacing:.005em;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
nav.tabs button:focus-visible{outline:2px solid var(--sec);outline-offset:-3px;border-radius:12px}

/* Am Computer stehen alle acht oben - dort ist Platz, und «Mehr» waere
   ein Klick fuer nichts. Am Telefon fuenf und «Mehr». */
nav.tabs button.mehr{display:none}
.tabmehr{display:none}
@media (max-width:899px){
  nav.tabs button.rest{display:none}
  nav.tabs button.mehr{display:flex}
  .tabmehr:not([hidden]){display:block}
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:none;
    background:var(--surface);border-bottom:0;border-top:1px solid var(--line);
    padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -1px 0 rgba(20,33,61,.02)}
  nav.tabs button{padding:2px 2px 0;gap:3px}
  main{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  #v-onb,#v-auth{padding-bottom:40px}
}
@media (hover:hover){
  nav.tabs button:hover .ic,nav.tabs button:hover .lb{color:var(--ink-2)}
  nav.tabs button[aria-selected=true]:hover .ic,nav.tabs button[aria-selected=true]:hover .lb{color:var(--sec)}
}
.topright{display:flex;align-items:center;gap:8px;flex-shrink:0}
.outbtn{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.outbtn:hover{color:var(--ink);border-color:var(--ink)}
.outbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ---------- Einrichtung ---------- */
#v-onb,#v-auth{max-width:min(var(--sp),560px);margin:0 auto;padding:0 18px 40px;min-height:100%}
.authfoot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:14px}
.onb-mark{display:flex;align-items:center;gap:10px;padding-top:18px}
.onb-mark .brand .mk{width:32px;height:32px;border-radius:7px;background:none;border:1.5px solid var(--marke);
  color:var(--marke);font-size:20px}
.onb-mark .brand .wm{font-size:26px;color:var(--marke);font-weight:600;letter-spacing:.015em}
.onb-mark .mk{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.onb-mark .nm{font-size:15px;font-weight:700;letter-spacing:-.01em}
.onb-step{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-top:20px}
#v-onb h1{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:14px 0 0}
#v-onb h1.sm{font-size:21px}
.onb-lead{font-size:14px;color:var(--ink-2);margin-top:9px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px 18px;
  text-align:left;font-family:var(--ui);color:var(--ink);cursor:pointer;width:100%}
.opt.on{border:2px solid var(--accent);background:var(--accent-soft);padding:16px 17px}
.opt .t{font-size:16px;font-weight:700;display:flex;justify-content:space-between;gap:10px}
.opt .t .ck{color:var(--accent)}
.opt .d{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.45}
/* Zwei verschiedene Dinge hiessen beide "opt": der kleine graue Zusatz in
   einer Beschriftung ("falls vorhanden", "leer = wie der Eintritt") und die
   grosse Wahlkarte bei der Einrichtung. Die Wahlkarte steht weiter unten im
   Stilblatt und gewann darum - der Zusatz bekam Rahmen, Polster und volle
   Breite und sah aus wie ein zweites Eingabefeld.

   Marcos Bildschirm vom 3. Oktober zeigt es beim Feld UID: unter der
   Beschriftung ein Kasten mit "FALLS VORHANDEN", darunter erst das richtige
   Feld. Diese Zeile gibt dem Zusatz in einer Beschriftung seinen Stil
   zurueck; die Wahlkarte bleibt, wie sie ist. */
label .opt{background:none;border:0;border-radius:0;padding:0;width:auto;
  display:inline;cursor:inherit;text-align:inherit;
  font-weight:400;font-size:11.5px;color:var(--ink-3);letter-spacing:0;
  text-transform:none;margin-top:-2px}
.onb-actions{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.qrwrap{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center;margin-top:18px}
.qrwrap .qr{display:flex;justify-content:center}
.qrwrap .qr img,.qrwrap .qr canvas{width:190px!important;height:190px!important;border-radius:6px}
.qrwrap .qrph{width:190px;height:190px;border:1px dashed var(--line-strong,var(--line));border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-line;
  font-size:12.5px;color:var(--ink-3);padding:16px}
.qrwrap .num{font-family:var(--mono);font-size:31px;font-weight:600;letter-spacing:.14em;margin-top:15px;font-variant-numeric:tabular-nums}
.qrwrap .lb{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-top:4px}
.timer{font-size:12px;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:6px 12px;
  display:inline-block;margin-top:14px}
.scanbox{margin-top:16px;border-radius:14px;overflow:hidden;background:#000;position:relative;aspect-ratio:1/1}
.scanbox video{width:100%;height:100%;object-fit:cover;display:block}
.scanframe{position:absolute;inset:14%;border:2px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 2000px rgba(0,0,0,.28)}
.scanstat{font-size:13px;color:var(--ink-2);margin-top:10px;text-align:center;line-height:1.5}
.codefield{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:.24em;text-align:center;
  padding:16px 10px;margin-top:20px;font-variant-numeric:tabular-nums}
.okmark{width:74px;height:74px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:35px;margin:30px auto 0}
.person{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:14px 16px;margin-top:18px}
.person .av{width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex:none}
.person .t1{font-size:15px;font-weight:700}
.person .t2{font-size:12px;color:var(--ink-2);margin-top:1px}
/* ---- Aufklappbare Gruppen in den Angaben ----
   Damit nicht alles auf einmal auf einen einprasselt. */
/* Der aufgeraeumte Kopf der Angaben.
   ==================================
   Marco am 6. Oktober: «Ich finde den allgemeinen Teil etwas ueberladen und
   unuebersichtlich.» Er hatte recht - es standen siebzehn gleich aussehende
   Klappen untereinander, rund 145 Felder, alle gleich wichtig wirkend.

   Jetzt steht zuoberst, was man neunmal von zehn sehen will, ohne etwas
   aufzuklappen: drei Chips mit den Entscheiden, die alles andere steuern,
   und ein Steckbrief mit den Zahlen. Darunter nur noch drei Abschnitte,
   eine Karte «Besonderes» mit Schaltern und eine Schublade fuers Konto. */
.ag-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.ag-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:20px;
  cursor:pointer;line-height:1.3}
.ag-chip:focus-visible{outline:2px solid var(--sec);outline-offset:2px}
.ag-chip.an{background:var(--sec-soft);border-color:var(--sec-soft);color:var(--sec-tief)}
.ag-steck{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;margin-top:14px}
.ag-kopf{padding:13px 15px 11px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ag-kopf b{display:block;font-size:16px;line-height:1.2;letter-spacing:-.01em}
.ag-kopf span{display:block;font-size:12px;color:var(--ink-2);margin-top:3px}
.ag-z{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:2px 12px;padding:9px 15px;border-top:1px solid var(--line-2);font-size:13.5px}
/* «Normalarbeitsvertrag Hauswirtschaft» passt in keine halbe Zeile.
   Statt abzuschneiden rutscht der Wert auf die naechste Zeile. */
.ag-z .k{flex:none}
.ag-z .v{min-width:0;overflow-wrap:anywhere}
.ag-z:first-of-type{border-top:0}
.ag-z .k{color:var(--ink-2)}
.ag-z .v{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
/* Die Frage unter ihrem Schalter - eingerueckt auf die Hoehe des Textes,
   damit man sieht, wozu sie gehoert. */
/* Die Verwaltungsseite der Projekte. */
/* Ein Abschnitt im Editor: Zeiten, Ziel, Beschreibung, Dauer. */
.pj-dtl{padding:8px 16px 10px 30px}
.pj-dtl div{display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--ink-2);padding:3px 0}
.pj-dtl div span:last-child{font-family:var(--mono);white-space:nowrap}
/* ---- Reiter «Rapporte» (25. Oktober 2026) ----
   Die Stunden gross und in der Bereichsfarbe, das Material als Zeile
   darunter: eine Nachkalkulation sucht zuerst die Stunden. Zwei Zahlen
   in einer Zelle brauchen eine eigene Regel, sonst stehen sie
   nebeneinander und man liest «42.75 h CHF 1284» als eine Zahl. */
.row .vl.zwei{text-align:right;line-height:1.15}
.row .vl.zwei b{display:block;font-size:16px;color:var(--sec,var(--accent));font-weight:600}
.row .vl.zwei em{display:block;font-style:normal;font-family:var(--ui);
  font-size:11.5px;color:var(--ink-3);margin-top:2px}
/* Die Zeile einer Person. Der Punkt traegt ihre Farbe - dieselbe, die sie
   im Kalender und im Mannschaftsbogen hat. Eine Person behaelt ihre
   Farbe ueberall, sonst muss man jedes Mal den Namen lesen. */
.rap-mit{display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-top:1px solid var(--line-2);font-size:13px}
.rap-mit .pk{width:8px;height:8px;border-radius:999px;flex:none}
.rap-mit .nm{flex:1;min-width:0;font-weight:500}
.rap-mit .vl{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.rap-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--surface-2);border-top:1px solid var(--line);
  font-size:13px;font-weight:600}
.rap-tot .vl{font-family:var(--mono);font-size:14px;white-space:nowrap}
.rap-ohne{border-style:dashed}
/* Umbruchfaehig, weil dieselbe Zeile in der Mitte 900 Punkte breit ist
   und in der rechten Spalte 300. Ohne `wrap` brach die Zahl mitten
   zwischen «h» und «CHF» um - zwei Zeilen, die wie zwei Zahlen
   aussehen. Die Zahl selbst bricht nie (`nowrap`). */
.rap-alle{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 12px;
  padding:4px 4px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.rap-alle .vl{font-family:var(--mono);font-size:16px;font-weight:600;
  color:var(--ink);white-space:nowrap}
/* ENG, nicht luftig. Marco: «zwischen den Zeilen hast du einen grossen
   Abstand wegen dem Plus. Kannst du das Plus nicht nach links schieben …
   dann dafür die Zeilen näher zusammenrücken.» Die Zeilen stehen jetzt
   auf 6 Punkten Abstand, und das Plus sitzt links auf der Luecke. */
.abs-box{display:flex;flex-direction:column;gap:6px}
.abs-z{border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;background:var(--surface)}
.abs-pj{margin-top:9px}
.pj-wahl{width:100%;font-family:var(--ui);font-size:15px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.abs-f{display:flex;align-items:center;justify-content:space-between;margin-top:9px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.abs-weg{font-family:var(--ui);font-size:12px;background:none;border:0;color:#b3291b;
  cursor:pointer;padding:2px 0}
/* Eine fertige Zeile zeigt alles Wichtige, ohne dass man sie aufmacht -
   Zeit, Ziel, Beschreibung, Dauer. Ein Deckel, unter dem man nachsehen
   muss, macht die Seite kuerzer und die Arbeit laenger. */
.abs-zu{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;background:var(--surface);cursor:pointer;font:inherit}
.abs-zu:hover{border-color:var(--sec)}
.az-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.az-l b{font-family:var(--mono);font-size:14px}
.az-l em{font-style:normal;font-size:12.5px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.az-r{display:flex;align-items:center;gap:9px;flex:none}
.az-h{font-family:var(--mono);font-size:14px}
.az-p{color:var(--mut);font-size:17px;line-height:1}
/* Die Frage «Wer hat es bezahlt?» - zwei grosse Flaechen statt eines
   Hakens. Ein Haken haette eine Vorgabe, die man uebersieht, und hier
   bedeutet die Vorgabe «wird ausbezahlt». */
.aus-wer{display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin:8px 0 18px;align-items:stretch}
.aus-w{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  text-align:left;padding:10px 12px;border:1px solid var(--lin);
  border-radius:var(--r);background:var(--kar);color:var(--ink);cursor:pointer}
.aus-w b{font-size:14.5px}
.aus-w span{font-size:12px;color:var(--mut);line-height:1.3}
.aus-w.on{border-color:var(--sec);background:var(--sec-soft)}
.aus-w.on b{color:var(--sec)}
@media(max-width:380px){.aus-wer{grid-template-columns:1fr}}
/* Das Fenster selbst nutzt die Blatt-Huelle (.bl-ovl/.bl-box) weiter -
   eine zweite Gestaltung fuer dasselbe Ding waere eine zweite Wahrheit. */
#absDlg,#ausDlg{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;justify-content:center}
#absDlg[hidden],#ausDlg[hidden]{display:none}
@media(min-width:700px){#absDlg,#ausDlg{align-items:center}}
/* DER KNOPF «SPEICHERN» BLEIBT STEHEN, DER INHALT ROLLT (25.10.2026).
   Marco: «Der Knopf speichern sieht man auf dem Desktop erst wenn man
   ein bisschen runter scrollt. Das ist ein bisschen nicht so schön.»

   Die Ursache lag in der geerbten Blatt-Hülle: `.bl-box` rollt als
   GANZES (`max-height:88vh; overflow:auto`), also rollte der Fuss mit
   hinaus. Das ist bei einem Blatt richtig — dort liest man — und bei
   einem Fenster falsch: hier handelt man, und der Knopf, der die
   Handlung abschliesst, muss sichtbar sein.

   **Ein Knopf, den man erst suchen muss, ist für den Menschen dasselbe
   wie ein Knopf, den es nicht gibt.** Darum rollt jetzt nur der Inhalt;
   Kopf und Fuss stehen fest, und der Strich über dem Fuss sagt, dass
   darüber noch etwas liegt. */
.abs-dlg{--sp:480px;display:flex;flex-direction:column;overflow:hidden}
.abs-dlg > .bl-griff,.abs-dlg > .ad-kopf,.abs-dlg > .ad-fuss,
.abs-dlg > .chk{flex:none}
#adInhalt,#axInhalt{flex:1 1 auto;min-height:0;overflow:auto;
  /* Der Innenabstand gehoert hierher, sonst klebt die Rollleiste am Text. */
  padding-right:2px}
.abs-dlg > .ad-fuss{border-top:1px solid var(--line);padding-top:14px;margin-top:0}
.ad-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ad-kopf h2{margin:0 0 4px}
.ad-x{background:none;border:0;font-size:17px;color:var(--mut);cursor:pointer;padding:4px 6px;line-height:1}
.ad-fuss{display:flex;align-items:center;gap:12px;margin-top:16px}
.ad-std{flex:1;text-align:center;font-family:var(--mono);font-size:16px}
/* Das Unterschriftenfeld. «touch-action:none» ist nicht Kosmetik: ohne das
   rollt der Browser am Telefon die Seite, statt den Strich zu zeichnen, und
   der Kunde bekommt eine leere Flaeche unter dem Finger. */
.sig-feld{border:1px dashed var(--line);border-radius:10px;background:#fff;
  margin-top:6px;overflow:hidden}
.sig-feld canvas{display:block;width:100%;height:170px;touch-action:none;
  cursor:crosshair}
.ad-tr{margin:16px 0 10px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.abs-pause{display:flex;align-items:center;gap:8px;padding:7px 13px;
  border-left:3px solid var(--line);margin-left:10px;color:var(--mut);font-size:12.5px}
.ap-z{flex:1;min-width:0}
.ap-f{width:62px;padding:4px 6px;font-family:var(--mono);font-size:13px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:inherit}
.ap-e{flex:none}
/* Das kleine Plus zwischen zwei Zeilen: sichtbar genug, um gefunden zu
   werden, leise genug, um die Liste nicht zu zerreissen. */
.abs-plusklein{display:flex;align-items:center;gap:8px;width:100%;border:0;
  background:none;cursor:pointer;padding:0;height:20px;color:var(--mut)}
.abs-plusklein span{flex:none;width:20px;height:20px;border:1px dashed var(--line);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:var(--paper);line-height:1}
.abs-plusklein i{flex:1;height:1px;background:var(--line);display:block}
.abs-plusklein:hover span{border-color:var(--sec);border-style:solid;color:var(--sec)}
.abs-plusklein:hover i{background:var(--sec)}
.abs-bar{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.abs-gross{display:flex;align-items:center;gap:10px;width:100%;
  border:1.5px dashed var(--line);border-radius:var(--r);padding:13px 15px;
  background:none;cursor:pointer;font:inherit;font-size:14px;color:var(--ink)}
.abs-gross:hover{border-color:var(--sec);border-style:solid;color:var(--sec)}
.ag-p{font-size:19px;line-height:1;color:var(--sec)}
.abs-sum{display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.abs-sum b{font-family:var(--mono);font-size:17px}
.pj-seg{display:flex;gap:6px;margin-bottom:12px}
.pj-sg{flex:1;text-align:center;font-size:12.5px;padding:8px 4px;font-family:var(--ui);
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.pj-sg.on{background:var(--sec-soft);border-color:transparent;color:var(--sec-tief);font-weight:700}
.pj-such{width:100%;font-family:var(--ui);font-size:15px;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.pj-feld{width:100%;font-family:var(--ui);font-size:17px;padding:4px 0 10px;
  border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);border-radius:0}
.pj-feld:focus{outline:0;border-bottom-color:var(--sec)}
.pj-kopf{margin-bottom:12px}
.pj-frage{margin:2px 0 12px 45px;padding:12px 14px;background:var(--sec-soft);
  border-radius:var(--r)}
.pj-frage .ft{font-size:12.5px;font-weight:700;color:var(--sec-tief);margin-bottom:9px}
.pj-frage .bar{gap:8px}
.ag-sch{display:flex;align-items:flex-start;gap:11px;width:100%;background:transparent;
  border:0;font:inherit;color:inherit;cursor:pointer;padding:10px 0;text-align:left;
  border-top:1px solid var(--line-2)}
.ag-sch:first-of-type{border-top:0;padding-top:2px}
.ag-sch:focus-visible{outline:2px solid var(--sec);outline-offset:2px;border-radius:8px}
.ag-kipp{width:34px;height:20px;flex:none;border-radius:20px;background:var(--line);
  position:relative;transition:background .18s;margin-top:1px}
.ag-kipp::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:var(--surface);transition:transform .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ag-sch[aria-pressed="true"] .ag-kipp{background:var(--sec)}
.ag-sch[aria-pressed="true"] .ag-kipp::after{transform:translateX(14px)}
.ag-sch .tx{flex:1;min-width:0}
.ag-sch .tx b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.ag-sch .tx span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
@media (prefers-reduced-motion:reduce){
  .ag-kipp,.ag-kipp::after{transition:none}
}
/* Eine Gruppe IN einer Gruppe - nur in der Schublade «Konto und Haushalt».
   Sie bekommt keinen eigenen Rahmen, sonst stuenden zwei Kaesten ineinander
   und die Schublade saehe aus wie ein Fehler. */
.grp .inh > .grp{border-left:0;border-right:0;border-radius:0;margin-top:0;
  border-top:1px solid var(--line-2);border-bottom:0}
.grp .inh > .grp:first-of-type{border-top:0}
.grp .inh > .grp > summary{padding-left:0;padding-right:0}
.grp{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:16px;overflow:hidden}
.grp > summary{list-style:none;cursor:pointer;padding:16px;display:flex;align-items:center;gap:13px}
/* Das Zeichen links. Grau und ruhig - die Farbe gehoert dem aktiven
   Bereich, nicht einer Liste von sechzehn Kapiteln (24. Oktober 2026). */
.grp .gi{width:32px;height:32px;border-radius:50%;background:var(--surface-3);
  color:var(--ink-2);flex:none;display:flex;align-items:center;justify-content:center}
.grp[open] .gi{background:var(--sec-soft);color:var(--sec)}
.grp > summary::-webkit-details-marker{display:none}
.grp > summary:focus-visible{outline:2px solid var(--sec);outline-offset:-3px;border-radius:var(--r)}
.grp .gt{flex:1;min-width:0}
.grp .gt b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.grp .gt > span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.grp .gp{width:30px;height:30px;border-radius:50%;background:none;color:var(--ink-3,#9aa7b4);flex:none;
  display:flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.2,0,0,1)}
.grp[open] .gp{color:var(--sec)}
.grp[open] .gp{transform:rotate(180deg)}
.grp[open] > summary{border-bottom:1px solid var(--line-2)}
.grp > .inh{padding:2px 16px 18px}
.grp > .inh > h2:first-child{margin-top:14px}
@media (hover:hover){.grp > summary:hover{background:var(--surface-3)}}

/* ---------- DIE KAPITEL ALS EINE LISTE (24. Oktober 2026) ----------
   Marco, nach dem Entwurf: «Genau so möchte ich es haben.» Gemeint ist
   die ruhige Liste: EINE weisse Karte, Zeile fuer Zeile mit Zeichen,
   Titel, kurzer Zeile darunter und einem Pfeil nach rechts.

   Gebaut ohne einen einzigen Griff ins Dokument: die Kapitel bleiben, wo
   sie sind, `order` holt sie nach oben und die Raender zwischen ihnen
   fallen weg. Ein Umbau des Dokuments waere hier besonders teuer - an
   diesen Kapiteln haengen 800 Pruefungen, und ein verschobenes Stueck
   hat in derselben Nacht schon eine halbe Stunde gekostet.

   Nur am Telefon. Ab 1200 Punkten stehen die Kapitel in drei Spalten mit
   der Navigation links (JQ); dort waere eine zweite Liste eine zweite
   Antwort auf dieselbe Frage. */
/* «Übersicht» und die Register in der linken Navigation. Sie sehen aus
   wie die Kapitel, tragen aber keine Nummer - sie sind keine Schritte in
   einer Reihenfolge, sondern Orte. */
.kapListe .kapUeb{font-weight:700}
.kapListe .kapExtra .nr{opacity:.45}

/* EIN KAPITEL, EINE SEITE - auf jeder Breite.
   ==========================================
   Diese zwei Zeilen standen bis zum 24. Oktober 2026 im Media Query fuer
   das Telefon. Am Bildschirm blieb darum jedes Kapitel stehen, auch wenn
   man links eines gewaehlt hatte - Marco: «sonst verliert man sich in
   der Navigation, wenn man rauf und runter scrollen kann endlos».
   Jetzt gelten sie ueberall; am Bildschirm waehlt die linke Spalte, am
   Telefon die Liste. Dieselbe Mechanik, zwei Wege hinein. */
#v-set.blatt-an .weg{display:none}
#v-set.blatt-an > details.grp.allein{margin-top:0;border:0;border-radius:0;background:none}
#v-set.blatt-an > details.grp.allein > summary{display:none}
#v-set.blatt-an > details.grp.allein > .inh{padding:0}

@media (max-width:1199px){
  #v-set{display:flex;flex-direction:column}
  /* `min-width:0`, sonst erzwingt der Inhalt eines offenen Kapitels die
     Breite und schiebt die halbe Seite aus dem Bild - in einer Flex-Spalte
     ist `min-width:auto` die Vorgabe. */
  #v-set > *{order:3;min-width:0}
  #v-set > #setWarten, #v-set > #fremdBox, #v-set > #zvTop,
  #v-set > #setChips{order:0}
  /* Die allgemeinen Angaben (der Steckbrief) stehen zuoberst, die Register
     fuer die losen Bloecke unter der Kapitelkarte. Marco am 24. Oktober
     2026: «vielleicht die allgemeinen Angaben zu alleroberst und dann die
     Register, alles andere verpackt in Registern weiter unten.» */
  #v-set > #setSteck{order:0}
  #v-set > #setExtra{order:2;margin-top:14px}
  /* In der LISTE verschwindet, was ein Register vertritt - nicht erst im
     Blatt. Ohne diese Zeile stuende jeder Block zweimal da: einmal als
     Zeile, einmal darunter in ganzer Laenge. */
  #v-set.liste .weg{display:none}
  #aboStart.weg{display:none}
  #v-set > details.grp{order:1;margin-top:0;border-radius:0;border-top:0}
  #v-set > details.grp:first-of-type{margin-top:18px;border-top:1px solid var(--line);
    border-top-left-radius:var(--r);border-top-right-radius:var(--r)}
  #v-set > details.grp:last-of-type{border-bottom-left-radius:var(--r);
    border-bottom-right-radius:var(--r)}
  /* Die Trennlinie beginnt beim Text, nicht am Rand - so liest sich die
     Karte als eine Liste und nicht als Stapel Kaesten. */
  #v-set > details.grp + details.grp > summary{position:relative}
  #v-set > details.grp + details.grp > summary::before{content:"";position:absolute;
    left:61px;right:0;top:0;height:1px;background:var(--line)}
  #v-set > details.grp[open] + details.grp > summary::before{display:none}
  /* Zu heisst «da geht es weiter»: der Pfeil zeigt nach rechts. Offen
     zeigt er nach unten, wie bisher. */
  /* IN DER LISTE WIRD KEIN INHALT GEZEIGT - unabhaengig davon, ob ein
     Kapitel `open` traegt. An mehreren Stellen setzt die App selber
     `.open = true` (Steckbrief, Modulknoepfe, Spruenge aus den Papieren),
     teils zeitversetzt; wer dagegen mit Javascript anrennt, hat einen
     Wettlauf gebaut, den er mal gewinnt und mal verliert. Die Liste sagt
     es stattdessen einmal und endgueltig. */
  #v-set.liste:not(.blatt-an) > details.grp > *:not(summary){display:none}
  #v-set.liste:not(.blatt-an) > details.grp > summary .gp{transform:rotate(-90deg)}
  #v-set > details.grp:not([open]) > summary .gp{transform:rotate(-90deg)}
  /* Im Blatt steht nur noch das eine Kapitel - ohne Kasten, ohne eigene
     Ueberschrift, weil der Kopf sie schon traegt. */
  #v-set.blatt-an details.grp.allein{margin-top:0;border:0;border-radius:0;background:none}
  #v-set.blatt-an details.grp.allein > summary{display:none}
  #v-set.blatt-an details.grp.allein > .inh{padding:0}
  /* EIN KAPITEL IST DIE GANZE SEITE (24. Oktober 2026).
     Marco: «Die Seite sollte ganz aufgehen und dann geht man wieder
     zurück.» Der Abo-Kasten und die Personenwahl stehen ausserhalb der
     Angaben und blieben darum stehen - im Blatt haben sie nichts
     verloren: sie gehoeren zur Uebersicht, nicht zu diesem Kapitel. */
  body.setblatt #uebungBar, body.setblatt #aboStart, body.setblatt #personBar,
  body.setblatt #fehltBand, body.setblatt #mailBand, body.setblatt #homeBand,
  body.setblatt #standBand, body.setblatt #datenBand{display:none}
  /* Der Zurueck-Pfeil bleibt oben kleben.
     ====================================
     Marco am 24. Oktober 2026: «Ich haette einfach gerne, dass der
     Zurueckknopf, wenn man in einem Menue drin ist, immer oben sichtbar
     bleibt. Dann kann man jederzeit zurueck.» Ein Kapitel wie «Lohn und
     Abzuege» ist laenger als der Bildschirm; wer unten steht, musste bis
     ganz nach oben scrollen, um herauszukommen.

     `top:0`, nicht die gemessene Hoehe des Kopfes: der Kopf der App
     scrollt beim Blaettern ohnehin weg (nachgemessen am 24. Oktober 2026,
     sein unterer Rand liegt dann bei -56). Wer stattdessen auf eine
     gemessene Hoehe klebt, laesst den Pfeil mitten im Text schweben, mit
     durchlaufendem Inhalt darueber - so sah der erste Wurf aus. */
  #v-set > #setKopf{order:0;display:flex;align-items:center;gap:6px;
    padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:4px;
    position:sticky;top:0;z-index:40;background:var(--paper)}
  #v-set > details.grp.allein{margin-top:12px;border:0;border-radius:0;background:none}
  #v-set > details.grp.allein > summary{display:none}
  #v-set > details.grp.allein > .inh{padding:0}
}

/* ---- Bewegung ----
   Kurz, nur Deckkraft und Verschiebung. Wer Bewegung abgestellt hat,
   bekommt das Einblenden ohne das Verschieben. */
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main.wechsel{animation:einblenden .2s cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:120ms!important;scroll-behavior:auto!important}
  main.wechsel{animation:none}
  .wk,.mtrack{scroll-behavior:auto!important}
}

/* ---- Am Computer darf die Spalte etwas breiter sein ---- */
@media (min-width:900px){
  :root{--sp:720px}
  .codefield{font-size:34px}
  .wk button{padding-top:10px;padding-bottom:10px}
}
@media (min-width:1280px){
  :root{--sp:800px}
}
/* Die Breiten der beiden Randspalten. Sie stehen hier oben und nicht im
   Raster weiter unten, damit es EINE Stelle gibt, an der man sie ändert —
   die Mitte rechnet sich aus dem, was übrig bleibt. Rechts etwas breiter
   als links: links stehen Namen, rechts ganze Sätze. */
:root{ --sp-links:248px; --sp-rechts:300px }
@media (min-width:1500px){
  :root{ --sp-links:262px; --sp-rechts:328px }
}
/* ==================================================================
   AM BILDSCHIRM SIND KNÖPFE KEINE BALKEN  (21. Oktober 2026)
   ==================================================================
   Marco: «wenn man die App auf dem Computerbildschirm anschaut, dann sind
   gewisse Knöpfe riesig». Gemessen: der Knopf «Vertrag erstellen und
   ansehen» war 730 Punkte breit.

   Der Grund ist `.btn{width:100%}`, und die Regel ist am TELEFON richtig -
   dort trifft der Daumen eine volle Breite sicher, und schmale Knöpfe
   nebeneinander sind eine bekannte Fehlerquelle. Am Bildschirm zeigt
   dieselbe Regel einen Balken, und ein Balken sieht nicht aus wie etwas,
   das man drückt.

   `max-width` statt `width:auto`: so bleibt jeder Knopf, der heute schmaler
   ist, genau wie er ist - die Regel kann also nichts umwerfen, was
   funktioniert. Sie begrenzt nur nach oben. */
@media (min-width:900px){
  .btn{ max-width:340px }
  /* In einer Reihe teilen sich Knöpfe den Platz schon selber. */
  .row .btn, .zeile .btn, .g2 .btn, .btnrow .btn{ max-width:none }
}

/* ==================================================================
   DREI SPALTEN AM BILDSCHIRM  (21. Oktober 2026, JQ)
   ==================================================================
   Marco: «man muss sie richtig sehen, links, Mitte und rechts, dass es
   ein bisschen unterteilt ist, dass man sich nicht vor lauter Angaben
   verliert, sondern es muss wenig, aber klar sein.» Und nach den zwei
   Entwürfen: «das ist nämlich ein Durchbruch … die Hälfte der Besucher
   schaut es am PC an.»

   DIE AUFTEILUNG, und sie ist in jeder Ansicht dieselbe:

     links   WO BIN ICH   — wer, und die Sprungliste durch die Ansicht
     Mitte   WAS TUE ICH  — der eigentliche Inhalt, breit und ruhig
     rechts  WAS FOLGT    — was die App aus dem Eingetragenen macht

   Die rechte Spalte ist der eigentliche Gewinn. Heute muss man durch
   die Angaben scrollen, um zu sehen, WAS die App daraus macht; jetzt
   steht es daneben, während man tippt.

   DIE LEISTE STEHT OBEN, nicht mehr links. In JN (gestern) lief sie als
   212 Punkte breite Spalte am linken Rand — Marco: «ein bisschen zu kurz,
   zu schmal». Mit drei Spalten wäre sie die vierte gewesen, und vier
   Dinge nebeneinander sind keine Ordnung mehr.

   KEINE ZWEITE QUELLE FÜR DIESELBE SACHE. Was rechts steht, wird aus der
   Mitte DORTHIN VERSCHOBEN, nicht nachgebaut — sonst gäbe es zwei Stellen,
   die dasselbe behaupten, und die laufen auseinander. Das ist die Lehre
   von eigenesBlatt(), dienstjahr(), SKALEN.vd und datenbankAn(), zum
   siebten Mal. spaltenSetzen() verschiebt, spaltenZurueck() stellt wieder
   her, und jedes Stück merkt sich, wo es herkam.

   AB 1200 PUNKTEN, nicht früher: bei 1024 (iPad quer) bliebe neben zwei
   Randspalten nichts für die Mitte. Darunter ist die App unverändert —
   das Telefon fasst diese Regel nicht an. */
@media (min-width:1200px){
  /* ---- Die Leiste oben ---- */
  nav.tabs{
    position:sticky; top:0; left:auto; right:auto; bottom:auto;
    width:auto; z-index:40;
    flex-direction:row; justify-content:center; align-items:center;
    gap:3px; max-width:none; margin:0; height:auto;
    padding:9px 20px;
    border-top:0; border-right:0; border-bottom:1px solid var(--line);
    background:var(--surface);
  }
  nav.tabs button{
    flex:0 0 auto; flex-direction:row; justify-content:center;
    gap:8px; padding:9px 14px; border-radius:9px; width:auto; height:auto;
    transition:background .15s ease, color .18s cubic-bezier(.2,0,0,1);
  }
  nav.tabs .lb{ font-size:13.5px; max-width:none }
  /* Der Strich gehört UNTER ein Zeichen, nicht neben eines. Nebeneinander
     trägt die Fläche das Signal. */
  nav.tabs .str{ display:none }
  nav.tabs button.an{ background:var(--sec-soft); color:var(--sec-tief) }
  @media (hover:hover){ nav.tabs button:not(.an):hover{ background:var(--surface-2) } }
  /* Der Kopf wird zur Zeile: Zeichen links, Rolle und Abmelden rechts.
     Der Titel der Ansicht steht ab jetzt in der MITTE als Überschrift,
     nicht mehr hier oben — zweimal derselbe Titel ist einer zu viel. */
  header.top .top-in{ max-width:1500px; margin:0 auto; padding:13px 28px 9px;
    display:flex; align-items:center; gap:18px }
  header.top .top-in .brand{ flex:0 0 auto }
  header.top .top-in .ttl{ flex:1; display:flex; align-items:center;
    justify-content:flex-end; margin:0 }
  header.top .ttl .sub{ display:none }
  header.top .ttl h1{ font-size:0; line-height:0; height:0; overflow:hidden;
    margin:0 }

  /* ---- Das Raster ---- */
  main#main{
    display:grid;
    grid-template-columns:var(--sp-links) minmax(0,1fr) var(--sp-rechts);
    align-items:start; gap:0;
    max-width:1500px; margin:0 auto; padding:0;
  }
  main#main>section, main#main>#aboStart{ grid-column:2; min-width:0;
    padding:24px 34px 70px }
  /* Ein leerer Behälter braucht keinen Rand. Ohne diese Zeile stand über
     dem Inhalt ein Streifen von 94 Punkten, den niemand erklären kann. */
  main#main>#aboStart:empty{ padding:0 }
  main#main>section{ padding-top:20px }
  /* Ohne rechte Spalte zwei statt drei — die Mitte nimmt den Platz mit.
     Gesetzt von spaltenSetzen(), damit Raster und Inhalt dieselbe
     Entscheidung tragen. */
  main#main.zwei{ grid-template-columns:var(--sp-links) minmax(0,1fr) }
  main#main.zwei>#seitR{ display:none }
  #seitL{ grid-column:1; grid-row:1 / 99 }
  #seitR{ grid-column:3; grid-row:1 / 99 }
  #seitL, #seitR{
    position:sticky; top:52px; max-height:calc(100vh - 52px); overflow-y:auto;
    padding:26px 22px 40px; background:var(--surface-2);
    /* align-self, weil das Raster `align-items:start` trägt: ohne diese
       Zeile ist die Spalte nur so hoch wie ihr Inhalt, und der farbige
       Streifen hört mitten auf der Seite auf. */
    align-self:stretch; min-height:calc(100vh - 52px);
  }
  /* In einer 300 Punkte breiten Spalte steht nichts nebeneinander. Die
     drei Kacheln des Monats ragten sonst über den Rand hinaus, und der
     Nettobetrag war abgeschnitten — eine Zahl, die man nicht ganz liest,
     ist schlimmer als keine. */
  #seitL>*, #seitR>*{ max-width:100% }
  /* ---- DIE ZAHLEN RECHTS ----
     Marco am 21. Oktober, nach dem ersten Blick auf die echte Seite:
     «Ich finde die Darstellung der Zahlen auf dem Desktop PC etwas zu
     mickrig — Riesenfelder und kleine Zahlen, lieber grössere Zahlen,
     ein bisschen stylischer, etwas mehr Farbe.»

     Er hat recht, und der Grund ist das Raster: Die Kacheln kommen vom
     Telefon, wo drei nebeneinander stehen und darum klein sein müssen.
     Untereinander in einer 300 Punkte breiten Spalte ist genau umgekehrt
     Platz da — und eine Zahl, die man sucht, ist keine Auskunft.

     Die Farbe kommt aus --sec, der Bereichsfarbe des Reiters: im Monat
     grün-blau, im Lohnblatt orange. Sie ist also nicht geschmückt,
     sondern sagt, wo man ist. */
  #seitR .kpis{ display:flex; flex-direction:column; gap:10px; margin:0 }
  #seitR .kpi{ display:block; padding:14px 16px; border-radius:13px;
    background:var(--sec-soft); border:0; box-shadow:none }
  #seitR .kpi .k{ margin:0; font-size:10.5px; letter-spacing:.8px;
    text-transform:uppercase; font-weight:700; color:var(--sec-tief);
    opacity:.75 }
  #seitR .kpi .v{ display:block; margin-top:5px; font-size:30px;
    font-weight:700; letter-spacing:-1px; line-height:1.05;
    color:var(--sec-tief); white-space:nowrap }
  /* Die Einheit setzt unit() als <s> daneben. Bei 30 Punkten Zahlgrösse
     klebt sie sonst am letzten Ziffernzeichen — «36.00h» liest sich wie
     eine einzige Zeichenfolge. */
  #seitR .kpi .v s{ font-size:14px; font-weight:600; letter-spacing:0;
    opacity:.6; margin-left:6px; text-decoration:none; vertical-align:baseline }
  /* Die volle Farbe der ersten Kachel steht seit dem 24. Oktober 2026 bei
     `.kpis` und gilt fuer jede Breite. HIER muss sie trotzdem stehen:
     `#seitR .kpi{background:var(--sec-soft)}` traegt eine Kennung und
     schlaegt jede Klassenregel - ohne diese Zeile blieb die Kachel hell,
     waehrend die weisse Schrift darauf schon galt. Die Einheit «h» stand
     dann weiss auf hellgruen, also unsichtbar; gesehen im Monitor-Bild am
     24. Oktober 2026, nachdem Marco nach der Monitor-Ansicht gefragt
     hatte. **Eine Farbe aendern heisst, JEDE Stelle nachzusehen, die sie
     schon einmal anders gesetzt hat.** */
  #seitR .kpis .kpi:first-child{ background:var(--sec); border-color:var(--sec) }
  /* Und der Titel und die Einheit gleich mit: `#seitR .kpi .k` und
     `#seitR .kpi .v s` tragen dieselbe Kennung und schlagen die
     Klassenregel sonst. Beim ersten Wurf stand «STUNDEN» dunkelgruen auf
     Gruen - lesbar nur, wenn man weiss, was dort steht. */
  #seitR .kpis .kpi:first-child .k{ color:#fff; opacity:.82 }
  #seitR .kpis .kpi:first-child .v{ color:#fff }
  #seitR .kpis .kpi:first-child .v s{ color:#fff; opacity:.72 }
  /* Und die Zeilen in den Randspalten dürfen auch atmen. */
  #seitR .row .mn, #seitR .row .dt{ font-size:13.5px }
  #seitR .card{ margin-top:0 }
  #seitR h2{ display:none }
  #seitL{ border-right:1px solid var(--line) }
  #seitR{ border-left:1px solid var(--line) }
  /* In den Randspalten sind die Karten ruhiger als in der Mitte: sie
     begleiten, sie tragen nicht. */
  #seitL .card, #seitR .card{ box-shadow:none; border:1px solid var(--line);
    background:var(--surface) }
  .spTitel{ font-size:11px; font-weight:700; letter-spacing:.7px;
    text-transform:uppercase; color:var(--ink-3); margin:0 0 13px }
  .spTitel.spaet{ margin-top:30px }
  /* Die Sprungliste links */
  .kapListe{ display:flex; flex-direction:column; gap:1px }
  .kapListe button{ display:flex; align-items:center; gap:10px;
    padding:9px 11px; border-radius:8px; font-size:13.5px; color:var(--ink-2);
    font-weight:500; line-height:1.25; text-align:left; background:none;
    border:0; width:100%; cursor:pointer; font-family:inherit }
  @media (hover:hover){ .kapListe button:hover{ background:var(--surface-3) } }
  .kapListe button.an{ background:var(--sec-soft); color:var(--sec-tief);
    font-weight:650 }
  .kapListe button .nr{ width:19px; height:19px; flex:none; border-radius:5px;
    background:var(--surface-3); color:var(--ink-3); font-size:10.5px;
    font-weight:700; display:grid; place-items:center }
  .kapListe button.an .nr{ background:var(--sec); color:#fff }
  /* Die Monatswahl steht links und nicht mehr quer über dem Inhalt. Sie
     kommt aus dem Kopf und bringt dessen Masse mit — hier bekommt sie
     die der Spalte. */
  #seitL .mbar{ position:static; width:auto; max-width:none; margin:0;
    padding:0; background:none; border:0; box-shadow:none }
  #seitL .mbar .mtrack{ flex:1; min-width:0 }
  #seitL .mbar .nb{ display:none }
  #seitL .bar{ flex-wrap:wrap; gap:7px; margin:0 }
  #seitL .bar .chip{ flex:0 0 auto }
  #seitL #kalLeg{ margin:0 }
  /* Die Monatswahl des Kalenders bringt die Masse der breiten Mitte mit:
     zwei Pfeile aussen und der Monat dazwischen, auf 900 Punkte gedacht.
     In 250 Punkten muss sie enger stehen. */
  #seitL #kalNav{ margin:0 }
  #seitL #kalNav>*{ width:auto; max-width:100% }
  #seitL #kalNav .bar, #seitL #kalNav .mbar{ gap:8px; justify-content:space-between }
  /* ---- Die Wochenleiste steht links, und zwar untereinander ----
     Marco: «beim Zeiterfassen … da müsste man auch etwas mehr nach links
     und rechts bewegen.» Quer über 900 Punkte sind sieben Tage eine
     Leiste, die man überliest; untereinander in der Spalte sind sie eine
     Liste, in der man den Tag SIEHT. Das Wischen am Telefon bleibt
     unberührt — diese Regeln gelten erst ab 1200 Punkten. */
  #seitL #weekBar{ max-width:none; margin:0 0 10px; padding:0;
    justify-content:space-between }
  #seitL #weekStrip{ display:block; overflow:visible; scroll-snap-type:none;
    max-width:none; margin:0; padding:0 }
  /* Der Streifen trägt DREI Wochen übereinander, damit man am Telefon
     wischen kann. In der Spalte wird nicht gewischt, sondern geblättert
     (‹ ›) — die beiden Nachbarwochen wären hier nur Verwirrung. */
  #seitL #weekStrip .wkpg.ab{ display:none }
  /* «wischen oder tippen» gilt dem Finger. Am Bildschirm gibt es keinen,
     und der Hinweis stand quer über der Seite, ohne dass etwas zu ihm
     gehörte. Ein Satz, der auf eine Bedienung zeigt, die es hier nicht
     gibt, ist schlimmer als keiner. */
  #weekHint{ display:none }
  #seitL #weekStrip .wkpg{ display:flex; flex-direction:column; gap:5px;
    width:auto; min-width:0; scroll-snap-align:none }
  #seitL #weekStrip button{ flex:0 0 auto; height:auto; min-height:0;
    display:flex; flex-direction:row; align-items:center; gap:10px;
    padding:9px 12px; width:100%; text-align:left }
  #seitL #weekStrip button .dn{ font-size:11px; letter-spacing:.6px;
    width:28px; flex:none; opacity:.7 }
  #seitL #weekStrip button .dd{ font-size:16px; font-weight:650 }
  #seitL #weekStrip button .dot, #seitL #weekStrip button .sp{ margin-left:auto }
  /* Wer gerade bearbeitet wird — die Karte oben links */
  .werKarte{ padding:14px 15px; border-radius:11px; background:var(--surface);
    border:1px solid var(--line); margin-bottom:26px }
  .werKarte b{ display:block; font-size:15px; letter-spacing:-.2px }
  .werKarte span{ display:block; font-size:12px; color:var(--ink-3);
    margin-top:3px; line-height:1.45 }
  /* Die Überschrift der Ansicht, jetzt in der Mitte */
  /* text-transform ausdrücklich zurück: h2 steht in dieser App sonst in
     Grossbuchstaben, und «ANGABEN» als Seitentitel schreit. */
  main#main h2.mittTitel{ font-size:23px; font-weight:700; letter-spacing:-.6px;
    margin:0 0 5px; color:var(--ink); text-transform:none; border:0;
    padding:0; background:none }
  .mittLead{ font-size:13.5px; color:var(--ink-3); margin:0 0 24px;
    max-width:62ch; line-height:1.5 }
  /* Die festen Bänder stehen über dem Raster, nicht darin */
  #blatt, .tabmehr, .vsb, .pbar{ left:0 }
}
/* Unter 1200 Punkten gibt es die Spalten nicht, und sie dürfen auch
   keinen Platz einnehmen — sonst stünde auf dem Telefon eine leere
   Fläche, die niemand erklären kann. */
@media (max-width:1199.98px){
  #seitL, #seitR{ display:none }
}
/* Mit der Maus gibt es Schwebezustaende, auf dem Finger nicht. */
@media (hover:hover){
  .row:hover{background:var(--surface-3)}
  .btn:not(:disabled):hover{filter:brightness(1.07)}
}