/* ============================================================
   Praxisplanung — Planung & Zeiterfassung
   Mobile-first, klare große Bedienelemente, deutsche Oberfläche
   ============================================================ */
:root {
  --primaer: #0E2A47;
  --akzent: #4FA3D1;
  --gruen: #2E7D32;
  --orange: #E65100;
  --rot: #C62828;
  --hintergrund: #F5F7FA;
  --text: #1A1A2E;
  --rand: #D7DEE8;
  --karte: #FFFFFF;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--hintergrund); color: var(--text);
  font-size: 16px; line-height: 1.45;
}
.versteckt { display: none !important; }

/* ---------- Kopfleiste ---------- */
#kopfleiste { background: var(--primaer); color: #fff; position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(14,42,71,.25); }
.kopf-innen { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem .9rem; max-width: 1400px; margin: 0 auto; }
.logo { font-weight: 700; font-size: 1.05rem; letter-spacing: .3px; white-space: nowrap; }
#hauptmenu { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
#hauptmenu a { color: #D8E6F2; text-decoration: none; padding: .45rem .65rem; border-radius: 8px;
  font-size: .92rem; white-space: nowrap; }
#hauptmenu a:hover { background: rgba(255,255,255,.12); }
#hauptmenu a.aktiv { background: var(--akzent); color: #fff; font-weight: 600; }
.kopf-rechts { display: flex; align-items: center; gap: .55rem; font-size: .85rem; }
.klein-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px; padding: .35rem .7rem; cursor: pointer; font-size: .82rem; }
.klein-btn:hover { background: rgba(255,255,255,.25); }

