/* Apotheken-Impftermin – öffentliche Buchungsseite (Cloud-Fassung).
   Ruhig, hell, barrierearm. Design-Grundwerte kommen aus der Werksnorm
   (../../design-norm.css, als LETZTE Stildatei geladen; Norm-Angleichung
   20.09.2026). Hier nur Aliasse auf Norm-Variablen – keine eigenen Farbwerte.
   Dokumentierte Ausnahmen für die Kundschaft (oft ältere Menschen, am Handy):
   Grundschrift 17 px, große Hauptknöpfe (.knopf-gross) und natives Auswahlfeld
   statt Combobox. Das Druckblatt bleibt schwarz auf weiß.
   WICHTIG: Keine style="..."-Attribute im App-Code – die Content-Security-Policy
   (style-src 'self') blockiert Inline-Stile. Statusfarben nur über Klassen. */

:root {
  color-scheme: light;
  --apo-primaer: var(--aqua-text);
  --apo-akzent: var(--aqua);
  --tinte: var(--ink);
  --tinte-hell: var(--muted);
  --linie: var(--line);
  --flaeche: var(--paper);
  --karte: var(--white);
  --warn: var(--red);
  --erfolg: var(--green-text);
  --apo-radius: var(--ma-card-radius);
  --feld-radius: var(--ma-field-radius);
  --feld-hoehe: var(--ma-control-height);
  --schatten: 0 8px 30px rgba(7, 27, 54, .10);
  --gruen-flaeche: color-mix(in srgb, var(--green) 12%, var(--white));
  --gruen-rand: color-mix(in srgb, var(--green) 30%, transparent);
  --gelb-flaeche: color-mix(in srgb, var(--ampel-gelb) 18%, var(--white));
  --gelb-rand: color-mix(in srgb, var(--ampel-gelb) 60%, transparent);
  --rot-flaeche: color-mix(in srgb, var(--red) 10%, var(--white));
  --rot-rand: color-mix(in srgb, var(--red) 30%, transparent);
  --blau-flaeche: color-mix(in srgb, var(--blue) 10%, var(--white));
  --blau-rand: color-mix(in srgb, var(--blue) 30%, transparent);
  --aqua-rand: color-mix(in srgb, var(--aqua-text) 35%, transparent);
  --abdunkeln: color-mix(in srgb, var(--navy) 55%, transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--flaeche); color: var(--tinte); font-size: 17px; line-height: 1.5; }
h1 { font-size: 28px; margin: 0 0 10px; }
h2 { font-size: 23px; margin: 0 0 6px; }
h3 { font-size: 19px; margin: 0 0 6px; }
h4 { font-size: 14px; margin: 0 0 6px; color: var(--tinte-hell); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 10px; }
a { color: var(--apo-primaer); }
.klein { font-size: 14px; color: var(--tinte-hell); }
.untertitel { color: var(--tinte-hell); margin: 0; }
.leer-hinweis { color: var(--tinte-hell); font-style: italic; }
.fehler-text { color: var(--warn); min-height: 20px; margin: 6px 0; font-weight: 600; }
.pflicht { color: var(--warn); }

