/* praxis-einfach: gemeinsames Stylesheet (Design uebernommen von kita-einfach,
   Farben kommen als CSS-Variablen aus themes.js) */

/* Schriften lokal eingebettet (kein Nachladen von Google Fonts noetig --
   passend zum Anspruch "komplett lokal, kein Internet noetig", siehe README).
   Nur der lateinische Zeichensatz (reicht fuer Deutsch inkl. Umlaute/ß). */
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nunito-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/nunito-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/nunito-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/quicksand-latin.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/quicksand-latin.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/quicksand-latin.woff2') format('woff2'); }

/* Sanfte Uebergaenge zwischen den Seiten (Kalender/Patient:innen/...), da die
   App mehrseitig (kein SPA-Routing) ist -- die Cross-Document View Transition
   API blendet zwischen den vollen Seitenwechseln sanft ueber, ganz ohne JS. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

:root {
    --bg: #F6F4F1; --surface: #FFFFFF; --surface-alt: #EBF1EC;
    --ink: #1F2A24; --ink-muted: #5B6B62;
    --primary: #2F6F63; --primary-dark: #234F46; --primary-tint: #E4EFEB;
    --accent: #D98F2B; --accent-tint: #FBEEDA;
    --danger: #B3462C; --danger-tint: #F6E4DE;
    --success: #3E8E63; --success-tint: #E3F1E8;
    --border: #DCE3DD; --radius: 10px;
    --shadow: 0 1px 2px rgba(31,42,36,0.04), 0 4px 14px rgba(31,42,36,0.05);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: 'Nunito Sans', -apple-system, sans-serif; background: var(--bg); color: var(--ink); margin: 0; line-height: 1.5; }
.app { max-width: 1480px; margin: 0 auto; padding: 0 24px 64px; }

/* ---------- Kopfzeile: zweigeteilt -- oben getoente Marke (Logo, Datum,
   Design/Abmelden), darunter die Seiten-Reiter auf weissem Grund. Aktive
   Seite wird durch einen orangenen Balken unter dem Reiter markiert. ---------- */
