/* Behandlungsprozess-Prototyp v3.2 — Blue-Look (Tokens aus blue-look/NOTIZ.md: Antify/Tailwind der Blue-App) */
:root {
  --primary-50: #eefaff; --primary-100: #ddf3fe; --primary-200: #b7e7fd; --primary-300: #7ed3fb; --primary-500: #14a7e1; --primary-600: #0086c3; --primary-700: #006a9f;
  --base-50: #f8fafc; --base-100: #f1f5f9; --base-200: #e2e8f0; --base-300: #cad5e2; --base-500: #62748e; --base-600: #45556c; --base-700: #314158;
  --secondary-500: #7ccf00; --success-50: #f0fdf4; --success-500: #00c950; --success-600: #00a63e;
  --warning-50: #fefce8; --warning-100: #fef9c2; --warning-500: #f0b100; --danger-50: #fef2f2; --danger-500: #fb2c36; --danger-600: #e7000b;
  --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #2b7fff; --panda: #2b2b2b;
  --bema: #ffedd4; --goz: #ede9fe;
  --font: "Hanken Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; color: #000; background: #fff; display: flex; flex-direction: column; min-height: 100vh; }
button { font: inherit; }
b { font-weight: 600; }
h3 { font-size: 16px; margin: 18px 0 6px; color: var(--primary-600); }
h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--base-700); }

