@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 650; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
p { margin: 0; }
a { color: inherit; }
svg.lucide { width: 1.25em; height: 1.25em; stroke-width: 2; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Modulfarben */
[data-mod="heute"] { --m: var(--heute); --m-soft: var(--heute-soft); --m-ink: var(--heute-ink); }
[data-mod="kalender"] { --m: var(--kalender); --m-soft: var(--kalender-soft); --m-ink: var(--kalender-ink); }
[data-mod="patienten"] { --m: var(--patienten); --m-soft: var(--patienten-soft); --m-ink: var(--patienten-ink); }
[data-mod="rechnungen"] { --m: var(--rechnungen); --m-soft: var(--rechnungen-soft); --m-ink: var(--rechnungen-ink); }
[data-mod="anfragen"] { --m: var(--anfragen); --m-soft: var(--anfragen-soft); --m-ink: var(--anfragen-ink); }
[data-mod="einstellungen"] { --m: var(--einstellungen); --m-soft: var(--einstellungen-soft); --m-ink: var(--einstellungen-ink); }

/* ---------- Gerüst ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.side {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border-right: var(--rule-hair);
}
.brand { display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-xs); }
.brand-mark {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-ink); color: var(--color-paper);
}
.brand b { font-family: var(--font-display); font-size: var(--text-lg); display: block; line-height: 1.1; }
.brand small { color: var(--color-muted); font-size: var(--text-xs); }

.nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
.nav a {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-md);
  text-decoration: none; font-weight: 600; color: var(--color-ink-2);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav a .tile {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--m-soft); color: var(--m-ink);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav a:hover { background: var(--color-sunken); }
.nav a[aria-current="page"] { background: var(--m-soft); color: var(--m-ink); }
.nav a[aria-current="page"] .tile { background: var(--m); color: var(--color-surface); }
.nav .badge { margin-left: auto; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2xs); }
.side-foot a { font-size: var(--text-sm); }

main { min-width: 0; }
.view-head {
  background: var(--m-soft);
  border-bottom: 1px solid color-mix(in oklch, var(--m) 22%, transparent);
  padding: var(--space-xl) var(--space-2xl) var(--space-lg);
}
.view-head-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.view-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--m); color: var(--color-surface);
}
.view-icon svg.lucide { width: 28px; height: 28px; }
.view-head h1 { color: var(--m-ink); }
.view-head .sub { color: var(--color-ink-2); margin-top: var(--space-2xs); }
.view-actions { margin-left: auto; display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.view-body { padding: var(--space-xl) var(--space-2xl) var(--space-3xl); max-width: 1280px; }

/* ---------- Bausteine ---------- */
.btn {
  --b: var(--color-surface); --b-ink: var(--color-ink); --b-line: var(--color-line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-md);
  border-radius: var(--radius-md); border: 1px solid var(--b-line);
  background: var(--b); color: var(--b-ink);
  font: inherit; font-weight: 650; white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-sunken); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; opacity: 0.75; }
.btn.primary { --b: var(--m, var(--color-ink)); --b-ink: var(--color-surface); --b-line: transparent; }
.btn.primary:hover { background: color-mix(in oklch, var(--m, var(--color-ink)) 86%, black); }
.btn.soft { --b: var(--m-soft); --b-ink: var(--m-ink); --b-line: transparent; }
.btn.soft:hover { background: color-mix(in oklch, var(--m-soft) 80%, var(--m) 20%); }
.btn.ghost { --b: transparent; --b-line: transparent; }
.btn.danger { --b: var(--danger-soft); --b-ink: var(--danger-ink); --b-line: transparent; }
.btn.danger:hover { background: color-mix(in oklch, var(--danger-soft) 80%, var(--danger) 20%); }
.btn.ok { --b: var(--ok); --b-ink: var(--color-surface); --b-line: transparent; }
.btn.ok:hover { background: color-mix(in oklch, var(--ok) 86%, black); }
.btn.small { min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.btn.icon-only { width: 44px; padding: 0; }
.btn.small.icon-only { width: 36px; }

.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--m); color: var(--color-surface);
  font-size: var(--text-xs); font-weight: 700;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
  background: var(--neutral-soft); color: var(--color-ink-2);
}
.chip svg.lucide { width: 14px; height: 14px; }
.chip.entwurf { background: var(--neutral-soft); color: var(--color-ink-2); }
.chip.offen { background: var(--warn-soft); color: var(--warn-ink); }
.chip.ueberfaellig { background: var(--danger-soft); color: var(--danger-ink); }
.chip.bezahlt, .chip.erledigt, .chip.uebernommen { background: var(--ok-soft); color: var(--patienten-ink); }
.chip.storniert, .chip.abgesagt, .chip.abgelehnt { background: var(--danger-soft); color: var(--danger-ink); }
.chip.bestaetigt { background: var(--kalender-soft); color: var(--kalender-ink); }
.chip.angefragt, .chip.eingereicht { background: var(--anfragen-soft); color: var(--anfragen-ink); }

