/* Die Kachel eines Schritts des Sensorverantwortlichen (assets/sv-schritte.js).
   Herausgeloest wortgleich aus sensormontage.html (23.09.2026), damit der
   Operator sie genau so zeigt. Die Huelle (.s4huelle) bleibt in der Seite. */
.s4{flex:1;min-height:0;display:flex;flex-direction:column;
    border-radius:20px;overflow:hidden}
/* Deckend statt Glas (Dani, 23.09.2026): die Liste dahinter schien durch
   die Erklaerung hindurch. Der Ton ist der der erhabenen Kacheln. */
.s4.ds-glas{background:var(--hochTon);backdrop-filter:none;-webkit-backdrop-filter:none}
.s4kopf{display:flex;align-items:center;gap:11px;padding:13px 17px 0;flex:none}
.s4zurueck{width:34px;height:34px;border-radius:50%;border:none;font-size:24.5px;
     line-height:1;cursor:pointer;font-family:inherit;color:var(--tinte);flex:none}
.s4titel{font-size:18px;font-weight:800;color:var(--ink);display:block;line-height:1.2}
.s4unter{font-size:14px;color:var(--dim);font-weight:600}
.s4punkte{display:flex;align-items:center;gap:6px;padding:11px 17px 0;flex:none}
.s4punkte i{width:22px;height:4px;border-radius:100px;background:var(--linieFein);display:block}
.s4punkte i.weg{background:var(--gut)}
.s4punkte i.hier{background:var(--tinte)}
.s4punkte span{margin-left:6px;font-size:13px;font-weight:800;letter-spacing:.13em;
     text-transform:uppercase;color:var(--faint)}
/* Bild und Erklaerung schweben als Kacheln, wie die Sensorkarten in der
   Liste (Dani, 09.09.2026). Vorher lagen sie frei auf dem Grund und
   waren die einzigen Stellen der Seite ohne Karte darunter. */
.s4bild{flex:1;min-height:90px;display:flex;align-items:center;
     justify-content:center;padding:9px 17px;color:var(--tinte);opacity:.9}
.zeich{width:100%;max-width:290px;height:100%;max-height:210px}
.s4inhalt{padding:0 17px;flex:none}
.s4h{font-size:22px;font-weight:800;margin:0 0 7px;color:var(--ink);letter-spacing:-.01em}
.s4text{font-size:16.5px;color:var(--dim);line-height:1.55;margin:0}
.s4liste{margin:11px 0 0;padding-left:19px;font-size:16.5px;color:var(--dim);line-height:1.7}
.s4liste li::marker{color:var(--tinte);font-weight:800}
.s4unten{padding:17px;flex:none}
.s4karte{border-radius:16px;padding:17px 19px}
.s4knopf{width:100%;padding:15px 16px;font-size:17.5px;font-weight:800;border-radius:13px;
     box-sizing:border-box;display:block;text-align:center}
.s4oder{margin:13px 0 5px;display:block}
.s4warte{border-radius:13px;padding:11px 13px;margin-bottom:9px;display:flex;
     align-items:baseline;gap:9px}
.s4warte .ds-lab{margin-bottom:0}
.s4warte b{font-size:18px;color:var(--ink)}

/* Ergaenzt 23.09.2026 (Plan Teil 3), nicht im Entwurf: die Rueckmeldung
   nach einem Knopf und der Wechsel zur richtigen Maschine. Leise, ohne
   gefuellte Flaeche; die Handlung bleibt der Knopf darueber. */
.s4 .warn{display:block;margin-top:11px;font:700 13.5px/1.5 Manrope;color:var(--or)}
.s4 .gut{display:block;margin-top:11px;font:700 13.5px/1.5 Manrope;color:var(--gut)}
.s4 .neben{width:100%;padding:14px 13px;font-size:13.5px;border-radius:11px;box-sizing:border-box;
     display:block;text-align:center;background:none;box-shadow:none;color:var(--dim);
     text-decoration:underline;text-underline-offset:3px;cursor:pointer;border:none;
     font-family:inherit;font-weight:700;margin-top:5px}
.s4 .ds-feld{box-sizing:border-box;padding:13px 12px;width:100%;font-size:16px}