/* box-booking – Styling übernommen aus box-os (MUI-Theme: theme/door.ts).
   Design-Tokens (Teal-Primary, Gelb-Secondary, Montserrat) 1:1 aus box-os,
   hier als plain CSS statt MUI. Fonts vendored (kein CDN) — vgl. HTMX. */

/* --- Montserrat (vendored, latin) --- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/vendor/fonts/montserrat-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/vendor/fonts/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/vendor/fonts/montserrat-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/vendor/fonts/montserrat-latin-700-normal.woff2") format("woff2");
}

/* --- Design-Tokens (aus box-os palette) --- */
:root {
  --primary-light: #337c80;
  --primary-main: #005c61;
  --primary-dark: #004043;
  --primary-contrast: #ffffff;

  --secondary-light: #fce286;
  --secondary-main: #fcdb68;
  --secondary-dark: #b09948;
  --secondary-contrast: #000000;

  --error: #ba1a1a;

  --text: #1a1c1c;
  --text-muted: #5a6060;
  --border: #d5dbdb;
  --surface: #ffffff;
  --bg: #f4f7f7;

  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;               /* kein horizontales Scrollen auf Mobil */
}
img, input, select, textarea { max-width: 100%; }

/* --- Layout --- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* Logo links · Home mittig · Fortschritt rechts */
  align-items: center;
  gap: 0.75rem;
}
.logo-link { justify-self: start; display: inline-flex; align-items: center; }
.topbar img.logo { height: 32px; width: auto; display: block; }
.topbar .navprogress { justify-self: end; }
/* Fortschritt rechts in der Navbar */
.navprogress {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 12px;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }

/* --- Typography (Montserrat 500 für Headings wie in box-os) --- */
h1 { font-size: 2rem; font-weight: 500; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; font-weight: 500; color: var(--primary-main); margin: 1.5rem 0 0.75rem; }
h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 0.75rem; }
a { color: var(--primary-main); }
a:hover { color: var(--primary-dark); }

.lead { font-size: 1.05rem; }
.muted { color: var(--text-muted); font-size: 0.9rem; }
code {
  background: #e7eeee;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
}

/* --- Box-Auswahl (Karten mit Teal-Akzent) --- */
.boxes { list-style: none; padding: 0; margin: 0.5rem 0; }
.boxes li { margin: 0.6rem 0; }
.boxes a {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-main);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .boxes a:hover {
    border-color: var(--primary-main);
    box-shadow: 0 2px 8px rgba(0, 92, 97, 0.12);
  }
}

/* Basis-Reset für alle Buttons (Slot-, Link- und Submit-Buttons setzen darauf auf). */
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* --- Schritt-Kennung / Slot-Auswahl --- */
.step-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-main);
  background: #e2eded;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin: 0 0 0.5rem;
}
/* --- Schlanker Fortschrittsbalken (in der Navbar rechts) --- */
.progress-seg {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  transition: background .2s;
}
.progress-seg.on { background: var(--primary-main); }
.progress-num {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 400px) { .progress-seg { width: 14px; } }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.slot-btn {
  margin: 0;
  min-height: 56px;
  padding: 0.75rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  background: var(--surface);
  color: var(--primary-main);
  border: 1px solid var(--primary-main);
  border-radius: 10px;
}
.slot-btn:active { background: var(--primary-main); color: var(--primary-contrast); }
/* In der Ansicht „Alle" traegt jeder Knopf den Namen unter der Uhrzeit. Breiter, weil ein
   Name mehr Platz braucht als „09:15" — und `auto-fit` statt `auto-fill`, damit drei
   Termine nicht in einer Reihe aus sechs leeren Spalten stehen. Der Name bricht nicht um:
   ein zweizeiliger Name machte die ganze Reihe hoch. */
.slot-grid-named { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.slot-grid-named .slot-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; line-height: 1.2;
}
.slot-who {
  font-size: 0.8rem; font-weight: 400; opacity: 0.75;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) {
  .slot-btn:hover { background: var(--primary-main); color: var(--primary-contrast); }
}