.card {
  background: var(--color-surface); border: var(--rule-hair);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.card-pad { padding: var(--space-lg); }
.card-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair); }
.card-head h2, .card-head h3 { font-size: var(--text-lg); }
.card-head .spacer { flex: 1; }
.mini-icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--m-soft); color: var(--m-ink);
}

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg); color: var(--color-muted);
}
.empty .mini-icon { width: 56px; height: 56px; border-radius: 16px; }
.empty .mini-icon svg.lucide { width: 28px; height: 28px; }
.empty b { color: var(--color-ink); font-size: var(--text-lg); font-family: var(--font-display); }

.muted { color: var(--color-muted); }
.small-text { font-size: var(--text-sm); }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-lg); }

/* Listen */
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: var(--rule-hair); }
.item {
  display: flex; align-items: center; gap: var(--space-md);
  width: 100%; padding: var(--space-md) var(--space-lg);
  background: none; border: 0; font: inherit; color: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
button.item:hover, a.item:hover { background: var(--color-sunken); }
.item .grow { flex: 1; min-width: 0; }
.item .title { font-weight: 650; overflow-wrap: anywhere; }
.item .meta { color: var(--color-muted); font-size: var(--text-sm); }
.time-box {
  min-width: 64px; text-align: center; padding: 6px 8px; border-radius: 10px;
  background: var(--kalender-soft); color: var(--kalender-ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm);
  background: var(--patienten-soft); color: var(--patienten-ink);
}

/* Formulare */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .label { font-weight: 650; font-size: var(--text-sm); color: var(--color-ink-2); }
.field .hint { font-size: var(--text-xs); color: var(--color-muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 96px; resize: vertical; }
select.input, .field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field input[type="date"], .field input[type="time"], .input[type="date"], .input[type="time"] { font-variant-numeric: tabular-nums; }
.field input::-webkit-calendar-picker-indicator, .input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--color-muted); opacity: 0.8; }
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.input:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--color-sunken); color: var(--color-muted); }
.field.error input, .field.error select { border-color: var(--danger); }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.form-grid .s1 { grid-column: span 1; } .form-grid .s2 { grid-column: span 2; } .form-grid .s3 { grid-column: span 3; }
.form-grid .s4 { grid-column: span 4; } .form-grid .s6 { grid-column: span 6; }
.check { display: flex; gap: var(--space-sm); align-items: flex-start; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--m, var(--color-ink)); flex: none; }

.search {
  position: relative; flex: 1; min-width: 220px; max-width: 460px;
}
.search svg.lucide { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-muted); }
.search input { padding-left: 42px; }

.tabs { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong); background: var(--color-surface);
  font: inherit; font-weight: 650; font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tabs button:hover { background: var(--color-sunken); }
.tabs button[aria-pressed="true"] { background: var(--m); border-color: var(--m); color: var(--color-surface); }

/* Hinweise */
.note {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  background: var(--warn-soft); color: var(--warn-ink); font-size: var(--text-sm); font-weight: 600;
}
.note.info { background: var(--m-soft); color: var(--m-ink); }
.note.danger { background: var(--danger-soft); color: var(--danger-ink); }

