/*
 * Schritt-Karte K3 (docs/ablauf-schritt-karte-2026-10-23.md §2.1): Zielgrößen für eine Hand, Handschuh, Sonne.
 * Hauptknopf mind. 56 px hoch, volle Breite; Nebenknöpfe mind. 48 px, Abstand mind. 12 px; Wertfeld mind. 56 px, Schrift ab 22 px
 * (für K4); Leiter und Zustand ab 20 px fett. R20 verlangt 44 px als Untergrenze — die Karte liegt darüber.
 * ⛔ Jede Regel ist auf die Karte begrenzt (`.sk-karte …`): außerhalb bleibt 44 px (keine Fernwirkung, Probe G-11).
 * Keine Hover-Bedienung, keine eigenen Farben: Kontrast wie urteilsmarken.css / basis.css.
 */
.sk-karte { display: flex; flex-direction: column; gap: var(--ab-3); margin: 0 0 var(--ab-4); }
.sk-karte .sk-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--ab-3); }
.sk-karte .sk-zaehler { font-weight: 600; }
.sk-karte .sk-haupt { display: block; width: 100%; min-height: 56px; font-size: 1.125rem; margin-top: var(--ab-3); }
.sk-karte .sk-neben { min-height: 48px; }
.sk-karte .sk-nebenknoepfe { display: flex; flex-wrap: wrap; gap: var(--ab-3); }
.sk-karte .sk-titel { text-transform: uppercase; letter-spacing: 0.02em; margin: 0; font-size: var(--gr-alt-1rem); font-weight: 700; }
.sk-karte .sk-leiter, .sk-karte .sk-zustand { font-size: var(--gr-alt-20); font-weight: 700; margin: 0; }
.sk-karte .sk-geraet, .sk-karte .sk-anschluss, .sk-karte .sk-handlung { margin: 0; }
.sk-karte .sk-marke { display: inline-block; min-width: 6.5em; font-weight: 400; color: var(--text-secondary); }
.sk-karte .sk-zusatz { margin: 0 0 0 6.5em; font-size: 0.9rem; }
.sk-karte .sk-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab-3); }
.sk-karte .sk-schritt { display: flex; flex-direction: column; gap: var(--ab-2); }
.sk-karte .sk-aufklappen { margin-left: auto; font-weight: 600; }
/* K4: das Wertfeld in der Karte (mind. 56 px, Schrift ab 22 px), Band „Gespeichert“ und offline (K8). */
.sk-karte .sk-eingabe input.form-control, .sk-karte .sk-eingabe select.form-control { min-height: 56px; font-size: 22px; }
.sk-karte .sk-band, .sk-karte .sk-offline { display: flex; flex-direction: column; gap: var(--ab-2); }
.sk-karte .sk-gespeichert { margin: 0; font-weight: 700; }
.sk-karte .sk-offline p { margin: 0; }
/* K5: Ja/Nein als drei große Wahlknöpfe (je 56 px, volle Breite, 12 px Abstand); die gewählte Antwort ist gedrückt markiert. Foto in der Karte. */
.sk-karte .sk-wahlknoepfe { display: flex; flex-direction: column; gap: var(--ab-3); }
.sk-karte .sk-wahl { display: block; width: 100%; min-height: 56px; font-size: 1.125rem; }
.sk-karte .sk-wahl[aria-pressed="true"] { font-weight: 700; border-width: 3px; }
.sk-karte .sk-foto { display: flex; flex-direction: column; gap: var(--ab-3); }
.sk-karte .sk-foto select.form-control, .sk-karte .sk-foto input.form-control { min-height: 56px; }
/* Gate 2 L-1: Rückfrage im Band ([Feststellung wählen], [Später], `btn-sm` aus `fuehrung-letzte.js`) und [Fragen] in der Karte 48 px (Plan §2.1);
   die Dateien stehen auch im AUS-Markup — deshalb nur unter `.sk-karte` (außerhalb bleibt 44 px, G-11). */
.sk-karte .fuehrung-rueckfrage .btn, .sk-karte .fuehrung-frage .btn { min-height: 48px; }
/* Gate 2 H-3 (Nr. 124): „Weitere Angaben“ — zugeklappt, Kopf 48 px; die Felder darin wie im Block. */
.sk-karte .sk-weitere > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
/* H-3: in der Karte ohne die doppelte Zeile „Messung (Entwurf)“ (der Entwurf steht offen), Feldhilfen erst mit [Hilfe] (`hidden` gegen `.bp-hilfe { display }`). */
.sk-karte .sk-eingabe .bp-entwurf > summary { display: none; }
.sk-karte .bp-hilfe[hidden] { display: none; }
/* H-3 Maß (Nr. 124): die Leiste mit den Feldern im Bild und dem Hauptknopf haftet unten am Bildschirm (Daumenzone), solange die Karte im Bild ist. */
.sk-karte .sk-leiste { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--ab-2); padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-page); border-block-start: 1px solid var(--border-feld); }
.sk-karte .sk-leiste .form-group { margin-bottom: 0; }
.sk-karte .sk-leiste .sk-haupt { margin-top: var(--ab-1); }
/* Die Leiste haftet nur innerhalb ihres Elternkastens — `.sk-schritt`/`.sk-eingabe` ohne eigenen Kasten, damit sie über die ganze Karte haftet (gemessen). */
.sk-karte .sk-schritt, .sk-karte .sk-eingabe { display: contents; }
/* Delta-Gate 2 N-1 (Nr. 125): unter 900 px liegt die Handy-Navigation (`nav#handy-leiste`, fest, z-index 100) unten am Bildschirm — die Leiste haftet
   ÜBER ihr (Höhe und Rand aus `handy-leiste.css`, ein Ort; ab 900 px 0 bzw. der Home-Indikator), sonst trifft ein Tipp in die Daumenzone die Navigation
   statt [Wert übernehmen] (gemessen in Chromium). Ohne `handy-leiste.css` wie vorher (`bottom: 0`). */
.sk-karte .sk-leiste { bottom: var(--handy-leiste-hoehe, 0px); padding-bottom: calc(8px + var(--unten-frei, env(safe-area-inset-bottom, 0px))); }
/* Delta-Gate 2 F-2 (Nr. 125): bei zugeklapptem Schritt 0 stehen Titel, Leiter, Zustandswort, Gerät und die erste Zeile des Anschlusses über der Leiste;
   die Zusatzsätze erst mit [Hilfe] (`hidden`, Text im DOM). Zwei Felder der Leiste nebeneinander (`sk-spalten`), Abstand 12 px (§2.1). */
.sk-karte .sk-zusatz[hidden] { display: none; }
.sk-karte .sk-leiste.sk-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ab-3); row-gap: var(--ab-2); }
.sk-karte .sk-leiste.sk-spalten > * { grid-column: 1 / -1; }
.sk-karte .sk-leiste.sk-spalten > .form-group:not(.sk-ganz) { grid-column: auto; display: flex; flex-direction: column; justify-content: flex-end; }
/* F-2: das Band knapp — „Gespeichert“ ist sein Kopf (ohne die zweite Zeile „Letzte Messung:“), die Frage zur Feststellung ist ein Zusatzsatz (mit [Hilfe]);
   [Feststellung wählen]/[Später] bleiben im Band. Der Gerätesatz steht ohne [Hilfe] mit seiner ersten Zeile (das Gerätewort), ganz mit [Hilfe].
   Zwischen den Zeilen des Schritts 8 px statt 12 px (Text, keine Berührziele). Die Prüfspannungszeile der Leiste ohne Markenspalte. */
.sk-karte .sk-band { gap: var(--ab-1); }
.sk-karte .sk-band .fuehrung-letzte-kopf { display: none; }
.sk-karte .sk-band .fuehrung-letzte { margin: 0; }
.sk-karte .sk-band .fuehrung-letzte > p { margin: 0 0 var(--ab-1); }
.sk-karte:not(.sk-mit-hilfe) .sk-band .fuehrung-letzte > p.u-klein { display: none; }
.sk-karte:not(.sk-mit-hilfe) .sk-geraet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.sk-karte .sk-leiter, .sk-karte .sk-zustand, .sk-karte .sk-geraet, .sk-karte .sk-anschluss { margin-top: -4px; }
.sk-karte .sk-leiste .sk-pruefspannung { font-size: 0.875rem; }
.sk-karte .sk-leiste .sk-pruefspannung .sk-marke { min-width: 0; }
/* F-3 (Nr. 126): der Sicherheitssatz der Zustand-Erläuterung (`zustand_sicherheit` des Servers) steht immer im Fluss über der Leiste — kein `hidden`, keine Kürzung;
   abgesetzt durch einen Strich in Textfarbe (keine eigene Farbe, `--warning` bedeutet Urteile). */
.sk-karte .sk-sicherheit { margin: 0; padding: var(--ab-1) 0 var(--ab-1) var(--ab-2); border-inline-start: 4px solid currentColor; font-weight: 600; font-size: 0.95rem; }
.sk-karte .sk-sicherheit .sk-marke { display: block; min-width: 0; font-weight: 700; color: inherit; }
/* F-3-Maß (Nr. 126, Chromium 390 × 844): eine Leiste mit vielen Pflichtfeldern (Thermografie AC: 14) war höher als das Bild — der Hauptknopf lag unter dem Rand.
   Die Leiste ist höchstens 60 % der Bildhöhe hoch und rollt in sich; Hauptknopf und Wahlknöpfe haften an ihrem unteren Rand (das Wertfeld steht oben in ihr). */
/* L-2 (Gate W2 Teil 1, gemessen 390 × 450 ≈ Tastatur): eine haftende Leiste verlässt ihren Elternkasten (die Karte, Anfang bei ≈189 px: App-Kopf 56 + Vorgangsfelder 133) nie nach oben — war sie höher als der Platz
   bis zur Navigation, ragte sie (und „Wert übernehmen“) unter diese. Deshalb zusätzlich höchstens: Bildhöhe − Navigation − 192 px (bei 844 und 667 px Höhe greift weiter die 60 %). */
.sk-karte .sk-leiste { max-height: min(60dvh, calc(100dvh - var(--handy-leiste-hoehe, 0px) - 192px)); overflow-y: auto; overscroll-behavior: contain; }
.sk-karte .sk-leiste > .sk-haupt, .sk-karte .sk-leiste > .sk-wahlknoepfe { position: sticky; bottom: 0; z-index: 1; }
.sk-karte .sk-leiste > .sk-wahlknoepfe { background: var(--bg-page); }
/* W2-2 (Nr. 176): der FUSS — der Hauptknopf haftet in jedem Zustand (Foto, Checkliste, Gefahr-Halt, gesperrt, erledigt, Arbeitsgang) unten ÜBER der Handy-Navigation,
   wie die Leiste des Messschritts (Ort und Rand aus `handy-leiste.css`; ab 900 px 0 bzw. der Home-Indikator). Eigener Hintergrund, damit nichts unter ihm durchscheint. */
.sk-karte .sk-fuss { position: sticky; bottom: var(--handy-leiste-hoehe, 0px); z-index: 2; padding: 8px 0 calc(8px + var(--unten-frei, env(safe-area-inset-bottom, 0px)));
    background: var(--bg-page); border-block-start: 1px solid var(--border-feld); }
.sk-karte .sk-fuss .sk-haupt { margin-top: 0; }
/* W2-3 (Nr. 176): die Phasenleiste — fünf gleich breite Segmente, nur Anzeige (kein Tippen), 32 px hoch (Platzbudget gemessen, W2-2: bei 40 px rutschte der Zustand des DC-Schritts mit Band unter die Leiste); Zeichen ● abgehandelt, ◐ läuft, ○ offen, die laufende Phase fett.
   Keine eigenen Farben (Zustand steht im Zeichen und im Wort, nie nur in der Farbe); Vermerke stehen mit ihrer Zahl darunter, nie still. */
.sk-karte .sk-phasen { display: flex; gap: var(--ab-1); list-style: none; margin: 0; padding: 0; }
.sk-karte .sk-kopfblock { display: flex; flex-direction: column; gap: var(--ab-1); }
.sk-karte .sk-phase { flex: 1 1 0; min-width: 0; min-height: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0 var(--ab-alt-2);
    border-block-end: 3px solid var(--border-feld); font-size: 0.8125rem; line-height: 1.2; text-align: center; color: var(--text-secondary); }
.sk-karte .sk-phase-zeile { white-space: nowrap; }
.sk-karte .sk-phase[aria-current="step"] { font-weight: 700; color: inherit; border-block-end-color: currentColor; }
.sk-karte .sk-phase-fertig { color: inherit; }
.sk-karte .sk-phase-vermerkt { font-size: 0.6875rem; line-height: 1; font-weight: 400; }
/* W2-4 (Nr. 176): Schritt 0 als Bildschirm und als EINE Kopfzeile (44 px, R20-Untergrenze); der Volltext steht verborgen im DOM (R2), `hidden` gegen jede Anzeigeregel. */
.sk-karte .sk-schritt0-zeile { margin: 0; }
.sk-karte .sk-schritt0-kopf { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 0; padding: 0 var(--ab-1); background: none; border: 0;
    border-block-end: 1px solid var(--border-feld); font: inherit; font-weight: 600; text-align: start; color: inherit; cursor: pointer; }
.sk-karte .sk-schritt0-text[hidden] { display: none; }
.sk-karte .sk-schritt0[data-ansicht="schirm"] { display: flex; flex-direction: column; gap: var(--ab-2); }
.sk-karte .sk-schritt0-text { margin: 0; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: var(--ab-alt-6); }
.sk-karte .sk-schritt0-jetzt { margin: 0; font-weight: 600; }
/* M-2 (Gate W2 Teil 1, gemessen Chromium 390 × 844 mit Navigation, Band + zweizeiliges Zustandswort im Rangwechsel DC): die Phasenleiste (W2-3) nahm dem Schritt 15 px; die strenge Fassung der Nr. 125 (Zustandswort GANZ
   über der Leiste) gilt wieder. Der Zähler steht bereits in der Kopfzeile des Kopfblocks (kein eigener Streifen unter der Leiste, Ablauf §2.0); den Rest holt der Abstand der Kopfblöcke untereinander (12 → 6 px) — keine
   Berührfläche wird kleiner (Knöpfe 48/56 px, Kopfzeile Schritt 0 44 px bleiben). */
.sk-karte .sk-kopfblock { gap: var(--ab-alt-2); }
.sk-karte .sk-phase { min-height: 30px; }
.sk-karte > .sk-kopfblock + .sk-schritt0-zeile, .sk-karte > .sk-schritt0-zeile + .sk-band, .sk-karte > .sk-kopfblock + .sk-band, .sk-karte > .sk-schritt0-zeile + .sk-schritt > .sk-titel { margin-top: -6px; }
.sk-karte > .sk-band + .sk-schritt > .sk-titel { margin-top: -6px; }
/* W2-5 (Nr. 180 c, Delta-Gate W2 Teil 1 N-1): auf NIEDRIGEN Bildschirmen (Höhe < 800 px bei Normalschrift: 50 em; dieselbe Abfrage wie `fuehrung-karte-band.js`, eine größere Systemschrift zählt mit) ist die Leiste niedriger
   und das Band kürzer (Urteil und Satz im Bild, Grenze/Quelle aufklappbar) — Titel, Leiter, Zustandswort und Gerät stehen nach einem Rangwechsel mit Band ganz über der Leiste (Nr. 125 F-2). Keine Berührfläche unter 44 px. */
