/* notfallmanagement.css: Notfallmanagement (nur Tokens und Bausteine).
   Notfälle sind sicherheitsrelevant: Status immer mit Wort, dazu Symbol oder Text, nie nur Farbe. */

.page { max-width: 1200px; }
.page__header { justify-content: space-between; flex-wrap: wrap; }
.page__header-left { display: flex; gap: var(--abstand-md); align-items: flex-start; }
.kopf-symbol--notfall { color: var(--farbe-notfall); }

.toolbar input { flex: 1; min-width: 200px; }
.toolbar select { min-width: 160px; }
.toolbar label.toolbar__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-sm);
  font-size: var(--fs-text);
  min-height: var(--tap-min);
  white-space: nowrap;
  color: var(--text);
}
/* Checkboxen dürfen NICHT die allgemeine input-Regel (flex:1, min-width:200px) erben */
.toolbar input[type="checkbox"],
.detail-field input[type="checkbox"] {
  flex: none;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
}
.toolbar .btn .symbol,
.btn-row .knopf .symbol,
.schnellmeldung .btn .symbol,
.reiter .symbol { inline-size: 1.25em; block-size: 1.25em; }

/* Reiter: Notfälle / Ungesichert */
.reiter {
  display: flex;
  gap: var(--abstand-sm);
  margin-bottom: var(--abstand-md);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.reiter .btn {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: none;
  color: var(--text);
}
.reiter .btn[aria-current="true"] {
  border-bottom-color: var(--blue-dark);
  color: var(--blue-dark);
}
.zahl-ungesichert { border-radius: var(--radius-rund); padding: 0 var(--abstand-sm); }
.zahl-ungesichert.hat-eintraege { font-weight: 600; background: var(--farbe-warn-bg); color: var(--farbe-warn); }

/* Schnellmeldung */
.schnellmeldung {
  display: flex;
  gap: var(--abstand-sm);
  flex-wrap: wrap;
  padding: var(--abstand-md);
  margin-bottom: var(--abstand-md);
  background: var(--farbe-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-karte);
}
.schnellmeldung input { flex: 1; min-width: 200px; }
#schnell-ergebnis { display: flex; flex-direction: column; gap: var(--abstand-sm); margin-bottom: var(--abstand-md); }
#schnell-ergebnis:empty { display: none; }
#schnell-ergebnis .btn { min-height: 48px; }

/* Kacheln */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--abstand-md);
}
.grid > .zustand { grid-column: 1 / -1; }

.kachel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--abstand-md);
  cursor: pointer;
  transition: transform var(--dauer-uebergang) var(--kurve), box-shadow var(--dauer-uebergang) var(--kurve);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-sm);
  position: relative;
}
.kachel:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-schwebend);
}
.kachel__bild-vorschau {
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-feld);
}
.kachel__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--abstand-sm); }
.kachel__id {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--schrift-gross);
  font-weight: 800;
  color: var(--blue-dark);
  cursor: pointer;
  text-align: left;
  min-height: var(--tippflaeche);
}
.kachel__name { font-size: var(--fs-text); font-weight: 600; color: var(--text); }
.kachel__standort { font-size: var(--fs-small); color: var(--muted); }
.kachel__beschreibung {
  font-size: var(--fs-text);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kachel__meta-row { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--abstand-sm); }

/* Marken auf der Kachel: immer Wort, dazu Symbol */
.badge .symbol { inline-size: 1em; block-size: 1em; margin-inline-end: var(--abstand-xs); }
.kachel__ungesichert-warnung {
  position: absolute;
  top: var(--abstand-sm);
  left: var(--abstand-sm);
  z-index: 2;
  box-shadow: var(--schatten-karte);
}

/* Wer hilft? (#1608): Zusage-Knöpfe, umbrechend */
.zusage-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); margin-block: var(--abstand-sm); }