/* --- Gewählter-Termin-Zusammenfassung --- */
.summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: #e2eded;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.25rem 0 1rem;
}
.summary-label { color: var(--text-muted); font-size: 0.85rem; }
.linkish {
  margin: 0 0 0 auto;
  padding: 0.4rem 0.2rem;
  border: 0;
  background: none;
  color: var(--primary-main);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: underline;
  width: auto;
  min-height: 44px;                 /* Touch-Target */
}
.linkish:active { color: var(--primary-dark); }
@media (hover: hover) { .linkish:hover { color: var(--primary-dark); } }

/* --- Formular --- */
.field { display: block; margin: 1.15rem 0; }
.field-label { display: block; font-weight: 500; margin-bottom: 0.45rem; }
.req { color: var(--error); }
/* Zweispaltig: die .field-Boxen sind Grid-Items; align-items:end richtet sie an
   der Zell-Unterkante aus. Dadurch stehen die Eingabefelder auf einer Linie,
   auch wenn ein Label wie "Krankenkassennummer (Versicherung)" zweizeilig wird. */
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; align-items: end; }
.row.two .field { margin: 0.6rem 0; min-width: 0; }
@media (max-width: 560px) { .row.two { grid-template-columns: 1fr; gap: 0; } }

form input, form select, form textarea {
  display: block;
  width: 100%;
  min-height: 52px;                 /* komfortables Touch-Target */
  margin-top: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;                  /* >=16px verhindert Auto-Zoom auf iOS */
  font-weight: 400;
  background: var(--surface);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
form textarea { min-height: 88px; resize: vertical; }
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--primary-main);
  box-shadow: 0 0 0 3px rgba(0, 92, 97, 0.15);
}
/* Gruppen im Formular (Person, Kontakt, Versicherung, Anschrift): ein `fieldset` ohne
   Rahmen, die `legend` als Zwischenueberschrift. `min-width: 0`, sonst waechst ein fieldset
   in Chrome ueber die Spalte hinaus. */
fieldset.gruppe { border: 0; padding: 0; margin: 1.6rem 0 0; min-width: 0; }
fieldset.gruppe > legend { padding: 0; margin-bottom: 0.1rem; font-weight: 600; font-size: 1.05rem; color: var(--primary-dark); }
/* Geburtsdatum als drei Felder: Tag und Monat schmal, Jahr breiter, nie umbrechend. */
fieldset.datum { border: 0; padding: 0; min-width: 0; }
fieldset.datum > legend { padding: 0; }
.datum-teile { display: grid; grid-template-columns: 4.5rem 4.5rem 6.5rem; gap: 0.75rem; }
.datum-teil { display: block; min-width: 0; }
.datum-teil > span { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.datum-teile input { text-align: center; padding-left: 0.4rem; padding-right: 0.4rem; }
/* Fehlerzusammenfassung ueber dem Formular — app.js setzt den Fokus darauf. */
.fehlerliste {
  border: 2px solid var(--error);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem;
  background: var(--surface);
}
.fehlerliste:focus { outline: 3px solid rgba(0, 92, 97, 0.25); }
.fehlerliste-titel { margin: 0 0 0.4rem; font-weight: 600; color: var(--error); }
.fehlerliste ul { margin: 0; padding-left: 1.2rem; }
.fehlerliste li { margin: 0.2rem 0; }
.fehlerliste a { color: var(--error); }
.hinweis-ersteinschaetzung {
  margin: 1rem 0 0;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--primary-main);
  background: #eef4f4;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
}
/* Gesperrtes Feld (nur noch fuer Sonderfaelle; das SmED-Feld ist entfallen) */
form input[readonly] {
  background: #eef2f2;
  color: var(--text-muted);
  cursor: not-allowed;
}
form input[readonly]:focus { border-color: var(--border); box-shadow: none; }
.hint { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.3rem; }