/* ---------- Heute ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.kpi {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-lg); border-radius: var(--radius-lg);
  background: var(--color-surface); border: var(--rule-hair); border-top: 5px solid var(--m);
  box-shadow: var(--shadow-card);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out);
}
a.kpi:hover { transform: translateY(-2px); }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--m-ink); font-weight: 650; }
.kpi .kpi-num { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { color: var(--color-muted); font-size: var(--text-sm); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }

/* ---------- Kalender ---------- */
.cal-bar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.cal-bar h2 { font-size: var(--text-lg); margin-right: auto; }
.cal-legend { display: flex; gap: var(--space-md); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-md); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: var(--rule-hair); background: var(--color-surface); box-shadow: var(--shadow-card); }
.cal { --hour: 64px; display: grid; grid-template-columns: 56px repeat(var(--days, 6), minmax(130px, 1fr)); min-width: 760px; }
.cal-day-head {
  position: sticky; top: 0; z-index: 2;
  padding: var(--space-sm); text-align: center; border-bottom: var(--rule-hair); border-left: var(--rule-hair);
  background: var(--color-surface);
}
.cal-day-head b { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.cal-day-head small { color: var(--color-muted); font-weight: 600; }
.cal-day-head.is-today { background: var(--kalender-soft); color: var(--kalender-ink); }
.cal-day-head.is-today small { color: var(--kalender-ink); }
.cal-corner { border-bottom: var(--rule-hair); background: var(--color-surface); position: sticky; top: 0; z-index: 2; }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: 8px; font-size: var(--text-xs); color: var(--color-muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.cal-col { position: relative; border-left: var(--rule-hair); }
.cal-col .slot {
  display: block; width: 100%; height: calc(var(--hour) / 2);
  border: 0; border-top: 1px dashed transparent; background: none; padding: 0; cursor: pointer;
}
.cal-col .slot:nth-child(odd) { border-top: 1px solid var(--color-line); }
.cal-col .slot:hover { background: var(--kalender-soft); }
.cal-col .slot.closed { background: repeating-linear-gradient(135deg, var(--color-sunken) 0 6px, transparent 6px 12px); }
.cal-col .slot.closed:hover { background: var(--kalender-soft); }
.ev {
  position: absolute; left: 4px; right: 4px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  padding: 6px 8px; border-radius: 9px; border: 0; text-align: left; font: inherit; cursor: pointer;
  background: var(--kalender-soft); color: var(--kalender-ink);
  border-left: 5px solid var(--kalender);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ev:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.ev b { font-size: var(--text-sm); line-height: 1.25; overflow-wrap: anywhere; }
.ev small { font-size: var(--text-xs); line-height: 1.3; opacity: 0.9; display: flex; gap: 4px; align-items: center; }
.ev small svg.lucide { width: 13px; height: 13px; }
.ev.angefragt { background: var(--anfragen-soft); color: var(--anfragen-ink); border-left-color: var(--anfragen); outline: 2px dashed color-mix(in oklch, var(--anfragen) 50%, transparent); outline-offset: -2px; }
.ev.erledigt { background: var(--patienten-soft); color: var(--patienten-ink); border-left-color: var(--patienten); }
.ev.abgesagt { background: var(--color-sunken); color: var(--color-muted); border-left-color: var(--color-line-strong); text-decoration: line-through; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 1; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

/* ---------- Patienten ---------- */
.split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.split .list-card { position: sticky; top: var(--space-md); max-height: calc(100dvh - 2 * var(--space-md)); overflow: auto; }
.item[aria-current="true"] { background: var(--patienten-soft); }
.detail-head { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.detail-head .avatar { width: 64px; height: 64px; font-size: var(--text-lg); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-md); }
.fact { display: flex; gap: var(--space-sm); align-items: flex-start; min-width: 0; }
.fact .mini-icon { flex: none; }
.fact span { display: block; font-size: var(--text-xs); color: var(--color-muted); font-weight: 600; }
.fact b { font-weight: 600; overflow-wrap: break-word; }

/* Anamnese-Ansicht */
.anam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); }
.anam dt { font-size: var(--text-xs); color: var(--color-muted); font-weight: 700; text-transform: none; }
.anam dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.anam .wide { grid-column: 1 / -1; }

/* ---------- Rechnungen ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--text-xs); color: var(--color-muted); font-weight: 700; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair); white-space: nowrap; }
.table td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; }
.table tbody tr.click { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr.click:hover { background: var(--color-sunken); }
.pos-table td { padding: 6px; }
.pos-table input { min-height: 40px; padding: 6px 8px; }
.pos-table .w-date { width: 150px; } .pos-table .w-z { width: 300px; min-width: 220px; } .pos-table .w-n { width: 72px; } .pos-table .w-b { width: 120px; }
.pos-warn { color: var(--danger-ink); font-size: var(--text-xs); font-weight: 650; display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.pos-warn svg.lucide { width: 14px; height: 14px; }
.sum-row { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair); }
.sum-row b { font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }

.picker { position: relative; }
.picker-pop {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: min(560px, 90vw); max-height: 320px; overflow: auto;
  background: var(--color-surface); border: var(--rule-hair); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.picker-pop button { display: flex; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.picker-pop button:hover, .picker-pop button.is-active { background: var(--rechnungen-soft); }
.picker-pop .z { min-width: 54px; font-weight: 700; color: var(--rechnungen-ink); font-variant-numeric: tabular-nums; }
.picker-pop .p { margin-left: auto; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }

/* Schnell hinzufügen */
.quick { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.quick button {
  display: inline-flex; align-items: center; gap: var(--space-xs); text-align: left;
  min-height: 44px; padding: 6px 12px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--rechnungen) 30%, transparent); background: var(--color-surface);
  font: inherit; font-size: var(--text-sm); color: var(--color-ink); cursor: pointer; max-width: 100%;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quick button:hover { background: var(--rechnungen-soft); border-color: var(--rechnungen); }
.quick button:active { transform: translateY(1px); }
.quick-pack svg.lucide { color: var(--rechnungen-ink); }
.quick-pack span { display: flex; flex-direction: column; min-width: 0; }
.quick-pack small, .quick-z small { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.quick-z b { min-width: 36px; padding: 2px 6px; border-radius: 6px; background: var(--rechnungen-soft); color: var(--rechnungen-ink); text-align: center; font-variant-numeric: tabular-nums; }
.quick-z span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Dialog ---------- */
dialog {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-pop);
}
dialog::backdrop { background: var(--color-overlay); }
dialog[open] { animation: pop var(--dur-base) var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.dlg-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-md); background: var(--m-soft); }
.dlg-head h2 { color: var(--m-ink); font-size: var(--text-xl); flex: 1; }
.dlg-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); overflow: auto; }
.dlg-foot { display: flex; gap: var(--space-xs); justify-content: flex-end; flex-wrap: wrap; padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: var(--rule-hair); }
.dlg-foot .left { margin-right: auto; }

