@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Farben: light-dark() folgt dem System oder der Wahl im Profil (data-theme). Die Stimmung (data-accent) setzt die Akzente. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#f2f4f9, #0a0d16);
  --surface: light-dark(#ffffff, #141927);
  --surface-2: light-dark(#eef0f6, #1d2334);
  --line: light-dark(#e4e7f0, #262d41);
  --line-strong: light-dark(#cdd2df, #3b4359);
  --ink: light-dark(#11141d, #eff1f7);
  --ink-2: light-dark(#414859, #c3c9d9);
  --ink-3: light-dark(#596073, #9ca4b8);
  --accent: light-dark(#0f766e, #2dd4bf);
  --accent-2: light-dark(#0e7490, #22d3ee);
  --accent-ink: light-dark(#ffffff, #04201c);
  --accent-soft: light-dark(color-mix(in srgb, var(--accent) 14%, #ffffff), color-mix(in srgb, var(--accent) 20%, #141927));
  --warm: light-dark(#c2410c, #fb923c);
  --on-warm: light-dark(#ffffff, #1b0d05);
  --danger: light-dark(#b4232f, #f8919a);
  --on-danger: light-dark(#ffffff, #2a0a0c);
  --danger-soft: light-dark(#fce8e9, #3b1f25);
  --ok: light-dark(#15693b, #6fd19a);
  --shade: light-dark(rgb(20 24 45 / 6%), rgb(0 0 0 / 38%));
  --shade-strong: light-dark(rgb(20 24 45 / 16%), rgb(0 0 0 / 62%));
  --shadow-1: 0 1px 2px var(--shade), 0 2px 8px var(--shade);
  --shadow-2: 0 2px 4px var(--shade), 0 12px 32px -8px var(--shade-strong);
  --shadow-3: 0 8px 16px -4px var(--shade-strong), 0 28px 60px -12px var(--shade-strong);
  --glass: light-dark(rgb(255 255 255 / 72%), rgb(20 25 39 / 72%));
  --radius: 16px;
  --radius-s: 10px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hour: 48px;
  --tabbar: 62px;
  --bar: 52px;
  --spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
:root[data-accent=ozean] { --accent: light-dark(#1d4ed8, #60a5fa); --accent-2: light-dark(#4338ca, #818cf8); --accent-ink: light-dark(#ffffff, #071433); }
:root[data-accent=beere] { --accent: light-dark(#be123c, #fb7185); --accent-2: light-dark(#a21caf, #f0abfc); --accent-ink: light-dark(#ffffff, #2a0612); }
:root[data-accent=sonne] { --accent: light-dark(#a3440b, #fbbf24); --accent-2: light-dark(#b45309, #fb923c); --accent-ink: light-dark(#ffffff, #2a1602); }
:root[data-accent=wald] { --accent: light-dark(#166534, #4ade80); --accent-2: light-dark(#15803d, #2dd4bf); --accent-ink: light-dark(#ffffff, #052e16); }
:root[data-accent=lavendel] { --accent: light-dark(#6d28d9, #a78bfa); --accent-2: light-dark(#7c3aed, #c4b5fd); --accent-ink: light-dark(#ffffff, #1e0b46); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { -webkit-tap-highlight-color: transparent; margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.45 var(--sans); font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-weight: 700; margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0 0 .6em; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Bedienelemente */
.btn { text-decoration: none; color: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line-strong); background: var(--surface); white-space: nowrap; font-weight: 550; transition: transform .12s, box-shadow .15s, background .15s, filter .15s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--accent-ink); font-weight: 650; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: brightness(1.08); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-small { min-height: 30px; padding: 0 10px; font-size: 13px; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-2); flex: none; transition: background .15s, transform .12s; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn .marker { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 2px var(--surface); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea { width: 100%; min-height: 38px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea { min-height: 74px; resize: vertical; }
input[type=date], input[type=time] { min-width: 0; -webkit-appearance: none; appearance: none; display: block; }
input::-webkit-date-and-time-value { text-align: left; }
input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.field-hint { font-size: 12px; color: var(--ink-3); }
.check { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-1); transition: transform .12s, background .15s, border-color .15s; }
.chip:hover { border-color: var(--line-strong); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); font-weight: 650; }
.chip-icon { display: inline-grid; color: var(--c, var(--accent)); }
.chip .count { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chips-scroll::-webkit-scrollbar { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; display: inline-block; }
.avatar { --c: var(--accent); width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 10px; font-weight: 700; line-height: 1; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 34%, var(--surface)), color-mix(in srgb, var(--c) 16%, var(--surface))); color: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.avatars { display: inline-flex; flex: none; align-self: center; }
.avatars .avatar + .avatar { margin-left: -5px; }
.badge { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 550; line-height: 19px; white-space: nowrap; }
.badge-ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); }
.badge-error { background: var(--danger-soft); color: var(--danger); }
.empty { color: var(--ink-3); padding: 12px 0; margin: 0; }
.empty-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); color: var(--ink-2); }
.empty-card svg { color: var(--accent); flex: none; }

/* Der Himmel: passt zur Tageszeit. Alle Verläufe sind dunkel genug für weiße Schrift. */
.sky { --sky-a: #0369a1; --sky-b: #0e7490; --sky-c: #0f766e; --glow-a: #22d3ee; --glow-b: #34d399; position: relative; overflow: hidden; color: #fff; background: linear-gradient(155deg, var(--sky-a), var(--sky-b) 55%, var(--sky-c)); isolation: isolate; }
.sky-dawn { --sky-a: #4338ca; --sky-b: #be185d; --sky-c: #c2410c; --glow-a: #fb7185; --glow-b: #f59e0b; }
.sky-day { --sky-a: #1d4ed8; --sky-b: #0369a1; --sky-c: #0f766e; --glow-a: #22d3ee; --glow-b: #34d399; }
.sky-dusk { --sky-a: #c2410c; --sky-b: #9d174d; --sky-c: #3730a3; --glow-a: #e879f9; --glow-b: #fb923c; }
.sky-night { --sky-a: #0b1026; --sky-b: #1e1b4b; --sky-c: #312e81; --glow-a: #6366f1; --glow-b: #a855f7; }
.sky::before, .sky::after { content: ""; position: absolute; border-radius: 50%; filter: blur(56px); opacity: .5; z-index: -1; animation: drift 16s ease-in-out infinite alternate; }
.sky::before { width: 340px; height: 340px; right: -90px; top: -130px; background: var(--glow-a); }
.sky::after { width: 300px; height: 300px; left: -70px; bottom: -170px; background: var(--glow-b); animation-delay: -6s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(34px, 22px) scale(1.14); } }
.sky-orb { position: absolute; z-index: -1; left: var(--x); top: var(--y); width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff7d6 0 34%, #ffd86b 62%, rgb(255 190 80 / 0) 72%); box-shadow: 0 0 44px 18px rgb(255 214 120 / 45%); pointer-events: none; }
.fresh .sky-orb, .login .sky-orb { animation: rise .9s var(--spring) both; }
.sky-night .sky-orb { background: radial-gradient(circle at 42% 42%, #fdfdf2 0 46%, #d8dcf0 66%, rgb(216 220 240 / 0) 72%); box-shadow: 0 0 36px 10px rgb(200 210 255 / 28%); }
@keyframes rise { from { transform: translateY(26px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.stars { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.6px 1.6px at 44% 18%, #fff, transparent), radial-gradient(1px 1px at 58% 44%, #fff, transparent), radial-gradient(1.3px 1.3px at 72% 14%, #fff, transparent), radial-gradient(1px 1px at 84% 52%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 28%, #fff, transparent), radial-gradient(1px 1px at 8% 76%, #fff, transparent), radial-gradient(1.2px 1.2px at 36% 38%, #fff, transparent), radial-gradient(1px 1px at 66% 72%, #fff, transparent); }
.sky-night .stars { opacity: .9; animation: twinkle 5s ease-in-out infinite alternate; }
.sky-dawn .stars { opacity: .35; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

/* Anmeldung */
.login { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(380px, 100%); background: var(--surface); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-3); animation: pop .5s var(--spring) both; color: var(--ink); }
.login-card img { width: 50px; height: 50px; display: block; margin-bottom: 14px; filter: drop-shadow(0 8px 14px rgb(15 92 82 / 35%)); }
.login-card h1 { font-size: 24px; margin-bottom: 4px; }
.login-card > p { font-size: 13.5px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.login-card .btn { width: 100%; min-height: 42px; }
.form-error { color: var(--danger); font-size: 13px; margin: 0; }
.text-link { background: none; border: 0; padding: 4px 0; color: var(--accent); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; align-self: center; }
@keyframes pop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* Rahmen */
.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.sidebar { background: var(--surface); padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; box-shadow: 1px 0 0 var(--line); z-index: 5; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 750; padding: 2px 4px; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; filter: drop-shadow(0 3px 6px rgb(15 92 82 / 30%)); }
.sidebar > .btn-primary { min-height: 40px; border-radius: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--accent-soft); color: var(--ink); font-weight: 650; }
.nav a.active svg { color: var(--accent); }
.side-section summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding: 0 4px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); cursor: pointer; }
.side-section summary::-webkit-details-marker { display: none; }
.side-section summary svg { transition: transform .15s; }
.side-section[open] summary svg { transform: rotate(180deg); }
.filter-list { display: flex; flex-direction: column; }
.filter-list .check { padding: 0 5px; border-radius: 7px; font-size: 13px; min-height: 28px; }
.filter-list .check:hover { background: var(--surface-2); }
.filter-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-list input { accent-color: var(--c, var(--accent)); width: 14px; height: 14px; }
.main { min-width: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.tabbar { display: none; }
.offline { background: var(--warm); color: var(--on-warm); text-align: center; font-size: 12.5px; padding: 3px 8px; }
.license-banner { background: var(--accent-soft); text-align: center; font-size: 12.5px; padding: 5px 12px; }
.license-banner-warn { background: var(--danger-soft); }

/* Mini-Monat */
.mini { padding: 2px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 650; padding-left: 4px; }
.mini-head .icon-btn { width: 24px; height: 24px; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11.5px; }
.mini-grid .wd { color: var(--ink-3); font-size: 10.5px; padding: 2px 0; }
.mini-day { border: 0; background: none; height: 24px; padding: 0; border-radius: 50%; aspect-ratio: 1; margin: 0 auto; font-size: 11.5px; font-weight: 500; }
.mini-day:hover { background: var(--surface-2); }
.mini-day.other { color: var(--ink-3); }
.mini-day.selected { background: var(--accent-soft); font-weight: 700; }
.mini-day.today { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-weight: 700; }

/* Werkzeugleiste */
.toolbar { display: flex; align-items: center; gap: 6px; padding: 0 14px; min-height: var(--bar); background: var(--surface); box-shadow: 0 1px 0 var(--line); flex: none; z-index: 4; }
.toolbar h1 { font-size: 17px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar h1 small { font-weight: 450; font-size: 12.5px; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.segmented { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-s); padding: 3px; }
.segmented button { border: 0; background: transparent; padding: 0 12px; min-height: 28px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background .15s, color .15s; }
.segmented button[aria-pressed=true] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 3px rgb(20 24 45 / 18%); }
.searchbox { position: relative; width: 170px; }
.searchbox input { padding-left: 30px; min-height: 34px; background: var(--surface-2); border-color: transparent; }
.searchbox svg { position: absolute; left: 9px; top: 9px; color: var(--ink-3); pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 0 8px 0 12px; border-radius: 999px; border: 0; background: var(--surface-2); font-size: 13px; font-weight: 600; flex: none; }
.view { flex: 1; min-height: 0; overflow: hidden auto; position: relative; }
.fresh .enter > * { animation: fade-up .38s var(--spring) both; }
.fresh .enter > *:nth-child(2) { animation-delay: .04s; }
.fresh .enter > *:nth-child(3) { animation-delay: .08s; }
.fresh .enter > *:nth-child(4) { animation-delay: .12s; }
.fresh .enter > *:nth-child(5) { animation-delay: .16s; }
@keyframes fade-up { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.slide-next { animation: slide-next .28s var(--spring) both; }
.slide-prev { animation: slide-prev .28s var(--spring) both; }
@keyframes slide-next { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-prev { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Termin-Chip */
.ev { --c: var(--accent); display: block; width: 100%; text-align: left; border: 0; background: color-mix(in srgb, var(--c) 17%, var(--surface)); color: var(--ink); border-radius: 6px; padding: 0 6px; font-size: 12px; font-weight: 500; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none; box-shadow: inset 2.5px 0 0 var(--c); transition: background .15s, transform .12s; }
.ev:hover { background: color-mix(in srgb, var(--c) 28%, var(--surface)); transform: translateY(-1px); }
.ev .t { color: var(--ink-2); margin-right: 4px; font-variant-numeric: tabular-nums; font-weight: 450; }
.ev.masked { --c: var(--ink-3); background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 4px, var(--surface) 4px, var(--surface) 8px); color: var(--ink-2); }
.ev.cont { box-shadow: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ev.dragging { opacity: .85; box-shadow: var(--shadow-3); z-index: 5; cursor: grabbing; }
.drop-target { outline: 2px solid var(--accent); outline-offset: -2px; }
.ev-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }

/* Monat */
.month { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 420px; }
.month-head, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.month-head div { padding: 5px 8px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); }
.month-grid { min-height: 0; gap: 1px; background: var(--line); }
.cell { padding: 3px 4px; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; cursor: pointer; background: var(--surface); transition: background .15s; }
.cell:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.cell.other { background: var(--paper); }
.cell.other .num { color: var(--ink-3); }
.cell.weekend:not(.other) { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.cell .ev { line-height: 20px; }
.num { border: 0; background: none; padding: 0; color: inherit; font-family: inherit; align-self: flex-start; font-size: 12px; font-weight: 600; width: 24px; height: 24px; line-height: 24px; margin-bottom: -4px; text-align: center; border-radius: 50%; flex: none; }
.num:hover { background: var(--surface-2); }
.cell.today .num, .daynum.today { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-weight: 750; box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.more { border: 0; background: none; color: var(--ink-2); font-size: 11.5px; font-weight: 500; line-height: 20px; text-align: left; padding: 0 5px; flex: none; }
.more:hover { text-decoration: underline; }

/* Woche/Tag */
.tg { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-width: 0; }
.tg-head, .tg-allday, .tg-body { display: grid; grid-template-columns: 46px repeat(var(--days), minmax(0, 1fr)); }
.tg-head { background: var(--surface); }
.tg-head .h { padding: 4px 2px; text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; }
.tg-head .daynum { display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.tg-head .daynum.today { color: var(--accent-ink); }
.tg-allday { background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 6px 12px -8px rgb(20 24 45 / 20%); z-index: 2; }
.tg-allday .a { padding: 2px 1px; display: flex; flex-direction: column; gap: 2px; min-height: 28px; min-width: 0; }
.tg-allday .ev { line-height: 24px; }
.tg-allday .lbl { font-size: 10px; color: var(--ink-3); text-align: right; padding: 4px 5px 0 0; }
.tg-scroll { overflow-y: auto; min-height: 0; position: relative; background: var(--surface); }
.tg-body { height: calc(var(--hour) * 24); }
.tg-hours { position: relative; }
.tg-hours span { position: absolute; right: 6px; font-size: 10.5px; color: var(--ink-3); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.tg-col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% var(--hour); cursor: cell; }
.tg-col .ev { position: absolute; white-space: normal; padding: 2px 6px; border-radius: 7px; line-height: 15px; font-size: 11.5px; font-weight: 550; background: color-mix(in srgb, var(--c) 22%, var(--surface)); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--surface); }
.tg-col .ev.masked { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 4px, var(--surface) 4px, var(--surface) 8px); box-shadow: inset 3px 0 0 var(--ink-3), 0 0 0 1px var(--surface); }
.nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--warm); z-index: 3; pointer-events: none; box-shadow: 0 0 10px color-mix(in srgb, var(--warm) 70%, transparent); }
.nowline::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }

/* Jahr */
.year { display: grid; grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 12px; padding: 14px; }
.ym { background: var(--surface); border-radius: var(--radius); padding: 10px 12px 12px; box-shadow: var(--shadow-1); }
.ym h3 { margin-bottom: 4px; }
.ym h3 button { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13.5px; font-weight: 700; }
.ym-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 11px; text-align: center; }
.ym-grid .wd { color: var(--ink-3); font-size: 10px; }
.ym-day { border: 0; background: none; aspect-ratio: 1; border-radius: 7px; padding: 0; font-size: 11px; min-height: 24px; font-weight: 500; transition: transform .12s; }
.ym-day:hover { transform: scale(1.14); outline: 1px solid var(--line-strong); }
.ym-day.has1 { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ym-day.has2 { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.ym-day.has3 { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.ym-day.today { box-shadow: inset 0 0 0 2px var(--warm); font-weight: 750; }

/* Terminliste */
.agenda { max-width: 760px; margin: 0 auto; padding: 8px 14px 18px; }
.day-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 6px; padding: 9px 2px 5px; background: var(--paper); font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }
.day-head.is-today { color: var(--accent); }
.day-head small { font-weight: 450; color: var(--ink-3); font-size: 12px; letter-spacing: 0; }
.day-rows { display: grid; gap: 6px; }
.item { --c: var(--accent); position: relative; display: grid; grid-template-columns: 42px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 56px; text-align: left; border: 0; background: var(--surface); padding: 7px 12px 7px 10px; border-radius: 14px; box-shadow: var(--shadow-1); transition: transform .14s var(--spring), box-shadow .15s; }
.item:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.item:active { transform: scale(.985); }
.item .when { font-size: 13px; font-weight: 650; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.item .when small { display: block; color: var(--ink-3); font-size: 11px; font-weight: 450; }
.area-badge { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: color-mix(in srgb, var(--c) 78%, var(--ink)); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 24%, var(--surface)), color-mix(in srgb, var(--c) 10%, var(--surface))); }
.item .body { min-width: 0; }
.item .title { display: block; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.item .meta { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.masked { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 7px, var(--surface-2) 7px, var(--surface-2) 14px); }
.item.masked .title { color: var(--ink-3); font-weight: 500; }
.item.past { background: color-mix(in srgb, var(--surface) 55%, var(--paper)); box-shadow: none; }
.item.past .title, .item.past .when { color: var(--ink-2); font-weight: 550; }
.item.past .area-badge { filter: grayscale(.75); }
.item.live { box-shadow: 0 0 0 2px var(--c), var(--shadow-2); }
.item.live .when::after { content: "Jetzt"; display: block; font-size: 10px; font-weight: 750; color: var(--warm); letter-spacing: .02em; }
.item.dated { grid-template-columns: 70px 36px minmax(0, 1fr) auto; }
.item.dated .when { white-space: nowrap; }
.countdown { font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: var(--ink); white-space: nowrap; }
.countdown.soon { background: var(--warm); color: var(--on-warm); }
.badge.grade { margin-left: 6px; font-weight: 600; }

/* Überblick */
.hero { padding: 18px 20px 16px; border-radius: 0 0 26px 26px; box-shadow: var(--shadow-2); display: grid; gap: 12px; }
.hero-top { display: flex; align-items: flex-start; gap: 6px; }
.hero h1 { font-size: 26px; font-weight: 750; letter-spacing: -0.03em; text-shadow: 0 1px 12px rgb(0 0 0 / 22%); }
.hero-date { margin: 2px 0 0; font-size: 14px; font-weight: 550; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 28%); }
.hero-text { min-width: 0; max-width: 55%; }
.hero-slots { display: grid; gap: 12px; min-height: 148px; align-content: start; }
@media (min-width: 1000px) { .hero-slots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 78px; } }
.hero .icon-btn { color: #fff; background: rgb(9 14 34 / 50%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .icon-btn:hover { background: rgb(9 14 34 / 66%); color: #fff; }
.hero .icon-btn .marker { box-shadow: 0 0 0 2px rgb(9 14 34); background: #fff; }
.glass { background: rgb(9 14 34 / 34%); border: 1px solid rgb(255 255 255 / 22%); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-radius: 16px; color: #fff; }
.next-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 11px 13px; text-align: left; transition: transform .14s var(--spring), background .15s; }
button.next-card:hover { background: rgb(9 14 34 / 44%); transform: translateY(-1px); }
.next-card .area-badge { width: 42px; height: 42px; border-radius: 13px; background: rgb(255 255 255 / 20%); color: #fff; }
.next-label { display: block; font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / 92%); }
.next-title { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-meta { display: block; font-size: 12.5px; color: rgb(255 255 255 / 92%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-count { font-size: 13px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: #fff; color: #11141d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 4px; }
.ws-day { border: 0; background: none; color: #fff; border-radius: 12px; padding: 4px 0 5px; text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; min-width: 0; transition: background .15s, transform .12s; }
.ws-day:hover { background: rgb(255 255 255 / 15%); }
.ws-day:active { transform: scale(.94); }
.ws-day .wd { font-size: 11px; font-weight: 550; color: rgb(255 255 255 / 92%); }
.ws-day .n { font-size: 15.5px; font-weight: 700; line-height: 25px; width: 27px; height: 25px; border-radius: 9px; }
.ws-day.today .n { background: #fff; color: #11141d; }
.ws-dots { display: flex; gap: 2px; justify-content: center; height: 5px; }
.ws-dots .dot { width: 5px; height: 5px; background: #fff; opacity: .92; }

.overview { display: grid; gap: 12px; padding-bottom: 20px; }
.ov-body { max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 16px; display: grid; gap: 12px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.ov-side { display: grid; gap: 12px; position: sticky; top: 8px; }
.ov-list .day-head { position: static; background: transparent; }
.family-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.family-strip::-webkit-scrollbar { display: none; }
.fam { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; flex: none; color: inherit; text-decoration: none; font-size: 11.5px; font-weight: 550; transition: transform .14s var(--spring); }
.fam:hover { transform: translateY(-2px); }
.fam span.label { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; }
.ring .track { stroke: var(--line); }
.ring .value { stroke: var(--c, var(--accent)); transition: stroke-dashoffset .9s var(--spring); }
.ring .avatar { box-shadow: none; }
.ring .pin { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-size: 10.5px; font-weight: 750; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.alerts { display: grid; gap: 6px; }
.alerts .alert { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; color: inherit; text-decoration: none; font-size: 13.5px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-1); transition: transform .14s var(--spring), box-shadow .15s; }
.alerts .alert:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.alerts .alert .x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-link { justify-content: center; color: var(--accent); font-weight: 650; }
.side-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0; letter-spacing: -0.01em; }
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.area { --c: var(--accent); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); min-height: 104px; }
.area::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 55%); pointer-events: none; }
.area > * { position: relative; }
.area-head { display: flex; align-items: center; gap: 8px; }
.area-head .area-badge { width: 30px; height: 30px; border-radius: 9px; }
.area h2 { font-size: 13.5px; }
.area .next { display: block; width: 100%; min-height: 24px; border: 0; background: none; text-align: left; padding: 2px 0; font-size: 12.5px; position: relative; z-index: 1; }
.area .next:hover .x { text-decoration: underline; }
.area .next .x { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area .next .d { display: block; color: var(--ink-3); font-size: 11.5px; }
.area .empty { padding: 0; font-size: 12px; }

/* Familie */
.page { max-width: 820px; width: 100%; margin: 0 auto; padding: 14px 16px 30px; }
.page > h1 { font-size: 20px; margin-bottom: 8px; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.member { --c: var(--accent); position: relative; overflow: hidden; display: grid; gap: 10px; padding: 14px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); color: inherit; text-decoration: none; transition: transform .16s var(--spring), box-shadow .18s; }
.member::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 62%); pointer-events: none; }
.member:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.member-top { position: relative; display: flex; align-items: center; gap: 12px; }
.member-top .name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-top .sub { display: block; font-size: 12.5px; color: var(--ink-2); }
.member-facts { position: relative; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.member-facts span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.member-facts span b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-facts svg { flex: none; color: var(--ink-3); }
.member-add { display: flex; gap: 8px; margin-top: 12px; }
.member-add > div { flex: 1; min-width: 0; }

.person-hero { --c: var(--accent); position: relative; overflow: hidden; color: #fff; padding: 10px 14px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #000), color-mix(in srgb, var(--c) 30%, #0b1026)); flex: none; }
.person-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, #fff), transparent 68%); opacity: .25; pointer-events: none; }
.person-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: 820px; margin: 0 auto; }
.person-top .icon-btn { color: #fff; }
.person-top .icon-btn:hover { background: rgb(255 255 255 / 18%); color: #fff; }
.person-top .avatar { width: 40px; height: 40px; font-size: 16px; background: rgb(255 255 255 / 22%); color: #fff; box-shadow: none; }
.person-top h1 { font-size: 20px; letter-spacing: -0.025em; }
.person-top p { margin: 0; font-size: 12.5px; color: rgb(255 255 255 / 92%); }
.person-tabs { position: relative; z-index: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 820px; margin: 8px auto 0; }
.person-tabs::-webkit-scrollbar { display: none; }
.person-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px 12px 0 0; color: #fff; text-decoration: none; font-weight: 550; font-size: 13.5px; white-space: nowrap; transition: background .15s; }
.person-tabs a:hover { background: rgb(255 255 255 / 14%); }
.person-tabs a.active { background: var(--paper); color: var(--ink); font-weight: 700; }

.list { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.list-row { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 6px 8px 6px 13px; width: 100%; background: none; border: 0; text-align: left; color: inherit; text-decoration: none; transition: background .15s; }
.list-row + .list-row { border-top: 1px solid var(--line); }
button.list-row:hover, a.list-row:hover { background: var(--surface-2); }
.list-row .body { flex: 1; min-width: 0; }
.list-row .name { display: block; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .name.wrap { white-space: normal; }
.list-row .sub { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .sub.error { color: var(--danger); white-space: normal; }
.section-title { display: flex; align-items: baseline; font-size: 14px; font-weight: 700; margin: 18px 0 8px; color: var(--ink); letter-spacing: -0.015em; }
.section-title.first { margin-top: 14px; }
.section-title .count, .sec summary .count { margin-left: 6px; font-weight: 500; color: var(--ink-3); }
.status { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; background: var(--line-strong); }
.status-overdue { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.status-due { background: var(--warm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 22%, transparent); }
.status-catchup { background: var(--warm); }
.status-scheduled { background: var(--accent); }
.status-soon { background: transparent; box-shadow: inset 0 0 0 2.5px var(--warm); }
.status-unknown { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-3); }
.status-done { background: var(--ok); }
.status-text-overdue { color: var(--danger); font-weight: 650; }
.status-text-due, .status-text-catchup { color: var(--warm); font-weight: 650; }
.status-text-done { color: var(--ok); }
.health-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

/* U-Zeitstrahl */
.stepper-wrap { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 12px 6px 8px; }
.stepper { display: flex; overflow-x: auto; scrollbar-width: thin; padding: 2px 8px 6px; }
.step { position: relative; flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step.reached::before { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, var(--line))); }
.step-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); box-shadow: 0 0 0 3px var(--surface); transition: transform .14s var(--spring); }
.step:hover .step-node { transform: scale(1.12); }
.step-done .step-node { background: linear-gradient(135deg, #15803d, #0f766e); color: #fff; }
.step-due .step-node, .step-overdue .step-node { background: linear-gradient(135deg, #c2410c, #be123c); color: #fff; animation: pulse 2.2s ease-in-out infinite; }
.step-scheduled .step-node { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.step-soon .step-node { box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 2.5px var(--warm); color: var(--warm); background: var(--surface); }
.step-missed .step-node { opacity: .6; }
.dot-small { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.step .age { font-size: 10.5px; font-weight: 450; color: var(--ink-3); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3px rgb(194 65 12 / 40%); } 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 9px rgb(194 65 12 / 0%); } }

/* Impfpass */
.vax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 8px; }
.vax { display: grid; gap: 5px; align-content: start; padding: 10px 12px; min-height: 70px; text-align: left; border: 0; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-1); transition: transform .14s var(--spring), box-shadow .15s; }
.vax:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.vax .name { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.vax .sub { font-size: 11.5px; color: var(--ink-3); }
.vax.later { background: color-mix(in srgb, var(--surface) 55%, var(--paper)); box-shadow: none; }
.doses { display: flex; gap: 3px; flex-wrap: wrap; }
.doses i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.doses i.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.doses i.next { background: var(--warm); }

/* Noten */
.grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.grade-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 11px 13px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-1); }
.grade-card .name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-card .avg { font-size: 22px; font-weight: 750; letter-spacing: -0.03em; grid-row: span 2; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grade-card .sub { font-size: 12px; color: var(--ink-3); }
.spark { display: block; grid-column: 1 / -1; width: 100%; height: 26px; margin-top: 4px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--accent); }
.quick { margin-bottom: 4px; }
.quick .chip svg { color: var(--accent); }

.sec { margin-top: 8px; }
.sec summary { list-style: none; display: flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.sec summary::-webkit-details-marker { display: none; }
.sec summary svg { transition: transform .15s; }
.sec[open] summary svg { transform: rotate(180deg); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
.indent { padding-left: 18px; }
.area-rows { display: grid; gap: 6px; }

/* Dialoge */
.backdrop { position: fixed; inset: 0; background: rgb(8 11 22 / 46%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 50; overflow-y: auto; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dialog { width: min(520px, 100%); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-3); animation: pop .32s var(--spring) both; }
.dialog-small { width: min(420px, 100%); }
.dialog-head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 8px 18px; }
.dialog-head h2 { font-size: 17px; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.dialog-body { padding: 2px 18px 16px; display: flex; flex-direction: column; gap: 11px; }
.dialog-foot { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--line); }
.detail-line { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); overflow-wrap: anywhere; font-size: 13.5px; }
.detail-line svg { flex: none; margin-top: 1px; color: var(--ink-3); }
.pre { white-space: pre-wrap; margin: 0; font-size: 13.5px; }
.choice { display: flex; flex-direction: column; gap: 3px; }
.sheet-action { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 0 9px; border: 0; background: none; border-radius: 11px; text-align: left; color: inherit; text-decoration: none; font-size: 14px; font-weight: 550; transition: background .12s; }
.sheet-action:hover { background: var(--surface-2); }
.sheet-action.danger { color: var(--danger); }
.sheet-action svg { color: var(--ink-3); flex: none; }
.sheet-action.danger svg { color: var(--danger); }
.title-input { font-size: 19px !important; font-weight: 700; letter-spacing: -0.02em; border: 0 !important; border-bottom: 2px solid var(--line) !important; border-radius: 0 !important; padding-inline: 0 !important; background: transparent !important; box-shadow: none !important; }
.title-input:focus-visible { outline: 0; border-bottom-color: var(--accent) !important; }
.when-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.time-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; }
.more-fields { border-top: 1px solid var(--line); padding-top: 4px; }
.more-fields summary { list-style: none; display: flex; align-items: center; gap: 4px; min-height: 32px; color: var(--accent); font-weight: 650; font-size: 13px; cursor: pointer; }
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields[open] summary svg { transform: rotate(180deg); }
.more-fields .stack { padding-top: 4px; }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 90; width: min(420px, calc(100% - 24px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 13px; box-shadow: var(--shadow-3); font-size: 13.5px; font-weight: 550; animation: pop .3s var(--spring) both; }
.toast-error { background: var(--danger); color: var(--on-danger); }
.confetti { position: fixed; left: 50%; top: 42%; z-index: 95; pointer-events: none; }
.confetti i { position: absolute; width: 9px; height: 5px; border-radius: 2px; animation: burst .95s cubic-bezier(.16, .8, .3, 1) both; }
@keyframes burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)); opacity: 0; } }

/* Lizenzhinweis in der Administration */
.register-card { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; padding: 16px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); }
.register-card h2 { font-size: 16px; margin-bottom: 4px; }
.register-card p { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; max-width: 62ch; }
.register-card .locked-icon { flex: none; }
.license-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); color: inherit; text-decoration: none; font-weight: 600; }
.license-banner > svg { color: var(--accent); flex: none; }
.license-banner > span:nth-child(2) { flex: 1; }
.license-banner.warn { background: var(--danger-soft); }
.license-banner.warn > svg { color: var(--danger); }

/* Lizenzzentrale */
.core-hero { display: grid; gap: 2px; padding: 18px 20px; border-radius: 20px; margin-bottom: 12px; box-shadow: var(--shadow-2); }
.core-hero b { font-size: 34px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 12px rgb(0 0 0 / 22%); }
.core-hero-label, .core-hero-sub { font-size: 13px; font-weight: 550; text-shadow: 0 1px 8px rgb(0 0 0 / 28%); }
@media (min-width: 761px) { .stats.stats-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Nicht freigeschaltetes Modul */
.locked-card { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 28px 20px; margin-top: 10px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); }
.locked-card h2 { font-size: 17px; }
.locked-card p { margin: 0; max-width: 46ch; color: var(--ink-2); }
.locked-icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }

/* Verwaltung */
.tabs { display: flex; gap: 2px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; flex: none; background: var(--surface-2); border-radius: 12px; padding: 3px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 6px 12px; text-decoration: none; color: var(--ink-2); border-radius: 9px; white-space: nowrap; font-size: 13.5px; font-weight: 550; flex: 1; text-align: center; transition: background .15s; }
.tabs a.active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgb(20 24 45 / 18%); }
.notice { background: var(--accent-soft); border-radius: var(--radius-s); padding: 9px 12px; font-size: 13px; }
.notice-warn { background: var(--danger-soft); }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: var(--surface-2); padding: 8px 10px; border-radius: 9px; overflow-wrap: anywhere; user-select: all; }
.qr { display: block; width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 12px; }
details.howto { border-top: 1px solid var(--line); padding: 4px 0; }
details.howto summary { cursor: pointer; font-weight: 600; min-height: 26px; line-height: 26px; }
details.howto ol { margin: 4px 0; padding-left: 20px; font-size: 13px; }

/* Admin */
.admin-body .shell { grid-template-columns: 204px minmax(0, 1fr); }
.admin-body .main { overflow: auto; }
.admin-mobile-tabs { display: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--surface); border-radius: 14px; padding: 10px 13px; box-shadow: var(--shadow-1); }
.stat b { display: block; font-size: 21px; font-weight: 750; line-height: 1.2; letter-spacing: -0.03em; }
.stat span { font-size: 12px; color: var(--ink-3); }
.stat.alert b { color: var(--danger); }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 650; white-space: nowrap; }
th, td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

/* ================================================================ 0.7: Tagesring, Befehlsleiste, Stimmungen */

/* Überblick */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.hero.has-ring .hero-grid { grid-template-columns: minmax(0, 1fr) auto; }
.hero.has-ring .sky-orb { display: none; }
.hero-main { display: grid; gap: 12px; min-width: 0; }
.hero-summary { display: inline-block; margin: 0; padding: 4px 11px; border-radius: 999px; background: rgb(9 14 34 / 34%); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-ring { position: relative; display: grid; place-items: center; animation: rise .9s var(--spring) both; }
.hero-ring::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 10%), transparent 70%); }
.day-ring { display: block; position: relative; overflow: visible; filter: drop-shadow(0 10px 24px rgb(0 0 0 / 22%)); }
.ring-track { fill: rgb(9 14 34 / 34%); stroke: rgb(255 255 255 / 14%); stroke-width: 12; }
.ring-daylight { fill: none; stroke: rgb(255 255 255 / 12%); stroke-width: 12; }
.ring-elapsed { fill: none; stroke: rgb(255 255 255 / 60%); stroke-width: 2.5; stroke-linecap: round; }
.ring-tick { stroke: rgb(255 255 255 / 30%); stroke-width: 1.5; }
.ring-tick.major { stroke: rgb(255 255 255 / 75%); stroke-width: 2; }
.ring-hour { fill: #fff; font-size: 11px; font-weight: 650; opacity: .85; }
.ring-ev { fill: none; stroke: color-mix(in srgb, var(--c) 55%, #fff); stroke-width: 9; stroke-linecap: round; }
.ring-ev.past { opacity: .45; }
.ring-hand { stroke: rgb(255 255 255 / 55%); stroke-width: 2; stroke-linecap: round; }
.ring-sun { fill: #ffe7a0; stroke: #fff6d8; stroke-width: 2; filter: drop-shadow(0 0 7px #ffd06b); }
.ring-sun.moon { fill: #eef0ff; stroke: #fff; filter: drop-shadow(0 0 7px rgb(200 210 255 / 80%)); }
.ring-time { fill: #fff; font-size: 34px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ring-sub { fill: #fff; font-size: 12.5px; font-weight: 600; }
.next-main { min-width: 0; }
.next-card.is-running { border-color: rgb(255 255 255 / 40%); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4ade80; vertical-align: 1px; animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(74 222 128 / 70%); } 100% { box-shadow: 0 0 0 9px rgb(74 222 128 / 0%); } }
.next-progress { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 20%); overflow: hidden; }
.next-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 2px; background: linear-gradient(90deg, #fff, #c7f9e8); }
.dayband { grid-column: 1 / -1; display: grid; gap: 3px; }
.dayband-track { position: relative; height: 10px; border-radius: 5px; background: rgb(255 255 255 / 14%); }
.dayband-track i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: color-mix(in srgb, var(--c) 55%, #fff); }
.dayband-track i.past { opacity: .45; }
.dayband-track b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 8px #fff; }
.dayband-labels { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: #fff; opacity: .85; }
.ws-load { display: block; width: 22px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 22%); overflow: hidden; }
.ws-load i { display: block; height: 100%; width: calc(var(--l) * 100%); border-radius: 2px; background: #fff; }
.due-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-1); color: inherit; text-decoration: none; transition: transform .14s var(--spring); }
.due-line:active { transform: scale(.98); }
.due-line .avatars .avatar { width: 28px; height: 28px; font-size: 12px; }
.due-line .avatars .avatar + .avatar { margin-left: -8px; }
.due-text { flex: 1; min-width: 0; display: grid; }
.due-text strong { font-size: 14px; font-weight: 650; }
.due-text .sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-line > svg { color: var(--ink-3); flex: none; }
.side-card { display: grid; gap: 8px; padding: 12px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); }
.side-card .alert { box-shadow: none; background: var(--surface-2); min-height: 40px; }
.side-title { display: flex; align-items: center; gap: 6px; }
.side-title svg { color: var(--accent); }
.side-title .count { margin-left: auto; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }
.empty-card { display: flex; align-items: center; gap: 14px; }
.illustration { flex: none; }
.il-sun { fill: #fbbf24; }
.il-rays { fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linecap: round; }
.il-hill-back { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.il-hill { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.il-cloud { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.skeleton-list { display: grid; gap: 8px; padding-top: 8px; }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 200% 100%; border-radius: 14px; animation: shimmer 1.3s linear infinite; }
.skeleton-row { height: 56px; }
.skeleton-text { display: inline-block; width: 200px; max-width: 60vw; height: 14px; border-radius: 7px; vertical-align: middle; background: linear-gradient(90deg, rgb(255 255 255 / 14%) 25%, rgb(255 255 255 / 30%) 50%, rgb(255 255 255 / 14%) 75%); background-size: 200% 100%; }
.hero-summary:has(.skeleton-text) { background: none; padding: 0; backdrop-filter: none; }
.skeleton-glass { min-height: 66px; animation: glass-pulse 1.1s ease-in-out infinite alternate; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes glass-pulse { from { opacity: .55; } to { opacity: 1; } }

/* Befehlsleiste */
.palette-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 0 8px 0 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; text-align: left; transition: border-color .15s, background .15s; }
.palette-trigger:hover { border-color: var(--line-strong); background: var(--surface); }
.palette-trigger span { flex: 1; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); color: var(--ink-2); font: 600 11px/1.5 var(--sans); text-align: center; }
.backdrop:has(.dialog-palette) { padding-top: 11vh; }
.dialog-palette { width: min(660px, 100%); overflow: hidden; }
.palette { display: flex; flex-direction: column; max-height: min(72vh, 640px); }
.palette-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: box-shadow .15s; }
.palette-field:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.palette-field > svg { color: var(--accent); flex: none; }
.palette-input { flex: 1; min-height: 34px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 17px !important; font-weight: 500; }
.palette-input:focus-visible { outline: 0; }
.palette-input::-webkit-search-cancel-button { display: none; }
.palette-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px 2px; font-size: 12px; color: var(--ink-3); }
.palette-examples .chip { min-height: 28px; font-size: 12.5px; box-shadow: none; background: var(--surface-2); border-color: transparent; }
.palette:has(.palette-input:not(:placeholder-shown)) .palette-examples { display: none; }
.palette-list { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.palette-group { padding: 12px 10px 4px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); }
.palette-item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 7px 10px; border-radius: 12px; cursor: pointer; }
.palette-item.active { background: var(--accent-soft); }
.palette-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--c, var(--ink-2)); }
.palette-item.is-preview .palette-icon { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 14px -6px var(--accent); }
.palette-item.is-preview .palette-label { font-size: 15.5px; font-weight: 700; }
.palette-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.palette-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-bits { display: flex; flex-wrap: wrap; gap: 4px; }
.palette-bit { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface)); font-size: 12px; font-weight: 600; }
.palette-sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 16px 10px; margin: 0; color: var(--ink-3); }
.palette-foot { display: flex; gap: 18px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.palette-foot kbd { margin-right: 3px; }
.search-view .page { padding-top: 10px; }
.page > h1.search-title { display: block; font-size: 22px; margin: 2px 2px 12px; }
.search-view .palette { max-height: none; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-2); overflow: hidden; }

/* Termin-Details */
.detail-hero { --c: var(--accent); padding: 12px 12px 16px 18px; border-radius: 22px 22px 0 0; background: linear-gradient(165deg, color-mix(in srgb, var(--c) 26%, var(--surface)), color-mix(in srgb, var(--c) 6%, var(--surface)) 75%); }
.dialog-small:has(.detail-hero) { position: relative; }
.dialog-small:has(.detail-hero)::before { position: absolute; top: 7px; left: calc(50% - 19px); margin: 0; z-index: 1; }
.detail-hero + .dialog-body { padding-top: 14px; }
.detail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.detail-hero .area-badge { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.detail-count { padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 700; box-shadow: var(--shadow-1); }
.detail-count.live { background: var(--warm); color: var(--on-warm); }
.detail-hero h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.detail-when { margin: 5px 0 0; color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.detail-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.person-tag { --c: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 550; }
.person-tag:has(.avatar) { padding-left: 3px; }
.quick-hint { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 11px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; animation: pop .3s var(--spring) both; }
.quick-hint > svg { color: var(--accent); flex: none; }
.quick-hint > span { flex: 1; min-width: 0; }

/* Seitenleiste und Seitenköpfe */
.side-filters > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-s); color: var(--ink-2); font-weight: 600; cursor: pointer; }
.side-filters > summary::-webkit-details-marker { display: none; }
.side-filters > summary:hover { background: var(--surface-2); }
.side-filters > summary > svg:last-child { transition: transform .15s; }
.side-filters[open] > summary > svg:last-child { transform: rotate(180deg); }
.side-filters > .stack { padding-top: 6px; }
.nav a.active { box-shadow: inset 3px 0 0 var(--accent); }
.page-head { padding: 6px 2px 14px; }
.page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; }
.page-head h1::after { content: ""; display: block; width: 38px; height: 4px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.page-head p { margin: 8px 0 0; color: var(--ink-3); font-size: 13.5px; }
.segmented button[aria-checked=true] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 3px var(--shade-strong); }
.design-card { display: grid; gap: 12px; padding: 4px 16px 16px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-1); }
.design-card .section-title { gap: 6px; align-items: center; }
.design-card .section-title svg { color: var(--accent); }
/* Selbstkauf: Widerrufsbelehrung zum Aufklappen, Texte etwas kleiner. */
details.design-card summary { cursor: pointer; padding-top: 12px; }
details.design-card h3 { font-size: 14px; margin: 4px 0 0; }
details.design-card p, details.design-card ul { margin: 0; font-size: 13px; }
/* Pflichtangaben unmittelbar über „zahlungspflichtig bestellen“ (§ 312j BGB): hervorgehoben. */
.order-summary { border: 2px solid var(--accent); padding-top: 4px; }
.order-summary p { margin: 0; }
.order-price { font-size: 18px; }
.order-follow { font-size: 15px; color: var(--accent); }
/* „Verträge hier kündigen“ auf jeder Seite (§ 312k BGB), auch vor der Anmeldung. */
.legal-foot { flex: none; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 6px 12px; font-size: 12.5px; border-top: 1px solid var(--line); background: var(--surface); }
.legal-foot a { color: var(--ink-2); }
.login .legal-foot { position: absolute; left: 0; right: 0; bottom: 0; background: transparent; border: 0; }
.login .legal-foot a { color: inherit; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; font-weight: 600; transition: border-color .15s, box-shadow .15s, transform .12s; }
.swatch:active { transform: scale(.96); }
.swatch-dot { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); color: #fff; }
.swatch[aria-checked=false] .swatch-dot svg { opacity: 0; }
.swatch[aria-checked=true] { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }

/* Woche und Tag: Termine als Blöcke mit Zeitzeile */
.tg-col .ev { padding: 3px 7px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, var(--surface)), color-mix(in srgb, var(--c) 18%, var(--surface))); box-shadow: inset 3px 0 0 var(--c), 0 1px 3px var(--shade); font-weight: 650; }
.tg-col .ev .t { display: block; margin: 0; font-size: 10.5px; font-weight: 550; }
.tg-col .ev.short { padding-block: 1px; line-height: 13px; }
.tg-col .ev.short .t { display: inline; margin-right: 4px; }
.tg-col .ev:hover { box-shadow: inset 3px 0 0 var(--c), var(--shadow-2); z-index: 4; }
.nowline::after { content: attr(data-time); position: absolute; left: 6px; top: -9px; padding: 1px 6px; border-radius: 6px; background: var(--warm); color: var(--on-warm); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* Übergänge zwischen den Bereichen (View Transitions, wo vorhanden) */
.tabbar { view-transition-name: tabbar; }
.sidebar { view-transition-name: sidebar; }
::view-transition-old(root) { animation: vt-out .16s ease-in both; }
::view-transition-new(root) { animation: vt-in .28s var(--ease) both; }
::view-transition-group(tab-pill) { animation-duration: .34s; animation-timing-function: var(--spring); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Tablet: schmale Symbolleiste statt breiter Seitenleiste */
.rail-only { display: none; }
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px) {
  .shell { grid-template-columns: 56px minmax(0, 1fr); }
  .admin-body .shell { grid-template-columns: 204px minmax(0, 1fr); }
  body:not(.admin-body) .sidebar { padding: 10px 8px; align-items: center; overflow: hidden; }
  body:not(.admin-body) .sidebar .brand { padding: 2px; font-size: 0; }
  body:not(.admin-body) .sidebar > .btn-primary { width: 40px; padding: 0; font-size: 0; gap: 0; }
  body:not(.admin-body) .nav a { width: 40px; min-height: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  body:not(.admin-body) .sidebar > .mini, body:not(.admin-body) .sidebar > .stack { display: none; }
  .rail-only { display: inline-flex; }
  body:not(.admin-body) .palette-trigger { width: 40px; padding: 0; justify-content: center; }
  body:not(.admin-body) .palette-trigger span, body:not(.admin-body) .palette-trigger kbd, body:not(.admin-body) .side-filters { display: none; }
  .searchbox { width: 92px; }
  .toolbar h1 { flex: none; }
}

/* Aktionen in breiten Tabellen bleiben ohne seitliches Scrollen erreichbar */
td:last-child:has(.btn) { position: sticky; right: 0; background: var(--surface); box-shadow: -8px 0 8px -8px rgb(20 24 45 / 16%); }

/* Handy: eigene App-Ansicht */
@media (max-width: 760px), (max-height: 500px) {
  :root { --hour: 44px; }
  body { font-size: 15px; }
  .shell, .admin-body .shell { display: block; height: auto; }
  .sidebar { display: none; }
  .main { height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top); }
  .view { padding-bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom)); }
  .main:has(> .legal-foot) .view { padding-bottom: 8px; }
  .main > .legal-foot { padding-bottom: calc(var(--tabbar) + 26px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--tabbar); background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border-radius: 22px; box-shadow: var(--shadow-3), inset 0 0 0 1px rgb(255 255 255 / 12%); z-index: 30; }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; background: none; text-decoration: none; color: var(--ink-2); font-size: 10.5px; font-weight: 550; transition: color .15s, transform .12s; }
  .tabbar a:active { transform: scale(.92); }
  .tabbar a.active { color: var(--accent); font-weight: 700; }
  .tabbar a.active svg { transform: translateY(-1px) scale(1.08); }
  .tabbar svg { transition: transform .18s var(--spring); }
  .tabbar .add span { width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--accent) 75%, transparent); transform: translateY(-9px); transition: transform .14s var(--spring); }
  .tabbar .add:active span { transform: translateY(-9px) scale(.92); }
  .toolbar { padding: 0 4px 0 8px; gap: 2px; }
  .toolbar .icon-btn { width: 34px; height: 36px; }
  .toolbar h1 { font-size: 16.5px; flex: 1; }
  .toolbar h1 small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tg-col .ev .t { display: none; }
  .searchbox, .toolbar .segmented { display: none; }
  .admin-body .main { height: 100vh; height: 100dvh; }
  .admin-mobile-tabs { display: flex; margin: 0; border-radius: 0; background: var(--surface); padding: 6px; }
  .admin-mobile-tabs a { flex: none; }
  #toasts { bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom)); }

  .mobile-month { display: flex; flex-direction: column; height: 100%; }
  .mm-top { flex: none; background: var(--surface); border-radius: 0 0 20px 20px; box-shadow: var(--shadow-2); position: relative; z-index: 3; }
  .mm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 4px; }
  .mm-grid .wd { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--ink-3); padding: 3px 0 0; }
  .mm-day { border: 0; background: none; height: 38px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 0; min-width: 0; }
  .mm-day .n { width: 27px; height: 27px; line-height: 27px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-align: center; transition: background .15s, transform .14s var(--spring); }
  .mm-day:active .n { transform: scale(.88); }
  .mm-day.other { color: var(--ink-3); }
  .mm-day.selected .n { background: var(--accent-soft); font-weight: 750; }
  .mm-day.today .n { color: var(--accent); font-weight: 750; }
  .mm-day.today.selected .n { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
  .mm-dots { display: flex; gap: 2px; height: 5px; }
  .mm-dots .dot { width: 4px; height: 4px; }
  .mm-handle { display: flex; width: 100%; justify-content: center; align-items: center; height: 24px; border: 0; background: none; color: var(--ink-3); }
  .mm-handle svg { transition: transform .18s; }
  .mm-handle[aria-expanded=true] svg { transform: rotate(180deg); }
  .mm-list { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 10px 12px; }
  .mm-list .day-head { background: transparent; position: static; }

  .hero { padding: 12px 14px 12px; border-radius: 0 0 22px 22px; gap: 9px; }
  .hero h1 { font-size: 21px; }
  .hero-date { font-size: 13px; }
  .hero-slots { gap: 9px; min-height: 126px; }
  .next-card { padding: 9px 10px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .next-card .area-badge { width: 38px; height: 38px; }
  .next-title { font-size: 15px; }
  .next-count { font-size: 12px; padding: 5px 9px; }
  .overview { gap: 8px; }
  .ov-body { padding: 0 10px; gap: 8px; }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-side { display: none; }
  .item { grid-template-columns: 40px 32px minmax(0, 1fr) auto; gap: 9px; min-height: 52px; padding: 6px 10px 6px 9px; }
  .item.dated { grid-template-columns: 66px 32px minmax(0, 1fr) auto; }
  .person-tabs a { padding: 9px 8px; gap: 4px; font-size: 13px; }
  .person-tabs a:not(.active) svg { display: none; }
  .item .area-badge { width: 32px; height: 32px; border-radius: 10px; }
  .agenda { padding: 4px 10px 12px; }
  .year { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; }
  .ym { padding: 8px; }
  .page { padding: 8px 10px 16px; }
  .page > h1 { display: none; }
  .tabs a { padding: 6px 8px; }
  .tg-head, .tg-allday, .tg-body { grid-template-columns: 36px repeat(var(--days), minmax(0, 1fr)); }
  .tg-col .ev { font-size: 11px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .when-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .members { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .member { padding: 10px 12px; gap: 6px; }
  .person-hero { padding: 8px 8px 0; }
  .vax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .backdrop { padding: 0; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dialog { width: 100%; min-height: 100%; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: sheet-up .24s var(--spring) both; }
  .dialog-head { position: sticky; top: 0; background: var(--surface); z-index: 2; box-shadow: 0 1px 0 var(--line); padding-block: 6px; margin-bottom: 8px; }
  .backdrop:has(.dialog-small) { background: rgb(8 11 22 / 46%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); align-items: flex-end; }
  .dialog-small { min-height: 0; max-height: 86dvh; overflow-y: auto; border-radius: 24px 24px 0 0; box-shadow: var(--shadow-3); }
  .dialog-small::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 8px auto 0; }
  .dialog-small .dialog-head { position: static; box-shadow: none; margin-bottom: 0; padding-block: 2px; }
  input, select, textarea { font-size: 16px !important; }
  input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], select { min-height: 40px; }
}

/* Handy quer: Kalender und Liste nebeneinander */
@media (max-height: 500px) {
  .mobile-month { flex-direction: row; }
  .mm-top { width: 50%; overflow-y: auto; border-radius: 0 20px 20px 0; flex: none; }
  .mm-day { height: 32px; }
  .mm-day .n { width: 23px; height: 23px; line-height: 23px; font-size: 12.5px; }
  .month { min-height: 0; }
}


/* Handy: Ergänzungen für 0.7 */
@media (max-width: 760px), (max-height: 500px) {
  .tabbar .tab-pill { display: grid; place-items: center; width: 54px; height: 30px; border-radius: 16px; transition: background .2s; }
  .tabbar a.active .tab-pill { background: var(--accent-soft); view-transition-name: tab-pill; }
  .tabbar a.active svg { transform: none; }
  .hero-summary { font-size: 12.5px; }
  .page-head { padding: 4px 2px 10px; }
  .page-head h1 { font-size: 25px; }
  .dialog-palette { border-radius: 0; }
  .backdrop:has(.dialog-palette) { padding-top: 0; }
  .palette { max-height: none; min-height: 100dvh; }
  .palette-input { font-size: 16px !important; }
  .search-view .palette { min-height: 0; }
  .detail-hero { border-radius: 24px 24px 0 0; }
}

@keyframes sheet-up { from { transform: translateY(36px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Auf Touchscreens bliebe die Hervorhebung nach dem Tippen sonst stehen. */
@media (hover: none) {
  .item:hover, .alert:hover, .member:hover, .vax:hover { transform: none; box-shadow: var(--shadow-1); }
  .list-row:hover, .sheet-action:hover, .nav a:hover, .icon-btn:hover { background: none; }
  .btn:not(.btn-primary):hover { background: var(--surface); }
}