/* ===========================================================================
   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;

    --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;

    color-scheme: dark;
}

* { 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;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
}
.statuspunkt {
    width: 11px; height: 11px;
    border: 1px solid var(--tinte);
    border-radius: 50%;
    background: var(--papier);
}
.statuspunkt.gespeichert { background: var(--tinte); }
.statuspunkt.offen      { background: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 4px); }
.statuspunkt.fehler     { background: var(--warnung); border-color: var(--warnung); }

.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; }

/*
 * 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;
}
.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; }
.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;
}

/* 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;
}
[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; }
.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;
}
.kurve-huelle { overflow-x: auto; }
.kurve { display: block; background: var(--papier-hell); }

.raster-fein     { stroke: var(--linie-fein); stroke-width: .6; }
.raster-stark    { stroke: var(--linie-fein); stroke-width: 1.2; }
.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); }
.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); }

/* 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; }

/* --- 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 {
    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; }
/*
 * 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; }
.fuss-hinweis { font-size: 12px; color: var(--tinte-schwach); }

/* --- 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; }

.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); }

.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; }
}

/* --- Druck: entspricht dem Papiervordruck --- */
@media print {
    .kopfleiste, .patientenleiste, .scrollschiene, .fussleiste, .knopf-zeile, .spalte-aktion { 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; }
.konflikt-marke { color: var(--warnung); }

/*
 * 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); }

/* --- 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); }
.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: 900px; }
.medikation .zelle-gaben { width: 68%; }
.gaben { display: flex; flex-wrap: wrap; gap: 4px; }
.gabe {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--linie-fein);
    background: var(--papier-hell);
}
.gabe-reihe { display: flex; align-items: stretch; }
.datentabelle .gabe input { flex: 0 0 auto; min-height: 34px; }
.gabe input[data-spalte="Menge"],
.gabe input[data-spalte="Volumen"] { width: 58px; }
.gabe input[data-spalte="Menge/@einheit"],
.gabe input[data-spalte="Volumen/@einheit"] { width: 74px; border-left: 1px solid var(--linie-fein); }
.gabe .zelle-zeit input { width: 92px; }
.gabe-wann {
    display: flex; align-items: center;
    padding: 0 3px;
    font-size: 10px;
    color: var(--tinte-schwach);
    border-left: 1px solid var(--linie-fein);
}
.gabe-weg {
    min-width: 36px;
    border: 0;
    border-left: 1px solid var(--linie-fein);
    background: var(--raster);
    font-size: 17px;
}
.eine-gabe .gabe-weg { visibility: hidden; }
.knopf-erneut { margin-top: 4px; min-height: 38px; }

/* --- 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; }