/* Toast */
.toast-host { position: fixed; z-index: 100; left: 50%; bottom: var(--space-lg); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-pop); font-weight: 600;
  animation: pop var(--dur-base) var(--ease-out);
}
.toast.error { background: var(--danger); }
.toast button { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 4px; }

/* Mobile Leiste */
.tabbar { display: none; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .split .list-card { position: static; max-height: 420px; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .view-head { padding: var(--space-lg) var(--space-md) var(--space-md); }
  .view-actions { margin-left: 0; width: 100%; }
  .view-body { padding: var(--space-lg) var(--space-md) 112px; }
  .anam { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi { padding: var(--space-md); min-width: 0; }
  .kpi .kpi-num { font-size: var(--text-2xl); overflow-wrap: anywhere; }
  .form-grid > * { grid-column: 1 / -1 !important; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--color-surface); border-top: var(--rule-hair);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; text-decoration: none; font-size: 11px; font-weight: 700; color: var(--color-muted); white-space: nowrap; position: relative; }
  .tabbar a .tile { width: 40px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
  .tabbar a[aria-current="page"] { color: var(--m-ink); }
  .tabbar a[aria-current="page"] .tile { background: var(--m); color: var(--color-surface); }
  .tabbar .badge { position: absolute; top: -2px; right: 10%; height: 18px; min-width: 18px; padding: 0 5px; font-size: 10px; }
  .table.resp thead { display: none; }
  .table.resp tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair); }
  .table.resp td { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
@media print {
  .side, .tabbar, .view-actions, .toast-host { display: none !important; }
}

/* Eulen-Logo statt Symbol */
.brand-mark.logo, .pub-mark.logo { background: var(--brand-soft); padding: 4px; }
.logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }