/*!
 * SH-Media Design – Basis-Stylesheet
 * Version 1.0 · Stand Oktober 2026
 *
 * Einbinden:  <link rel="stylesheet" href="sh-media.css">
 * Schriften:  Ordner „fonts/“ neben diese Datei legen (Unbounded + Inter, beide SIL Open Font License).
 * Dunkelmodus: folgt automatisch dem System. Fest einstellen mit <html data-theme="light"> bzw. "dark".
 *
 * Inhalt
 *  1  Schriften            9  Hinweise, Pills, Tags
 *  2  Design-Token         10 Tabellen
 *  3  Basis & Typografie   11 Fortschritt & Balken
 *  4  Layout               12 Reiter & Segmente
 *  5  Kopfzeile & Menüs    13 Dialog, Tooltip, Leerzustand
 *  6  Buttons              14 Anmeldeseite & Fußzeile
 *  7  Karten & Kacheln     15 Marken-Elemente
 *  8  Formulare            16 Hilfsklassen
 */

/* ===================================================================== 1  Schriften */
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:500; font-display:swap; src:url('fonts/unbounded-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:600 700; font-display:swap; src:url('fonts/unbounded-latin-600-normal.woff2') format('woff2'); }

/* ===================================================================== 2  Design-Token */
:root {
  /* Marke */
  --brand-1:#c331c6;                 /* Magenta */
  --brand-2:#3415b4;                 /* Violett */
  --grad:linear-gradient(135deg, var(--brand-1), var(--brand-2));

  /* Schrift */
  --font-head:'Unbounded', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Form */
  --radius:12px; --radius-sm:8px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --shadow-sm:0 1px 3px rgba(20,8,60,.12);
  --shadow:0 16px 40px -12px rgba(20,8,60,.28);
  --shadow-lg:0 30px 80px -20px rgba(20,8,60,.45);
  --maxw:1040px;

  /* Farben – hell */
  --bg:#f6f5fa; --card:#fff; --fg:#1d1a2b; --muted:#6b6880; --line:#e7e4ef; --input:#fff;
  --accent:var(--brand-2); --accent-soft:color-mix(in srgb, var(--brand-2) 8%, #fff);
  --ok:#2e7d32; --ok-soft:#e8f5e9; --warn:#a15c00; --warn-soft:#fff4e5; --err:#c62828; --err-soft:#fdecea;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#13111c; --card:#1c1a28; --fg:#ece9f5; --muted:#a39fb8; --line:#2e2a40; --input:#16141f;
  --accent:color-mix(in srgb, var(--brand-1) 55%, #fff); --accent-soft:color-mix(in srgb, var(--brand-1) 20%, #1c1a28);
  --ok:#81c995; --ok-soft:#1b3324; --warn:#f0b35a; --warn-soft:#3a2a14; --err:#ff8a80; --err-soft:#3a1d24;
  --shadow:0 16px 40px -12px rgba(0,0,0,.6); color-scheme:dark; } }
:root[data-theme="dark"] {
  --bg:#13111c; --card:#1c1a28; --fg:#ece9f5; --muted:#a39fb8; --line:#2e2a40; --input:#16141f;
  --accent:color-mix(in srgb, var(--brand-1) 55%, #fff); --accent-soft:color-mix(in srgb, var(--brand-1) 20%, #1c1a28);
  --ok:#81c995; --ok-soft:#1b3324; --warn:#f0b35a; --warn-soft:#3a2a14; --err:#ff8a80; --err-soft:#3a1d24;
  --shadow:0 16px 40px -12px rgba(0,0,0,.6); color-scheme:dark; }

/* ===================================================================== 3  Basis & Typografie */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4, .display, .brand { font-family:var(--font-head); letter-spacing:-.01em; line-height:1.25; }
h1 { font-size:24px; font-weight:600; margin:0 0 18px; }
h2 { font-size:15px; font-weight:600; margin:0 0 12px; }
h3 { font-size:15px; font-weight:600; margin:20px 0 8px; }
h4 { font-family:var(--font-body); font-size:14px; font-weight:600; margin:16px 0 6px; letter-spacing:0; }
.display { font-size:clamp(28px, 5vw, 44px); font-weight:600; margin:0 0 12px; }
.lead { font-size:16px; color:var(--muted); margin:4px 0 0; max-width:640px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 4px; }
p { margin:0 0 12px; }
a { color:var(--accent); text-underline-offset:2px; }
a:hover { text-decoration-thickness:2px; }
.muted { color:var(--muted); }
small.help, .help { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
strong, b { font-weight:600; }
code, kbd { font-family:var(--font-mono); font-size:13px; background:var(--bg); padding:2px 6px; border-radius:4px; }
kbd { border:1px solid var(--line); border-bottom-width:2px; }
pre { font-family:var(--font-mono); font-size:13px; line-height:1.5; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; overflow:auto; margin:0 0 12px; }
pre code { background:none; padding:0; }
hr { border:0; border-top:1px solid var(--line); margin:20px 0; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; }
dt { color:var(--muted); } dd { margin:0; word-break:break-word; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:color-mix(in srgb, var(--brand-1) 30%, transparent); }

/* ===================================================================== 4  Layout */
main, .container { max-width:var(--maxw); margin:0 auto; padding:24px 16px 80px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.stack { display:flex; flex-direction:column; gap:var(--space-3); }
.spacer { flex:1; }
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; }
@media (max-width:760px) { .grid2, .grid3 { grid-template-columns:1fr; } }
.page-head { display:flex; gap:16px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; margin:4px 0 18px; }
.page-head h1 { margin:0; }
.page-head .actions { display:flex; gap:8px; flex-wrap:wrap; }
.crumb { font-size:13px; color:var(--muted); margin-bottom:4px; } .crumb a { color:var(--muted); }
.scroll { overflow-x:auto; }

/* ===================================================================== 5  Kopfzeile & Menüs */
header.bar { background:var(--card); border-bottom:1px solid var(--line); }
header.bar::before { content:""; display:block; height:4px; background:var(--grad); }
header.bar .in { max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:20px; height:56px; }
header.bar .brand { font-weight:600; font-size:16px; white-space:nowrap; display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
header.bar .brand img { height:30px; width:auto; display:block; }
header.bar nav { display:flex; gap:2px; flex:1; min-width:0; align-items:center; overflow-x:auto; scrollbar-width:none; }
header.bar nav::-webkit-scrollbar { display:none; }
header.bar nav a { color:var(--muted); text-decoration:none; padding:6px 11px; border-radius:var(--radius-sm); white-space:nowrap; }
header.bar nav a:hover { color:var(--fg); background:var(--accent-soft); }
header.bar nav a.on { color:var(--accent); background:var(--accent-soft); font-weight:600; }
header.bar nav .sep { width:1px; height:20px; background:var(--line); margin:0 6px; flex:none; }
.navbadge { display:inline-block; min-width:18px; margin-left:6px; padding:0 5px; border-radius:var(--radius-pill); background:var(--grad); color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center; vertical-align:1px; }

/* Navigations-Aufklapper (wie „Einstellungen“ im Zeitbericht) */
.navdrop { position:relative; }
.navdrop > button { display:flex; align-items:center; gap:6px; background:none; border:0; font:inherit; color:var(--muted); padding:6px 11px;
  border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; }
.navdrop > button:hover, .navdrop > button[aria-expanded="true"] { color:var(--fg); background:var(--accent-soft); }
.navdrop > button.on { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.navdrop > button .chev, .acct-btn .chev { transition:transform .15s; color:var(--muted); }
.navdrop > button[aria-expanded="true"] .chev, .acct-btn[aria-expanded="true"] .chev { transform:rotate(180deg); }
/* Aufklappmenü: .dropdown > button + .menu(.open) */
.dropdown { position:relative; display:inline-block; }
.menu { position:absolute; left:0; top:calc(100% + 8px); min-width:240px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; z-index:50; display:none; }
.menu.right { left:auto; right:0; }
.menu.open, .menu.static { display:block; }
.menu.static { position:static; box-shadow:var(--shadow); }
.menu a, .menu button { display:flex; gap:12px; align-items:flex-start; width:100%; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--fg); text-decoration:none; background:none; border:0; font:inherit; text-align:left; cursor:pointer; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background:var(--accent-soft); outline:none; }
.menu a.on { background:var(--accent-soft); } .menu a.on b { color:var(--accent); }
.menu svg { flex:none; margin-top:2px; color:var(--muted); }
.menu b { display:block; font-weight:600; font-size:14px; }
.menu small { display:block; color:var(--muted); font-size:12px; margin-top:1px; }
.menu .danger, .menu .danger svg { color:var(--err); }
.menu .divider { height:1px; background:var(--line); margin:6px 4px; }
.menu .label { display:flex; align-items:center; gap:5px; margin:6px 8px 2px; padding-top:8px; border-top:1px solid var(--line);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* Konto-Knopf mit Initialen */
.avatar { width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.02em; flex:none; }
.avatar.sm { width:26px; height:26px; font-size:11px; } .avatar.lg { width:44px; height:44px; font-size:16px; }
.acct-btn { display:flex; align-items:center; gap:10px; background:none; border:1px solid transparent; border-radius:var(--radius-pill);
  padding:3px 12px 3px 3px; font:inherit; color:inherit; cursor:pointer; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background:var(--accent-soft); }
.acct-btn .who { text-align:left; line-height:1.2; }
.acct-btn .who b { display:block; font-size:14px; } .acct-btn .who small { color:var(--muted); font-size:12px; }

/* ===================================================================== 6  Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; border-radius:var(--radius-sm);
  padding:9px 16px; font:inherit; font-weight:500; line-height:1.3; cursor:pointer; text-decoration:none; background:var(--grad) border-box;
  color:#fff; white-space:nowrap; transition:filter .15s, box-shadow .15s, background .15s; }
.btn:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 4px 14px -6px var(--brand-2); }
.btn.ghost { background:transparent; color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.btn.ghost:hover:not(:disabled) { background:var(--accent-soft); box-shadow:none; filter:none; }
.btn.soft { background:var(--accent-soft); color:var(--accent); }
.btn.soft:hover:not(:disabled) { box-shadow:none; filter:brightness(.97); }
.btn.danger { background:transparent; color:var(--err); border-color:var(--err); }
.btn.danger:hover:not(:disabled) { background:var(--err-soft); box-shadow:none; filter:none; }
.btn.sm { padding:4px 10px; font-size:13px; }
.btn.lg { padding:12px 22px; font-size:16px; }
.btn.block { width:100%; }
.btn:disabled, .btn.disabled { opacity:.55; cursor:not-allowed; }
.btn svg { flex:none; }
.btn-group { display:inline-flex; gap:8px; flex-wrap:wrap; }
.iconbtn { width:38px; height:38px; display:inline-grid; place-items:center; border-radius:var(--radius-pill); border:1px solid transparent;
  background:none; color:var(--muted); cursor:pointer; flex:none; text-decoration:none; }
.iconbtn:hover { background:var(--accent-soft); color:var(--fg); }
.iconbtn.sm { width:32px; height:32px; }
.iconbtn.outline { border-color:var(--line); }
.iconbtn.danger:hover { color:var(--err); background:var(--err-soft); }
.linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--muted); cursor:pointer; text-decoration:underline; font-size:13px; }
.linkbtn.danger { color:var(--err); }

/* ===================================================================== 7  Karten & Kacheln */
.card { background:var(--card); border-radius:var(--radius); padding:20px; margin-bottom:16px; border:1px solid var(--line); }
.card-h { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.card-h h2 { margin:0; } .card-h .desc { color:var(--muted); font-size:14px; margin:4px 0 0; }
.card-f { display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap; margin:16px -20px -20px; padding:14px 20px;
  border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg) 55%, var(--card)); border-radius:0 0 var(--radius) var(--radius); }
.card.accent { background:linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border:1px solid transparent; }
.card.flat { box-shadow:none; background:color-mix(in srgb, var(--bg) 60%, var(--card)); }
/* Einstellungszeile: Beschriftung links, Feld rechts */
.srow { display:grid; grid-template-columns:minmax(170px, 260px) 1fr; gap:6px 28px; padding:16px 0; border-top:1px solid var(--line); }
.card-h + .srow, .srow.first { border-top:0; }
.srow > .l b { display:block; font-weight:600; font-size:14px; }
.srow > .l small { display:block; color:var(--muted); font-size:13px; margin-top:2px; line-height:1.45; }
.srow > .c { min-width:0; }
@media (max-width:640px) { .srow { grid-template-columns:1fr; } }
/* Kachel */
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; }
a.tile { color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
a.tile:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 8px 24px -16px var(--brand-2); }
.tile .top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tile h3 { margin:0; font-size:15px; }
.tile .facts { font-size:13px; color:var(--muted); line-height:1.5; flex:1; }
.ico { width:36px; height:36px; border-radius:10px; display:inline-grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
.ico.grad { background:var(--grad); color:#fff; }
/* Kennzahl-Karte (wie Zeitbericht) */
.kpi-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; position:relative; overflow:hidden; }
.kpi-card.main::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); }
.kpi-card .k-label { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.kpi-card .k-label .ico { width:28px; height:28px; border-radius:8px; }
.kpi-card .k-period { font-size:12px; color:var(--muted); margin-top:6px; }
.kpi-card .k-val { font-family:var(--font-head); font-size:30px; font-weight:600; line-height:1.15; margin-top:2px; font-variant-numeric:tabular-nums; }
.kpi-card .k-val small { font-family:var(--font-body); font-size:14px; color:var(--muted); font-weight:500; margin-left:3px; }
.kpi-card .k-sub { font-size:12px; color:var(--muted); }
.kpi-card dl.facts, dl.facts { display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin-top:14px; font-size:14px; }
dl.facts dt { color:var(--muted); } dl.facts dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:500; }
dl.facts .adm { font-style:italic; color:var(--muted); font-weight:400; }
dl.facts .rule { grid-column:1 / -1; border-top:1px dashed var(--line); margin:3px 0; }
/* Ziel-/Fortschrittszeile (wie Zeitbericht) */
.target { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; }
.target .t-name { font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.target .t-meta { font-size:13px; color:var(--muted); }
.target .progress { grid-column:1 / -1; }
.tgroup + .tgroup { margin-top:14px; }
.tgroup-h { display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; padding:6px 0 6px 10px; border-left:3px solid var(--accent); }
.tgroup-h .muted { text-transform:none; letter-spacing:0; font-weight:500; }
/* Liste mit Zeilen */
.items { display:flex; flex-direction:column; }
.item-row { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); }
.item-row:first-child { border-top:0; }
.item-row .main { flex:1; min-width:0; } .item-row .side { display:flex; gap:6px; flex:none; }

/* ===================================================================== 8  Formulare */
label.f { display:block; font-weight:600; font-size:14px; margin-bottom:4px; }
.field { margin-bottom:16px; }
input[type=text], input[type=search], input[type=url], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=time], input[type=date], input[type=month], input[type=datetime-local], select, textarea {
  width:100%; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--input); color:inherit; font:inherit; }
textarea { resize:vertical; min-height:84px; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
input::placeholder, textarea::placeholder { color:color-mix(in srgb, var(--muted) 80%, transparent); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color:var(--err); }
.field .error { display:block; color:var(--err); font-size:13px; margin-top:4px; }
.inline-fields { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-fields input[type=number] { width:96px; } .inline-fields input[type=date] { width:170px; } .inline-fields select { width:auto; }
input[type=color] { width:42px; height:38px; padding:2px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); cursor:pointer; }
input[type=file] { font:inherit; font-size:14px; }
input[type=file]::file-selector-button { font:inherit; font-weight:500; margin-right:10px; padding:7px 12px; border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); background:transparent; color:var(--accent); cursor:pointer; }

/* Jedes Kästchen ist ein Schiebeschalter. Runde Auswahlknöpfe nur für Einfachauswahl. */
input[type=checkbox], input[type=radio] { -webkit-appearance:none; appearance:none; flex:none; cursor:pointer; margin:0; position:relative;
  vertical-align:middle; transition:background .18s, border-color .15s, box-shadow .15s; }
input[type=checkbox] { width:40px; height:24px; border-radius:var(--radius-pill); border:0; background:color-mix(in srgb, var(--muted) 35%, var(--line)); }
input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; }
input[type=checkbox]:checked { background:var(--grad); box-shadow:0 2px 8px -3px var(--brand-2); }
input[type=checkbox]:checked::after { transform:translateX(16px); }
input[type=radio] { width:20px; height:20px; border-radius:50%; display:inline-grid; place-content:center;
  border:1.5px solid color-mix(in srgb, var(--muted) 55%, transparent); background:var(--input); }