/* Dialoge (Dialog-Baustein) */
.dialog--detail { max-inline-size: 48.75rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.dialog--breit { max-inline-size: 57.5rem; align-content: start; }
.dialog__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-md); }
.dialog__kopf .dialog__titel { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.dialog__kopf .dialog__titel:focus { outline: none; }
.dialog__kopf .knopf { flex: none; }

.uebernehmen-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-sm) var(--abstand-md);
  margin: 0 0 var(--abstand-md);
  padding: var(--abstand-md);
  background: var(--badge-bg);
  border: 1px solid var(--border-info);
  border-radius: var(--radius);
}
.uebernehmen-box p { margin: 0; font-weight: 600; color: var(--text); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-md) var(--abstand-lg);
  margin-bottom: var(--abstand-lg);
}
.detail-grid--oben { margin-top: var(--abstand-lg); }
@media (max-width: 640px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.detail-field label {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: var(--abstand-xs);
}
.detail-field input,
.detail-field textarea,
.detail-field select {
  width: 100%;
  padding: var(--abstand-sm) var(--abstand-md);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-feld);
  font-size: var(--fs-text);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.detail-field textarea { resize: vertical; min-height: 60px; }
.detail-field--full { grid-column: 1 / -1; }
.detail-field label.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-sm);
  text-transform: none;
  font-size: var(--fs-text);
  font-weight: 400;
  color: var(--text);
  min-height: var(--tippflaeche);
}
.detail-field--unten { align-self: end; }
/* Nicht bearbeitbare Felder: grau hinterlegt, Text bleibt lesbar */
.detail-field input:disabled,
.detail-field select:disabled,
.detail-field textarea:disabled {
  background-color: var(--farbe-neutral-bg);
  color: var(--farbe-text);
  border-color: var(--border);
  opacity: 1;
  -webkit-text-fill-color: var(--farbe-text);
  cursor: default;
}
/* Label-Zeile mit optionalem Stift-Symbol rechts */
.detail-field label:not(.checkbox-label) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--abstand-sm);
}
.detail-field .stift-icon {
  display: inline-flex;
  opacity: 0.8;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.detail-field .stift-icon .symbol { inline-size: 1em; block-size: 1em; }
.feld-zeile { display: flex; gap: var(--abstand-sm); }
.feld-zeile input { flex: 1; }
.feld-zeile .knopf { white-space: nowrap; }
.feld-wert { padding-top: var(--abstand-sm); }
.feld-hinweis { display: block; margin-top: var(--abstand-xs); font-size: var(--fs-small); color: var(--text); }

.section-title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--abstand-lg) 0 var(--abstand-sm);
  padding-bottom: var(--abstand-xs);
  border-bottom: 2px solid var(--blue-dark);
}
.section-title--erster { margin-top: 0; }
.titel-zusatz { font-size: var(--fs-tag); text-transform: none; color: var(--muted); }
.bild-galerie { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); margin-bottom: var(--abstand-sm); }
.bild-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-feld);
  border: 1px solid var(--border);
  cursor: pointer;
}
.upload-box {
  display: block;
  border: 2px dashed var(--border-input);
  border-radius: var(--radius-feld);
  padding: var(--abstand-md);
  text-align: center;
  font-size: var(--fs-text);
  color: var(--muted);
  cursor: pointer;
}
.upload-box:hover,
.upload-box:focus-within { border-color: var(--blue-mid); color: var(--blue-dark); }
.upload-box:focus-within { outline: var(--fokus-breite) solid var(--farbe-fokus); outline-offset: 2px; }

.kommentar-liste { display: flex; flex-direction: column; gap: var(--abstand-sm); margin-bottom: var(--abstand-md); max-height: 220px; overflow-y: auto; }
.kommentar-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  padding: var(--abstand-sm) var(--abstand-md);
  font-size: var(--fs-text);
}
.kommentar-item__meta { font-size: var(--fs-tag); color: var(--muted); margin-bottom: var(--abstand-xs); }
.kommentar-input-row { display: flex; gap: var(--abstand-sm); }
.kommentar-input-row textarea { flex: 1; min-height: 44px; }

.btn-row { display: flex; gap: var(--abstand-sm); flex-wrap: wrap; margin-top: var(--abstand-md); }
.btn-row a.knopf:hover { text-decoration: none; }
.telefon-masked { color: var(--muted); font-style: italic; }
.btn-wvas {
  background: var(--farbe-warn-bg);
  border-color: var(--farbe-warn-rand);
  color: var(--farbe-warn);
  white-space: nowrap;
}

