/* ===========================================================================
   Notfall-Einsatzprotokoll - Gestaltung
   Die Farbgebung folgt dem Originalvordruck: monochrom, weisses
   Papier, schwarze Haarlinien, Kapitaelchen-Ueberschriften. Alle Farbwerte
   stehen hier zentral, damit sie an einen Hausvordruck angepasst werden
   koennen, ohne die Struktur anzufassen.
   =========================================================================== */
:root {
    /* Farbgebung des Originalvordrucks: rosa Papier, schwarze Haarlinien,
       Kapitaelchen-Ueberschriften. Alle Werte stehen hier zentral. */
    --papier:        #f7dae0;   /* Bogen */
    --papier-hell:   #fdf1f4;   /* beschreibbare Flaechen: Eingabefelder */
    --raster:        #eec3cd;   /* Kopfzeilen der Abschnitte, Rinnen */
    --raster-tief:   #e3aab8;   /* Spur der Scrollschiene */
    --tinte:         #14080b;
    --tinte-schwach: #6a4650;
    --linie:         #14080b;
    --linie-fein:    #c9909f;
    --feld-grund:    #fdf1f4;
    --gewaehlt:      #14080b;   /* gewaehlte Option: invertiert wie Kugelschreiber */
    --gewaehlt-text: #fdf1f4;
    --fokus:         #0047ab;   /* Tastaturfokus */
    --warnung:       #8a0000;
    --status-gruen:  #1e7a1e;   /* Statuspunkt: gesynct */
    --status-rot:    #b8202f;   /* Statuspunkt: nicht gesynct */
    --status-blau:   #0057b8;   /* Statuspunkt: Fehler / Hinweis */

    --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tippziel: 44px;           /* Mindestgroesse fuer Bedienung mit Handschuhen */
    --rand: 12px;
    --schiene: 96px;            /* Breite der Scrollschiene = Breite des Balkens */

    /* Steuert auch die Darstellung der eingebauten Datums- und Zeitwaehler. */
    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Nachtmodus.
   Fuer Einsaetze bei Dunkelheit: gedaempfte Flaechen statt hellem Papier,
   damit die Blendung im Fahrzeug klein bleibt und die Dunkeladaption erhalten
   bleibt. Der rosa Grundton des Vordrucks bleibt als Farbklang erhalten.
   Umgekehrte Logik bei gewaehlten Optionen: hell gefuellt auf dunklem Grund.
   --------------------------------------------------------------------------- */
:root[data-farbschema="dunkel"] {
    --papier:        #171113;
    --papier-hell:   #241b20;
    --raster:        #2b2027;
    --raster-tief:   #382a31;
    --tinte:         #f0dfe5;
    --tinte-schwach: #b394a0;
    --linie:         #d9c3cb;
    --linie-fein:    #6a505a;
    --feld-grund:    #241b20;
    --gewaehlt:      #f0dfe5;
    --gewaehlt-text: #171113;
    --fokus:         #7fb3ff;
    --warnung:       #ff9d9d;
    --status-gruen:  #5fc75f;
    --status-rot:    #ff7a7a;
    --status-blau:   #6fb2ff;

    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Farbthema.
   Arztrezepte gibt es in Rosa (Kassenrezept), Gruen (Rezept fuer
   nicht erstattungsfaehige Mittel), Gelb (BTM-Rezept) und Blau
   (Privatrezept) - dieselben vier Papierfarben stehen hier als
   Bogenfarbe zur Wahl, jede mit eigenem Nachtmodus. Ohne Wahl (oder
   "rosa") bleibt es bei den Werten oben; s. views/einstellungen.php.
   --------------------------------------------------------------------------- */
:root[data-farbthema="gruen"] {
    --papier:        #dcead6;
    --papier-hell:   #f0f7ed;
    --raster:        #c3ddb8;
    --raster-tief:   #a8cc99;
    --tinte:         #0b1408;
    --tinte-schwach: #4a6a46;
    --linie:         #0b1408;
    --linie-fein:    #90c980;
    --feld-grund:    #f0f7ed;
    --gewaehlt:      #0b1408;
    --gewaehlt-text: #f0f7ed;
}
:root[data-farbthema="gruen"][data-farbschema="dunkel"] {
    --papier:        #10150d;
    --papier-hell:   #1b2318;
    --raster:        #212b1d;
    --raster-tief:   #2c3826;
    --tinte:         #dfeed9;
    --tinte-schwach: #9ab394;
    --linie:         #c8d9c1;
    --linie-fein:    #4a5a44;
    --feld-grund:    #1b2318;
    --gewaehlt:      #dfeed9;
    --gewaehlt-text: #10150d;
}

:root[data-farbthema="gelb"] {
    --papier:        #f7edc7;
    --papier-hell:   #fdf8e8;
    --raster:        #eedca0;
    --raster-tief:   #e0c878;
    --tinte:         #1a1404;
    --tinte-schwach: #6a5c30;
    --linie:         #1a1404;
    --linie-fein:    #cbb06a;
    --feld-grund:    #fdf8e8;
    --gewaehlt:      #1a1404;
    --gewaehlt-text: #fdf8e8;
}
:root[data-farbthema="gelb"][data-farbschema="dunkel"] {
    --papier:        #17140d;
    --papier-hell:   #241f16;
    --raster:        #2b2416;
    --raster-tief:   #382f1a;
    --tinte:         #f0e6d0;
    --tinte-schwach: #b3a582;
    --linie:         #d9cbaa;
    --linie-fein:    #6a5a3a;
    --feld-grund:    #241f16;
    --gewaehlt:      #f0e6d0;
    --gewaehlt-text: #17140d;
}

:root[data-farbthema="blau"] {
    --papier:        #d8e6f2;
    --papier-hell:   #eef5fb;
    --raster:        #b9d4ea;
    --raster-tief:   #9ac0e0;
    --tinte:         #060f1a;
    --tinte-schwach: #43596a;
    --linie:         #060f1a;
    --linie-fein:    #80abcb;
    --feld-grund:    #eef5fb;
    --gewaehlt:      #060f1a;
    --gewaehlt-text: #eef5fb;
    --fokus:         #b8590a;   /* eigener Fokusring: blauer Grund macht den blauen Fokusring sonst unauffaellig */
}
:root[data-farbthema="blau"][data-farbschema="dunkel"] {
    --papier:        #0d131a;
    --papier-hell:   #182029;
    --raster:        #1c2733;
    --raster-tief:   #26333f;
    --tinte:         #d9e6f0;
    --tinte-schwach: #82a0b3;
    --linie:         #b8cfdd;
    --linie-fein:    #3d5464;
    --feld-grund:    #182029;
    --gewaehlt:      #d9e6f0;
    --gewaehlt-text: #0d131a;
    --fokus:         #ffb066;
}

* { box-sizing: border-box; }

/* `hidden` muss auch gegen eigene display-Regeln (flex, grid) gewinnen -
   sonst bleiben z. B. ausgeblendete Schienenmarken stehen. */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    margin: 0;
    /* Nur der Innenbereich scrollt. Scrollt das Fenster mit, wandern Kopf- und
       Fussleiste aus dem Bild - und mit ihnen Patientenkennung und Status. */
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.35;
    color: var(--tinte);
    background: var(--papier);
    /* Kein Uebersetzen/Ueberdehnen, damit beim Ausfuellen nichts wegrutscht. */
    overscroll-behavior: none;
}

/* --- Kopfleiste: liegt IM Fluss, ueberlagert also niemals Patientendaten --- */
.kopfleiste {
    flex: 0 0 auto;
    border-bottom: 2px solid var(--linie);
    background: var(--papier);
}

.kopfleiste-oben {
    display: flex;
    align-items: center;
    gap: var(--rand);
    padding: 8px var(--rand);
    flex-wrap: wrap;
}

/*
 * Der Produktname steht so da, wie er geschrieben wird: klein.
 *
 * Vorher stand hier `text-transform: uppercase` - das passte zur alten,
 * beschreibenden Ueberschrift ("NOTFALL-EINSATZPROTOKOLL"), macht aus
 * einem klein geschriebenen Namen aber ein anderes Wort. Die Sperrung
 * bleibt, sie traegt die Anmutung des Vordrucks.
 */
.marke {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.marke small {
    display: block;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--tinte-schwach);
}
/* Angemeldet ist die Marke der Rueckweg zur Uebersicht (s. views/layout.php).
   Sie soll dabei aussehen wie vorher - erst beim Zeigen gibt sie sich zu
   erkennen, damit die Kopfzeile nicht nach Bedienelement aussieht. */
a.marke {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
a.marke:hover { text-decoration: underline; }

/* Aufgeklappte Zugriffe einer Freigabe: eine Tabelle in der Tabelle braucht
   eine eigene Flaeche, sonst verschwimmen die beiden Raster ineinander. */
.zugriffe-zeile > td { background: var(--raster); padding: 10px 12px; }
.zugriffe-zeile .liste { background: var(--papier-hell); }
a.marke:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.kopf-patient {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    border-left: 1px solid var(--linie-fein);
    border-right: 1px solid var(--linie-fein);
    padding: 0 var(--rand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kopf-patient strong { font-size: 16px; }
.kopf-patient:empty { display: none; }

/* Statusanzeige statt Einblendmeldungen: fester Platz, verdeckt nichts. */
.statusstreifen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 13px;
}
.statusstreifen > * { white-space: nowrap; }
.statuspunkt {
    width: 11px; height: 11px;
    border: 1px solid var(--tinte);
    border-radius: 50%;
    background: var(--papier);
}
/* Grün: gesynct. Rot: (noch) nicht gesynct. Blau: Fehler oder Hinweis,
   der Aufmerksamkeit braucht (etwa erneute Anmeldung). Feste Punktgroesse
   statt wechselnd langem Text - sonst springt das Formular bei jedem
   Sync-Zyklus in der Hoehe. */
.statuspunkt.gespeichert { background: var(--status-gruen); border-color: var(--status-gruen); }
.statuspunkt.offen,
.statuspunkt.offline,
.statuspunkt.laeuft      { background: var(--status-rot); border-color: var(--status-rot); }
.statuspunkt.fehler,
.statuspunkt.konflikt    { background: var(--status-blau); border-color: var(--status-blau); }

.knopf-schema {
    min-height: 30px;
    padding: 3px 10px;
    border: 1px solid var(--linie);
    background: var(--papier);
    color: var(--tinte);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
}
.knopf-schema:hover { background: var(--raster); }
.knopf-schema[disabled] { opacity: .35; }

/* Farbthema-Auswahl auf der Einstellungsseite: ein Farbpunkt je Papierfarbe,
   damit man die Wahl sieht statt sie zu lesen. */
.thema-auswahl { display: flex; gap: 10px; flex-wrap: wrap; }
.thema-swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tippziel);
    padding: 6px 16px 6px 10px;
    border: 2px solid var(--linie-fein);
    border-radius: 8px;
    background: var(--feld-grund);
    color: var(--tinte);
    font: inherit;
    cursor: pointer;
}
.thema-swatch::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--schwatz-farbe);
    border: 1px solid var(--linie);
}
.thema-swatch[aria-pressed="true"] { border-color: var(--gewaehlt); font-weight: bold; }
.thema-auswahl .knopf[aria-pressed="true"] { background: var(--gewaehlt); color: var(--gewaehlt-text); }

/*
 * Anzeigegröße.
 *
 * `zoom` und nicht `font-size`: das Stilblatt rechnet durchgehend in
 * Bildpunkten, und `zoom` vergrößert deshalb auch die Tippziele mit. Eine
 * größere Schrift auf gleich kleinen Knöpfen hülfe mit Handschuhen niemandem.
 */
body { zoom: var(--anzeigegroesse, 1); }

/*
 * Seitenleiste der Verwaltung.
 *
 * Sieben Unterseiten - ohne staendig sichtbare Navigation muesste man immer
 * erst nach oben scrollen, um woanders hinzukommen. Die Leiste haengt fest
 * links (`position: sticky` in ihrem Scrollbereich, dem `.scroller`), der
 * Inhalt daneben scrollt fuer sich.
 */
.verwaltung-layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.verwaltung-sidebar {
    flex: 0 0 210px;
    position: sticky;
    top: var(--rand);
    border: 1.5px solid var(--linie);
    background: var(--papier);
    padding: 14px;
}
.verwaltung-sidebar ul { list-style: none; margin: 0 0 12px; padding: 0; }
.verwaltung-sidebar li {
    padding: 6px 0;
    border-bottom: 1px solid var(--linie-fein);
}
.verwaltung-sidebar li:last-child { border-bottom: 0; }
.verwaltung-sidebar a { display: block; font-weight: 600; }
/* Die gerade offene Unterseite - seit der Aufteilung der Verwaltung in
   mehrere Seiten muss die Leiste zeigen, wo man steht. */
.verwaltung-sidebar a[aria-current] {
    color: var(--gewaehlt);
    text-decoration: underline;
}
.verwaltung-sidebar li > span {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--tinte-schwach);
}
.verwaltung-inhalt { flex: 1 1 auto; min-width: 0; }