input[type=radio]:hover:not(:disabled) { border-color:var(--accent); }
input[type=radio]:checked { background:var(--grad) border-box; border-color:transparent; box-shadow:0 2px 8px -3px var(--brand-2); }
input[type=radio]:checked::after { content:""; width:8px; height:8px; border-radius:50%; background:#fff; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity:.45; cursor:not-allowed; }
.check { display:flex; gap:12px; align-items:center; margin-bottom:12px; cursor:pointer; }
.check span small { display:block; color:var(--muted); font-size:13px; }
/* Schalter als Karte */
.check.option, .check.rc-opt { margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.check.option:has(input:checked), .check.rc-opt:has(input:checked) { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); background:color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.check.option b, .check.rc-opt b { display:block; font-size:14px; }
.check.option small, .check.rc-opt small { display:block; font-size:12px; color:var(--muted); font-weight:400; }
/* Segmentierte Auswahl (Einfachauswahl, kompakt) */
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px; gap:2px; flex-wrap:wrap; align-self:flex-start; }
.seg label { position:relative; } .seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span, .seg a { display:block; padding:6px 12px; border-radius:calc(var(--radius-sm) - 2px); cursor:pointer; color:var(--muted); white-space:nowrap; font-size:14px; text-decoration:none; }
.seg input:checked + span, .seg a.on { background:var(--card); color:var(--fg); font-weight:600; box-shadow:var(--shadow-sm); }
.seg input:focus-visible + span { outline:2px solid var(--accent); }
/* Auswahl-Chips (Einfachauswahl, auffällig) */
label.pick { position:relative; cursor:pointer; display:inline-block; }
label.pick input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
label.pick span { display:block; padding:7px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; font-weight:500;
  text-align:center; background:var(--card); transition:border-color .15s, background .15s; }
label.pick:hover span { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
label.pick input:checked + span { border-color:transparent; background:var(--grad); color:#fff; font-weight:600; box-shadow:0 2px 8px -4px var(--brand-2); }
label.pick input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }

/* ===================================================================== 9  Hinweise, Pills, Tags */
.flash { padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:12px; background:var(--accent-soft); color:var(--accent); }
.flash.ok { background:var(--ok-soft); color:var(--ok); }
.flash.warn { background:var(--warn-soft); color:var(--warn); }
.flash.error { background:var(--err-soft); color:var(--err); }
.hint { padding:12px 14px; border-radius:var(--radius-sm); background:var(--accent-soft); margin-bottom:16px; font-size:14px; }
.hint.warn { background:var(--warn-soft); color:var(--warn); }
.pill { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:2px 10px; border-radius:var(--radius-pill); white-space:nowrap; line-height:1.6; }
.pill.ok { background:var(--ok-soft); color:var(--ok); } .pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.err { background:var(--err-soft); color:var(--err); } .pill.info { background:var(--accent-soft); color:var(--accent); }
.pill.muted { background:var(--bg); color:var(--muted); } .pill.grad { background:var(--grad); color:#fff; }
/* Abzeichen mit Rahmen (wie Zielarten im Zeitbericht): .ptag + Farbvariante */
.ptag { display:inline-flex; align-items:center; gap:4px; padding:2px 9px 2px 7px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
  vertical-align:1px; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
.ptag svg { flex:none; }
.ptag-month { background:color-mix(in srgb, #2f7de1 14%, transparent); color:#1d5fb8; border-color:color-mix(in srgb, #2f7de1 35%, transparent); }
.ptag-year  { background:color-mix(in srgb, var(--brand-1) 14%, transparent); color:#9a1f9d; border-color:color-mix(in srgb, var(--brand-1) 35%, transparent); }
.ptag-week  { background:color-mix(in srgb, #0f9f8f 14%, transparent); color:#0b7a6e; border-color:color-mix(in srgb, #0f9f8f 35%, transparent); }
.ptag-plan  { background:color-mix(in srgb, #f59e0b 14%, transparent); color:#a15c00; border-color:color-mix(in srgb, #f59e0b 40%, transparent); }
:root[data-theme="dark"] .ptag-month { color:#8cbcff; } :root[data-theme="dark"] .ptag-year { color:#f0a3f2; }
:root[data-theme="dark"] .ptag-week { color:#6fe0d2; } :root[data-theme="dark"] .ptag-plan { color:#fbc56b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptag-month { color:#8cbcff; } :root:not([data-theme="light"]) .ptag-year { color:#f0a3f2; }
  :root:not([data-theme="light"]) .ptag-week { color:#6fe0d2; } :root:not([data-theme="light"]) .ptag-plan { color:#fbc56b; } }
/* Kennzeichnung „Nur für Admins“ (Schloss) */
.adm-mark { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.5;
  color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent); vertical-align:1px; white-space:nowrap; }
.btn .adm-mark { margin-left:2px; padding:1px 4px; background:color-mix(in srgb, var(--accent) 10%, transparent); color:inherit; opacity:.75; }

/* ===================================================================== 10 Tabellen */
table.list { width:100%; border-collapse:collapse; font-size:14px; }
table.list th { text-align:left; font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.list td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.list tr:last-child td { border-bottom:0; }
table.list .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.list tr.group td { background:color-mix(in srgb, var(--accent-soft) 60%, transparent); font-weight:600; }
table.list tr.sub td:first-child { padding-left:28px; color:var(--muted); }
table.list tr.total td { font-weight:700; border-top:2px solid var(--line); }
table.list tbody tr:hover td { background:color-mix(in srgb, var(--accent-soft) 35%, transparent); }

/* ===================================================================== 11 Fortschritt & Balken */
.progress { height:8px; border-radius:99px; background:color-mix(in srgb, var(--muted) 16%, var(--card)); position:relative; overflow:hidden; margin-top:4px; }
.progress > span { position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--grad); }
.progress > i { position:absolute; top:0; bottom:0; width:2px; background:var(--fg); opacity:.35; }
.progress.thin { height:5px; }
/* Prognose-Balken: bisher (voll) + noch erwartet (gestreift), Strich = Soll, Linie oben = Spanne */
.fc-bar { position:relative; display:flex; height:12px; border-radius:999px; background:var(--line); }
.fc-bar .done { background:var(--grad); border-radius:999px 0 0 999px; }
.fc-bar .rest { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 55%, transparent) 0 5px, color-mix(in srgb, var(--brand-1) 32%, transparent) 5px 10px); border-radius:0 999px 999px 0; }
.fc-bar .goal { position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--fg); }
.fc-bar .range { position:absolute; top:-5px; height:3px; border-radius:2px; background:color-mix(in srgb, var(--fg) 45%, transparent); }
.fc-legend { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:13px; color:var(--muted); }
.fc-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.fc-legend i.done { background:var(--grad); }
.fc-legend i.rest { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 55%, transparent) 0 3px, color-mix(in srgb, var(--brand-1) 32%, transparent) 3px 6px); }
.fc-legend b { color:var(--fg); }
/* Säulendiagramm (wie Monate/Wochen im Zeitbericht) – Spalten über style="grid-template-columns:repeat(n, minmax(0,1fr))" */
.months { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:6px; align-items:end; height:150px; margin-top:16px; }
.months > a, .months > div { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; height:100%; text-decoration:none; color:var(--muted);
  font-size:11px; text-align:center; gap:4px; border-radius:6px; padding:2px; }
.months > a:hover, .months > div:hover { background:var(--accent-soft); }
.months > .on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.months .stack { display:flex; flex-direction:column; justify-content:flex-end; flex:1; }
.months .w { background:var(--grad); border-radius:4px 4px 1px 1px; min-height:2px; }
.months .a { background:color-mix(in srgb, var(--muted) 35%, var(--card)); border-radius:4px 4px 0 0; }
.months .v { font-variant-numeric:tabular-nums; color:var(--fg); font-size:11px; white-space:nowrap; }
.months > .future > * { opacity:.4; }
.months > [data-tip] { cursor:default; outline:none; }
.months > [data-tip]:hover .w { filter:brightness(1.12); }
.months > [data-tip]:nth-child(-n+2):hover::after { left:0; transform:none; }
.months > [data-tip]:nth-last-child(-n+2):hover::after { left:auto; right:0; transform:none; }
@media (max-width:760px) { .months .v { display:none; } }
/* ===================================================================== 12 Reiter & Segmente */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 20px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a, .tabs button { background:none; border:0; font:inherit; color:var(--muted); padding:10px 14px; cursor:pointer; white-space:nowrap; text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:8px; }
.tabs a:hover, .tabs button:hover { color:var(--fg); }
.tabs .on { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tabs .count { font-size:11px; background:var(--accent-soft); color:var(--accent); border-radius:var(--radius-pill); padding:0 7px; font-weight:600; }
.pager { display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.pager a, .pager span { display:grid; place-items:center; width:34px; height:32px; color:var(--fg); text-decoration:none; }
.pager a:hover { background:var(--accent-soft); } .pager > * + * { border-left:1px solid var(--line); } .pager span { color:var(--muted); opacity:.5; }

/* ===================================================================== 13 Dialog, Tooltip, Leerzustand */
dialog.modal { border:0; padding:0; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 32px); border-radius:calc(var(--radius) + 4px);
  background:var(--card); color:var(--fg); box-shadow:var(--shadow-lg); overflow:auto; }
dialog.modal::backdrop { background:rgba(19,17,28,.55); backdrop-filter:blur(2px); }
.modal-h { position:relative; display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:22px 22px 10px; }
.modal-h::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad); }
.modal-h h2 { margin:0 0 4px; font-size:18px; } .modal-h .desc { color:var(--muted); font-size:14px; margin:0; }
.modal-b { padding:4px 22px 8px; }
.modal-f { display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--line); margin-top:12px; }
.close-x { flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.close-x:hover { color:var(--fg); background:var(--accent-soft); }
/* Tooltip: data-tip="Text" – Zeilenumbruch mit &#10; */
[data-tip] { position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  white-space:pre; z-index:60; background:var(--fg); color:var(--bg); font:500 12px/1.45 var(--font-body); padding:7px 10px; border-radius:8px;
  box-shadow:var(--shadow); pointer-events:none; }
.empty { text-align:center; padding:36px 16px; }
.empty .ico { width:48px; height:48px; border-radius:14px; margin-bottom:12px; }
.empty h3 { margin:0 0 6px; } .empty p { color:var(--muted); margin:0 auto 16px; max-width:440px; }

/* ===================================================================== 14 Anmeldeseite & Fußzeile */
/* Anmeldeseite (wie Zeitbericht): <body class="auth grad"> … <main><div class="authcard">…</div><p class="authfoot">…</p></main> */
body.auth { min-height:100vh; display:flex; flex-direction:column; }
body.auth.grad { background:var(--grad); }
body.auth main { flex:1; display:flex; flex-direction:column; justify-content:center; width:100%; max-width:440px; margin:0 auto; padding:32px 16px; }
.authcard { background:var(--card); border-radius:calc(var(--radius) + 4px); padding:32px 28px; box-shadow:0 24px 60px -24px rgba(20,8,60,.45); }
.authcard .logo { display:flex; justify-content:center; margin-bottom:18px; }
.authcard .logo img { max-height:56px; max-width:220px; }
.authcard .logo .brandmark { width:52px; height:52px; border-radius:14px; }
.authcard .logo .brandmark svg { width:28px; height:28px; }
.authcard h1 { text-align:center; font-size:24px; margin:0 0 6px; }
.authcard .tag { text-align:center; color:var(--muted); margin:0 0 24px; font-size:14px; }
.authcard .btn { width:100%; justify-content:center; padding:11px 16px; }
.authcard .or { text-align:center; margin:16px 0 12px; font-size:13px; color:var(--muted); }
.authfoot { text-align:center; font-size:12px; margin-top:16px; color:var(--muted); }
body.auth.grad .authfoot { color:rgba(255,255,255,.8); }
body.auth .authfoot a { color:inherit; }
body.auth.grad .flash { box-shadow:0 8px 24px -12px rgba(0,0,0,.4); }
.auth-tools { position:fixed; top:14px; right:14px; }
body.auth.grad .auth-tools .iconbtn { color:#fff; } body.auth.grad .auth-tools .iconbtn:hover { background:rgba(255,255,255,.15); }
/* Hell/Dunkel-Knopf: zeigt Mond im hellen, Sonne im dunklen Modus */
.theme-ico-dark, :root[data-theme="dark"] .theme-ico-light { display:none; }
:root[data-theme="dark"] .theme-ico-dark { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-ico-light { display:none; } :root:not([data-theme="light"]) .theme-ico-dark { display:block; } }
footer.foot { border-top:1px solid var(--line); background:var(--card); }
footer.foot .in { max-width:var(--maxw); margin:0 auto; padding:16px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); }
footer.foot .in .sp { flex:1; } footer.foot a { color:var(--muted); text-decoration:none; } footer.foot a:hover { color:var(--fg); }

/* ===================================================================== 15 Marken-Elemente */
.brandmark { width:28px; height:28px; border-radius:8px; background:var(--grad); display:inline-grid; place-items:center; flex:none; color:#fff; }
.brandmark svg { width:16px; height:16px; }
.brandmark.lg { width:52px; height:52px; border-radius:14px; } .brandmark.lg svg { width:28px; height:28px; }
.band { height:4px; background:var(--grad); border-radius:2px; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-border { background:linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border:1px solid transparent; }
.grad-bg { background:var(--grad); color:#fff; }

/* ===================================================================== 16 Hilfsklassen */
.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; }
.nowrap { white-space:nowrap; } .num { font-variant-numeric:tabular-nums; }
.text-right { text-align:right; } .text-center { text-align:center; }
.mt-0 { margin-top:0 !important; } .mt-2 { margin-top:8px; } .mt-4 { margin-top:16px; } .mt-6 { margin-top:32px; }
.mb-0 { margin-bottom:0 !important; } .mb-2 { margin-bottom:8px; } .mb-4 { margin-bottom:16px; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .err { color:var(--err); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }
@media print {
  header.bar, footer.foot, .no-print { display:none !important; }
  body { background:#fff; color:#000; } .card, .tile, .kpi-card { border-color:#ddd; break-inside:avoid; }
}