/* Knöpfe – groß, handschuh-/altersfreundlich */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--karte); border: 1px solid var(--linie); color: var(--tinte); font-size: 16px; padding: 8px 18px; border-radius: var(--feld-radius); cursor: pointer; min-height: var(--feld-hoehe); text-decoration: none; font-weight: 600; font-family: inherit; }
.knopf:hover { border-color: var(--apo-primaer); }
.knopf:focus-visible { outline: 3px solid var(--apo-akzent); outline-offset: 2px; }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf-primaer { background: var(--navy); border-color: var(--navy); color: var(--white); }
.knopf-primaer:hover, .knopf-primaer:focus-visible { color: var(--aqua-light); }
.knopf-warn { background: var(--rot-flaeche); border-color: var(--rot-rand); color: var(--warn); }
/* Gefahr-Aktion (Absagen): rote Fläche, weiße Schrift; steht links mit Abstandhalter zur Standardaktion (D10) */
.knopf-gefahr { background: var(--warn); border-color: var(--warn); color: var(--white); }
.knopf-gefahr:hover { filter: brightness(1.08); border-color: var(--warn); }
.knopf-schub { flex: 1 1 auto; }
.knopf-gross { min-height: 58px; font-size: 18px; padding: 14px 24px; }
.knopf-voll { width: 100%; }
.knopf-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.symbol-knopf { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--tinte-hell); min-width: 44px; min-height: 44px; border-radius: var(--feld-radius); }
.symbol-knopf:hover { background: var(--flaeche); }
/* Linkknöpfe als Touch-Ziel mindestens 44 px hoch (D15); die Inline-Variante bleibt Fließtext */
.link-knopf { display: inline-flex; align-items: center; min-height: 44px; background: none; border: none; color: var(--apo-primaer); cursor: pointer; font-size: 15px; padding: 4px 6px; text-align: left; text-decoration: underline; font-family: inherit; border-radius: 6px; }
.link-knopf.inline { display: inline; min-height: 0; padding: 0; }
.zurueck-knopf { background: none; border: none; color: var(--apo-primaer); cursor: pointer; font-size: 15px; padding: 6px 0; margin-bottom: 8px; font-family: inherit; min-height: 44px; }
/* Sichtbarer Fokus auf allen Klick-Elementen (D24) */
.link-knopf:focus-visible, .zurueck-knopf:focus-visible, .symbol-knopf:focus-visible, .slot-knopf:focus-visible, .jn-knopf:focus-visible, .leistungs-karte:focus-visible, .weg-option:focus-within, .bogen-datenschutz summary:focus-visible { outline: 3px solid var(--apo-akzent); outline-offset: 2px; }

/* Pillen: Farbe ausschließlich über Statusklassen (CSP-konform) */
.pille { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-hell); white-space: nowrap; }
.pillen-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
/* Statusfarben aus den vier Norm-Tönen (D14); der Text in der Pille trägt die Bedeutung. */
.status-bestaetigt, .status-durchgefuehrt { background: var(--gruen-flaeche); color: var(--green); border-color: var(--gruen-rand); }
.status-reserviert, .status-unbestaetigt, .status-rueckfrage, .status-verschoben { background: var(--gelb-flaeche); color: var(--amber); border-color: var(--gelb-rand); }
.status-gebucht, .status-eingecheckt, .status-beratung { background: var(--blau-flaeche); color: var(--blue); border-color: var(--blau-rand); }
.status-abgesagt { background: var(--rot-flaeche); color: var(--warn); border-color: var(--rot-rand); }
.status-rkiGemeldet { background: var(--aqua-soft); color: var(--aqua-text); border-color: var(--aqua-rand); }
.status-abgerechnet, .status-nicht, .status-abgeschlossen { background: var(--flaeche); color: var(--tinte-hell); border-color: var(--linie); }
.status-nichtErschienen { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); }

/* Formulare */
input, select, textarea { font: inherit; color: inherit; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--feld-radius); padding: 8px 14px; width: 100%; }
input:not([type=checkbox]):not([type=radio]), select { height: var(--feld-hoehe); }
/* Natives Auswahlfeld (dokumentierte Ausnahme für die Kundschaft, D6); appearance:none hält die
   Norm-Höhe auch in Safari. Der Pfeil im Datenbild kann keine Variable lesen: Norm-Grauton --muted. */
select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23607083" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-position: right 12px center; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--apo-akzent); outline-offset: 1px; border-color: var(--apo-primaer); }
input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 auto; accent-color: var(--apo-primaer); }
.feld { display: flex; flex-direction: column; gap: 5px; }
.feld-label { font-size: 14px; font-weight: 600; color: var(--tinte-hell); }
.feld-hinweis { font-size: 13px; color: var(--tinte-hell); }
.formular-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ma-form-gap); }
.formular-raster .voll { grid-column: 1 / -1; }
.abschnitt-titel { font-weight: 700; color: var(--tinte); margin-top: 8px; }
.schalter { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
/* Häkchen darf im Flex-Container nie zusammengedrückt werden (D2: am Handy sonst 13 px breit) */
.schalter input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; }
/* Fehler-/Hinweisblöcke mit Absatz und Einzelpunkten (Problemliste mit hängender Einrückung) */
.fehler-text p, .hinweis-warnung p { margin: 0 0 6px; }
.fehler-text p:last-child, .hinweis-warnung p:last-child { margin-bottom: 0; }
.probleme-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.probleme-liste li { position: relative; padding-left: 18px; margin: 3px 0; }
.probleme-liste li::before { content: "•"; position: absolute; left: 4px; top: 0; }
/* Honigtopf: für Menschen unsichtbar, für Bots ein normales Feld. Nie display:none (manche Bots prüfen das). */
input[type="text"].honigtopf { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--navy); color: var(--white); padding: 13px 22px; border-radius: var(--feld-radius); opacity: 0; pointer-events: none; transition: all .25s; z-index: 200000; max-width: min(92vw, 480px); text-align: center; box-shadow: var(--schatten); }
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: translate(-50%, 0); } }