/* --- Kachel-Auswahl (Leistung Schritt 1 / Arzt Schritt 2) --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
  margin: 0.7rem 0 1.2rem;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  width: 100%;
  min-height: 100px;
  padding: 1rem 1.1rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .tile:hover { border-color: var(--primary-main); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09); }
}
.tile:active { background: var(--primary-light); }
.tile-title { font-weight: 600; font-size: 1.05rem; color: var(--primary-main); line-height: 1.25; }
.tile-sub { font-size: 0.9rem; color: var(--text-muted); }
.tile-badge {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: #e2eded;                /* dezentes Teal (Medivise), wie step-badge */
  color: var(--primary-dark);
}
/* "Nächstmöglichen Termin buchen": der Weg am Kalender vorbei.
   Das Aussehen kommt von `.btn-primary` — hier steht nur, was ihn davon unterscheidet:
   volle Breite ueber den Monatspfeilen, damit er als Abkuerzung gelesen wird und nicht
   als dritter Pfeil.

   Die Regel stammt aus 87c4fc1 (28.07.2026), wo der Knopf ueber der Arztauswahl stand
   und `GET /b/<box_id>/next-slot` rief. Die Route fiel mit 09387a8 weg -- der Umstellung
   auf die Buchungs-API --, der Knopf verschwand mit ihr, die Regel blieb als Waise
   liegen. Seit dem 01.09.2026 traegt sie wieder einen Knopf, vorerst ohne Funktion.
   `.next-slot-or` (der Trenner "oder Arzt / Kalender waehlen") ist mit entfallen: Ohne
   Arztauswahl daneben trennt er nichts mehr. */
.next-slot-btn { margin-top: 0; margin-bottom: 0.9rem; }
.next-slot-notiz { margin: -0.4rem 0 0.9rem; }
.dt-inner { margin-top: 1.2rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.dt-inner h3 { color: var(--primary-main); margin-bottom: 0.6rem; }

/* --- Freigabe-PIN-Gate (Session-Start), zentriert --- */
.pin-gate {
  max-width: 380px;
  margin: 1.5rem auto 0;
  text-align: center;
}
.pin-gate .field-label { text-align: center; }
.pin-gate input {
  letter-spacing: 0.3em;
  font-size: 1.4rem;
  text-align: center;
}
/* PIN-Feld ist readonly (nur Numpad), soll aber nicht ausgegraut wirken. */
.pin-gate input[readonly] {
  background: var(--surface);
  color: var(--text);
  cursor: default;
}
/* Zahlenpad */
.pinpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0.75rem 0 1rem;
}
.pinkey {
  min-height: 62px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s, color .1s;
}
@media (hover: hover) { .pinkey:hover { background: #e2eded; } }
.pinkey:active { background: var(--primary-main); color: var(--primary-contrast); }
.pinkey-alt { color: var(--primary-main); font-size: 1.25rem; }

/* --- Auswahl-Screen (Versichertenkarte, Schritt 1) --- */
.choices {
  display: grid;
  grid-template-columns: 1fr;      /* untereinander, volle Breite */
  gap: 0.9rem;
  margin: 1.2rem 0;
}
.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 96px;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  border: 2px solid var(--primary-main);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary-main);
  transition: background .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .choice:hover { background: var(--primary-light); color: var(--primary-contrast); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09); }
}
.choice:active { background: var(--primary-main); color: var(--primary-contrast); }
.choice-title { font-size: 1.15rem; font-weight: 600; }

/* --- "Daten über Versichertenkarte lesen" (breit, oben im Formular) --- */
.card-read-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0.25rem 0 1.25rem;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--primary-main);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary-main);
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .card-read-btn:hover { background: var(--primary-light); color: var(--primary-contrast); }
}
.card-read-btn:active { background: var(--primary-main); color: var(--primary-contrast); }
/* Platzhalter (echtes eGK-Auslesen folgt später) -> gesperrt + gedämpft. */
.card-read-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border);
}
.card-read-btn:disabled:hover { background: var(--surface); color: var(--text-muted); }
.card-read-ok { margin: -0.9rem 0 1.25rem; color: var(--primary-dark); font-weight: 500; }

