/* Seiten-Stylesheet der Service-Seite "Sportunfall" (AP-DIREKT-04).
   Laedt ausschliesslich auf /pages/service/sportunfall/, deshalb duerfen die
   Farbwerte hier stehen statt in den geteilten Token-Gruppen von
   embedded/core/styles.css (css.instructions.md: "Feature-only values belong in
   the owning feature stylesheet"). Wandert der Notfall-Kasten spaeter auf
   Sportstaetten-Seiten, zieht er mitsamt dieser Tokens nach embedded/. */

:root {
  /* Alle Kontraste unten sind WCAG-2.x-Verhaeltnisse (sRGB-Relativluminanz),
     gemessen gegen den tatsaechlich darunterliegenden Farbwert: die
     Inhaltsspalte des Layout-Shells ist --card-bg ueber dem Seitenverlauf
     --page-bg-top/-mid/-bottom, also hell rgba(255,255,255,.78) ueber
     #fdfcff/#fff8f2/#eef5f5 und dunkel rgba(20,35,46,.82) ueber
     #0d1821/#101d27/#122531. Angegeben ist jeweils die Spanne ueber alle drei
     Verlaufsstufen, also inklusive des jeweils unguenstigsten Falls. */

  /* Notfall-Rot. Nur als Kante, Icon, Titel und sehr schwacher Flaechenton -
     kein grossflaechiger roter Hintergrund.
     Titel und Icon liegen auf dem getoenten Kastenhintergrund (8 % des Rots
     ueber der Inhaltsflaeche, siehe .tva-emergency-box):
     - hell   #b3261e auf rgb(245,236,235)-rgb(249,237,237): 5,63:1 bis 5,72:1.
     - dunkel #ff8a80 auf rgb(38,41,51)-rgb(39,43,53):       6,20:1 bis 6,36:1. */
  --tva-emergency-light: #b3261e;
  --tva-emergency-dark: #ff8a80;
}

/* ---------- Notfall-Kasten ---------- */

.tva-emergency-box {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tva-emergency-dark);
  border-radius: var(--radius-lg, 5px);
  /* Sehr schwacher Flaechenton statt roter Flaeche. Der Kastentext wird
     bewusst auf --ink gesetzt statt auf das gedaempfte --muted aus .tva-prose:
     --muted erreicht auf dem getoenten Untergrund im hellen Theme nur noch
     4,40:1 bis 4,47:1 und faellt damit unter das Minimum 4,5:1, waehrend --ink
     dort 11,60:1 bis 11,79:1 erreicht (dunkel 12,59:1 bis 12,90:1). */
  background: color-mix(in srgb, var(--tva-emergency-dark) 8%, transparent);
  color: var(--ink);
}

[data-theme="light"] .tva-emergency-box {
  border-left-color: var(--tva-emergency-light);
  background: color-mix(in srgb, var(--tva-emergency-light) 8%, transparent);
}

.tva-emergency-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tva-emergency-dark);
}

[data-theme="light"] .tva-emergency-box__title {
  color: var(--tva-emergency-light);
}

.tva-emergency-box__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.tva-emergency-box__list {
  margin: 0;
  padding-left: 20px;
}

.tva-prose .tva-emergency-box__list li,
.tva-prose .tva-emergency-box__note {
  color: var(--ink);
}

.tva-emergency-box__list li + li {
  margin-top: 8px;
}

.tva-emergency-box a {
  text-decoration: underline;
}

.tva-emergency-box__note {
  margin: 14px 0 0;
  font-style: italic;
}

/* ---------- Ablaufdiagramm (AP-DIREKT-05) ---------- */

.tva-sportunfall-diagram {
  margin: 24px 0 0;
}

/* Das Diagramm ist 343 x 2023 CSS-Pixel gross und im Hochformat gezeichnet,
   damit die 16-px-Schrift des Exports auf einem 375-px-Display nicht unter
   14 px faellt. Es wird deshalb nie hochskaliert: die globale Regel
   img { max-width: 100% } in styles.css verkleinert es nur, wenn die
   Inhaltsspalte schmaler als 343 px ist. */
.tva-sportunfall-diagram__image {
  margin-inline: auto;
}

.tva-sportunfall-diagram figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Textalternative des Diagramms: im Notfall darf niemand auf ein Bild
   angewiesen sein, deshalb steht der Ablauf zusaetzlich als Liste da - ohne
   Bild, ohne JavaScript lesbar. */
.tva-sportunfall-diagram-text {
  margin: 12px 0 0;
}

.tva-sportunfall-diagram-text > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.tva-sportunfall-diagram-text ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.tva-sportunfall-diagram-text ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

/* ---------- Schrittliste ---------- */

.tva-steps {
  /* Der sichtbare Nummernkreis ersetzt den Listenmarker, deshalb list-style:
     none. role="list" im Markup haelt die Listensemantik, die WebKit bei
     list-style: none sonst entfernt - die Nummer selbst ist aria-hidden, weil
     die Listenposition sie bereits ansagt. */
  --tva-steps-line-left: 32px;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tva-steps__item {
  position: relative;
  margin: 0;
}

.tva-steps__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 5px);
  background: var(--card-bg);
  color: inherit;
}

.tva-steps__link:hover,
.tva-steps__link:focus-visible {
  background: var(--accent-soft);
}

.tva-steps__number {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* --accent-solid/--accent-contrast sind bereits ein geprueftes Paar:
     hell #35536c auf #ffffff = 8,06:1, dunkel #8ec6e8 auf #0f1b25 = 9,46:1. */
  background: var(--accent-solid);
  color: var(--accent-contrast);
  font-weight: 700;
}

.tva-steps__body {
  display: grid;
  gap: 2px;
}

.tva-steps__title {
  font-weight: 700;
  color: var(--ink);
}

/* Der niedrigste Kontrastwert dieser Seite und deshalb hier vermerkt: --muted
   auf der Kachelflaeche 5,10:1 (dunkel 8,63:1), auf dem Hover-/Fokus-Ton
   --accent-soft 4,72:1 (dunkel 6,19:1) - beides ueber dem Minimum 4,5:1. */
.tva-steps__text {
  color: var(--muted);
  line-height: 1.55;
}

/* Die Verbindungslinie zwischen den Nummernkreisen macht die Reihenfolge auch
   visuell zu einem Ablauf. Sie fuellt genau den 12px-Grid-Gap zwischen zwei
   Eintraegen und entfaellt deshalb nach dem letzten Schritt. */
.tva-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tva-steps-line-left);
  width: 2px;
  height: 12px;
  background: var(--line);
}

/* ---------- Checkliste und Datenschutz-Hinweis ---------- */

.tva-checklist {
  padding-left: 20px;
}

.tva-checklist li + li {
  margin-top: 6px;
}

.tva-prose .tva-privacy-note {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent-solid);
  border-radius: 0 var(--radius-lg, 5px) var(--radius-lg, 5px) 0;
  background: var(--accent-soft);
  color: var(--ink);
}

/* ---------- Weiterfuehrende Seiten ---------- */

.tva-related-links {
  margin-top: 24px;
}

.tva-related-links__label {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--ink);
}

.tva-related-links ul {
  margin: 0;
  padding-left: 20px;
}

.tva-related-links a {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .tva-steps {
    --tva-steps-line-left: 30px;
  }

  .tva-steps__link {
    padding: 12px 14px;
  }

  .tva-emergency-box {
    padding: 16px;
  }
}