/* Modal – immer im Vordergrund */
.modal-hintergrund { position: fixed; inset: 0; background: var(--abdunkeln); z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.modal { background: var(--karte); border-radius: var(--apo-radius); box-shadow: var(--shadow); width: 100%; max-width: 540px; margin: auto 0; }
.modal-breit { max-width: 820px; }
.modal-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--karte); border-radius: var(--apo-radius) var(--apo-radius) 0 0; z-index: 2; }
.modal-inhalt { padding: 18px 20px 22px; }

/* ===== Ladezustand / Fehlerseite ===== */
.lade-seite { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--tinte-hell); }
.start-seite { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--nav-verlauf), var(--navy); }
.start-karte { background: var(--karte); border-radius: var(--apo-radius); padding: 30px; width: 100%; max-width: 560px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }

/* ===== Öffentliche Buchungsseite ===== */
.oeffentlich { max-width: 760px; margin: 0 auto; padding: 0 16px 60px; }
.apo-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; flex-wrap: wrap; }
.apo-marke { display: flex; align-items: center; gap: 12px; }
.apo-logo { width: 48px; height: 48px; border-radius: var(--feld-radius); background: var(--apo-primaer); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: 0 0 auto; }
/* Bild-Logo der Apotheke (Data-URL aus den Einstellungen) statt Initialen. */
.apo-logo-bild { width: 56px; height: 56px; object-fit: contain; background: var(--white); border: 1px solid var(--linie); }
/* Bild-Logo (alle Bildschirmgrößen, Wunsch Thorsten 19.09.2026): allein über die
   volle Breite in einer weißen Kachel, darunter der Name, darunter kleiner die
   Adresse. Ohne Bild bleibt die Zeile mit Initialen wie bisher. */
.apo-marke-bild { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
.apo-marke-bild .apo-logo-bild { width: 100%; height: auto; max-height: 180px; border-radius: var(--apo-radius); padding: 12px; box-sizing: border-box; }
.apo-marke-bild strong { font-size: 22px; line-height: 1.2; }
.apo-marke-bild .apo-adresse { font-size: 15px; margin-top: 2px; }
.apo-anschrift { display: block; }
/* Telefon und E-Mail nebeneinander mit Strichsymbol (Wunsch Thorsten 19.09.2026), am Handy umbrechend. */
.apo-kontakt { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; }
.apo-kontakt a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; color: var(--apo-primaer); }
.apo-kontakt a:hover { text-decoration: underline; }
/* Linien-Icons (Plattform-Standard): Strich in Textfarbe, Größe an der Schrift. */
.ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apo-kontakt .ico { width: 17px; height: 17px; }
.pille .ico { width: 1em; height: 1em; vertical-align: -0.15em; }
.symbol-knopf .ico { width: 20px; height: 20px; vertical-align: middle; }
.fortschritt-nummer .ico { width: 1em; height: 1em; vertical-align: -0.1em; stroke-width: 2.5; }
.bestaetigt-haken .ico { width: 1em; height: 1em; stroke-width: 2.5; }
.reservierungs-hinweis .ico { width: 20px; height: 20px; }
.lokal-siegel .ico, .sieb-rat .ico { width: 1em; height: 1em; }
.apo-inhalt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--apo-radius); padding: 26px; box-shadow: var(--schatten); }
.apo-fuss { text-align: center; padding: 18px 0; color: var(--tinte-hell); font-size: 14px; }
.apo-begruessung { margin-bottom: 18px; }
.apo-intro { font-size: 18px; }
.apo-oeffnung { background: var(--flaeche); border-radius: var(--feld-radius); padding: 12px 14px; margin-top: 12px; }
.probe-band { position: sticky; top: 0; z-index: 90000; background: var(--gelb-flaeche); color: var(--amber); border-bottom: 2px solid var(--ampel-gelb); padding: 8px 14px; font-size: 14px; text-align: center; }

/* Fortschritt */
.fortschritt { display: flex; list-style: none; padding: 0; margin: 0 0 24px; gap: 4px; overflow-x: auto; }
.fortschritt-schritt { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-size: 13px; color: var(--tinte-hell); }
.fortschritt-nummer { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--linie); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.fortschritt-schritt.aktiv .fortschritt-nummer { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* Erledigt: dunkler Norm-Grünton (--green-text) für lesbaren Kontrast des weißen Hakens (D17) */
.fortschritt-schritt.erledigt .fortschritt-nummer { background: var(--erfolg); border-color: var(--erfolg); color: var(--white); }
.fortschritt-schritt.aktiv .fortschritt-text { color: var(--tinte); font-weight: 700; }
.fortschritt-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Leistungsauswahl */
.leistungs-liste { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.leistungs-karte { text-align: left; background: var(--karte); border: 2px solid var(--linie); border-radius: var(--apo-radius); padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: inherit; }
.leistungs-karte:hover { border-color: var(--apo-primaer); background: var(--aqua-soft); }
.leistungs-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.leistungs-kopf strong { font-size: 19px; }
.leistungs-dauer { color: var(--tinte-hell); font-size: 14px; white-space: nowrap; }
.leistungs-pfeil { color: var(--apo-primaer); font-weight: 700; font-size: 15px; }
.hilfe-kunde h2 { font-size: 18px; margin: 22px 0 6px; }
.hilfe-kunde p { margin: 8px 0; }
.hilfe-schritte { padding-left: 22px; margin: 10px 0; }
.hilfe-schritte li { margin: 0 0 10px; }
.hinweis-neutral { background: var(--blau-flaeche); border: 1px solid var(--blau-rand); border-radius: var(--feld-radius); padding: 12px 14px; font-size: 15px; color: var(--blue); margin: 12px 0; }
.hinweis-warnung { background: var(--gelb-flaeche); border: 1px solid var(--gelb-rand); border-radius: var(--feld-radius); padding: 12px 14px; font-size: 15px; color: var(--amber); margin: 12px 0; }

.info-karte { display: flex; flex-direction: column; gap: 10px; }
/* Rechtstexte (Impressum, Datenschutz): gegliedert statt Zeilenwand. */
.rechtstext { gap: 0; line-height: 1.55; }
.rechtstext h1 { margin-bottom: 6px; }
.rechtstext h2 { font-size: 18px; margin: 24px 0 8px; }
.rechtstext h3 { font-size: 16px; margin: 18px 0 6px; color: var(--tinte); }
.rechtstext p { margin: 8px 0; max-width: 72ch; }
.rechtstext a { word-break: break-word; }
.rtx-liste { margin: 6px 0 10px; padding-left: 22px; max-width: 72ch; }
.rtx-liste li { margin: 3px 0; }
.rtx-block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--feld-radius); padding: 10px 14px; margin: 8px 0 12px; display: grid; gap: 4px 16px; grid-template-columns: minmax(180px, 270px) 1fr; }
.rtx-zeile { display: contents; }
.rtx-label { color: var(--tinte-hell); }
.rtx-wert { min-width: 0; overflow-wrap: anywhere; }
.rtx-voll .rtx-wert { grid-column: 1 / -1; }
.rtx-voll + .rtx-zeile:not(.rtx-voll) .rtx-label, .rtx-zeile:not(.rtx-voll) + .rtx-voll .rtx-wert { margin-top: 2px; }
.info-liste { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
/* Symbol in fester Spalte, Text daran ausgerichtet – Emojis sind unterschiedlich breit
   (Fund 17.09.2026: Textanfänge sprangen je Zeile). */
.info-liste li { display: flex; gap: 12px; align-items: flex-start; }
.info-icon { flex: 0 0 30px; width: 30px; display: flex; justify-content: center; color: var(--apo-primaer); padding-top: 1px; }
.info-icon .ico { width: 22px; height: 22px; }

/* Termine */
.termin-steuerung { display: flex; gap: 10px; margin-bottom: 14px; }
.termin-liste { display: flex; flex-direction: column; gap: 18px; }
.termin-tag h3 { margin-bottom: 8px; }
/* Zeiten als festes Raster: alle Knöpfe gleich breit, Spalten fluchten über alle Reihen
   (Fund 20.09.2026: mit Inter ist die Ziffer 1 schmaler, frei fließende Knöpfe versetzten sich). */
.slot-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.slot-knopf { background: var(--karte); border: 2px solid var(--apo-primaer); color: var(--apo-primaer); border-radius: var(--feld-radius); padding: 8px 10px; font-size: 16px; font-weight: 700; cursor: pointer; min-height: var(--feld-hoehe); min-width: 0; font-family: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot-knopf:hover { background: var(--apo-primaer); color: var(--white); }
.slot-knopf.gewaehlt { background: var(--apo-primaer); color: var(--white); }
.slot-knopf:disabled { opacity: .5; cursor: wait; }
.reservierungs-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--blau-flaeche); border: 1px solid var(--blau-rand); border-radius: var(--feld-radius); padding: 10px 14px; font-size: 15px; color: var(--blue); margin-bottom: 14px; }
.reservierungs-hinweis > span { flex: 1 1 260px; min-width: 0; }
/* Abgelaufen: Band wird rot, Knopf „Neue Zeit wählen“ erscheint, Weiter/Buchen sind gesperrt (UI-F5) */
.reservierungs-hinweis.abgelaufen { background: var(--rot-flaeche); border-color: var(--rot-rand); color: var(--warn); }
.reservierungs-hinweis.abgelaufen .knopf { border-color: var(--warn); color: var(--warn); }