@media (max-height: 49.99em) {
    /* Mit Band: über der Leiste stehen Kopf, Schritt-0-Zeile, Band, Titel, Zustandswort (gemessen: 480 px bei 16 px Schrift, 562 px bei 17,6 px — daher 51 rem − 336 px); die Leiste nimmt den Rest, mindestens den Hauptknopf (5 rem), und rollt in sich. */
    .sk-karte.sk-mit-band .sk-leiste { max-height: max(5rem, calc(100dvh - var(--handy-leiste-hoehe, 0px) - 51rem + 336px)); }
    .sk-karte .sk-band-mehr > summary { min-height: 44px; cursor: pointer; list-style: none; margin: 0; }
    .sk-karte .sk-band-mehr > summary::-webkit-details-marker { display: none; }
    .sk-karte .sk-band-mehr > p { margin: 0 0 var(--ab-1); }
    .sk-karte .sk-band-pfeil { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
    .sk-karte .sk-band .fuehrung-letzte > p { margin-bottom: 0; }
}
/* W2-5 (Nr. 176): die Bewerten-Station „Befunde ansehen“ — die Liste der Befunde ohne Feststellung (Satz in Urteilsfarbe, [Feststellung wählen] 48 px, `fuehrung-karte.css` oben) untereinander, 12 px Abstand. */
.sk-karte .sk-bewerten { display: flex; flex-direction: column; gap: var(--ab-2); }
.sk-karte .sk-bewerten .bp-abschluss-spaeter > p { margin: 0 0 var(--ab-2); }
.sk-karte .sk-bewerten .bp-abschluss-spaeter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ab-3); }
/* Gate 2 W2-7 A-1 / M-1 (Bildschirmtastatur): mit Band war die Leiste bei aufgehender Tastatur 80 px hoch (5 rem), der haftende Hauptknopf (56 px) deckte das Wertfeld (56 px) bis auf 8 px. Solange ein Eingabefeld der Leiste den Fokus hat
   (`:has(input:focus, textarea:focus)`, nicht Haken/Auswahl/Datei), rollt die Leiste nicht in sich (der Hauptknopf haftet dann nirgends mehr „über“ dem Feld): Feld und Hauptknopf stehen untereinander am unteren Rand der (haftenden) Leiste, nichts deckt
   das Feld, das Band rollt dafür nach oben aus dem Bild. NICHT `:focus-within`: ein Fokus auf dem Hauptknopf (Antippen) ließe die Leiste zwischen Berühren und Loslassen umbrechen, der Klick ginge verloren. Ohne Fokus im Feld (Fenster ohne Tastatur) gilt alles wie zuvor.
   (Kein `scroll-padding`: die Gestaltungs-Ratsche RA-b zählt jeden neuen Abstandswert.) */
@media (max-height: 40em) { /* nur ein Fenster, das so niedrig ist, dass eine Tastatur es füllt (gemessen: mit Tastatur 400 bis 560 px, ohne 667 px und höher; ein Autofokus im Feld ohne Tastatur lässt die Leiste unverändert) */
    .sk-karte .sk-leiste:has(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="file"]):focus), .sk-karte .sk-leiste:has(textarea:focus) { max-height: none; overflow-y: visible; }
}
/* W2-5 Auflage H-1 (Nr. 186 a, Gate W2-5): an Ja/Nein-Schritten ist die Leiste NIE niedriger als alle drei Wahlknöpfe (3 × 56 px + 2 × 12 px + Rand ≈ 210 px = 14 rem) — keine Antwort rollt aus dem Bild; das Zustandswort darf dort rollen.
   Gilt auch im Querformat (die 192-px-Grenze von L-2 würde die Leiste dort auf ≈ 120 px drücken). Andere Schritte behalten Nr. 180 (c). */
.sk-karte .sk-leiste.sk-janein, .sk-karte.sk-mit-band .sk-leiste.sk-janein { max-height: max(14rem, min(60dvh, calc(100dvh - var(--handy-leiste-hoehe, 0px) - 192px))); }
/* Nr. 187 (a): der Hinweis „Handy hochkant halten“ — nur im Querformat auf dem Handy (schmaler als 900 px, niedriger als 32 em); sonst verborgen. Ein Satz, nichts zum Tippen. */
.sk-karte .sk-quer-hinweis { display: none; margin: 0; font-weight: 600; font-size: 0.9rem; }
@media (orientation: landscape) and (max-width: 899px) and (max-height: 32em) {
    .sk-karte .sk-quer-hinweis { display: block; }
}