/* Seitengestaltung: medikamente-bestellen */
.mb-titel { margin: 0 0 0.75rem; font-size: 1.35rem; color: var(--text); }
.mb-h2 { margin: 0 0 0.6rem; font-size: 1.15rem; color: var(--text); }

.mb-status-box:not([hidden]) { margin: 0 0 var(--abstand-md); }
.mb-status-box[hidden] { display: none; }

.mb-state[hidden] { display: none; }
.zustand[hidden], .meldung[hidden] { display: none; }

/* Terminkarte */
.mb-karte { margin: 0 0 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--blue-dark); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.mb-karte--zu { border-left-color: var(--err); }
.mb-wann { margin: 0 0 0.25rem; font-size: 1.15rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.mb-ort { margin: 0 0 0.6rem; font-size: var(--fs-text); color: var(--text); overflow-wrap: anywhere; }
.mb-hinweistext { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: var(--blue-light); border: 1px solid var(--border-info); font-size: var(--fs-small); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mb-schluss { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--blue-light); border: 1px solid var(--border-info); }
.mb-karte--zu .mb-schluss { background: var(--bg-error); border-color: var(--border-error); }
.mb-schluss-gross { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.25; color: var(--blue-dark); overflow-wrap: anywhere; }
.mb-karte--zu .mb-schluss-gross { color: var(--text-error); }
.mb-rest { margin: 0.25rem 0 0; font-size: var(--fs-text); font-weight: 700; color: var(--text); }
.mb-rest:empty { display: none; }
.mb-schluss-hilfe { margin: 0.4rem 0 0; font-size: var(--fs-text); color: var(--text); }

.mb-wahl { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.mb-wahl legend { padding: 0; margin: 0 0 0.4rem; font-weight: 700; font-size: var(--fs-text); }
.mb-wahl-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mb-wahl-knopf { white-space: normal; }
.mb-wahl-knopf[aria-pressed="true"],
.mb-wahl-knopf[aria-pressed="true"]:hover:not(:disabled) { background: var(--blue-dark); color: var(--shell-text); border-color: var(--blue-dark); }

.mb-fuer { margin: 0 0 1rem; font-size: var(--fs-text); color: var(--text); overflow-wrap: anywhere; }

/* Zusammenfassung */
.mb-zusammen { margin: 0 0 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.mb-status { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.75rem; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--green-bg); border: 1px solid var(--border-ok); color: var(--text-ok); font-size: var(--fs-small); font-weight: 800; }
.mb-status--storno { background: var(--bg-error); border-color: var(--border-error); color: var(--text-error); }
.mb-nachtrag { margin: 0 0 0.75rem; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.mb-liste-lesen { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.mb-liste-lesen li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: var(--fs-text); }
.mb-liste-lesen strong { overflow-wrap: anywhere; min-width: 0; }
.mb-liste-lesen span { font-weight: 700; color: var(--blue-dark); overflow-wrap: anywhere; }
.mb-fakten { margin: 0 0 0.75rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; font-size: var(--fs-text); }
.mb-fakten dt { color: var(--muted); }
.mb-fakten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.mb-knoepfe { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.mb-knoepfe .knopf { width: 100%; white-space: normal; }
@media (min-width: 600px) { .mb-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mb-abgelehnt { margin: 0 0 1rem; padding: 1rem; background: var(--bg-error); border: 2px solid var(--border-error); border-radius: var(--radius); }
.mb-abgelehnt .mb-h2 { color: var(--text-error); }
.mb-grund { margin: 0 0 0.4rem; font-size: var(--fs-text); font-weight: 700; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mb-ersetzt { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: var(--blue-light); border: 1px solid var(--border-info); font-size: var(--fs-text); font-weight: 600; color: var(--blue-dark); }
.mb-hinweis-zu { margin: 0 0 1rem; font-size: var(--fs-text); }

/* Formular */
.mb-abschnitt { margin: 0 0 1.5rem; }
.mb-gewaehlt { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.mb-leerzeile { margin: 0 0 0.75rem; font-size: var(--fs-text); color: var(--muted); }
.mb-pos { min-width: 0; padding: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--blue-mid); border-radius: 0.5rem; }
.mb-pos-name { margin: 0; font-size: var(--fs-text); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mb-pos-info { margin: 0.15rem 0 0.5rem; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.mb-menge { display: flex; align-items: center; gap: 0.4rem; }
.mb-menge input { flex: 0 1 6rem; min-width: 4rem; text-align: center; font-weight: 700; }
.mb-schritt { flex: none; min-width: var(--tap-min); padding-left: 0; padding-right: 0; font-size: 1.4rem; line-height: 1; }
.mb-einheit { min-width: 0; font-size: var(--fs-text); font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.mb-weg { margin-top: 0.5rem; white-space: normal; }
.mb-fehler { margin: 0.35rem 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-error); }
.mb-fehler:empty { display: none; }
.mb-hilfe { margin: 0.3rem 0 0; font-size: var(--fs-small); color: var(--muted); }

.mb-picker-knopf { width: 100%; white-space: normal; }
.mb-picker { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--blue-light); }
.mb-treffer-zahl { margin: 0 0 0.6rem; font-size: var(--fs-small); color: var(--muted); }
.mb-treffer { margin: 0 0 0.6rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.mb-treffer li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; min-width: 0; padding: 0.6rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; }
.mb-treffer-text { flex: 1 1 8rem; min-width: 0; }
.mb-treffer .mb-pos-info { margin: 0.1rem 0 0; }
.mb-treffer .mb-pos-name { font-size: var(--fs-text); }
.mb-treffer .knopf { flex: 0 0 auto; white-space: normal; }
.mb-mehr { width: 100%; white-space: normal; }

#mb-form input, #mb-form select, #mb-form textarea, #mb-form button, #mb-form fieldset { scroll-margin-top: 5rem; scroll-margin-bottom: 6rem; }
.mb-fieldset { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.mb-fieldset legend { padding: 0; margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.mb-optionen { display: grid; gap: 0.5rem; }
.mb-option { display: flex; align-items: center; gap: 0.75rem; margin: 0; min-height: 3.25rem; padding: 0.6rem 0.9rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-text); font-weight: 700; cursor: pointer; }
.mb-option input { flex: none; width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; margin: 0; accent-color: var(--blue-dark); }
.mb-option:has(input:checked) { border-color: var(--blue-dark); background: var(--blue-light); }
.mb-option input:focus-visible { outline: none; }
.mb-option:has(input:focus-visible) { outline: 3px solid var(--blue-mid); outline-offset: 2px; }
.mb-unterfeld { margin-top: 0.75rem; }

.mb-fehlerbox { margin: 0 0 1rem; font-size: var(--fs-text); font-weight: 600; overflow-wrap: anywhere; }
.mb-fehlerbox:not(:empty) { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--bg-error); border: 1px solid var(--border-error); color: var(--text-error); }
.mb-fehlerbox:focus { outline: 3px solid var(--blue-mid); outline-offset: 2px; }

.mb-leiste { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0 -0.5rem; padding: 0.5rem; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--schatten-schwebend); }
.mb-leiste-text { flex: 1 1 6rem; margin: 0; font-size: var(--fs-small); font-weight: 700; line-height: 1.3; }
.mb-leiste .knopf { flex: 0 0 auto; max-width: 100%; white-space: normal; }
.mb-abbrechen { margin-top: 0.75rem; width: 100%; white-space: normal; }

/* Bitte bestätigen / Frühere Ausgaben */
.mb-best { margin: 0 0 1.25rem; padding: 1rem; background: var(--blue-light); border: 2px solid var(--blue-dark); border-radius: var(--radius); }
.mb-best-intro { margin: 0 0 0.75rem; font-size: var(--fs-text); color: var(--text); }
.mb-karten { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.mb-mkarte { min-width: 0; padding: 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; }
.mb-mkarte h3 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--text); overflow-wrap: anywhere; }
.mb-mkarte-zeile { margin: 0 0 0.4rem; font-size: var(--fs-text); color: var(--text); overflow-wrap: anywhere; }
.mb-mkarte .mb-liste-lesen li { align-items: baseline; }
.mb-abw { flex-basis: 100%; margin: 0; padding: 0.15rem 0.5rem; border-radius: 0.4rem; background: var(--bg-error); border: 1px solid var(--border-error); color: var(--text-error); font-size: var(--fs-small); font-weight: 800; }
.mb-stand { margin: 0.25rem 0 0; font-size: var(--fs-text); font-weight: 700; color: var(--blue-dark); overflow-wrap: anywhere; }
.mb-mkarte .knopf { width: 100%; margin-top: 0.5rem; white-space: normal; }
.mb-mkarte .mb-fehlerbox { margin: 0.5rem 0 0; }
.mb-meine-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface); font-size: var(--fs-small); color: var(--muted); }
.mb-meine-fehler p { flex: 1 1 12rem; margin: 0; }
.mb-frueher { margin: 1.5rem 0 0; }
.mb-frueher h2 { margin: 0 0 0.6rem; }
.mb-frueher-knopf { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; white-space: normal; text-align: left; }
.mb-pfeil { flex: none; transition: transform 0.15s ease; }
.mb-frueher-knopf[aria-expanded="true"] .mb-pfeil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mb-pfeil { transition: none; } }

/* Dialog */
.mb-overlay[hidden] { display: none; }
.mb-overlay { align-items: start; overflow-y: auto; }
@media (min-width: 600px) { .mb-overlay { align-items: center; } }
.mb-modal { max-inline-size: 34rem; }
.mb-modal__header { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-sm); }
.mb-modal__header .dialog__titel { margin: 0; overflow-wrap: anywhere; }
.mb-modal__header .dialog__titel:focus { outline: none; }
.mb-modal__header .knopf { flex: none; }
.mb-aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.mb-aktionen .knopf { flex: 1 1 10rem; white-space: normal; }
.mb-dlg-fehler { margin-top: 1rem; font-size: var(--fs-text); font-weight: 600; overflow-wrap: anywhere; }
.mb-dlg-fehler:not(:empty) { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--bg-error); border: 1px solid var(--border-error); color: var(--text-error); }
.mb-dlg-fehler:focus { outline: 3px solid var(--blue-mid); outline-offset: 2px; }


/* Fehlerzustand von Eingaben, auch bei Feldern, die das Skript erzeugt */
[aria-invalid="true"] { border-color: var(--farbe-fehler); background: var(--farbe-fehler-bg); }