/* HAFENFRONT · Zentrale (Kandidat M1, 10.11.2026). Fenster und Pult statt HUD über Vollbild.
   CD: dunkle Hafennacht, Natrium-Orange #ff6c29 (Handlung, Sprechen), Barlow Condensed für Kennungen und Zahlen, Inter für Text.
   Regeln: keine Verläufe, kein Glas, kein Bounce, Status immer auch als Wort und Form, Ziele mindestens 44 px, Schrift mindestens 14 px.
   Schriften kommen vom Client (fonts.css, lokal), keine Fremdanfrage. */
body.sf-aktiv {
  --z-oben: max(0px, env(safe-area-inset-top)); --z-unten: max(0px, env(safe-area-inset-bottom));
  --z-rand: 6px; --z-leiste: 48px; --z-pult: 240px; --z-tisch: 76px; --z-sl: 232px; --z-sr: 160px;
  --w-l: var(--z-rand); --w-r: var(--z-rand);
  --w-t: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand));
  --w-b: calc(var(--z-unten) + var(--z-pult) + 2 * var(--z-rand));
  --sf-tastatur: 0px;
}
#sf {
  --grund: #0b0f15; --flaeche: #131a24; --flaeche2: #1b2431; --kante: #2c384a; --text: #efe6d6; --leise: #a9b3bf;
  --natrium: #ff6c29; --natrium-dunkel: #3a1c0e; --tinte: #14100c; --bernstein: #e8a24a; --rot: #ff5a4a; --rot-dunkel: #3a0f0c;
  --gut: #8fd19e; --eigen: #35d6f0; --warm: #ffd9a0; --schild: rgba(11, 15, 21, 0.92);
  --lage-farbe: var(--gut); --lage-dicke: 2px;
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.35; color: var(--text);
}
#sf[data-lage="ruhe"] { --lage-farbe: var(--gut); --lage-dicke: 2px; }
#sf[data-lage="kontakt"] { --lage-farbe: var(--bernstein); --lage-dicke: 3px; }
#sf[data-lage="gefecht"] { --lage-farbe: var(--rot); --lage-dicke: 4px; }
#sf[data-lage="krise"] { --lage-farbe: var(--rot); --lage-dicke: 6px; }
#sf[data-lage="ausgang"] { --lage-farbe: var(--text); --lage-dicke: 3px; }
/* Tag: Pultflächen hell für Sonnenlicht, Schrift dunkel; Orange nur als Fläche mit dunkler Schrift (nie Orange als Text auf hell) */
#sf.sf-tag { --grund: #e9e1d2; --flaeche: #f4eee2; --flaeche2: #e4dccb; --kante: #8d8575; --text: #14100c; --leise: #3b4350; --natrium-dunkel: #ffd9c4; --warm: #5a3b00; --schild: rgba(11, 15, 21, 0.94); }
#sf * { box-sizing: border-box; }
#sf [hidden] { display: none !important; }
:where(#sf) button, :where(#sf) input, :where(#sf) textarea { font: inherit; color: inherit; }
#sf button { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.sf-kennzeile, .sf-label, .sf-lichttext { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

/* Alte Oberfläche weg: Das ist das neu gedachte Interface. */
body.sf-aktiv #hud, body.sf-aktiv #spectator-bar, body.sf-aktiv #touch-toolbar, body.sf-aktiv #alerts, body.sf-aktiv #funk-line, body.sf-aktiv #gefluester,
body.sf-aktiv #operation-panel, body.sf-aktiv #field-guide, body.sf-aktiv #lagebild, body.sf-aktiv #hud-strip, body.sf-aktiv #revier-line, body.sf-aktiv #perf-chip,
body.sf-aktiv #actioncam-chip, body.sf-aktiv #army-supply, body.sf-aktiv #idle-workers, body.sf-aktiv #worker-split, body.sf-aktiv #world-keys, body.sf-aktiv #key-target,
body.sf-aktiv #env-fx, body.sf-aktiv #env-chip, body.sf-aktiv #income-nudge, body.sf-aktiv #material-nudge, body.sf-aktiv #field-notice, body.sf-aktiv #hud-minimap, body.sf-aktiv #minimap, body.sf-aktiv #groups,
body.sf-aktiv #renderer-label, body.sf-aktiv #zoom-value, body.sf-aktiv #team-open, body.sf-aktiv #btn-menu, body.sf-aktiv #sound-toggle-game, body.sf-aktiv #toast,
body.sf-aktiv .toast, body.sf-aktiv #boot-status { display: none !important; }
/* Der Raum: die Front ist ein Fenster. #world sitzt genau im Rahmen (--w-*), alles andere ist Pult. */
body.sf-aktiv #game { --top: 0px; --hud: 0px; min-width: 0; background: #0b0f15; }
/* Das Canvas ist ein ersetztes Element: left/right strecken es nicht, also feste Breite und Höhe. Die Wiederholungen heben die Spezifität über body.touch-layout.spectating #world (Client, !important). */
html body.sf-aktiv.sf-aktiv.sf-aktiv.sf-aktiv #world { position: fixed !important; left: var(--w-l) !important; top: var(--w-t) !important; right: auto !important; bottom: auto !important; width: calc(100% - var(--w-l) - var(--w-r)) !important; height: calc(100% - var(--w-t) - var(--w-b)) !important; border: none !important; }

/* Der Fokusring des Clients (weißer Ring, dunkler Innenschatten) würde das Fenster doppelt einrahmen; der Rahmen der Lage ersetzt ihn. */
html body.sf-aktiv.sf-aktiv #world:focus-visible, html body.sf-aktiv.sf-aktiv #world:focus { outline: none !important; box-shadow: none !important; }

/* Blende für harte Schnitte (nur im Fenster) */
.sf-blende { position: fixed; left: var(--w-l); right: var(--w-r); top: var(--w-t); bottom: var(--w-b); background: #05090d; opacity: 0; transition: opacity 90ms linear; pointer-events: none; }
.sf-blende.sf-an { opacity: 0.6; }

/* ---------- Frontfenster: Rahmen folgt der Lage ---------- */
.sf-fenster { position: fixed; left: var(--w-l); right: var(--w-r); top: var(--w-t); bottom: var(--w-b); border: var(--lage-dicke) solid var(--lage-farbe); border-radius: 3px; pointer-events: none; }
.sf-ecke { position: absolute; width: 16px; height: 16px; border: 0 solid #efe6d6; opacity: 0.85; }
.sf-ecke[data-e="ol"] { left: 5px; top: 5px; border-left-width: 2px; border-top-width: 2px; }
.sf-ecke[data-e="or"] { right: 5px; top: 5px; border-right-width: 2px; border-top-width: 2px; }
.sf-ecke[data-e="ul"] { left: 5px; bottom: 5px; border-left-width: 2px; border-bottom-width: 2px; }
.sf-ecke[data-e="ur"] { right: 5px; bottom: 5px; border-right-width: 2px; border-bottom-width: 2px; }
#sf[data-lage="krise"] .sf-fenster { animation: sf-krise 1s steps(1, end) infinite; }
@keyframes sf-krise { 0% { border-color: var(--rot); } 50% { border-color: #6a2019; } }
/* Blickschild: wohin schaut das Fenster, und warum */
.sf-schild { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: var(--schild); border: 1px solid #2c384a; border-left: 4px solid var(--natrium); border-radius: 3px; padding: 4px 10px 5px; color: #efe6d6; animation: sf-schild-ein 140ms ease-out 1; }
.sf-schild[data-modus="manuell"] { border-left-color: var(--bernstein); }
@keyframes sf-schild-ein { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.sf-schild-kopf { margin: 0; font-size: 14px; color: #a9b3bf; line-height: 1.1; }
.sf-schild-ort { margin: 0; display: flex; gap: 8px; align-items: baseline; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.sf-schild-grund { font-size: 14px; letter-spacing: 0.1em; color: #14100c; background: var(--lage-farbe); padding: 0 6px; border-radius: 2px; }

/* ---------- Lagebalken ---------- */
.sf-leiste { position: fixed; left: var(--z-rand); right: var(--z-rand); top: calc(var(--z-oben) + 0px); height: var(--z-leiste); display: flex; align-items: center; gap: 8px; padding: 0 0 0 10px; background: var(--flaeche); border: 1px solid var(--kante); border-top: 0; border-radius: 0 0 4px 4px; pointer-events: auto; }
#sf[data-lage="krise"] .sf-leiste { background: var(--rot-dunkel); border-color: var(--rot); }
.sf-lage { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.sf-lampe { grid-row: 1 / span 2; width: 16px; height: 16px; background: var(--lage-farbe); justify-self: center; }
.sf-lampe[data-form="kreis"] { border-radius: 50%; }
.sf-lampe[data-form="raute"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 18px; height: 18px; }
.sf-lampe[data-form="dreieck"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 18px; height: 16px; }
.sf-lampe[data-form="quadrat"] { border-radius: 2px; }
.sf-lampe[data-form="ring"] { border-radius: 50%; background: transparent; border: 4px solid var(--lage-farbe); }
.sf-lage-wort { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lage-farbe); }
#sf.sf-tag .sf-lage-wort { color: var(--text); }
.sf-skala { display: flex; gap: 3px; margin-top: 3px; }
.sf-skala i { flex: 0 0 22px; height: 4px; background: var(--kante); }
.sf-skala i[data-an="1"] { background: var(--lage-farbe); }
#sf[data-lage="kontakt"] .sf-lampe { animation: sf-atmen 2.4s ease-in-out infinite; }
#sf[data-lage="gefecht"] .sf-lampe { animation: sf-schritt 0.5s steps(1, end) infinite; }
#sf[data-lage="krise"] .sf-lampe { animation: sf-schritt 0.5s steps(1, end) infinite; }
@keyframes sf-atmen { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes sf-schritt { 0% { opacity: 1; } 50% { opacity: 0.25; } }
.sf-uhr { flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--text); }
.sf-modus { flex: none; min-height: 44px; min-width: 92px; padding: 0 12px; border-radius: 4px; border: 2px solid var(--natrium); background: var(--flaeche2); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.08em; font-size: 17px; text-transform: uppercase; color: var(--text); }
.sf-modus::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rot); }
#sf .sf-modus[aria-pressed="true"], #sf .sf-modus[data-modus="manuell"] { border-color: var(--bernstein) !important; background: var(--bernstein) !important; color: #14100c !important; }
.sf-modus[data-modus="manuell"]::before { background: #14100c; border-radius: 0; }
.sf-menue-knopf { flex: none; width: 52px; height: 100%; border: 0; border-left: 1px solid var(--kante); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 0 0 4px 0; }
.sf-menue-knopf i { display: block; width: 22px; height: 3px; background: var(--text); }

/* ---------- Pult: Auftragstafel, Funk, Lagetisch ---------- */
.sf-pult { position: fixed; left: var(--z-rand); right: var(--z-rand); bottom: calc(var(--z-unten) + var(--z-rand) + var(--z-tisch) + var(--z-rand)); height: calc(var(--z-pult) - var(--z-tisch) - var(--z-rand)); display: grid; grid-template-rows: 40px 1fr; row-gap: 6px; pointer-events: none; }
#sf[data-lage="ausgang"] .sf-pult, #sf[data-lage="ausgang"] .sf-tisch { filter: brightness(0.82) saturate(0.7); }
.sf-zeile-platz { position: relative; pointer-events: none; }
.sf-zeile { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--flaeche); border: 1px solid var(--kante); border-radius: 4px; pointer-events: auto; overflow: hidden; }
.sf-zeile[data-ende="wirkung"] { border-color: #2f6b3a; }
.sf-zeile[data-ende="scheitern"] { border-color: var(--rot); }
.sf-zeile[data-ende="schicht"] { border-color: var(--bernstein); }
/* M1-Anschluss: drei Ausgänge plus Fehlerzustand (Kern: gewonnen, gehalten, verloren; offen nur als Fehler); verloren je nachdem, ob das Vereinshaus steht */
.sf-zeile[data-ende="schicht"][data-ausgang="gewonnen"], .sf-raum[data-ausgang="gewonnen"] { border-color: var(--gut); }
.sf-zeile[data-ende="schicht"][data-ausgang="gehalten"], .sf-raum[data-ausgang="gehalten"] { border-color: var(--bernstein); }
.sf-zeile[data-ende="schicht"][data-ausgang="verloren-steht"], .sf-raum[data-ausgang="verloren-steht"] { border-color: var(--natrium); }
.sf-zeile[data-ende="schicht"][data-ausgang="verloren-gefallen"], .sf-raum[data-ausgang="verloren-gefallen"] { border-color: var(--rot); }
.sf-zeile[data-ende="schicht"][data-ausgang="offen"], .sf-raum[data-ausgang="offen"] { border-color: var(--leise); border-style: dashed; }
.sf-zeile-schalter { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; background: transparent; text-align: left; }
.sf-label { flex: none; font-size: 14px; color: var(--natrium); }
#sf.sf-tag .sf-label { color: var(--tinte); }
.sf-wort { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sf-pips { flex: none; display: flex; gap: 3px; }
.sf-pips i, .sf-stufen li::before { width: 14px; height: 14px; border: 2px solid var(--kante); border-radius: 2px; display: block; }
.sf-pips i[data-zustand="aktiv"] { border-color: var(--bernstein); background: transparent; }
.sf-pips i[data-zustand="fertig"] { border-color: #4e9d5d; background: #4e9d5d; }
.sf-pips i[data-zustand="fehl"], .sf-pips i[data-zustand="widerspruch"] { border-color: var(--rot); background: var(--rot); }
.sf-pfeil { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--leise); }
.sf-zeile[data-offen="1"] .sf-pfeil { border-top: 0; border-bottom: 7px solid var(--leise); }
.sf-zeile-detail { padding: 0 8px 8px; }
.sf-zeile[data-offen="0"] .sf-zeile-detail { display: none; }
.sf-stufen { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; }
.sf-stufen li { font-size: 14px; padding: 4px 8px; border-radius: 3px; border: 1px solid var(--kante); color: var(--leise); background: var(--flaeche2); min-height: 28px; display: flex; align-items: center; gap: 6px; }
.sf-stufen li::before { content: ''; width: 10px; height: 10px; }
.sf-stufen li[data-zustand="aktiv"] { border-color: var(--bernstein); color: var(--text); }
.sf-stufen li[data-zustand="aktiv"]::after { content: ' …'; }
.sf-stufen li[data-zustand="fertig"] { border-color: #2f6b3a; color: var(--text); }
.sf-stufen li[data-zustand="fertig"]::before { background: #4e9d5d; border-color: #4e9d5d; }
.sf-stufen li[data-zustand="fehl"], .sf-stufen li[data-zustand="widerspruch"] { border-color: var(--rot); color: var(--text); }
.sf-stufen li[data-zustand="fehl"]::before, .sf-stufen li[data-zustand="widerspruch"]::before { background: var(--rot); border-color: var(--rot); }
.sf-auslegung { margin: 6px 0 0; font-size: 15px; color: var(--text); }

/* Funkpult: Pegel | Band | Sprechtaste */
.sf-funk-zeile { display: grid; grid-template-columns: 30px 1fr 92px; gap: 6px; min-height: 0; pointer-events: none; }
.sf-pegel { display: flex; flex-direction: column-reverse; gap: 3px; padding: 5px; background: var(--flaeche); border: 1px solid var(--kante); border-radius: 4px; pointer-events: none; }
.sf-pegel i { flex: 1 1 0; background: var(--kante); border-radius: 1px; }
.sf-pegel i[data-spitze="1"] { background: #fff !important; }
.sf-band { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--kante); border-radius: 4px; padding: 4px 8px 4px; pointer-events: auto; overflow: hidden; }
.sf-band-kopf { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.sf-absender { display: flex; gap: 6px; }
.sf-absender i { font-style: normal; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; color: var(--leise); border: 1px solid var(--kante); border-radius: 2px; padding: 0 5px; line-height: 17px; }
.sf-band[data-wer="general"] .sf-absender i[data-wer="general"] { background: var(--natrium); border-color: var(--natrium); color: var(--tinte); }
.sf-band[data-wer="du"] .sf-absender i[data-wer="du"] { background: #efe6d6; border-color: #efe6d6; color: var(--tinte); }
.sf-band[data-wer="feind"] .sf-absender i[data-wer="feind"], .sf-band[data-wer="alarm"] .sf-absender i[data-wer="feind"] { background: var(--rot); border-color: var(--rot); color: var(--tinte); }
.sf-band[data-wer="stab"] .sf-absender i[data-wer="general"] { border-color: var(--bernstein); color: var(--text); }
.sf-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--eigen); opacity: 0.45; flex: none; }
.sf-punkt[data-licht="denkt"] { background: var(--bernstein); opacity: 1; animation: sf-atmen 2.4s ease-in-out infinite; }
.sf-punkt[data-licht="spricht"] { background: var(--natrium); opacity: 1; animation: sf-schritt 0.5s steps(1, end) infinite; }
.sf-punkt[data-licht="widerspruch"] { background: var(--rot); opacity: 1; }
.sf-lichttext { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-chip { flex: none; font-size: 14px; color: var(--leise); border: 1px solid var(--kante); border-radius: 3px; padding: 0 6px; }
.sf-rausch { display: block; width: 100%; height: 14px; margin: 2px 0 2px; flex: none; }
.sf-band-zeilen { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.sf-bz { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.25; padding: 1px 0; }
.sf-bz-text { min-width: 0; overflow-wrap: anywhere; }
.sf-bz[data-alt="0"] { color: var(--text); animation: sf-band-ein 140ms ease-out 1; }
.sf-bz[data-alt="0"] .sf-bz-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-bz:not([data-alt="0"]) { color: var(--leise); }
.sf-bz:not([data-alt="0"]) .sf-bz-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes sf-band-ein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.sf-kennung { flex: none; min-width: 52px; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; line-height: 18px; border-radius: 2px; padding: 0 4px; text-transform: uppercase; }
.sf-bz[data-wer="general"] .sf-kennung { background: var(--natrium); color: var(--tinte); }
.sf-bz[data-wer="du"] .sf-kennung { background: #efe6d6; color: var(--tinte); border: 1px solid var(--kante); }
.sf-bz[data-wer="feind"] .sf-kennung { border: 1px dashed var(--rot); color: var(--rot); }
#sf.sf-tag .sf-bz[data-wer="feind"] .sf-kennung { color: #9c2418; }
.sf-bz[data-wer="alarm"] .sf-kennung, .sf-bz[data-wer="widerspruch"] .sf-kennung { background: var(--rot); color: var(--tinte); }
.sf-bz[data-wer="frage"] .sf-kennung { background: var(--bernstein); color: var(--tinte); }
.sf-bz[data-wer="feind"] .sf-bz-text { font-style: italic; }
.sf-sprechen { border: 0; border-radius: 6px; background: var(--natrium); color: var(--tinte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 3px #14100c; }
.sf-sprechen::before { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--tinte); box-shadow: 0 0 0 4px var(--natrium), 0 0 0 7px var(--tinte); }
#sf .sf-sprechen[aria-pressed="true"] { background: var(--text) !important; color: var(--tinte) !important; border-color: var(--text) !important; }
.sf-sprechen:disabled { opacity: 0.45; }

/* Lagetisch: eine Tafel je Abschnitt */
.sf-tisch { position: fixed; left: var(--z-rand); right: var(--z-rand); bottom: calc(var(--z-unten) + var(--z-rand)); height: var(--z-tisch); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; pointer-events: none; }
.sf-tafel { position: relative; display: flex; flex-direction: column; padding: 0; background: var(--flaeche); border: 1px solid var(--kante); border-radius: 4px; overflow: hidden; text-align: left; }
.sf-tafel-bild { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; flex: none; background: #0e1a24; }
.sf-tafel-fuss { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; padding: 0 6px; min-height: 20px; }
.sf-tafel-lampe { flex: none; width: 12px; height: 12px; background: var(--gut); border-radius: 50%; }
.sf-tafel[data-lage="kontakt"] .sf-tafel-lampe { background: var(--bernstein); border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sf-tafel[data-lage="gefecht"] .sf-tafel-lampe { background: var(--rot); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: sf-schritt 0.5s steps(1, end) infinite; }
.sf-tafel[data-lage="gefecht"] { border-color: var(--rot); }
.sf-tafel[data-lage="kontakt"] { border-color: #8a6a35; }
.sf-tafel-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--text); }
.sf-tafel[data-sendung="1"] { outline: 3px solid var(--text); outline-offset: -3px; }
.sf-tafel[data-vorschau="1"]:not([data-sendung="1"]) { outline: 2px dashed var(--text); outline-offset: -3px; }
.sf-marke-oben { position: absolute; top: 3px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; line-height: 16px; padding: 0 4px; border-radius: 2px; background: #efe6d6; color: var(--tinte); }
.sf-marke-oben[data-s="links"] { left: 3px; }
.sf-marke-oben[data-s="rechts"] { right: 3px; background: var(--natrium); }

/* Absenderlampen am Pult sind Schriftkürzel; Sprechtaste und Lagetisch sind die Handgriffe */

/* ---------- Aufsätze über dem unteren Pult: Entscheidung, Sprechpult ---------- */
.sf-frage, .sf-sprechpult { position: fixed; left: var(--z-rand); right: var(--z-rand); bottom: calc(var(--z-unten) + var(--z-rand) + var(--sf-tastatur)); z-index: 4; background: var(--flaeche); border: 2px solid var(--bernstein); border-radius: 6px; padding: 8px; pointer-events: auto; overflow-y: auto; }
.sf-sprechpult { border-color: var(--natrium); }
.sf-frage-text { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
.sf-frage-details summary { cursor: pointer; font-size: 14px; min-height: 28px; display: flex; align-items: center; }
.sf-frage-ort { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bernstein); font-size: 14px; line-height: 16px; }
#sf.sf-tag .sf-frage-ort { color: var(--tinte); }
.sf-frage-titel { margin: 0 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; }
.sf-frage-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sf-antwort { min-height: 56px; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--bernstein); background: var(--flaeche2); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 1px; }
.sf-antwort strong { font-size: 16px; line-height: 1.15; }
.sf-antwort span { font-size: 14px; line-height: 1.2; color: var(--leise); }
.sf-frage-balken { height: 5px; margin-top: 8px; background: var(--kante); border-radius: 3px; overflow: hidden; }
.sf-frage-balken span { display: block; height: 100%; background: var(--bernstein); transform-origin: left center; }
.sf-frage-standard { margin: 5px 0 0; font-size: 14px; line-height: 1.25; color: var(--leise); }
.sf-sp-kopf { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.sf-sp-kopf h2 { margin: 0; flex: 1 1 auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 20px; }
.sf-markeinfo { margin: 0 0 4px; color: var(--text); font-weight: 600; font-size: 14px; }
#sf:not(.sf-tag) .sf-markeinfo { color: var(--natrium); }
.sf-chips { display: flex; gap: 6px; margin: 4px 0 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.sf-chip-knopf { flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--kante); background: var(--flaeche2); font-size: 15px; white-space: nowrap; }
.sf-zeile-eingabe { display: flex; gap: 6px; }
.sf-eingabe { flex: 1; min-height: 50px; padding: 0 12px; border-radius: 4px; border: 2px solid var(--kante); background: var(--grund); font-size: 16px; min-width: 0; pointer-events: auto; color: var(--text); }
#sf.sf-tag .sf-eingabe { background: #fff; }
.sf-knopf { min-height: 48px; min-width: 48px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--kante); background: var(--flaeche2); font-weight: 600; }
.sf-senden { background: var(--natrium); border-color: var(--natrium); color: var(--tinte); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; }
.sf-knopf:focus-visible, .sf-chip-knopf:focus-visible, .sf-antwort:focus-visible, .sf-modus:focus-visible, .sf-seg-knopf:focus-visible, .sf-ereignis:focus-visible, .sf-tab:focus-visible, .sf-zu:focus-visible, .sf-rand:focus-visible, .sf-start-knopf:focus-visible, .sf-sprechen:focus-visible, .sf-tafel:focus-visible, .sf-menue-knopf:focus-visible, .sf-zeile-schalter:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }

/* ---------- Menü und Blätter (nur auf Wunsch) ---------- */
.sf-menue { position: fixed; right: var(--z-rand); top: calc(var(--z-oben) + var(--z-leiste) + 4px); z-index: 5; width: min(260px, calc(100vw - 12px)); display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--flaeche); border: 1px solid var(--kante); border-radius: 6px; pointer-events: auto; }
.sf-menue .sf-knopf { text-align: left; min-height: 52px; font-size: 17px; }
.sf-blatt { position: fixed; z-index: 5; left: var(--z-rand); right: var(--z-rand); top: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand)); bottom: calc(var(--z-unten) + var(--z-rand) + var(--sf-tastatur)); overflow: auto; background: var(--flaeche); border: 1px solid var(--kante); border-radius: 6px; pointer-events: auto; }
.sf-blatt-kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--kante); position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.sf-blatt-kopf h2 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 20px; }
.sf-zu { min-height: 48px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--kante); background: var(--flaeche2); }
.sf-blatt-inhalt { padding: 10px 12px 14px; }
.sf-hinweis { margin: 0 0 8px; color: var(--leise); font-size: 14px; }
.sf-klein { margin: 12px 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 15px; color: var(--bernstein); }
#sf.sf-tag .sf-klein { color: var(--tinte); }
.sf-log { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.sf-log-zeile { padding: 4px 0; border-bottom: 1px solid var(--kante); }
.sf-log-zeit { font-variant-numeric: tabular-nums; color: var(--leise); }
.sf-karte-canvas { width: 100%; max-width: 480px; height: auto; aspect-ratio: 1; display: block; border: 1px solid var(--kante); border-radius: 4px; background: #0E1A24; margin: 6px 0; pointer-events: auto; touch-action: manipulation; }
.sf-reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.sf-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.sf-seg-knopf { min-height: 48px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--kante); background: var(--flaeche2); font-size: 15px; }
#sf .sf-seg-knopf[aria-pressed="true"] { border-color: var(--bernstein) !important; background: var(--bernstein) !important; color: #14100c !important; font-weight: 600; }
.sf-liste { margin: 0; padding-left: 18px; font-size: 14px; color: var(--leise); }

/* Stabsraum (Ausgang): Kartentisch über Fenster und Pult */
.sf-raum { position: fixed; z-index: 5; left: var(--z-rand); right: var(--z-rand); top: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand)); bottom: calc(var(--z-unten) + var(--z-rand)); overflow: auto; background: var(--flaeche); border: 2px solid var(--bernstein); border-radius: 6px; pointer-events: auto; }
.sf-raum[data-klein="1"] { bottom: auto; }
.sf-raum[data-klein="1"] .sf-raum-inhalt { display: none; }
.sf-raum-inhalt { padding: 10px 12px 16px; }
.sf-raum-titel { margin: 0 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; }
.sf-fakten { margin-bottom: 4px; }
.sf-raum-ausgang { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border: 2px solid var(--bernstein); border-radius: 3px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bernstein); }
.sf-raum-ausgang[data-ausgang="gewonnen"] { border-color: var(--gut); color: var(--gut); }
.sf-raum-ausgang[data-ausgang="verloren-steht"] { border-color: var(--natrium); color: var(--natrium); }
.sf-raum-ausgang[data-ausgang="verloren-gefallen"] { border-color: var(--rot); color: var(--rot); }
.sf-raum-ausgang[data-ausgang="offen"] { border-color: var(--leise); border-style: dashed; color: var(--leise); }
.sf-regler { flex: 1; min-width: 120px; min-height: 48px; }
.sf-replay-zeit { font-variant-numeric: tabular-nums; color: var(--leise); min-width: 52px; }
.sf-ereignisse { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; border: 1px solid var(--kante); border-radius: 4px; }
.sf-ereignis { display: block; width: 100%; text-align: left; min-height: 48px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--kante); background: transparent; font-size: 14px; }
.sf-antworten { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sf-antwort-blase { border-left: 3px solid var(--natrium); background: var(--flaeche2); padding: 8px 10px; border-radius: 4px; }
.sf-antwort-text { margin: 0; font-size: 15px; }
.sf-beleg { margin: 4px 0 0; font-size: 14px; color: var(--leise); }
.sf-merk { margin-top: 10px; padding: 10px; border: 1px solid var(--bernstein); border-radius: 6px; background: var(--flaeche2); }
.sf-merk-text { margin: 0 0 8px; font-weight: 600; }
.sf-merk .sf-reihe { display: grid; grid-template-columns: 1fr 1fr; }
.sf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sf-tab { min-height: 48px; padding: 0 12px; border-radius: 4px 4px 0 0; border: 1px solid var(--kante); background: var(--flaeche); font-size: 14px; }
.sf-tab[aria-selected="true"] { border-color: var(--bernstein); background: var(--flaeche2); }
.sf-tab.sf-blitz { outline: 3px solid var(--gut); }
.sf-datei-text { width: 100%; min-height: 150px; background: var(--grund); border: 1px solid var(--kante); border-radius: 4px; padding: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--text); pointer-events: auto; }

/* ---------- Welt: Kommandolicht, Meldungen am Ort, Marke, Randpfeile (nur im Fenster) ---------- */
.sf-welt { position: fixed; inset: 0; pointer-events: none; overflow: hidden; clip-path: inset(var(--w-t) var(--w-r) var(--w-b) var(--w-l)); }
.sf-hq, .sf-licht, .sf-marke { position: absolute; left: 0; top: 0; will-change: transform; }
.sf-hq-ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--eigen); opacity: 0.55; }
.sf-hq-kern { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--eigen); }
.sf-hq[data-licht="denkt"] .sf-hq-ring { border-color: var(--bernstein); animation: sf-atmen 2.4s ease-in-out infinite; }
.sf-hq[data-licht="denkt"] .sf-hq-kern { background: var(--bernstein); }
.sf-hq[data-licht="spricht"] .sf-hq-ring { border-color: var(--natrium); animation: sf-schritt 0.5s steps(1, end) infinite; opacity: 1; }
.sf-hq[data-licht="spricht"] .sf-hq-kern { background: var(--natrium); }
.sf-hq[data-licht="widerspruch"] .sf-hq-ring { border-color: var(--rot); opacity: 1; border-width: 5px; }
.sf-hq[data-licht="widerspruch"] .sf-hq-kern { background: var(--rot); }
.sf-hq.sf-schlag .sf-hq-ring { animation: sf-schlag 380ms linear 1; }
@keyframes sf-schlag { 0% { transform: scale(0.8); opacity: 1; } 40% { transform: scale(1.7); opacity: 1; } 100% { transform: scale(1.7); opacity: 0.6; } }
/* Nachauftrag 1 (Punkt 4): ruhiger Lichtkegel auf dem Ort der offenen Entscheidung; keine Dauerbewegung, nur ein langsames Einblenden beim Öffnen */
.sf-kegel { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; animation: sf-kegel-ein 1100ms ease-out 1 both; }
.sf-kegel-licht { position: absolute; left: -62px; top: -170px; width: 124px; height: 170px; clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(232, 162, 74, 0) 0%, rgba(232, 162, 74, 0.30) 100%); }
.sf-kegel-boden { position: absolute; left: -62px; top: -22px; width: 124px; height: 44px; border-radius: 50%; background: rgba(232, 162, 74, 0.26); box-shadow: 0 0 0 2px rgba(232, 162, 74, 0.35); }
@keyframes sf-kegel-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-kegel { animation: none; } }
.sf-licht-punkt { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--eigen); box-shadow: 0 0 0 4px rgba(53, 214, 240, 0.25); }
/* M1 gesamt: Funkblasen stehen am Rand des Weltfensters (funkplatz.js), nicht am Ort; der Punkt am Ort entfällt, der Ortsname steht fett in der Blase. */
.sf-licht-punkt { display: none; }
.sf-licht-text { position: absolute; left: 14px; top: -14px; width: max-content; max-width: min(300px, 62vw); background: var(--schild); border: 1px solid #2c384a; border-left: 3px solid var(--eigen); padding: 5px 9px; border-radius: 3px; font-size: 14px; color: #efe6d6; display: block; }
/* M1-Anschluss: der Zeilenschnitt sitzt im inneren Text-Span; im äußeren Kasten mit Innenabstand schaute die dritte Zeile als Streifen heraus */
.sf-licht-in { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sf-unten .sf-licht-text { top: auto; bottom: 14px; }
.sf-licht-text b { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #ffd9a0; }
.sf-licht[data-art="gefahr"] .sf-licht-punkt { background: var(--rot); box-shadow: 0 0 0 4px rgba(255, 90, 74, 0.28); }
.sf-licht[data-art="gefahr"] .sf-licht-text, .sf-licht[data-art="widerspruch"] .sf-licht-text { border-left-color: var(--rot); }
.sf-licht[data-art="frage"] .sf-licht-punkt, .sf-licht[data-art="widerspruch"] .sf-licht-punkt { background: var(--bernstein); box-shadow: 0 0 0 4px rgba(232, 162, 74, 0.3); }
.sf-licht[data-art="frage"] .sf-licht-text { border-left-color: var(--bernstein); }
.sf-licht[data-art="fortschritt"] .sf-licht-punkt { background: var(--gut); box-shadow: 0 0 0 4px rgba(143, 209, 158, 0.25); }
.sf-licht[data-art="fortschritt"] .sf-licht-text { border-left-color: var(--gut); }
.sf-marke-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--natrium); }
.sf-marke-text { position: absolute; left: 20px; top: -10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--natrium); background: var(--schild); padding: 1px 6px; border-radius: 3px; font-size: 14px; }
.sf-rand { position: fixed; left: 0; top: 0; z-index: 2; margin: -22px 0 0 -22px; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; border-radius: 22px; border: 2px solid var(--rot); background: var(--schild); color: #efe6d6; max-width: 190px; will-change: transform; }
.sf-rand[data-art="angebot"] { border-color: var(--bernstein); }
.sf-rand-pfeil { width: 0; height: 0; border-left: 14px solid var(--rot); border-top: 8px solid transparent; border-bottom: 8px solid transparent; flex: none; }
.sf-rand[data-art="angebot"] .sf-rand-pfeil { border-left-color: var(--bernstein); }
.sf-rand-text { font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Markiert nur einen aktuell teamsichtbaren Gegner, in Bildschirmgröße. */
.sf-kontakt { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px; border: 3px solid #fff36b; border-radius: 50%; box-shadow: 0 0 0 2px #171000, 0 0 12px #fff36b; box-sizing: border-box; }
.sf-kontakt span { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); color: #fff36b; background: #171000; font: bold 12px sans-serif; padding: 2px 4px; }

/* Ort bleibt frei, weil die Entscheidung unter dem Fenster steht; Halten-Menü an Welt oder Tafel. */
.sf-kernkarte { position: fixed; z-index: 9999; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: #131a24; color: #efe6d6; border: 2px solid #ff6c29; border-radius: 6px; }
.sf-kernkarte strong { flex-basis: 100%; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-kernkarte p { flex-basis: 100%; margin: 0; font-size: 14px; color: #a9b3bf; }
.sf-kernkarte button { flex: 1 1 150px; min-height: 48px; color: #efe6d6; background: #1b2431; border: 1px solid #a9b3bf; border-radius: 4px; font-size: 16px; }

/* Die Finte bewegt sich ohne Bodenschatten. */
.sf-fintenbild { position: absolute; left: 0; top: 0; color: #d7d0bf; font-size: 26px; pointer-events: none; white-space: nowrap; text-shadow: none; }
.sf-fintenbild::first-letter { animation: sf-fintenbewegung 1s ease-in-out infinite alternate; }
@keyframes sf-fintenbewegung { to { letter-spacing: 8px; } }

/* ---------- Start ---------- */
.sf-start { position: fixed; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(5, 9, 13, 0.92); pointer-events: auto; overflow: auto; }
.sf-start-karte { width: min(640px, 100%); max-height: calc(100dvh - 24px); overflow: auto; background: #131a24; color: #efe6d6; border: 1px solid #2c384a; border-top: 4px solid #ff6c29; border-radius: 6px; padding: 18px; }
.sf-start-marke { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sf-start-etikett { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.14em; color: #ff6c29; }
.sf-start h1 { margin: 2px 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.02; text-transform: uppercase; }
.sf-start p { margin: 0 0 10px; }
.sf-start-ehrlich { border-left: 3px solid #e8a24a; padding-left: 10px; color: #ffd9a0; font-size: 15px; }
.sf-start-wahl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin: 8px 0; }
.sf-start-wahl > span { font-size: 14px; color: #a9b3bf; }
.sf-start .sf-seg-knopf { color: #efe6d6; background: #1b2431; border-color: #2c384a; }
#sf .sf-start .sf-seg-knopf[aria-pressed="true"] { color: #14100c !important; background: #e8a24a !important; border-color: #e8a24a !important; }
.sf-start-knopf { width: 100%; min-height: 64px; margin-top: 8px; border-radius: 4px; border: 0; background: #ff6c29; color: #14100c; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: auto; position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 0 -2px #131a24; }
.sf-start-knopf:disabled { opacity: 0.6; }
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reduzierte Bewegung: keine Animation, Zustand bleibt als Farbe, Form und Text lesbar (Krise: dicker Rahmen steht ruhig) */
#sf.sf-reduziert *, #sf.sf-reduziert *::before, #sf.sf-reduziert *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { #sf *, #sf *::before, #sf *::after { animation: none !important; transition: none !important; } }

/* ---------- Querformat: Funk links, Fenster Mitte, Lagetisch rechts ---------- */
@media (min-aspect-ratio: 1/1) and (max-height: 640px) {
  body.sf-aktiv {
    --z-sl: clamp(190px, 28vw, 300px); --z-sr: clamp(98px, 15.5vw, 200px); --z-leiste: 44px;
    --w-l: calc(var(--z-sl) + 2 * var(--z-rand)); --w-r: calc(var(--z-sr) + 2 * var(--z-rand));
    --w-t: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand)); --w-b: calc(var(--z-unten) + var(--z-rand));
  }
  .sf-leiste { height: var(--z-leiste); }
  .sf-lage-wort { font-size: 21px; }
  .sf-uhr { font-size: 21px; }
  .sf-modus { min-height: 40px; min-width: 88px; }
  .sf-pult { left: var(--z-rand); right: auto; width: var(--z-sl); top: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand)); bottom: calc(var(--z-unten) + var(--z-rand)); height: auto; grid-template-rows: 40px 1fr; }
  .sf-funk-zeile { grid-template-columns: 26px 1fr; grid-template-rows: 1fr 56px; }
  .sf-funk-zeile .sf-pegel { grid-row: 1; }
  .sf-funk-zeile .sf-band { grid-row: 1; }
  .sf-sprechen { grid-column: 1 / -1; grid-row: 2; flex-direction: row; font-size: 20px; gap: 12px; }
  .sf-sprechen::before { width: 24px; height: 24px; box-shadow: 0 0 0 3px var(--natrium), 0 0 0 5px var(--tinte); }
  .sf-tisch { left: auto; right: var(--z-rand); width: var(--z-sr); top: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand)); bottom: calc(var(--z-unten) + var(--z-rand)); height: auto; grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
  .sf-tafel-fuss { min-height: 18px; }
  .sf-tafel-name { font-size: 16px; }
  .sf-band-kopf { flex-wrap: wrap; row-gap: 2px; }
  .sf-band-kopf .sf-lichttext { flex: 1 1 100%; order: 3; }
  .sf-frage, .sf-sprechpult { left: var(--z-rand); right: auto; width: var(--z-sl); top: calc(var(--z-oben) + var(--z-leiste) + var(--z-rand) + 46px); bottom: calc(var(--z-unten) + var(--z-rand) + var(--sf-tastatur)); }
  .sf-blatt { left: auto; width: min(440px, calc(100vw - 2 * var(--z-rand))); }
  .sf-raum { left: auto; width: min(440px, 62vw); }
  .sf-menue { width: 240px; }
  .sf-schild-ort { font-size: 19px; }
  .sf-frage-knoepfe { grid-template-columns: 1fr; }
  .sf-antwort { min-height: 48px; }
  .sf-start-karte { padding: 12px; }
  .sf-start h1 { font-size: 26px; }
  .sf-start-ehrlich { font-size: 14px; }
}

/* ---------- Handy hochkant, schmal (S7 360 bis 411 px) ---------- */
@media (max-width: 560px) and (orientation: portrait) {
  .sf-wort { font-size: 15px; }
  .sf-chip { display: none; }
  .sf-lage-wort { font-size: 22px; }
  .sf-uhr { font-size: 22px; }
  .sf-modus { min-width: 86px; padding: 0 8px; font-size: 16px; }
  .sf-band-kopf .sf-absender i { padding: 0 4px; }
  .sf-start h1 { font-size: 30px; }
  .sf-start-karte { padding: 14px 14px 0; }
  .sf-blatt, .sf-raum { left: var(--z-rand); right: var(--z-rand); }
}
@media (max-height: 720px) {
  .sf-start-karte { padding: 12px 12px 0; }
  .sf-start h1 { font-size: 24px; margin: 0 0 6px; }
  .sf-start p { margin-bottom: 6px; }
  .sf-start-ehrlich { font-size: 14px; }
  .sf-start-knopf { min-height: 52px; margin-top: 6px; }
}

/* Entscheidung: bleibt unter dem Fenster, die Auftragstafel darüber bleibt sichtbar. */
.sf-frage {
  box-sizing: border-box;
  max-height: min(204px, calc(var(--z-pult) - 30px));   /* M1 Regie: 185 px ließ 1 px Überstand und damit einen Rollbalken; Inhalt (Ort, Frage, zwei Optionen, Fristbalken, Einzelheiten, „Ohne dein Wort …“) ist rund 183 px hoch */
  overflow-y: auto;
}
@media (min-aspect-ratio: 1/1) and (max-height: 640px) {
  .sf-frage { max-height: none; }
}
.sf-sprechpult { max-height: min(240px, calc(100dvh - var(--z-leiste) - 40px)); }
/* Geöffnete Auftragstafel wächst nach oben über das Fenster, höchstens bis zur halben Bildhöhe. */
.sf-zeile[data-offen="1"] {
  box-sizing: border-box;
  height: auto;
  max-height: 50dvh;
  overflow-y: auto;
}

/* Nachtrag 10.11.: Entscheidungstitel nicht gequetscht (Client setzt für h2 negative Laufweite); Welt etwas aufgehellt, damit die Front im Regen lesbar bleibt */
#sf .sf-frage-titel { letter-spacing: 0.01em !important; }
/* M1-Welt: die pauschale Aufhellung (brightness 1.28) ist entfallen; das Licht kommt jetzt aus der Szene (bild-vision.js: Himmel, Sonne, Grundsicht). */

/* ---------- M1 Regie: Markierung am Ort statt Randpfeil, Entscheidungsfenster ohne Rollbalken, Aufblenden ---------- */
/* Liegt das Ziel eines Randpfeils im Bild, entfällt der Pfeil; in der Entscheidung steht dafür eine kleine Markierung am Ort (nie über dem Kegel). */
.sf-ortsmarke { position: absolute; left: 0; top: 0; will-change: transform; }
.sf-ortsmarke-punkt { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bernstein); background: #14100c; }
.sf-ortsmarke-text { position: absolute; left: 0; bottom: 9px; transform: translateX(-50%); width: max-content; max-width: 150px; padding: 1px 8px 2px; border-radius: 3px; background: var(--schild); border: 1px solid #2c384a; border-bottom: 2px solid var(--bernstein); font-size: 14px; line-height: 1.25; color: #efe6d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Das Entscheidungsfenster blendet in 650 ms auf (kein Bounce) und ist sofort bedienbar; die Kamera fährt vorher auf das Entscheidungsbild (regie.js: Feder tau 300 ms, zwei Fensterbreiten je Sekunde, Schnitt ab 700 px). */
.sf-frage { animation: sf-frage-ein 650ms ease-out 1 both; }
@keyframes sf-frage-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }