/* ============================================================
   hautscreening.css — Hautkrebs-Screening (ADR-117): Körperbild, Fotos, Verlauf zum Wischen
   Farben nur aus farben.css. Am Handy: eine Spalte, Tippflächen mindestens 44 px.
   ============================================================ */
.hs-fenster { display: grid; gap: 12px; }
.hs-fenster h2 { margin: 0; }
.hs-leise { color: var(--text-leise); margin: 8px 0; }
.hs-text { white-space: pre-wrap; margin: 6px 0; line-height: 1.45; }
.hs-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.hs-knoepfe > .bs-knopf, .hs-knoepfe > .bs-knopf-leise { min-height: 48px; }
.hs-datei { display: none; }
.hs-anleitung { margin: 0; padding-left: 1.4rem; line-height: 1.5; }
.hs-anleitung li { padding: 4px 0; }

/* Körperbild: vorne und hinten nebeneinander, am Handy je halbe Breite */
.hs-koerper { display: flex; gap: 12px; justify-content: center; margin: 12px 0; }
.hs-koerper-ansicht { margin: 0; flex: 0 1 220px; text-align: center; }
.hs-koerper-ansicht figcaption { color: var(--text-leise); font-size: .85rem; margin-top: 4px; }
.hs-koerper-bild { width: 100%; height: auto; display: block; touch-action: manipulation; }
.hs-koerper-form { fill: var(--flow-karte-hell); stroke: var(--linie); stroke-width: .8; }
.hs-tippbar .hs-koerper-form { cursor: crosshair; }
.hs-punkt { cursor: pointer; }
.hs-punkt circle { fill: var(--primaer); stroke: var(--karte); stroke-width: .9; }
.hs-punkt text { fill: var(--auf-primaer); font-weight: 700; pointer-events: none; }
/* Farbe nur nach dem Termin (Kontrolle überfällig), nie nach dem Befund — keine Bewertung (ADR-117) */
.hs-punkt-faellig circle { fill: var(--rot); }
.hs-punkt-faellig text { fill: var(--auf-rot); }
.hs-punkt-erledigt circle { fill: var(--still); }
.hs-markiert { fill: none; stroke: var(--akzent); stroke-width: 1.4; }

/* Stellen einer Untersuchung */
.hs-stelle { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 12px; margin: 12px 0; }
.hs-stelle-erledigt { opacity: .75; }
.hs-stelle-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 16px;
  background: var(--rot); color: var(--auf-rot); font-weight: 700; }
.hs-stelle-titel { font-weight: 600; color: var(--text); flex: 1 1 auto; min-height: 44px; display: inline-flex; align-items: center; }
.hs-stelle-wann { color: var(--text-leise); }

/* Bilder */
.hs-bilder { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.hs-bild { display: block; color: var(--text-leise); text-decoration: none; }
.hs-bild img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); display: block; background: var(--flow-karte-hell); }
.hs-bild-text { display: block; font-size: .8rem; }
.hs-treffer { max-height: 50vh; overflow: auto; }

/* Verlauf: eine Reihe zum Wischen, jedes Bild rastet ein */
.hs-verlauf { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0 12px; }
.hs-verlauf-bild { flex: 0 0 min(80%, 360px); scroll-snap-align: center; margin: 0; }
.hs-verlauf-bild .hs-bild img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.hs-verlauf-bild figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-leise); margin-top: 6px; }
.hs-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hs-vergleich figure { margin: 0; }
.hs-vergleich .hs-bild img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.hs-vergleich figcaption { color: var(--text-leise); font-size: .85rem; margin-top: 4px; }

/* eHKS-Häkchen */
.hs-ehks { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 12px 0 0; cursor: pointer; }
.hs-haken { width: 26px; height: 26px; accent-color: var(--akzent); flex: 0 0 auto; }

@media (max-width: 600px) {
  .hs-knoepfe > .bs-knopf, .hs-knoepfe > .bs-knopf-leise { flex: 1 1 100%; }
  .hs-koerper { gap: 6px; }
  .hs-bild img { width: 30vw; height: 30vw; }
}

/* Fotos: ein Hauptweg „Fotos hinzufügen“, „Mit Kamera aufnehmen“ leise daneben (Endkontrolle 11.11.) */
.hs-foto-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0; }
.hs-foto-knoepfe > .bs-knopf, .hs-foto-knoepfe > .bs-knopf-leise { min-height: 52px; }
.hs-textknopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; background: none; border: 0;
  font: inherit; font-weight: 600; color: var(--akzent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hs-textknopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 8px; }
.hs-entfernen { color: var(--rot-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.hs-verlauf-bild figcaption { flex-wrap: wrap; }
.hs-verlauf-bild figcaption > span { white-space: nowrap; }
.hs-nur-kamera { justify-content: center; margin: 4px 0; }

/* Nächste Kontrolle: ruhige Auswahl statt vier gleicher Knöpfe */
.hs-kontrolle { margin-top: 10px; }
.hs-kontrolle .hs-leise { margin: 0 0 6px; }
.hs-kontrolle .bs-segment { display: flex; width: 100%; box-sizing: border-box; margin: 0 0 6px; }
.hs-kontrolle .bs-segment-teil { flex: 1 1 0; min-width: 0; min-height: 48px; padding-left: 4px; padding-right: 4px; white-space: nowrap; }

/* „Untersuchung abschließen“ steht am Ende der Seite, nach Fotos und Häkchen — nicht klebend */
.hs-am-ende { margin-top: 24px; }
.bs-hauptknopf.hs-am-ende { position: static; background: none; }

/* Am Handy: „Fotos hinzufügen“ über die volle Breite (mit Handschuhen gut zu treffen), die Kamera mittig darunter */
@media (max-width: 600px) {
  .hs-foto-knoepfe { flex-direction: column; align-items: stretch; gap: 4px; }
  .hs-foto-knoepfe > .bs-knopf, .hs-foto-knoepfe > .bs-knopf-leise { width: 100%; min-height: 56px; }
  .hs-foto-knoepfe > .hs-textknopf { align-self: center; }
}