/* Feindfahrt – Oberfläche im Stil einer Bootszentrale um 1942.
   Bakelit und Messing für Instrumente, schwarze Zifferblätter mit Leuchtfarbe, vergilbtes Papier nur für
   Papier (Befehle, Fernschreiben, Lagekarte). Schriften: Fraktur nur im Titel, Schreibmaschine fürs Papier,
   DIN-nahe Schmalschrift für Gravuren und Skalen. */
:root {
  --bakelit: #1b1611; --bakelit-hell: #2a221a; --stahl: #3b3d36;
  --messing: #b08a3e; --messing-hell: #dcc07a; --messing-dunkel: #5f4a22;
  --blatt: #13110e; --leucht: #cfd9a6; --leucht-matt: #8e977a;
  --papier: #d6c9a5; --papier-dunkel: #b9a87f; --tinte: #2a2620; --bleistift: #5d574b;
  --rot: #a3271f; --rot-hell: #d2493c; --gruen: #a9c98c; --bernstein: #e0a84a;
  --gravur: "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --maschine: "Special Elite", "Courier New", monospace;
  --fraktur: "UnifrakturMaguntia", "Old English Text MT", serif;
}

/* ---------------------------------------------------------------- Bauteile */
.messingrand { background: linear-gradient(145deg, var(--messing-hell), var(--messing) 38%, var(--messing-dunkel) 100%); }
.papier {
  background-color: var(--papier);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 250, 230, .35), transparent 60%),
    radial-gradient(ellipse at 90% 90%, rgba(120, 90, 40, .22), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--tinte); font-family: var(--maschine);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px rgba(0, 0, 0, .55);
}
:focus-visible { outline: 2px dashed var(--messing-hell); outline-offset: 3px; }

/* ---------------------------------------------------------------- HUD-Rahmen */
.hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; font-family: var(--gravur); color: var(--leucht); }
.hud[hidden] { display: none; }
.hud * { pointer-events: none; }
.hud .greifbar, .hud .greifbar * { pointer-events: auto; }

/* Konsole unten */
.konsole { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 12px 9px; border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, var(--bakelit-hell), var(--bakelit) 60%, #120e0a);
  border: 1px solid #000; box-shadow: 0 0 0 2px var(--messing-dunkel), 0 0 0 3px #000, 0 14px 30px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 220, 160, .12) inset;
  transition: transform .35s ease, opacity .35s ease; }