.topbar { border-radius: var(--radius); margin: 20px 0 26px; box-shadow: var(--shadow); overflow: hidden; }
.topbar-marke {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 14px; padding: 14px 22px;
    background: var(--primary);
}
.brand { position: relative; z-index: 1; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; color: #fff; }
.brand-mark { width: 34px; height: 34px; background: rgba(255,255,255,0.2); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; flex-shrink: 0; }
.topbar-kontext { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar-datum { font-size: 0.82rem; color: rgba(255,255,255,0.78); white-space: nowrap; }
.topbar-icon-btn { width: 34px; height: 34px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.topbar-icon-btn:hover { background: rgba(255,255,255,0.24); }
/* Das Design-Dropdown ist ein natives <select>, aber optisch nur ein
   Zahnrad-Icon: das (unsichtbare) select liegt deckungsgleich ueber dem
   Icon und faengt den Klick ab, das Icon selbst ist rein dekorativ. */
.topbar-thema-wrapper { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.topbar-thema-wrapper .topbar-icon-btn { position: absolute; inset: 0; pointer-events: none; }
.topbar-thema-select { position: absolute; inset: 0; opacity: 0; border: none; cursor: pointer; min-width: 0; }
.topbar-thema-select option { color: var(--ink); background: var(--surface); }

.topbar-reiter { position: relative; display: flex; align-items: center; gap: 2px; background: var(--surface); padding: 0 18px; overflow-x: auto; }
.topbar-reiter .nav-link { font-size: 0.86rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; padding: 13px 14px; white-space: nowrap; border-bottom: 3px solid transparent; }
.topbar-reiter .nav-link:hover { color: var(--ink); }
.topbar-reiter .nav-link.active { color: var(--primary-dark); border-bottom-color: var(--accent); }

/* ---------- Karten & Typografie ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin-bottom: 22px; transition: box-shadow 0.15s ease; }
.card:hover { box-shadow: 0 2px 4px rgba(31,42,36,0.06), 0 8px 22px rgba(31,42,36,0.08); }
h1, h2, h3, .seiten-titel { text-wrap: balance; }
h2 { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 14px; color: var(--primary-dark); }
h3 { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.95rem; margin: 0 0 10px; color: var(--primary-dark); }
.seiten-titel { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 1.4rem; margin: 0 0 20px; color: var(--primary-dark); }
.hint { font-size: 0.78rem; color: var(--ink-muted); }
p { text-wrap: pretty; }
/* Fuer Zahlen/Daten/Codes: gleiche Schrift wie ueberall, aber mit
   gleich breiten Ziffern (tabular-nums) fuer saubere Tabellenausrichtung --
   bewusst KEINE eigene Monospace-Schrift mehr (wirkte im Vergleich pixelig/breit). */
.mono { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Formulare ---------- */
.form-grid { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; font-weight: 500; color: var(--ink-muted); }
/* Checkbox-Zeilen haben (anders als Beschriftung+Feld gestapelt) nur eine
   Zeile Inhalt -- damit sie trotzdem auf Hoehe der Eingabefelder sitzen,
   robust ueber align-self/padding loesen statt ueber fest einprogrammierte
   Pixelwerte pro Formular (die bei jeder Groessenaenderung wieder brechen). */
label.inline { flex-direction: row; align-items: center; gap: 7px; align-self: end; padding-bottom: 6px; }
input, select, textarea { font-family: inherit; font-size: 0.8rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink); min-width: 100px; }
textarea { min-height: 60px; max-height: 50vh; resize: vertical; field-sizing: content; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
/* Erst nach Verlassen des Feldes als fehlerhaft markieren (:user-invalid),
   nicht schon waehrend des ersten Tippens wie bei :invalid. */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); }
/* Formulare mit mehreren aehnlich kurzen Feldern (Sitzung erfassen, Terminserie
   anlegen): Flex-Wrap statt Grid, damit kurze Felder (Wochentag, Uhrzeit,
   Dauer, Anzahl) nur so breit wie noetig sind und eng an den Nachbarfeldern
   ranruecken, statt eine ganze (gleich breite) Spalte zu verschwenden. Der
   Speichern-Button bekommt trotzdem eine eigene volle Zeile unten -- immer an
   derselben Stelle, statt irgendwo in der letzten (halb leeren) Feld-Zeile
   zu haengen. */
.terminform { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.terminform .aktion { flex: 1 0 100%; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.terminform label.kurz { max-width: 100px; }
/* Kleine Zwischenueberschrift, um lange Formulare (z.B. Patient-Stammdaten) in
   erkennbare Abschnitte zu gliedern, statt alle Felder undifferenziert
   hintereinanderweg zu zeigen. */
.form-abschnitt-titel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin: 20px 0 8px; }
.form-abschnitt-titel:first-child { margin-top: 0; }
/* Formular-Zonen (Sitzung/Terminserie/Antrag/Posten erfassen) optisch von der
   zugehoerigen Tabelle abheben -- getoente Flaeche in der bestehenden
   Hover-/Segment-Farbe (var(--surface-alt)), keine neue Farbe eingefuehrt. */
.erfassung-panel { background: var(--surface-alt); border-radius: 8px; padding: 14px 16px 16px; }
.erfassung-panel .kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 10px; }
input[type="checkbox"] { min-width: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.datum-kompakt { min-width: 0; width: 132px; padding: 4px 6px; font-size: 0.8rem; border-color: transparent; background: transparent; }
.datum-kompakt:hover:not(:disabled) { border-color: var(--border); }
.datum-kompakt:disabled { opacity: 0.5; }
button { font-family: inherit; }
button, .btn-ghost, .btn-primary, .btn-danger { font-size: 0.85rem; font-weight: 600; padding: 9px 16px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; transition: filter 0.1s ease, transform 0.1s ease; display: inline-block; text-decoration: none; line-height: 1.4; }
button:hover, .btn-ghost:hover, .btn-primary:hover, .btn-danger:hover { filter: brightness(0.96); transform: translateY(-1px); }
.btn-primary, button[type="submit"] { background: var(--primary); color: white; }
.btn-primary:hover, button[type="submit"]:hover { filter: brightness(1.08); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.btn-danger { background: var(--danger-tint); color: var(--danger); border: 1px solid transparent; }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-sm { padding: 5px 10px; font-size: 0.76rem; font-weight: 500; }
.btn-link { background: none; border: none; padding: 0; color: var(--primary-dark); text-decoration: none; }
.btn-link:hover { background: none; filter: none; transform: none; text-decoration: underline; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); font-weight: 600; padding: 7px 9px; border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 7px 9px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: var(--surface-alt); }
tbody tr.klickbar { cursor: pointer; }
/* Gruppen-Kopfzeile bei nach Monat gruppierten Tabellen (Sitzungen, geplante
   Termine) -- eigene Zeile ueber der Gruppe statt Warn-Faerbung o.ae. */
tr.monats-kopf:hover { background: none; }
tr.monats-kopf td { background: var(--surface-alt); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); padding: 5px 9px; }
.empty-state { color: var(--ink-muted); font-size: 0.85rem; padding: 18px 0; text-align: center; }

/* ---------- Pills / Status ---------- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.76rem; font-weight: 500; background: var(--primary-tint); color: var(--primary-dark); white-space: nowrap; }
.pill-warteliste { background: var(--surface-alt); color: var(--ink-muted); }
.pill-erstgespraech, .pill-eingereicht { background: var(--accent-tint); color: var(--accent); }
.pill-probatorik { background: var(--accent-tint); color: var(--accent); }
.pill-laufend, .pill-bezahlt { background: var(--success-tint); color: var(--success); }
.pill-abgeschlossen, .pill-entwurf { background: var(--surface-alt); color: var(--ink-muted); }
.pill-pausiert, .pill-offen { background: var(--danger-tint); color: var(--danger); }
.pill-storniert { background: var(--surface-alt); color: var(--ink-muted); text-decoration: line-through; }
.pill-gestellt { background: var(--accent-tint); color: var(--accent); }
.pill-geplant { background: var(--accent-tint); color: var(--accent); }
.pill-gemahnt { background: var(--danger-tint); color: var(--danger); }
.warn { color: var(--danger); font-size: 0.85rem; }
.ok { color: var(--success); font-size: 0.85rem; }

/* ---------- Erinnerungen ---------- */
.erinnerung { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: var(--danger-tint); color: var(--danger); font-size: 0.84rem; margin-bottom: 8px; }
.erinnerung a { color: inherit; font-weight: 600; text-decoration: none; }
.erinnerung a:hover { text-decoration: underline; }

/* ---------- Fortschrittsbalken (Kontingente) ---------- */
.balken-zeile { display: grid; grid-template-columns: 170px 1fr 90px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 0.84rem; }
.balken { height: 10px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.balken-fuellung { height: 100%; border-radius: 99px; background: var(--primary); transition: width 0.3s ease; }
.balken-fuellung.warnung { background: var(--accent); }
.balken-fuellung.kritisch { background: var(--danger); }
/* dezentere Zahl "verbraucht / bewilligt" hinter einem Kontingent-Balken --
   bewusst kein .mono (das ist fuer betonte Werte wie Euro-Betraege gedacht) */
.kontingent-zahl { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.78rem; color: var(--ink-muted); }

/* ---------- Zeitraum-Umschalter (z.B. Statistik: Monat/Quartal/Jahr) ---------- */
.segment { display: inline-flex; background: var(--surface-alt); border-radius: 10px; padding: 3px; gap: 2px; }
.segment button { background: transparent; border: none; padding: 7px 16px; border-radius: 7px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); cursor: pointer; box-shadow: none; transform: none; transition: background 0.15s ease, color 0.15s ease; }
.segment button:hover { background: transparent; filter: none; transform: none; }
.segment button.active { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow); }

/* ---------- Vertikales Balkendiagramm (z.B. Statistik: Sitzungen/Umsatz im Zeitverlauf) ---------- */
.vertikal-diagramm { display: flex; align-items: flex-end; gap: 14px; min-height: 180px; padding-top: 8px; }
.vertikal-balken { flex: 1; display: flex; flex-direction: column; align-items: center; }
.vertikal-balken .wert { font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 6px; }
.vertikal-balken .saeule { width: 100%; max-width: 56px; background: var(--primary); border-radius: 6px 6px 0 0; transition: height 0.3s ease; }
.vertikal-balken .saeule.akzent { background: var(--accent); }
.vertikal-balken .label { margin-top: 8px; font-size: 0.74rem; color: var(--ink-muted); }

/* ---------- Tabs (Patientendetail) ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab { font-family: inherit; font-size: 0.84rem; font-weight: 500; padding: 8px 14px; border: none; background: transparent; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; white-space: nowrap; }
.tab:hover { background: var(--surface-alt); transform: none; filter: none; }
.tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* Auf schmalen Bildschirmen (Hochformat) wuerden mehrere Tabs auf eine zweite
   Zeile umbrechen -- die erste Zeile haette dann keine sichtbare Unterstreichung
   mehr direkt darunter und wirkt "in der Luft haengend". Stattdessen bleibt
   die Leiste einzeilig und scrollt horizontal (uebliches Mobile-Muster). */
@media (max-width: 900px) {
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .tab { flex-shrink: 0; }
}

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 14px 16px; font-size: 0.84rem; }
.timeline li::before { content: ""; position: absolute; left: -23px; top: 5px; width: 8px; height: 8px; border-radius: 99px; background: var(--primary); }
.timeline li.antrag::before { background: var(--accent); }
.timeline .datum { color: var(--ink-muted); font-size: 0.76rem; }

/* ---------- Kennzahl-Kacheln ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kennzahl { background: var(--primary-tint); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.kennzahl .wert { font-family: 'Quicksand', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--primary-dark); }
.kennzahl .beschriftung { font-size: 0.76rem; color: var(--ink-muted); font-weight: 500; }

/* ---------- Detailseite/Overlay ---------- */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .zwei-spalten { grid-template-columns: 1fr; } }