/* --- Kartenscan per Foto (TEC-161) --- */
/* Das `hidden`-Attribut setzt `display: none` nur ueber das Browser-Stylesheet, und das
   verliert gegen **jede** eigene display-Regel. `.card-scan-btn` unten ist ein Flexbox —
   ohne diese Zeile stuenden beide Einstiege (Livekamera und Dateiauswahl) gleichzeitig
   da, und `hidden` im Markup saehe aus wie ein Fehler im JavaScript. */
[hidden] { display: none !important; }

/* Ein <label> statt eines <button>: Es traegt das Datei-Feld und oeffnet damit die
   Kamera ohne eine Zeile JavaScript. Die Groesse ist dieselbe wie beim TI-Knopf
   darunter — beide sind derselbe Griff, nur mit anderer Quelle. */
.card-scan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  text-align: center;
}
/* Waehrend die Fotos dekodiert werden, ist das Feld nicht noch einmal zu bedienen. Ein
   zweiter Tipp oeffnete die Kamera-App erneut und warf die laufende Aufbereitung weg — auf
   einem langsamen Tablet genau die Reaktion auf ein Geraet, das nichts zu tun scheint. */
.card-scan-btn[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
.card-scan-btn .scan-hint {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}
/* Das Feld selbst ist unsichtbar, aber NICHT `display: none`: Ein so verstecktes
   Formularfeld nimmt die Aktivierung durch das Label in manchen aelteren WebViews nicht
   mehr entgegen. */
.card-scan-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Die Erkennung dauert ein bis vier Sekunden. Ohne diese Zeile stuende jemand vor einem
   Tablet, das auf den Knopfdruck nichts tut — und fotografierte ein zweites Mal. */
.card-scan-status {
  display: none;
  margin: -0.9rem 0 1.25rem;
  color: var(--primary-main);
  font-weight: 500;
  text-align: center;
}
.card-scan-status.htmx-request { display: block; }

/* Die Livekamera. Gross und in der Mitte: Wer eine Karte vor eine Linse haelt, schaut
   auf die Vorschau und nicht auf das Formular darunter. */
.scan-cam { margin: 0.25rem 0 1.25rem; text-align: center; }
.scan-cam-video {
  display: block;
  width: 100%;
  max-height: 46vh;
  /* Die Karte ist breiter als hoch; `cover` schneidet oben und unten ab, statt das Bild
     mit Balken zu umgeben — die Vorschau zeigt damit denselben Ausschnitt, den die
     Aufnahme spaeter hat. */
  object-fit: cover;
  background: #000;
  border-radius: var(--radius);
}
.scan-cam-step { margin: 0.75rem 0; font-size: 1.05rem; }
.scan-cam-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.scan-cam-actions .card-read-btn { margin: 0; }
.scan-cam-secondary {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Warten auf die Versichertenkarte (TEC-161) --- */
/* Grosse Schrift mit Absicht: Der Patient steht dabei vor der Kabine und steckt seine
   Karte — er liest den Bildschirm im Vorbeigehen, nicht im Sitzen. */
.card-wait { text-align: center; padding: 2rem 1rem; }
.card-wait h2 { margin-bottom: 0.75rem; }
.card-wait-spinner {
  margin: 1.5rem 0;
  font-size: 1.1rem;
  color: var(--primary-main);
  font-weight: 500;
}
.card-error {
  display: block;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--error);
}

/* --- Inline-Monatskalender (Schritt 1) --- */
.cal-month {
  text-align: center;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--primary-main);
  margin: 0.25rem 0 0.9rem;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-head {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.cal-empty { aspect-ratio: 1 / 1; }
.cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cal-day.disabled {
  color: #c2cbcb;
  background: transparent;
  border-color: transparent;
  cursor: default;
}
/* Heute: gelber Ring (Sekundärfarbe) – bei Auswahl vom Teal-Fill überlagert. */
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--primary-main); }
/* Radio versteckt, aber fokussierbar (Tastatur). */
.cal-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cal-radio:checked + .cal-day {
  background: var(--primary-main);
  color: var(--primary-contrast);
  border-color: var(--primary-main);
  box-shadow: none;
}
.cal-radio:focus-visible + .cal-day {
  border-color: var(--primary-main);
  box-shadow: 0 0 0 3px rgba(0, 92, 97, 0.2);
}
@media (hover: hover) {
  .cal-day:not(.disabled):hover { border-color: var(--primary-main); }
}
.slots-label { margin-top: 1.25rem; }

