/* akut-content-v1.css — neue Komponenten-Styles aus docs/akutbaeume-final.md.
   Source-of-Truth für Build-Source-Doku. Nutzt bestehende Tokens aus tokens-v2.css,
   keine Token-Eingriffe. Chris kann diese Styles später nach app.css mergen. */

/* ===================================================================
   Lebensgefahr-Top-Banner (partials/_emergency-banner.html)
   Spec: docs/akutbaeume-final.md §0.6. Dauerhaft oben in jedem Akut-Screen.
   =================================================================== */
.emergency-banner-top {
  display: flex;
  align-items: center;
  gap: var(--loma-space-3);
  padding: 0.6rem var(--loma-space-3);
  background: var(--loma-feedback-attention, #c8401f);
  color: #fff;
  text-decoration: none;
  font-family: var(--loma-font-product);
  font-weight: 600;
  font-size: var(--loma-text-md);
  line-height: 1.25;
  min-height: 44px;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  /* Sticky top — bleibt sichtbar, wenn der Akut-Screen scrollt. */
  position: sticky;
  top: 0;
  z-index: 50;
}
.emergency-banner-top:hover,
.emergency-banner-top:focus-visible {
  background: var(--loma-feedback-attention-strong, #a8341a);
  outline: none;
}
.emergency-banner-top__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #fff;
}
.emergency-banner-top__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.emergency-banner-top__text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emergency-banner-top__caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #fff;
  opacity: 0.85;
}

/* Anti-FOUC: include-Container halten Mindesthöhe bis JS lae:dt. */
[data-include]:empty {
  min-height: 44px;
  display: block;
}
[data-include="_disclaimer"]:empty,
[data-include="_outcome-l4-hausarzt"]:empty,
[data-include="_outcome-l5-beobachten"]:empty {
  min-height: 0;
}

/* ===================================================================
   Universal-Disclaimer-Footer (partials/_disclaimer.html)
   Pflicht auf JEDEM Akut-Screen. Spec: §0.4.
   =================================================================== */