/* Prüfen / Zusammenfassung */
.pruef-karte { background: var(--flaeche); border-radius: var(--feld-radius); padding: 4px 16px; margin: 12px 0; }
.pruef-zeile { display: grid; grid-template-columns: 160px 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.pruef-zeile:last-child { border-bottom: none; }
.pruef-label { color: var(--tinte-hell); font-size: 14px; }
.pruef-wert { font-weight: 500; }
.einwilligungs-block { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.einwilligung { align-items: flex-start; font-size: 15px; }
.einwilligung input { margin-top: 3px; }

.vorab-liste { display: flex; flex-direction: column; gap: 16px; margin: 14px 0; }
.vorab-frage { border: 1px solid var(--linie); border-radius: var(--feld-radius); padding: 14px; }
.vorab-text { font-weight: 600; margin-bottom: 10px; }
.jn-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.jn-knopf { background: var(--karte); border: 2px solid var(--linie); border-radius: var(--feld-radius); padding: 8px 22px; font-size: 16px; font-weight: 600; cursor: pointer; min-height: var(--feld-hoehe); font-family: inherit; color: inherit; }
.jn-knopf.gewaehlt { background: var(--navy); border-color: var(--navy); color: var(--white); }
.vorab-frage input[type=text] { margin-top: 10px; }

.bestaetigt-karte { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bestaetigt-haken { width: 72px; height: 72px; border-radius: 50%; background: var(--erfolg); color: var(--white); font-size: 40px; display: flex; align-items: center; justify-content: center; }
.bestaetigt-nummer { font-size: 18px; }
/* K45: Seite „Fast geschafft“ (Briefsymbol statt Haken) und Kopf nach der Bestätigung per Link */
.bestaetigt-haken.postfach-symbol { background: var(--apo-primaer); }
.bestaetigt-kopf { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 6px; }
.bestaetigt-kopf h1 { margin: 0; }
.bestaetigt-karte .pruef-karte, .info-karte .pruef-karte { width: 100%; text-align: left; }
.bestaetigt-karte .hinweis-neutral, .bestaetigt-karte .hinweis-warnung { text-align: left; width: 100%; }

/* ===== Anamnesebogen: lokal ausfüllen + drucken ===== */
.lokal-siegel { display: inline-flex; align-items: center; gap: 6px; background: var(--gruen-flaeche); border: 1px solid var(--gruen-rand); color: var(--green-text); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sieb-block { margin: 16px 0; }
.sieb-block h2 { font-size: 19px; }
.sieb-rat { background: var(--gelb-flaeche); border: 1px solid var(--gelb-rand); border-radius: var(--feld-radius); padding: 10px 12px; font-size: 15px; color: var(--amber); margin-top: 10px; }
.weg-wahl { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.weg-option { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--linie); border-radius: var(--feld-radius); padding: 12px 14px; cursor: pointer; }
.weg-option.gewaehlt { border-color: var(--apo-primaer); background: var(--aqua-soft); }
.weg-option input { width: 22px; height: 22px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--apo-primaer); }
.bogen-formular { border: 1px solid var(--linie); border-radius: var(--feld-radius); padding: 16px; margin: 14px 0; background: var(--karte); display: flex; flex-direction: column; gap: 12px; }
.bogen-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.bogen-kopf h2 { font-size: 20px; }
.bogen-fragen { display: flex; flex-direction: column; }
.bogen-frage { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.bogen-frage .vorab-text { margin: 0; }
.bogen-frage .bogen-freitext { grid-column: 1 / -1; }
.bogen-hinweis .knopf-zeile { margin-top: 10px; }
.bogen-datenschutz { border: 1px solid var(--linie); border-radius: var(--feld-radius); padding: 10px 14px; }
.bogen-datenschutz summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.bogen-datenschutz-text { max-height: 320px; overflow-y: auto; padding-right: 6px; }
.bogen-datenschutz-text p { font-size: 14px; margin: 0 0 8px; }

/* Druckansicht: am Bildschirm ein Overlay, beim Drucken nur das Blatt */
.druckansicht { position: fixed; inset: 0; background: var(--abdunkeln); z-index: 100001; overflow-y: auto; padding: 24px 12px; }
.druck-aktionen { max-width: 800px; margin: 0 auto 12px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Druckblatt: bewusst reines Schwarz/Grau auf Weiß (Papier), keine Markenfarben.
   Ein A4-Blatt (seit 08.10.2026): Angaben zur Person als Formularfelder, nummerierte Gesundheitsfragen,
   Aufklärung/Einwilligung, drei Unterschriftsfelder. Die Datenschutzinformation wird nicht mehr mitgedruckt. */
.druck-blatt { background: #fff; color: #111; max-width: 800px; margin: 0 auto; padding: 32px 36px; border-radius: 8px; font-size: 15px; line-height: 1.45; box-shadow: var(--shadow); }
.druck-blatt h1 { font-size: 22px; margin: 14px 0 4px; letter-spacing: 0.01em; }
.druck-einleitung { margin: 0 0 4px; color: #333; }
.druck-kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: 8px; font-size: 14px; }
.druck-marke { display: flex; align-items: center; gap: 10px; }
.druck-verbleib { font-size: 13px; margin: 8px 0 0; text-align: right; }
.druck-klein { font-size: 12px; color: #444; }
.druck-abschnitt-titel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #111; border-bottom: 1px solid #111; padding-bottom: 3px; margin: 18px 0 8px; }
.druck-person { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 10px 20px; }
.druck-feld.breit { grid-column: span 2; }
.druck-feld { display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid #111; padding: 0 2px 3px; min-height: 40px; }
.druck-feld.voll { grid-column: 1 / -1; }
.druck-feld-label { font-size: 10.5px; color: #444; text-transform: uppercase; letter-spacing: 0.04em; }
.druck-feld-wert { font-size: 15px; min-height: 20px; line-height: 1.3; }
.druck-tabelle { width: 100%; border-collapse: collapse; }
.druck-tabelle td { border-bottom: 1px solid #999; padding: 8px 6px; vertical-align: top; }
.druck-tabelle td.nr { width: 22px; padding-left: 2px; padding-right: 0; color: #444; }
.druck-tabelle td.antwort { width: 120px; white-space: nowrap; font-weight: 700; text-align: right; padding-right: 2px; }
.druck-kasten { border: 1px solid #999; padding: 6px 10px; margin-top: 6px; min-height: 34px; }
.druck-kasten.hoch { min-height: 70px; margin-top: 4px; }
.druck-linie { display: inline-block; border-bottom: 1px solid #111; min-width: 140px; padding: 0 6px; text-align: center; }
.druck-linie.breit { min-width: 240px; }
.druck-nowrap { white-space: nowrap; }
.druck-einwilligung p { margin: 6px 0; }
.druck-anmerkungen { margin-top: 12px !important; }
.druck-felder { margin-top: 10px; }
.druck-felder p { margin: 5px 0; }
.druck-unterschriften { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 20px; margin-top: 6px; }
.bogen-linie { border-top: 1px solid #111; padding-top: 4px; font-size: 12px; color: #444; margin-top: 44px; line-height: 1.25; }
.druck-hinweis { font-size: 11.5px; color: #444; margin-top: 16px; line-height: 1.35; }
/* Druck (D8): Bestätigung und „Ihr Termin“ sind druckbar; nur Band, Toast, Navigation und Knöpfe verschwinden.
   Ist die Druckansicht des Bogens offen (body.druckt), wird ausschließlich das Blatt gedruckt. */
@media print {
  body { background: #fff; }
  .toast, .druck-aktionen, .modal-hintergrund, .probe-band, .apo-fuss, .apo-website, .fortschritt, .zurueck-knopf, .knopf-zeile, .reservierungs-hinweis, .pruef-zeile .link-knopf, .fehler-text:empty { display: none !important; }
  body.druckt #app { display: none !important; }
  .oeffentlich { max-width: none; padding: 0; }
  .apo-kopf { padding: 0 0 10px; }
  .apo-inhalt { border: none; box-shadow: none; border-radius: 0; padding: 0; }
  .pruef-karte { background: none; padding: 0; }
  .hinweis-neutral, .hinweis-warnung { border-color: #999; background: none; color: #111; }
  .druckansicht { position: static; background: none; padding: 0; overflow: visible; }
  /* Ein A4-Blatt: feste Seitenränder, kompaktere Abstände nur im Druck. Maß 08.10.2026 (Chrome-PDF):
     gut gefüllt (Anmerkungskasten und Unterschriftsfelder bewusst großzügig für Handschrift), nie ein zweites Blatt. */
  @page { size: A4; margin: 10mm 12mm; }
  .druck-blatt { max-width: none; padding: 0; border-radius: 0; box-shadow: none; font-size: 12.5px; line-height: 1.4; }
  .druck-blatt h1 { font-size: 20px; margin: 10px 0 2px; }
  .druck-einleitung { margin: 0 0 2px; }
  .druck-kopfzeile { padding-bottom: 6px; font-size: 12.5px; }
  .druck-verbleib { margin: 6px 0 0; font-size: 12px; }
  .druck-abschnitt-titel { font-size: 11px; margin: 14px 0 6px; padding-bottom: 2px; }
  .druck-person { gap: 8px 18px; }
  .druck-feld { min-height: 36px; }
  .druck-feld-label { font-size: 9.5px; }
  .druck-feld-wert { font-size: 13px; min-height: 18px; }
  .druck-tabelle td { padding: 6px 6px; }
  .druck-kasten { min-height: 30px; padding: 5px 9px; margin-top: 5px; }
  .druck-kasten.hoch { min-height: 96px; }
  .druck-linie { min-width: 130px; }
  .druck-linie.breit { min-width: 230px; }
  .druck-einwilligung p { margin: 5px 0; }
  .druck-anmerkungen { margin-top: 10px !important; }
  .druck-felder { margin-top: 8px; }
  .druck-felder p { margin: 4px 0; }
  .druck-unterschriften { gap: 18px; margin-top: 4px; }
  .bogen-linie { margin-top: 44px; font-size: 11px; padding-top: 4px; }
  .druck-hinweis { margin-top: 14px; font-size: 10.5px; line-height: 1.3; }
  .druck-seite { break-inside: auto; }
}

/* Feld je nach Auswahl ausblenden (z. B. Versichertennummer bei Selbstzahlern) */
.feld-verborgen { display: none; }

/* Responsiv */
/* Druckblatt auf schmalen Bildschirmen: Felder und Unterschriften untereinander – nur am Bildschirm, nicht im Druck
   (Chrome misst beim Drucken die A4-Breite von rund 700 px und würde sonst die Raster ebenfalls stapeln). */
@media screen and (max-width: 860px) {
  .druck-unterschriften, .druck-person { grid-template-columns: 1fr; }
  .druck-nowrap { white-space: normal; }
}
@media (max-width: 860px) {
  .formular-raster { grid-template-columns: 1fr; }
  .pruef-zeile { grid-template-columns: 1fr; gap: 2px; }
  .bogen-frage { grid-template-columns: 1fr; }
}

/* ===== iPhone / kleine Bildschirme (bis 480px) ===== */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
@media (max-width: 480px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  body { font-size: 16px; }
  .oeffentlich { padding: 0 10px calc(40px + env(safe-area-inset-bottom)); }
  .apo-kopf { padding: 12px 0 8px; gap: 8px; }
  .apo-marke { align-items: flex-start; }
  .apo-kontakt { gap: 4px 16px; }
  .rtx-block { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
  .rtx-label { font-size: 13px; margin-top: 6px; }
  .rtx-zeile:first-child .rtx-label { margin-top: 0; }
  .apo-marke-bild .apo-logo-bild { max-height: 150px; }
  .apo-marke-bild strong { font-size: 20px; }
  .apo-marke-bild .apo-adresse { font-size: 14px; }
  .apo-inhalt { padding: 16px 14px; border-radius: var(--feld-radius); }
  .apo-intro { font-size: 16px; }
  .apo-oeffnung { padding: 10px 12px; }
  .fortschritt { gap: 6px; margin-bottom: 8px; overflow: visible; flex-wrap: wrap; }
  .fortschritt-schritt { flex: 0 0 auto; gap: 6px; }
  .fortschritt-schritt.aktiv { flex: 1 1 auto; min-width: 0; }
  .fortschritt-text { display: none; }
  .fortschritt-schritt.aktiv .fortschritt-text { display: inline; font-size: 14px; }
  .fortschritt::after { content: attr(data-schritt); display: block; width: 100%; flex: 1 0 100%; font-size: 12px; color: var(--tinte-hell); margin-top: 6px; }
  .leistungs-karte { padding: 14px; }
  .leistungs-kopf { flex-direction: column; align-items: flex-start; gap: 2px; }
  .leistungs-kopf strong { font-size: 17px; }
  .slot-reihe { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .slot-knopf { padding: 8px 6px; font-size: 15px; }
  .termin-steuerung .knopf { flex: 1; }
  .reservierungs-hinweis { font-size: 14px; padding: 9px 12px; }
  .hinweis-neutral, .hinweis-warnung { font-size: 14px; padding: 10px 12px; }
  .oeffentlich .knopf-zeile { flex-direction: column; align-items: stretch; }
  .oeffentlich .knopf-zeile .knopf { width: 100%; }
  /* Gestapelt: Gefahr-Knopf ans Ende mit sichtbarem Abstand und Trennlinie (D10) */
  .knopf-zeile .knopf-schub { display: none; }
  .knopf-zeile .knopf-gefahr { order: 99; margin-top: 14px; }
  .reservierungs-hinweis .knopf { width: 100%; }
  .oeffentlich .link-knopf { text-align: left; }
  .bestaetigt-karte .bogen-hinweis { text-align: left; }
  .bestaetigt-haken { width: 60px; height: 60px; font-size: 32px; }
  .bogen-formular { padding: 12px; }
  .bogen-kopf { flex-direction: column; }
  .jn-knopf { padding: 10px 18px; min-height: 46px; flex: 1; }
  .weg-option { padding: 10px 12px; }
  .pruef-zeile { padding: 8px 0; }
  .apo-fuss { font-size: 13px; padding-bottom: env(safe-area-inset-bottom); }
  .modal-hintergrund { padding: 8px 6px; align-items: flex-start; }
  .modal, .modal-breit { max-width: 100%; border-radius: var(--feld-radius); }
  .modal-kopf { padding: 12px 14px; }
  .modal-kopf h3 { font-size: 17px; overflow-wrap: anywhere; }
  .modal-inhalt { padding: 14px; }
  .modal .knopf-zeile { flex-direction: column; align-items: stretch; }
  .modal .knopf-zeile .knopf, .modal .knopf-zeile select { width: 100%; }
  .pruef-wert { overflow-wrap: anywhere; }
  .druckansicht { padding: 8px 6px; }
  .druck-aktionen { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--navy) 85%, transparent); padding: 8px; border-radius: var(--feld-radius); }
  .druck-aktionen .knopf { flex: 1; }
  .druck-blatt { padding: 16px 14px; font-size: 14px; }
  .druck-kopfzeile { flex-direction: column; }
  .druck-linie.breit { min-width: 0; width: 100%; display: block; }
  .druck-tabelle td.antwort { width: 90px; }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .start-karte { padding: 20px 16px; }
  .start-seite { padding: 12px; }
  .probe-band { font-size: 13px; padding: 6px 10px; }
}

/* ---------- Eingebettet in die Website der Apotheke (04.10.2026) ----------
   Der Kopf mit Logo entfällt (die Apotheken-Website trägt ihr eigenes), der Hintergrund ist
   durchsichtig, Dialoge stehen oben im Rahmen. Mindesthöhen aus, damit der Rahmen schrumpfen kann. */
.eingebettet body { background: transparent; min-height: 0; }
.eingebettet .oeffentlich { padding-top: 4px; padding-bottom: 16px; min-height: 0; }
.eingebettet .apo-kopf { display: none; }
.eingebettet .modal-hintergrund { align-items: flex-start; }
.eingebettet .modal { margin-top: 0; margin-bottom: 0; }
.eingebettet .start-seite, .eingebettet .lade-seite { min-height: 0; }