/* ============================================================
   Ergänzungen zu design/app.css (Fassung 2) für Teile, die die
   Vorlage nicht abdeckt. Gleiche Formensprache: flächig, kantig,
   Linien in Textfarbe. Keine Inline-Styles (Content-Security-Policy).
   ============================================================ */
[hidden] { display: none !important; }  /* app.css setzt display: flex auf .flaeche und .pfeile */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abstand-titel { padding-bottom: 20px; }
.abstand-oben { margin-top: 20px; }
.abstand-unten { margin-bottom: 20px; }

/* Kopfzeile: Abmelden ist ein Formular (CSRF) */
.kopf form.abmelden { display: flex; margin: 0; }
.kopf form.abmelden .block { height: 100%; }
.warnungen { padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }

/* Eingabeband */
.gruppe-feld { border: none; padding: 0; margin: 0; min-width: 0; }
.gruppe-feld legend { padding: 0; margin-bottom: 8px; }
.wahl input { padding: 0; border: none; }
details.mehr[open] > summary .pfeil::before { content: "↓ "; }
.schalter { cursor: pointer; }
.schalter:has(input:checked) .pfeil::before { content: "↓ "; }
.schalter:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.erweitert-felder { display: none; flex-direction: column; gap: 24px; border-top: var(--linie); padding-top: 28px; }
form:has(#erweitert:checked) .erweitert-felder { display: flex; }
.heilmittel-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-bottom: 12px; }

/* Ergebnis */
.status > * { min-width: 0; overflow-wrap: anywhere; }
main.haupt:focus { outline: none; }
.alternativen { border-top: var(--linie); }
.alternativen form { margin: 0; }
button.pfeilzeile { width: 100%; background: none; border: none; border-bottom: var(--linie); font: inherit; letter-spacing: inherit;
  text-align: left; color: var(--ink); cursor: pointer; }
.alternativen .pfeilzeile:first-of-type { border-top: none; }
.breite-spalte .zeile, .auskunft .zeile { grid-template-columns: 240px minmax(0, 1fr); }

/* Erfahrungsliste */
.tabelle-rahmen { overflow-x: auto; position: relative; }
table.liste { min-width: 760px; }
.textknopf { background: none; border: none; padding: 0; font: inherit; letter-spacing: inherit; color: var(--ink); cursor: pointer; text-align: left;
  white-space: normal; max-width: 100%; min-width: 0; }  /* Safari bricht Text in Knöpfen sonst nicht um */
.scan-knopf { display: inline-flex; align-items: center; gap: 10px; }
.scan-symbol { flex: none; }
table.liste .textknopf { white-space: nowrap; }  /* nur in der Tabelle; sonst wird die Seite auf dem Handy zu breit */
.textknopf:hover { text-decoration: underline; }

/* Anmeldung: die lizenzpflichtige Hausschrift gibt es erst nach der Anmeldung, hier die Ersatzschrift
   aus --font-primary (so fragt der Browser die gesperrten Schriftdateien gar nicht erst an) */
.ohne-hausschrift { --font-primary: 'DM Sans', 'Nunito', sans-serif; }
/* Anmeldung */
.anmeldung { grid-template-columns: minmax(0, 1fr); }
.anmeldung form { min-width: 0; }
.anmeldung-inhalt { width: 100%; max-width: var(--breite); display: flex; align-items: center; justify-content: center; gap: 64px; padding: 24px; }
.h-anmeldung { font-size: 40px; }
.illustration { display: none; width: 340px; }
@media (min-width: 900px) { .illustration { display: block; } }