/* --- Arztauswahl im Online-Flow ---
   Gleiches Muster wie die Tagesauswahl darueber: verstecktes Radio plus Label. Die Zeiten
   aller Aerzte des Tages sind ohnehin schon geladen — ein Serveraufruf je Umschaltung waere
   eine Anfrage fuer Daten, die im Dokument stehen. */
.doc-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.doc-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.doc-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.5rem 1rem; border: 1px solid var(--divider);
  border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 0.95rem; line-height: 1.2;
}
.doc-radio:checked + .doc-chip {
  background: var(--primary-main); color: var(--primary-contrast); border-color: var(--primary-main);
}
.doc-radio:focus-visible + .doc-chip {
  border-color: var(--primary-main); box-shadow: 0 0 0 3px rgba(0, 92, 97, 0.2);
}
@media (hover: hover) { .doc-chip:hover { border-color: var(--primary-main); } }

/* Zeiten des gewaehlten Arztes zeigen. Die Gruppen stehen hinter den Radios im selben
   Elternknoten, damit der Geschwister-Selektor greift. */
.doc-group { position: relative; }
.doc-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.doc-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.doc-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  padding: 0.5rem 1.1rem; border: 2px solid var(--divider);
  border-radius: 999px; background: #fff; color: var(--text-primary);
  cursor: pointer; font-size: 0.95rem; line-height: 1.2; font-weight: 500;
}
/* Der Haken steht immer im Markup und ist nur unsichtbar — so springt die Breite beim
   Umschalten nicht und die Schaltflaechen bleiben an ihrem Platz. */
.doc-chip::before { content: "\2713"; font-weight: 700; opacity: 0; }

/* Der Nachbar-Selektor (+) griff hier nie: die Schaltflaeche liegt im .doc-picker (seit 13.09.2026 in der Huelle .doc-wahl) und ist
   damit kein direktes Geschwister des Radios — die Auswahl war deshalb unsichtbar.
   Ueber ~ und das for-Attribut trifft die Regel. */
#doc-all:checked ~ .doc-wahl label[for="doc-all"],
#doc-0:checked ~ .doc-wahl label[for="doc-0"],
#doc-1:checked ~ .doc-wahl label[for="doc-1"],
#doc-2:checked ~ .doc-wahl label[for="doc-2"],
#doc-3:checked ~ .doc-wahl label[for="doc-3"],
#doc-4:checked ~ .doc-wahl label[for="doc-4"],
#doc-5:checked ~ .doc-wahl label[for="doc-5"],
#doc-6:checked ~ .doc-wahl label[for="doc-6"],
#doc-7:checked ~ .doc-wahl label[for="doc-7"] {
  background: var(--primary-main);
  color: var(--primary-contrast);
  border-color: var(--primary-main);
  box-shadow: 0 2px 6px rgba(0, 92, 97, 0.25);
}
#doc-all:checked ~ .doc-wahl label[for="doc-all"]::before,
#doc-0:checked ~ .doc-wahl label[for="doc-0"]::before,
#doc-1:checked ~ .doc-wahl label[for="doc-1"]::before,
#doc-2:checked ~ .doc-wahl label[for="doc-2"]::before,
#doc-3:checked ~ .doc-wahl label[for="doc-3"]::before,
#doc-4:checked ~ .doc-wahl label[for="doc-4"]::before,
#doc-5:checked ~ .doc-wahl label[for="doc-5"]::before,
#doc-6:checked ~ .doc-wahl label[for="doc-6"]::before,
#doc-7:checked ~ .doc-wahl label[for="doc-7"]::before { opacity: 1; }
#doc-all:focus-visible ~ .doc-wahl label[for="doc-all"],
#doc-0:focus-visible ~ .doc-wahl label[for="doc-0"],
#doc-1:focus-visible ~ .doc-wahl label[for="doc-1"],
#doc-2:focus-visible ~ .doc-wahl label[for="doc-2"],
#doc-3:focus-visible ~ .doc-wahl label[for="doc-3"],
#doc-4:focus-visible ~ .doc-wahl label[for="doc-4"],
#doc-5:focus-visible ~ .doc-wahl label[for="doc-5"],
#doc-6:focus-visible ~ .doc-wahl label[for="doc-6"],
#doc-7:focus-visible ~ .doc-wahl label[for="doc-7"] { box-shadow: 0 0 0 3px rgba(0, 92, 97, 0.25); }
@media (hover: hover) {
  .doc-chip:hover { border-color: var(--primary-main); }
}