/* ---------- Patientendetail: Seitenleiste statt zweier gleich aussehender
   Karten oben -- haelt Name/Status/Erinnerungen/Kontingente waehrend des
   Scrollens sichtbar und grenzt sie farblich klar vom Tab-Inhalt ab. ---------- */
.patient-layout { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.patient-sidebar { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 18px 20px; position: sticky; top: 18px; }
.patient-sidebar h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin: 18px 0 8px; }
.patient-fakten-zeile { display: flex; gap: 8px; font-size: 0.82rem; margin-bottom: 6px; }
.patient-fakten-zeile .label { color: var(--ink-muted); min-width: 54px; flex-shrink: 0; }
.patient-fakten-zeile .wert { color: var(--ink); }
/* Kontingent-Balken sind fuer die normale 3-Spalten-Anordnung (Label/Balken/Zahl)
   nebeneinander gedacht -- in der schmalen Seitenleiste passt das nicht mehr,
   daher hier gestapelt: Label oben, Balken+Zahl darunter. */
.patient-sidebar .balken-zeile { grid-template-columns: 1fr auto; row-gap: 5px; column-gap: 8px; margin-bottom: 14px; }
.patient-sidebar .balken-zeile > span:first-child { grid-column: 1 / 3; font-size: 0.8rem; font-weight: 500; color: var(--ink); }
.patient-sidebar .balken-zeile > .balken, .patient-sidebar .balken-zeile > .hint { grid-column: 1; align-self: center; }
.patient-sidebar .balken-zeile > .kontingent-zahl { grid-column: 2; text-align: right; }
@media (max-width: 900px) {
    .patient-layout { grid-template-columns: 1fr; }
    .patient-sidebar { position: static; }
}