.hud.eingeklappt .konsole { transform: translate(-50%, calc(100% - 22px)); }
.konsole .instrument { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.konsole .instrument svg { display: block; overflow: visible; }
.konsole .schildchen { font: 500 11px/1 var(--gravur); color: var(--messing-hell); letter-spacing: .04em; padding: 2px 6px; border-radius: 2px;
  background: linear-gradient(180deg, #2c241a, #1a140e); border: 1px solid var(--messing-dunkel); white-space: nowrap; }
.konsole .lasche { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--bakelit-hell), var(--bakelit)); border: 1px solid #000; border-bottom: 0;
  box-shadow: 0 0 0 2px var(--messing-dunkel); color: var(--messing-hell); font: 600 11px/18px var(--gravur); text-align: center; cursor: pointer; }
.konsole .trennsteg { width: 2px; align-self: stretch; margin: 6px 2px; background: linear-gradient(180deg, transparent, var(--messing-dunkel), transparent); }

/* Zifferblätter (SVG) */
.blatt-rand { fill: url(#hud-messing); stroke: #000; stroke-width: .6; }
.blatt { fill: var(--blatt); }
.blatt-glas { fill: url(#hud-glas); pointer-events: none; }
.skala { stroke: var(--leucht); stroke-width: 1; }
.skala.fein { stroke-width: .6; opacity: .7; }
.ziffer { fill: var(--leucht); font: 600 9px var(--gravur); text-anchor: middle; dominant-baseline: central; }
.ziffer.klein { font-size: 7px; font-weight: 500; }
.einheit { fill: var(--leucht-matt); font: 500 7.5px var(--gravur); text-anchor: middle; }
.zeiger { fill: var(--leucht); stroke: #0a0806; stroke-width: .5; transition: transform .45s cubic-bezier(.3, 1.4, .6, 1); transform-box: view-box; }
.zeiger.soll { fill: var(--bernstein); opacity: .85; }
.nabe { fill: url(#hud-messing); stroke: #000; stroke-width: .5; }
.sektor-rot { fill: none; stroke: var(--rot-hell); stroke-width: 4; opacity: .85; }
.sektor-gruen { fill: none; stroke: #6f9a5a; stroke-width: 4; opacity: .7; }
.marke-sehrohr { fill: var(--bernstein); }
.anzeige { fill: var(--leucht); font: 700 12px var(--gravur); text-anchor: middle; dominant-baseline: central; letter-spacing: .03em; }
.anzeige.warn { fill: var(--rot-hell); }
.fenster { fill: #0b0907; stroke: var(--messing-dunkel); stroke-width: .8; }

/* Telegraf */
.telegraf-feld { stroke: #0a0806; stroke-width: .6; }
.telegraf-text { fill: var(--leucht); font: 600 5.8px var(--gravur); text-anchor: middle; dominant-baseline: central; }
.telegraf-text.an { fill: #120e0a; }
.telegraf-griff { transition: transform .5s cubic-bezier(.3, 1.3, .6, 1); transform-box: view-box; }

/* Kompassrose dreht */
.rose { transition: transform .3s linear; transform-box: view-box; }
.rose-text { fill: var(--leucht); font: 700 9px var(--gravur); text-anchor: middle; dominant-baseline: central; }
.rose-text.nord { fill: var(--rot-hell); }
.steuerstrich { fill: var(--bernstein); }
.ruder-zeiger { fill: var(--bernstein); transition: transform .3s ease; transform-box: view-box; }

/* Senkrechte Röhren (Akku, Echolot) */
.roehre-glas { fill: #0b0907; stroke: var(--messing-dunkel); stroke-width: .8; }
.roehre-fuellung { transition: height .5s ease, y .5s ease; }

/* Rohrtafel */
.rohrtafel { display: grid; grid-template-columns: repeat(4, 34px); gap: 5px 6px; padding: 6px 8px 5px; border-radius: 6px;
  background: linear-gradient(180deg, #24201a, #17130f); border: 1px solid var(--messing-dunkel); }
.rohr { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rohr .lampe { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--messing); box-shadow: 0 0 0 1px #000, inset 0 2px 4px rgba(0, 0, 0, .8);
  background: radial-gradient(circle at 40% 35%, #3a342b, #14110d 70%); transition: background .3s, box-shadow .3s; }
.rohr[data-zustand="klar"] .lampe { background: radial-gradient(circle at 40% 35%, #f4ffd8, #b9d77e 45%, #4f6b2c 100%); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(190, 230, 120, .55); }
.rohr[data-zustand="laden"] .lampe { background: radial-gradient(circle at 40% 35%, #ffe9b8, #e0a84a 45%, #6b4410 100%); animation: hud-blinken 1.6s steps(2, jump-none) infinite; }
.rohr[data-zustand="defekt"] .lampe { background: radial-gradient(circle at 40% 35%, #ffc0b0, #d2493c 45%, #5a1410 100%); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(210, 73, 60, .6); }
.rohr span { font: 600 10px var(--gravur); color: var(--messing-hell); }
.rohrtafel .vorrat { grid-column: 1 / -1; text-align: center; font: 500 11px var(--gravur); color: var(--leucht); white-space: nowrap; }
@keyframes hud-blinken { 50% { filter: brightness(.45); } }

/* Zustandszeile unter der Konsole */
.konsole-fuss { position: absolute; left: 14px; right: 14px; top: -17px; display: flex; justify-content: space-between; gap: 90px;
  font: 500 11.5px var(--gravur); color: var(--leucht-matt); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.konsole-fuss .warn { color: var(--rot-hell); font-weight: 700; }
.hud.eingeklappt .konsole-fuss { display: none; }

/* Oberkante der Konsole (für Sehrohrtext und, in schmalen Fenstern, den Fernschreiber) */
#ansichten { --konsole-oben: 212px; }
#ansichten:has(> .hud.eingeklappt), #ansichten:has(> .hud[hidden]) { --konsole-oben: 30px; }

/* ---------------------------------------------------------------- Fernschreiber (Meldungen) */
#meldung.fernschreiben { position: absolute; z-index: 7; left: 50%; top: 14px; transform: translateX(-50%); max-width: min(620px, calc(100% - 420px));
  min-width: 220px; margin: 0; padding: 8px 16px 9px; font: 15px/1.35 var(--maschine); letter-spacing: .01em; text-align: center; pointer-events: none;
  clip-path: polygon(0 4%, 3% 0, 7% 5%, 12% 1%, 18% 4%, 24% 0, 31% 4%, 38% 1%, 45% 5%, 52% 0, 60% 4%, 67% 1%, 74% 5%, 81% 0, 88% 4%, 94% 1%, 100% 4%,
    100% 96%, 96% 100%, 90% 96%, 83% 100%, 76% 95%, 69% 100%, 61% 96%, 54% 100%, 47% 95%, 40% 100%, 33% 96%, 26% 100%, 19% 95%, 12% 100%, 6% 96%, 0 100%); }
#meldung.fernschreiben[hidden] { display: none; }
#meldung.fernschreiben.neu { animation: hud-tippen .45s steps(6, end); }
@keyframes hud-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.fernschreib-verlauf { position: absolute; z-index: 6; left: 50%; top: 52px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 12px var(--maschine); color: rgba(232, 222, 192, .86); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); pointer-events: none; }
.fernschreib-verlauf p { margin: 0; padding: 1px 8px; white-space: nowrap; background: rgba(14, 11, 8, .5); border-radius: 2px; }
.fernschreib-verlauf p + p { opacity: .8; }

/* ---------------------------------------------------------------- Lagekarte (links oben) */
.lagekarte { position: absolute; left: 14px; top: 14px; width: 252px; max-height: calc(100% - 210px); overflow: hidden; padding: 10px 12px 11px;
  transform: rotate(-.6deg); font-size: 12.5px; line-height: 1.35; transition: opacity .3s, transform .35s; }
.lagekarte::before { content: ""; position: absolute; left: 50%; top: -7px; width: 54px; height: 14px; transform: translateX(-50%);
  background: linear-gradient(180deg, #8f8b80, #55524a); border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.hud.eingeklappt .lagekarte { opacity: 0; transform: translateX(-30px) rotate(-.6deg); }
.lagekarte h3 { margin: 4px 0 3px; font: 600 13px var(--gravur); letter-spacing: .05em; color: var(--bleistift); border-bottom: 1px solid rgba(42, 38, 32, .35); }
.lagekarte h3:first-of-type { margin-top: 0; }
.lagekarte ul { margin: 0; padding: 0; list-style: none; }
.lagekarte li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.lagekarte li em { font-style: normal; color: var(--rot); }
.lagekarte .leer { color: var(--bleistift); font-size: 11.5px; }
.lagekarte .ziel-erfuellt { text-decoration: line-through; text-decoration-color: var(--rot); color: var(--bleistift); }
.lagekarte .balken { height: 4px; margin: 2px 0 4px; background: rgba(42, 38, 32, .18); }
.lagekarte .balken i { display: block; height: 100%; background: var(--tinte); }
.lagekarte .uhr { float: right; font: 600 12px var(--gravur); color: var(--tinte); }
.lagekarte .gewaehlt { white-space: pre-line; margin-top: 2px; padding: 4px 6px; border: 1.5px solid var(--rot); color: var(--tinte); transform: rotate(.4deg); }

/* ---------------------------------------------------------------- Zielmarke (Messingwinkel) */
.zielmarke { position: absolute; z-index: 4; pointer-events: none; }
.zielmarke[hidden], .zielpfeil[hidden] { display: none; }
.zielmarke .ecke { position: absolute; width: 12px; height: 12px; border: 2.5px solid var(--messing-hell); filter: drop-shadow(0 0 1.5px #000); }
.zielmarke .lo { left: 0; top: 0; border-right: 0; border-bottom: 0; } .zielmarke .ro { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.zielmarke .lu { left: 0; bottom: 0; border-right: 0; border-top: 0; } .zielmarke .ru { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.zielmarke .zieltext { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -7px); white-space: nowrap; padding: 2px 7px;
  font: 12px var(--maschine); color: var(--tinte); background: var(--papier); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.zielmarke.unten .zieltext { bottom: auto; top: 100%; transform: translate(-50%, 7px); }
.zielpfeil { position: absolute; z-index: 4; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-left: 16px solid var(--messing-hell); pointer-events: none; filter: drop-shadow(0 0 2px #000); }

/* ---------------------------------------------------------------- Sehrohr (Zeiss-Optik) */
.sehrohr { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent 0 88%, rgba(0, 0, 0, .55) 92%, #000 96%); }
.sehrohr::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(150, 190, 140, .06), rgba(30, 50, 40, .12) 80%, transparent 88%); mix-blend-mode: multiply; }
.sehrohr[hidden] { display: none; }
.sehrohr .okular { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0 86%, transparent 89%); mask-image: radial-gradient(circle closest-side, #000 0 86%, transparent 89%); }
.sehrohr .faden-h { position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: rgba(6, 8, 6, .85); }
.sehrohr .faden-v { position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: rgba(6, 8, 6, .85); }
.sehrohr .faden-v::before, .sehrohr .faden-v::after { content: ""; position: absolute; left: -1px; width: 3px; height: 30%; background: rgba(6, 8, 6, .85); }
.sehrohr .faden-v::before { top: 0; } .sehrohr .faden-v::after { bottom: 0; }
.sehrohr .strich { position: absolute; top: calc(50% - 4px); width: 1px; height: 8px; background: rgba(6, 8, 6, .85); }
.sehrohr .strich.gross { top: calc(50% - 10px); height: 20px; width: 1.5px; }
.sehrohr .strich.gross::after { content: attr(data-grad); position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font: 600 10px var(--gravur); color: rgba(6, 8, 6, .85); }
.sehrohr .marke { position: absolute; top: calc(50% - 44px); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 11px solid var(--rot-hell); transform: translateX(-7px); filter: drop-shadow(0 0 1px #000); }
.sehrohr .vorhalt { position: absolute; top: 36%; bottom: 36%; width: 2px; background: var(--rot-hell); transform: translateX(-1px); box-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.sehrohr .marke[hidden], .sehrohr .vorhalt[hidden] { display: none; }
.sehrohr .sr-text { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--konsole-oben) + 8px); transform: translateX(-50%); margin: 0; padding: 4px 12px;
  font: 600 14px var(--gravur); letter-spacing: .03em; color: var(--leucht); background: rgba(10, 8, 6, .82); border: 1px solid var(--messing-dunkel);
  border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Tastenhilfe */
.tastenhilfe { position: absolute; z-index: 8; right: 14px; bottom: 186px; width: 300px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; transform: rotate(.8deg); }
.tastenhilfe[hidden] { display: none; }
.tastenhilfe h3 { margin: 0 0 6px; font: 600 14px var(--gravur); letter-spacing: .05em; color: var(--bleistift); }
.tastenhilfe dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0; }
.tastenhilfe dt { font-weight: 700; white-space: nowrap; }
.tastenhilfe dd { margin: 0; }

/* ---------------------------------------------------------------- Bildschirme (Start, Auswahl, Pause, Ergebnis) */
.schirm { position: fixed; inset: 0; z-index: 30; display: grid; overflow: auto; color: var(--papier); }
.schirm[hidden] { display: none; }
.schirm::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, .78) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E"); }
.schirm.dunkel { background: rgba(8, 7, 5, .62); }

/* Startbildschirm: Wochenschau-Titelkarte über der laufenden Szene */
.start { align-items: center; padding: 6vh 7vw; background: linear-gradient(90deg, rgba(6, 5, 3, .78), rgba(6, 5, 3, .25) 55%, rgba(6, 5, 3, 0)); }
.start .titelblock { position: relative; max-width: 560px; }
.start h1 { margin: 0; font: 400 clamp(64px, 11vw, 148px)/.86 var(--fraktur); color: #ece2c4; text-shadow: 0 3px 0 rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .6); }
.start h1.einstempeln { animation: start-stempel .9s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes start-stempel { from { transform: scale(1.35); opacity: 0; filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } to { transform: scale(1); } }
.start .untertitel { margin: 14px 0 34px; font: 17px/1.5 var(--maschine); color: #cdbf98; max-width: 30em; }
.befehlszettel { width: min(380px, 100%); padding: 18px 22px 16px; transform: rotate(-1.2deg); }
.befehlszettel h2 { margin: 0 0 10px; font: 600 15px var(--gravur); letter-spacing: .08em; color: var(--bleistift); border-bottom: 1.5px solid rgba(42, 38, 32, .45); padding-bottom: 4px; }
.menue { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.menue button, .menue a { display: block; width: 100%; padding: 7px 4px 6px 26px; position: relative; text-align: left; text-decoration: none;
  font: 19px/1.25 var(--maschine); color: var(--tinte); background: none; border: 0; cursor: pointer; }
.menue button::before, .menue a::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(-6deg);
  border: 1.5px solid var(--tinte); border-radius: 2px; }
.menue button:hover::after, .menue button:focus-visible::after, .menue a:hover::after, .menue a:focus-visible::after {
  content: "✕"; position: absolute; left: 5px; top: 50%; transform: translateY(-52%); font: 700 15px var(--maschine); color: var(--rot); }
.menue button:hover, .menue a:hover { color: #000; }
.menue .klein { font-size: 14px; color: var(--bleistift); }
/* Kontozettel (nur auf der Spieleplattform): wer angemeldet ist und ob Einsätze ins Betriebsbuch kommen */
.kontozettel { width: min(340px, 100%); margin-top: 18px; padding: 12px 18px 8px; transform: rotate(.9deg); font: 15px/1.4 var(--maschine); color: var(--tinte); }
.kontozettel p { margin: 0 0 4px; }
.kontozettel .menue a { padding-top: 4px; padding-bottom: 3px; }
.ergebnis .nachtrag { margin: 4px 0 8px; font: 15px/1.5 var(--maschine); color: var(--bleistift); }
.start .fusszeile { position: absolute; right: 22px; bottom: 16px; font: 12px var(--maschine); color: rgba(214, 201, 165, .55); }

/* Szenario-Auswahl: Akten links, Einsatzbefehl rechts */
.auswahl { grid-template-columns: minmax(260px, 340px) minmax(0, 640px); justify-content: center; align-content: center; gap: 28px; padding: 5vh 4vw; }
.akten { display: flex; flex-direction: column; gap: 8px; }
.akten h2 { margin: 0 0 6px; font: 400 44px/1 var(--fraktur); color: #ece2c4; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.akte { position: relative; display: block; width: 100%; padding: 10px 14px 9px; text-align: left; cursor: pointer; border: 0; font: 15px/1.3 var(--maschine);
  color: var(--tinte); background: linear-gradient(180deg, #c7b48a, #b19c6f); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); clip-path: polygon(0 8px, 30% 8px, 34% 0, 64% 0, 68% 8px, 100% 8px, 100% 100%, 0 100%); padding-top: 16px; }
.akte small { display: block; margin-top: 3px; font: 500 12.5px var(--gravur); color: var(--bleistift); letter-spacing: .02em; }
.akte[aria-current="true"] { background: linear-gradient(180deg, var(--papier), #c9ba92); transform: translateX(10px); }
.akte .sterne { position: absolute; right: 10px; top: 14px; color: var(--rot); letter-spacing: 2px; font-size: 13px; }
.akten .leer { padding: 14px; font: 14px/1.5 var(--maschine); color: var(--papier); background: rgba(0, 0, 0, .35); border: 1px dashed rgba(214, 201, 165, .4); }
.akten .zurueck { margin-top: 10px; align-self: flex-start; font: 15px var(--maschine); color: var(--papier); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.einsatzbefehl { position: relative; padding: 30px 34px 26px; transform: rotate(.5deg); min-height: 420px; }
.einsatzbefehl .stempel { position: absolute; right: 26px; top: 20px; padding: 4px 10px; font: 700 20px var(--gravur); letter-spacing: .12em; color: var(--rot);
  border: 3px double var(--rot); transform: rotate(-9deg); opacity: .82; mix-blend-mode: multiply; }
.einsatzbefehl .kopf { margin: 0 0 14px; font: 13px/1.5 var(--maschine); color: var(--bleistift); }
.einsatzbefehl h3 { margin: 0 0 12px; font: 24px/1.2 var(--maschine); color: var(--tinte); max-width: 80%; }
.einsatzbefehl .text { margin: 0 0 16px; font: 15.5px/1.6 var(--maschine); white-space: pre-line; max-width: 62ch; }
.einsatzbefehl .eckdaten { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0 0 18px; font: 14px/1.45 var(--maschine); }
.einsatzbefehl .eckdaten dt { color: var(--bleistift); }
.einsatzbefehl .eckdaten dd { margin: 0; }
.einsatzbefehl .knopfreihe { display: flex; gap: 16px; align-items: center; }
.stempelknopf { padding: 9px 18px 8px; font: 700 17px var(--gravur); letter-spacing: .06em; color: var(--papier); background: var(--rot); border: 0; cursor: pointer;
  box-shadow: 0 3px 0 #5a1410, 0 6px 14px rgba(0, 0, 0, .35); transform: rotate(-1deg); }
.stempelknopf:hover { background: #b9322a; }
.stempelknopf:active { transform: rotate(-1deg) translateY(2px); box-shadow: 0 1px 0 #5a1410; }
.textknopf { font: 15px var(--maschine); color: var(--tinte); background: none; border: 0; border-bottom: 1px solid var(--bleistift); cursor: pointer; padding: 2px 0; }

/* Einstellungen, Pause, Ergebnis: ein Blatt mittig */
.mittig { place-items: center; padding: 4vh 4vw; }
.blatt-karte { position: relative; width: min(520px, 100%); padding: 24px 28px 22px; transform: rotate(-.7deg); }
.blatt-karte h2 { margin: 0 0 14px; font: 400 36px/1 var(--fraktur); color: var(--tinte); }
.blatt-karte .zeile { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 8px 12px; margin: 8px 0; font: 15px var(--maschine); }
.blatt-karte select, .blatt-karte input[type="range"] { font: 14px var(--maschine); color: var(--tinte); background: rgba(255, 255, 255, .25); border: 1px solid var(--bleistift); padding: 4px 6px; }
.blatt-karte input[type="range"] { accent-color: var(--rot); padding: 0; }
.blatt-karte .knopfreihe { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 18px; }
.funkspruch { font: 15.5px/1.6 var(--maschine); white-space: pre-line; margin: 0 0 6px; }
.funkspruch .gross { font-size: 22px; }
.ergebnis.sieg .stempel, .ergebnis.niederlage .stempel { position: absolute; right: 22px; top: 18px; padding: 4px 10px; font: 700 18px var(--gravur); letter-spacing: .1em;
  border: 3px double currentColor; transform: rotate(-8deg); mix-blend-mode: multiply; }
.ergebnis.sieg .stempel { color: #2f5a2a; }
.ergebnis.niederlage .stempel { color: var(--rot); }

/* ---------------------------------------------------------------- schmale Fenster */
@media (max-width: 1100px) {
  .konsole { transform: translateX(-50%) scale(.82); transform-origin: 50% 100%; }
  .hud.eingeklappt .konsole { transform: translate(-50%, calc(100% - 22px)) scale(.82); }
  #ansichten { --konsole-oben: 176px; }
  #meldung.fernschreiben { top: auto; bottom: calc(var(--konsole-oben) + 6px); max-width: calc(100% - 40px); font-size: 14px; }
  #ansichten:has(.sehrohr:not([hidden])) #meldung.fernschreiben { bottom: calc(var(--konsole-oben) + 44px); }
  .fernschreib-verlauf { top: auto; bottom: calc(var(--konsole-oben) + 64px); flex-direction: column-reverse; }
  #ansichten:has(.sehrohr:not([hidden])) .fernschreib-verlauf { bottom: calc(var(--konsole-oben) + 102px); }
  .lagekarte { width: 220px; font-size: 11.5px; }
}
@media (max-width: 820px) {
  .konsole { transform: translateX(-50%) scale(.64); }
  .hud.eingeklappt .konsole { transform: translate(-50%, calc(100% - 22px)) scale(.64); }
  #ansichten { --konsole-oben: 142px; }
  .lagekarte { width: 190px; max-height: 40%; }
  #meldung.fernschreiben { max-width: calc(100% - 24px); }
  .fernschreib-verlauf { display: none; }
  .auswahl { grid-template-columns: 1fr; }
  .einsatzbefehl { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zeiger, .rose, .telegraf-griff, .ruder-zeiger, .konsole, .lagekarte { transition: none; }
  .rohr[data-zustand="laden"] .lampe, #meldung.fernschreiben.neu, .start h1.einstempeln { animation: none; }
}