/* Monatswechsel: Pfeil, Monatsname, Pfeil. Ohne Ziel bleibt der Platz stehen, damit der
   Monatsname beim Blaettern nicht springt. */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cal-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border: 1px solid var(--divider);
  border-radius: 999px; background: #fff; cursor: pointer; font-size: 1.1rem;
  color: var(--text-primary);
}
.cal-arrow.is-off { border-color: transparent; color: var(--divider); cursor: default; }
@media (hover: hover) { .cal-arrow:not(.is-off):hover { border-color: var(--primary-main); } }

.doc-times { display: none; }
#doc-all:checked ~ .doc-times[data-doc="all"],
#doc-0:checked ~ .doc-times[data-doc="0"],
#doc-1:checked ~ .doc-times[data-doc="1"],
#doc-2:checked ~ .doc-times[data-doc="2"],
#doc-3:checked ~ .doc-times[data-doc="3"],
#doc-4:checked ~ .doc-times[data-doc="4"],
#doc-5:checked ~ .doc-times[data-doc="5"],
#doc-6:checked ~ .doc-times[data-doc="6"],
#doc-7:checked ~ .doc-times[data-doc="7"] { display: var(--doc-times-display, block); }
/* Die Variable, damit online.css die sichtbare Gruppe als Flex-Spalte legen kann: Der
   Selektor hier traegt eine ID und schluege jede Klassenregel dort. */

/* --- Checkbox (18+) --- */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem 0 0.25rem;
  padding: 0.5rem 0;
  font-weight: 400;
  cursor: pointer;
}
/* Eigenes Kästchen (appearance:none) statt nativem Checkbox-Rendering — manche
   Kiosk-Browser zeichnen native Checkboxen unsichtbar/uneinheitlich. So ist das
   Kästchen auf JEDEM Browser garantiert sichtbar. */
.check input {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0.1rem 0 0;
  padding: 0;
  flex: none;
  border: 2px solid var(--primary-main);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
}
.check input:checked { background: var(--primary-main); border-color: var(--primary-main); }
.check input:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 7px;
  height: 13px;
  border: solid var(--primary-contrast);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.check input:focus-visible { outline: 3px solid rgba(0, 92, 97, 0.35); outline-offset: 2px; }
/* `.privacy` ist entfallen: Der Datenschutzlink steht jetzt IM Haken
   (`_privacy_consent.html`), nicht mehr als eigener Absatz darunter. */