/* ---------- Kalender-Kopf: weisse Karte, Verlaufs-Akzentleiste links,
   getoente Kennzahlen-Fusszeile ---------- */
.v2-wrapper { display: flex; flex-direction: column; gap: 14px; }
.v3-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.v3-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--primary), var(--accent)); }
.v3-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 20px 26px 18px 30px; }
.v3-titel-block h1 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.5rem; margin: 0; color: var(--primary-dark); }
.v3-titel-block .zeitraum { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-top: 3px; }
.v3-nav { display: flex; gap: 6px; }
.v3-nav button { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.v3-nav button.heute { background: var(--primary); color: white; border-color: var(--primary); }
.v3-fuss { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; background: var(--surface-alt); border-top: 1px solid var(--border); padding: 14px 26px 14px 30px; }
.v3-kz-gruppe { display: flex; gap: 22px; flex-wrap: wrap; }
.v3-kz { display: flex; align-items: baseline; gap: 6px; }
.v3-kz .zahl { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--primary-dark); }
.v3-kz .label { font-size: 0.82rem; color: var(--ink-muted); }
.v3-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-muted); }
.v1-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
/* Exakt dieselbe Mischung wie die Termin-Kacheln (.wk-chip.*) -- sonst zeigt
   die Legende volle, kraeftige Farben, waehrend die Termine selbst deutlich
   blasser sind, und beides laesst sich nicht mehr auf den ersten Blick
   zuordnen. */