@media (max-width: 760px) {
    /* Kein Platz fuer zwei Spalten - die Leiste rutscht ueber den Inhalt
       und haengt nicht mehr fest, sonst nimmt sie auf dem Telefon staendig
       ein Drittel des Bildschirms weg. */
    .verwaltung-layout { flex-direction: column; }
    .verwaltung-sidebar { position: static; flex-basis: auto; width: 100%; }
}

/* Aenderungsprotokoll: die Feld-fuer-Feld-Liste je Zeile bleibt kompakt,
   damit die Tabelle bei vielen geaenderten Feldern nicht ausufert. */
.protokoll-aenderungen {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
}
.protokoll-aenderungen li { margin: 2px 0; }

/* Hinterlegte Empfaenger: flache Knoepfe, wie jede Auswahl hier - kein
   aufklappendes Menue, das Patientendaten verdeckt. */
.empfaenger-wahl { margin-bottom: 8px; }
.empfaenger-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}
.empfaenger-knoepfe .knopf-klein.gewaehlt {
    background: var(--gewaehlt);
    color: var(--papier);
}

/*
 * Reiter nach NACA einfaerben - eine Skala von gruen nach rot.
 *
 * Bei mehreren Patienten ist "wer ist der Schlimmste" die erste Frage, und die
 * Reiterleiste ist die einzige Stelle, an der alle nebeneinander stehen. Eine
 * durchgehende Skala beantwortet sie im Vorbeigehen: die Farbe IST die
 * Rangfolge, nicht bloss ein Warnzeichen ab einer Schwelle.
 *
 * Ein ungefaerbter Reiter heisst damit "NACA noch nicht erfasst" - was fuer
 * sich genommen eine nuetzliche Auskunft ist.
 *
 * VII (Tod) faellt aus der Skala heraus und sieht auch so aus: fast schwarz,
 * nicht "noch roeter". Es ist keine Steigerung der Lebensgefahr, sondern ihr
 * Ende, und im Stapel soll man es nicht mit VI verwechseln.
 *
 * Weil Farbe allein nicht traegt - Beleuchtung im Fahrzeug, Farbsehschwaeche,
 * und Rot/Gruen ist ausgerechnet die haeufigste Schwaeche - kommt ein Balken
 * am Rand dazu, und die Stufe steht ohnehin im Bogen.
 */
.reiter[data-naca] { border-left: 5px solid transparent; }
.reiter[data-naca="1"] { border-left-color: #2e7d32; background: #dcecd9; }
.reiter[data-naca="2"] { border-left-color: #6d8f1e; background: #e6eecd; }
.reiter[data-naca="3"] { border-left-color: #b58900; background: #f6ecc4; }
.reiter[data-naca="4"] { border-left-color: #c26a00; background: #fbe6cc; }
.reiter[data-naca="5"] { border-left-color: #b3283f; background: #f7d2d8; }
.reiter[data-naca="6"] { border-left-color: #8a0000; background: #f2bcc4; }
.reiter[data-naca="7"] { border-left-color: #2b1116; background: #d9cdd0; }

/* Der aktive Reiter behaelt seinen hellen Grund - sonst waere nicht mehr zu
   sehen, welcher gerade offen ist. Der Balken bleibt. */
.reiter.aktiv[data-naca] { background: var(--papier-hell); }

@media (prefers-color-scheme: dark) {
    :root:not([data-farbschema="hell"]) .reiter[data-naca="1"] { background: #22331f; }
    :root:not([data-farbschema="hell"]) .reiter[data-naca="2"] { background: #2f3a1c; }
    :root:not([data-farbschema="hell"]) .reiter[data-naca="3"] { background: #43391a; }
    :root:not([data-farbschema="hell"]) .reiter[data-naca="4"] { background: #4a3418; }
    :root:not([data-farbschema="hell"]) .reiter[data-naca="5"] { background: #4d1c24; }
    :root:not([data-farbschema="hell"]) .reiter[data-naca="6"] { background: #5c1418; }
    :root:not([data-farbschema="hell"]) .reiter[data-naca="7"] { background: #2f2629; }
}
:root[data-farbschema="dunkel"] .reiter[data-naca="1"] { background: #22331f; }
:root[data-farbschema="dunkel"] .reiter[data-naca="2"] { background: #2f3a1c; }
:root[data-farbschema="dunkel"] .reiter[data-naca="3"] { background: #43391a; }
:root[data-farbschema="dunkel"] .reiter[data-naca="4"] { background: #4a3418; }
:root[data-farbschema="dunkel"] .reiter[data-naca="5"] { background: #4d1c24; }
:root[data-farbschema="dunkel"] .reiter[data-naca="6"] { background: #5c1418; }
:root[data-farbschema="dunkel"] .reiter[data-naca="7"] { background: #2f2629; }

.anzeigegroesse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.anzeigegroesse > span {
    min-width: 42px;
    text-align: center;
    font-size: 11px;
    color: var(--tinte-schwach);
    font-variant-numeric: tabular-nums;
}

/*
 * Ausrichtung.
 *
 * Gleich gebaut wie die Anzeigegröße daneben - zwei Knöpfe mit dem Wert in
 * der Mitte. Wer das eine bedient hat, muss das andere nicht neu lernen.
 */
.drehung {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.drehung > span {
    min-width: 34px;
    text-align: center;
    font-size: 11px;
    color: var(--tinte-schwach);
    font-variant-numeric: tabular-nums;
}
/* Die Pfeile stehen für sich; sie brauchen etwas mehr Luft als „A−“. */
.drehung .knopf-schema { font-size: 15px; line-height: 1; }

/*
 * Die gedrehte Fläche.
 *
 * Lage, Größe und Drehung setzt drehung.js von Hand auf den Body - sie hängen
 * an der Fenstergröße und an der Bildschirmtastatur und lassen sich nicht im
 * Stilblatt ausrechnen. Hier steht nur, was unabhängig davon gilt.
 */
:root[data-drehung="90"], :root[data-drehung="180"], :root[data-drehung="270"] {
    /* Sonst blitzt beim Drehen der Papiergrund neben der Fläche auf, weil
       diese kurz kleiner ist als der Bildschirm. */
    background: var(--papier);
}
:root:not([data-drehung="0"]) body {
    /* Ohne das läuft beim Drehen der Inhalt sichtbar um die Ecke. */
    will-change: transform;
}

@media print {
    /* Gedruckt wird nie gedreht: der Drucker hat seine eigene Ausrichtung. */
    body { transform: none !important; position: static !important;
           width: auto !important; height: auto !important;
           margin: 0 !important; left: auto !important; top: auto !important; }
    .drehung { display: none !important; }
}

/* --- Patientenreiter -------------------------------------------------------
   An der Stelle, an der zuvor die Abschnittsnavigation sass. Jeder Reiter ist
   ein eigenes Protokoll mit frei waehlbarem Titel. Der Titel des aktiven
   Reiters ist unmittelbar beschreibbar - kein Dialog, keine Ueberlagerung. */
.patientenleiste {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--linie-fein);
    background: var(--raster);
}
.reiter-liste {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.reiter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    max-width: 280px;
    padding: 4px 12px;
    border: 0;
    border-right: 1px solid var(--linie-fein);
    background: transparent;
    color: var(--tinte);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.reiter:hover { background: var(--papier); }
.reiter.aktiv {
    background: var(--papier);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--tinte);
}
.reiter-name { overflow: hidden; text-overflow: ellipsis; }
.reiter-kennung { font-size: 10.5px; color: var(--tinte-schwach); font-weight: 400; }
.reiter-offen { font-size: 15px; line-height: 1; }        /* Punkt: noch nicht uebertragen */

input.reiter-feld {
    width: 168px;
    min-height: 30px;
    padding: 3px 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--tinte);
    background: var(--papier-hell);
    border: 1px solid var(--linie);
}
.patient-neu {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 4px 16px;
    border: 0;
    border-left: 1px solid var(--linie);
    background: var(--gewaehlt);
    color: var(--gewaehlt-text);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
}

/* --- Arbeitsflaeche: Bogen links, Scrollschiene rechts ---------------------
   Die Schiene ist eine eigene Spalte im Layoutfluss, kein aufliegendes
   Element. Sie verdeckt daher nie Formularinhalte. */
.arbeitsflaeche {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.scroller {
    flex: 1 1 auto;
    overflow-y: scroll;
    overflow-x: hidden;
    min-width: 0;
    /* Die eigene Schiene ersetzt die Bildlaufleiste des Browsers vollstaendig. */
    scrollbar-width: none;
}
.scroller::-webkit-scrollbar { width: 0; height: 0; }

/* --- Scrollschiene: Bildlaufleiste UND Abschnittsnavigation zugleich ------- */
.scrollschiene {
    flex: 0 0 var(--schiene);
    position: relative;
    border-left: 2px solid var(--linie);
    background: var(--raster-tief);
    touch-action: none;         /* Ziehen scrollt die Schiene, nicht die Seite */
    user-select: none;
}

/* Schienenseite: geraeteweite Wahl (s. layout.php), damit sie zur Hand
   passt, die den Bogen im Fahrzeug bedient. Nur die Reihenfolge in der
   Arbeitsflaeche dreht sich um, die Schiene bleibt sonst unveraendert. */
:root[data-schienenseite="links"] .scrollschiene {
    order: -1;
    border-left: none;
    border-right: 2px solid var(--linie);
}
.schiene-spur { position: absolute; inset: 0; overflow: hidden; }

/* Der Griff zeigt Position und Umfang des sichtbaren Ausschnitts. Er liegt
   UNTER den Marken, damit deren Beschriftung immer lesbar bleibt. */
.schiene-griff {
    position: absolute;
    left: 3px;
    right: 3px;
    min-height: 44px;
    background: var(--papier-hell);
    border: 2px solid var(--linie);
    border-radius: 3px;
    cursor: grab;
}
.schiene-griff:active { cursor: grabbing; }
.schiene-griff:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.schiene-marke {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 1px 5px 1px 0;
    border: 0;
    background: transparent;
    color: var(--tinte);
    font: inherit;
    font-size: 10px;
    line-height: 1.08;
    text-align: left;
    cursor: pointer;
}
.marke-strich { flex: 0 0 12px; height: 2px; background: var(--tinte); }
.marke-text   { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.schiene-marke:hover .marke-text { text-decoration: underline; }

/* Verlaufsbeschreibung: die im Einsatz meistgesuchte Marke, deutlich abgesetzt. */
.schiene-marke.hervor { font-weight: 700; font-size: 10.5px; }
.schiene-marke.hervor .marke-strich { height: 5px; flex-basis: 16px; }

.schiene-marke.aktiv {
    background: var(--gewaehlt);
    color: var(--gewaehlt-text);
}
.schiene-marke.aktiv .marke-strich { background: var(--gewaehlt-text); }

.blatt {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--rand) var(--rand) 45vh;   /* Auslauf, damit auch das letzte Feld
                                                 hochgescrollt werden kann */
}

/* --- Abschnitte --- */
.abschnitt {
    border: 1.5px solid var(--linie);
    margin: 0 0 14px;
    background: var(--papier);
}
.abschnitt > .abschnitt-titel {
    margin: 0;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1.5px solid var(--linie);
    background: var(--raster);
}
.abschnitt > .abschnitt-koerper { padding: 10px; }

.unterabschnitt {
    border: 1px solid var(--linie-fein);
    margin: 10px 0 0;
}
.unterabschnitt > .abschnitt-titel {
    margin: 0;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--linie-fein);
    background: var(--raster);
}
.unterabschnitt > .abschnitt-koerper { padding: 8px; }

.hinweis {
    margin: 4px 0;
    font-size: 11.5px;
    color: var(--tinte-schwach);
    max-width: 78ch;
}

/* --- Raster --- */
.raster {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px 10px;
    /* Bewusst `start`: mit `end` richten sich alle Felder einer Zeile an der
       Unterkante des hoechsten aus - ein Feld mit Zusatzangaben zieht dann
       riesige Luecken ueber seine Nachbarn. */
    align-items: start;
}
/* Rasterkinder duerfen unter ihre Inhaltsbreite schrumpfen; sonst schiebt
   ein einzelnes langes Wort den ganzen Bogen waagerecht auf. */
.raster > * { min-width: 0; }

.sp-1{grid-column:span 2}  .sp-2{grid-column:span 2}  .sp-3{grid-column:span 3}
.sp-4{grid-column:span 4}  .sp-5{grid-column:span 5}  .sp-6{grid-column:span 6}
.sp-7{grid-column:span 7}  .sp-8{grid-column:span 8}
.sp-9{grid-column:span 9}  .sp-12{grid-column:span 12}

/* --- Felder --- */
.feld { display: flex; flex-direction: column; min-width: 0; }
.feld-label {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinte-schwach);
    margin-bottom: 2px;
}

/*
 * Kuerzel des Erfassers.
 *
 * Rechts oben in der Ecke des Feldes, in der Farbe der Beschriftung: es soll
 * ablesbar sein, ohne sich vorzudraengen - die Angabe des Patienten ist das
 * Wichtige, nicht wer sie eingetragen hat. Es schwebt NICHT ueber dem Feld,
 * sondern sitzt im Fluss (float), damit es nichts verdeckt.
 */
.urheber-marke {
    /* `.feld` ist ein Flex-Container - dort wirkt `float` nicht, das Kuerzel
       landete sonst links ueber der Beschriftung. */
    align-self: flex-end;
    order: -1;
    margin-left: 6px;
    margin-bottom: -14px;   /* nimmt der Beschriftung keine Zeile weg */
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--tinte-schwach);
    border: 1px solid var(--tinte-schwach);
    border-radius: 2px;
    padding: 0 3px;
    line-height: 14px;
    user-select: none;
}

/* Hinter Ueberschrift, Fragetext und "keine Angabe" in derselben Zeile
   (s. urheber.js, marke): dort nimmt es keine neue Zeile und keine Breite
   der Kaestchen. `:root` vorn, damit es auch die Hochkontrast-Regel schlaegt. */
:root .auswahl > legend > .urheber-marke,
:root .auswahlgruppe > legend > .urheber-marke,
:root .frage-text > .urheber-marke,
:root .feld-label > .urheber-marke {
    /* Inline mit Zeilenhoehe 0: der Rahmen wird gezeichnet, die Zeile aber
       nicht hoeher - sonst ruckte die Auswahl darunter um ein, zwei Punkte. */
    display: inline;
    line-height: 0;
    order: 0;
    align-self: center;
    margin: 0 0 0 6px;
    vertical-align: baseline;
    font-weight: 400;
    text-transform: none;
}

/* Ohne Beschriftung: hinter dem letzten Knopf, mittig zu ihm. Niedriger als
   ein Knopf, die Zeile waechst also nicht; ist sie voll, rutscht nur die
   Marke in die naechste - die Knoepfe bleiben, wo sie sind. */
:root .optionen > .urheber-marke,
:root .leerzustand > .urheber-marke {
    order: 0;
    align-self: center;
    margin: 0 0 0 4px;
}

/* Zeilen einer Matrix: das Kuerzel steht neben der Zeilenbeschriftung, in
   einem Rand, der dafuer immer frei bleibt. Waechse die Beschriftung mit,
   wuerde die ganze Spalte breiter, und alle Kaestchen ruckten zur Seite. */
/* `:root` vorn: die allgemeinen Regeln fuer diese Zellen stehen weiter unten
   und setzen den Innenabstand sonst zurueck. */
:root .matrix tbody th, :root table.viererkasten tbody th { position: relative; }
:root .matrix tbody th { padding-right: 38px; }
:root table.viererkasten tbody th { padding-left: 38px; }
:root .matrix tbody th > .urheber-marke,
:root table.viererkasten tbody th > .urheber-marke {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-weight: 400;
}
:root .matrix tbody th > .urheber-marke { right: 4px; }
:root table.viererkasten tbody th > .urheber-marke { left: 4px; }

/* In der Bildkachel steht das Kuerzel ueber der Aufnahme, nicht darauf: ein
   aufliegendes Zeichen koennte genau die Stelle verdecken, wegen der das Foto
   gemacht wurde. Es liegt deshalb im Fluss, wie alles hier. */
/* Uebergabe: der QR-Code muss gross genug sein, dass ihn die Kamera des
   anderen iPads aus normalem Abstand fasst. */
.uebergabe-code {
    margin: 10px 0;
    max-width: 320px;
}
.uebergabe-code svg { width: 100%; height: auto; display: block; }

/* Abgegebener Bogen: sichtbar stillgelegt, nicht heimlich wirkungslos. */
.bogen-gesperrt .abschnitt-koerper { opacity: .55; }

/*
 * Der Uebergabekasten bleibt hell.
 *
 * Das Dimmen des Abschnitts nahm ihn frueher mit - und damit sah der Knopf
 * "Sperre aufheben" aus wie abgeschaltet, obwohl er der einzige Weg zurueck
 * ist. Wer ihn in dieser Lage sucht, darf nicht raten muessen, ob er noch
 * geht.
 */
.bogen-gesperrt [data-uebergabe] { opacity: 1; }
.bogen-gesperrt [data-uebergabe] input,
.bogen-gesperrt [data-uebergabe] textarea { background: var(--papier); }
.bogen-gesperrt input,
.bogen-gesperrt textarea { background: var(--raster); }

/*
 * Unterschriftsfeld.
 *
 * `touch-action: none` ist keine Feinheit: ohne das scrollt das iPad beim
 * Unterschreiben die Seite weg, statt einen Strich zu zeichnen.
 */
.unterschrift-flaeche {
    width: 100%;
    height: 90px;
    display: block;
    background: var(--papier-hell);
    border: 1px solid var(--tinte);
    border-bottom-width: 2px;     /* die Linie, auf der man unterschreibt */
    color: var(--tinte);
    touch-action: none;
    cursor: crosshair;
    margin-bottom: 4px;
    /* Keine Textauswahl, keine Lupe, kein Ziehen: hier wird gezeichnet. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}
[data-unterschrift].unterschrieben .unterschrift-flaeche { background: var(--papier); }

/* Platzhalter fuer eine Aufnahme, die noch unterwegs ist. Bewusst ruhig:
   es ist kein Fehler, sondern ein Zwischenstand. */
.bild-fehlt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--tinte-schwach);
    background: var(--raster);
    border-bottom: 1px solid var(--linie-fein);
}

.bild-kachel > .urheber-marke {
    display: block;
    align-self: flex-end;
    width: fit-content;
    margin: 0 0 2px auto;
}
.feld-eingabe { display: flex; align-items: stretch; gap: 4px; }

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=tel], input[type=email], input[type=url], textarea {
    width: 100%;
    min-height: var(--tippziel);
    padding: 6px 8px;
    font: inherit;
    font-size: 16px;              /* verhindert Zoom beim Fokus auf iOS */
    color: var(--tinte);
    background: var(--feld-grund);
    border: 1px solid var(--linie);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 1px;
}
/* „Jetzt“ setzt die aktuelle Uhrzeit ein - im Einsatz der Regelfall. Sitzt
   bündig am Zeitfeld, damit klar ist, wozu er gehört. */
.knopf-jetzt {
    flex: 0 0 auto;
    min-height: var(--tippziel);
    padding: 0 12px;
    border: 1px solid var(--linie);
    border-left: 0;
    background: var(--raster);
    color: var(--tinte);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}
.knopf-jetzt:hover  { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.knopf-jetzt:active { background: var(--gewaehlt); color: var(--gewaehlt-text); }

/* In Tabellenzellen sitzen Feld und Knopf nebeneinander. */
.zelle-zeit { display: flex; align-items: stretch; min-width: 0; }
.zelle-zeit input { min-width: 0; }
.knopf-jetzt-eng {
    min-height: 38px;
    padding: 0 6px;
    font-size: 10px;
    border: 0;
    border-left: 1px solid var(--linie-fein);
}

.einheit {
    display: flex; align-items: center;
    padding: 0 6px;
    font-size: 12px;
    color: var(--tinte-schwach);
    border: 1px solid var(--linie-fein);
    border-left: 0;
    background: var(--raster);
    white-space: nowrap;
}

/* --- Ortung ------------------------------------------------------------- */
.gps-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Die Rückmeldung steht fest in der Zeile, statt als Einblendung über den
   Angaben zu liegen. */
.gps-lage {
    font-size: 12.5px;
    color: var(--tinte-schwach);
    min-height: 1.2em;
}

/* --- Auswahloptionen: flach, immer sichtbar, nie aufklappend --- */
.auswahl, .auswahlgruppe {
    border: 1px solid var(--linie-fein);
    margin: 0;
    padding: 6px 8px 8px;
    min-width: 0;
    /* Browser setzen fuer fieldset `min-inline-size: min-content`; ohne das
       hier schrumpft die Verletzungsmatrix nicht und macht den ganzen Bogen
       waagerecht scrollbar. */
    min-inline-size: 0;
    max-width: 100%;
}
.matrix-huelle, .tabelle-huelle { max-width: 100%; }
.auswahl > legend, .auswahlgruppe > legend {
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.optionen { display: flex; flex-wrap: wrap; gap: 5px; }

.opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tippziel);
    padding: 4px 10px;
    border: 1px solid var(--linie);
    background: var(--papier);
    cursor: pointer;
    user-select: none;
    position: relative;         /* traegt das Eingabefeld, s. unten */
}

/*
 * Das Eingabefeld liegt UNSICHTBAR UEBER dem ganzen Feld - nicht daneben in
 * 0 x 0.
 *
 * Frueher stand hier `width: 0; height: 0`. Angetippt wurde damit nie das
 * Feld, sondern die Beschriftung, und dass daraus ein Ankreuzen wird, musste
 * der Browser von sich aus weiterreichen. Beim Finger tut er das. Mit dem
 * Apple Pencil auf dem iPad nicht - die Kaestchen liessen sich schlicht nicht
 * ausfuellen, waehrend alles andere tadellos ging.
 *
 * Jetzt ist das Feld selbst das Tippziel, in voller Groesse des Kaestchens.
 * Womit getippt wird, spielt damit keine Rolle mehr. Sichtbar bleibt darunter,
 * was das Stilblatt zeichnet; `appearance: none` nimmt dem Feld sein eigenes
 * Aussehen, damit Breite und Hoehe verlaesslich gelten.
 */
.opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.opt::before {
    content: "";
    flex: 0 0 auto;
    width: 15px; height: 15px;
    border: 1.5px solid var(--tinte);
    background: var(--papier);
}
.opt-rund::before { border-radius: 50%; }

/* Die Klasse setzt assets/js/auswahl.js. Frueher stand hier `:has()` - das
   kennen aeltere iPads nicht bzw. werten es nach einer Aenderung nicht neu
   aus, und dann bleibt unsichtbar, was angekreuzt ist. */
.opt.gewaehlt { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.opt.gewaehlt::before {
    background: var(--gewaehlt-text);
    box-shadow: inset 0 0 0 3px var(--gewaehlt);
}
.opt:focus-within { outline: 3px solid var(--fokus); outline-offset: 1px; }
.opt-text { font-size: 13.5px; }
.punkte { font-size: 11px; opacity: .75; }

.opt-leer { border-style: dashed; }
.opt-antwort { min-width: 74px; justify-content: center; }
.opt-eng { min-height: 32px; padding: 2px 6px; }
.opt-eng::before { width: 12px; height: 12px; }
.optionen-eng { gap: 3px; }

.leerzustand {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--linie-fein);
}

/* --- Ja/Nein-Fragen --- */
.frage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 4px 0;
    border-bottom: 1px dotted var(--linie-fein);
}
/* Der Fragetext muss unter seine Wunschbreite schrumpfen duerfen; lange
   Fachbegriffe wie "Kreislaufstillstand" wuerden die Zeile sonst aufschieben. */
.frage-text {
    flex: 1 1 340px;
    min-width: 0;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.gruppe-titel {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.gruppe, .oder, .struktur { min-width: 0; }

/* Alternativen nebeneinander: "Wert  oder  Kategorie" braucht keine drei
   Zeilen, im Vordruck steht das ebenfalls in einer. */
.oder-alternativen {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.oder-alternativen > * { flex: 0 1 auto; }
.oder-alternativen > .auswahl { flex: 0 1 auto; }
.oder-trenner {
    display: flex; align-items: center; gap: 6px;
    flex: 0 0 auto;
    align-self: center;
    padding-bottom: 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tinte-schwach);
}
.oder-trenner::before, .oder-trenner::after {
    content: ""; width: 14px; border-top: 1px dashed var(--linie-fein);
}

/* Feld und seine Zusatzangaben nebeneinander - wie im Vordruck, wo hinter
   der Herzfrequenz gleich "rhythmisch / arrhythmisch" steht. */
.feld-mit-zusatz {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.feld-mit-zusatz > .feld-label { flex: 0 0 100%; margin-bottom: 0; }
/* Muss schrumpfen duerfen: mit fester Breite sprengt ein Feld samt Einheit
   und „Jetzt"-Knopf auf schmalen Geraeten die Zeile. */
.feld-mit-zusatz > .feld-eingabe { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.feld-mit-zusatz > .feld-eingabe input { flex: 1 1 80px; width: auto; min-width: 0; }
.feld-mit-zusatz > .zusatz {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 0 0 10px;
    border-left-width: 2px;
}
.feld-mit-zusatz > .zusatz .raster { gap: 4px 8px; }
.feld-mit-zusatz > .zusatz .auswahl {
    border: 0;
    padding: 0;
}

/* --- Bedingte Zusatzangaben: klappen INLINE auf, verdecken nichts --- */
.zusatz {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 6px 0 0;
    padding: 8px 0 4px 12px;
    border-left: 3px solid var(--tinte);
}
.zusatz[hidden] { display: none; }

/* --- Matrix (GCS, Extremitaeten, Verletzungsschwere) --- */
.matrix-huelle, .tabelle-huelle { overflow-x: auto; }
.matrix { border-collapse: collapse; font-size: 12px; }
.matrix th, .matrix td { border: 1px solid var(--linie-fein); padding: 2px; }
.matrix thead th {
    font-weight: 600; text-align: center; padding: 4px 6px;
    background: var(--raster); vertical-align: bottom;
}
.matrix tbody th { text-align: left; font-weight: 400; padding: 2px 8px; white-space: nowrap; }
/* Wechselnde Hinterlegung wie im Vordruck: haelt die Zeile beim Ankreuzen
   ueber die ganze Breite zusammen. */
.matrix tbody tr:nth-child(odd) { background: var(--raster); }
.matrix-zelle {
    display: flex; align-items: center; justify-content: center;
    min-width: var(--tippziel); min-height: 38px;
    cursor: pointer;
    position: relative;
}
/* Dasselbe wie bei `.opt`: das Feld ist das Tippziel, nicht die Zelle. */
.matrix-zelle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.matrix-zelle .haken {
    width: 17px; height: 17px;
    border: 1.5px solid var(--tinte); border-radius: 50%;
    background: var(--papier);
}
.matrix-zelle input:checked + .haken { background: var(--tinte); box-shadow: inset 0 0 0 3px var(--papier); }
.matrix-zelle:focus-within { outline: 3px solid var(--fokus); }

/* --- Viererkasten (beste motorische Reaktion, Extremitätenbewegung) ------
   Wie im Vordruck: links die Stufen als Nachschlagliste, rechts die
   2x2-Kästchen. Antippen trägt die Zahl ein. */
.kasten-inhalt {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}
.stufenliste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
}
.stufenliste li { display: flex; gap: 7px; align-items: baseline; padding: 1px 0; }
.stufe-zahl {
    min-width: 16px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.stufe-text { color: var(--tinte); }

table.viererkasten { border-collapse: collapse; }
table.viererkasten th {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}
table.viererkasten tbody th { text-align: right; white-space: nowrap; }
table.viererkasten td { padding: 0; border: 1.5px solid var(--linie); }
table.viererkasten thead td { border: 0; }

.kasten-zelle {
    display: block;
    width: 58px;
    height: 46px;
    padding: 0;
    border: 0;
    background: var(--feld-grund);
    color: var(--tinte);
    font: inherit;
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 46px;
    text-align: center;
}
.kasten-zelle:hover        { background: var(--raster); }
.kasten-zelle:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
/* Leeres Kästchen als solches kenntlich machen. */
.zelle-wert:empty::before { content: "–"; color: var(--tinte-schwach); font-weight: 400; }

/* --- Datentabellen (Medikation, Diagnosen, Verlauf) --- */
.datentabelle { border-collapse: collapse; width: 100%; min-width: 720px; }
.datentabelle th, .datentabelle td { border: 1px solid var(--linie-fein); padding: 2px; vertical-align: middle; }
.datentabelle thead th {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--raster); padding: 5px 4px; text-align: left; white-space: nowrap;
}
.einheit-kopf { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tinte-schwach); }
.datentabelle input { min-height: 38px; border: 0; padding: 4px 6px; }
.datentabelle input:focus-visible { outline-offset: -3px; }
/* Zahlenfelder brauchen Platz fuer drei Ziffern (Puls 100, RR 180): mit
   `width: 100%` allein ueberliess die Tabelle den Platz den Massnahmen, und
   aus "100" wurde "10" mit abgeschnittener Null. In em, damit es mit der
   Schrift (Kontrastmodus, Anzeigegroesse) mitwaechst. */
.verlauf .datentabelle input[type=number] { min-width: 4.2em; }
.spalte-aktion { width: 1%; white-space: nowrap; }
/* Leere Tabellen zeigen nur ihre Kopfzeile - die Klasse setzt
   assets/js/protokoll.js. Mit `:has(tbody:empty)` blieb die Tabelle auf
   aelteren iPads auch nach dem Anlegen einer Zeile verborgen: die neuen
   Eingabefelder tauchten dann schlicht nicht auf. */
.tabelle-block.ohne-zeilen .tabelle-huelle { display: none; }

/* --- Kennzeichen des Patienten -------------------------------------------
   Rot und auffällig: bei mehreren Verletzten wird hier unterschieden, solange
   kein Name feststeht. Eine Verwechslung zieht sich durch das ganze Protokoll. */
.kennzeichen-feld input {
    border: 2px solid var(--warnung);
    color: var(--warnung);
    font-weight: 700;
}
.kennzeichen-feld .feld-label { color: var(--warnung); font-weight: 700; }

.reiter input.reiter-feld,
.reiter .reiter-name { color: var(--warnung); }
.reiter.aktiv input.reiter-feld { border-color: var(--warnung); }

/* --- Freigabe per Link -----------------------------------------------------
   Steht abgesetzt vom direkten Teilen: es ist der Weg, bei dem das Protokoll
   das Fahrzeug verlaesst und fuer zwei Tage auf einem Server liegt. Diese
   Unterscheidung soll man sehen, bevor man tippt. */
.freigabe-block {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--linie-fein);
    border-left: 4px solid var(--warnung);
    background: var(--raster);
}
.freigabe-block input[type="email"] { flex: 1 1 220px; min-width: 0; }

/* Die Schaltflaechen der Teilen-Sektion sollen nicht umbrechen: „Kennwort
   erzeugen“ ueber zwei Zeilen sieht aus wie ein Fehler. */
.freigabe-block [data-freigabe-senden],
[data-kennwort-erzeugen] { white-space: nowrap; flex: 0 0 auto; }

.freigabe-lage:empty { display: none; }
.freigabe-lage {
    padding: 6px 8px;
    border: 1px solid var(--linie-fein);
    background: var(--papier);
    /* Das Kennwort steht hier drin und wird abgelesen - es muss sich
       auswaehlen und in voller Laenge lesen lassen. */
    user-select: text;
    -webkit-user-select: text;
    word-break: break-word;
    max-width: none;
}
.freigabe-lage[data-art="erfolg"] { border-color: var(--tinte); }
.freigabe-lage[data-art="fehler"] { border-color: var(--warnung); color: var(--warnung); }

.freigabe-liste:empty { display: none; }
.freigabe-liste { margin-top: 10px; }
.freigabe-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 5px 0;
    border-top: 1px solid var(--linie-fein);
    font-size: 12px;
}
.freigabe-ziel { font-weight: 700; word-break: break-all; }
.freigabe-fein { color: var(--tinte-schwach); font-size: 11.5px; }
.freigabe-zeile[data-zustand="offen"] .freigabe-fein { color: var(--tinte); }
.freigabe-zeile button { margin-left: auto; }

/* --- Fotostrecken --------------------------------------------------------- */
.bilder-block {
    margin: 10px 0 0;
    padding: 8px;
    border: 1px solid var(--linie-fein);
}
.bilder-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.bilder-kopf .gruppe-titel { margin: 0; }
.bilder-neu { display: inline-flex; align-items: center; min-height: 34px; cursor: pointer; }
.bilder-neu.voll { opacity: .45; pointer-events: none; }

.bilder-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.bild-kachel {
    margin: 0;
    border: 1px solid var(--linie-fein);
    background: var(--papier-hell);
    display: flex;
    flex-direction: column;
}
.bild-kachel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--raster);
}
.bild-kachel figcaption { display: flex; flex-direction: column; gap: 4px; padding: 5px; }
.bild-notiz { min-height: 32px; font-size: 12.5px; }

/* Das erste Foto der Stammdaten steht groesser - es zeigt den Patienten. */
.bild-erstes { grid-column: span 2; grid-row: span 2; border: 2px solid var(--linie); }
.bild-erstes img { aspect-ratio: 1 / 1; }

@media (max-width: 760px) {
    .bilder-liste { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .bild-erstes { grid-column: span 2; }
}

/* --- Kurve der Vitalwerte ---------------------------------------------- */
.kurve-block {
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid var(--linie-fein);
}
.kurve-titel {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* Flex, damit der linke Rand (.kurve-rand) beim Wischen stehen bleiben kann. */
.kurve-huelle { overflow-x: auto; display: flex; }
.kurve { display: block; flex: none; background: var(--papier-hell); }
/* Kopie des linken Rands: Wertachse und Wirkstoffnamen bleiben beim Wischen
   sichtbar. Sie liegt ueber der Grafik (negativer Rand = ihre Breite). */
.kurve-rand { position: sticky; left: 0; order: -1; z-index: 1; }

/* Zeichenerklaerung: eigene Flaeche VOR der scrollenden .kurve-huelle, also
   ausserhalb ihres waagerechten Scrollbereichs - sie beschreibt Symbole,
   keine Messwerte, und bleibt beim Wischen zu langen Einsaetzen stehen. Die
   Breite kommt als Attribut mit (s. verlaufskurve.js), keine eigene hier. */
.kurve-legende-fest { margin-bottom: 4px; }

.raster-fein     { stroke: var(--linie-fein); stroke-width: .6; }
.raster-stark    { stroke: var(--linie-fein); stroke-width: 1.2; }
.raster-viertel  { stroke: var(--tinte-schwach); stroke-width: 1.1; }
.kurve-band      { fill: var(--linie-fein); opacity: .22; }
.kurve-jetzt     { stroke: var(--status-rot); stroke-width: 2; pointer-events: none; }
.messlinie       { stroke: var(--linie-fein); stroke-width: .9; stroke-dasharray: 2 3; }
.kurve-achse     { font-size: 9px;   fill: var(--tinte-schwach); }
.kurve-zeit      { font-size: 10px;  fill: var(--tinte); font-weight: 600; }
.kurve-wert      { font-size: 10px;  fill: var(--tinte); }
.kurve-massnahme { font-size: 8.5px; fill: var(--tinte); }
.kurve-massnahme-zeit { font-size: 8px; fill: var(--tinte-schwach); }
.puls-linie      { fill: none; stroke: var(--tinte); stroke-width: 1.6; }
.puls-punkt      { fill: var(--tinte); }
.rr-strich       { stroke: var(--tinte); stroke-width: 1.2; }
.rr-zeichen      { fill: var(--tinte); }

/* Symbole der Massnahmen unter der Kurve */
.ereignis-flaeche   { fill: var(--tinte); stroke: none; }
.ereignis-linie     { stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.ereignis-buchstabe { fill: var(--papier-hell); stroke: none; font-size: 10.5px; font-weight: 700; text-anchor: middle; }
.ereignis-kreuz     { fill: none; stroke: var(--papier-hell); stroke-width: 1.5; }
.ereignis-rad       { fill: var(--tinte); stroke: var(--papier-hell); stroke-width: 1; }

/* Matrix und Koerperschema nebeneinander wie im Vordruck; auf schmalen
   Geraeten rutscht das Schema unter die Tabelle. */
.nebeneinander {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
/* Die Matrix nimmt nur die Breite, die sie braucht; das Schema fuellt den
   Rest. Beide duerfen schrumpfen (min-width: 0), sonst sprengen sie auf
   schmalen Geraeten die Zeile. */
.nebeneinander > .auswahlgruppe { flex: 0 1 auto; min-width: 0; }
.nebeneinander > .schema-block  { flex: 1 1 300px; min-width: 0; margin-top: 0; }

/* --- Zeitstrahl der Medikamentengabe ------------------------------------- */
.strahl-block {
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid var(--linie-fein);
}
.strahl-name   { font-size: 11.5px; fill: var(--tinte); }
.strahl-wert   { font-size: 11px;   fill: var(--tinte-schwach); }
.strahl-punkt  { fill: var(--tinte); }
.strahl-balken { fill: var(--raster-tief); stroke: var(--tinte); stroke-width: 1; }
.strahl-leer-text { fill: var(--tinte-schwach); font-style: italic; }
.strahl-offen  { stroke-dasharray: 4 3; }
.strahl-pfeil  { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- Koerperschema zum Anzeichnen --------------------------------------- */
.schema-block {
    margin: 10px 0 0;
    padding: 8px;
    border: 1px solid var(--linie-fein);
}
.schema-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.schema-kopf .gruppe-titel { margin: 0; flex: 1 1 100%; }
.schema-werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; }
.schema-werkzeuge .knopf-klein.aktiv { background: var(--gewaehlt); color: var(--gewaehlt-text); }

.schema-huelle { display: flex; justify-content: center; }
.schema {
    width: 100%;
    max-width: 460px;
    height: auto;
    background: var(--papier-hell);
    border: 1px solid var(--linie-fein);
    touch-action: none;      /* Zeichnen darf die Seite nicht mitscrollen */
    cursor: crosshair;
}
.schema.radiert { cursor: cell; }

.figur {
    fill: none;
    stroke: var(--linie);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.figur-ruecken { stroke-dasharray: 4 3; }
.schema-beschriftung { font-size: 9px; fill: var(--tinte-schwach); }

.schema.markiert { cursor: pointer; }

/* Markierungen: Kuerzel im Kreis, damit die Art unmittelbar ablesbar ist. */
.markierung-kreis {
    fill: var(--warnung);
    stroke: var(--papier-hell);
    stroke-width: 1.2;
}
.markierung-text {
    fill: var(--papier-hell);
    font-family: var(--schrift);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: -.02em;
    pointer-events: none;
}

/* Zeichenerklaerung: die Zahl sagt, wie oft zu tippen ist. */
.schema-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
}
.schema-legende li { display: flex; align-items: center; gap: 4px; }
.legende-zahl { color: var(--tinte-schwach); min-width: 18px; text-align: right; }
.legende-kuerzel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 3px;
    border-radius: 8px;
    background: var(--warnung);
    color: var(--papier-hell);
    font-size: 9.5px;
    font-weight: 700;
}

/* Die Zeichnung hebt sich bewusst vom gedruckten Umriss ab. */
.strich {
    fill: none;
    stroke: var(--warnung);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.strich-punkt { fill: var(--warnung); }

/* --- Schaltflaechen --- */
button {
    font: inherit;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.knopf, .knopf-haupt, .knopf-zeile, .knopf-klein {
    /*
     * `<a class="knopf">` bleibt ohne dies `display: inline` (der Vorgabewert
     * fuer einen Link) - Rand und Innenabstand malen zwar trotzdem eine Box,
     * beanspruchen aber keinen eigenen Platz in der Zeilenhoehe. Stehen
     * mehrere solcher Knoepfe in einem gewoehnlich fliessenden Absatz (nicht
     * schon selbst flex/grid) und muss das bei wenig Breite umbrechen, malt
     * der naechste "Knopf" dann ueber den Rand des vorherigen - kein
     * Kollisionsschutz zwischen Zeilen, wie ihn Text von sich aus hat.
     * inline-flex macht jeden Knopf zu einer eigenen, atomaren Box mit
     * echter Zeilenhoehe, die korrekt umbricht statt sich zu ueberlagern.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--linie);
    background: var(--papier);
    color: var(--tinte);
}
.knopf, .knopf-haupt {
    min-height: var(--tippziel);
    padding: 8px 18px;
    font-weight: 600;
    letter-spacing: .03em;
}
.knopf-haupt { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.knopf:hover { background: var(--raster); }
.knopf-zeile { min-height: var(--tippziel); padding: 8px 14px; margin-top: 6px; font-size: 13px; }
/* Messwerte: die neueste Zeile steht oben, der Knopf deshalb ueber der Tabelle. */
.verlauf > .knopf-zeile { margin: 0 0 6px; }
/*
 * Kleiner Knopf, wie er in den Tabellen steht.
 *
 * `white-space: nowrap` ist kein Feinschliff: ohne das bricht eine
 * Beschriftung am Bindestrich um und steht in der Zelle zweizeilig. Eine
 * Beschriftung darf schmaler werden, aber nicht zerfallen.
 */
.knopf-klein {
    min-height: 32px;
    padding: 3px 8px;
    font-size: 11.5px;
    white-space: nowrap;
}

/*
 * Aktionsspalte einer Tabelle.
 *
 * `width: 1%` ist der uebliche Griff, damit eine Tabellenspalte nur so breit
 * wird, wie ihr Inhalt es verlangt - den Rest bekommen die anderen Spalten.
 * Zusammen mit `white-space: nowrap` stehen die Knoepfe damit nebeneinander,
 * statt sich in einer zu engen Spalte uebereinander zu stapeln.
 *
 * Bewusst KEIN `display: flex` auf der Zelle: das nimmt sie aus dem
 * Tabellenlayout, und die Spalten der Zeilen stimmen dann nicht mehr ueberein.
 */
table.liste td.aktionen {
    width: 1%;
    white-space: nowrap;
}
table.liste td.aktionen .knopf-klein + .knopf-klein { margin-left: 6px; }

/*
 * Auf schmalen Geraeten duerfen sie wieder stapeln. Nebeneinander waere die
 * Tabelle sonst breiter als der Bildschirm, und die Knoepfe stuenden
 * ausserhalb - unerreichbar statt nur untereinander.
 */
@media (max-width: 760px) {
    /* Auch die Breitenvorgabe zurueck: sie macht die Tabelle sonst breiter,
       statt schmaler. */
    table.liste td.aktionen { width: auto; white-space: normal; }
    table.liste td.aktionen .knopf-klein + .knopf-klein {
        margin-left: 0;
        margin-top: 4px;
    }
}
button[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Fusszeile mit den Hauptaktionen: ebenfalls im Fluss --- */
.fussleiste {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px var(--rand);
    border-top: 2px solid var(--linie);
    background: var(--raster);
}
.fussleiste .fuellung { flex: 1 1 auto; }
/* Ohne Mitte bleibt alles wie es war: die Gruppe links tritt nicht in Erscheinung. */
.fuss-links { display: contents; }

/* Mit Mitte (Protokoll): drei Spalten, die äußeren gleich breit - so steht
   die Mitte in der Mitte der Leiste, nicht in der Mitte des Rests. */
.fussleiste-mitte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.fussleiste-mitte .fuss-links {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.fuss-mitte { display: flex; align-items: center; gap: 10px; }
/* Schmal reicht der Platz links nicht für den Hinweis: dann untereinander. */
@media (max-width: 640px) {
    .fussleiste-mitte { grid-template-columns: 1fr; justify-items: center; }
    .fussleiste-mitte .fuss-rechts { display: none; }
}

/* Kein Zweifingerzoom im Protokoll (s. layout.php). Wischen bleibt frei. */
:root[data-zoomsperre],
:root[data-zoomsperre] body { touch-action: pan-x pan-y; }
.fuss-hinweis { font-size: 12px; color: var(--tinte-schwach); }

/* Knopf mit erklaerendem Text daneben (Anmeldung, Übersicht, Verwaltung):
   auf breitem Bildschirm nebeneinander, auf dem Telefon rutscht der Text
   sauber auf eine eigene Zeile statt dem Knopf ins Genick zu wachsen. */
p:has(> .knopf + .fuss-hinweis) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

/* --- Anmeldung, Listen, Verwaltung --- */
.mitte { max-width: 720px; margin: 0 auto; padding: var(--rand); }
.karte { border: 1.5px solid var(--linie); padding: 16px; margin-bottom: 14px; background: var(--papier); }
.karte h2 { margin: 0 0 12px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.karte h3 { margin: 18px 0 8px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-schwach); }

/* Statistik: eine grosse Zahl je Kennwert, schlichte Balken statt eines
   Diagramms - passt zum Rest der Anwendung ohne eigene Bibliothek. */
.kennzahl { margin: 0 0 4px; font-size: 34px; font-weight: 700; line-height: 1.1; }
.kennzahl span { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--tinte-schwach); text-transform: none; letter-spacing: normal; }
.balken-liste { display: flex; flex-direction: column; gap: 6px; }
.balken-zeile { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 8px; }
.balken-beschriftung { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-spur { height: 14px; background: var(--raster); border: 1px solid var(--linie-fein); }
.balken-fuellung { display: block; height: 100%; background: var(--gewaehlt); min-width: 2px; }
.balken-wert { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.benutzerliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.benutzerknopf {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px; min-height: 66px;
    border: 1.5px solid var(--linie); background: var(--papier); text-align: left;
}
.benutzerknopf:hover, .benutzerknopf.aktiv { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.benutzerknopf .qual { font-size: 11.5px; opacity: .8; }

.zifferblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 300px; }
.zifferblock button { min-height: 58px; font-size: 22px; font-weight: 600; border: 1.5px solid var(--linie); background: var(--papier); }
.zifferblock button:active { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.zifferblock button.knopf-haupt { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.pin-anzeige { display: flex; gap: 10px; margin: 12px 0; }
.pin-punkt { width: 18px; height: 18px; border: 1.5px solid var(--tinte); border-radius: 50%; }
.pin-punkt.voll { background: var(--tinte); }
/* iOS-App: PIN auf der Standardtastatur (s. anmeldung.js) - nur "OK" bleibt vom Block. */
.zifferblock.nativ { display: block; max-width: none; }
.zifferblock.nativ [data-ziffer], .zifferblock.nativ [data-loeschen] { display: none; }
.pin-nativ { display: block; width: 100%; max-width: 240px; min-height: 52px; margin-bottom: 8px; font-size: 24px; letter-spacing: .3em; }

.meldung { border: 1.5px solid var(--linie); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.meldung-fehler { border-color: var(--warnung); color: var(--warnung); }

table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { border: 1px solid var(--linie-fein); padding: 7px 8px; text-align: left; font-size: 13.5px; }
table.liste thead th { background: var(--raster); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
table.liste tbody tr:hover { background: var(--raster); }

.nur-vorlesen {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Schmale Geraete --- */
@media (max-width: 760px) {
    .raster { gap: 8px; }
    .sp-1, .sp-2, .sp-3 { grid-column: span 4; }
    /* Eingabefeld, Einheit und „Jetzt" passen nicht in ein Drittel der Breite. */
    .feld-zeit { grid-column: span 6; }
    .feld-eingabe { flex-wrap: wrap; }
    .sp-4, .sp-5, .sp-6 { grid-column: span 6; }
    .sp-7, .sp-8, .sp-9 { grid-column: span 12; }
    :root { --schiene: 68px; }
    .schiene-marke { font-size: 9px; }
    .marke-strich { flex-basis: 8px; }
    .blatt { padding-left: 8px; padding-right: 8px; }
}

/*
 * Telefonbreite (Hochformat: iPhone SE bis Pro Max sind alle schmaler als
 * 480px, auch das groesste). Die Regeln oben reichen fuer ein schmaleres
 * iPad oder Split View, geben aber Feldern wie dem Datum noch zwei Spalten -
 * bei "TT.MM.JJJJ" auf 375px Breite wird das abgeschnitten statt lesbar.
 * Hier deshalb konsequent eine Spalte, und die Schiene gibt dem Bogen noch
 * etwas mehr von der knappen Breite zurueck.
 */
@media (max-width: 480px) {
    .sp-1, .sp-2, .sp-3, .sp-4, .sp-5, .sp-6, .sp-7, .sp-8, .sp-9 { grid-column: span 12; }
    .feld-zeit { grid-column: span 12; }
    :root { --schiene: 56px; }
    .schiene-marke { font-size: 8.5px; gap: 2px; padding-right: 3px; }
    .marke-strich { flex-basis: 6px; }

    /*
     * Tabellen (Übersicht, Verwaltung) sind auf mehr Spalten angelegt, als
     * ein Telefon hochkant hergibt. Statt jede einzeln in einen eigenen
     * Scroll-Rahmen zu setzen, bekommt die Tabelle selbst ihren Bildlauf -
     * die Zeilenstruktur bleibt erhalten, nur die Tabellenbox darf schmaler
     * sein als ihr Inhalt und dann seitlich rollen.
     */
    table.liste { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Druck: entspricht dem Papiervordruck --- */
@media print {
    .kopfleiste, .patientenleiste, .scrollschiene, .fussleiste, .knopf-zeile, .spalte-aktion { display: none !important; }
    /* Weitergabe-Werkzeuge (Kennwort, Teilen, QR-Uebergabe, Drucken-Knopf
       selbst) gehoeren nicht auf den ausgedruckten Bogen. */
    [data-abschnitt="TEILEN"] { display: none !important; }
    html, body { height: auto; overflow: visible; }
    .arbeitsflaeche { display: block; }
    .scroller { overflow: visible; }
    .blatt { max-width: none; padding: 0; }
    .abschnitt { break-inside: avoid; }
    .zusatz[hidden] { display: none; }
}

/* --- Datumsfelder ---------------------------------------------------------
 *
 * Textfelder mit Zifferntastatur statt `type="date"` (s. datumsfeld.js).
 * Feste Zeichenbreite, damit die Punkte beim Tippen an ihrem Platz bleiben
 * und nicht mitwandern.
 */
input.datumsfeld {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/*
 * Halb Getipptes wird nicht verworfen, aber angezeigt: der Strich unten sagt
 * "damit kann ich noch nichts anfangen", ohne den Stand wegzunehmen.
 */
input.datumsfeld.datum-unklar {
    border-bottom: 2px solid var(--warnung);
}

/* --- Uebersicht: NACA, Sperre, Konflikt ----------------------------------- */
.liste td.naca-zelle { font-weight: 700; }
.liste tr[data-naca="1"] td.naca-zelle { color: #2e7d32; }
.liste tr[data-naca="2"] td.naca-zelle { color: #5a7a10; }
.liste tr[data-naca="3"] td.naca-zelle { color: #8a6800; }
.liste tr[data-naca="4"] td.naca-zelle { color: #c26a00; }
.liste tr[data-naca="5"] td.naca-zelle { color: #b3283f; }
.liste tr[data-naca="6"] td.naca-zelle { color: #8a0000; }
.liste tr[data-naca="7"] td.naca-zelle { color: var(--tinte); }

.liste td.gesperrt-zelle { font-weight: 700; }
/* Replikationskonflikt aufloesen: ein roter Blitz statt eines Textknopfs. */
.knopf-blitz {
    display: inline-flex; align-items: center; justify-content: center;
    /* So gross wie die kleinen Knoepfe der Tabellen (.knopf-klein). */
    width: 32px; height: 32px; padding: 0;
    border: 1.5px solid var(--status-rot);
    border-radius: 6px;
    background: var(--papier-hell);
    cursor: pointer;
}
.knopf-blitz svg { width: 68%; height: 68%; fill: var(--status-rot); }
.knopf-blitz:hover { background: var(--status-rot); }
.knopf-blitz:hover svg { fill: var(--papier-hell); }
.knopf-blitz[disabled] { opacity: .45; }

/*
 * Empfangsbereitschaft.
 *
 * Kein Knopf, sondern eine Feststellung: das Geraet ist bereits bereit. Ein
 * Knopf wuerde eine Handlung nahelegen, die es nicht gibt.
 */
.empfangslage {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 4px solid var(--gewaehlt);
    background: var(--raster-tief);
    font-size: 13px;
}
.empfangslage-warnung { border-left-color: var(--warnung); }

/*
 * Geraetename in der Fussleiste.
 *
 * Rechts aussen und ruhig: er wird gebraucht, wenn jemand fragt "an welches
 * iPad?", und soll sonst nicht um Aufmerksamkeit bitten. Das Symbol davor
 * macht ihn auf einen Blick als Geraeteangabe kenntlich, ohne ein Wort zu
 * kosten.
 */
.fuss-geraet {
    font-size: 12px;
    color: var(--tinte-schwach);
    white-space: nowrap;
    padding-right: 10px;
    border-right: 1px solid var(--linie-fein);
}
.fuss-geraet::before { content: "▭ "; opacity: .7; }

/* Kein vergebener Name: dann steht dort eine Kennung aus der Geraete-ID. */
.fuss-geraet.ohne-namen { color: var(--warnung); }

/* ---------------------------------------------------------------------------
   Bogen anpassen (/verwaltung/bogen)

   Die Verschachtelung des Bogens wird durch Einrueckung sichtbar gemacht,
   nicht durch aufklappbare Ebenen: der Keyuser muss sehen, WO ein Feld sitzt,
   und ein zugeklappter Ast verbirgt genau das.
   --------------------------------------------------------------------------- */

.block-liste { list-style: none; margin: 0; padding: 0; }
.block-liste li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--linie-fein);
}
.block-liste li.ist-aus { opacity: .55; }
.block-liste a { font-weight: 600; }
.block-liste span { color: var(--tinte-schwach); font-size: 12.5px; }

.feld-baum { list-style: none; margin: 12px 0 0; padding: 0; }

.baum-zeile {
    border-bottom: 1px solid var(--linie-fein);
    padding: 8px 0 8px 0;
}
/* Die Einrueckung ist Rand, nicht Abstand: der farbige Strich links macht die
   Ebene auch dann erkennbar, wenn eine Zeile ueber mehrere Zeilen umbricht. */
.baum-zeile.tiefe-1 { padding-left: 18px; border-left: 3px solid var(--raster); }
.baum-zeile.tiefe-2 { padding-left: 36px; border-left: 3px solid var(--raster-tief); }
.baum-zeile.tiefe-3 { padding-left: 54px; border-left: 3px solid var(--raster); }
.baum-zeile.tiefe-4 { padding-left: 72px; border-left: 3px solid var(--raster-tief); }
.baum-zeile.tiefe-5 { padding-left: 90px; border-left: 3px solid var(--raster); }

.baum-zeile.ist-aus .baum-name { text-decoration: line-through; opacity: .6; }

.baum-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.baum-name { font-weight: 600; }
.baum-art  { color: var(--tinte-schwach); font-size: 12px; }
.baum-code {
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
    background: var(--raster); padding: 1px 6px; border-radius: 3px;
}
.baum-code-eigen { background: transparent; border: 1px dashed var(--linie-fein); }
.baum-aus { font-size: 11.5px; color: var(--warnung); text-transform: uppercase; letter-spacing: .04em; }

/* Die Knopfreihe: jedes Formular ist fuer sich, darf aber nicht umbrechen. */
.baum-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reihen-form { display: inline; }

.baum-formular { margin: 10px 0 4px; padding: 10px; background: var(--raster); border-radius: 4px; }
.baum-formular h4 { margin: 0 0 6px; }

.baum-optionen { margin: 4px 0 10px; padding: 10px; background: var(--papier-hell); border-radius: 4px; }
.baum-optionen h4 { margin: 0 0 8px; }
.option-zeile.ist-aus { opacity: .55; }
.option-knoepfe { margin: 0 0 12px; }

/*
 * Gruppe nebeneinanderstehender Knoepfe.
 *
 * NICHT `knopf-zeile` - das ist bereits ein Knopf (s. oben), und ein
 * Container mit dieser Klasse bekaeme einen eigenen Rahmen um die ganze
 * Gruppe.
 */
.knopf-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.code-fest { font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin: 4px 0 0; }
.code-fest small { font-family: var(--schrift); color: var(--tinte-schwach); }

/* Loeschen sieht anders aus als Speichern - ein Griff daneben soll auffallen. */
.knopf-gefahr { color: var(--warnung); border-color: var(--warnung); }
/* Rueckfrage vor dem Loeschen eines Protokolls vom Geraet (s. uebersicht.js). */
tr.loeschen-frage > td { background: var(--raster); }
tr.loeschen-frage p { margin: 0 0 8px; }
tr.loeschen-frage .loeschen-warnung { color: var(--warnung); font-weight: 700; }

/* --- Vorschläge beim Tippen (s. assets/js/vorschlaege.js) ------------------
   Im Seitenfluss unter dem Feld, nie darüber: sie schieben den Bogen nach
   unten, statt Angaben zu verdecken. In Tabellen eine eigene Zeile. */
.vorschlaege { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 0 3px; }
.vorschlaege .knopf-klein { min-height: 40px; padding: 4px 10px; font-size: 13px; }
.vorschlaege .knopf-klein.gewaehlt { background: var(--gewaehlt); color: var(--gewaehlt-text); }

/* Nur-ansehen: Live-Stand neben dem Hinweis (s. protokoll.js, liveNachladen). */
.live-stand { margin-left: 10px; font-size: 12px; color: var(--tinte-schwach); }
.live-stand[data-verbunden]::before { content: "● "; color: #2e8b3d; }

/* Normfarben der Notfallmedikamente (s. assets/js/medfarbe.js): der Knopf
   wie das Spritzenetikett - Gruppenfarbe, schwarze Schrift, in hell und
   dunkel gleich. Gewaehlt bleibt er invertiert wie jeder Knopf; die Farbe
   steht dann als breiter Balken unten, damit sie nicht verloren geht. */
button.med-farbe {
    background: var(--med-hintergrund);
    color: #111;
    border-color: #111;
}
button.med-farbe:hover { filter: brightness(.94); }
button.med-farbe[aria-pressed="true"],
.vorschlaege button.med-farbe.gewaehlt {
    background: var(--gewaehlt);
    color: var(--gewaehlt-text);
    box-shadow: inset 0 -7px 0 var(--med-farbe);
}
@media print { .med-farbe { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
.vorschlag-zeile > td { background: var(--raster); padding: 2px 6px; }

/* --- Ziffernblock fürs Datum (s. assets/js/datumsfeld.js) ------------------
   Wie der PIN-Block der Anmeldung: große Ziffern, im Seitenfluss unter dem
   Feld. Die Null nimmt die Breite von drei Tasten, "Tastatur" die vierte. */
.datum-ziffernblock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-width: 340px;
    padding: 6px 0 4px;
}
.datum-ziffernblock button {
    min-height: 52px;
    font-size: 20px;
    font-weight: 600;
    border: 1.5px solid var(--linie);
    background: var(--papier);
    color: var(--tinte);
}
.datum-ziffernblock [data-datum-taste="heute"],
.datum-ziffernblock [data-datum-taste="fertig"],
.datum-ziffernblock [data-datum-taste="tastatur"] { font-size: 13px; }
.datum-ziffernblock [data-datum-taste="0"] { grid-column: span 3; }
.datum-ziffernblock [data-datum-taste="fertig"] { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.datum-ziffernblock button:active { background: var(--gewaehlt); color: var(--gewaehlt-text); }

/* --- Medikation: eine Zeile je Wirkstoff, darin jede Gabe -------------------
   (s. Formular::medikationTabelle). Die Gaben stehen nebeneinander und brechen
   um, wenn sie nicht mehr in die Zeile passen. */
.medikation .datentabelle { min-width: 1000px; table-layout: auto; }
.medikation .zelle-wirkstoff { width: 190px; vertical-align: top; }
.medikation .zelle-gaben { padding: 0; vertical-align: top; }
.medikation thead th { font-size: 12px; font-weight: 600; color: var(--tinte-schwach); text-transform: none; letter-spacing: 0; }
.gaben { display: flex; flex-direction: column; }

/*
 * Das Spaltenraster von Kopf und Gaben: Menge, Einheit, Zeit, Einzelgabe jetzt,
 * Kontinuierlich, Ende Dauergabe, Jetzt, + erneut, Loeschen. Kopf und jede Gabe
 * benutzen es, deshalb stehen die Spalten senkrecht untereinander.
 */
.gabe-raster {
    display: grid;
    grid-template-columns: 80px 92px 96px 112px 112px 96px 64px 78px 36px;
    align-items: stretch;
}
.gabe-kopf { padding: 2px 0; }
.gabe-kopf > span { padding: 2px 4px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.gabe-kopf > .kopf-knopf { color: var(--tinte); }
.gabe { border-bottom: 1px solid var(--linie-fein); background: var(--papier-hell); }
.gabe:last-child { border-bottom: 0; }
.datentabelle .gabe > input,
.datentabelle .gabe > button { min-height: 38px; min-width: 0; border-radius: 0; border: 0; border-right: 1px solid var(--linie-fein); }
.datentabelle .gabe > input { width: 100%; background: transparent; }
.datentabelle .gabe > input::placeholder { color: var(--tinte-schwach); opacity: .75; }
.gabe > .gabe-weg { background: var(--raster); font-size: 17px; border-right: 0; }
.eine-gabe .gabe-weg { visibility: hidden; }
.gabe-erneut { font-weight: 600; background: var(--papier); }
.gabe:not([data-art]) .gabe-erneut { visibility: hidden; }

/* Art der Gabe: zwei Umschalter, hoechstens einer ist gewaehlt. */
.knopf-art {
    padding: 0 6px;
    background: var(--raster);
    color: var(--tinte);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.15;
}
.knopf-art[aria-pressed="true"] { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.gabe > .knopf-jetzt { background: var(--raster); font-size: 12.5px; font-weight: 600; }

/* Ende und "Jetzt" nur bei einer Dauergabe - sonst bleibt die Zelle leer. */
.gabe:not([data-art="dauer"]) > input[data-spalte="Zeit/@ende"],
.gabe:not([data-art="dauer"]) > .knopf-jetzt { visibility: hidden; }

/* Volumen: zugeklappt, ueber die ganze Breite unter der Gabe - nur bei einer
   Dauergabe (Infusion) oder wenn schon eines eingetragen ist. Sonst bliebe unter
   jeder Einzelgabe eine leere Zeile. */
.gabe:not([data-art="dauer"]) > .gabe-vol:not([open]) { display: none; }
.gabe-vol { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0; border-top: 1px solid var(--linie-fein); font-size: 12px; }
.gabe-vol > summary { flex: 0 0 auto; min-height: 30px; padding: 0 8px; display: flex; align-items: center; color: var(--tinte-schwach); cursor: pointer; }
.gabe-vol:not([open]) { display: block; }
.datentabelle .gabe-vol > input { width: 90px; min-height: 34px; border: 0; border-left: 1px solid var(--linie-fein); }

/* Praeparat, Applikation und ATC unter dem Wirkstoffnamen, zugeklappt. */
.wirkstoff-mehr { margin-top: 3px; font-size: 12px; }
.wirkstoff-mehr > summary { min-height: 30px; display: flex; align-items: center; color: var(--tinte-schwach); cursor: pointer; }
.mehr-feld { display: block; margin-top: 3px; }
.mehr-feld > span { display: block; font-size: 10px; color: var(--tinte-schwach); }

/* --- Beatmung: Verlauf im Abschnitt, Zeilen unter der Kurve ------------------
   (s. Formular::beatmungsverlauf, assets/js/beatmungsverlauf.js). Geänderte
   Werte kräftig, unveränderte blass - so fällt auf, was verstellt wurde. */
.beatmung > .gruppe-titel { display: block; margin: 12px 0 2px; }
.beatmung-wert        { font-size: 10.5px; font-weight: 700; fill: var(--tinte); }
.beatmung-wert.gleich { font-weight: 400; fill: var(--tinte-schwach); }

/* --- MANV: Sichtungskategorien ---------------------------------------------
   Neben den Warnungen die einzigen kräftigen Farben: im MANV sind rot, gelb,
   grün, blau und schwarz die Sprache, in der sich alle vor Ort verständigen,
   und müssen auf einen Blick lesbar sein - auf dem Reiter, in der Übersicht,
   in der Lage. */
[data-sk="I"]   { --sk: #c62828; --sk-text: #ffffff; }
[data-sk="II"]  { --sk: #f2b705; --sk-text: #14080b; }
[data-sk="III"] { --sk: #2e7d32; --sk-text: #ffffff; }
[data-sk="IV"]  { --sk: #1565c0; --sk-text: #ffffff; }
[data-sk="tot"] { --sk: #212121; --sk-text: #ffffff; }

.sk-marke {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    background: var(--sk, var(--raster));
    color: var(--sk-text, var(--tinte));
}
.sk-wahl { border-left: 7px solid var(--sk); }
.sk-wahl.gewaehlt { background: var(--sk); color: var(--sk-text); }
.sk-bedeutung { font-size: 11px; font-weight: 400; }
.reiter[data-sk] { border-left: 7px solid var(--sk); }
.manv-liste tr[data-sk] > td:first-child { border-left: 5px solid var(--sk); }
.manv-zaehler { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.manv-zaehler .sk-marke { padding: 6px 12px; font-size: 15px; }
.manv-bekannte { display: flex; flex-wrap: wrap; gap: 6px; }
.manv-start { display: flex; align-items: flex-end; }
.manv-lage-name { font-size: 16px; }
#manv-karte.manv-aktiv { border-left: 6px solid #c62828; }
.manv-zuordnen {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 8px 0; padding: 8px 10px;
    border: 1.5px dashed var(--linie);
}
.manv-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Minimaldatensatz: nur die markierten Abschnitte (s. protokoll.js,
   minimalMarkieren) - aus den Einsatzdaten allein das Transportziel. */
.bogen-minimal > section.abschnitt:not([data-minimal]) { display: none; }
.bogen-minimal > section[data-minimal="teil"] .abschnitt-koerper > :not(.raster),
.bogen-minimal > section[data-minimal="teil"] .raster > :not([data-minimal]) { display: none; }

/* Zahlenfeld: der getippte Wert lag ausserhalb der Grenzen und wurde begrenzt. */
input.grenze-erreicht { outline: 2px solid var(--tinte-schwach); outline-offset: 1px; }

/* --- CPR-Leiste: haengt oben fest, damit sie im Einsatz nie weggescrollt ist --- */
.cpr-leiste {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 10px;
    padding: 6px 8px;
    border: 1.5px solid var(--linie);
    background: var(--papier);
}
.cpr-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.cpr-start { min-height: 46px; font-weight: 700; }
.cpr-leiste.laeuft .cpr-start { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.cpr-zaehler { font-size: 13px; color: var(--tinte-schwach); }
.cpr-zaehler strong { font-size: 18px; color: var(--tinte); margin-left: 2px; }
/* Stoppuhr seit der letzten Rhythmusanalyse: gross und rechts, aber neutral -
   gleiche Farbe vor und nach zwei Minuten (s. protokoll.js, cprAbschnitt). */
.cpr-abschnitt { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.cpr-abschnitt-zeit { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cpr-abschnitt-text { font-size: 12px; color: var(--tinte-schwach); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cpr-leiste:not(.laeuft) .cpr-abschnitt-zeit { color: var(--tinte-schwach); }
.cpr-ereignisse { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cpr-ereignis { min-height: 48px; padding: 0 12px; }
.cpr-stempel { margin-top: 6px; font-size: 13px; }
.cpr-stempel > summary { min-height: 30px; display: flex; align-items: center; cursor: pointer; color: var(--tinte-schwach); }
.cpr-liste { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.cpr-liste li { display: flex; align-items: stretch; border: 1px solid var(--linie-fein); background: var(--papier-hell); }
.cpr-liste li > span { padding: 5px 8px; font-variant-numeric: tabular-nums; }
.cpr-liste li > button { min-width: 36px; border: 0; border-left: 1px solid var(--linie-fein); background: var(--raster); }
.cpr-leiste.gesperrt button { opacity: .5; pointer-events: none; }

/* Band der Reanimation in der Kurve */
.cpr-band  { fill: var(--tinte); opacity: .09; }
.cpr-marke { font-size: 9px; font-weight: 700; fill: var(--tinte); }
.ereignis-kontur { fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ereignis-ring   { fill: var(--papier-hell); stroke: var(--tinte); stroke-width: 2; }
.ereignis-buchstabe-dunkel { fill: var(--tinte); stroke: none; font-size: 10.5px; font-weight: 700; text-anchor: middle; }

/* --- Werte per Tipp ins Diagramm eintragen ------------------------------- */
.kurve-werkzeug-titel { display: flex; align-items: center; margin-right: 8px; font-size: 12px; color: var(--tinte-schwach); }

/* Zeichenflaeche ueber dem Raster: Tipp = Puls, senkrechter Strich = Blutdruck.
   `pan-x` laesst das waagerechte Wischen dem Browser - so laufen die Grafiken bei
   langen Einsaetzen weiter mit dem Finger; senkrechte Striche kommen bei uns an. */
.kurve-huelle { position: relative; }
.kurve-flaeche {
    position: absolute;
    display: block;
    touch-action: pan-x;
    cursor: crosshair;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.bogen-gesperrt .kurve-flaeche { pointer-events: none; }
/* Drei Punkte (s. verlaufskurve.js): der Browser wischt hier nicht, und
   solange eine Reihe offen ist, laesst sich die Kurve auch sonst nicht
   verschieben - die Uhrzeit des ersten Punktes muss stehen bleiben. */
.kurve-flaeche.drei-punkte { touch-action: none; cursor: pointer; }
.kurve-huelle.achse-gesperrt { overflow-x: hidden; }
.kurve-drei[aria-pressed="true"] { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.kurve-vorschau { pointer-events: none; }
.kurve-eingabe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 13px; }
.kurve-zahl { display: inline-flex; align-items: stretch; gap: 6px; }
.kurve-zahl input { width: 90px; min-height: 40px; }

.kurve-schnell { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.kurve-schnell input { width: 190px; min-height: 44px; font-size: 20px; }

.uebernehmen-leiste { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; }
.uebernehmen-leiste .hinweis { margin: 0; }

/* ===========================================================================
   Hochkontrast.
   Eigene Designvariante fuer schlechte Sicht - grelles Licht, Bewegung im
   Fahrzeug, nachlassende Augen: reines Schwarz/Weiss statt Papierfarbe,
   deutlich groessere Schrift, sichtbar abgesetzte Abschnitte, runde Ecken
   und angekreuzte Felder gruen hinterlegt, damit der Zustand auf einen
   Blick ablesbar ist. Gilt in Hell und Dunkel und uebersteuert das
   Farbthema; gesetzt in views/einstellungen.php, vorab in views/layout.php.
   =========================================================================== */
:root[data-kontrast="hoch"]:not([data-farbschema="dunkel"]) {
    --papier:        #ffffff;
    --papier-hell:   #ffffff;
    --raster:        #e8e8e8;
    --raster-tief:   #bdbdbd;
    --tinte:         #000000;
    --tinte-schwach: #2b2b2b;
    --linie:         #000000;
    --linie-fein:    #4d4d4d;
    --feld-grund:    #ffffff;
    --gewaehlt:      #000000;
    --gewaehlt-text: #ffffff;
    --fokus:         #0047d6;
    --warnung:       #a30000;
    --angekreuzt:      #0a6b2a;   /* 6,6:1 gegen Weiss */
    --angekreuzt-text: #ffffff;
}
:root[data-kontrast="hoch"][data-farbschema="dunkel"] {
    --papier:        #000000;
    --papier-hell:   #0d0d0d;
    --raster:        #262626;
    --raster-tief:   #404040;
    --tinte:         #ffffff;
    --tinte-schwach: #e0e0e0;
    --linie:         #ffffff;
    --linie-fein:    #b3b3b3;
    --feld-grund:    #0d0d0d;
    --gewaehlt:      #ffffff;
    --gewaehlt-text: #000000;
    --fokus:         #ffd400;
    --warnung:       #ff8a8a;
    --angekreuzt:      #3ddc6e;
    --angekreuzt-text: #000000;
}
:root[data-kontrast="hoch"] {
    --tippziel: 52px;
    --rund: 14px;               /* Abschnitte, Karten */
    --rund-mittel: 10px;        /* Knoepfe, Optionen, Gruppen */
    --rund-klein: 8px;          /* Eingabefelder */
}

/* --- Schrift: deutlich groesser, Beschriftungen nicht mehr grau --- */
:root[data-kontrast="hoch"] body { font-size: 18px; line-height: 1.4; }
:root[data-kontrast="hoch"] .marke { font-size: 19px; }
:root[data-kontrast="hoch"] .marke small { font-size: 12px; }
:root[data-kontrast="hoch"] .statusstreifen,
:root[data-kontrast="hoch"] .kopf-patient { font-size: 15px; }
:root[data-kontrast="hoch"] .kopf-patient strong { font-size: 18px; }
:root[data-kontrast="hoch"] .reiter,
:root[data-kontrast="hoch"] .patient-neu,
:root[data-kontrast="hoch"] input.reiter-feld { font-size: 16px; }
:root[data-kontrast="hoch"] .reiter-kennung { font-size: 13px; }
:root[data-kontrast="hoch"] .feld-label,
:root[data-kontrast="hoch"] .auswahl > legend,
:root[data-kontrast="hoch"] .auswahlgruppe > legend,
:root[data-kontrast="hoch"] .gruppe-titel,
:root[data-kontrast="hoch"] .kurve-titel {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tinte);
}
:root[data-kontrast="hoch"] .hinweis,
:root[data-kontrast="hoch"] .fuss-hinweis,
:root[data-kontrast="hoch"] .gps-lage { font-size: 15px; color: var(--tinte-schwach); }
/* Mit der grossen Schrift passen lange Woerter nicht mehr in schmale
   Rasterspalten - trennen statt in die Nachbarspalte ragen. */
:root[data-kontrast="hoch"] .hinweis,
:root[data-kontrast="hoch"] .feld-label { hyphens: auto; overflow-wrap: break-word; }
:root[data-kontrast="hoch"] .opt-text,
:root[data-kontrast="hoch"] .frage-text { font-size: 17.5px; }
:root[data-kontrast="hoch"] .punkte { font-size: 14px; opacity: 1; }
:root[data-kontrast="hoch"] .urheber-marke { font-size: 12px; line-height: 16px; margin-bottom: -16px; }
:root[data-kontrast="hoch"] .einheit,
:root[data-kontrast="hoch"] .knopf-jetzt { font-size: 15px; color: var(--tinte); }
:root[data-kontrast="hoch"] .knopf-schema { font-size: 14px; min-height: 36px; }
:root[data-kontrast="hoch"] .knopf,
:root[data-kontrast="hoch"] .knopf-haupt { font-size: 17px; }
:root[data-kontrast="hoch"] .knopf-zeile { font-size: 16px; }
:root[data-kontrast="hoch"] .knopf-klein { font-size: 14px; min-height: 40px; padding: 4px 10px; }
:root[data-kontrast="hoch"] .matrix { font-size: 15px; }
:root[data-kontrast="hoch"] .datentabelle thead th { font-size: 13px; }
:root[data-kontrast="hoch"] .datentabelle input { font-size: 17px; }
:root[data-kontrast="hoch"] table.liste th,
:root[data-kontrast="hoch"] table.liste td { font-size: 16px; }
:root[data-kontrast="hoch"] table.liste thead th { font-size: 13px; }
:root[data-kontrast="hoch"] .karte h2 { font-size: 18px; }
:root[data-kontrast="hoch"] .karte h3 { font-size: 15px; color: var(--tinte); }
:root[data-kontrast="hoch"] .meldung { font-size: 16px; }
:root[data-kontrast="hoch"] .kurve-eingabe,
:root[data-kontrast="hoch"] .kurve-werkzeug-titel { font-size: 15px; }
:root[data-kontrast="hoch"] .schiene-marke { font-size: 11.5px; }
:root[data-kontrast="hoch"] .schiene-marke.hervor { font-size: 12px; }
:root[data-kontrast="hoch"] input[type=text], :root[data-kontrast="hoch"] input[type=number],
:root[data-kontrast="hoch"] input[type=date], :root[data-kontrast="hoch"] input[type=time],
:root[data-kontrast="hoch"] input[type=password], :root[data-kontrast="hoch"] input[type=tel],
:root[data-kontrast="hoch"] input[type=email], :root[data-kontrast="hoch"] input[type=url],
:root[data-kontrast="hoch"] textarea {
    font-size: 19px;
    padding: 8px 10px;
    border: 2px solid var(--linie);
    border-radius: var(--rund-klein);
}
/* In Tabellenzellen bleibt das Feld eckig und randlos - die Zelle zeichnet. */
:root[data-kontrast="hoch"] .datentabelle input { border: 0; border-radius: 0; }

/* --- Abschnitte: deutlich voneinander abgesetzt --- */
:root[data-kontrast="hoch"] .abschnitt {
    margin: 0 0 40px;
    border: 3px solid var(--linie);
    border-radius: var(--rund);
}
/* Kopfzeile invertiert: der Beginn eines Abschnitts ist schon beim
   Vorbeiscrollen erkennbar. Der Radius innen ist um den Rand kleiner,
   sonst blitzt in den Ecken der Grund durch. */
:root[data-kontrast="hoch"] .abschnitt > .abschnitt-titel {
    padding: 10px 16px;
    font-size: 19px;
    background: var(--gewaehlt);
    color: var(--gewaehlt-text);
    border-bottom: 3px solid var(--linie);
    border-radius: calc(var(--rund) - 3px) calc(var(--rund) - 3px) 0 0;
}
:root[data-kontrast="hoch"] .abschnitt > .abschnitt-koerper { padding: 16px; }
:root[data-kontrast="hoch"] .unterabschnitt {
    margin: 22px 0 0;
    border: 2px solid var(--linie);
    border-radius: var(--rund-mittel);
}
:root[data-kontrast="hoch"] .unterabschnitt > .abschnitt-titel {
    padding: 8px 12px;
    font-size: 16px;
    border-bottom: 2px solid var(--linie);
    border-radius: calc(var(--rund-mittel) - 2px) calc(var(--rund-mittel) - 2px) 0 0;
}
:root[data-kontrast="hoch"] .unterabschnitt > .abschnitt-koerper { padding: 12px; }
:root[data-kontrast="hoch"] .raster { gap: 16px 16px; }
:root[data-kontrast="hoch"] .frage {
    gap: 10px 14px;
    padding: 10px 0;
    border-bottom: 2px solid var(--linie-fein);
}
:root[data-kontrast="hoch"] .auswahl,
:root[data-kontrast="hoch"] .auswahlgruppe {
    padding: 8px 12px 12px;
    border: 2px solid var(--linie);
    border-radius: var(--rund-mittel);
}
:root[data-kontrast="hoch"] .karte {
    border: 3px solid var(--linie);
    border-radius: var(--rund);
    margin-bottom: 28px;
}
:root[data-kontrast="hoch"] .kopfleiste { border-bottom-width: 3px; }
:root[data-kontrast="hoch"] .fussleiste { border-top-width: 3px; }
:root[data-kontrast="hoch"] .reiter.aktiv { box-shadow: inset 0 -5px 0 var(--tinte); }

/* --- Optionen: gross, rund, angekreuzt = gruen --- */
:root[data-kontrast="hoch"] .optionen { gap: 8px; }
:root[data-kontrast="hoch"] .opt {
    gap: 10px;
    padding: 6px 14px;
    border: 2px solid var(--linie);
    border-radius: var(--rund-mittel);
}
/* Ohne Kaestchen und Kreis: gewaehlt zeigt der ganze Knopf (gruen, kraeftiger).
   Ein Symbol mehr im Knopf waere hier nur Unruhe und kostet Breite. In den
   Matrixzellen (unten) bleibt der Kreis - dort ist er das Einzige. */
:root[data-kontrast="hoch"] .opt::before { display: none; }
:root[data-kontrast="hoch"] .opt { justify-content: center; }
:root[data-kontrast="hoch"] .opt.gewaehlt {
    background: var(--angekreuzt);
    border-color: var(--angekreuzt);
    color: var(--angekreuzt-text);
    /* Kraeftiger durch eine Kontur, nicht durch Fettschrift: die laeuft
       breiter, der Knopf wuchse beim Antippen und schoebe seine Nachbarn. */
    -webkit-text-stroke: .6px currentColor;
}
:root[data-kontrast="hoch"] .opt-eng { min-height: 40px; padding: 3px 10px; }
:root[data-kontrast="hoch"] .opt-leer { border-style: dashed; }
:root[data-kontrast="hoch"] .matrix-zelle .haken { width: 24px; height: 24px; border-width: 2px; }
:root[data-kontrast="hoch"] .matrix-zelle input:checked + .haken {
    background: var(--angekreuzt);
    border-color: var(--angekreuzt);
    box-shadow: inset 0 0 0 4px var(--papier);
}

/* --- Schaltflaechen und Flaechen: runde Ecken --- */
:root[data-kontrast="hoch"] .knopf,
:root[data-kontrast="hoch"] .knopf-haupt,
:root[data-kontrast="hoch"] .knopf-zeile,
:root[data-kontrast="hoch"] .knopf-klein,
:root[data-kontrast="hoch"] .knopf-schema,
:root[data-kontrast="hoch"] .benutzerknopf,
:root[data-kontrast="hoch"] .zifferblock button,
:root[data-kontrast="hoch"] .patient-neu,
:root[data-kontrast="hoch"] .meldung,
:root[data-kontrast="hoch"] .freigabe-lage,
:root[data-kontrast="hoch"] .freigabe-zeile {
    border-width: 2px;
    border-radius: var(--rund-mittel);
}
/* Schmale Zeitfelder (zwei Rasterspalten) fassen Feld und „Jetzt“ in
   grosser Schrift nicht nebeneinander - dann bricht der Knopf unter das
   Feld um, statt in die Nachbarspalte zu ragen. */
/* Nur bei Uhrzeitfeldern: dort braucht das Feld selbst seine Breite (die
   Uhr im Feld). Feld mit Einheit bleibt in einer Zeile - die Einheit
   gehoert sichtbar zur Zahl. */
:root[data-kontrast="hoch"] .feld-zeit .feld-eingabe { flex-wrap: wrap; }
:root[data-kontrast="hoch"] .feld-eingabe > input { flex: 1 1 0; min-width: 3em; }
:root[data-kontrast="hoch"] .feld-zeit .feld-eingabe > input { flex: 1 1 7em; min-width: 0; }
:root[data-kontrast="hoch"] .feld-eingabe > .knopf-jetzt { flex: 1 0 auto; padding: 0 10px; }
/* Neben einem Feld stehen „Jetzt“ und die Einheit mit eigenem Rand -
   die Felder sind rund, ein angesetzter Knopf saehe abgeschnitten aus. */
:root[data-kontrast="hoch"] .feld-eingabe .knopf-jetzt,
:root[data-kontrast="hoch"] .feld-eingabe .einheit {
    border: 2px solid var(--linie);
    border-radius: var(--rund-klein);
}
:root[data-kontrast="hoch"] .unterschrift-flaeche,
:root[data-kontrast="hoch"] .bild-kachel,
:root[data-kontrast="hoch"] .bild-kachel img,
:root[data-kontrast="hoch"] .uebergabe-code { border-radius: var(--rund-klein); }
:root[data-kontrast="hoch"] .schiene-griff { border-radius: 6px; }

/* ---------------------------------------------------------------------------
   Kompakte Auswahl.
   Optionen einer Auswahl stehen in gleich breiten Spalten dicht
   nebeneinander, statt je nach Beschriftungslaenge zu fliessen - mit der
   grossen Schrift im Hochkontrast sonst eine lange Treppe. Nur in
   Auswahlgruppen, die selbst eine Rasterzelle sind: nur dort steht die
   Breite fest. In einer Oder-Gruppe oder einer Frage schrumpft das Raster
   sonst auf eine Spalte und die Optionen stapeln sich.
   --------------------------------------------------------------------------- */
:root[data-auswahl="kompakt"] .raster > .auswahl > .optionen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
    gap: 4px;
}
:root[data-auswahl="kompakt"] .raster > .auswahl > .optionen > .opt {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 0;
}
:root[data-auswahl="kompakt"] .raster > .auswahl > .optionen .opt-text { overflow-wrap: anywhere; }

/* ===========================================================================
   Grafischer Editor des Bogens (s. views/bogeneditor.php).
   Bogen links, Tafel rechts daneben - nichts liegt ueber dem Bogen. Die
   Tafel bleibt beim Scrollen stehen, damit das Gewaehlte und seine
   Bearbeitung zugleich zu sehen sind.
   =========================================================================== */
.bogeneditor-seite { max-width: 1500px; }
.bogeneditor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}
.bogeneditor-tafel { position: sticky; top: 0; }
.bogeneditor-tafel .feld { margin-bottom: 10px; }
.bogeneditor-art { font-weight: 700; margin: 0 0 10px; }
@media (max-width: 900px) {
    .bogeneditor { grid-template-columns: 1fr; }
}
/* Schmal steht die Tafel im Bogen unter dem Gewaehlten (s. bogeneditor.js). */
.bogeneditor-tafel.tafel-im-bogen { position: static; grid-column: 1 / -1; margin: 8px 0; }
.bogeneditor-bogen .bogeneditor-tafel input, .bogeneditor-bogen .bogeneditor-tafel textarea,
.bogeneditor-bogen .bogeneditor-tafel button { pointer-events: auto; }
.bogeneditor-bogen .bogeneditor-tafel .feld:hover { outline: none; }

/* Nur ansehen und auswaehlen - nichts ausfuellen. */
.bogeneditor-bogen input, .bogeneditor-bogen textarea,
.bogeneditor-bogen button, .bogeneditor-bogen select { pointer-events: none; }
.bogeneditor-bogen .abschnitt-titel,
.bogeneditor-bogen .feld, .bogeneditor-bogen [data-code], .bogeneditor-bogen label.opt { cursor: pointer; }
.bogeneditor-bogen .feld:hover, .bogeneditor-bogen label.opt:hover,
.bogeneditor-bogen fieldset[data-code]:hover, .bogeneditor-bogen .frage:hover,
.bogeneditor-bogen .abschnitt-titel:hover { outline: 2px dashed var(--fokus); outline-offset: 2px; }

/* Bedingte Zusatzangaben erscheinen im Protokoll erst nach einer Wahl -
   hier stehen sie immer da, sonst liessen sie sich nicht bearbeiten. */
.bogeneditor-bogen .zusatz[hidden] {
    display: block !important;
    border-left: 3px dotted var(--linie-fein);
    padding-left: 8px;
}

.bogeneditor-bogen .bk-gewaehlt { outline: 3px solid var(--fokus) !important; outline-offset: 2px; }
.bogeneditor-bogen section.bk-gewaehlt > .abschnitt-titel { outline: 3px solid var(--fokus); }

/* Ausgeblendet: schraffiert und blass - im Protokoll fehlt es. */
.bogeneditor-bogen .bk-aus {
    opacity: .5;
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--raster-tief) 6px 8px);
}
.bogeneditor-bogen label.opt.bk-aus { text-decoration: line-through; }

/* ===========================================================================
   MANV-Lagekarte (s. assets/js/manvkarte.js).
   Die Karte fuellt die Breite; Werkzeuge darueber, Auswertung darunter -
   nichts liegt auf der Karte ausser Quellenvermerk und Massstab.
   =========================================================================== */
.manvkarte-leiste { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.manvkarte-gruppe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.manvkarte-werkzeug { gap: 6px; }
.manvkarte-werkzeug[aria-pressed="true"],
.manvkarte-gruppe .knopf-klein[aria-pressed="true"] { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.manvkarte-flaeche {
    height: min(68vh, 720px);
    min-height: 360px;
    border: 1.5px solid var(--linie);
    background: #eceae6;
}
.manvkarte-flaeche.manvkarte-zeichnet .maplibregl-canvas { cursor: crosshair; }
.manvkarte-unten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 20px; margin-top: 10px; }
.manvkarte-teil h3 { margin: 6px 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.manvkarte-liste, .manvkarte-radar { list-style: none; margin: 0; padding: 0; }
.manvkarte-liste li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 6px 0; border-bottom: 1px solid var(--linie-fein);
}
.manvkarte-liste li input { flex: 1 1 160px; width: auto; min-height: 36px; }
.manvkarte-bewertung { flex: 0 0 100%; margin: 2px 0 0 22px; font-size: 12.5px; }
.manvkarte-radar li { padding: 6px 0 6px 22px; border-bottom: 1px solid var(--linie-fein); position: relative; }
.manvkarte-radar li > .manvkarte-punkt { position: absolute; left: 0; top: 9px; }
.manvkarte-radar-lage { color: var(--tinte-schwach); }
.manvkarte-radar-tun { display: block; font-size: 12.5px; }
.manvkarte-wind { font-size: 13px; }
.manvkarte-punkt {
    display: inline-block; flex: 0 0 auto;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linie);
    background: #888;
}
.manvkarte-punkt[data-art="schadensstelle"]      { background: #b3283f; }
.manvkarte-punkt[data-art="einsatzleitung"]      { background: #1f4e9c; }
.manvkarte-punkt[data-art="patientenablage"]     { background: #c26a00; }
.manvkarte-punkt[data-art="behandlungsplatz"]    { background: #2e7d32; }
.manvkarte-punkt[data-art="sammelstelle"]        { background: #6d8f1e; }
.manvkarte-punkt[data-art="landeplatz"]          { background: #6a1b9a; }
.manvkarte-punkt[data-art="bereitstellungsraum"] { background: #0d6e7a; border-radius: 3px; }
/* Der Quellenvermerk ist Pflicht (CC BY 4.0) und soll lesbar sein. */
.manvkarte-flaeche .maplibregl-ctrl-attrib { font-size: 11px; }

/* Markierung eines eingezeichneten Punkts: Punkt und Bezeichnung, immer obenauf. */
.manvkarte-marke { display: flex; flex-direction: column; align-items: center; pointer-events: none; transform-origin: top; }
.manvkarte-marke .manvkarte-punkt { width: 20px; height: 20px; border-width: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.manvkarte-marke-text {
    margin-top: 2px; padding: 1px 6px; border-radius: 4px;
    font: 700 13px/1.3 var(--schrift); color: #14080b; background: rgba(255,255,255,.88);
    white-space: nowrap;
}

.manvkarte-windzeile { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.manvkarte-windzeile:empty { display: none; }