/* --- Kopfzeile ------------------------------------------------------------ */
.navbar { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 0 10px; color: #fff; font-weight: 500; font-size: 16px;
  background: linear-gradient(to right, var(--primary-500) 50%, #0cb49a 100%); }
.navbar .logo { background: #fff; color: var(--primary-500); font-weight: 700; font-size: 20px; padding: 4px 16px; border-radius: 8px; margin-right: 12px; }
.navbar nav { display: flex; height: 100%; }
.navbar nav button { background: transparent; border: 0; color: #fff; font-weight: 500; font-size: 16px; padding: 0 10px; height: 100%; cursor: pointer; }
.navbar nav button.aktiv { background: rgba(0,0,0,.15); }
.navbar nav button.aus { opacity: .55; cursor: default; }
.navbar .suche { margin-left: auto; background: #fff; color: var(--base-500); border-radius: 8px; height: 36px; width: 240px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 14px; }
.navbar .suche kbd { margin-left: auto; background: var(--base-200); color: var(--base-600); border-radius: 4px; padding: 1px 6px; font-size: 12px; font-family: inherit; }
.navbar .nutzer { padding: 0 14px; }
.navbar .nav-icons { display: flex; gap: 18px; padding-right: 8px; font-size: 18px; }

/* --- Prototyp-Leiste ----------------------------------------------------- */
.proto { background: var(--warning-50); border-bottom: 1px solid var(--warning-100); padding: 6px 14px 8px; flex-shrink: 0; font-size: 13px; }
.proto-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.proto-titel { color: var(--base-700); }
.legende { color: var(--base-600); }
.neu-probe { background: var(--warning-100); border: 1px solid var(--warning-500); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.proto-kopf .btn { margin-left: auto; }
.szenario { margin-top: 6px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start; }
.sz-kopf { grid-column: 1; display: flex; gap: 10px; align-items: baseline; }
.sz-n { font-weight: 700; color: var(--primary-600); white-space: nowrap; }
.sz-text { grid-column: 1; color: var(--base-700); }
.sz-wer { grid-column: 1; display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; color: var(--base-600); font-size: 12.5px; }
.sz-knoepfe { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; align-self: center; }

/* --- Knoepfe, Chips ------------------------------------------------------ */
.btn { background: #fff; border: 1px solid var(--base-300); border-radius: 6px; padding: 6px 12px; cursor: pointer; color: var(--base-700); font-size: 14px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--base-50); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--primary-600); }
.btn.hell { background: #fff; color: var(--primary-700); border-color: #fff; }
.btn.klein { padding: 4px 10px; font-size: 13px; }
.btn.mini { padding: 2px 8px; font-size: 12px; }
.btn.breit { width: 100%; padding: 10px; font-size: 15px; }
.chip { display: inline-block; border-radius: 6px; padding: 1px 7px; font-size: 11.5px; background: var(--base-200); color: var(--base-700); vertical-align: middle; margin-left: 2px; }
.chip.kons { background: var(--primary-100); color: var(--primary-700); }
.chip.kb { background: var(--goz); color: #5b21b6; }
.chip.info { background: var(--info-500); color: #fff; font-size: 12px; margin-left: 10px; }
.chip.ort { background: #fff; border: 1px solid var(--base-300); color: var(--success-600); padding: 5px 10px; font-size: 13px; }
.chip.herkunft { background: var(--bema); color: var(--base-700); }
.chip.st-gemacht, .chip.st-umgesetzt, .chip.st-abgerechnet, .chip.st-abgeschlossen, .chip.st-eingegliedert { background: var(--success-500); color: #fff; }
.chip.st-geplant, .chip.st-offen { background: var(--base-200); }
.chip.st-läuft, .chip.st-wieder-offen { background: var(--info-500); color: #fff; }
.chip.st-verworfen, .chip.st-verfallen { background: var(--danger-50); color: var(--danger-600); }
.wer { display: inline-block; font-size: 11px; border-radius: 10px; padding: 0 5px; vertical-align: middle; line-height: 16px; }
.wer.auto { background: var(--primary-100); color: var(--primary-700); }
.wer.mensch { background: var(--bema); color: #9a3412; }
.wer.kasse { background: var(--base-200); }
.hinweis { color: var(--base-500); font-size: 12.5px; }
.leer { color: var(--base-500); font-style: italic; margin: 4px 0; }
.warn { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--warning-500); color: #fff; font-size: 11px; text-align: center; line-height: 16px; font-weight: 700; }
.neu { box-shadow: inset 3px 0 0 var(--warning-500); background: var(--warning-50) !important; }
.spacer { flex: 1; }

/* --- Ansichten ---------------------------------------------------------- */
.ansicht { display: none; flex: 1; min-height: 0; }
.ansicht.aktiv { display: flex; flex-direction: column; }
.seite { padding: 16px; max-width: 1100px; }

/* --- Terminplan (Rezeption) --------------------------------------------- */
#terminplan { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tp-leiste { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--base-200); }
.tp-leiste .btn.klein { cursor: default; }
.tp-datum { font-weight: 600; padding: 0 6px; }
.tp-wrap { display: flex; flex: 1; min-height: 0; }
.tp { display: flex; flex: 1; overflow: auto; padding: 0 0 20px 16px; }
.tp-spalte { flex: 1; min-width: 180px; border-right: 1px solid var(--base-200); position: relative; }
.tp-spalte.zeiten { flex: 0 0 60px; min-width: 60px; }
.tp-kopf { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--base-200); padding: 10px 8px; font-weight: 600; text-align: center; z-index: 2; height: 42px; }
.tp-raster { position: relative; background: #fff; }
.tp-linie { position: absolute; left: 0; right: 0; border-top: 1px solid var(--base-200); }
.tp-linie.halb { border-top-style: dashed; border-color: var(--base-100); }
.tp-stunde { position: absolute; left: 0; width: 100%; text-align: right; padding-right: 8px; font-size: 13px; color: var(--base-600); transform: translateY(-50%); }
.tp-block { position: absolute; left: 4px; right: 4px; border-radius: 4px; padding: 3px 6px; font-size: 12px; line-height: 1.3; overflow: hidden; background: #fff; border: 1px solid var(--base-300); border-left-width: 3px; }
.tp-zeit { font-weight: 600; }
.f-blau { border-color: var(--info-500); } .f-grau { border-color: var(--base-400, #90a1b9); } .f-pink { background: #e60076; border-color: #e60076; color: #fff; }
.f-dunkel { background: #a3004c; border-color: #a3004c; color: #fff; } .f-gelb { background: var(--warning-100); border-color: var(--warning-500); }
.f-anna { background: var(--danger-50); border-color: var(--danger-500); cursor: pointer; z-index: 1; }
.f-anna.offen, .f-anna:hover { box-shadow: 0 0 0 2px var(--primary-300); }
.tp-popover { position: absolute; left: 16px; right: -200px; z-index: 5; background: #fff; border: 1px solid var(--base-300); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 10px; width: 360px; font-size: 13px; }
.tp-pop-kopf { margin-bottom: 8px; }
.wz { flex: 0 0 480px; display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--base-200); background: var(--base-50); }
.wz-spalte { padding: 12px 8px; border-right: 1px solid var(--base-200); }
.wz-spalte h4 { text-align: center; font-weight: 500; font-size: 15px; }
.wz-karte { background: #fff; border: 1px solid var(--base-300); border-radius: 6px; margin-bottom: 8px; overflow: hidden; font-size: 12.5px; }
.wz-karte .wz-titel { background: var(--base-200); color: var(--base-700); padding: 6px 8px; font-weight: 600; }
.wz-karte.laeuft .wz-titel { background: #e60076; color: #fff; }
.wz-karte.fertig .wz-titel { background: var(--success-500); color: #fff; }
.wz-karte.neu-true .wz-titel { background: var(--danger-500); color: #fff; }
.wz-zeile { padding: 8px; line-height: 1.5; }

/* --- Akte ----------------------------------------------------------------- */
.akte { background: #fff; }
.band { background: var(--primary-500); color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.band-hinweis { opacity: .85; font-size: 12.5px; margin-left: 8px; flex: 1; }
.punkt-live { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary-500); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.akte-kopf { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--base-200); }
.pk { flex: 1; min-width: 0; }
.pk-name { color: var(--primary-500); font-size: 18px; font-weight: 500; }
.pk-zeile { font-size: 12px; color: var(--base-600); margin-top: 2px; }
.pk-kuerzel span { display: inline-block; border: 1px solid var(--base-200); padding: 10px 8px; color: var(--base-600); font-size: 13px; }
.akte-body { display: flex; flex: 1; min-height: 0; }
.akte-links { flex: 0 0 300px; border-right: 1px solid var(--base-200); padding: 12px 12px 12px 22px; overflow: auto; position: relative; background: #fff; }
.akte-links::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; border-left: 2px solid var(--base-300); }
.zs-heute { display: inline-block; background: var(--secondary-500); color: #fff; font-weight: 600; font-size: 12px; padding: 3px 8px; border-radius: 4px; margin: 0 0 10px -12px; position: relative; }
.zs-tag { display: inline-block; background: var(--primary-500); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; margin: 10px 0 8px -12px; position: relative; }
.zs-karte { background: #fff; border: 1px solid var(--base-200); border-left: 4px solid var(--base-300); border-radius: 6px; padding: 6px 8px; margin: 0 0 8px 8px; font-size: 12.5px; position: relative; }
.zs-karte.sitzung { border-left-color: var(--primary-500); }
.zs-karte.plan { border-left-color: #7c3aed; }
.zs-zeit { font-weight: 600; color: var(--base-700); }
.zs-detail { color: var(--base-600); margin-top: 2px; }
.stationen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.stationen .st { font-size: 11px; border: 1px solid var(--base-300); border-radius: 4px; padding: 1px 6px; color: var(--base-600); background: #fff; }
.stationen .st.fertig { border-color: var(--success-500); color: var(--success-600); background: var(--success-50); }
.stationen .st.aktiv { border-color: var(--primary-500); color: var(--primary-700); background: var(--primary-50); font-weight: 600; }
.stationen.gross .st { font-size: 12.5px; padding: 3px 8px; }
.akte-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reiter { display: flex; align-items: stretch; border-bottom: 1px solid var(--base-200); padding: 0 8px; }
.reiter button { background: none; border: 0; border-right: 1px solid var(--base-200); padding: 10px 12px; font-size: 14px; color: var(--base-700); cursor: pointer; position: relative; }
.reiter button.aktiv { color: var(--primary-500); box-shadow: inset 0 -2px 0 var(--primary-500); }
.reiter button.aus { color: var(--base-500); cursor: default; }
.reiter-trenner { width: 12px; }
.reiter-hinweis { margin-left: auto; align-self: center; font-size: 12px; color: var(--base-500); border: 1px dashed var(--base-300); border-radius: 4px; padding: 2px 8px; }
.punkt-neu { position: absolute; top: 8px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning-500); }
.akte-mitte { flex: 1; overflow: auto; padding: 12px; background: var(--base-50); }
.spalten-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.karte { background: #fff; border: 1px solid var(--base-200); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.spalten-2 .karte { margin-bottom: 0; }
.karte-kopf { background: linear-gradient(to right, var(--primary-500), #0691cd); color: #fff; font-weight: 600; font-size: 13px; padding: 6px 10px; letter-spacing: .02em; display: flex; }
.kopf-rechts { margin-left: auto; font-weight: 500; text-transform: none; }
.karte.panda .karte-kopf { background: var(--panda); }
.karte.warn .karte-kopf { background: var(--warning-500); }
.karte-body { padding: 10px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 5px 6px; border-bottom: 1px solid var(--base-100); line-height: 1.5; }
.liste li:last-child { border-bottom: 0; }
.plan { border: 1px solid var(--base-200); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.verlauf-zeile { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--base-100); line-height: 1.5; }
.verlauf-zeile .lbl { color: var(--base-500); font-size: 12.5px; }
.doku-text { font-style: italic; color: var(--base-700); }
.korrektur { margin-left: 8px; font-size: 12px; color: var(--base-600); }
.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab th { background: var(--base-100); text-align: left; padding: 6px 8px; font-size: 12px; text-transform: uppercase; color: var(--base-700); }
.tab td { padding: 6px 8px; border-bottom: 1px solid var(--base-100); vertical-align: top; }
.tab tr.neu td { background: var(--warning-50); }
.tab tr.korrigiert td { background: var(--bema); }

/* Zahnschema (wie Blue: zwei Kiefer, Quadranten, Ziffern 8..1 | 1..8) */
.schema { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.kiefer { display: flex; gap: 2px; background: var(--danger-50); border: 1px solid var(--base-200); border-radius: 6px; padding: 8px 6px; justify-content: center; }
.kiefer .mitte { width: 0; border-left: 1px dashed var(--base-400, #90a1b9); margin: 0 4px; }
.zahn { width: 26px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kiefer.uk .zahn { flex-direction: column-reverse; }
.zahn .krone { width: 18px; height: 22px; border: 1.5px solid var(--base-500); border-radius: 4px 4px 7px 7px; background: #fff; position: relative; }
.zahn .krone::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--base-300); transform: rotate(45deg) scale(.7); }
.kiefer.uk .zahn .krone { border-radius: 7px 7px 4px 4px; }
.zahn .nr { font-size: 11px; color: var(--base-600); }
.zahn.befund .krone { background: #ffd6a8; border-color: var(--danger-500); }
.zahn.behandelt .krone { background: #3b2fd6; border-color: #3b2fd6; }
.zahn.neu { box-shadow: none; background: transparent !important; }
.zahn.neu .krone { outline: 2px solid var(--warning-500); outline-offset: 2px; }

/* Panda-Spalte (Sitzungsmodus) */
.akte-rechts { display: none; flex: 0 0 360px; border-left: 1px solid var(--base-200); padding: 12px; overflow: auto; background: #fff; }
.akte-rechts.aktiv { display: block; }
.panda-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.panda-logo { width: 28px; height: 28px; border-radius: 6px; }
.panda-block { border: 1px solid var(--base-200); border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.panda-block.alt { border-style: dashed; background: var(--base-50); }
.panda-block .lbl { font-size: 12px; text-transform: uppercase; color: var(--base-600); font-weight: 600; margin-bottom: 6px; }
textarea#doku { width: 100%; min-height: 120px; border: 1px solid var(--base-300); border-radius: 6px; padding: 8px; font: inherit; font-size: 13px; resize: vertical; }
textarea#doku:focus { outline: 0; box-shadow: 0 0 0 4px var(--primary-200); }
.chips-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.verstanden { list-style: none; margin: 0; padding: 0; }
.verstanden li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--base-100); font-size: 13px; }
.verstanden .v-art { flex: 0 0 72px; font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--base-500); }
.verstanden li.befund .v-art { color: var(--danger-600); } .verstanden li.gemacht .v-art { color: var(--success-600); }
.verstanden li.geplant .v-art { color: #7c3aed; } .verstanden li.beraten .v-art { color: var(--primary-700); } .verstanden li.vorschlag .v-art { color: var(--panda); }

/* Panda-Knopf, Overlay */
.panda-knopf { position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 10px; background: var(--panda); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; align-items: center; justify-content: center; padding: 24px; }
.overlay.offen { display: flex; }
.overlay-box { background: #fff; border-radius: 8px; width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.overlay-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--base-200); font-size: 16px; }
.overlay-kopf .btn { margin-left: auto; }
.overlay-body { padding: 4px 16px 16px; overflow: auto; }
.overlay-body .gross { font-size: 15px; background: var(--primary-50); border: 1px solid var(--primary-200); border-radius: 6px; padding: 8px 10px; }
.overlay-body ul { padding-left: 20px; line-height: 1.5; }
pre#datenstand { background: var(--base-50); border: 1px solid var(--base-200); border-radius: 6px; padding: 10px; font-size: 11.5px; overflow: auto; max-height: 360px; }

/* Handy: lesbar, nicht schoen */
@media (max-width: 900px) {
  .navbar nav button.aus, .navbar .suche, .navbar .nutzer, .navbar .nav-icons { display: none; }
  .szenario { grid-template-columns: 1fr; } .sz-knoepfe { grid-column: 1; grid-row: auto; }
  .tp-wrap, .akte-body { flex-direction: column; }
  .wz { flex: none; grid-template-columns: 1fr; } .akte-links { flex: none; max-height: 220px; } .akte-rechts { flex: none; }
  .spalten-2 { grid-template-columns: 1fr; }
  .tp-spalte { min-width: 140px; }
}

/* --- Overlay "Sitzung beenden" ----------------------------------------- */
.overlay-box.schmal { width: min(720px, 100%); }
.zf { border: 1px solid var(--base-200); border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
.zf-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; }
.zf-zeile { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--base-100); line-height: 1.5; }
.zf-zeile:last-child { border-bottom: 0; }
.zf-zeile .lbl { color: var(--base-500); font-size: 12.5px; }
.frage { padding: 6px 0; border-bottom: 1px solid var(--base-100); }
.frage:last-child { border-bottom: 0; }
.frage-text { font-weight: 600; margin-bottom: 4px; }
.frage label { display: inline-block; margin: 2px 14px 2px 0; cursor: pointer; }
.frage label input { margin-right: 4px; }
.zf-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* --- Quartalslauf --------------------------------------------------------- */
.ql-leiste { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chip.st-geprüft { background: var(--primary-100); color: var(--primary-700); }
.tab tr.warn td { background: var(--warning-50); }
.tab tr.detail > td { padding: 0 0 8px 24px; background: var(--base-50); }
.tab.innen { font-size: 12.5px; }
.tab.innen th { font-size: 11px; }