/* --- aTM-Vereinbarung (Schritt 2) --- */
.lead-sub { font-size: 1rem; color: var(--text-muted); margin: -0.25rem 0 1rem; }
.infobox {
  background: #e2eded;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}
.infobox p { margin: 0 0 0.6rem; }
.step h3 { margin-top: 1.75rem; }


/* Bestätigung im Patientenformular */
.agreement-ok {
  color: var(--primary-main);
  font-weight: 500;
  font-size: 0.92rem;
  margin: 0 0 0.5rem;
}

/* Action-Button – aus box-os "action"-Variante (Teal, Radius 10, kein Uppercase).
   Auf Touch vollbreit + hohes Tap-Target. */
button[type="submit"], .btn-primary {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  min-height: 60px;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary-main);
  color: var(--primary-contrast);
  font: inherit;
  font-weight: 500;
  font-size: 1.15rem;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* Als Knopf gestaltete Links: Ohne das gewinnen die `a`-Regeln weiter oben, und
   „Abschliessen" bzw. „Neuer Termin" stehen unterstrichen und teal auf teal. */
a.btn-primary { text-decoration: none; color: var(--primary-contrast); }
@media (hover: hover) { a.btn-primary:hover { color: var(--primary-contrast); } }
button[type="submit"]:active, .btn-primary:active { background: var(--primary-dark); }
@media (hover: hover) {
  button[type="submit"]:hover, .btn-primary:hover { background: var(--primary-dark); }
}
/* Nicht-Submit-Buttons (z. B. Slot-Buttons) erben die submit-Regeln NICHT. */

.err { display: block; color: var(--error); font-weight: 400; font-size: 0.85rem; margin-top: 0.3rem; }

/* --- Bestätigung (Karte mit Gelb-Akzent für die PIN) --- */
.confirmation {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.pin {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary-dark);
  background: var(--secondary-light);
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
}

/* --- SmED-Ersteinschätzung (nach Buchung) --- */
.smed { margin-top: 1.75rem; }
.smed-cta {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  min-height: 60px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--primary-main);
  color: var(--primary-contrast);
  font-weight: 500;
  font-size: 1.15rem;
}
.smed-cta:active { background: var(--primary-dark); color: var(--primary-contrast); }
@media (hover: hover) { .smed-cta:hover { background: var(--primary-dark); color: var(--primary-contrast); } }


/* --- Check-in (Startbildschirm des Tablets in der Apotheke) --- */
/* Farben wie am Tuer-Screen in box-os: rot heisst „hier fehlt noch etwas", gruen
   „erledigt". Gruen ist bewusst kein Knopf — es gibt daran nichts mehr zu tun. */
:root { --success: #2e7d32; }

/* Hochformat: eine Spalte, mittig. Breit genug, dass „Ersteinschätzung fehlt"
   einzeilig neben Uhrzeit und Initialen steht — schmaler bricht der Knopf um. */
.wrap-wide { max-width: 41rem; }

.checkin-new {
  /* `.btn-primary` bringt display:block und width:100% schon mit — genau richtig:
     Der Knopf soll dieselbe Kante haben wie die Kacheln darunter. */
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  padding: 1.25rem 1rem;
  text-align: center;
}

.checkin-tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }

/* Drei feste Spalten statt Umbruch: Uhrzeit links, Name in der Mitte, Stand
   rechts. Mit flex-wrap rutschte der Stand je nach Namenslaenge mal in die
   zweite Zeile und mal nicht — ueber eine Liste hinweg liesse sich die Spalte
   dann nicht mehr ablesen. */
.checkin-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-main);
  border-radius: var(--radius);
}
.checkin-tile.is-maintenance { border-left-color: var(--text-muted); }
.checkin-when { display: flex; flex-direction: column; }
.checkin-time { font-size: 1.9rem; font-weight: 500; color: var(--primary-main); line-height: 1.1; }
.checkin-date { font-size: 0.8rem; color: var(--text-muted); }
.checkin-who { font-size: 1.35rem; font-weight: 500; }
/* Wartungsfenster tragen keinen Stand — der Text darf dann ueber beide Spalten. */
.checkin-tile.is-maintenance .checkin-who { grid-column: 2 / -1; }

.checkin-state {
  border: 0;
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  /* Feste Breite statt min-width: Sonst richtet sich der Knopf nach seinem Text,
     „Ersteinschätzung ✓" ist breiter als „Ersteinschätzung fehlt", und die rechte
     Kante der Spalte flattert von Kachel zu Kachel. */
  width: 13.5rem;
  text-align: center;
}
/* Auf schmalen Anzeigen unter die Kachel statt daneben.

   Der Knopf ist 13,5rem breit (216px, feste Breite — siehe oben, sonst flattert die
   rechte Kante). Auf einem iPhone 16 (393px) bleiben nach den Raendern von `.wrap` und
   der Kachel rund 305px Inhalt; davon nimmt der Knopf zwei Drittel, und der Name wird
   in die Uhrzeit gedraengt. Die Schwelle ist ausgerechnet und nicht geraten: Uhrzeit
   (~80px) + Name (~120px) + Abstaende (32px) + Knopf (216px) + Raender (88px) ergeben
   536px, ab denen es nebeneinander traegt.

   Dieselbe Schwelle wie bei `.row.two` weiter oben — eine zweite daneben waere eine
   Zahl mehr, die jemand pflegen muss. */
