/* ===========================================================================
   Notfall-Einsatzprotokoll - Gestaltung
   Die Farbgebung folgt dem Originalvordruck DIVI 6.0: 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; }

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

.marke {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.marke small {
    display: block;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--tinte-schwach);
}

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

/* --- 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;
    align-items: end;
}
/* 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-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;
}
.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], 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;
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt::before {
    content: "";
    flex: 0 0 auto;
    width: 15px; height: 15px;
    border: 1.5px solid var(--tinte);
    background: var(--papier);
}
.opt:has(input[type=radio])::before { border-radius: 50%; }
.opt:has(input:checked) { background: var(--gewaehlt); color: var(--gewaehlt-text); }
.opt:has(input:checked)::before {
    background: var(--gewaehlt-text);
    box-shadow: inset 0 0 0 3px var(--gewaehlt);
}
.opt:has(input:focus-visible) { 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; }

.oder-alternativen { align-items: start; }
.oder-trenner {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tinte-schwach);
}
.oder-trenner::before, .oder-trenner::after {
    content: ""; flex: 1 1 auto; border-top: 1px dashed var(--linie-fein);
}

/* --- 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;
}
.matrix-zelle input { position: absolute; opacity: 0; width: 0; height: 0; }
.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:has(input:focus-visible) { 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; }
.tabelle-block:has(tbody:empty) .tabelle-huelle { display: none; }

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

/* --- 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; }
.knopf-klein { min-height: 32px; padding: 3px 8px; font-size: 11.5px; }
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; }
    .sp-4, .sp-5, .sp-6 { grid-column: span 6; }
    .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; }
}