/* HYGIEIA Diktat – Gestaltung nach dem HYGIEIA-Designsystem
   Sechs Farben, Linien statt Schatten, Radien 6/4 px, 4-px-Raster, PP Object Sans 400/700. */

@font-face {
  font-family: "PP Object Sans";
  src: local("PP Object Sans"), url("/static/fonts/PPObjectSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Object Sans";
  src: local("PP Object Sans Bold"), url("/static/fonts/PPObjectSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-praxisweiss: #f3f2e8;
  --color-weiss: #ffffff;
  --color-diagnoseblau: #01233a;
  --color-hygieiablau: #5cdcff;
  --color-vitalorange: #ff8d6a;
  --color-balanceflieder: #ebacf9;
  --color-nebentext: rgba(1, 35, 58, 0.72);
  --color-linie: var(--color-diagnoseblau);
  --color-linie-auf-dunkel: rgba(243, 242, 232, 0.35);

  --radius-flaeche: 6px;
  --radius-schaltflaeche: 4px;
  --linie-normal: 1.5px;
  --linie-betont: 2px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  --schrift: "PP Object Sans", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  background: var(--color-praxisweiss);
  color: var(--color-diagnoseblau);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Kopfzeile */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-diagnoseblau);
  color: var(--color-praxisweiss);
}
.kopf-marke { height: 16px; width: auto; display: block; }
.kopf-titel { font-size: 15px; font-weight: 700; }

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  max-width: 576px;
  margin: 0 auto;
}
.ansicht { display: flex; flex-direction: column; gap: var(--space-4); }

/* Schrift */
p, h1 { margin: 0; }
.ueberzeile { font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.kartentitel { font-size: 18px; line-height: 1.3; font-weight: 700; }
.einleitung { font-size: 17px; line-height: 1.45; }
.klein { font-size: 15px; line-height: 1.4; }
.nebentext { color: var(--color-nebentext); }
.kennzahl { font-size: 64px; line-height: 0.9; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Karten und Kacheln */
.karte {
  background: var(--color-weiss);
  border: var(--linie-normal) solid var(--color-linie);
  border-radius: var(--radius-flaeche);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.kachel {
  border-radius: var(--radius-flaeche);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kachel.aufnahme { background: var(--color-vitalorange); }
.kachel.fertig { background: var(--color-diagnoseblau); color: var(--color-praxisweiss); }

.punkt {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: var(--color-diagnoseblau);
  vertical-align: 0;
  animation: blinken 1.2s steps(2, start) infinite;
}
@keyframes blinken { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .punkt { animation: none; } }

.pegel {
  height: 8px;
  border: var(--linie-normal) solid var(--color-diagnoseblau);
  border-radius: var(--radius-schaltflaeche);
  background: var(--color-weiss);
  overflow: hidden;
}
#pegel-balken { height: 100%; width: 0; background: var(--color-diagnoseblau); transition: width 80ms linear; }

/* Knöpfe */
.knopf {
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-schaltflaeche);
  border: var(--linie-normal) solid var(--color-diagnoseblau);
  cursor: pointer;
  text-align: center;
}
.knopf.haupt { background: var(--color-diagnoseblau); color: var(--color-praxisweiss); font-weight: 700; }
.knopf.neben { background: var(--color-weiss); color: var(--color-diagnoseblau); }
.knopf:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible + span {
  outline: var(--linie-betont) solid var(--color-diagnoseblau);
  outline-offset: 2px;
}
.knopf:disabled { cursor: default; color: var(--color-nebentext); border-color: var(--color-nebentext); background: var(--color-weiss); }

/* Umschalter Wiedervorstellung / Erstgespräch */
.umschalter { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.umschalter legend { grid-column: 1 / -1; margin-bottom: var(--space-2); padding: 0; }
.umschalter label { display: block; }
.umschalter input { position: absolute; opacity: 0; pointer-events: none; }
.umschalter span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: var(--linie-normal) solid var(--color-diagnoseblau);
  border-radius: var(--radius-schaltflaeche);
  background: var(--color-weiss);
  font-size: 15px;
  cursor: pointer;
}
.umschalter input:checked + span { background: var(--color-diagnoseblau); color: var(--color-praxisweiss); font-weight: 700; }
.umschalter input:checked + span::before { content: "✓ "; white-space: pre; }

/* Felder */
.feld { display: flex; flex-direction: column; gap: var(--space-2); }
select, textarea {
  font: inherit;
  font-size: 16px;
  color: var(--color-diagnoseblau);
  background: var(--color-weiss);
  border: var(--linie-normal) solid var(--color-diagnoseblau);
  border-radius: var(--radius-schaltflaeche);
  padding: var(--space-3);
  width: 100%;
}
select { min-height: 44px; }
textarea { resize: vertical; line-height: 1.45; min-height: 220px; }
textarea[readonly] { background: var(--color-praxisweiss); }

.einwilligung { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: 15px; }
.einwilligung input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--color-diagnoseblau); }

/* Arbeitsschritte */
.schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; }
.schritte li { display: flex; gap: var(--space-2); align-items: center; }
.kennzeichen {
  display: inline-block;
  min-width: 92px;
  text-align: center;
  font-size: 13px; line-height: 1.2; font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-schaltflaeche);
  border: var(--linie-normal) solid var(--color-nebentext);
  color: var(--color-nebentext);
  background: var(--color-weiss);
}
.kennzeichen::after { content: "Wartet"; }
li.laeuft .kennzeichen { background: var(--color-balanceflieder); border-color: var(--color-balanceflieder); color: var(--color-diagnoseblau); }
li.laeuft .kennzeichen::after { content: "In Arbeit"; }
li.erledigt .kennzeichen { background: var(--color-diagnoseblau); border-color: var(--color-diagnoseblau); color: var(--color-praxisweiss); }
li.erledigt .kennzeichen::after { content: "✓ Erledigt"; }

details summary { cursor: pointer; }
pre#transkript {
  white-space: pre-wrap;
  font-family: var(--schrift);
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  background: var(--color-weiss);
  border: var(--linie-normal) solid var(--color-diagnoseblau);
  border-radius: var(--radius-schaltflaeche);
  max-height: 240px;
  overflow: auto;
}

/* Hinweise und Fehler: Fläche bzw. Rahmen in Vitalorange, Text bleibt Diagnoseblau */
.hinweis {
  background: var(--color-hygieiablau);
  border-radius: var(--radius-flaeche);
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.hinweis .nebentext { color: var(--color-diagnoseblau); }
.meldung {
  background: var(--color-weiss);
  border: var(--linie-betont) solid var(--color-vitalorange);
  border-radius: var(--radius-flaeche);
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  display: flex; flex-direction: column; gap: var(--space-1);
}