@media (max-width: 560px) {
  .checkin-tile { grid-template-columns: auto minmax(0, 1fr); }
  .checkin-state {
    grid-column: 1 / -1;
    /* Feste Breite hier aufheben: In eigener Zeile gibt es keine Kante, die flattern
       koennte, und 13,5rem waeren auf 393px zu breit fuer den Innenraum. */
    width: 100%;
  }
}

.checkin-state.is-open { background: var(--error); cursor: pointer; }
.checkin-state.is-open:active { background: #8f1414; }
/* Kein Knopf: ein <span>. Deaktivierte Knoepfe laden trotzdem zum Tippen ein, und
   der Patient probierte, warum nichts passiert. */
.checkin-state.is-done { background: var(--success); display: inline-block; }

.checkin-problem {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--secondary-dark);
  border-radius: var(--radius);
  background: var(--surface);
}

/* --- PIN-Eingabe des Check-ins --- */
/* Zahlenpad, Feld und Tastenlogik kommen aus dem entfernten Freigabe-Gate
   (`.pin-gate`, `.pinpad`, `.pinkey`, `[data-pin-key]` in app.js). Hier steht nur,
   was sich unterscheidet: Die Spalte ist schmaler, weil neben dem Pad nichts steht. */
.checkin-pin { max-width: 26rem; margin: 0 auto; }
.checkin-cancel { display: block; text-align: center; margin-top: 1rem; }

/* Privat versichert: Was nur die gesetzliche Karte kennt, ist nicht mehr Pflicht.
   Gesetzt wird `data-privat` in app.js; die Bedingung selbst steht serverseitig in
   `NurGesetzlich`. Die Felder bleiben stehen — manche Privatversicherung hat sehr wohl
   eine Nummer, und ein Geburtsdatum hat jeder. Nur der Zwang faellt weg. */
form[data-privat] [data-nur-gkv] .req {
  display: none;
}

form[data-privat] [data-karte-lesen] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Anbieter-Block auf der letzten Seite (TEC-205) ---
   Nur fuer Anbieter, die etwas brauchen — heute Arztkonsultation: Banner mit Logo bzw.
   Wortmarke, darunter die zwei Haken. eTermin und Consularia haben keinen Block. */
.anbieter-block { margin-top: 1.5rem; }
.anbieter-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-main);
  border-radius: var(--radius);
  background: #f4f9f9;
}
.anbieter-banner p { margin: 0; font-size: 0.95rem; }
.anbieter-logo { height: 28px; width: auto; flex: none; }
.anbieter-wortmarke {
  flex: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-main);
  font-size: 1.05rem;
}
/* Die Haken unter dem Banner ruecken enger zusammen als ein einzelner Haken im Formular. */
.anbieter-block .check { margin-top: 0.9rem; }

/* --- Lade-Overlay waehrend der Buchung (TEC-205) ---
   HTMX setzt `htmx-request` auf dem Indikator, solange die Anfrage laeuft. Sichtbarkeit
   ueber Deckkraft statt display, damit das Ein- und Ausblenden weich laeuft; ohne
   `pointer-events` waere die Seite darunter waehrend der Buchung weiter bedienbar. */
.lade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lade-overlay.htmx-request {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.6s ease;
}
/* Das GIF hat einen weissen, eckigen Hintergrund. `multiply` mischt Weiss weg — es bleibt
   nur der Herzmonitor auf der halbdurchsichtigen Flaeche —, und die runde Maske nimmt die
   Ecken. Ein GIF mit echter Transparenz haette harte Kanten an den weichen Ringen. */
.lade-overlay img {
  width: 128px;
  height: 128px;
  mix-blend-mode: multiply;
  border-radius: 50%;
}
.lade-overlay p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }