/* Grundstil von CareDesk (Spec §4) – Tokens und Bausteine aus dem klickbaren Prototyp
docs/design/caredesk-prototyp.html. Schriften liegen lokal, keine externen Hosts. */
/* ── Schriften (SIL OFL, im Repo unter fonts/) ──────────────────────────────── */
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Lato-Regular.8d72101cad15.ttf") format("truetype")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Lato-Bold.79203a194744.ttf") format("truetype")}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/Lato-Italic.05e9e92b0f9a.ttf") format("truetype")}
@font-face{font-family:"Lato";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/Lato-BoldItalic.a1a6817b485f.ttf") format("truetype")}
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/DancingScript.02ed13c946ba.ttf") format("truetype")}
/* ── Tokens: aus Jennys Druckvorlagen (HTML/*.html) übernommen ─────────────── */
:root{
--ground:#F4F8F7; --surface:#FFFFFF; --surface-2:#EFF7F6; --surface-3:#E4EFEE; --surface-rose:#FDEDEC;
--line:#DCE9E8; --line-strong:#C9E3E0; --dotted:#9FBEC2;
--ink:#435056; --ink-strong:#2C3B42; --muted:#566268; --faint:#5F6E73;
--petrol:#14636E; --petrol-hover:#0F525B; --petrol-soft:#E4EFEE; --on-petrol:#FFFFFF;
--rose:#E8797F; --rose-deep:#C9545C;
--ok:#2F7A57; --ok-bg:#E5F3EC; --warn:#8A5A00; --warn-bg:#FFF3D6; --crit:#B3261E; --crit-bg:#FCE8E6;
--health:#A8434A; --health-bg:#FDEDEC;
--shadow:0 1px 2px rgba(20,99,110,.06),0 6px 20px rgba(20,99,110,.07);
--shadow-pop:0 12px 40px rgba(20,45,50,.22);
--proto:#0E3A40; --proto-ink:#DCEFEF;
--r-lg:14px; --r-md:10px; --r-sm:6px;
--f-ui:"Lato","Helvetica Neue",Arial,sans-serif; --f-script:"Dancing Script","Brush Script MT",cursive;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ground:#0E1B1C; --surface:#142526; --surface-2:#1A3031; --surface-3:#203a3b; --surface-rose:#2E1F22;
--line:#24393A; --line-strong:#2E4A4B; --dotted:#3F6366;
--ink:#D2E0DF; --ink-strong:#EEF5F4; --muted:#AEC0C1; --faint:#94A9AA;
--petrol:#5DB2BB; --petrol-hover:#7CC3CA; --petrol-soft:#173B3E; --on-petrol:#0E1B1C;
--rose:#EE8E93; --rose-deep:#F0A3A7;
--ok:#6FC79B; --ok-bg:#16332A; --warn:#E8B45A; --warn-bg:#33280F; --crit:#F2887F; --crit-bg:#3A1D1B;
--health:#F0A3A7; --health-bg:#34232A;
--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); --shadow-pop:0 12px 40px rgba(0,0,0,.55);
--proto:#08181A; --proto-ink:#BFD6D6;
}
}
:root[data-theme="dark"]{
--ground:#0E1B1C; --surface:#142526; --surface-2:#1A3031; --surface-3:#203a3b; --surface-rose:#2E1F22;
--line:#24393A; --line-strong:#2E4A4B; --dotted:#3F6366;
--ink:#D2E0DF; --ink-strong:#EEF5F4; --muted:#AEC0C1; --faint:#94A9AA;
--petrol:#5DB2BB; --petrol-hover:#7CC3CA; --petrol-soft:#173B3E; --on-petrol:#0E1B1C;
--rose:#EE8E93; --rose-deep:#F0A3A7;
--ok:#6FC79B; --ok-bg:#16332A; --warn:#E8B45A; --warn-bg:#33280F; --crit:#F2887F; --crit-bg:#3A1D1B;
--health:#F0A3A7; --health-bg:#34232A;
--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); --shadow-pop:0 12px 40px rgba(0,0,0,.55);
--proto:#08181A; --proto-ink:#BFD6D6;
}
/* ── Grundlagen ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html{font-size:100%} /* 16 px, ohne die Einstellung des Geräts zu übergehen */
/* Grundgröße relativ: .90625rem entspricht den 14.5 px des Prototyps und wächst mit dem Gerät. */
body{margin:0;background:var(--ground);color:var(--ink);font:400 .90625rem/1.45 var(--f-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink-strong);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--petrol)} a:hover{color:var(--petrol-hover)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.script{font-family:var(--f-script);font-weight:700}
.eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:15px;height:15px} svg.i.lg{width:22px;height:22px}
/* ── Elemente ohne eigene Klasse (Spec §4: große Bedienelemente, 44 px) ─────────
Basisschicht für Seiten, die noch keine Prototyp-Klassen tragen; jede Regel aus
den Bausteinen weiter unten sticht sie, weil Klassen stärker wiegen als Elemente. */
h1{font-size:1.75rem;margin:0 0 1rem}
h2{font-size:1.25rem;margin:2rem 0 .5rem}
label{display:block;margin-bottom:.25rem}
input,select,textarea{width:100%;min-height:2.75rem;padding:.5rem .75rem;margin-bottom:1rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md)}
input[type="checkbox"],input[type="radio"]{width:1.5rem;min-height:1.5rem;margin:0 .5rem 0 0}
button,a.button,input[type="submit"]{display:inline-block;min-height:2.75rem;padding:.5rem 1.25rem;color:var(--on-petrol);background:var(--petrol);border:1px solid var(--petrol);border-radius:var(--r-md);cursor:pointer}
button:hover,a.button:hover,input[type="submit"]:hover{background:var(--petrol-hover);border-color:var(--petrol-hover)}
button[disabled]{opacity:.45;cursor:not-allowed}
table{width:100%;border-collapse:collapse}
th,td{padding:.5rem;text-align:left;border-bottom:1px solid var(--line)}
hr{margin:2rem 0;border:0;border-top:1px solid var(--line)}
/* ── Desktop-App-Rahmen ─────────────────────────────────────────────────────── */
.desk{min-width:auto;display:grid;grid-template-columns:232px 1fr;min-height:100vh;background:var(--ground)}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px 14px;gap:18px}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand img{width:40px;height:auto}
.brand .n{font-family:var(--f-script);font-weight:700;font-size:24px;line-height:1;color:var(--petrol)}
.brand .s{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:3px;font-weight:700}
.side nav{display:grid;gap:2px}
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md);color:var(--ink);text-decoration:none;font-weight:400}
.side nav a:hover{background:var(--surface-2);color:var(--ink-strong)}
.side nav a.on{background:var(--petrol-soft);color:var(--petrol);font-weight:700}
.side nav a .cnt{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--surface-rose);color:var(--rose-deep);border-radius:999px;padding:1px 7px}
.side .sep{height:1px;background:var(--line);margin:6px 4px}
.side .foot{margin-top:auto;display:grid;gap:8px;font-size:12px;color:var(--faint);padding:0 6px}
.side .foot .me{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;border-radius:10px;padding:5px;margin:-5px}
.side .foot a.me:hover{background:var(--surface-2)}
.side .foot a.me:focus-visible{outline:2px solid var(--petrol);outline-offset:1px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-rose);color:var(--rose-deep);display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line);background:var(--surface)}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--faint)}
.search input{border:0;background:transparent;outline:0;flex:1;color:var(--ink)}
.conn{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.content{padding:24px 26px 30px;display:grid;gap:20px;align-content:start}
.page-title{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-title h1{font-size:24px;font-weight:900;letter-spacing:-.005em}
.page-title .sub{color:var(--muted);font-size:13.5px}
.page-title .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:12.5px;color:var(--faint);display:flex;gap:6px;align-items:center}
.crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--petrol)}
/* ── Bausteine ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);padding:9px 14px;font-weight:700;font-size:13.5px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-strong);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--petrol);color:var(--petrol)}
.btn.primary{background:var(--petrol);border-color:var(--petrol);color:var(--on-petrol)}
.btn.primary:hover{background:var(--petrol-hover);border-color:var(--petrol-hover);color:var(--on-petrol)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--petrol)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.small{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.big{padding:15px 18px;font-size:16px;border-radius:14px;justify-content:center;min-height:52px}
.btn.danger{color:var(--crit);border-color:var(--crit-bg)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel > header{display:flex;align-items:center;gap:10px;padding:14px 18px 10px}
.panel > header h3{font-size:15px;font-weight:900}
.panel > header .more{margin-left:auto;font-size:12.5px;text-decoration:none;font-weight:700}
.panel .body{padding:4px 18px 16px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit{background:var(--crit-bg);color:var(--crit)} .pill.petrol{background:var(--petrol-soft);color:var(--petrol)}
.pill.rose{background:var(--surface-rose);color:var(--rose-deep)}
.pill.info{background:var(--surface-2);color:var(--muted)}
.health{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--health);background:var(--health-bg);border-radius:6px;padding:2px 7px}
.list{display:grid}
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .when{width:92px;flex:none;font-weight:900;color:var(--ink-strong)}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:700;color:var(--ink-strong)}
.row .s{font-size:12.5px;color:var(--muted)}
.row .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:150px 1fr;gap:7px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;color:var(--ink-strong)}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line-strong)}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t td.r,table.t th.r{text-align:right}
table.t tr.sum td{border-bottom:0;font-weight:900;color:var(--ink-strong)}
table.t.clickrows tbody tr:hover{background:var(--surface-2)}
.ini{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-weight:900;font-size:9px;flex:none;vertical-align:middle;background:var(--surface-2);color:var(--muted)}
.field{display:grid;gap:5px}
.field label,.field .lbl{font-size:12.5px;color:var(--muted);font-weight:700}
.chk-field{display:flex;align-items:center;gap:8px}
.chk-field label{display:inline}
.input{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-md);padding:9px 11px;width:100%;color:var(--ink-strong)}
.input:focus{outline:2px solid var(--petrol);outline-offset:0;border-color:transparent}
textarea.input{resize:vertical;min-height:74px}
.hint{font-size:12.5px;color:var(--faint)}
.chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.chk input{appearance:none;width:18px;height:18px;border:1.5px solid var(--petrol);border-radius:5px;margin:0;display:grid;place-items:center;background:var(--surface);cursor:pointer;flex:none}
.chk input:checked{background:var(--petrol)}
.chk input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-petrol);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-size:13px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--petrol);color:var(--on-petrol);font-weight:700}
.seg a{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-size:13px;cursor:pointer;color:var(--muted);text-decoration:none}
.seg a[aria-pressed="true"]{background:var(--petrol);color:var(--on-petrol);font-weight:700}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:7px;align-items:center}
.tabs button[aria-selected="true"]{color:var(--petrol);border-bottom-color:var(--petrol)}
.tabs a{border:0;background:transparent;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:7px;align-items:center;text-decoration:none}
.tabs a[aria-selected="true"]{color:var(--petrol);border-bottom-color:var(--petrol)}
.tabpanel[hidden]{display:none}
.callout{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:11px 13px;font-size:13.5px;background:var(--surface-2);color:var(--ink)}
.callout.warn{background:var(--warn-bg);color:var(--warn)} .callout.crit{background:var(--crit-bg);color:var(--crit)}
.callout.ok{background:var(--ok-bg);color:var(--ok)} .callout.rose{background:var(--surface-rose);color:var(--health)}
.callout b{color:inherit}
.bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--petrol);border-radius:999px}
.bar.warn i{background:#D08A1B}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-home{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
/* Fußzeile „Morgen · …“ unter dem Panel „Heute“ (Prototyp Zeilen 332–337). */
.tomorrow{border-top:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stack{display:grid;gap:14px;align-content:start}
.hstack{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hstack.between{justify-content:space-between}
.divider{height:1px;background:var(--line)}
.masked{letter-spacing:.2em;color:var(--faint)}
.rule{display:flex;justify-content:space-between;gap:10px}
/* Textbausteine: gerenderter Baustein und Unterschied zur Vorfassung (Spec §7.5) */
.prose{font-size:13.5px;line-height:1.55}
.prose h2{font-size:15px;font-weight:900;color:var(--ink-strong);margin:14px 0 6px}
.prose p{margin:0 0 10px}
.prose ul,.prose ol{margin:0 0 10px;padding-left:20px}
.prose li{margin:0 0 4px}
.prose strong{color:var(--ink-strong)}
/* Die Zeilen mit - und + bleiben Text: kein Farbcode, kein Skript. */
.diff{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:var(--ink)}
/* Dialog */
.scrim{position:fixed;inset:0;background:rgba(14,35,38,.42);display:grid;place-items:center;z-index:60;padding:16px}
.scrim[hidden]{display:none}
.dialog{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-pop);width:min(520px,92%);padding:22px 24px;display:grid;gap:14px}
.dialog h3{font-size:18px;font-weight:900}
.dialog .acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink-strong);color:var(--surface);border-radius:12px;padding:10px 16px;font-weight:700;font-size:13.5px;display:flex;gap:8px;align-items:center;z-index:6;box-shadow:var(--shadow-pop)}
.toast[hidden]{display:none}
.rel{position:relative}
/* ── Handy: Seitenleiste weicht der unteren Leiste (Spec §8.4) ──────────────── */
@media (max-width: 900px){
.side{display:none}
.desk{grid-template-columns:1fr}
.content{padding:18px 16px 96px}
.topbar{padding:12px 16px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:8px 6px 22px}
.tabbar a{display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--faint);text-decoration:none;min-height:44px;align-content:center}
.tabbar a.on{color:var(--petrol);font-weight:700}
}
@media (min-width: 901px){
.tabbar{display:none}
}
/* ── Ergänzungen von CareDesk (im Prototyp Inline-Angaben) ──────────────────── */
.icon-defs{position:absolute}
.conn{margin-left:auto}
/* Zwei Bausteine, die die Element-Grundstile sonst auseinanderziehen würden. */
.search input{min-height:0;margin:0;width:auto}
.seg button{min-height:0;margin:0}
/* Der Seitenkopf verschwindet, wenn weder Titel noch Schaltflächen gefüllt sind. */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head > :first-child{min-width:0}
.page-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.page-head:not(:has(*:not(.acts:empty))){display:none}
.greeting{font-size:36px;color:var(--petrol);line-height:1}
.messages{margin-bottom:16px}
.hinweis{border-left:4px solid var(--petrol);background:var(--surface-2);padding:11px 13px;border-radius:var(--r-sm)}
.fehler{color:var(--crit);background:var(--crit-bg);padding:11px 13px;border-radius:var(--r-md)}
ul.errorlist{margin:0;padding:11px 13px 11px 32px;color:var(--crit);background:var(--crit-bg);border-radius:var(--r-md)}
.entrance .desk{grid-template-columns:1fr}
.entrance .content{max-width:480px;margin:40px auto}
/* Menü (Prototyp-Stil der Ansichten ab Zeile 2725) */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:270px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;display:grid;z-index:40}
.menu[hidden]{display:none}
.menu > button,.menu > a,.menu > form > button{appearance:none;background:none;border:0;text-align:left;font:inherit;font-size:14px;color:var(--ink);text-decoration:none;display:block;padding:9px 12px;border-radius:9px;cursor:pointer}
/* Menüpunkte mit POST stecken in einem