@media (max-width: 760px) {
  .kopf form.abmelden { margin-left: auto; }
  .kopf form.abmelden .block { padding: 0 24px; margin-left: 0; }
  .heilmittel-zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 20px; }
  .breite-spalte .zeile, .auskunft .zeile { grid-template-columns: minmax(0, 1fr); }
  .h-anmeldung { font-size: 30px; overflow-wrap: break-word; }  /* bricht am weichen Trennstrich: „Verordnungs-prüfung“ */
  /* falls die Hausschrift nicht lädt, ist die Ersatzschrift breiter: Navigation in zwei Zeilen statt über den Rand,
     lange Einzelwörter in Überschriften („Erfahrungsliste“) umbrechen statt die Seite zu verbreitern */
  .kopf nav { flex-wrap: wrap; row-gap: 8px; }
  h1, h2 { overflow-wrap: break-word; }
}

/* Kopfzeile: zwischen 761 und 960 px (iPad hochkant) ist die einzeilige Kopfzeile zu breit;
   dort wie auf dem Handy die Navigation in eine zweite Zeile setzen. */
@media (min-width: 761px) and (max-width: 960px) {
  .kopf { height: auto; flex-wrap: wrap; gap: 0; }
  .kopf .logo { padding: 14px 15px; }
  .kopf form.abmelden { margin-left: auto; }
  .kopf form.abmelden .block { padding: 0 24px; }
  .kopf nav { order: 3; width: 100%; gap: 32px; padding: 12px 15px; border-top: var(--linie); }
}
/* sehr schmale Handys (320 px): Navigation darf umbrechen */
@media (max-width: 380px) {
  .kopf nav { flex-wrap: wrap; gap: 8px 20px; }
}
/* lange Pillen (z. B. „Stufe B · im Heilmittelkatalog genannt“) dürfen auf dem Handy umbrechen */
@media (max-width: 760px) {
  /* inline-block statt inline-flex: so bricht der Text auch in Safari um */
  .pille { display: inline-block; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
}

/* Barcode-Erfassung und Vorschlag */
.flaeche.weiss { background: var(--weiss); border: var(--linie); }
.flaeche.weiss ul { margin: 8px 0 0; padding-left: 1.2em; }
.flaeche.weiss li { margin-bottom: 4px; }
.laut-verordnung { grid-column: 1 / -1; font-size: 15px; margin: -4px 0 0; }
#scan-ergebnis, .laut-verordnung { overflow-wrap: anywhere; }  /* lange Heilmittel-Namen auf dem Handy */
.scan-dialog { border: var(--linie); border-radius: 0; padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); color: var(--ink); background: var(--weiss); }
.scan-dialog::backdrop { background: rgba(29, 29, 27, 0.6); }
.scan-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: var(--linie); }
.scan-kopf h3 { min-width: 0; }
.scan-kopf .textknopf { flex-shrink: 0; }   /* „Schließen“ nicht zusammendrücken; bei 320 px bricht die Überschrift um */
.scan-inhalt { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.scan-reiter { display: flex; gap: 0; border: var(--linie); }
.scan-reiter button { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; min-height: 48px; background: var(--weiss); border: none; border-right: var(--linie); font: inherit; letter-spacing: inherit; color: var(--ink); cursor: pointer; padding: 8px; }
.scan-reiter button:last-child { border-right: none; }
.scan-reiter button[aria-selected="true"] { background: var(--ink); color: var(--weiss); }
.scan-video { position: relative; background: var(--ink); aspect-ratio: 4 / 3; max-height: 50vh; max-height: 50dvh; overflow: hidden; }
.scan-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-video .rahmen { position: absolute; left: 6%; right: 6%; top: 34%; bottom: 34%; border: 3px solid var(--gelb); pointer-events: none; }
.scan-status { min-height: 1.5em; }
.scan-handscanner textarea { width: 100%; min-height: 96px; border: var(--linie); border-radius: 0; font: inherit; font-size: 16px; padding: 12px; resize: vertical; }
.scan-datei input[type=file] { font: inherit; }
@media (max-width: 400px) {
  .scan-kopf { padding: 12px 16px; }
  .scan-inhalt { padding: 16px; }
  .scan-reiter button { font-size: 16px; padding: 6px 4px; }
}