/* Gesundheitsboard — freigegebene Richtung 21.08.2026: hell, ruhig, sachlich. */
:root {
  --blau: #2f6bed; --blau-dunkel: #204eb5; --blau-hell: #eaf1fe;
  --gruen: #16a34a; --rot: #dc2626; --orange: #ea580c; --lila: #7c3aed;
  --tinte: #1c2333; --gedaempft: #5b6472; --linie: #e4e8ef;
  --flaeche: #f5f7fa; --karte: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--flaeche); color: var(--tinte);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h3 { font-size: .92rem; margin: 1rem 0 .5rem; color: var(--gedaempft); }
.gedaempft { color: var(--gedaempft); }
.gruen { color: var(--gruen); } .rot { color: var(--rot); }

/* Kopf */
.kopf { background: var(--karte); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  max-width: 1280px; margin: 0 auto; padding: .6rem 1.2rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marke { font-size: 1.15rem; font-weight: 700; color: var(--tinte); }
.marke:hover { text-decoration: none; }
.marke-symbol { color: var(--blau); }
.hauptnav { display: flex; gap: .3rem; flex-wrap: wrap; }
.hauptnav a {
  padding: .55rem .85rem; color: var(--gedaempft); font-weight: 500;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover { color: var(--blau); text-decoration: none; }
.hauptnav a.aktiv { color: var(--blau); border-bottom-color: var(--blau); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.angemeldet { color: var(--gruen); font-size: .85rem; }

/* Personenzeile */
.personenzeile { background: var(--karte); border-bottom: 1px solid var(--linie); }
.personen-innen {
  max-width: 1280px; margin: 0 auto; padding: .55rem 1.2rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.personen-label { color: var(--gedaempft); font-weight: 600; margin-right: .4rem; }
.personenknopf {
  border: 1px solid var(--linie); background: var(--karte); color: var(--gedaempft);
  padding: .35rem .95rem .35rem .4rem; border-radius: 8px; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: .5rem;
}
/* Das Profilbild im Umschalter: klein, rund, immer gleich groß — auch wenn
   das Foto hochkant oder quer ist (object-fit schneidet mittig zu). */
.personenbild {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; background: var(--linie);
}
.personenbild-leer {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; line-height: 1;
}
.personenknopf.aktiv {
  background: var(--blau-hell); border-color: var(--blau); color: var(--blau);
  font-weight: 600;
}
.ki-hinweis {
  margin-left: auto; font-size: .8rem; color: var(--orange);
  border: 1px solid currentColor; border-radius: 6px; padding: .15rem .5rem;
}

/* Inhalt */
.inhalt { max-width: 1280px; margin: 1.2rem auto; padding: 0 1.2rem; }
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin-bottom: 1.2rem;
}
.raster { display: grid; gap: 1.2rem; }
.raster-oben { grid-template-columns: minmax(300px, 1fr) 2fr; }
.raster-unten { grid-template-columns: 1fr 1fr; }
.raster .karte { margin-bottom: 0; }
.karten-kopf { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.seiten-kopf { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Dateinamen wie „Auswertung_Allgemeintest_000463.pdf" haben keine
   Trennstelle. Ohne diese Regel schiebt so ein Name die ganze Seite am
   Handy nach rechts hinaus. */
.seiten-kopf h1 { min-width: 0; overflow-wrap: anywhere; }

/* Upload */
.ablagefeld {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  border: 2px dashed var(--linie); border-radius: 12px; padding: 1.6rem 1rem;
  text-align: center; cursor: pointer; color: var(--gedaempft);
}
.ablagefeld:hover, .ablagefeld.aktiv { border-color: var(--blau); background: var(--blau-hell); }
.ablage-symbol { font-size: 1.8rem; color: var(--blau); }
.dokliste { list-style: none; padding: 0; margin: 0; }
.dok-zeile { display: flex; align-items: center; border-bottom: 1px solid var(--linie); }
.dok-zeile .dok-link { flex: 1; border-bottom: 0; min-width: 0; }
/* Der Name darf die Zeile nicht sprengen — sonst bricht er in der schmalen
   Spalte Buchstabe für Buchstabe um. Eine Zeile, am Ende gekürzt. */
.dok-zeile .dok-name { min-width: 0; display: block; }
.dok-titel { display: block; overflow-wrap: break-word; }
.dok-meta {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin-top: .1rem;
}
.dok-loeschen {
  display: inline-flex; align-items: center; flex: none;
  color: var(--gedaempft); padding: .35rem; border-radius: 6px;
}
.dok-loeschen:hover { color: var(--rot); background: #fdeaea; text-decoration: none; }
.dokliste li a {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem;
  border-bottom: 1px solid var(--linie); color: inherit;
}
.dokliste li a:hover { background: var(--flaeche); text-decoration: none; }
.dok-symbol {
  background: #fdeaea; color: var(--rot); font-size: .7rem; font-weight: 700;
  padding: .35rem .4rem; border-radius: 6px;
}
.dok-name { flex: 1; }
.status {
  font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.status-neu { background: var(--blau-hell); color: var(--blau); }
.status-analysiert { background: #fef3e2; color: var(--orange); }
.status-geprueft { background: #e7f6ec; color: var(--gruen); }
.status-fehler { background: #fdeaea; color: var(--rot); }

/* Diagramm + Trend */
.verlauf-flex { display: flex; gap: 1.2rem; align-items: stretch; }
.diagramm-halter { flex: 1; min-width: 0; height: 300px; position: relative; }
.diagramm-gross { min-height: 340px; }
.trendkasten {
  flex: 0 0 240px; border: 1px solid var(--linie); border-radius: 10px;
  padding: .8rem 1rem; align-self: flex-start;
}
.trendzeile { display: flex; gap: .55rem; margin-bottom: .7rem; font-size: .88rem; }
.punkt { width: 9px; height: 9px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }
.punkt-ok { background: var(--gruen); }
.punkt-auffaellig { background: var(--orange); }
.param-wahl { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.param-chip input { accent-color: var(--blau); }
.param-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--linie); border-radius: 8px; padding: .3rem .6rem;
  font-size: .85rem; cursor: pointer;
}
.zeitraum-wahl { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.zeitraum-wahl button, .zeitraum-wahl a {
  border: 0; background: var(--karte); padding: .4rem .8rem; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--gedaempft);
}
.zeitraum-wahl .aktiv { background: var(--blau-hell); color: var(--blau); font-weight: 600; }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th {
  text-align: left; color: var(--gedaempft); font-weight: 600;
  background: var(--flaeche); padding: .5rem .6rem;
}
.tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--linie); }
.zeile-auffaellig td { background: #fff8f0; }
.tabelle-eingabe input[type=text], .tabelle-eingabe input:not([type=checkbox]) {
  width: 100%; min-width: 4.5rem;
}

/* Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 .2rem; }
.zeitleiste li {
  position: relative; padding: .45rem 0 .45rem 1.4rem;
  border-left: 2px solid var(--linie); margin-left: .4rem;
}
.zeitleiste li::before {
  content: ""; position: absolute; left: -6px; top: .95rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--karte); border: 2px solid var(--blau);
}
.zeit-datum { color: var(--blau); font-weight: 600; font-size: .85rem; display: block; }
.etikett {
  font-size: .72rem; padding: .12rem .5rem; border-radius: 999px;
  background: var(--blau-hell); color: var(--blau); margin-right: .3rem;
}
.etikett-labor { background: #e7f6ec; color: var(--gruen); }
.etikett-dokument { background: #f3e8ff; color: var(--lila); }
/* Blutdruck & Gefäße in der Zeitachse — eigene Farbe, damit ein Messtag auf
   den ersten Blick von einem Labortag zu unterscheiden ist. */
.etikett-kreislauf { background: var(--blau-hell); color: var(--blau-dunkel); }
.etikett-diagnose, .etikett-infekt, .etikett-beschwerde { background: #fdeaea; color: var(--rot); }
.etikett-medikament_begonnen, .etikett-medikament_abgesetzt { background: #fef3e2; color: var(--orange); }

/* Auffälligkeiten */
.auffaellig-kasten { margin-bottom: .8rem; }
.auffaellig-chip {
  display: inline-block; background: #fdeaea; color: var(--rot);
  border-radius: 8px; padding: .2rem .6rem; margin: .15rem .2rem; font-size: .85rem;
}

/* Formulare */
label { display: block; margin-bottom: .7rem; font-size: .9rem; }
input:not([type=checkbox]):not([type=file]), select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--linie);
  border-radius: 8px; font: inherit; background: var(--karte); color: var(--tinte);
  margin-top: .25rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blau-hell); border-color: var(--blau);
}
.formzeile { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
.formzeile label { flex: 1; min-width: 130px; margin: 0; }
.knopf {
  display: inline-block; background: var(--blau); color: #fff; border: 0;
  padding: .55rem 1.1rem; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer;
}
.knopf:hover { background: var(--blau-dunkel); text-decoration: none; }
.knopf[disabled] { background: var(--linie); color: var(--gedaempft); cursor: not-allowed; }
.knopf-schlicht {
  background: none; border: 1px solid var(--linie); border-radius: 8px;
  padding: .35rem .7rem; font: inherit; font-size: .85rem; color: var(--gedaempft);
  cursor: pointer;
}
.knopf-schlicht:hover { border-color: var(--blau); color: var(--blau); }
.knopf-schlicht.klein { font-size: .75rem; padding: .15rem .5rem; }
/* Zweiter Weg beim Hochladen: sichtbar als eigenständiges Angebot, aber
   nicht als zweiter Hauptknopf — die blaue Kamera trägt die Aufmerksamkeit
   (Auftrag Alex 22.08.2026). */
.knopf-foto {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--blau-hell); color: var(--blau);
  border: 1px solid var(--blau); border-radius: 8px;
  padding: .5rem .9rem; font: inherit; font-weight: 600; cursor: pointer;
}
.knopf-foto:hover { background: #dbeafe; text-decoration: none; }
.knopf-foto .kamera { color: var(--blau); flex: none; }
.inline-form { display: inline; }
.pfeil-link { display: inline-block; margin-top: .8rem; font-weight: 600; }

/* Meldungen */
.meldung { border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.meldung-ok { background: #e7f6ec; color: #14532d; }
.meldung-fehler { background: #fdeaea; color: #7f1d1d; }
.meldung-hinweis { background: #fef3e2; color: #7c2d12; }

/* KI-Kennzeichnung */
.ki-block { border-left: 4px solid var(--lila); }
.ki-etikett {
  display: inline-block; background: #f3e8ff; color: var(--lila);
  font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
  margin-bottom: .5rem;
}
.analyse-text { white-space: pre-wrap; }
.analyse-md h3, .analyse-md h4, .analyse-md h5 { margin: 1rem 0 .35rem; }
.analyse-md p { margin: .45rem 0; }
.analyse-md ul { margin: .45rem 0 .45rem 1.2rem; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kennzahl { margin: 0; }
.kennzahl strong { display: block; font-size: 1.25rem; margin-top: .2rem; }

/* Login */
.login-karte { max-width: 380px; margin: 8vh auto; text-align: center; }
.login-karte form { text-align: left; margin-top: 1.2rem; }
.login-karte .knopf { width: 100%; margin-top: .5rem; }

.leer { padding: 1.5rem 0; text-align: center; }
.fuss {
  max-width: 1280px; margin: 2rem auto 1.2rem; padding: 0 1.2rem;
  color: var(--gedaempft); font-size: .8rem; text-align: center;
}

/* Mobil */
@media (max-width: 980px) {
  .raster-oben, .raster-unten { grid-template-columns: 1fr; }
  /* Eine Rasterspalte ist von Haus aus mindestens so breit wie ihr
     sperrigster Inhalt („min-width: auto"). Am Handy schiebt das die ganze
     Seite nach rechts hinaus — sichtbar am Kasten „Befund hochladen", der
     die Breite seines Nachbarn erbt. Mit min-width: 0 darf die Spalte
     schrumpfen; was drinnen wirklich nicht schmaler kann, scrollt für sich
     (siehe .tabellen-halter). */
  .raster > * { min-width: 0; }
  .verlauf-flex { flex-direction: column; }
  .trendkasten { flex: none; }
  .kopf-innen { gap: .6rem; }
  .kopf-rechts { margin-left: 0; }
  .tabelle { display: block; overflow-x: auto; }
}

/* --- Diagnosen-Bereich + Korrekturen (21.08.2026) --- */
.neutral { color: var(--gedaempft); }
.punkt-neutral { background: var(--gedaempft); }
.farb-legende { font-size: .78rem; margin-top: .6rem; }

.auffaellig-gruppe { margin-top: .5rem; }
.gruppen-name {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--gedaempft); margin-right: .35rem; min-width: 6.5rem;
}
.chip-details { display: inline; }
.chip-details summary {
  display: inline-block; cursor: pointer; font-size: .78rem;
  color: var(--blau); margin-left: .2rem;
}

.diagnosen-liste { display: grid; gap: 1rem; }
.diagnose-karte { display: block; color: inherit; }
.diagnose-karte:hover { border-color: var(--blau); text-decoration: none; }
.diagnose-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.diagnose-kurz {
  margin: .4rem 0 .6rem; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.diagnose-fuss { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.auffaellig-zahl {
  margin-left: auto; background: #fdeaea; color: var(--rot);
  font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 99px;
}
.diagramm-gross { height: 360px; margin-top: .8rem; }
.ki-eintrag { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }

/* --- Profil + Medikamente & Supplemente (21.08.2026) --- */
.profil-flex { display: flex; gap: 1.2rem; align-items: center; }
.profilbild {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--linie); flex-shrink: 0;
}
.profilbild-leer {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; background: var(--blau-hell); color: var(--blau);
}
.datei-knopf { display: inline-block; cursor: pointer; margin-bottom: .6rem; }

.foto-karte { text-align: center; }
.foto-knopf {
  display: block; background: var(--blau); color: #fff; border-radius: 12px;
  padding: 1.1rem 1.2rem; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.foto-knopf:hover { background: var(--blau-dunkel); }
.praep-symbol { background: var(--blau-hell); color: var(--blau); font-size: 1rem; }

.bildergalerie { display: flex; gap: .8rem; flex-wrap: wrap; margin: .6rem 0; }
.bildkachel { margin: 0; max-width: 150px; text-align: center; font-size: .78rem; }
.bildkachel img {
  width: 150px; height: 150px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linie);
}
.summary-titel { display: inline; }
.aktion { border-top: 1px solid var(--linie); padding: .6rem 0; }
.aktion:first-of-type { border-top: 0; }
.aktion summary { cursor: pointer; font-weight: 600; color: var(--blau); }
.aktion form { margin-top: .8rem; }

@media (max-width: 980px) {
  .foto-knopf { padding: 1.3rem 1rem; }
  .profil-flex { flex-direction: column; text-align: center; }
  .bildkachel img { width: 110px; height: 110px; }
}

/* Wochentage der Einnahme — kleine Kästchen, am Handy mit der Daumenkuppe
   treffbar (Auftrag Alex 21.08.2026). Nichts angehakt = täglich. */
.wochentage { border: 0; margin: .8rem 0 0; padding: 0; }
.wochentage legend {
  padding: 0; font-size: .8rem; color: var(--gedaempft); font-weight: 600;
}
.wochentage-reihe { display: flex; gap: .4rem; flex-wrap: wrap; margin: .35rem 0 .3rem; }
.wochentag {
  display: flex; align-items: center; gap: .3rem; margin: 0;
  padding: .35rem .55rem; min-width: 0;
  border: 1px solid var(--linie); border-radius: 7px;
  background: var(--karte); cursor: pointer; user-select: none;
  font-size: .85rem; line-height: 1;
}
.wochentag input { margin: 0; width: 15px; height: 15px; accent-color: var(--blau); }
.wochentag:has(input:checked) {
  border-color: var(--blau); background: var(--blau-hell); font-weight: 600;
}

/* "Alle Tage" hebt sich leicht ab, damit die Sammelwahl erkennbar bleibt. */
.wochentag-alle { border-style: dashed; }
.wochentag-alle:has(input:checked) { border-style: solid; }

/* Herkunft eines Datums. Steht bei Diagnosen ohne eigenes Datum im Befund:
   Das Datum sagt dann "in diesem Bericht dokumentiert" und nicht "an diesem
   Tag entstanden" (Freigabe Alex 22.08.2026). */
.datum-herkunft {
  display: inline-block; margin-left: .35rem; padding: 0 .45rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--gedaempft);
  font-size: .72rem; font-weight: 600; white-space: nowrap; vertical-align: 1px;
}

/* Wartehinweis mit drehender Uhr während die App arbeitet (KI-Bilderkennung) */
.warten {
  display: flex; align-items: center; gap: .7rem;
  margin-top: .9rem; padding: .8rem .9rem;
  border: 1px solid var(--linie); border-left: 3px solid var(--blau);
  border-radius: 8px; background: var(--blau-hell);
}
.warten-uhr {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #c3d4f8; border-top-color: var(--blau);
  animation: warten-dreh .8s linear infinite;
}
@keyframes warten-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .warten-uhr { animation-duration: 2.4s; }
}
/* Zweistufig (Freigabe Alex 22.08.2026): erst Balken beim Übertragen — der
   Fortschritt ist dort gemessen —, danach die Uhr beim Auslesen, weil das
   Verarbeiten keinen messbaren Fortschritt hat. */
.warten-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.warten-balken {
  height: 8px; border-radius: 999px; background: #d6e2fb; overflow: hidden;
}
.warten-fuellung {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--blau); transition: width .15s linear;
}
.warten-aus { display: none !important; }
/* In einzeiligen Formularen (Dokumentenliste) gehört der Kasten unter die
   Zeile und nicht neben den Knopf — sonst quetscht er das Dateifeld. */
.formzeile .warten { flex-basis: 100%; }
.warten-fehler { border-left-color: var(--rot); background: #fdecec; }
.knopf-inaktiv { opacity: .55; pointer-events: none; }

/* Neues Präparat direkt von der Zusammenfassung aus erfassen */
.neu-erfassen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.knopf-erfassen { cursor: pointer; }
.knopf-still {
  background: var(--karte); color: var(--blau);
  border: 1px solid var(--linie);
}

/* Gegenüberstellung Packungsempfehlung <-> tatsächliche Tagesmenge.
   Bewusst neutral gehalten: kein Rot, keine Warnfarbe — es ist ein
   Zahlenvergleich, keine medizinische Bewertung. */
.abgleich {
  margin: .9rem 0 0; padding: .75rem .9rem; border-radius: 8px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--gedaempft);
}
.abgleich-gleich { border-left-color: var(--gruen); }
.abgleich-mehr, .abgleich-weniger { border-left-color: var(--orange); }

/* ===== Medizinischer Verlauf (21.08.2026) =========================
   Ruhige weiße Karten im bestehenden Stil — Alex' Designentscheidung vom
   21.08.2026: kein farbiger Kopfbalken, keine flächig eingefärbten Karten.
   Der Status steht in einem kleinen Punkt je Wert und in der leicht
   getönten Bewertungszeile unten. Automatisch erkannte Themen und selbst
   angeheftete Werte sehen absichtlich gleich aus; nur die kleine
   Herkunftszeile (✨ / 📌) unterscheidet sie. */

.karte-voll { width: 100%; }
.mv-kopfzeile { align-items: flex-start; margin-bottom: .2rem; }
.mv-unterzeile { margin: .15rem 0 0; color: var(--gedaempft); font-size: .9rem; }

/* Das Raster wächst von selbst: so viele Karten je Zeile wie passen, bei
   mehr Karten kommt eine weitere Zeile. Keine feste Zahl, kein Querscrollen. */
.mv-raster {
  display: grid; gap: .9rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.mv-karte {
  display: flex; flex-direction: column;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--karte); padding: .8rem .9rem .7rem;
}
.mv-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mv-kopf h3 { margin: 0; font-size: 1.02rem; }
.mv-loesen { margin: 0; }
.mv-x {
  border: 0; background: none; color: var(--gedaempft); cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 0 .15rem; border-radius: 4px;
}
.mv-x:hover { color: var(--rot); background: var(--flaeche); }
.mv-herkunft { margin: .1rem 0 .55rem; font-size: .74rem; color: var(--gedaempft); }

.mv-wert { padding: .42rem 0; border-top: 1px solid var(--linie); }
.mv-wert:first-of-type { border-top: 0; padding-top: .1rem; }
.mv-wert-kopf { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }

/* Die ganze Wertzeile führt auf die Parameterseite (Auftrag Alex 25.08.2026,
   Teil B). Der Parametername ist der Link; seine Fläche wird über die Zeile
   gezogen, damit man am Handy nicht die Schrift treffen muss. Bewusst ohne
   eigene Schaltfläche und ohne Farbwechsel am Namen — die Zeile soll aussehen
   wie vorher, nur reagieren. */
.mv-wert { position: relative; border-radius: 7px; }
.mv-wert-link { color: inherit; text-decoration: none; }
.mv-wert-link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
/* Sehr dezent: eine Spur Fläche, sonst nichts. Kein Rahmen, kein Versatz,
   keine Bewegung — die Karte darunter bleibt ruhig. */
@media (hover: hover) {
  .mv-wert:hover { background: var(--flaeche); }
}
.mv-wert:focus-within { background: var(--flaeche); }
.mv-wert-link:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
/* Die eigenen Bedienelemente der Zeile bleiben eigenständig: Sie liegen über
   der Linkfläche, sonst würde der ⓘ-Knopf ins Leere greifen. */
.mv-wert-kopf .info-halter,
.mv-wert-kopf .info-knopf,
.mv-wert-kopf .mv-loesen,
.mv-wert-kopf .mv-x { position: relative; z-index: 2; }
.mv-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--gedaempft); }
.mv-punkt-auf { background: var(--rot); }
.mv-punkt-ok { background: var(--gruen); }
.mv-punkt-neutral { background: var(--gedaempft); }
.mv-zahlen { display: flex; align-items: flex-end; gap: .35rem; flex-wrap: wrap; margin: .1rem 0 0 1.2rem; }
.mv-wertspalte { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.mv-werklabel {
  font-size: .64rem; color: var(--gedaempft); text-transform: uppercase;
  letter-spacing: .03em;
}
.mv-vorher { color: var(--gedaempft); }
.mv-pfeil { color: var(--gedaempft); padding-bottom: .1rem; }
.mv-jetzt { font-size: 1.14rem; font-weight: 600; }
.mv-nurtext { font-size: .95rem; font-weight: 500; color: var(--gedaempft); }
.mv-einheit { color: var(--gedaempft); font-size: .82rem; }
.mv-referenz, .mv-hinweis {
  margin-left: 1.2rem; font-size: .76rem; color: var(--gedaempft);
}
.mv-hinweis { font-style: italic; }
.mv-spark { margin: .25rem 0 0 1.2rem; color: var(--blau); line-height: 0; }
.spark { display: block; max-width: 100%; height: auto; }
.mv-weitere { margin: .45rem 0 0 1.2rem; }

/* Bewertungszeile: leicht getönt statt laut. Sie steht immer unten und
   schiebt sich per margin-top:auto auf gleiche Höhe, damit die Karten einer
   Zeile trotz unterschiedlich vieler Werte sauber abschließen. */
.mv-bewertung {
  margin: .7rem 0 .5rem; margin-top: auto; padding: .45rem .6rem;
  border-radius: 7px; font-size: .88rem; font-weight: 600;
  background: var(--flaeche); border-left: 3px solid var(--linie);
}
.mv-bewertung-1 { background: #fdecec; border-left-color: var(--rot); }
.mv-bewertung-2 { background: #fef4e8; border-left-color: var(--orange); }
.mv-bewertung-3 { background: #fdf6e3; border-left-color: #ca8a04; }
.mv-bewertung-4 { background: #eefaf1; border-left-color: var(--gruen); }
.mv-bewertung-5, .mv-bewertung-6 { background: var(--flaeche); border-left-color: var(--linie); }
.mv-karte .pfeil-link { font-size: .82rem; }
.mv-fuss { margin-top: .9rem; }

/* „+ Wert hinzufügen" — Auswahl NUR aus den Werten der eigenen Akte */
.mv-hinzu { position: relative; }
.mv-hinzu > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.mv-hinzu > summary::-webkit-details-marker { display: none; }
.mv-hinzu-feld {
  position: absolute; right: 0; z-index: 20; width: min(330px, 86vw);
  margin-top: .4rem; padding: .7rem; border: 1px solid var(--linie);
  border-radius: 10px; background: var(--karte);
  box-shadow: 0 10px 26px rgba(28, 35, 51, .13);
}
.mv-hinzu-feld input[type=search] {
  width: 100%; margin-top: .35rem; padding: .45rem .55rem;
  border: 1px solid var(--linie); border-radius: 7px; font: inherit;
}
.mv-liste { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 270px; overflow-y: auto; }
.mv-liste form { margin: 0; }
.mv-waehlbar {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; padding: .4rem .5rem; border: 0; border-radius: 7px;
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.mv-waehlbar:hover { background: var(--blau-hell); color: var(--blau); }
.mv-nichts { margin: .5rem 0 0; }

/* Tabelle „Letzte Veränderungen" über die volle Breite */
.tabellen-halter { overflow-x: auto; }
.tabelle-veraenderung { width: 100%; }
.tabelle-veraenderung td, .tabelle-veraenderung th { white-space: nowrap; }

@media (max-width: 700px) {
  .mv-raster { grid-template-columns: 1fr; }
  .mv-hinzu-feld { position: static; width: 100%; box-shadow: none; }
}
.mv-pin { font-size: .72rem; line-height: 1; }
.mv-x-klein { font-size: .95rem; margin-left: -.15rem; }
.mv-wert-kopf .mv-loesen { display: inline; }

/* Auf der Startseite bekommt der medizinische Verlauf mehr Platz als die
   Upload-Spalte — dort stehen die Karten, hier nur ein Ablagefeld und drei
   Dokumentzeilen. Andere Seiten mit .raster-oben bleiben unberührt. */
@media (min-width: 981px) {
  .raster-uebersicht { grid-template-columns: minmax(270px, .8fr) 3fr; }
}

/* Befundseiten fotografieren + Löschen (Freigabe Alex 22.08.2026) --------- */
.foto-weg { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.formzeile .foto-weg { flex-direction: row; align-items: center; flex-wrap: wrap; }
.foto-weg > label.knopf { align-self: start; }
.foto-liste { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .2rem; }
.foto-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--flaeche); border-radius: 6px; padding: .3rem .5rem;
  font-size: .82rem;
}
.foto-absenden { display: flex; gap: .5rem; flex-wrap: wrap; }
/* WICHTIG: Ein display-Wert aus einer Klasse schlaegt das
   hidden-Attribut. Ohne diese Zeile stuenden Liste und Absendeknopf
   schon da, bevor ueberhaupt ein Foto gewaehlt ist. */
.foto-liste[hidden], .foto-absenden[hidden] { display: none; }
.knopf-gefahr { background: var(--rot); }
.knopf-gefahr:hover { background: #b91c1c; }
.gefahr-link { color: var(--rot); font-size: .85rem; }
/* Löschen ist auffindbar, lädt aber nicht zum Klicken ein — die
   gefüllte rote Fläche bleibt der Bestätigung vorbehalten. */
.knopf-gefahr-leise { color: var(--rot); border-color: #f3c9c9; }
.knopf-gefahr-leise:hover { border-color: var(--rot); color: var(--rot);
  background: #fdeaea; }
.seitenbilder {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.seitenbilder figure { margin: 0; }
.seitenbilder img {
  width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche);
}
.seitenbilder figcaption { font-size: .78rem; margin-top: .2rem; }
.loeschliste { margin: .4rem 0 .9rem 1.1rem; }
.loeschliste li { margin-bottom: .35rem; }

/* Dublettenprüfung in der Prüfansicht + Scan-Auslesung (Auftrag Alex
   22.08.2026). Bewusst leise: eine getönte Zeile und ein kleines Etikett,
   keine neue Farbwelt. */
.zeile-vorhanden { background: var(--flaeche); }
.zeile-vorhanden td { color: var(--gedaempft); }
.zeile-abweichend { background: #fdf6e3; }
/* Eigener Name — .etikett gehoert der Zeitleiste und bleibt unangetastet. */
.abgleich-etikett {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  border-radius: 6px; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.abgleich-vorhanden { background: var(--linie); color: var(--gedaempft); }
.abgleich-abweichend { background: #fde68a; color: #7c2d12; }
.abgleich-quellen { font-size: .76rem; margin-top: .15rem; }
.leseweg-hinweis { font-size: .82rem; margin: .6rem 0 0; }
.fehler-technik { margin-top: .4rem; font-size: .8rem; }
.fehler-technik summary { cursor: pointer; }

/* Bereich „Weitere Messwerte" — Messungen, die keine Laborwerte sind
   (Freigabe Alex 22.08.2026). Bewusst dieselbe Karte wie überall, nur klar
   abgesetzt: etwas Abstand nach oben und eine kräftigere Oberkante. */
.bereich-weitere { margin-top: 1.6rem; border-top: 3px solid var(--linie); }
.messwertart-titel {
  margin: 1.4rem 0 .5rem;
  font-size: 1rem;
  color: var(--tinte);
  font-weight: 600;
}
.messwertart-titel:first-of-type { margin-top: .8rem; }

/* Abschnittsüberschriften der Seite „Blutdruck & Gefäße" (Auftrag Alex
   24.08.2026). Sie trennen die Messverfahren sichtbar voneinander: dieselbe
   ruhige Schrift wie sonst, nur mit etwas mehr Luft nach oben. */
.bereichs-titel {
  margin: 1.8rem 0 .6rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinte);
}

/* Die Bezeichnungen der Blutdruckwerte tragen ihren Zeitpunkt im Namen und
   sind entsprechend lang. Am Handy sollen sie nicht in vier Zeilen umbrechen —
   die Tabelle liegt ohnehin in einem seitlich scrollbaren Halter. */
.tabelle-bd-dokumente td:nth-child(4),
.tabelle-bd-dokumente th:nth-child(4) { white-space: nowrap; }

/* Verweis von der Laborseite auf „Blutdruck & Gefäße". Damit niemand denkt,
   die Blutdruckwerte seien gelöscht worden — sie sind nur umgezogen. */
.bereichs-verweis { margin: .6rem 0 0; }

/* „Weitere Messwerte" als Karten statt Tabelle (Freigabe Alex 22.08.2026,
   Entwurf C). Farbe ist ausschließlich einer echten Referenz aus dem
   Originalbefund vorbehalten; alles vom Programm Berechnete bleibt neutral —
   eine zweite, andersfarbige Ampel würde nur verwirren. Reihenfolge in der
   Karte: Name und Wert, Befundreferenz, Einordnung, Grundlage, klein Datum
   und Quelle. */
.mw-legende { margin: .2rem 0 1rem; }
.mw-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .7rem;
}
.mw-karte {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .7rem .8rem; background: var(--karte);
}
.mw-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; border-bottom: 1px solid var(--linie);
  padding-bottom: .4rem; margin-bottom: .45rem;
}
.mw-name { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.mw-wert { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.mw-eh { font-size: .78rem; font-weight: 500; color: var(--gedaempft); }
.mw-ref { margin: 0; font-size: .8rem; color: var(--gedaempft); }
.mw-einordnung {
  border-left: 3px solid var(--linie); padding-left: .6rem; margin-top: .45rem;
}
.mw-marke {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gedaempft); margin-bottom: .15rem;
}
.mw-text { display: block; }
.mw-text.gruen, .mw-text.rot { font-weight: 600; }
.mw-neutral { color: var(--gedaempft); }
.mw-grundlage {
  display: block; font-size: .76rem; color: var(--gedaempft);
  line-height: 1.35; margin-top: .2rem;
}
.mw-meta {
  margin: .5rem 0 0; padding-top: .4rem; border-top: 1px solid var(--linie);
  font-size: .72rem; color: var(--gedaempft);
}
@media (max-width: 700px) { .mw-raster { grid-template-columns: 1fr; } }

/* Ausrollung der Kartenansicht am 23.08.2026 (Freigabe Alex): dieselbe Karte
   im Verlauf — eine zusätzliche Zeile für den Vergleich mit der vorherigen
   Messung — und als Kennzahl auf der Parameterseite. Keine neuen Farben:
   Farbe bleibt allein der Referenz aus dem Originalbefund vorbehalten. */
.mw-verlauf {
  margin: .5rem 0 0; font-size: .8rem; color: var(--gedaempft);
  line-height: 1.35;
}
.kennzahl-einordnung { grid-column: 1 / -1; }
.kennzahl-einordnung .mw-ref { margin-top: .2rem; }
.kennzahl-einordnung .mw-einordnung { margin-top: .35rem; }
.kennzahl-einordnung .mw-text { font-size: 1rem; font-weight: 600; }

/* --- Info-Symbol und Info-Kasten am Laborparameter (23.08.2026) ---
   Ruhig, hell, kompakt. Keine Warnfarben, keine Karte, kein Vollbild: Der
   Messwert bleibt wichtiger als das Symbol. Der Kasten selbst hängt zur
   Laufzeit an <body> (siehe info.js) — nur so schneidet ihn die seitlich
   scrollende Tabelle am Handy nicht ab. */
.info-halter { display: inline; }
.info-inhalt { display: none; }

.info-knopf {
  appearance: none; background: none; border: 0; padding: 0 0 0 .25rem;
  margin: 0; cursor: pointer; color: var(--blau);
  font-size: .95em; line-height: 1; vertical-align: baseline;
  opacity: .6; transition: opacity .12s;
}
.info-knopf:hover, .info-knopf[aria-expanded="true"] { opacity: 1; }

/* In der Wertzeile der Startseite steht das Symbol rechts am Zeilenende
   (Ansage Alex 23.08.2026); in den Tabellen bleibt es hinter dem Namen. */
.mv-wert-kopf .info-halter { margin-left: auto; }
.info-knopf:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 50%; }

.info-blase {
  position: fixed; z-index: 60; max-width: 320px;
  background: var(--karte); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(28, 35, 51, .13);
  padding: .7rem .8rem; font-size: .84rem; line-height: 1.5;
  text-align: left; font-weight: 400;
}
.info-blase[hidden] { display: none; }
.info-blase .info-titel {
  display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.info-blase .info-satz { display: block; }
.info-blase .info-label {
  display: block; font-weight: 600; margin-top: .5rem; color: var(--tinte); }

/* Körper & Fortschritt (Auftrag Alex 24.08.2026) --------------------------- */
.kf-einstieg { max-width: 480px; margin: 2rem auto; text-align: center; }
.kf-einstieg-titel { margin-top: .2rem; }

.kf-fotoslots { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kf-fotoslot { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
/* Portraitformat statt Quadrat: Körperbilder verlieren beim quadratischen
   Zuschnitt genau die Höhe, die für den Vergleich zählt. */
.kf-vorschau {
  width: 140px; height: 190px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linie);
}

.kf-vergleich-links { display: flex; gap: .6rem; flex-wrap: wrap; }

.kf-verlauf { display: flex; flex-direction: column; }
.kf-termin {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  padding: .8rem 0; border-top: 1px solid var(--linie);
}
.kf-termin:first-of-type { border-top: 0; padding-top: 0; }
.kf-termin-bilder { display: flex; gap: .6rem; flex: none; }
.kf-bildkachel { margin: 0; text-align: center; font-size: .78rem; }
.kf-bild {
  width: 110px; height: 150px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linie);
}
.kf-termin-daten { display: flex; flex-direction: column; gap: .2rem; }

/* Vergleichsansicht: volle Bildhöhe statt Zuschnitt, damit nichts vom
   Körper abgeschnitten wird — hier zählt das ganze Bild, nicht die Kachel. */
.kf-vergleichsbild { margin: 0; text-align: center; }
.kf-bild-gross {
  width: 100%; max-width: 340px; height: auto; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--linie); display: block;
  margin: 0 auto;
}
.kf-vergleichsbild figcaption { color: var(--gedaempft); font-size: .82rem; margin-top: .4rem; }

/* Geführte Aufnahme (Auftrag Alex 24.08.2026, Punkt 17) -------------------- */
.kf-aufnahme { display: block; }
.kf-hinweisliste { margin: .4rem 0 .8rem; padding-left: 1.1rem; line-height: 1.55; }
.kf-hinweisliste li { margin-bottom: .3rem; }
.kf-fussnote { font-size: .86rem; }
.kf-knopfreihe {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-top: .9rem;
}
.kf-pose { margin: .2rem 0 .8rem; line-height: 1.5; }

/* Die Bühne trägt das Live-Bild, die Vorlage und die Positionierungshilfe
   übereinander. Ihr Seitenverhältnis ist dasselbe wie das des gespeicherten
   Fotos (9:16) — nur so zeigt die Vorlage genau den späteren Bildausschnitt. */
/* Höhe zuerst, Breite folgt dem Seitenverhältnis: Sonst wäre die Bühne am
   Handy rund 690 Pixel hoch und der Auslöser läge unterhalb des
   Bildschirmrands — derselbe Fehler wie am 23.08.2026 bei der Warteanzeige. */
/* Breite ausdrücklich aus der Höhe rechnen: Bei einem Block-Element gewinnt
   die volle Elternbreite gegen `aspect-ratio` — die Bühne wäre dann 693 statt
   405 Pixel hoch und der Auslöser läge unter dem Bildschirmrand. */
.kf-buehne {
  position: relative; aspect-ratio: 9 / 16;
  height: min(48vh, 560px); width: calc(min(48vh, 560px) * 9 / 16);
  max-width: 100%; margin: 0 auto;
  background: #101418; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--linie);
}
.kf-buehne-still { background: #f4f6f8; }
.kf-video, .kf-ghost, .kf-standbild, .kf-hilfe {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.kf-video, .kf-ghost, .kf-standbild { object-fit: cover; display: block; }
/* Ohne diese Regel bliebe das Ghost-Bild sichtbar: eine Klasse mit `display`
   überstimmt das hidden-Attribut. Bei der ERSTEN Aufnahme gibt es keine
   Vorlage — dort muss die Fläche wirklich leer sein. */
.kf-video[hidden], .kf-ghost[hidden], .kf-standbild[hidden] { display: none; }
.kf-ghost { opacity: .4; pointer-events: none; }
.kf-hilfe { pointer-events: none; }

/* Zurückhaltend: dünne helle Linien mit dunklem Schlagschatten, damit sie
   auf hellem wie auf dunklem Hintergrund lesbar bleiben. Keine Flächen —
   sie würden das Live-Bild und später das Ghost-Bild zudecken. */
.kf-hilfe line, .kf-hilfe path, .kf-hilfe ellipse {
  fill: none; stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85));
}
.kf-hilfe-marken line { stroke-width: 2.2; opacity: .95; }
.kf-hilfe-umriss { opacity: .72; }
.kf-hilfe text {
  fill: #fff; font-size: 15px; font-family: inherit; opacity: .85;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); dominant-baseline: middle;
}

.kf-neigung {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  margin: 0; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
  background: rgba(180, 60, 20, .92); color: #fff; font-size: .85rem;
}

.kf-regler {
  display: flex; align-items: center; gap: .6rem; margin: .8rem auto 0;
  max-width: 330px; font-size: .86rem; color: var(--gedaempft);
}
.kf-regler input[type="range"] { flex: 1; min-width: 0; }
.kf-kamerahinweis { margin: .7rem 0 0; font-size: .84rem; text-align: center; }
.kf-ausloeser { font-size: 1.02rem; padding: .6rem 1.3rem; }

.kf-vorschaupaar { display: flex; gap: .9rem; flex-wrap: wrap; }

/* Solange die Kamera läuft, zählt jede Zeile: Auslöser und „Übernehmen"
   müssen ohne Scrollen erreichbar sein. Deshalb weicht im Aufnahmemodus
   alles, was gerade nichts zur Entscheidung beiträgt. */
.kf-kameramodus .seiten-kopf { display: none; }
/* Am Handy nimmt die Navigation samt Patientenzeile rund 500 Pixel ein —
   mehr als die Bühne selbst. Während die Kamera läuft, weicht sie; danach
   ist sie sofort wieder da. Am Rechner ist genug Platz, dort bleibt alles. */
@media (max-width: 980px) {
  .kf-kameramodus .kopf, .kf-kameramodus .personenzeile { display: none; }
  .kf-kameramodus .inhalt, .kf-kameramodus main { padding-top: .6rem; }
}
.kf-kameramodus .kf-schritt { padding: .7rem .8rem .9rem; }
.kf-kameramodus .kf-schritt h2 { font-size: 1.02rem; margin: 0 0 .2rem; }
.kf-kameramodus .kf-pose { margin: 0 0 .5rem; font-size: .88rem; }
.kf-kameramodus .kf-knopfreihe { margin-top: .6rem; }
.kf-kameramodus .kf-regler { margin-top: .5rem; }
.kf-kameramodus .kf-kamerahinweis { margin-top: .4rem; font-size: .78rem; }

/* Dieselbe Falle wie beim Ghost-Bild: Jede kf-Klasse, die `display` setzt,
   würde das hidden-Attribut überstimmen — und die Schrittfolge stünde
   vollständig untereinander statt Schritt für Schritt. */
.kf-schritt[hidden], .kf-regler[hidden], .kf-knopfreihe[hidden],
.kf-fotoslots[hidden], .kf-vorschaupaar[hidden] { display: none; }

@media (max-width: 980px) {
  .kf-vorschau { width: 120px; height: 164px; }
  .kf-bild { width: 96px; height: 130px; }
  .kf-buehne { max-width: 100%; }
  .kf-regler { max-width: 100%; }
  .kf-knopfreihe > .knopf, .kf-knopfreihe > .knopf-schlicht { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   Sicherheits- & Verträglichkeitscheck (Auftrag Alex 24.08.2026)
   Designrichtung von Alex am 24.08.2026 gewählt und ausdrücklich eingegrenzt:
   nur eine schmale linke Farbkante, Kartenfläche bleibt weiß, Kategorie
   zusätzlich als kurzer Text, Rot allein für die belastbare Wechselwirkung,
   Gelb/Orange für „bitte medizinisch prüfen", Grau-Blau für den möglichen
   Zusammenhang — keine vollflächigen Warnfarben.
--------------------------------------------------------------------------- */
.check-zahl {
  background: var(--blau-hell); color: var(--blau-dunkel); font-weight: 600;
  padding: .25rem .7rem; border-radius: 999px; font-size: .85rem;
  white-space: nowrap;
}
.check-zahl-leer { background: #eef6f0; color: var(--gruen); }
.check-vorspann { font-size: .85rem; margin: -.4rem 0 .9rem; }
/* A6: Reichweite des Regelwerks — klein, sichtbar, ohne Alarmfarbe. */
.check-abdeckung {
  font-size: .8rem; line-height: 1.45; color: var(--gedaempft);
  margin: -.2rem 0 .9rem; padding-left: .7rem;
  border-left: 2px solid var(--linie);
}

.hinweis {
  border: 1px solid var(--linie); border-left: 4px solid var(--gedaempft);
  border-radius: 10px; background: var(--karte);
  padding: .85rem 1rem; margin-bottom: .7rem;
}
.hinweis-wechselwirkung { border-left-color: var(--rot); }
.hinweis-pruefen        { border-left-color: #d97706; }
.hinweis-zusammenhang   { border-left-color: #64748b; }

.hinweis-art {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft);
}
.hinweis-wechselwirkung .hinweis-art { color: var(--rot); }
.hinweis-pruefen .hinweis-art        { color: #b45309; }
.hinweis-zusammenhang .hinweis-art   { color: #475569; }

.hinweis-titel { margin: .15rem 0 .35rem; font-size: 1rem; color: var(--tinte); }
.hinweis-text  { margin: 0 0 .5rem; }
.hinweis-teile { margin: .1rem 0 .6rem; padding-left: 1.1rem; font-size: .9rem; }
.hinweis-teile li { margin-bottom: .35rem; }
.hinweis-tun {
  margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid var(--linie);
  font-size: .9rem;
}
.hinweis-details { margin: .2rem 0 0; }
.hinweis-details > summary {
  cursor: pointer; color: var(--blau); font-size: .85rem; list-style: none;
}
.hinweis-details > summary::-webkit-details-marker { display: none; }
.hinweis-details > summary::before { content: "▸ "; }
.hinweis-details[open] > summary::before { content: "▾ "; }
.hinweis-grundlage {
  margin: .4rem 0 .3rem; padding-left: 1.1rem; font-size: .85rem;
  color: var(--gedaempft);
}
.hinweis-quelle { margin: .2rem 0 .4rem; font-size: .78rem; color: var(--gedaempft); }
.hinweis-quellzeile { display: block; margin-bottom: .15rem; }

.check-leer {
  border: 1px solid var(--linie); border-left: 4px solid var(--gruen);
  border-radius: 10px; padding: .85rem 1rem; margin: 0 0 .7rem;
}
.check-umfang { margin-top: .6rem; font-size: .85rem; }
.check-umfang > summary { cursor: pointer; color: var(--blau); }
.check-umfang h3 { margin: .8rem 0 .3rem; }
.check-warnung { color: var(--gedaempft); }
.check-liste { list-style: none; padding: 0; margin: .3rem 0; }
.check-liste li {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.check-vorschlaege { margin-top: .9rem; }
.vorschlag {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; flex-wrap: wrap; border: 1px solid var(--linie);
  border-left: 4px solid var(--blau); border-radius: 10px;
  padding: .7rem .9rem; margin-bottom: .5rem; font-size: .9rem;
}
.reihenform { display: inline-flex; gap: .4rem; margin: 0; }
.knopf-klein { padding: .35rem .8rem; font-size: .85rem; }

/* Startseite: eine Zeile, kein Warnband über das ganze Dashboard
   (Auftrag Punkt 9). */
.check-kurz {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border: 1px solid var(--linie); border-left: 4px solid #d97706;
  border-radius: 10px; background: var(--karte); padding: .7rem .9rem;
  margin-bottom: 1rem;
}
.check-kurz-stark { border-left-color: var(--rot); }
.check-kurz-text { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Zustand der Hinweise — Auftrag Alex vom 24.08.2026 („Hinweislogik").
   Bewusst zurückhaltend: „Neu" ist eine Marke, keine zweite Warnfarbe. Der
   Schließknopf bleibt ein grauer Punkt und wird erst beim Darüberfahren
   deutlich; er darf nie wichtiger aussehen als der Hinweis selbst.
--------------------------------------------------------------------------- */
.hinweis { position: relative; }
.hinweis-neu {
  display: inline-block; margin-left: .35rem; padding: .1rem .45rem;
  border-radius: 999px; background: var(--blau-hell); color: var(--blau-dunkel);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: .05em;
}
.hinweis-marke {
  display: inline-block; margin-left: .35rem; font-size: .68rem;
  font-weight: 600; letter-spacing: .04em; color: var(--gedaempft);
}
.hinweis-schliessen { position: absolute; top: .3rem; right: .35rem; margin: 0; }
.hinweis-x {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 1.35rem; color: var(--gedaempft); padding: .1rem .45rem;
  border-radius: 8px;
}
.hinweis-x:hover, .hinweis-x:focus-visible {
  background: var(--blau-hell); color: var(--blau-dunkel);
}
/* Platz für den Schließknopf, damit er nie im Titel steht. */
.hinweis-schliessen + .hinweis-art { padding-right: 2rem; }

/* Ausgeblendete bleiben lesbar, treten aber zurück. */
.hinweis-still { border-left-color: var(--linie); opacity: .78; }
.hinweis-still .hinweis-art { color: var(--gedaempft); }

.check-ausgeblendet { margin: .3rem 0 .6rem; font-size: .9rem; }
.check-ausgeblendet > summary { cursor: pointer; color: var(--blau); }
.check-ausgeblendet > summary + p { margin: .5rem 0 .7rem; }

/* Kompakte Karte direkt nach dem Speichern. */
.hinweis-kompakt { margin-bottom: 1rem; }
.hinweis-knoepfe {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-top: .6rem;
}
.hinweis-knoepfe form { margin: 0; }

/* Bereich „Hinweise" beim einzelnen Medikament — zugeklappt, ruhig. */
.praep-hinweise > summary {
  cursor: pointer; display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; list-style: none;
}
.praep-hinweise > summary::-webkit-details-marker { display: none; }
.praep-hinweise > summary .summary-titel {
  font-size: 1.05rem; font-weight: 600; color: var(--tinte);
}
.praep-hinweise > summary::before { content: "▸"; color: var(--blau); }
.praep-hinweise[open] > summary::before { content: "▾"; }
.praep-hinweise[open] > summary { margin-bottom: .8rem; }

/* Sachliche Bitte statt Warnung (Fall C) — kein Rot, kein Gelb. */
.karte-sachlich { border-left: 4px solid var(--blau); }
.karte-sachlich h2 { margin-top: 0; }

@media (max-width: 720px) {
  .hinweis { padding: .75rem .8rem; }
  .hinweis-titel { font-size: .97rem; }
  .check-liste li, .vorschlag { align-items: flex-start; }
  .reihenform { width: 100%; }
  .reihenform .knopf { flex: 1; }
  .hinweis-knoepfe { width: 100%; }
  .hinweis-knoepfe > .knopf, .hinweis-knoepfe form { flex: 1; }
  .hinweis-knoepfe .knopf { width: 100%; text-align: center; }
}


/* --- Blutdruck (Auftrag Alex 24.08.2026, Teil B) ---------------------- */
/* Bewusst dieselbe ruhige Karten- und Tabellenform wie im übrigen
   Programm. Keine eigene Farbsprache, keine Ampel: Der Blutdruck wird
   eingeordnet, nicht angeschrien. */
.bd-messart { border: 1px solid var(--linie); border-radius: 8px;
  padding: .8rem .9rem; margin: .8rem 0; }
.bd-messart legend { font-weight: 600; padding: 0 .35rem; font-size: .9rem; }
.bd-wahl { display: flex; gap: .55rem; align-items: flex-start;
  padding: .35rem 0; cursor: pointer; margin: 0; }
/* Die allgemeine Formularregel macht jedes input außer Kästchen 100 % breit.
   Für Auswahlknöpfe ist das falsch — sie schöben den Text an den rechten
   Rand. Deshalb hier ausdrücklich auf ihre natürliche Größe zurück. */
.bd-wahl input[type=radio] { width: auto; flex: 0 0 auto; margin-top: .2rem; }
.bd-wahl span span { display: block; font-size: .82rem; }
.bd-dublettenhinweis { font-size: .85rem; background: #fff8f0;
  border-left: 3px solid #e0a35a; padding: .5rem .7rem; border-radius: 4px; }
.bd-abweichend td { background: #fff8f0; }
.bd-hinweis { font-size: .85rem; color: var(--gedaempft);
  border-left: 2px solid var(--linie); padding-left: .7rem; }
.bd-mittel { display: flex; flex-wrap: wrap; gap: .8rem; margin: .8rem 0 .4rem; }
.bd-mittelwert { flex: 1 1 9rem; border: 1px solid var(--linie);
  border-radius: 8px; padding: .6rem .8rem; }
.bd-mittel-name { display: block; font-size: .78rem; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: .03em; }
.bd-mittel-zahl { display: block; font-size: 1.35rem; font-weight: 600;
  line-height: 1.25; }
.bd-mittel-zahl small { font-size: .8rem; font-weight: 400;
  color: var(--gedaempft); }
.bd-mittelwert .gedaempft { font-size: .8rem; }
@media (max-width: 700px) {
  .bd-mittelwert { flex: 1 1 100%; }
}

/* --- Querschnitt über zwei Befunde (Auftrag Alex 25.08.2026) -------------
   Bewusst nur wenige eigene Regeln: Karten, Tabellen und Etiketten sind die
   vorhandenen. Neu ist allein die Gegenüberstellung der beiden Befunde. */
.quer-koepfe {
  display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.quer-kopf {
  flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column;
  gap: .15rem; border: 1px solid var(--linie); border-radius: 10px;
  padding: .7rem .9rem; background: var(--flaeche);
}
.quer-kopf-aktuell { border-color: var(--blau); background: var(--blau-hell); }
.quer-kopf strong { overflow-wrap: anywhere; }
.quer-pfeil {
  align-self: center; color: var(--gedaempft); font-size: 1.2rem;
  flex: 0 0 auto;
}
.quer-wahl { margin: .6rem 0 0; max-width: 520px; }
.quer-wahl label { margin-bottom: 0; }
.quer-saetze, .quer-liste { margin: 0 0 .6rem; padding-left: 1.1rem; }
.quer-saetze li { margin-bottom: .35rem; }
.quer-liste { list-style: none; padding-left: 0; }
.quer-liste li {
  padding: .45rem 0; border-bottom: 1px solid var(--linie);
}
.quer-liste li:last-child { border-bottom: none; }
@media (max-width: 700px) {
  .quer-pfeil { transform: rotate(90deg); }
}

/* --- Blutdruck-Verlaufsgrafik (Auftrag Alex 25.08.2026) -----------------
   Zusätzlich zur Tabelle, nicht statt ihr. Am Handy flacher, damit die
   Tabelle darunter nicht aus dem Bild rutscht. */
.bd-diagramm { height: 320px; }
@media (max-width: 700px) {
  .bd-diagramm { height: 260px; }
}

/* ---------------------------------------------------------------- Impfungen
   Auftrag Alex 27.08.2026. Bewusst KEINE neue Designwelt: dieselben Karten,
   dieselben Knöpfe, dieselben Farben wie im übrigen Board. Neu sind nur die
   wenigen Klassen, die der Bereich zusätzlich braucht.

   Leitgedanke ist Punkt 18 — die Seite muss beim Arzt am Handy in Sekunden
   bedienbar sein. Deshalb sind die Zeilen der Impfliste ganzflächig
   antippbar, und „Original ansehen" ist am Handy ein großer Knopf über die
   volle Breite. */
.impf-liste { list-style: none; margin: 0; padding: 0; }
.impf-zeile { border-bottom: 1px solid var(--linie); }
.impf-zeile:last-child { border-bottom: 0; }
.impf-zeile-link {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem;
  align-items: center; padding: .85rem .2rem; color: var(--tinte);
}
.impf-zeile-link:hover { background: var(--flaeche); text-decoration: none; }
.impf-name { grid-column: 1; font-size: 1.02rem; }
.impf-meta { grid-column: 1; grid-row: 2; color: var(--gedaempft); font-size: .85rem; }
.impf-status {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  padding: .25rem .6rem; border-radius: 999px; font-size: .8rem;
  white-space: nowrap; background: var(--flaeche); color: var(--gedaempft);
}
/* Farbe steht für die Art des Hinweises, nicht für einen Alarm. Rot kommt
   hier bewusst nirgends vor (Auftrag Punkt 11). */
.impf-status-auffrischung_faellig,
.impf-status-arzttermin { background: #fef3e2; color: var(--orange); }
.impf-status-impfung_empfohlen,
.impf-status-saisonal_pruefen,
.impf-status-auffrischung_demnaechst,
.impf-status-serie_unvollstaendig { background: var(--blau-hell); color: var(--blau-dunkel); }
.impf-status-status_unklar,
.impf-status-aerztlich_pruefen { background: #f3e8ff; color: var(--lila); }
.impf-status-kein_hinweis { background: #e7f6ec; color: var(--gruen); }

.impf-hinweis {
  border: 1px solid var(--linie); border-left: 4px solid var(--blau);
  border-radius: 10px; padding: .8rem .9rem; margin-bottom: .8rem;
}
.impf-hinweis-auffrischung_faellig,
.impf-hinweis-arzttermin { border-left-color: var(--orange); }
.impf-hinweis-status_unklar,
.impf-hinweis-aerztlich_pruefen { border-left-color: var(--lila); }
.impf-hinweis p { margin: .3rem 0; }
.impf-hinweis-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.impf-hinweis-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.impf-hinweis-knoepfe form { margin: 0; }

.impf-ereignisse { list-style: none; margin: 0; padding: 0; }
.impf-ereignis { border-bottom: 1px solid var(--linie); padding: .9rem 0; }
.impf-ereignis:last-child { border-bottom: 0; }
.impf-ereignis-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.impf-datum { font-size: 1.05rem; color: var(--blau); }
.impf-ereignis-felder { display: grid; gap: .2rem; margin: .5rem 0; font-size: .92rem; }
.impf-ereignis-felder .gedaempft { display: inline-block; min-width: 12ch; }
.impf-ereignis-knoepfe {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem;
}
.impf-ereignis-knoepfe form { margin: 0; }
.impf-original { font-size: 1rem; }
.impf-kombination {
  background: var(--blau-hell); color: var(--blau-dunkel);
  border-radius: 8px; padding: .45rem .6rem; font-size: .87rem; margin: .5rem 0;
}
.impf-kombination .etikett { margin-left: .3rem; }
.impf-offen {
  background: #fef3e2; color: #8a4b12; border-radius: 8px;
  padding: .45rem .6rem; font-size: .87rem; margin: .5rem 0;
}
.impf-wortlaut {
  border-left: 3px solid var(--linie); padding-left: .8rem;
  color: var(--gedaempft); font-style: italic;
}

.impf-formular { display: grid; gap: .6rem; margin: .6rem 0; }
.impf-formular label { display: grid; gap: .2rem; font-size: .9rem; }
.impf-formular input[type=text], .impf-formular input[type=date] {
  padding: .55rem .6rem; border: 1px solid var(--linie); border-radius: 8px;
  font: inherit; width: 100%;
}
.impf-marke {
  /* justify-self, weil das Etikett in einem Grid-Label steht — ohne das
     zöge es sich am Handy über die ganze Breite und sähe aus wie ein
     Fehlerbalken. */
  display: inline-block; justify-self: start;
  background: #fef3e2; color: var(--orange);
  border-radius: 999px; padding: .05rem .5rem; font-size: .75rem;
  margin-left: .4rem;
}
.impf-nehmen { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.impf-vorschlag-kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.impf-datei { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }

.impf-seitenband { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; }
.impf-seite { margin: 0; flex: 0 0 auto; text-align: center; }
.impf-seite img {
  height: 160px; width: auto; border: 1px solid var(--linie); border-radius: 8px;
}
.impf-seite figcaption { font-size: .8rem; color: var(--gedaempft); }

/* Die Originalansicht: so groß wie möglich, ohne dass die Seite quer läuft. */
.impf-originalkarte { text-align: center; }
.impf-originalbild {
  max-width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--linie);
}
.impf-quellenwahl { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.impf-original-titel { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .impf-zeile-link { grid-template-columns: 1fr; padding: .9rem .2rem; }
  .impf-status { grid-column: 1; grid-row: 3; justify-self: start; margin-top: .3rem; }
  /* Der Weg zum Impfpass-Eintrag am Handy: ein Knopf über die volle Breite,
     mit dem Daumen sicher zu treffen. */
  .impf-original { width: 100%; text-align: center; padding: .8rem 1rem; }
  .impf-ereignis-knoepfe { align-items: stretch; }
  .impf-ereignis-felder .gedaempft { min-width: 0; display: block; font-size: .8rem; }
}
/* Am Handy soll das Impfpassbild so groß wie möglich stehen — der Rahmen der
   Karte darf ihm nicht auch noch Platz wegnehmen (Auftrag Punkt 18). */
@media (max-width: 700px) {
  .impf-originalkarte { padding: .5rem; }
  .impf-quellenwahl .knopf { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Betriebshinweis auf der Startseite — Auftrag Alex vom 28.08.2026.
   Für Störungen am Werkzeug, nicht an der Gesundheit: heute genau ein Fall,
   das aufgebrauchte KI-Guthaben. Deshalb die warme Warnfarbe der
   Hinweismeldungen statt Rot — es ist kein Befund und kein Fehler in der
   Akte. Der Kasten erscheint nur, solange die Störung besteht.
--------------------------------------------------------------------------- */
.betriebshinweis {
  border: 1px solid #f0c99a; border-left: 4px solid #d97706;
  border-radius: 10px; background: #fef3e2; color: #7c2d12;
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.betriebshinweis p { margin: .35rem 0; }
.betriebshinweis-titel { font-weight: 700; margin-top: 0 !important; }
.betriebshinweis a { color: inherit; text-decoration: underline; }

/* „Auf einen Blick" — Auftrag Alex 28.08.2026. Bewusst KEINE neue
   Designwelt: dieselbe Form wie beim Sicherheits- & Verträglichkeitscheck —
   weiße Kartenfläche, schmale linke Farbkante, ein Farbpunkt und die Stufe
   zusätzlich als Text. Keine vollflächigen Warnfarben. */
.befundanalyse .karten-kopf { margin-bottom: .55rem; }
.blick-titel {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft); margin: .8rem 0 .5rem;
}
.blick { display: grid; gap: .55rem; }
.blick-gruppe {
  border: 1px solid var(--linie); border-left: 4px solid var(--gedaempft);
  border-radius: 10px; background: var(--karte); padding: .7rem .95rem;
}
.blick-rot   { border-left-color: var(--rot); }
.blick-gelb  { border-left-color: #d97706; }
.blick-gruen { border-left-color: var(--gruen); }
.blick-kopf {
  margin: 0 0 .35rem; font-weight: 700; font-size: .9rem;
  display: flex; align-items: flex-start; gap: .5rem;
}
/* Der Punkt ist gezeichnet, nicht als Zeichen gesetzt: gleiche Größe auf
   jedem Gerät, unabhängig von der Emoji-Schrift des Browsers. */
.blick-punkt {
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--gedaempft); flex: 0 0 auto;
  /* Der Punkt sitzt auf der ERSTEN Zeile — am Handy bricht die Überschrift
     um, und mittig zentriert stünde er dann zwischen den Zeilen. */
  margin-top: .3rem;
}
.blick-rot   .blick-punkt { background: var(--rot); }
.blick-gelb  .blick-punkt { background: #d97706; }
.blick-gruen .blick-punkt { background: var(--gruen); }
.blick-rot   .blick-kopf { color: var(--rot); }
.blick-gelb  .blick-kopf { color: #b45309; }
.blick-gruen .blick-kopf { color: var(--gruen); }
.blick-liste { margin: 0; padding-left: 1.15rem; }
.blick-liste li { margin: .25rem 0; }
.blick-fehlt { font-size: .9rem; margin: .6rem 0 0; }

.blick-mehr {
  margin-top: 1rem; border-top: 1px solid var(--linie); padding-top: .7rem;
}
/* Richtung B (Alex, 29.08.2026): breite Leiste statt Textzeile. Der
   Bericht ist ihm wichtiger als die Einzelwerte — dann muss man ihn auch
   finden. Rechts steht, was einen erwartet. */
.blick-mehr > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap;
  padding: .75rem 1rem; border-radius: 10px;
  border: 1px solid var(--blau); background: var(--blau-hell);
  color: var(--blau-dunkel); font-weight: 700;
}
.blick-mehr > summary:hover { background: #dde9fd; }
.blick-mehr > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.blick-mehr > summary::-webkit-details-marker { display: none; }
.blick-leiste-meta { font-weight: 500; font-size: .82rem; color: var(--gedaempft); }
.blick-leiste-pfeil { margin-left: auto; }
.blick-leiste-pfeil::before { content: "▸"; }
.blick-mehr[open] .blick-leiste-pfeil::before { content: "▾"; }
.blick-mehr .nur-auf { display: none; }
.blick-mehr[open] .nur-zu { display: none; }
.blick-mehr[open] .nur-auf { display: inline; }

.blick-schranke {
  margin: 1rem 0 0; padding-top: .6rem; font-size: .8rem; line-height: 1.5;
  color: var(--gedaempft); border-top: 1px solid var(--linie);
}

/* Der ausführliche Teil soll sich lesen lassen: echte Überschriften,
   kurze Zeilenlänge, Luft zwischen den Absätzen. */
.blick-mehr .analyse-md { margin-top: .7rem; max-width: 70ch; }
.blick-mehr .analyse-md h3 {
  font-size: 1rem; font-weight: 700; color: var(--tinte);
  margin: 1.4rem 0 .4rem; padding-top: .7rem;
  border-top: 1px solid var(--linie); text-transform: none; letter-spacing: 0;
}
.blick-mehr .analyse-md > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.blick-mehr .analyse-md h4 {
  font-size: .9rem; font-weight: 700; color: var(--gedaempft);
  margin: .9rem 0 .3rem;
}
.blick-mehr .analyse-md p { margin: .55rem 0; }
.blick-mehr .analyse-md li { margin: .25rem 0; }

/* ---------------------------------------------------------------------
   Interdisziplinärer Verlaufscheck (Auftrag Alex 04.09.2026)
   Bewusst keine neue Farbwelt: Ampel, Kartenfläche und die ruhige Zeile auf
   der Startseite sind dieselben, die für Befundanalyse und Sicherheitscheck
   schon freigegeben sind. Neu ist nur die Form der Zusammenhang-Karten.
   --------------------------------------------------------------------- */
.gesamtcheck .check-veraltet { margin: .4rem 0 0; font-size: .9rem; }
.zh-titel { margin: 1.1rem 0 .5rem; font-size: 1rem; }
.zh-liste { display: grid; gap: .6rem; }
.zh-karte {
  border: 1px solid var(--linie);
  border-left: 4px solid var(--lila);
  border-radius: 8px;
  padding: .7rem .85rem;
  background: #fff;
}
.zh-karte h4 { margin: 0 0 .35rem; font-size: .97rem; }
.zh-beobachtung { margin: 0 0 .5rem; }
.zh-felder { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; }
.zh-felder dt {
  font-weight: 600; font-size: .82rem; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: .02em; padding-top: .12rem;
}
.zh-felder dd { margin: 0; }
.zh-beleg { margin: .55rem 0 0; color: var(--gedaempft); }
.zh-musterid {
  display: inline-block; font-weight: 700; font-size: .75rem;
  background: #ece9fb; color: #4c3fa8; border-radius: 4px;
  padding: 0 .3rem; margin-right: .2rem;
}
.zh-ungeklaert { margin: .3rem 0 0 1.15rem; }
.zh-ungeklaert li { margin: .25rem 0; }
.zh-zurueck, .zh-rechnung { margin-top: .8rem; }
.zh-zurueck > summary, .zh-rechnung > summary {
  cursor: pointer; font-weight: 600; font-size: .9rem;
}
.zh-kat { margin: .7rem 0 .25rem; font-size: .9rem; }
.zh-werte, .zh-muster { margin: 0 0 0 1.15rem; padding: 0; }
.zh-werte li, .zh-muster li { margin: .25rem 0; }
.zh-muster-genutzt { font-weight: 500; }

.check-gesamt { align-items: flex-start; }
.check-gesamt-inhalt { flex: 1; }
.check-gesamt-punkte { list-style: none; margin: .35rem 0 0; padding: 0; }
.check-gesamt-punkte li {
  margin: .22rem 0; padding-left: 1rem; position: relative; font-weight: 400;
}
.check-gesamt-punkte .blick-punkt {
  position: absolute; left: 0; top: .45rem;
}
.check-gesamt-punkte li.blick-rot  .blick-punkt { background: var(--rot); }
.check-gesamt-punkte li.blick-gelb .blick-punkt { background: #d97706; }