.v1-punkt.geplant { background: color-mix(in srgb, var(--accent) 30%, var(--accent-tint)); }
.v1-punkt.stattgefunden { background: color-mix(in srgb, var(--success) 30%, var(--success-tint)); }
.v1-punkt.abgesagt { background: color-mix(in srgb, var(--danger) 25%, var(--danger-tint)); }

/* ---------- Patientendetail: leicht eingefaerbte Kartenkoepfe (Sitzungen,
   Geplante Termine) statt einer schmalen Akzentleiste -- Titel+Button-Zeile
   bekommt einen sanft getoenten Streifen (bleeded bis zum Kartenrand ueber
   negative Margins, damit er die abgerundeten Kartenecken oben mitnimmt). ---------- */
.karten-kopf-getoent { background: var(--surface-alt); margin: -24px -26px 18px; padding: 16px 26px; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--border); }
.karten-kopf-getoent h3 { display: flex; align-items: center; gap: 8px; }
.karten-kopf-zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--surface); font-size: 0.7rem; font-weight: 700; color: var(--primary-dark); }

/* ---------- Kalender: Termine aller Patient:innen zum Abgleich
   mit dem privaten Kalender, direkt abhakbar. Bewusst kompakt/schmal statt
   die volle Kartenbreite auszunutzen. ---------- */
.wk-karte { max-width: 900px; margin-left: auto; margin-right: auto; }
.wk-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.wk-nav-titel { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--primary-dark); }
.wk-nav-pfeile { display: flex; gap: 4px; }
.wk-scroll { overflow-x: auto; overflow-y: hidden; }
/* min-height schon vor dem Laden der Termine reservieren -- sonst ist die
   Karte zunaechst (fast) leer und ploppt beim Nachladen der Daten ploetzlich
   auf ihre volle Hoehe auf, wodurch alles darunter (z.B. "Laufende
   Behandlungen" samt Patient:innen-Links) nach unten wegspringt. Etwas
   Innenabstand unten, damit das letzte Stunden-Label (das per translateY
   mittig auf seiner Linie sitzt) nicht vom overflow:hidden oben abgeschnitten wird. */
.wk-grid { display: grid; grid-template-columns: 38px repeat(5, minmax(78px, 1fr)); min-width: 430px; min-height: 660px; padding-bottom: 10px; }
.wk-tag-kopf { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--ink-muted); padding: 6px 2px 10px; border-bottom: 1px solid var(--border); }
.wk-tag-kopf .datum { font-family: 'Quicksand', sans-serif; font-size: 0.98rem; color: var(--primary-dark); }
.wk-tag-kopf.heute, .wk-tag-kopf.heute .datum { color: var(--primary); }
/* .wk-stunden und .wk-spalte muessen dieselbe Hoehe haben, sonst beziehen sich
   ihre "top: X%"-Kindelemente (Stunden-Label bzw. Linien/Termine) auf
   unterschiedliche Grundlagen und rutschen gegeneinander bzw. kollabieren
   (nur absolut positionierte Kinder, keine eigene Hoehe ohne diese Angabe). */
.wk-stunden, .wk-spalte { position: relative; height: 620px; }
.wk-stunde-label { position: absolute; left: 0; font-size: 0.74rem; color: var(--ink-muted); transform: translateY(-50%); }
.wk-spalte { border-left: 1px solid var(--border); }
/* Die Linie der allerersten Stunde faellt bewusst weg -- sie wuerde direkt auf
   dem unteren Rand der Kopfzeile (.wk-tag-kopf) liegen und dort wie eine
   doppelt so dicke Linie wirken. */