/* Zusammenführen: Vergleich */
.diff-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-md); }
@media (max-width: 640px) { .diff-wrap { grid-template-columns: 1fr; } }
.diff-col h4 { display: flex; align-items: center; gap: var(--abstand-sm); font-size: var(--fs-small); margin-bottom: var(--abstand-sm); }
.diff-col h4 .symbol { flex: none; inline-size: 1.25em; block-size: 1.25em; }
.diff-col--entfernt h4 { color: var(--red); }
.diff-col--neu h4 { color: var(--green); }
.diff-field { padding: var(--abstand-xs) var(--abstand-sm); border-radius: var(--radius-feld); margin-bottom: var(--abstand-xs); font-size: var(--fs-small); }
.diff-field--entfernt { background: var(--red-bg); color: var(--farbe-fehler); border: 1px solid var(--farbe-fehler-rand); }
.diff-field--neu { background: var(--green-bg); color: var(--farbe-ok); border: 1px solid var(--farbe-ok-rand); }
.diff-hinweis { margin-bottom: var(--abstand-md); font-size: var(--fs-text); }

/* Meldungen im Meldungs-Baustein */
.meldung { margin-top: var(--abstand-md); font-weight: 600; }
.meldung:empty { display: none; }
.meldung-feld--seite { position: sticky; top: 4rem; z-index: 20; }
.meldung-feld--dialog { padding: 0; }
.meldung-feld--dialog:empty { display: none; }
.meldung-feld .meldung { margin-top: var(--abstand-sm); }
.status-hinweis { flex-basis: 100%; margin: 0; font-size: var(--fs-small); color: var(--muted); }
.abschluss-form { margin-top: var(--abstand-md); padding-top: var(--abstand-md); border-top: 1px solid var(--border); }

/* In WhatsApp teilen (#409) */
.knopf.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--abstand-sm) var(--abstand-md);
  background: var(--farbe-ok);
  border: 1px solid var(--farbe-ok);
  color: var(--farbe-text-auf-marke);
  font-size: var(--schrift-text);
  font-weight: 700;
  text-decoration: none;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}
.knopf.btn--whatsapp:hover,
.knopf.btn--whatsapp:focus { background: var(--farbe-ok); color: var(--farbe-text-auf-marke); filter: brightness(0.9); }
#teilen-neu { display: flex; flex-direction: column; gap: var(--abstand-sm); margin-top: var(--abstand-md); }
#teilen-neu:empty { display: none; }
#teilen-neu .btn { min-height: 48px; }
.teilen-hinweis { font-weight: 600; }
#schnell-ergebnis .meldung,
#teilen-neu .meldung { margin-top: 0; }

.foto-vorschau { display: flex; gap: var(--abstand-sm); flex-wrap: wrap; margin-top: var(--abstand-sm); }
.foto-vorschau img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-feld); border: 1px solid var(--border); }
.abschluss-hinweis { font-size: var(--fs-small); color: var(--muted); margin-top: var(--abstand-xs); }
.abschluss-hinweis--fehler { display: flex; align-items: center; gap: var(--abstand-sm); color: var(--farbe-fehler); }
.abschluss-hinweis--fehler .symbol { flex: none; inline-size: 1.25em; block-size: 1.25em; }
/* Abschlussdialog: Auswahl Pflegestelle/Endstelle, darf die allgemeinen input/label-Regeln nicht erben */
.abschluss-art { border: 0; padding: 0; margin: 0 0 var(--abstand-md); display: flex; flex-direction: column; gap: var(--abstand-xs); }
.abschluss-art legend { font-size: var(--fs-tag); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: var(--abstand-xs); padding: 0; }
.abschluss-art label { display: flex; align-items: center; justify-content: flex-start; gap: var(--abstand-sm); width: auto; min-height: 44px; margin: 0; text-align: left; font-size: var(--fs-text); font-weight: 600; color: var(--text); text-transform: none; cursor: pointer; }
.abschluss-art input[type="radio"] { flex: none; width: 1.2rem; height: 1.2rem; min-width: 0; margin: 0; padding: 0; }

.req { color: var(--red); }

/* Die globale .badge-Regel in components.css übertrifft die Baustein-Varianten; hier mit höherer Spezifität wieder gültig */
.badge.badge--ok { background: var(--farbe-ok-bg); color: var(--farbe-ok); border-color: var(--farbe-ok-rand); }
.badge.badge--warn { background: var(--farbe-warn-bg); color: var(--farbe-warn); border-color: var(--farbe-warn-rand); }
.badge.badge--fehler { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); border-color: var(--farbe-fehler-rand); }
.badge.badge--notfall { background: var(--farbe-notfall-bg); color: var(--farbe-notfall); border-color: var(--farbe-notfall-rand); }
.badge.badge--neutral { background: var(--farbe-neutral-bg); color: var(--farbe-neutral-text); border-color: var(--farbe-neutral-bg); }