/* ---------- Inhalt ---------- */
#inhalt { max-width: 1400px; margin: 0 auto; padding: 1rem .9rem 4rem; }
h1 { color: var(--primaer); font-size: 1.5rem; margin: .6rem 0 .9rem; }
h2 { color: var(--primaer); font-size: 1.15rem; margin: 1.1rem 0 .5rem; }
.lade-hinweis { text-align: center; color: #667; padding: 3rem 0; }

.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(14,42,71,.06); }
.karten-reihe { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* ---------- Buttons ---------- */
button, .btn { font-family: inherit; font-size: .95rem; }
.btn { display: inline-block; background: var(--akzent); color: #fff; border: none; border-radius: 10px;
  padding: .6rem 1.1rem; cursor: pointer; font-weight: 600; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.primaer { background: var(--primaer); }
.btn.gefahr { background: var(--rot); }
.btn.gruen { background: var(--gruen); }
.btn.leise { background: #E4EBF3; color: var(--primaer); }
.btn.gross { font-size: 1.15rem; padding: .9rem 1.5rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin: .7rem 0; }

/* ---------- Formulare ---------- */
label { display: block; font-weight: 600; font-size: .88rem; margin: .65rem 0 .2rem; color: #2B3A55; }
input, select, textarea { width: 100%; padding: .55rem .65rem; border: 1.5px solid var(--rand);
  border-radius: 9px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(79,163,209,.18); }
input[type="checkbox"] { width: auto; transform: scale(1.25); margin-right: .45rem; }
.formular-gitter { display: grid; gap: .2rem .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feld-hinweis { font-size: .78rem; color: #66788F; margin-top: .15rem; }
.pflicht::after { content: " *"; color: var(--rot); }

/* ---------- Tabellen ---------- */
.tabellen-halter { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; background: #fff; }
th { background: var(--primaer); color: #fff; text-align: left; padding: .5rem .6rem; white-space: nowrap; }
td { border-bottom: 1px solid #E4EAF2; padding: .45rem .6rem; vertical-align: top; }
tr:hover td { background: #F2F7FB; }
.zeile-klickbar { cursor: pointer; }

/* ---------- Ampel ---------- */
.ampel { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; border-radius: 8px;
  padding: .18rem .55rem; font-size: .85rem; color: #fff; }
.ampel.gruen { background: var(--gruen); }
.ampel.orange { background: var(--orange); }
.ampel.rot { background: var(--rot); }
.ampel.geschlossen { background: #90A4AE; }

/* ---------- Kalender-Raster ---------- */
/* Feste Tabellenaufteilung: alle Standort-Spalten exakt gleich breit */
.kalender-tabelle { table-layout: fixed; width: 100%; }
.kalender-tabelle th { overflow-wrap: break-word; white-space: normal; }
.kalender-tabelle th:first-child { width: 92px; }
.kalender-tabelle td { padding: 0; }
.kal-zelle { min-width: 120px; padding: .4rem .5rem; cursor: pointer; border-left: 4px solid transparent; }
.kal-zelle.gruen { background: #E8F5E9; border-left-color: var(--gruen); }
.kal-zelle.orange { background: #FFF3E0; border-left-color: var(--orange); }
.kal-zelle.rot { background: #FFEBEE; border-left-color: var(--rot); }
.kal-zelle.geschlossen { background: #F2F4F7; color: #8895A7; }
.kal-zelle:hover { outline: 2px solid var(--akzent); outline-offset: -2px; }
.kal-datum { font-weight: 700; font-size: .82rem; }
.kal-info { font-size: .74rem; color: #4A5A70; }
.kal-we td:first-child { background: #EDF1F6; }
.kal-feiertag { background: #E3F2FD !important; }
.markierung { display: inline-block; border-radius: 6px; padding: 0 .35rem; font-size: .72rem;
  background: var(--akzent); color: #fff; margin-left: .3rem; }
.markierung.ferien { background: #7E57C2; }
.vertretung-offen { color: var(--rot); font-weight: 700; font-size: .74rem; white-space: nowrap; }
.vertretung-ok { color: var(--gruen); font-size: .74rem; white-space: nowrap; }

/* ---------- Dienstplan-Wochenraster ---------- */
.woche-gitter { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .5rem; min-width: 1080px; }
.tag-spalte { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: .45rem; }
.tag-kopf { font-weight: 700; font-size: .85rem; margin-bottom: .35rem; display: flex; justify-content: space-between; align-items: center; }
.schicht-karte { border-radius: 8px; padding: .3rem .45rem; font-size: .8rem; margin-bottom: .3rem;
  background: #E9F3FA; border-left: 4px solid var(--akzent); cursor: pointer; }
.schicht-karte:hover { filter: brightness(.96); }
.schicht-karte.kv { background: #F0EAFB; border-left-color: #7E57C2; }
.schicht-karte.problem { background: #FFEBEE; border-left-color: var(--rot); }
.schicht-zeit { color: #4A5A70; font-size: .74rem; }
.quali-mini { display: inline-block; color: #fff; border-radius: 5px; font-size: .66rem;
  font-weight: 700; padding: 0 .3rem; vertical-align: middle; }
.plus-btn { width: 100%; background: none; border: 1.5px dashed var(--rand); color: #6A7A90;
  border-radius: 8px; padding: .25rem; cursor: pointer; }
.plus-btn:hover { border-color: var(--akzent); color: var(--akzent); }

/* ---------- Meldungen (Toasts) ---------- */
#meldungen { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; width: min(480px, 92vw); }
.meldung { border-radius: 12px; padding: .8rem 1rem; color: #fff; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); animation: einblenden .25s ease; }
.meldung.erfolg { background: var(--gruen); }
.meldung.fehler { background: var(--rot); }
.meldung.info { background: var(--primaer); }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Modal ---------- */
#modal-hintergrund { position: fixed; inset: 0; background: rgba(10,20,35,.55); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; overflow-y: auto; }
#modal-box { background: #fff; border-radius: 16px; padding: 1.2rem 1.3rem; width: min(720px, 96vw);
  max-height: 92vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.35); }
#modal-box h2 { margin-top: 0; }

/* ---------- Warnungs-Listen ---------- */
.warnung-liste { margin: .5rem 0; padding: 0; list-style: none; }
.warnung-liste li { background: #FFF3E0; border-left: 4px solid var(--orange); border-radius: 6px;
  padding: .45rem .6rem; margin-bottom: .35rem; font-size: .88rem; }
.warnung-liste li.hart { background: #FFEBEE; border-left-color: var(--rot); font-weight: 600; }
.hinweis-box { background: #E3F2FD; border-left: 4px solid var(--akzent); border-radius: 8px;
  padding: .6rem .8rem; font-size: .88rem; margin: .6rem 0; }

/* ---------- Terminal (Stempeluhr) ---------- */
.terminal { position: fixed; inset: 0; background: var(--primaer); color: #fff; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1rem; text-align: center; }
.terminal h1 { color: #fff; font-size: 1.6rem; margin: 0; }
.terminal-uhr { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#kamera-halter { position: relative; width: min(440px, 92vw); aspect-ratio: 1; border-radius: 20px;
  overflow: hidden; background: #000; border: 4px solid var(--akzent); }
#kamera-video { width: 100%; height: 100%; object-fit: cover; }
.scan-rahmen { position: absolute; inset: 12%; border: 3px dashed rgba(255,255,255,.65); border-radius: 16px; pointer-events: none; }
.terminal-ergebnis { font-size: 1.5rem; font-weight: 700; padding: 1.2rem 1.6rem; border-radius: 16px; }
.terminal-ergebnis.erfolg { background: var(--gruen); }
.terminal-ergebnis.fehler { background: var(--rot); }
.numpad { display: grid; grid-template-columns: repeat(3, 84px); gap: .6rem; justify-content: center; }
.numpad button { font-size: 1.5rem; padding: .9rem 0; border-radius: 14px; border: none;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.numpad button:hover { background: rgba(255,255,255,.28); }
/* Im Dialog (heller Hintergrund) waren die Tasten weiß auf weiß — seit der Übernahme, gefunden bei #3 */
#modal-box .numpad button { background: #E4EBF3; color: var(--primaer); }
#modal-box .numpad button:hover { background: #D0DCE8; }
.pin-anzeige { font-size: 2rem; letter-spacing: .6rem; min-height: 2.6rem; }

/* ---------- Login ---------- */
.login-halter { max-width: 420px; margin: 8vh auto; }
.login-halter .logo-gross { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--primaer); margin-bottom: 1rem; }
.backup-codes { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .06em; line-height: 1.7; text-align: center; background: #F4F7FA; border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; }
/* Terminal-Freischaltung (Befund K3) */
.freischaltcode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: .12em;
  text-align: center; background: #fff; border-radius: 8px; padding: .6rem 1rem; margin: .6rem 0; user-select: all; }
.freischaltcode-eingabe { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.4rem; text-align: center;
  letter-spacing: .12em; text-transform: uppercase; }
.netz-zeile { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr auto; gap: .6rem; align-items: start; margin: .5rem 0; }

/* ---------- Kleinkram ---------- */
.abzeichen { display: inline-block; background: var(--akzent); color: #fff; border-radius: 999px;
  font-size: .74rem; padding: .1rem .5rem; font-weight: 700; }
.abzeichen.rot { background: var(--rot); }
.abzeichen.grau { background: #90A4AE; }
.tag-chip { display: inline-block; background: #E4EBF3; color: var(--primaer); border-radius: 999px;
  font-size: .76rem; padding: .12rem .55rem; margin: .12rem .18rem 0 0; }
.hilfe { cursor: help; border-bottom: 1px dotted #888; }
.recht { text-align: right; }
.zentriert { text-align: center; }
.geburtstag-heute { background: #FFF8E1; border-left: 4px solid #F9A825; }

/* ---------- Druck ---------- */
@media print {
  #kopfleiste, .btn, .btn-reihe, #meldungen { display: none !important; }
  body { background: #fff; }
  .karte { border: none; box-shadow: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .netz-zeile { grid-template-columns: 1fr; }
  .kopf-innen { padding: .45rem .6rem; }
  #hauptmenu { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  h1 { font-size: 1.25rem; }
  #inhalt { padding: .7rem .55rem 4rem; }
  .numpad { grid-template-columns: repeat(3, 72px); }
}