.wk-linie { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.wk-chip { position: absolute; left: 2px; right: 2px; border-radius: 5px; padding: 3px 5px; font-size: 0.78rem; line-height: 1.25; overflow: hidden; cursor: pointer; text-align: left; font-family: inherit; border: none; min-height: 38px; }
/* Tints allein sind auf den Kacheln zu blass -- mit etwas mehr Grundfarbe
   gemischt, damit die drei Zustaende auf einen Blick unterscheidbar sind.
   Schrift bewusst in var(--ink) (dunkel, neutral) statt in der jeweiligen
   Zustandsfarbe -- Text in derselben Farbfamilie wie der Hintergrund
   (z.B. gruener Text auf hellgruenem Grund) hat zu wenig Kontrast. */
.wk-chip.geplant { background: color-mix(in srgb, var(--accent) 30%, var(--accent-tint)); color: var(--ink); border-left: 3px solid var(--accent); }
.wk-chip.durchgefuehrt { background: color-mix(in srgb, var(--success) 30%, var(--success-tint)); color: var(--ink); }
.wk-chip.abgesagt { background: color-mix(in srgb, var(--danger) 25%, var(--danger-tint)); color: var(--ink); text-decoration: line-through; }
.wk-chip.ausgewaehlt { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Ueberschneidung mit einem anderen Termin -- deutlich rot statt nur umrandet */
.wk-chip.konflikt { background: var(--danger); color: #fff; border-left: 3px solid var(--danger); }
.wk-chip .zeit { font-weight: 700; }
.wk-ohne-uhrzeit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.86rem; }
.wk-ohne-uhrzeit-zeile { display: flex; align-items: center; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
/* ---------- Popover: ploppt direkt an einem Ausloeser (Termin, Button) auf.
   Nutzt das native [popover]-Attribut (Anzeigen/Verstecken, Escape,
   Licht-Dismiss bei Aussenklick -- alles vom Browser, kein JS mehr dafuer)
   und CSS Anchor Positioning fuer die Platzierung (position-anchor je
   Ausloeser, .links/.rechts fuer die Kantenausrichtung, Breite bleibt pro
   Einsatzstelle inline gesetzt). display bewusst NICHT selbst gesetzt --
   das steuert der Browser ueber :popover-open. ---------- */
.popover { position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.18); padding: 10px 12px; font-size: 0.78rem; max-height: 80vh; overflow-y: auto; margin: 0; inset: auto; top: calc(anchor(bottom) + 6px); position-try-fallbacks: flip-block; }
.popover.links { left: anchor(left); }
.popover.rechts { right: anchor(right); }
.popover .schliessen { position: absolute; top: 2px; right: 4px; background: none; border: none; color: var(--ink-muted); font-size: 0.95rem; cursor: pointer; padding: 4px 6px; line-height: 1; }
.popover .aktionen { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
/* Ausloeser mit genau einem moeglichen Popover -- anchor-name direkt fest in
   CSS. Bei mehreren moeglichen Ausloesern fuer dasselbe Popover (z.B. viele
   "Bearbeiten"-Buttons pro Tabellenzeile, oder die Kalender-Termine) wird
   anchor-name stattdessen per JS auf das jeweils angeklickte Element gesetzt. */
#serieOeffnenBtn { anchor-name: --serie-anchor; }
#seriePopover { position-anchor: --serie-anchor; }
#sitzungOeffnenBtn { anchor-name: --sitzung-anchor; }
#sitzungPopover { position-anchor: --sitzung-anchor; }
#postenOeffnenBtn { anchor-name: --posten-anchor; }
#postenPopover { position-anchor: --posten-anchor; }
#antragPopover { position-anchor: --antrag-anchor; }
#wkPopover { position-anchor: --wk-anchor; }

/* ---------- Kopfzeile auf schmalen Bildschirmen: Datum ausblenden (Platz
   fuer Marke + Icons), Reiter-Zeile scrollt bei Bedarf horizontal. ---------- */
@media (max-width: 860px) {
    .topbar-datum { display: none; }
}

@media (max-width: 640px) {
    .app { padding: 0 16px 48px; }
    .topbar { margin-top: 14px; }
    .topbar-marke { padding: 12px 16px; }
    .topbar-reiter { padding: 0 12px; }
    .card { padding: 18px 16px; }
    input, select { min-width: 0; width: 100%; }
    .form-grid { flex-direction: column; align-items: stretch; }
    .terminform { flex-direction: column; align-items: stretch; }
    .terminform label.kurz { max-width: none; }
    .balken-zeile { grid-template-columns: 110px 1fr 80px; }
    .seiten-titel { font-size: 1.2rem; }
    .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .kennzahl { padding: 12px 14px; }
    .kennzahl .wert { font-size: 1.25rem; }
    .segment { width: 100%; }
    .segment button { flex: 1; padding: 7px 8px; }
}