.loma-disclaimer {
  margin: var(--loma-space-4) 0 var(--loma-space-3);
  padding: var(--loma-space-3);
  background: var(--loma-surface-sunken, #efece6);
  border-radius: var(--loma-radius-md, 12px);
  font-family: var(--loma-font-product);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--loma-text-secondary, #5a5852);
}
.loma-disclaimer strong {
  color: var(--loma-text-primary, #2a2825);
  font-weight: 700;
}

/* ===================================================================
   Outcome-Klassen-Footer (partials/_outcome-l*.html)
   5 Outcome-Klassen: L1-112 / L2-NA-heute / L3-Arzt-heute / L4-Hausarzt-24h / L5-Beobachten.
   Spec: §0.1 + §0.2 + §0.3.
   =================================================================== */
.loma-outcome {
  margin: var(--loma-space-4) 0 var(--loma-space-3);
  padding: var(--loma-space-3) var(--loma-space-3) var(--loma-space-4);
  background: var(--loma-surface-card, #fff);
  border-radius: var(--loma-radius-lg, 16px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.loma-outcome__head {
  display: flex;
  align-items: center;
  gap: var(--loma-space-3);
  margin-bottom: var(--loma-space-2);
}
.loma-outcome__chip {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--loma-surface-sunken, #efece6);
  color: var(--loma-brand-sage-dark, #4d6655);
}
.loma-outcome__chip svg {
  width: 20px;
  height: 20px;
  display: block;
}
.loma-outcome__title {
  margin: 0;
  font-family: var(--loma-font-brand);
  font-size: var(--loma-text-lg, 1.1rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--loma-text-primary, #2a2825);
}
.loma-outcome__body {
  margin: var(--loma-space-2) 0;
  font-family: var(--loma-font-product);
  font-size: var(--loma-text-md);
  line-height: 1.5;
  color: var(--loma-text-primary, #2a2825);
}
.loma-outcome__recheck {
  margin-top: var(--loma-space-3);
  padding: var(--loma-space-3);
  background: var(--loma-surface-sunken, #efece6);
  border-radius: var(--loma-radius-md, 12px);
}
.loma-outcome__recheck-head {
  margin: 0 0 var(--loma-space-2);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--loma-text-secondary, #5a5852);
}
.loma-outcome__recheck-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--loma-text-secondary, #5a5852);
}
.loma-outcome__recheck-list li {
  margin-bottom: 0.25rem;
}

/* Outcome-Klasse L2 „Notaufnahme heute" — Orange-Chip (Warn-Token). */
.loma-outcome--l2 .loma-outcome__chip {
  background: var(--loma-status-warn-soft, #FAF4E8);
  color: var(--loma-status-warn-text, #B8924A);
}

/* Outcome-Klasse L3 „Arzt heute" — Gelb-Chip (leichteres Warn-Token, Stethoskop). */
.loma-outcome--l3 .loma-outcome__chip {
  background: var(--loma-status-warn-soft, #FAF4E8);
  color: var(--loma-status-warn-text, #B8924A);
}

/* ===================================================================
   5-Kachel-Akut-Startseite (akut.html)
   Spec: §1.1 — 4 Kacheln im 2x2-Grid + 5. Single-Row-Kachel.
   =================================================================== */
.akut-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--loma-space-3);
  margin-top: var(--loma-space-3);
}
.akut-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--loma-space-2);
  padding: var(--loma-space-3);
  background: var(--loma-surface-card, #fff);
  border-radius: var(--loma-radius-lg, 16px);
  text-decoration: none;
  color: var(--loma-text-primary, #2a2825);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  min-height: 128px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.akut-tile:hover,
.akut-tile:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  outline: none;
}
.akut-tile--wide {
  grid-column: 1 / -1;
}
.akut-tile__icon {
  width: 32px;
  height: 32px;
  color: var(--loma-brand-sage-dark, #4d6655);
}
.akut-tile__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.akut-tile__title {
  font-family: var(--loma-font-brand);
  font-size: var(--loma-text-lg, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
}
.akut-tile__sub {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--loma-text-secondary, #5a5852);
}

/* ===================================================================
   Emergency-Modal (emergency-modal.html) — 10 Direkt-112-Buttons.
   Spec: §0.6 Sektion B. No-Decision-Form für akute Lebensgefahr-Symptome.
   =================================================================== */
.emergency-modal__intro {
  margin: var(--loma-space-3) 0;
  font-size: var(--loma-text-md);
  line-height: 1.4;
}
.emergency-modal__list {
  display: flex;
  flex-direction: column;
  gap: var(--loma-space-2);
  margin: var(--loma-space-3) 0;
}
.emergency-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--loma-space-3);
  padding: var(--loma-space-3);
  background: #fff;
  border-radius: var(--loma-radius-md, 12px);
  border: 1px solid var(--loma-feedback-attention, #c8401f);
  text-decoration: none;
  color: var(--loma-text-primary, #2a2825);
  min-height: 56px;
}
.emergency-modal__row:hover,
.emergency-modal__row:focus-visible {
  background: var(--loma-feedback-attention, #c8401f);
  color: #fff;
  outline: none;
}
.emergency-modal__row-title {
  font-weight: 700;
  font-size: var(--loma-text-md);
}
.emergency-modal__row-sub {
  font-size: 0.8rem;
  margin-top: 2px;
  opacity: 0.8;
}
.emergency-modal__call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: var(--loma-feedback-attention, #c8401f);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ===================================================================
   Verwirrtheit-Tree — 4AT-Score-Liste + DELIRIUMS-Trigger-Reihe.
   Spec: §3.B.2.1. Keine Punkte-Visualisierung (Backend-Scoring).
   =================================================================== */
.delirium-trigger-row {
  display: flex;
  align-items: center;
  gap: var(--loma-space-3);
  padding: var(--loma-space-3);
  background: #fff;
  border-radius: var(--loma-radius-md, 12px);
  margin-bottom: var(--loma-space-2);
  text-decoration: none;
  color: var(--loma-text-primary, #2a2825);
  border: 1px solid transparent;
  transition: border-color 120ms ease;
}
.delirium-trigger-row:hover,
.delirium-trigger-row:focus-visible {
  border-color: var(--loma-brand-sage-dark, #4d6655);
  outline: none;
}
.delirium-trigger-row__letter {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--loma-brand-sage-dark, #4d6655);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
}
.delirium-trigger-row__body {
  flex: 1 1 auto;
}
.delirium-trigger-row__body strong {
  display: block;
  font-weight: 700;
  font-size: var(--loma-text-md);
  margin-bottom: 2px;
}
.delirium-trigger-row__body small {
  display: block;
  font-size: 0.85rem;
  color: var(--loma-text-secondary, #5a5852);
}

/* Voice-Button (Sprachausgabe der Warte-Anweisungen, Pflicht auf L1-112-Outcomes) */
/* Spec: docs/akutbaeume-final.md §0.5 Voice-Skript-Strategie (c) Hybrid.            */
.voice-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 18px;
  border: 1.5px solid var(--loma-ink, #1a1a1a);
  border-radius: 999px;
  background: transparent;
  color: var(--loma-ink, #1a1a1a);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.voice-button:hover { background: rgba(0, 0, 0, 0.04); }
.voice-button:active { transform: translateY(1px); }
.voice-button svg { width: 20px; height: 20px; fill: currentColor; }
.voice-button__label { letter-spacing: 0.01em; }
.voice-button--speaking {
  background: var(--loma-sage-soft, #E8F0E5);
  border-color: var(--loma-sage, #5C7A4F);
  color: var(--loma-sage, #5C7A4F);
}
.voice-button--speaking .voice-button__label::after {
  content: " · läuft";
  font-weight: 400;
  opacity: 0.75;
}

/* Übergabe-Sektion (einklappbar, L1-Begleit-Checkliste pro Tree). */
/* Spec: docs/akutbaeume-final.md §0.5 — Pflicht-Block, einklappbar auf Mobil. */
.handover-details {
  margin-top: 14px;
  border: 1px solid var(--loma-border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: var(--loma-surface-soft, rgba(0, 0, 0, 0.02));
  overflow: hidden;
}
.handover-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.handover-details > summary::-webkit-details-marker { display: none; }
.handover-details > summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.handover-details[open] > summary::after { transform: rotate(-135deg); }
.handover-details > .card { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--loma-border, rgba(0, 0, 0, 0.08)); }

/* Reanimations-Schnellpfad-Button auf jedem L1-Notruf-Screen */
/* Spec: docs/akutbaeume-final.md §0.10 (Daten-Freeze 2026-06-30 Johan). */
.rea-quickaccess {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--loma-status-attention-soft, #F0DCD0);
  color: var(--loma-status-attention, #A85F3D);
  text-decoration: none;
  font-weight: 600;
  border: 1.5px solid var(--loma-status-attention, #A85F3D);
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
}
.rea-quickaccess__icon {
  flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: 50%; background: var(--loma-status-attention, #A85F3D);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.rea-quickaccess__icon svg { width: 20px; height: 20px; fill: currentColor; }
.rea-quickaccess__body { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.rea-quickaccess__body strong { display: block; font-weight: 700; font-size: 0.95rem; }
.rea-quickaccess__body small { display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.85; margin-top: 2px; }
.rea-quickaccess__caret { flex: 0 0 auto; width: 18px; height: 18px; fill: currentColor; opacity: 0.7; }