/* ============================================================
Carely – Alles für die Engel im Alltag · Stilblatt (Apple-Stil, Entscheidung E-39, Spec 2026-11-05-apple-stil-design.md)
------------------------------------------------------------
Vorlage: design-system/carely/entwurf/apple/apple.css (freigegeben 05.11.2026). Aufbau:
1. Grund Schrift (Systemschrift, Inter lokal als Ersatz, OFL), Rücksetzen, Symbole
2. Tokens der einzige Block mit Farbwerten, Dunkel zweimal (System und Schalter). Namen aus v2/v3 bleiben (Konsole,
ops.css, bewegung.css lesen sie), dazu die Namen des Entwurfs (--blau, --fuell, --trenn, --glas ...).
3. Bausteine Rahmen, Kopf, Menüs, Kennzahl, Karte, Listen, Tabelle, Handy
4. App Klappmenüs, Aufgaben, Formulare, Hinweise, Anmeldung ...
5. Konsole Formen für ops.css - nur außerhalb der App (body:not(.app)).
6. Apple gemeinsame Bausteine: Glas, Knöpfe, gruppierte Liste, Symbolkachel, Schalter, Segmente, Kapsel-Zähler.
Regeln: kein style-Attribut (CSP style-src 'self'); Farbwerte nur in Block 2; Zustand nie nur über Farbe; Bewegung nur
transform/opacity; bei "Bewegung reduzieren" und "Transparenz reduzieren" gibt es Ersatz (Block 6).
Neue Seiten (z. B. Auswertungen) nutzen nur Tokens und die Bausteine aus Block 6.
============================================================ */
/* ══ 1. Grund ══════════════════════════════════════════════ */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
src:url(vendor/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
src:url(vendor/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
[hidden]{display:none!important}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block}
table{border-collapse:collapse}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zahl{font-variant-numeric:tabular-nums}
/* Symbole: (Lucide 1.66.0, ISC) */
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.k{width:16px;height:16px}
.ico.g{width:24px;height:24px}
/* Verlauf (Sparkline): vom Server als SVG gezeichnet, keine Bibliothek, kein Skript. */
.verlauf-svg{width:100%;height:100%;overflow:visible}
.verlauf-svg .linie{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.verlauf-svg .flaeche-verlauf{stroke:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ══ 2. Tokens · Apple-Stil (E-39) ═════════════════════════ */
:root{
color-scheme:light;
--grund:#F2F5F9; --flaeche:#FFFFFF; --flaeche-2:#F6F8FB; --flaeche-3:#E9EEF4;
--fuell:rgba(60,84,108,.10); --fuell-2:rgba(60,84,108,.16); --trenn:rgba(19,38,58,.09);
--rand:rgba(19,38,58,.09); --rand-stark:rgba(19,38,58,.16); --rand-2:#7C8B99;
--text:#0F2233; --text-2:#4A5D6E; --text-3:#5C6E7E;
--blau:#0B64A8; --blau-druck:#0A5490; --auf-blau:#FFFFFF; --blau-weich:#E3EEF8;
--cyan:#0891A5; --cyan-text:#067487; --cyan-weich:#E1F4F7; --marine:#193851;
--marke:#0B64A8; --marke-tief:#0A5490; --marke-text:#FFFFFF; --marke-weich:#E3EEF8;
--akzent:#0891A5; --akzent-text:#08121B; --akzent-weich:#E1F4F7; --akzent-flaeche:#0891A5;
--zeichen-grund:#FFFFFF; --zeichen-herz:#193851;
--kachel:#193851; --kachel-herz:#FFFFFF; --kachel-rand:transparent;
--glas:rgba(250,252,254,.72); --glas-rand:rgba(255,255,255,.65); --glas-ersatz:#F7F9FC; --unschaerfe:blur(28px) saturate(180%);
--leiste-grund:#F7F9FC; --leiste-unten:#F7F9FC; --leiste-text:#0F2233; --leiste-gruppe:#5C6E7E; --leiste-stark:#0F2233;
--leiste-ueber:rgba(60,84,108,.10); --leiste-aktiv:#0B64A8; --leiste-rand:rgba(19,38,58,.09);
--marke-schein:0 1px 2px rgba(11,22,32,.3),inset 0 1px 0 rgba(255,255,255,.18); --auf-schlecht:#FFFFFF; --schatten-unten:0 -10px 30px -12px rgba(19,38,58,.18);
--gut:#17743E; --gut-weich:#E4F3EA; --gut-punkt:#1F9D57;
--warn:#A64A06; --warn-weich:#FDF0E3; --warn-punkt:#D95F06;
--schlecht:#C2271F; --schlecht-weich:#FBE9E8; --schlecht-punkt:#C9302A;
--neutral-punkt:#93A1AD; --grau-kachel:#5E6F7E; --segment-aktiv:#FFFFFF;
--vie:#067487; --vie-weich:#E1F4F7; --mg:#6A2FC9; --mg-weich:#EFE8FB; --ne:#0F766E; --ne-weich:#E0F2EF;
--verlauf:#0B64A8;
--abc-a:#193851; --abc-b:#2E6E9E; --abc-c:#6A6F73; --auf-abc:#FFFFFF;
--ueber:rgba(19,38,58,.045); --ueber-druck:rgba(19,38,58,.08); --hinter:rgba(11,22,32,.38);
--s1:0 0 0 .5px rgba(19,38,58,.05),0 1px 2px rgba(19,38,58,.05),0 4px 14px -6px rgba(19,38,58,.10);
--s2:0 0 0 .5px rgba(19,38,58,.05),0 2px 6px rgba(19,38,58,.06),0 18px 40px -14px rgba(19,38,58,.22);
--s3:0 0 0 .5px rgba(19,38,58,.08),0 6px 16px rgba(19,38,58,.10),0 32px 72px -16px rgba(19,38,58,.36);
--hintergrund:radial-gradient(60rem 38rem at 8% -10%,rgba(11,100,168,.10),transparent 60%),radial-gradient(48rem 32rem at 100% 0%,rgba(8,145,165,.09),transparent 60%);
--platz:#E6ECF2;
--link:#0B64A8; --link-weich:#E3EEF8;
--schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif;
--titel:var(--schrift);
--zahl:var(--schrift);
--schatten-1:var(--s1); --schatten-2:var(--s2); --schatten-3:var(--s3);
--radius:20px; --radius-k:12px; --radius-r:999px; --r-karte:20px; --r-mittel:14px; --r-klein:10px; --r-voll:999px; --ziel:44px;
--leiste-breit:264px; --leiste-schmal:76px; --kopf-hoehe:60px;
--feder:cubic-bezier(.32,.72,0,1); --sprung:cubic-bezier(.34,1.45,.64,1); --d-k:160ms; --d:280ms; --d-l:420ms;
--dauer-k:160ms; --dauer:280ms; --kurve:cubic-bezier(.32,.72,0,1);
--z-kopf:30; --z-leiste:40; --z-menue:60; --z-sprung:100; --z-meldung:90;
--abstand-1:4px; --abstand-2:8px; --abstand-3:12px; --abstand-4:16px; --abstand-5:24px; --abstand-6:32px; --abstand-7:48px;
--weiss:#FFFFFF; --auf-sq:#FFFFFF; --avatar-grund:linear-gradient(160deg,#2A5E86,#193851);
--sq-schein:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(11,22,32,.18);
--knopf-schein:0 1px 2px rgba(11,22,32,.2),0 6px 16px -6px color-mix(in srgb,var(--blau) 70%,transparent);
--blau-schein:0 2px 8px -2px color-mix(in srgb,var(--blau) 60%,transparent);
--segment-schein:0 0 0 .5px rgba(19,38,58,.06),0 2px 6px rgba(19,38,58,.14),0 1px 1px rgba(19,38,58,.06);
--daumen-schein:0 2px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.06);
--zahl-schein:0 10px 24px -8px rgba(25,56,81,.6),inset 0 1px 0 rgba(255,255,255,.2);
--hintergrund-login:radial-gradient(50rem 34rem at 15% 10%,color-mix(in srgb,var(--blau) 16%,transparent),transparent 65%),radial-gradient(44rem 30rem at 90% 90%,color-mix(in srgb,var(--cyan) 14%,transparent),transparent 65%);
--fokus-ring:color-mix(in srgb,var(--blau) 85%,transparent); /* 3 px Ring, gemessen >= 3 : 1 gegen Fläche und Grund (Entwurf hatte 55 % = 2,4 : 1) */
--zeichen-schein:0 1px 2px rgba(11,22,32,.3),inset 0 1px 0 rgba(255,255,255,.18);
--leiste:264px; /* Breite der Seitenleiste der KONSOLE (ops.css) - die App nimmt --leiste-breit */
}
@media (prefers-color-scheme:dark){:root:not([data-thema="hell"]){
color-scheme:dark;
--grund:#0A141D; --flaeche:#14222E; --flaeche-2:#1A2B39; --flaeche-3:#223545;
--fuell:rgba(160,190,215,.14); --fuell-2:rgba(160,190,215,.22); --trenn:rgba(190,215,235,.12);
--rand:rgba(190,215,235,.12); --rand-stark:rgba(190,215,235,.22); --rand-2:#5D7891;
--text:#F2F6FA; --text-2:#A9BAC8; --text-3:#96A9B9;
--blau:#5CB0F0; --blau-druck:#7CC1F5; --auf-blau:#08121B; --blau-weich:#16344D;
--cyan:#4FD0E3; --cyan-text:#4FD0E3; --cyan-weich:#0F3039; --marine:#193851;
--marke:#5CB0F0; --marke-tief:#7CC1F5; --marke-text:#08121B; --marke-weich:#16344D;
--akzent:#4FD0E3; --akzent-text:#08121B; --akzent-weich:#0F3039; --akzent-flaeche:#4FD0E3;
--kachel-rand:rgba(255,255,255,.18);
--glas:rgba(20,34,46,.66); --glas-rand:rgba(255,255,255,.08); --glas-ersatz:#14222E;
--leiste-grund:#14222E; --leiste-unten:#14222E; --leiste-text:#F2F6FA; --leiste-gruppe:#96A9B9; --leiste-stark:#F2F6FA;
--leiste-ueber:rgba(160,190,215,.14); --leiste-aktiv:#5CB0F0; --leiste-rand:rgba(190,215,235,.12);
--auf-schlecht:#08121B; --schatten-unten:0 -10px 30px -12px rgba(0,0,0,.6);
--gut:#5FD08F; --gut-weich:#133323; --gut-punkt:#5FD08F;
--warn:#FFA94D; --warn-weich:#3A2411; --warn-punkt:#FFA94D;
--schlecht:#FF8A80; --schlecht-weich:#3C1A1A; --schlecht-punkt:#FF7272;
--neutral-punkt:#6E8396; --grau-kachel:#55687A; --segment-aktiv:#2C4357; --auf-sq:#08121B;
--vie:#62CFE4; --vie-weich:#0E2C36; --mg:#C3A6FF; --mg-weich:#251B3D; --ne:#4FD1B5; --ne-weich:#0E2E2A;
--verlauf:#5CB0F0;
--abc-a:#B9DBF1; --abc-b:#4F8FBF; --abc-c:#77838E; --auf-abc:#0B1620;
--ueber:rgba(255,255,255,.05); --ueber-druck:rgba(255,255,255,.09); --hinter:rgba(0,0,0,.6);
--s1:0 0 0 .5px rgba(190,215,235,.10),0 1px 2px rgba(0,0,0,.35);
--s2:0 0 0 .5px rgba(190,215,235,.12),0 2px 6px rgba(0,0,0,.35),0 18px 40px -14px rgba(0,0,0,.7);
--s3:0 0 0 .5px rgba(190,215,235,.16),0 8px 20px rgba(0,0,0,.45),0 36px 80px -16px rgba(0,0,0,.85);
--hintergrund:radial-gradient(60rem 38rem at 8% -10%,rgba(92,176,240,.12),transparent 60%),radial-gradient(48rem 32rem at 100% 0%,rgba(79,208,227,.08),transparent 60%);
--platz:#1F3345;
--link:#5CB0F0; --link-weich:#16344D;
}}
:root[data-thema="dunkel"]{
color-scheme:dark;
--grund:#0A141D; --flaeche:#14222E; --flaeche-2:#1A2B39; --flaeche-3:#223545;
--fuell:rgba(160,190,215,.14); --fuell-2:rgba(160,190,215,.22); --trenn:rgba(190,215,235,.12);
--rand:rgba(190,215,235,.12); --rand-stark:rgba(190,215,235,.22); --rand-2:#5D7891;
--text:#F2F6FA; --text-2:#A9BAC8; --text-3:#96A9B9;
--blau:#5CB0F0; --blau-druck:#7CC1F5; --auf-blau:#08121B; --blau-weich:#16344D;
--cyan:#4FD0E3; --cyan-text:#4FD0E3; --cyan-weich:#0F3039; --marine:#193851;
--marke:#5CB0F0; --marke-tief:#7CC1F5; --marke-text:#08121B; --marke-weich:#16344D;
--akzent:#4FD0E3; --akzent-text:#08121B; --akzent-weich:#0F3039; --akzent-flaeche:#4FD0E3;
--kachel-rand:rgba(255,255,255,.18);
--glas:rgba(20,34,46,.66); --glas-rand:rgba(255,255,255,.08); --glas-ersatz:#14222E;
--leiste-grund:#14222E; --leiste-unten:#14222E; --leiste-text:#F2F6FA; --leiste-gruppe:#96A9B9; --leiste-stark:#F2F6FA;
--leiste-ueber:rgba(160,190,215,.14); --leiste-aktiv:#5CB0F0; --leiste-rand:rgba(190,215,235,.12);
--auf-schlecht:#08121B; --schatten-unten:0 -10px 30px -12px rgba(0,0,0,.6);
--gut:#5FD08F; --gut-weich:#133323; --gut-punkt:#5FD08F;
--warn:#FFA94D; --warn-weich:#3A2411; --warn-punkt:#FFA94D;
--schlecht:#FF8A80; --schlecht-weich:#3C1A1A; --schlecht-punkt:#FF7272;
--neutral-punkt:#6E8396; --grau-kachel:#55687A; --segment-aktiv:#2C4357; --auf-sq:#08121B;
--vie:#62CFE4; --vie-weich:#0E2C36; --mg:#C3A6FF; --mg-weich:#251B3D; --ne:#4FD1B5; --ne-weich:#0E2E2A;
--verlauf:#5CB0F0;
--abc-a:#B9DBF1; --abc-b:#4F8FBF; --abc-c:#77838E; --auf-abc:#0B1620;
--ueber:rgba(255,255,255,.05); --ueber-druck:rgba(255,255,255,.09); --hinter:rgba(0,0,0,.6);
--s1:0 0 0 .5px rgba(190,215,235,.10),0 1px 2px rgba(0,0,0,.35);
--s2:0 0 0 .5px rgba(190,215,235,.12),0 2px 6px rgba(0,0,0,.35),0 18px 40px -14px rgba(0,0,0,.7);
--s3:0 0 0 .5px rgba(190,215,235,.16),0 8px 20px rgba(0,0,0,.45),0 36px 80px -16px rgba(0,0,0,.85);
--hintergrund:radial-gradient(60rem 38rem at 8% -10%,rgba(92,176,240,.12),transparent 60%),radial-gradient(48rem 32rem at 100% 0%,rgba(79,208,227,.08),transparent 60%);
--platz:#1F3345;
--link:#5CB0F0; --link-weich:#16344D;
}
/* ══ 3. Bausteine ═════════════════════════════════════════ */
/* ── Grundlage ── */
body{font:400 16px/1.5 var(--schrift);color:var(--text);background:var(--grund);min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--titel);font-weight:600;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
a{color:var(--marke);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--marke);outline-offset:2px;border-radius:6px}
.leiste :focus-visible{outline-color:var(--akzent)}
.sprung{display:inline-flex;align-items:center;min-height:var(--ziel);position:absolute;left:16px;top:-80px;z-index:var(--z-sprung);background:var(--marke);color:var(--marke-text);padding:10px 16px;border-radius:var(--radius-k);font-weight:600;text-decoration:none}
.sprung:focus{top:12px}
::selection{background:var(--marke-weich)}
kbd{font:600 12px/1 var(--schrift);padding:3px 6px;border-radius:6px;border:1px solid var(--rand-stark);background:var(--flaeche);color:var(--text-3)}
/* ── Rahmen ── */
.rahmen{display:grid;grid-template-columns:var(--leiste-breit) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--dauer) var(--kurve)}
[data-leiste="schmal"] .rahmen{grid-template-columns:var(--leiste-schmal) minmax(0,1fr)}
.spalte{min-width:0;display:flex;flex-direction:column}
/* ── Seitenleiste (Marine) ── */
.leiste{position:sticky;top:0;height:100vh;z-index:var(--z-leiste);display:flex;flex-direction:column;
background:linear-gradient(180deg,var(--leiste-grund),var(--leiste-unten));color:var(--leiste-text);border-right:1px solid var(--leiste-rand);overflow:hidden}
.leiste-kopf{height:var(--kopf-hoehe);display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--leiste-rand);flex:none}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--leiste-stark);min-width:0}
.marke-zeichen{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--zeichen-grund);color:var(--zeichen-herz);box-shadow:var(--marke-schein)}
.marke-zeichen .ico{width:22px;height:22px;stroke-width:2}
.marke-text{display:flex;flex-direction:column;min-width:0;white-space:nowrap}
.marke-name{font:650 19px/1.1 var(--titel);letter-spacing:-.02em}
.marke-zeile{font-size:12.5px;color:var(--leiste-gruppe);margin-top:2px}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--leiste-rand) transparent}
.nav-gruppe{font:650 11.5px/1 var(--schrift);letter-spacing:.09em;text-transform:uppercase;color:var(--leiste-gruppe);padding:18px 12px 8px;white-space:nowrap}
.nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:var(--radius-k);color:var(--leiste-text);text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap;transition:background var(--dauer-k)}
.nav a:hover{background:var(--leiste-ueber);color:var(--leiste-stark)}
.nav a[aria-current="page"]{background:var(--leiste-aktiv);color:var(--leiste-stark);font-weight:650}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--akzent)}
.nav a[aria-current="page"] .ico{color:var(--akzent)}
.nav .zaehler{margin-left:auto}
.nav .extern{margin-left:auto;opacity:.7}
.zaehler{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--radius-r);background:var(--akzent);color:var(--akzent-text);font:700 12.5px/1 var(--schrift);font-variant-numeric:tabular-nums}
.zaehler.leise{background:var(--flaeche-3);color:var(--text-2)}
.leiste-fuss{flex:none;padding:12px;border-top:1px solid var(--leiste-rand)}
.leiste-knopf{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:var(--radius-k);background:transparent;color:var(--leiste-text);font-weight:500;font-size:14.5px;white-space:nowrap}
.leiste-knopf:hover{background:var(--leiste-ueber);color:var(--leiste-stark)}
[data-leiste="schmal"] .leiste-knopf .ico{transform:scaleX(-1)}
/* eingeklappt: nur Symbole; Wort bleibt für Vorleser, Zähler wird zum Punkt */
[data-leiste="schmal"] .marke-text,[data-leiste="schmal"] .nav-wort,[data-leiste="schmal"] .nav .extern{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-leiste="schmal"] .leiste-kopf{padding:0 19px}
[data-leiste="schmal"] .nav-gruppe{font-size:0;padding:10px 0 6px;margin:0 14px;border-top:1px solid var(--leiste-rand)}
[data-leiste="schmal"] .nav a,[data-leiste="schmal"] .leiste-knopf{justify-content:center;padding:0}
[data-leiste="schmal"] .nav .zaehler{position:absolute;top:5px;right:7px;min-width:9px;height:9px;padding:0;font-size:0;box-shadow:0 0 0 2px var(--leiste-grund)}
/* ── Kopfleiste ── */
.kopfleiste{position:sticky;top:0;z-index:var(--z-kopf);height:var(--kopf-hoehe);display:flex;align-items:center;gap:14px;padding:0 28px;background:var(--flaeche);border-bottom:1px solid var(--rand)}
.krumen ol{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--text-3);white-space:nowrap}
.krumen li+li::before{content:"/";margin-right:8px;color:var(--rand-stark)}
.krumen a{color:var(--text-3);text-decoration:none}
.krumen a:hover{color:var(--text);text-decoration:underline}
.krumen [aria-current="page"]{color:var(--text);font-weight:650}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.segmente{display:inline-flex;gap:2px;padding:3px;background:var(--flaeche-3);border-radius:12px}
.segmente a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border-radius:9px;color:var(--text-2);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
.segmente a:hover{color:var(--text);background:var(--ueber)}
.segmente a[aria-current="true"]{background:var(--flaeche);color:var(--text);box-shadow:var(--schatten-1)}
.segmente .kurz{display:none}
.standort-punkt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--neutral-punkt)}
.standort-punkt.vie{background:var(--vie)} .standort-punkt.mg{background:var(--mg)} .standort-punkt.ne{background:var(--ne)}
.suchfeld{display:flex;align-items:center;gap:10px;width:240px;height:40px;padding:0 8px 0 12px;border:1px solid var(--rand);border-radius:var(--radius-k);background:var(--flaeche-2);color:var(--text-3);font-size:15px;text-align:left}
.suchfeld:hover{border-color:var(--rand-stark);color:var(--text-2)}
.suchfeld span{flex:1}
.rund-knopf{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid transparent;border-radius:var(--radius-k);background:transparent;color:var(--text-2)}
.rund-knopf:hover{background:var(--ueber);color:var(--text)}
.rund-knopf .punkt-zahl{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--schlecht-punkt);color:var(--auf-schlecht);font:700 11px/18px var(--schrift);box-shadow:0 0 0 2px var(--flaeche)}
.rund-knopf.klein{width:36px;height:36px}
.nur-handy{display:none}
.menue-anker{position:relative}
.avatar-knopf{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 4px;border:0;border-radius:12px;background:transparent;text-align:left}
.avatar-knopf:hover{background:var(--ueber)}
.avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--marke);color:var(--marke-text);font:600 13px/1 var(--titel);letter-spacing:.02em}
.avatar.gross{width:44px;height:44px;font-size:16px}
.avatar.neutral{background:var(--flaeche-3);color:var(--text-2)}
.avatar-name{display:flex;flex-direction:column;font-weight:650;font-size:14.5px;line-height:1.2;white-space:nowrap}
.avatar-name small{font-weight:500;font-size:12.5px;color:var(--text-3)}
.avatar-knopf > .ico{color:var(--text-3)}
/* Klappmenüs */
.menue{position:absolute;right:0;top:calc(100% + 8px);z-index:var(--z-menue);width:320px;background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;box-shadow:var(--schatten-3);padding:8px;animation:auf var(--dauer) var(--kurve)}
@keyframes auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menue-kopf{display:flex;gap:12px;align-items:center;padding:10px 10px 14px;border-bottom:1px solid var(--rand)}
.menue-kopf strong{display:block;font-size:15.5px}
.menue-kopf .leise{font-size:13.5px}
.menue-kopf .chips{margin-top:6px}
.menue-abschnitt{padding:10px 10px 6px}
.menue-titel{font:650 12px/1 var(--schrift);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.thema-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;background:var(--flaeche-3);border-radius:12px}
.thema-wahl button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;border:0;border-radius:9px;background:transparent;color:var(--text-2);font-size:13px;font-weight:600}
.thema-wahl button[aria-pressed="true"]{background:var(--flaeche);color:var(--text);box-shadow:var(--schatten-1)}
.menue-liste{border-top:1px solid var(--rand);margin-top:6px;padding-top:6px}
.menue-liste a,.menue-liste button{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--text);text-decoration:none;font-size:15px;text-align:left}
.menue-liste a:hover,.menue-liste button:hover{background:var(--ueber)}
.menue-liste .ico{color:var(--text-3)}
.menue-liste kbd{margin-left:auto}
.hinweis-liste li{display:flex;gap:12px;padding:12px 10px;border-radius:9px}
.hinweis-liste li+li{border-top:1px solid var(--rand)}
.hinweis-liste p{font-size:14.5px}
.hinweis-liste .leise{font-size:13px;margin-top:2px}
/* ── Hauptbereich ── */
.haupt{padding:28px 32px 56px;width:100%;max-width:1440px}
.haupt > * + *{margin-top:24px}
.seitenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ueberzeile{font:650 12.5px/1 var(--schrift);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.seitenkopf h1{font-size:30px}
.stand{display:flex;align-items:flex-start;gap:8px;margin-top:8px;color:var(--text-2);font-size:15px}
.live-punkt{margin-top:8px;width:8px;height:8px;border-radius:50%;background:var(--gut-punkt);box-shadow:0 0 0 4px var(--gut-weich);flex:none}
.kopf-aktionen{display:flex;gap:10px;flex-wrap:wrap}
.leise{color:var(--text-3)}
/* Knöpfe */
.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-k);border:1px solid var(--rand-stark);background:var(--flaeche);color:var(--text);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;box-shadow:var(--schatten-1);transition:transform var(--dauer-k) var(--kurve)}
.knopf::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ueber);opacity:0;transition:opacity var(--dauer-k)}
.knopf:hover::before{opacity:1}
.knopf:active{transform:translateY(1px)}
.knopf .ico{color:var(--text-2)}
.knopf.haupt-knopf{background:var(--marke);border-color:var(--marke);color:var(--marke-text)}
.knopf.haupt-knopf .ico{color:inherit}
.knopf.klein{min-height:34px;padding:0 12px;font-size:14px;box-shadow:none}
.knopf.still{border-color:transparent;background:transparent;box-shadow:none}
/* ── Kennzahlen ── */
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kz{display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten-1);padding:18px 20px 14px;min-width:0;text-decoration:none;color:inherit;transition:box-shadow var(--dauer) var(--kurve),border-color var(--dauer)}
a.kz:hover{box-shadow:var(--schatten-2);border-color:var(--rand-stark)}
.kz-kopf{display:flex;align-items:center;gap:10px;min-width:0}
.kz-symbol{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--marke-weich);color:var(--marke)}
.kz-symbol .ico{width:18px;height:18px}
.kz-name{font:600 14.5px/1.25 var(--schrift);color:var(--text-2);letter-spacing:0}
.tendenz{margin-left:auto;display:inline-flex;align-items:center;gap:3px;flex:none;padding:3px 9px 3px 6px;border-radius:var(--radius-r);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tendenz .ico{width:14px;height:14px;stroke-width:2.4}
.tendenz.gut{background:var(--gut-weich);color:var(--gut)}
.tendenz.warn{background:var(--warn-weich);color:var(--warn)}
.tendenz.ruhig{background:var(--flaeche-3);color:var(--text-2)}
.kz-wert{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:16px;font:600 36px/1 var(--titel);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kz-von{font:500 15px/1.2 var(--schrift);color:var(--text-3);letter-spacing:0}
.kz-fuss{margin-top:8px;font-size:14px;color:var(--text-3)}
.kz-anmerkung{margin-top:12px!important;font-size:14px;color:var(--text-3)}
.kz-anmerkung .ico{display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--text-3)}
.kz-anmerkung a{margin-left:4px}
.kz-anmerkung a{font-weight:600}
.kz-verlauf{height:42px;margin-top:auto;padding-top:14px}
.verlauf-svg .linie{stroke:var(--verlauf)}
.stop-oben{stop-color:var(--verlauf);stop-opacity:.16}
.stop-unten{stop-color:var(--verlauf);stop-opacity:0}
.verlauf-svg .ende-ring{stroke:var(--flaeche);stroke-width:11px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.verlauf-svg .ende{stroke:var(--akzent-flaeche);stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.verlauf-svg .ende-kern{stroke:var(--verlauf);stroke-width:3px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.verlauf-unter{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-top:4px}
/* ── Raster der Startseite ── */
.raster-haupt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.spalte-links,.spalte-rechts{display:grid;gap:20px;min-width:0}
/* ── Karten ── */
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten-1);min-width:0;overflow:hidden}
.karte-kopf{display:flex;align-items:center;gap:10px;min-height:60px;padding:14px 20px;border-bottom:1px solid var(--rand)}
.karte-kopf h2{font-size:17px}
.karte-kopf .leise{font-size:14px}
.karte-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
.karte-link:hover{text-decoration:underline}
.karte-link .ico{width:16px;height:16px}
.karte-fuss{padding:12px 20px;border-top:1px solid var(--rand);background:var(--flaeche-2);font-size:14px;color:var(--text-3)}
.karte-inhalt{padding:16px 20px}
/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-r);font-size:13px;font-weight:650;white-space:nowrap;background:var(--flaeche-3);color:var(--text-2)}
.chip.vie,.chip.mg,.chip.ne{padding-left:8px}
.chip.vie::before,.chip.mg::before,.chip.ne::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.vie{background:var(--vie-weich);color:var(--vie)} .chip.mg{background:var(--mg-weich);color:var(--mg)} .chip.ne{background:var(--ne-weich);color:var(--ne)}
.chip.pg{background:var(--marke-weich);color:var(--marke)}
/* Braucht dich jetzt */
.aufgaben li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 20px}
.aufgaben li+li{border-top:1px solid var(--rand)}
.aufgaben li::before{content:none}
.aufgabe-symbol{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--grau-kachel);color:var(--weiss);box-shadow:var(--sq-schein)}
.aufgabe-symbol .ico{width:19px;height:19px;stroke-width:2}
.schlecht .aufgabe-symbol{background:var(--schlecht);color:var(--auf-sq)}
.warn .aufgabe-symbol{background:var(--warn);color:var(--auf-sq)}
.aufgabe-rechts{display:flex;align-items:center;gap:10px}
.aufgabe-titel{font-weight:650;line-height:1.35}
.aufgabe-zusatz{font-size:14.5px;color:var(--text-3);margin-top:2px}
.zustand-wort{font-weight:700}
.schlecht .zustand-wort{color:var(--schlecht)} .warn .zustand-wort{color:var(--warn)}
/* Tagesplan */
.plan li{position:relative;display:grid;grid-template-columns:62px 20px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 20px}
.plan li+li{border-top:1px solid var(--rand)}
.uhr{font:600 16px/1.15 var(--titel);font-variant-numeric:tabular-nums}
.uhr small{display:block;font:500 13px/1.3 var(--schrift);color:var(--text-3)}
.spur{position:relative;align-self:stretch;display:grid;place-items:center}
.spur::before{content:"";position:absolute;top:-13px;bottom:-13px;left:50%;width:2px;margin-left:-1px;background:var(--rand)}
.plan li:first-child .spur::before{top:50%}
.plan li:last-child .spur::before{bottom:50%}
.spur i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--flaeche);border:2px solid var(--rand-stark)}
.plan .laeuft .spur i{border-color:var(--gut-punkt);background:var(--gut-punkt);box-shadow:0 0 0 4px var(--gut-weich)}
.plan .abwesend .spur i{border-color:var(--schlecht-punkt)}
.einsatz-titel{font-weight:650}
.einsatz-zusatz{font-size:14.5px;color:var(--text-3)}
.plan-rechts{display:flex;align-items:center;gap:10px}
.zustand{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:14px;white-space:nowrap}
.zustand::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.zustand.gut{color:var(--gut)} .zustand.schlecht{color:var(--schlecht)} .zustand.warn{color:var(--warn)}
.plan li.jetzt{padding-top:0;padding-bottom:0;border-top:0;min-height:0}
.plan li.jetzt + li{border-top:0}
.jetzt-marke{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font:700 12.5px/1 var(--schrift);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);padding:2px 0}
.jetzt-marke::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--akzent-flaeche),transparent)}
/* Standorte */
.mini{width:100%;font-size:15px}
.mini th,.mini td{padding:11px 0;text-align:left;border-bottom:1px solid var(--rand)}
.mini tr:last-child th,.mini tr:last-child td{border-bottom:0}
.mini thead th{font:650 12px/1.2 var(--schrift);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);padding-top:0}
.mini tbody th{font-weight:650}
.mini .rechts{text-align:right;padding-left:12px}
.mini .ort{display:flex;align-items:center;gap:8px;white-space:nowrap}
.neu-zelle{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-left:14px}
.neu-balken{width:64px;height:8px;border-radius:4px;background:var(--flaeche-3);overflow:hidden}
.neu-balken span{display:block;height:100%;width:var(--anteil,0%);border-radius:4px;background:var(--neutral-punkt)}
.neu-balken.vie span{background:var(--vie)} .neu-balken.mg span{background:var(--mg)} .neu-balken.ne span{background:var(--ne)}
/* Personenlisten */
.personen li{display:flex;align-items:center;gap:12px;padding:10px 20px}
.personen li+li{border-top:1px solid var(--rand)}
.personen .p-text{flex:1;min-width:0}
.personen .p-name{font-weight:650}
.personen .p-zusatz{font-size:14px;color:var(--text-3)}
/* Abgleich */
.abgleich li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14.5px}
.abgleich li+li{border-top:1px dashed var(--rand)}
.abgleich .zeit{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* ── Listen-Seite ── */
.reiter{display:flex;gap:4px;border-bottom:1px solid var(--rand);overflow-x:auto;scrollbar-width:none}
.reiter a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-2);font-weight:600;text-decoration:none;white-space:nowrap}
.reiter a:hover{color:var(--text)}
.reiter a[aria-current="page"]{color:var(--text);border-bottom-color:var(--marke)}
.reiter-zahl{font-size:13px;font-weight:700;padding:2px 8px;border-radius:var(--radius-r);background:var(--flaeche-3);color:var(--text-2);font-variant-numeric:tabular-nums}
.reiter a[aria-current="page"] .reiter-zahl{background:var(--marke);color:var(--marke-text)}
.filterleiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rand)}
.eingabe-suche{position:relative;display:flex;align-items:center;flex:1 1 260px;max-width:360px}
.eingabe-suche .ico{position:absolute;left:12px;color:var(--text-3);pointer-events:none}
.eingabe-suche input{width:100%;height:40px;padding:0 12px 0 40px;border:1px solid var(--rand-2);border-radius:var(--radius-k);background:var(--flaeche);font-size:15px}
.eingabe-suche input:focus-visible{outline-offset:0;border-color:var(--marke)}
.filter-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--rand-stark);border-radius:var(--radius-r);background:var(--flaeche);color:var(--text-2);font-weight:600;font-size:14px;white-space:nowrap}
.filter-chip:hover{background:var(--flaeche-2);color:var(--text)}
.filter-chip[aria-pressed="true"]{background:var(--marke-weich);border-color:var(--marke);color:var(--marke)}
.filter-chip[aria-pressed="true"]::before{content:"";width:6px;height:10px;margin:-3px 2px 0 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.auswahl{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-2)}
.auswahl select{height:36px;padding:0 10px;border:1px solid var(--rand-2);border-radius:var(--radius-k);background:var(--flaeche);font-size:14.5px;color:var(--text)}
.filter-rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.treffer{font-size:14px;color:var(--text-3)}
.treffer:empty{display:none}
.tabelle-huelle{overflow-x:auto}
.tabelle{width:100%;font-size:15px}
.tabelle th{position:sticky;top:0;text-align:left;font:650 12.5px/1.2 var(--schrift);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);background:var(--flaeche-2);padding:0 16px;height:44px;border-bottom:1px solid var(--rand);white-space:nowrap}
.tabelle th button{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0 -8px;padding:0 8px;border:0;border-radius:6px;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.tabelle th button:hover{background:var(--ueber);color:var(--text)}
.tabelle th button .ico{width:14px;height:14px;opacity:.55}
.tabelle th[aria-sort] {color:var(--text)}
.tabelle th[aria-sort] button .ico{opacity:1;color:var(--marke)}
.tabelle td{padding:10px 16px;border-bottom:1px solid var(--rand);vertical-align:middle;white-space:nowrap}
.tabelle tbody tr:hover{background:var(--ueber)}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle .rechts{text-align:right}
.person{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;min-width:0}
.person .avatar{width:36px;height:36px;font-size:13px;background:var(--marke-weich);color:var(--marke)}
.person-name{display:block;font-weight:650}
a.person:hover .person-name{text-decoration:underline}
.person-zusatz{display:block;font-size:14px;color:var(--text-3)}
.budget{display:flex;align-items:center;gap:10px}
.balken{width:72px;height:8px;border-radius:4px;background:var(--flaeche-3);overflow:hidden;flex:none}
.balken span{display:block;height:100%;width:var(--anteil,0%);border-radius:4px;background:var(--marke)}
.balken.warn span{background:var(--warn-punkt)}
.budget .zahl{font-size:14.5px}
.budget .warn-wort{color:var(--warn);font-weight:650}
.tabelle-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--rand);background:var(--flaeche-2);font-size:14.5px;color:var(--text-2)}
.seiten{display:flex;align-items:center;gap:4px}
.seiten a,.seiten span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:9px;color:var(--text-2);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.seiten a:hover{background:var(--ueber);color:var(--text)}
.seiten [aria-current="page"]{background:var(--marke);color:var(--marke-text)}
.mehr-laden{display:none}
.geruest{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 6px;border:1px dashed var(--rand-stark);border-radius:6px;font:600 11px/1.4 var(--schrift);letter-spacing:.02em;text-transform:none;color:var(--text-3)}
/* ── Untere Leiste (Handy) und Dialoge ── */
.unten-nav{display:none}
dialog{border:0;padding:0;color:var(--text);background:var(--flaeche);border-radius:18px;box-shadow:var(--schatten-3)}
dialog::backdrop{background:var(--hinter)}
.suche-dialog{width:min(640px,calc(100% - 32px));margin-top:12vh}
.suche-kopf{display:flex;align-items:center;gap:12px;padding:0 16px;height:60px;border-bottom:1px solid var(--rand)}
.suche-kopf input{flex:1;height:100%;border:0;background:transparent;font-size:17px;outline:none}
.suche-kopf .ico{color:var(--text-3)}
.suche-liste{max-height:52vh;overflow:auto;padding:8px}
.suche-gruppe{font:650 12px/1 var(--schrift);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:12px 10px 6px}
.suche-liste a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px;border-radius:10px;color:var(--text);text-decoration:none}
.suche-liste a:hover,.suche-liste a:focus-visible{background:var(--marke-weich)}
.suche-liste .ico{color:var(--text-3)}
.suche-liste .chip{margin-left:auto}
.suche-leer{padding:24px;color:var(--text-3)}
.suche-fuss{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--rand);background:var(--flaeche-2);font-size:13px;color:var(--text-3);border-radius:0 0 18px 18px}
.blatt{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;padding:8px 12px calc(16px + env(safe-area-inset-bottom))}
.blatt-griff{width:40px;height:5px;border-radius:3px;background:var(--rand-stark);margin:4px auto 10px}
.blatt .nav{padding:0;overflow:visible}
.blatt .nav a{color:var(--text-2)}
.blatt .nav a:hover{background:var(--ueber);color:var(--text)}
.blatt .nav-gruppe{color:var(--text-3)}
/* ── Breiten ── */
@media (max-width:1240px){
.raster-haupt{grid-template-columns:minmax(0,1fr)}
.spalte-rechts{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.avatar-name{display:none}
.suchfeld{width:200px}
}
@media (max-width:1100px){
.kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
.segmente .lang{display:none} .segmente .kurz{display:inline}
}
@media (max-width:900px){
.rahmen,[data-leiste="schmal"] .rahmen{grid-template-columns:minmax(0,1fr)}
.leiste{display:none}
.kopfleiste{height:auto;flex-wrap:wrap;gap:10px 8px;padding:10px 16px 12px}
.krumen{display:none}
.nur-handy{display:flex}
.handy-marke{display:flex;align-items:center;gap:10px;font:650 19px/1 var(--titel);letter-spacing:-.02em;color:var(--text);text-decoration:none}
.handy-marke .marke-zeichen{width:34px;height:34px;border-radius:10px}
.handy-marke .marke-zeichen .ico{width:20px;height:20px}
.kopf-rechts{gap:2px}
.suchfeld{width:40px;padding:0;justify-content:center;border-color:transparent;background:transparent}
.suchfeld span,.suchfeld kbd{display:none}
.avatar-knopf > .ico{display:none}
.avatar-knopf{padding:0 4px}
.segmente{order:5;width:100%}
.segmente a{flex:1;justify-content:center;padding:0 6px}
.menue{position:fixed;left:12px;right:12px;top:64px;width:auto}
.haupt{padding:20px 16px calc(96px + env(safe-area-inset-bottom))}
.haupt > * + *{margin-top:20px}
.seitenkopf h1{font-size:25px}
.ueberzeile{margin-bottom:8px}
.stand{font-size:14px}
.kopf-aktionen{display:none}
.kennzahlen{gap:12px}
.kz{position:relative;padding:14px 14px 10px;border-radius:14px}
.kz-symbol{display:none}
.kz-name{font-size:14px}
.tendenz{position:absolute;right:12px;top:44px;font-size:12px;padding:2px 7px 2px 5px}
.kz-fuss{display:none}
.kz-anmerkung{font-size:13.5px}
.kz-wert{font-size:30px;margin-top:10px}
.kz-von{font-size:13.5px;flex-basis:100%}
.kz-verlauf{height:34px;padding-top:10px}
.verlauf-unter{display:none}
.karte{border-radius:14px}
.karte-kopf{padding:12px 16px;min-height:54px}
.aufgaben li{grid-template-columns:auto minmax(0,1fr);padding:14px 16px;gap:4px 12px}
.aufgabe-rechts{grid-column:2;margin-top:8px;flex-wrap:wrap}
.aufgabe-rechts .knopf{min-height:40px}
.karte-kopf .leise{display:none}
.neu-balken{display:none}
.mini{font-size:14.5px}
.aufgabe-symbol{width:34px;height:34px;align-self:start}
.plan li{grid-template-columns:52px 16px minmax(0,1fr);padding:12px 16px;gap:10px}
.plan-rechts{grid-column:3;flex-wrap:wrap}
.personen li{padding:10px 16px}
.karte-inhalt{padding:14px 16px}
.unten-nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-kopf);
background:var(--flaeche);border-top:1px solid var(--rand);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:var(--schatten-unten)}
.unten-nav a,.unten-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;border-radius:12px;background:transparent;color:var(--text-3);text-decoration:none;font-size:12.5px;font-weight:650}
.unten-nav .ico{width:22px;height:22px}
.unten-nav [aria-current="page"]{color:var(--marke)}
.unten-nav [aria-current="page"]::before{content:"";position:absolute;top:-6px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--akzent-flaeche)}
.unten-nav .zaehler{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px;padding:0 5px}
/* Liste am Handy: Zeilen werden Karten */
.filterleiste{padding:12px}
.eingabe-suche{max-width:none;flex-basis:100%}
.filter-chips{display:flex;gap:8px;overflow-x:auto;flex:1 1 100%;scrollbar-width:none;margin:0 -12px;padding:0 12px}
.filter-rechts{margin-left:0}
.tabelle thead{display:none}
.tabelle,.tabelle tbody{display:block}
.tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:14px 16px;border-bottom:1px solid var(--rand)}
.tabelle td{display:block;padding:0;border:0;white-space:normal}
.tabelle td.z-person{grid-column:1;grid-row:1}
.tabelle td.z-aktion{grid-column:2;grid-row:1}
.tabelle td.z-chips{grid-column:1 / -1;grid-row:2;display:flex;gap:6px;flex-wrap:wrap;padding-left:48px}
.tabelle td.z-naechster{grid-row:3;padding-left:48px}
.tabelle td.z-budget{grid-row:4;padding-left:48px}
.tabelle td.z-nr,.tabelle td.z-seit{display:none}
.tabelle td.z-standort,.tabelle td.z-pg{display:none}
.tabelle td.z-budget,.tabelle td.z-naechster{grid-column:1 / -1;font-size:14.5px;color:var(--text-2)}
.tabelle td[data-label]::before{content:attr(data-label) " ";color:var(--text-3)}
.tabelle td.z-budget::before{content:none}
.seiten{display:none}
.mehr-laden{display:inline-flex}
}
@media (min-width:901px){ .tabelle td.z-chips{display:none} }
@media print{
.leiste,.kopfleiste,.unten-nav,.knopf,.filterleiste,.seiten{display:none!important}
.rahmen{display:block} .karte,.kz{box-shadow:none;break-inside:avoid}
}
.seiten a:first-child .ico{transform:scaleX(-1)}
.blatt > .knopf{width:100%;margin-top:10px;min-height:48px}
/* ══ 4. App: was der Entwurf nicht zeigt, die App aber braucht ═══════════════
Alles hier liest nur Tokens. Wo etwas vom Entwurf abweicht, steht der Grund dabei. */
/* Ein einziger Standort: Chip statt Umschalter (ein Umschalter mit einer Wahl wäre Lärm). */
.kopf-standort{flex:none}
/* Klappmenüs (Benutzermenü, Hinweise) als : öffnen auch ohne Skript; carely.js schließt bei Klick daneben
und mit Esc (Fokus zurück auf den Knopf) – Verhalten wie im Entwurf. */
.menue-anker > summary{list-style:none;cursor:pointer}
.menue-anker > summary::-webkit-details-marker{display:none}
.menue-liste form{margin:0}
.menue-satz{padding:8px 10px 6px;font-size:13.5px;color:var(--text-3)}
.hinweis-liste .ico{flex:none;margin-top:1px;color:var(--warn)}
/* Seitenkopf ohne Datenstand (Zugänge, Willkommen): ein erklärender Satz */
.unterzeile{margin-top:8px;color:var(--text-2);font-size:15px;max-width:75ch}
/* Stand-Punkt: veraltet bzw. noch kein Abgleich (das Wort steht daneben) */
.live-punkt.warn{background:var(--warn-punkt);box-shadow:0 0 0 4px var(--warn-weich)}
.live-punkt.aus{background:var(--neutral-punkt);box-shadow:0 0 0 4px var(--flaeche-3)}
/* Kennzahl ohne ehrlichen Verlauf (aktive Kunden): ein Satz an der Stelle der Linie */
.kz-ohne{margin-top:auto;padding-top:14px;font-size:12.5px;line-height:1.35;color:var(--text-3)}
/* „Braucht dich jetzt“: jede Aufgabe klappt ihre Einsätze auf (, geht mit der Tastatur ohne Skript).
Die Zeile selbst sieht aus wie im Entwurf (dort ein mit Knopf rechts). */
.aufgaben li.mit-liste{display:block;padding:0}
.aufgabe > summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 20px;list-style:none;cursor:pointer}
.aufgabe > summary::-webkit-details-marker{display:none}
.aufgabe > summary:focus-visible{outline-offset:-3px}
.aufgabe-text{display:block;min-width:0}
.aufgabe-titel,.aufgabe-zusatz{display:block}
.aufgabe-rechts .knopf .ico{transition:transform var(--dauer-k) var(--kurve)}
.aufgabe[open] .aufgabe-rechts .knopf .ico{transform:rotate(180deg)}
.aufgaben .aufgabe-liste{margin:0 20px 14px 72px;padding:8px 14px;border-radius:var(--radius-k);background:var(--flaeche-2);font-size:14.5px;color:var(--text-2)}
.aufgaben .aufgabe-liste li{display:block;padding:5px 0;border:0}
.aufgaben .aufgabe-liste li::before{content:none}
.aufgaben .aufgabe-liste strong{color:var(--text);font-weight:650}
.karte-hinweis{padding:10px 20px 14px;font-size:14px;color:var(--text-3)}
/* Leer und „nichts zu tun“: ein Satz, nie eine leere Karte */
.leer{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;color:var(--text-2);font-size:15px}
.leer .ico{flex:none;margin-top:1px;color:var(--gut)}
.leer.still .ico{color:var(--text-3)}
.leer strong{color:var(--text)}
/* Rückfrage am letzten Krankheitstag (F-5, Entwurf entwurf/au-erinnerung.css): Antwortknöpfe, Vermerk, „Heute erledigt“,
Kartenfuß mit dem Mail-Stand, „Heute abwesend“ geteilt. Nur Tokens; Kontraste aus MASTER (Vermerk --warn auf --flaeche
6,6/9,4; --text-3 auf --flaeche-2 5,2/6,4). */
.gut .aufgabe-symbol{background:var(--gut);color:var(--auf-sq)}
.gut .zustand-wort{color:var(--gut)}
.aufgaben > li:not(.mit-liste){align-items:start}
.aufgaben > li:not(.mit-liste) .aufgabe-symbol{margin-top:2px}
.aufgabe-rechts{flex-wrap:wrap;justify-content:flex-end}
.antworten{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.antworten .knopf{min-height:44px}
.antworten .knopf.ja .ico{color:var(--gut)}
.antworten .knopf.nein .ico{color:var(--schlecht)}
.antworten .knopf.still{color:var(--text-2)}
.aufgabe-vermerk{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:600;color:var(--warn)}
.aufgabe-vermerk.neutral{color:var(--text-2);font-weight:500}
.erledigt{border-top:1px solid var(--rand)}
.erledigt > summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;cursor:pointer;list-style:none;font-weight:650;color:var(--text-2)}
.erledigt > summary::-webkit-details-marker{display:none}
.erledigt > summary:hover{background:var(--ueber)}
.erledigt > summary:focus-visible{outline-offset:-3px}
.erledigt > summary .pfeil{margin-left:auto;transition:transform var(--dauer-k) var(--kurve)}
.erledigt[open] > summary .pfeil{transform:rotate(180deg)}
.erledigt > summary .ico:first-child{color:var(--gut)}
.erledigt-liste{padding:0 20px 16px}
.erledigt-liste li{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--flaeche-2);border-radius:var(--radius-k)}
.erledigt-liste li + li{margin-top:8px}
.erledigt-liste li > .ico{color:var(--gut);flex:none}
.erledigt-liste .e-text{flex:1;min-width:0;font-size:14.5px}
.erledigt-liste .e-titel{font-weight:650;color:var(--text)}
.erledigt-liste .e-zusatz{color:var(--text-3)}
.erledigt-liste form{flex:none;margin:0}
.fuss-zeile{display:flex;align-items:flex-start;gap:8px}
.fuss-zeile .ico{margin-top:2px;color:var(--text-3);flex:none}
.fuss-zeile a{font-weight:600}
.karte-gruppe{display:flex;align-items:center;gap:8px;padding:14px 20px 6px;font:650 12px/1.2 var(--schrift);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.personen + .karte-gruppe{border-top:1px solid var(--rand);margin-top:4px}
.personen .p-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.zustand.leise{color:var(--text-3)}
.zustand.leise::before{background:var(--neutral-punkt)}
.personen .p-zusatz .zahl{color:var(--text-2)}
/* Zugänge & Rechte: Tabelle wie die Kundenliste im Entwurf; am Handy Karten */
.tabelle .z-zustaende{display:flex;flex-wrap:wrap;gap:4px 14px}
/* Formulare in Karten (Zugang anlegen und bearbeiten) */
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feld label,fieldset.feld legend{font-weight:600}
.feld .hilfe{color:var(--text-3);font-size:14px}
.feld .fehler{color:var(--schlecht);font-size:14px;font-weight:600}
.eingabe{min-height:48px;padding:10px 14px;border:1px solid var(--rand-2);border-radius:var(--radius-k);background:var(--flaeche);color:var(--text);font-size:16px}
.eingabe:focus-visible{outline:3px solid var(--marke);outline-offset:0;border-color:var(--marke)}
.eingabe[aria-invalid="true"]{border-color:var(--schlecht)}
.eingabe:disabled{background:var(--flaeche-2);color:var(--text-3);cursor:not-allowed}
select.eingabe{appearance:auto}
.formular-raster{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:start}
.feld-knopf{align-self:end}
fieldset.feld{border:0;padding:0;margin:0 0 16px;min-width:0}
fieldset.feld legend{padding:0;margin-bottom:6px}
fieldset.feld.rechte-gruppe{border-top:1px solid var(--rand);padding-top:12px}
.auswahl-reihe{display:flex;flex-direction:column}
.haken{display:inline-flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;cursor:pointer}
.haken input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--marke);flex:none}
.recht{display:flex}
.karte-inhalt > * + *{margin-top:12px}
.raster-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;align-items:start}
/* Knöpfe: gesperrt, Druck, Gefahr (Konsole und Formulare) */
.knopf.haupt-knopf:active{background:var(--marke-tief)}
.knopf.gefahr{color:var(--schlecht);border-color:currentColor}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.knopf[disabled]:hover::before,.knopf[aria-disabled="true"]:hover::before{opacity:0}
/* Hinweise: Symbol + Satz (+ Knopf) – Wartung, veralteter Abgleich, Rückmeldung nach Aktionen */
.hinweis{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-k);border:1px solid transparent;background:var(--marke-weich);font-size:15px}
.hinweis > div{flex:1 1 180px;min-width:0}
.hinweis .ico{margin-top:2px}
.hinweis.warn{background:var(--warn-weich);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.hinweis.schlecht{background:var(--schlecht-weich);border-color:color-mix(in srgb,var(--schlecht) 25%,transparent)}
.hinweis.gut{background:var(--gut-weich)}
.hinweis.warn .ico{color:var(--warn)} .hinweis.schlecht .ico{color:var(--schlecht)} .hinweis.gut .ico{color:var(--gut)}
/* Fehlerseite im Rahmen */
.fehler-karte .karte-inhalt{display:grid;gap:14px;justify-items:start;padding:28px}
.fehler-karte .karte-inhalt > * + *{margin-top:0}
.fehler-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--warn-weich);color:var(--warn)}
.fehler-karte h1{font-size:26px}
/* ── Kunden nach Umsatz (F-10, Entwurf entwurf/abc-kunden.css, Spec 2026-11-03-abc-kunden §4) ──
Klassenfarben --abc-a/-b/-c sind Serienfarben (MASTER.md „Diagramme“ Regel 3), keine Zustandsfarben: C heißt nicht
„schlecht“. B und C trennen sich über den Farbton, nicht die Helligkeit – darum steht der Buchstabe immer dabei. */
.klasse{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--radius-k);background:var(--flaeche-3);color:var(--text-2);font:700 15px/1 var(--titel);font-variant-numeric:tabular-nums}
.klasse.a{background:var(--abc-a);color:var(--auf-abc)}
.klasse.b{background:var(--abc-b);color:var(--auf-abc)}
.klasse.c{background:var(--abc-c);color:var(--auf-abc)}
.klasse.ohne{background:transparent;border:1px dashed var(--rand-stark);color:var(--text-3)}
.klasse.gross{width:34px;height:34px;font-size:17px}
.reiter .klasse,.legende .klasse{width:22px;height:22px;font-size:12.5px;border-radius:6px}
.mini .klasse{width:24px;height:24px;font-size:13px;border-radius:6px}
.kz-anteil{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;font-size:14px;color:var(--text-2)}
.kz-anteil .balken{flex:1;width:auto;max-width:160px}
.balken.a span{background:var(--abc-a)} .balken.b span{background:var(--abc-b)} .balken.c span{background:var(--abc-c)}
.kz-wert.lang{font-size:30px}
.verteilung{display:grid;gap:16px}
.verteilung-zeile{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:14px}
.verteilung-zeile dt{font-weight:650;font-size:14.5px;color:var(--text-2)}
.verteilung-zeile dd{margin:0}
.stapel{display:flex;gap:2px;height:30px;border-radius:var(--radius-k);overflow:hidden}
.stapel span{flex:0 1 var(--anteil,0%);display:flex;align-items:center;min-width:0;padding:0 10px;color:var(--auf-abc);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.stapel .a{background:var(--abc-a)} .stapel .b{background:var(--abc-b)} .stapel .c{background:var(--abc-c)}
.legende{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--text-2)}
.legende li{display:flex;align-items:center;gap:8px}
.mini td.zahl{text-align:right}
.karte-teil{padding-top:16px;margin-top:16px;border-top:1px solid var(--rand)}
.karte-teil h3{font:650 12px/1.2 var(--schrift);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.erklaer li{display:flex;gap:12px;padding:11px 20px;font-size:15px;line-height:1.45}
.erklaer li+li{border-top:1px solid var(--rand)}
.erklaer .ico{flex:none;margin-top:2px;color:var(--marke)}
.erklaer strong{font-weight:650}
.abc-tabelle td.z-klasse{width:56px}
.abc-tabelle td.z-letzte,.abc-tabelle td.z-monate{color:var(--text-2)}
/* Sortieren über den Server (die Liste hat Seiten): Link im Tabellenkopf, aussehend wie der Knopf der Bausteine */
.tabelle th .sortier-link{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0 -8px;padding:0 8px;border-radius:6px;color:inherit;text-decoration:none}
.tabelle th .sortier-link:hover{background:var(--ueber);color:var(--text)}
.tabelle th .sortier-link .ico{width:14px;height:14px;opacity:.55}
.tabelle th[aria-sort] .sortier-link .ico{opacity:1;color:var(--marke)}
.mehr-laden-gruppe{display:none;gap:8px;flex-wrap:wrap}
/* Hilfsklassen und Punkte aus dem Stand vor v2 (Konsole, Formulare) */
.klein{font-size:14px}
.ico-k{width:16px;height:16px}
.punkt{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--neutral-punkt);flex:none}
.punkt.gut{background:var(--gut-punkt)} .punkt.warn{background:var(--warn-punkt)} .punkt.schlecht{background:var(--schlecht-punkt)}
h1{font-size:1.75rem} h2{font-size:1.3rem} h3{font-size:1.08rem} h4{font-size:1rem}
h4{font-family:var(--titel);font-weight:600;line-height:1.2}
/* Lade-Platzhalter (noch auf keiner Seite) */
.platzhalter{background:var(--platz);border-radius:8px;min-height:1em;animation:schimmern 1.4s ease-in-out infinite}
@keyframes schimmern{50%{opacity:.55}}
@media (max-width:900px){
/* untere Leiste: so viele Spalten wie Ziele (der Entwurf hat fünf; die App zeigt nur Seiten, die es gibt) */
.unten-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.kz-ohne{display:none} /* wie .kz-fuss: am Handy nur Wert, Tendenz, Verlauf */
.aufgabe > summary{grid-template-columns:auto minmax(0,1fr);padding:14px 16px;gap:4px 12px}
.aufgaben .aufgabe-liste{margin:0 16px 14px 62px}
.karte-hinweis{padding:10px 16px 14px}
.leer{padding:14px 16px}
.tabelle td.z-rolle,.tabelle td.z-standorte,.tabelle td.z-faktor,.tabelle td.z-zustand{display:none}
.tabelle td.z-chips{align-items:center}
.fehler-karte .karte-inhalt{padding:20px 16px}
/* Kunden nach Umsatz: Liste als Karten – Zeichen | Name, Nr. | Ø je Monat, darunter Standort und Summe */
.verteilung-zeile{grid-template-columns:minmax(0,1fr);gap:6px}
.stapel span{padding:0 6px;font-size:13px}
.erklaer li{padding:10px 16px}
.kz-anteil{padding-top:10px;font-size:13.5px}
.kz .klasse.gross{width:28px;height:28px;font-size:14px}
.kz-wert.lang{font-size:21px}
.kz-lang .tendenz{position:static;margin-left:auto} /* sonst verdeckt sie den langen Betrag */
.abc-tabelle tr{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px}
.abc-tabelle td.z-klasse{grid-column:1;grid-row:1;width:auto}
.abc-tabelle td.z-person{grid-column:2;grid-row:1}
.abc-tabelle td.z-monat{grid-column:3;grid-row:1;text-align:right;font-weight:650}
.abc-tabelle td.z-monat::after{content:"je Monat";display:block;font-size:12.5px;font-weight:500;color:var(--text-3)}
.abc-tabelle td.z-chips{grid-column:2 / -1;grid-row:2;padding-left:0;align-items:center}
.abc-tabelle td.z-chips .leise{font-size:14px}
.abc-tabelle td.z-standort,.abc-tabelle td.z-summe,.abc-tabelle td.z-monate,.abc-tabelle td.z-letzte{display:none}
.mehr-laden-gruppe{display:flex}
/* F-5: Antwortknöpfe untereinander, Standort-Chip unter dem Inhalt, „Zurücknehmen“ unter den Text */
.antworten{flex-direction:column;align-items:stretch}
.antworten .knopf{justify-content:flex-start}
.erledigt > summary{padding:0 16px}
.erledigt-liste{padding:0 16px 14px}
.erledigt-liste li{flex-wrap:wrap;align-items:flex-start}
.erledigt-liste li > .ico{margin-top:2px}
.erledigt-liste .e-text{flex-basis:calc(100% - 32px)}
.erledigt-liste form{margin-left:24px}
.karte-gruppe{padding:12px 16px 6px}
.aufgabe-rechts{justify-content:flex-start}
}
/* ══ 5. Konsole (ops.css, unverändert) und Anmeldung: Formen aus dem Stand vor v2 ══
Nur außerhalb der App (body:not(.app)), damit der Entwurf in der App 1:1 gilt. */
body:not(.app){line-height:1.55}
body:not(.app) .knopf{min-height:44px;padding:0 18px;box-shadow:none}
body:not(.app) .knopf:not(.haupt-knopf):not(.still):not(.gefahr){border-color:var(--rand-2)}
body:not(.app) .knopf.haupt-knopf{box-shadow:var(--schatten-1)}
body:not(.app) .knopf.klein{min-height:44px;padding:0 12px}
body:not(.app) .karte{padding:24px}
body:not(.app) .karte > * + *{margin-top:12px}
body:not(.app) .karte > .knopf{width:100%}
body:not(.app) .tabelle-huelle{border:1px solid var(--rand);border-radius:var(--radius);background:var(--flaeche)}
body:not(.app) .marke{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;text-decoration:none;color:var(--text)}
body:not(.app) .marke-name{font:650 1.3rem/1 var(--titel);letter-spacing:-.02em}
body:not(.app) .marke-zeile{display:block;font-size:.78rem;color:var(--text-3);margin-top:4px}
/* Zeichen außerhalb der Marine-Leiste (Anmeldung, Konsole, Handy-Kopf): blaue Kachel, weißes Herz (wie das Symbol im Tab) */
svg.marke-zeichen{display:block;box-sizing:border-box;width:40px;height:40px;padding:8px;flex:none;border-radius:11px;background:var(--kachel);box-shadow:0 0 0 1px var(--kachel-rand);color:var(--kachel-herz);
stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body:not(.app) span.marke-zeichen,.handy-marke .marke-zeichen{background:var(--kachel);color:var(--kachel-herz);box-shadow:0 0 0 1px var(--kachel-rand)}
body.anmeldung{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px}
.anmelde-karte{width:100%;max-width:440px;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten-2);padding:32px 24px}
.anmelde-karte > * + *{margin-top:16px}
.anmelde-karte .marke{padding:0 0 8px}
.anmelde-formular .knopf{width:100%;min-height:48px}
.anmelde-fuss{margin-top:16px}
.qr{text-align:center}
.qr img{display:inline-block;background:#fff;border-radius:12px;padding:6px;border:1px solid var(--rand)} /* Ausnahme: weiß, damit der Code auch dunkel scannbar ist */
.schluessel{font-size:15px;letter-spacing:.04em;user-select:all;word-break:break-all}
.eingabe.code{font:600 1.4rem/1 var(--zahl);letter-spacing:.2em;text-align:center}
/* ══ 6. Apple-Bausteine (E-39) - gemeinsam für App und Konsole ═══════════════
Gebaut nach design-system/carely/entwurf/apple/apple.css. Nur Tokens. Wer neue Seiten baut, nimmt diese Bausteine. */
body{font:400 15px/1.47 var(--schrift);background-color:var(--grund);background-image:var(--hintergrund);background-attachment:fixed;font-feature-settings:"cv11","ss03";overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--titel);font-weight:700;letter-spacing:-.02em;line-height:1.2}
:focus-visible{outline:3px solid var(--fokus-ring);outline-offset:2px;border-radius:var(--r-klein)}
.sprung{border-radius:var(--r-mittel)}
/* Glas mit Ersatz: ohne Unschärfe volle Fläche (auch bei "Transparenz reduzieren") */
.glas,.leiste,.kopfleiste,.unten-nav,.blatt,.menue,.mitt{background:var(--glas-ersatz)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.glas,.leiste,.kopfleiste,.unten-nav,.blatt,.menue,.mitt{background:var(--glas);-webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe)}
}
@media (prefers-reduced-transparency:reduce){.glas,.leiste,.kopfleiste,.unten-nav,.blatt,.menue,.mitt{background:var(--glas-ersatz)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* Knöpfe: Kapsel. Standard = getönt blau; .haupt-knopf/.voll = gefüllt; .grau = neutral; .gefahr = rot getönt */
.knopf{min-height:var(--ziel);padding:0 20px;border:0;border-radius:var(--r-voll);background:var(--blau-weich);color:var(--blau);font-weight:600;font-size:15px;box-shadow:none;
transition:transform var(--d-k) var(--feder),background var(--d-k),box-shadow var(--d)}
.knopf::before{content:none}
.knopf .ico,.knopf:hover .ico{color:inherit}
@media (hover:hover){.knopf:hover{filter:brightness(.97)}}
.knopf:active{transform:scale(.96)}
.knopf.haupt-knopf,.knopf.voll{background:var(--blau);color:var(--auf-blau);border:0;box-shadow:var(--knopf-schein)}
@media (hover:hover){.knopf.haupt-knopf:hover,.knopf.voll:hover{background:var(--blau-druck);filter:none}}
.knopf.haupt-knopf:active,.knopf.voll:active{background:var(--blau-druck)}
.knopf.grau{background:var(--fuell);color:var(--text)}
.knopf.still{background:transparent;color:var(--blau)}
.knopf.gefahr{background:var(--schlecht-weich);color:var(--schlecht);border:0}
.knopf.klein{min-height:36px;padding:0 14px;font-size:13.5px}
.knopf.gross{min-height:50px;font-size:16px;width:100%;border-radius:var(--r-mittel)}
.knopf.klein::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--ziel);transform:translateY(-50%)}
body:not(.app) .knopf,body:not(.app) .knopf:not(.haupt-knopf):not(.still):not(.gefahr){border:0}
body:not(.app) .knopf.haupt-knopf{box-shadow:var(--knopf-schein)}
/* Karten: Schatten statt Rahmen */
.karte,.kz{border:0;border-radius:var(--r-karte);box-shadow:var(--s1)}
.karte-kopf{border-bottom:1px solid var(--trenn)}
.karte-kopf h2{font-size:18px}
.karte-fuss{border-top:1px solid var(--trenn)}
/* Kapsel-Marken */
.chip{min-height:28px;height:auto;padding:0 11px;font-size:13px;font-weight:600;background:var(--fuell);color:var(--text-2)}
.chip.rot{background:var(--schlecht-weich);color:var(--schlecht)}
.chip.orange{background:var(--warn-weich);color:var(--warn)}
.chip.gruen{background:var(--gut-weich);color:var(--gut)}
.chip.blau{background:var(--blau-weich);color:var(--blau)}
.chip.cyan{background:var(--cyan-weich);color:var(--cyan-text)}
.zaehler{background:var(--schlecht);color:var(--auf-schlecht);font-weight:700}
.zaehler.leise{background:var(--fuell);color:var(--text-2)}
/* Segmented Control (Standort, Thema): Faden, Scheibe mit Schatten */
.segmente{padding:2px;gap:0;border-radius:11px;background:var(--fuell)}
.segmente a,.segmente button{min-height:var(--ziel);padding:0 16px;border-radius:9px;color:var(--text);font-weight:500;font-size:14px;
transition:background var(--d) var(--feder),box-shadow var(--d) var(--feder),color var(--d-k)}
.segmente a:hover{background:transparent;color:var(--text)}
.segmente [aria-current="true"],.segmente [aria-pressed="true"]{background:var(--segment-aktiv);color:var(--text);font-weight:600;
box-shadow:var(--segment-schein)}
/* Symbolkachel (iOS-Quadrat mit Symbol): Farbe UND Symbol UND Wort, nie Farbe allein */
.sq{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;color:var(--auf-sq);background:var(--grau-kachel);
box-shadow:var(--sq-schein)}
.sq .ico{width:19px;height:19px;stroke-width:2}
.sq.rot{background:var(--schlecht)} .sq.orange{background:var(--warn)} .sq.blau{background:var(--blau)}
.sq.cyan{background:var(--cyan)} .sq.gruen{background:var(--gut)} .sq.grau{background:var(--grau-kachel)}
.sq.marine{background:var(--marine);color:var(--weiss)}
.sq.grau{color:var(--weiss)}
/* Gruppierte Liste (wie iOS "Einstellungen"): eine Fläche, Trennlinien ab der Textkante, Pfeil = anklickbar */
.liste{background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--s1);overflow:hidden}
.liste + .liste{margin-top:20px}
.liste-kopf{display:flex;justify-content:space-between;margin-top:20px;padding:0 8px 8px;font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.015em}
.liste-kopf:first-child{margin-top:0}
.zeile{position:relative;display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px;color:inherit;text-decoration:none;transition:background var(--d-k) var(--feder)}
.zeile + .zeile::before{content:"";position:absolute;top:0;left:66px;right:0;height:1px;background:var(--trenn)}
.liste.ohne-symbol .zeile::before,.zeile.ohne-sym + .zeile::before{left:16px}
a.zeile{cursor:pointer}
@media (hover:hover){a.zeile:hover{background:var(--fuell)}}
a.zeile:active{background:var(--fuell-2)}
.zeile .text{flex:1;min-width:0}
.zeile .t{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.005em;line-height:1.3}
.zeile .u{display:block;margin-top:1px;font-size:13.5px;line-height:1.35;color:var(--text-2)}
.zeile .wert{font-size:15px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.zeile .wert strong{color:var(--text);font-weight:600}
.zeile > .chev{width:16px;height:16px;color:var(--text-3);stroke-width:2.25}
/* Schalter (iOS): */
.schalter{position:relative;display:inline-block;width:51px;height:31px;flex:none}
.schalter input{position:absolute;inset:-7px 0;width:100%;height:var(--ziel);margin:0;opacity:0;cursor:pointer;z-index:1}
.schalter i{position:absolute;inset:0;border-radius:var(--r-voll);background:var(--fuell-2);box-shadow:inset 0 0 0 1px var(--rand-stark);transition:background var(--d) var(--feder)}
.schalter i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--weiss);box-shadow:var(--daumen-schein);transition:transform var(--d) var(--sprung)}
.schalter input:checked + i{background:var(--gut);box-shadow:none}
.schalter input:checked + i::after{transform:translateX(20px)}
.schalter input:focus-visible + i{outline:3px solid var(--fokus-ring);outline-offset:2px}
.schalter input:disabled + i{opacity:.5}
/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-delay:0ms!important}
.knopf:active,.nav a:active{transform:none}
}
/* ══ 7. Rahmen im Apple-Stil: schwebende Glas-Leiste, Glas-Kopf, Handy-Leiste, Blatt ═══════════════
Überschreibt die Formen aus Block 3 (Leiste Marine, Kopf mit Rand). Markup: .leiste, .kopfleiste, .unten-nav, .blatt, .menue
sind in Block 6 als Glas definiert (ohne Klasse im Markup). */
.rahmen{grid-template-columns:calc(var(--leiste-breit) + 12px) minmax(0,1fr)}
[data-leiste="schmal"] .rahmen{grid-template-columns:calc(var(--leiste-schmal) + 12px) minmax(0,1fr)}
.leiste{top:12px;height:calc(100vh - 24px);margin:12px 0 12px 12px;border:0;border-radius:26px;color:var(--text);
box-shadow:var(--s2),inset 0 0 0 1px var(--glas-rand)}
.leiste-kopf{height:auto;min-height:72px;border-bottom:0;padding:20px 20px 12px}
.marke{gap:12px;color:var(--text)}
.marke-zeichen{width:36px;height:36px;border-radius:10px;background:var(--marine);color:var(--weiss);
box-shadow:var(--zeichen-schein)}
.marke-zeichen .ico{width:20px;height:20px}
.marke-name{font:700 17px/1.15 var(--titel);letter-spacing:-.015em}
.marke-zeile{font-size:12.5px;font-weight:500;color:var(--text-3)}
.nav{padding:4px 12px 12px;gap:1px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-gruppe{font:600 12px/1.2 var(--schrift);letter-spacing:.02em;text-transform:none;color:var(--text-3);padding:12px 12px 4px}
.nav a{min-height:var(--ziel);gap:12px;padding:0 12px;border-radius:12px;color:var(--text);font-weight:500;font-size:14.5px;
transition:background var(--d-k) var(--feder),transform var(--d-k) var(--feder)}
.nav a .ico{color:var(--text-2)}
.nav a:hover{background:var(--fuell);color:var(--text)}
.nav a:active{transform:scale(.98)}
.nav a[aria-current="page"]{background:var(--blau);color:var(--auf-blau);font-weight:600;box-shadow:var(--blau-schein)}
.nav a[aria-current="page"]::before{content:none}
.nav a[aria-current="page"] .ico{color:var(--auf-blau)}
.nav a.bald,.nav a.bald:hover{color:var(--text-2)}
.nav a[aria-current="page"] .zaehler{background:var(--auf-blau);color:var(--blau)}
.bald-marke{margin-left:auto;border:0;background:var(--fuell);color:var(--text-3);font:600 11.5px/1 var(--schrift);letter-spacing:0;text-transform:none;padding:3px 8px;border-radius:var(--r-voll)}
.leiste-fuss{border-top:1px solid var(--trenn);padding:8px 12px 12px}
.leiste-knopf{min-height:var(--ziel);border-radius:12px;color:var(--text-2);font-size:14.5px}
.leiste-knopf:hover{background:var(--fuell);color:var(--text)}
.spalte{padding-right:12px}
.kopfleiste{top:12px;height:var(--kopf-hoehe);margin-top:12px;padding:0 12px 0 16px;border:0;border-radius:22px;gap:16px;
box-shadow:var(--s1),inset 0 0 0 1px var(--glas-rand)}
.kopf-rechts{gap:8px}
.segmente{margin-left:auto}
.segmente + .kopf-rechts{margin-left:0}
.rund-knopf{width:var(--ziel);height:var(--ziel);border:0;border-radius:50%;color:var(--text)}
.rund-knopf:hover{background:var(--fuell);color:var(--text)}
.rund-knopf[aria-expanded="true"]{background:var(--blau-weich);color:var(--blau)}
.rund-knopf .punkt-zahl{background:var(--schlecht);color:var(--auf-schlecht);font:700 11.5px/18px var(--schrift);box-shadow:0 0 0 2px var(--glas-ersatz)}
.avatar{background:var(--avatar-grund);color:var(--weiss);font:600 13px/1 var(--schrift);letter-spacing:.01em;width:36px;height:36px}
.avatar.gross{width:44px;height:44px;font-size:16px}
.avatar.neutral{background:var(--fuell-2);color:var(--text)}
.avatar-knopf{height:var(--ziel);border-radius:22px}
.avatar-knopf:hover{background:var(--fuell)}
.menue{top:calc(100% + 12px);border:0;border-radius:22px;box-shadow:var(--s3),inset 0 0 0 1px var(--glas-rand);padding:8px;animation:auf var(--d) var(--feder)}
.menue-kopf{border-bottom:1px solid var(--trenn)}
.menue-titel{font:600 12.5px/1 var(--schrift);letter-spacing:0;text-transform:none;color:var(--text-2)}
.thema-wahl{padding:2px;border-radius:11px;background:var(--fuell)}
.thema-wahl button{min-height:var(--ziel);border-radius:9px;color:var(--text);font-weight:500}
.thema-wahl button[aria-pressed="true"]{background:var(--segment-aktiv);color:var(--text);font-weight:600;box-shadow:var(--segment-schein)}
.menue-liste{border-top:1px solid var(--trenn)}
.menue-liste a,.menue-liste button{min-height:var(--ziel);border-radius:12px;font-weight:500}
.menue-liste a:hover,.menue-liste button:hover{background:var(--fuell)}
.menue-liste .ico{color:var(--text-2)}
.haupt{max-width:1280px;margin:0 auto;padding:28px 20px 72px}
.seitenkopf{margin:8px 0 4px;align-items:flex-end}
.seitenkopf h1{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.028em}
.ueberzeile{font:600 14px/1.2 var(--schrift);letter-spacing:.01em;text-transform:none;color:var(--text-2);margin-bottom:2px}
.stand{font-size:14px;color:var(--text-2);gap:8px}
.stand,.unterzeile{margin-top:10px}
.live-punkt{background:var(--gut-punkt);box-shadow:0 0 0 4px color-mix(in srgb,var(--gut-punkt) 20%,transparent)}
.hinweis{border:0;border-radius:var(--r-mittel);font-size:14.5px;padding:14px 18px;background:var(--blau-weich)}
.hinweis .ico{color:var(--blau)}
.hinweis.warn,.hinweis.schlecht,.hinweis.gut{border:0}
.kz-symbol{border-radius:9px;background:var(--blau);color:var(--auf-blau)}
.kz-name{font-weight:600;color:var(--text-2)}
.kz-wert{font-family:var(--titel);font-weight:700;letter-spacing:-.035em}
.klasse{font-family:var(--titel)}
.tabelle th{background:transparent;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.tabelle tbody tr:hover{background:var(--fuell)}
.tabelle td{border-bottom:1px solid var(--trenn)}
.reiter{border-bottom-color:var(--trenn)}
.reiter a[aria-current="page"]{border-bottom-color:var(--blau)}
.filter-chip,.eingabe-suche input,.auswahl select{border-color:var(--rand-2)}
dialog{border-radius:24px;box-shadow:var(--s3)}
/* Handy: Kopf oben ohne Rundung, untere Leiste als Glas, Blatt von unten */
@media (max-width:900px){
.rahmen,[data-leiste="schmal"] .rahmen{grid-template-columns:minmax(0,1fr)}
.spalte{padding:0}
.kopfleiste{top:0;margin:0;height:auto;min-height:56px;border-radius:0;padding:8px 12px 8px 16px;gap:4px 8px;
box-shadow:0 .5px 0 var(--trenn)}
.segmente{margin-left:0}
.segmente a{min-height:var(--ziel);padding:0 4px}
.haupt{padding:12px 16px calc(96px + env(safe-area-inset-bottom))}
.seitenkopf{margin:4px 0 0}
.seitenkopf h1{font-size:32px}
.unten-nav{padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:0;
box-shadow:0 -.5px 0 var(--trenn),var(--schatten-unten)}
.unten-nav a,.unten-nav button{min-height:52px;gap:2px;border-radius:14px;color:var(--text-2);font-size:11.5px;font-weight:600;
transition:transform var(--d-k) var(--feder),color var(--d-k)}
.unten-nav a:active,.unten-nav button:active{transform:scale(.9)}
.unten-nav .ico{width:24px;height:24px}
.unten-nav [aria-current="page"]{color:var(--blau)}
.unten-nav [aria-current="page"]::before{content:none}
.unten-nav [aria-current="page"] .ico{stroke-width:2.1}
.unten-nav .zaehler{top:2px}
.blatt{border-radius:28px 28px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));max-height:93dvh;box-shadow:var(--s3),inset 0 1px 0 var(--glas-rand)}
.blatt-griff{background:var(--fuell-2)}
.blatt .nav{background:var(--fuell);border-radius:16px;padding:4px 8px 8px;overflow:visible}
.blatt .nav a{min-height:var(--ziel);color:var(--text)}
.blatt .nav a:hover{background:var(--fuell-2);color:var(--text)}
.blatt .nav a.bald{color:var(--text-2)}
.blatt .nav a .ico{color:var(--text-2)}
.blatt .nav a[aria-current="page"] .ico{color:var(--auf-blau)}
.blatt .nav a[aria-current="page"]{color:var(--auf-blau)}
.blatt .bald-marke{background:var(--flaeche);color:var(--text-2)}
.blatt > .knopf{min-height:50px;margin-top:10px;background:var(--fuell);color:var(--text)}
}
@media (max-width:400px){.seitenkopf h1{font-size:30px}}
/* ══ 8. „Neue Version verfügbar“: ruhige Tafel aus Glas (static/neue-version.js, E-39) ═══════════════
PC unten mittig 460 px, Handy über der unteren Leiste. Gleitet nach 250 ms von unten ein, das Symbol dreht einmal ein.
Bewegung reduzieren: nur Überblenden 100 ms, Symbol steht. */
.neue-version{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:var(--z-meldung);transform:translateX(-50%);
width:min(460px,calc(100vw - 24px));max-width:none;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
padding:16px;border-radius:24px;color:var(--text);background:var(--glas-ersatz);box-shadow:var(--s3),inset 0 0 0 1px var(--glas-rand);
animation:nv-ein var(--d-l) var(--feder) 250ms both}
.neue-version .nv-symbol{width:44px;height:44px;border-radius:12px;grid-row:span 2;align-self:start}
.neue-version .nv-symbol .ico{width:24px;height:24px;animation:nv-dreh 900ms var(--feder) 650ms both}
.neue-version .nv-titel{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.neue-version .nv-text{font-size:14px;color:var(--text-2);line-height:1.4}
.neue-version .nv-tasten{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.neue-version .nv-tasten .knopf{width:100%;min-height:48px}
@keyframes nv-ein{from{opacity:0;transform:translateX(-50%) translateY(28px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes nv-dreh{from{transform:rotate(-200deg)}to{transform:none}}
@keyframes nv-fade{from{opacity:0}to{opacity:1}}
@media (max-width:900px){.neue-version{bottom:calc(88px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){
.neue-version{animation:nv-fade 100ms linear both!important}
.neue-version .nv-symbol .ico{animation:none!important}
}
/* Blatt „Mehr“: Abmelden als eigene Zeile, Handy-Marke als 44-px-Ziel */
.handy-marke{min-height:var(--ziel)}
.blatt-fuss{margin-top:10px}
.abmelden-blatt{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--ziel);padding:0 16px;border:0;border-radius:16px;background:var(--fuell);color:var(--schlecht);font-weight:500;font-size:14.5px;text-align:left}
.abmelden-blatt .ico{color:var(--schlecht)}
.rund-knopf.klein{width:var(--ziel);height:var(--ziel)}
/* ══ 9. Anmeldung im Apple-Stil: eine Karte, gruppierte Felder, große Kapsel ═══════════════ */
body.anmeldung{padding:24px 16px;background-color:var(--grund);background-image:var(--hintergrund-login);background-attachment:fixed}
.anmelde-karte{max-width:420px;padding:36px 32px 28px;border:0;border-radius:30px;box-shadow:var(--s3);text-align:center;position:relative;overflow:hidden}
.anmelde-karte .marke{flex-direction:column;gap:10px;padding:0 0 4px;text-align:center}
.anmelde-karte .marke > span:last-child{display:flex;flex-direction:column}
.anmelde-karte .marke-zeichen,svg.marke-zeichen{width:64px;height:64px;padding:15px;border-radius:18px;background:var(--marine);color:var(--weiss);box-shadow:var(--zeichen-schein)}
.anmelde-karte .marke-zeichen .ico{width:34px;height:34px}
.anmelde-karte .marke-name{font:700 28px/1.15 var(--titel);letter-spacing:-.025em;color:var(--text)}
.anmelde-karte .marke-zeile{font-size:14px;color:var(--text-2);margin-top:4px}
.anmelde-karte h1{font-size:22px;letter-spacing:-.02em}
.anmelde-karte .leise{color:var(--text-2)}
.anmelde-karte .feld .hilfe{text-align:center}
/* (Feldgruppe mit Beschriftung in der Zeile und Felder ohne Rand entfallen 06.11.2026: Beschriftung über dem Feld, Rand 3,5 : 1, siehe Block 8) */
.anmelde-karte .eingabe.code{font-family:var(--zahl)}
.anmelde-fuss{text-align:center;color:var(--text-2)}
.laden-kachel{width:92px;height:92px;border-radius:26px;background:var(--marine);color:var(--weiss);box-shadow:var(--zahl-schein)}
.laden-ring circle{stroke:var(--cyan)}
.knopf.klein{min-height:var(--ziel)}
.knopf.klein::after{content:none}
.mini thead th{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
.mini .rechts{padding-left:8px}
@media (max-width:900px){.blatt{background:color-mix(in srgb,var(--flaeche) 97%,transparent);max-height:93dvh}}
/* Kopf: Name steht im Menü (Symbolknopf mit Namen für Vorleser), Brotkrumen dürfen schrumpfen statt die Seite zu verbreitern */
.avatar-name{display:none}
.kopfleiste{min-width:0}
.krumen{min-width:0;flex:0 1 auto}
.krumen ol{min-width:0;overflow:hidden}
/* Häkchen im Formular = echtes Kästchen 24 px in einer 44-px-Zeile (06.11.2026, E-4). Vorher: iOS-Schalter mit Spur 1,28 : 1 –
ein Schalter suggeriert „wirkt sofort“, im Formular wirkt erst „Speichern“. Schalter nur noch als .schalter (Sofort-Einstellung). */
.haken{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:12px;width:100%;min-height:var(--ziel);padding:10px 0;cursor:pointer}
.haken input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:24px;height:24px;margin:0;border:1.5px solid var(--rand-2);border-radius:7px;background:var(--flaeche);cursor:pointer;transition:background var(--d-k),border-color var(--d-k)}
.haken input::after{content:"";position:absolute;left:7px;top:2.5px;width:6px;height:12px;border:solid var(--auf-blau);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform var(--d-k) var(--sprung)}
.haken input:checked{background:var(--blau);border-color:var(--blau)}
.haken input:checked::after{transform:rotate(45deg) scale(1)}
.haken input:disabled{background:var(--flaeche-2);border-style:dashed;cursor:not-allowed}
.haken input:disabled:checked{background:var(--fuell-2);border-color:var(--rand-2)}
.haken input:disabled:checked::after{border-color:var(--text-3)}
.haken input[aria-invalid="true"]{border-color:var(--schlecht);box-shadow:inset 0 0 0 1px var(--schlecht)}
.haken:has(input:disabled){color:var(--text-2);cursor:not-allowed}
.haken input:focus-visible{outline:3px solid var(--fokus-ring);outline-offset:2px;border-radius:7px}
@media (hover:hover){.haken input:hover:not(:disabled):not(:checked){border-color:var(--text-3)}}
/* Ziele mindestens 44 px in Listen und Filtern */
.eingabe-suche input,.filter-chip,.auswahl select{height:var(--ziel);border-radius:var(--r-mittel)}
.filter-chip{border-radius:var(--r-voll)}
.tabelle th button,.tabelle th .sortier-link{height:var(--ziel)}
.seiten a,.seiten span{min-width:var(--ziel);height:var(--ziel)}
.eingabe-suche input,.auswahl select,.eingabe{background:var(--fuell);border-color:var(--rand-2)}
/* Menüpunkt „bald“, der gerade offen ist: Schrift der aktiven Kapsel, Marke hell auf Blau (Kontrast gemessen) */
.nav a.bald[aria-current="page"],.nav a.bald[aria-current="page"]:hover{color:var(--auf-blau)}
.nav a[aria-current="page"] .bald-marke,.blatt .nav a[aria-current="page"] .bald-marke{background:var(--auf-blau);color:var(--blau)}
.bald-marke,.blatt .bald-marke{color:var(--text-2)}
.rund-knopf{flex:none}
.blatt .nav-gruppe{color:var(--text-2)}
/* ══ 8. Knöpfe, Felder, Anmeldung (06.11.2026, Spec 2026-11-06-knoepfe-eingaben-anmeldung-design.md, E-1 bis E-8) ═════════════
Gebaut nach design-system/carely/entwurf/eingaben/eingaben.css. Nur Tokens. Gemessen: Platzhalter 5,85 / 6,06 : 1 (vorher 3,96 / 2,62),
Feldrand 3,49 / 3,51 : 1, Ziele nie unter 44 px (auch Konsole), gesperrter Knopf 4,5 / 5,0 : 1. */
.knopf{max-width:100%}
.knopf.klein{min-height:var(--ziel)}
.knopf.gross{min-height:52px}
.knopf.gefahr.voll{background:var(--schlecht);color:var(--auf-schlecht);box-shadow:none}
/* gesperrt: eigene Farben statt Deckkraft .55; der Grund steht daneben (.sperr-grund) */
.knopf[disabled],.knopf[aria-disabled="true"],body:not(.app) .knopf[disabled],body:not(.app) .knopf[aria-disabled="true"]{background:var(--fuell);color:var(--text-3);box-shadow:none;opacity:1;filter:none;transform:none;cursor:not-allowed}
.sperr-grund{display:block;margin-top:6px;color:var(--text-2);font-size:14px}
/* lädt: Spinner (.rad aus bewegung.css), Beschriftung wechselt, Fokus bleibt, kein zweiter Klick (pointer-events in bewegung.css) */
.knopf[aria-busy="true"]{cursor:progress;filter:none}
.knopf.haupt-knopf[aria-busy="true"]{background:var(--blau)}
/* Textlink im Fließtext: Farbe UND Unterstrich (nie nur Farbe) */
.textlink{color:var(--link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;border-radius:6px}
@media (hover:hover){a.textlink:hover{background:var(--link-weich)}}
/* Felder: Platzhalter nur als Beispiel, lesbar (≥ 4,5 : 1); Fehler am Feld mit Symbol und Wort, Rand + 1 px innen */
::placeholder{color:var(--text-2);opacity:1}
@media (hover:hover){.eingabe:hover:not(:focus):not(:disabled):not([aria-invalid="true"]){border-color:var(--text-3)}}
.eingabe[aria-invalid="true"]{border-color:var(--schlecht);box-shadow:inset 0 0 0 1px var(--schlecht)}
.eingabe:disabled{border-style:dashed;-webkit-text-fill-color:var(--text-3)}
.feld .fehler{display:flex;align-items:flex-start;gap:6px;margin:0;line-height:1.4}
.feld .fehler .ico{width:16px;height:16px;margin-top:2px}
.feld .hilfe{color:var(--text-2);line-height:1.4}
/* Passwort mit Auge: der Knopf liegt IM Feld, 44 × 44 px, Beschriftung wechselt über aria-label */
.mit-auge{position:relative}
.mit-auge .eingabe{width:100%;padding-right:54px}
.mit-auge .auge{position:absolute;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--text-2);cursor:pointer}
@media (hover:hover){.mit-auge .auge:hover{background:var(--fuell);color:var(--text)}}
.mit-auge .auge[aria-pressed="true"]{color:var(--blau)}
.mit-auge .auge .zu{display:none}
.mit-auge .auge[aria-pressed="true"] .zu{display:block}
.mit-auge .auge[aria-pressed="true"] .auf{display:none}
/* Schalter (nur für Einstellungen, die SOFORT wirken): Aus-Rand ≥ 3 : 1 */
.schalter i{box-shadow:inset 0 0 0 1.5px var(--rand-2);background:var(--flaeche-3)}
.schalter input:checked + i{background:var(--gut);box-shadow:none}
/* Anmeldung: ruhige Karte, Beschriftung über dem Feld, Abstand Feld → Knopf 26 px, „Passwort vergessen?“ erst auf Klick */
.anmelde-karte{text-align:center}
.anmelde-karte h1{margin:24px 0 0}
.anmelde-karte .unter{margin:6px 0 0;color:var(--text-2);font-size:15px;line-height:1.45}
.fortschritt{display:flex;justify-content:center;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.fortschritt li{width:22px;height:5px;border-radius:3px;background:var(--fuell-2);transition:background var(--d),width var(--d) var(--feder)}
.fortschritt li[aria-current="step"]{width:34px;background:var(--blau)}
.fortschritt li.fertig{background:color-mix(in srgb,var(--blau) 55%,transparent)}
.anmelde-formular{display:flex;flex-direction:column;gap:18px;margin-top:26px;text-align:left}
.anmelde-formular .knopf.gross{margin-top:8px;min-height:52px}
.anmelde-karte .hinweis{margin-top:20px;text-align:left}
.anmelde-karte .hinweis.schlecht{background:var(--schlecht-weich);color:var(--text)}
.anmelde-karte .hinweis.schlecht .ico{color:var(--schlecht)}
.anmelde-karte .feld .hilfe{text-align:left}
.vergessen{margin-top:6px;text-align:center}
.vergessen > summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;color:var(--link);font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.vergessen > summary::-webkit-details-marker{display:none}
.vergessen > summary .ico{width:16px;height:16px;transition:transform var(--d-k) var(--feder)}
.vergessen[open] > summary .ico{transform:rotate(180deg)}
@media (hover:hover){.vergessen > summary:hover{background:var(--link-weich)}}
.vergessen > p{margin:4px 0 0;padding:12px 14px;border-radius:var(--r-mittel);background:var(--fuell);color:var(--text);font-size:14.5px;line-height:1.45;text-align:left}
.vergessen[open] > p{animation:von-unten 240ms var(--feder) both}
.zurueck-zeile{display:flex;align-items:center;justify-content:center;gap:4px 12px;flex-wrap:wrap;margin-top:6px}
.zurueck-zeile .vergessen{margin-top:0}
/* Code: EIN echtes Feld (one-time-code, numeric), darüber sechs Zellen als Anzeige (anmeldung.js baut sie). Ohne Skript sieht man das Feld selbst. */
.otp{position:relative}
.otp .zellen{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp .zelle{display:grid;place-items:center;height:56px;border:1px solid var(--rand-2);border-radius:var(--r-mittel);background:var(--fuell);font:600 26px/1 var(--zahl);font-variant-numeric:tabular-nums;color:var(--text);transition:border-color var(--d-k),background var(--d-k)}
.otp .zelle.aktiv{border-color:var(--blau);background:var(--flaeche);outline:3px solid var(--fokus-ring);outline-offset:2px}
.otp .zelle.aktiv:empty::after{content:"";width:2px;height:26px;background:var(--blau);animation:blinken 1.1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.otp.an .eingabe{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;letter-spacing:0;caret-color:transparent;cursor:text}
.otp.fehler-an .zelle{border-color:var(--schlecht);box-shadow:inset 0 0 0 1px var(--schlecht)}
.otp.fehler-an .zelle.aktiv{outline-color:color-mix(in srgb,var(--schlecht) 70%,transparent)}
@media (max-width:480px){
.anmelde-karte{padding:30px 20px 18px}
.otp .zelle{height:52px;font-size:24px}
.otp .zellen{gap:6px}
}
/* Bewegung: dezent, ein Muster (Einblenden + leichtes Aufsteigen), Fehler wackelt einmal 5 px; bei „weniger Bewegung“ schaltet bewegung.css alles ab */
.anmelde-karte{animation:einblenden 360ms ease-out both}
.anmelde-karte > :nth-child(n+2){animation:von-unten 520ms var(--feder) both}
.anmelde-karte > :nth-child(2){animation-delay:140ms}.anmelde-karte > :nth-child(3){animation-delay:200ms}.anmelde-karte > :nth-child(4){animation-delay:260ms}
.anmelde-karte > :nth-child(n+5){animation-delay:320ms}
.anmelde-karte .hinweis[role="alert"]{animation:fehler-ein 260ms var(--feder) both,wackeln 320ms 80ms ease-in-out 1}
.feld .fehler{animation:fehler-ein 260ms var(--feder) both}
@keyframes fehler-ein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes wackeln{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
.anmelde-karte,.anmelde-karte > *,.feld .fehler,.vergessen[open] > p,.otp .zelle.aktiv:empty::after{animation:none!important}
.knopf .rad{border-right-color:currentColor;opacity:.6} /* die Beschriftung („… läuft“) trägt die Meldung */
/* Stempelungen pruefen (F-7, E-35) · Spec docs/superpowers/specs/2026-11-04-stempelungen-design.md. Aus dem Entwurf stempelungen.css;
nur Bausteine, die es oben noch nicht gibt. Farben nur aus den Tokens. */
.regel-hinweis{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 18px;border:1px solid var(--rand);border-left:4px solid var(--marke);border-radius:var(--radius-k);background:var(--flaeche)}
.regel-hinweis .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--marke)}
.regel-hinweis p{font-size:14.5px;color:var(--text-2);max-width:96ch}
.regel-hinweis strong{color:var(--text)}
.zustand-meldung{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 18px;border:1px solid var(--rand);border-radius:var(--radius-k);background:var(--flaeche-2)}
.zustand-meldung .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--text-3)}
.zustand-meldung.warn{background:var(--warn-weich);border-color:var(--warn-punkt)}
.zustand-meldung.warn .ico{color:var(--warn)}
.zustand-meldung p{font-size:14.5px}
.zustand-meldung .leise{margin-top:2px;color:var(--text-2)}
.haupt > .kennzahlen,.haupt > .karte,.haupt > nav.reiter{margin-top:18px}
.kz-symbol.warn{background:var(--warn-weich);color:var(--warn)}
.kz-fuss{min-height:2.6em}
/* Regel-Chips: Stufe nicht nur über Farbe (voller Punkt = auffällig, Ring = Hinweis) */
.regel{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;margin:2px 6px 2px 0;border-radius:var(--radius-r);font-size:13px;font-weight:650;white-space:nowrap}
.regel::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.regel.auffaellig{background:var(--warn-weich);color:var(--warn)}
.regel.auffaellig::before{background:currentColor}
.regel.leicht{background:var(--flaeche-3);color:var(--text-2)}
.regel.leicht::before{box-shadow:inset 0 0 0 2px currentColor}
.stempel td{white-space:nowrap}
.stempel .klein{font-size:13px}
.stempel td.z-plan,.stempel td.z-person,.stempel td.z-abw{white-space:normal}
.stempel td.z-plan{min-width:150px}
.stempel td.z-abw{min-width:130px}
.zeitraum-form{align-items:center}
.zeitraum-form .auswahl{display:flex;align-items:center;gap:8px}
@media (max-width:900px){ .kopf-aktionen.zeitraum-form{display:flex;margin-top:12px} }
.stempel td.z-regel{white-space:normal;min-width:190px}
.stempel td strong{font-weight:650}
.stempel .person{display:inline-flex;align-items:center;gap:10px}
.stempel .person-name{display:inline}
.stempel .person-zusatz{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.stempel .klein-chip{height:22px;margin-left:8px;font-size:12px;vertical-align:1px}
.stempel .zahl{font-variant-numeric:tabular-nums}
.stempel-kraft td.z-regel{min-width:260px}
.stempel .z-aktion{text-align:right}
.leer-karte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-top:18px;padding:40px 24px}
.leer-karte > .ico{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--gut-weich);color:var(--gut)}
.leer-karte h2{font-size:22px}
.leer-karte p{max-width:62ch;font-size:15px;color:var(--text-2)}
.leer-karte .leise{color:var(--text-3)}
.regeln-karte{margin-top:18px}
.regeln th[scope="row"]{position:static;text-transform:none;letter-spacing:0;font:650 15px/1.3 var(--schrift);color:var(--text);background:transparent;height:auto;padding:12px 16px;border-bottom:1px solid var(--rand);white-space:normal;min-width:200px}
.regeln td{white-space:normal;padding:12px 16px;vertical-align:top;color:var(--text-2)}
.regeln tbody tr:last-child th,.regeln tbody tr:last-child td{border-bottom:0}
/* Laden: Platzhalter in der Form der Liste */
.laedt-liste{margin-top:18px;padding:20px}
.laedt-kopf{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;font-size:15px}
.laedt-zeile{display:grid;grid-template-columns:1.1fr 1fr 1.6fr .8fr;gap:14px;padding:14px 0;border-top:1px solid var(--rand)}
.laedt-zeile i{display:block;height:16px;border-radius:6px;background:var(--flaeche-3);position:relative;overflow:hidden}
.laedt-zeile i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--ueber-druck),transparent);transform:translateX(-100%);animation:schimmer 1400ms ease-in-out infinite}
@media (max-width:900px){
.regel-hinweis{padding:12px 14px;margin-top:14px}
.regel-hinweis p{font-size:14px}
.stempel .nur-gross{display:none}
/* Karten statt Tabelle (Einsatz) */
.stempel tr{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:14px 16px}
.stempel td{font-size:14.5px}
.stempel td.z-person{grid-column:1;grid-row:1}
.stempel td.z-person{grid-column:1 / -1}
.stempel td.z-plan{grid-column:1 / -1;grid-row:2}
.stempel td.z-ist{grid-column:1 / -1;grid-row:3}
.stempel td.z-abw{grid-column:1 / -1;grid-row:4}
.stempel td.z-regel{grid-column:1;grid-row:5;display:block;min-width:0;padding-top:4px}
.stempel td.z-aktion{grid-column:2;grid-row:5;align-self:end}
.stempel td[data-label]::before{content:attr(data-label) " ";color:var(--text-3)}
.stempel td.z-ist .leise.klein,.stempel td.z-plan .leise.klein{display:inline}
/* Karten statt Tabelle (Kraft) */
.stempel-kraft tr{grid-template-columns:1fr 1fr}
.stempel-kraft td.z-person{grid-column:1;grid-row:1}
.stempel-kraft td.z-standort{grid-column:2;grid-row:1;justify-self:end}
.stempel-kraft td.rechts{text-align:left;grid-row:2}
.stempel-kraft td.rechts:nth-of-type(3){grid-column:1}
.stempel-kraft td.rechts:nth-of-type(4){grid-column:2;text-align:right}
.stempel-kraft td.z-regel{grid-column:1 / -1;grid-row:3;display:block}
.stempel-kraft td.z-aktion{grid-column:1 / -1;grid-row:4;text-align:left}
.regeln thead{display:none}
.regeln,.regeln tbody{display:block}
.regeln tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;padding:14px 16px;border-bottom:1px solid var(--rand)}
.regeln tbody tr:last-child{border-bottom:0}
.regeln th[scope="row"]{grid-column:1;padding:0;border:0;min-width:0}
.regeln td{padding:0;border:0;font-size:14px}
.regeln td:nth-child(2){grid-column:1 / -1;grid-row:2}
.regeln td:nth-child(3){grid-column:2;grid-row:1;justify-self:end}
.regeln td:nth-child(4){grid-column:3;grid-row:1;text-align:right;font-weight:650;color:var(--text)}
.regeln td:nth-child(4)::after{content:" Treffer";font-weight:500;color:var(--text-3)}
.regeln td:nth-child(5){grid-column:1 / -1;grid-row:3;color:var(--text-3)}
.regeln td:nth-child(5)::before{content:"Löst sich von selbst, wenn "}
.leer-karte{padding:28px 18px}
.laedt-zeile{grid-template-columns:1fr 1fr}
.laedt-zeile i:nth-child(n+3){display:none}
}