/* Echtora „Steampunk-Barock“ – durchgehend Pixel: Rahmen aus kleinen Pixelbildern (border-image, tools/make_ui.py), Pixelschrift,
   Licht von oben links, harte Schatten nach rechts unten. Ein Design-Pixel = 2 CSS-Pixel.
   Fenster: Nussholz mit Messingleiste und Eckbeschlägen, innen Pergament; Überschriften als graviertes Messing-Namensschild;
   Knöpfe aus Messing (Weinrot-Emaille für Besonderes), gedrückt sinken sie ein; außerhalb des Spiels dunkler Damast. */
/* Eigene Schrift „Echtora Pixel“: streng auf dem Raster, 1 Schriftpixel = 2 CSS-Pixel bei 20 px (Logo 40 px) */
@font-face { font-family: "Echtora Pixel"; src: url("/fonts/echtora-pixel.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Echtora Pixel"; src: url("/fonts/echtora-pixel-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  /* Stil-Tokens (docs/STIL.md B4–B6, E1): Farbwerte stehen nur in :root – überall sonst var(--…) (tools/stil_pruefen.py) */
  --bg: #36261E; --paper: #FBF2DE; --parch: #F1E3C4; --ink: #3A2E26; --soft: #6E5844; --line: #3A2E26;
  --brass: #DCAE45; --brass-l: #F2CF6A; --brass-g: #FFF0B0; --brass-d: #B5852C; --brass-dd: #7E5A1C;
  --walnut: #543926; --walnut-d: #3E2A1D; --wine: #74303E; --patina: #427866; --on-dark: #E9D7B4;
  --tinte-tief: #1E1510; --wein-tief: #3A1420; --messing-tinte: #4E3712;                     /* harte Schatten, Gravur */
  --emaille-gelb-l: #F6E39A; --emaille-gelb: #F8DC6E; --emaille-gelb-d: #EDBE3A; --emaille-tinte: #1E1A16;   /* Ortsschild */
  --karte-meer: #BED3CA; --karte-mein: #E2A82E; --karte-fremd: #6E5E4E; --karte-bahnhof: #F4E9D0;   /* wie map.js */
  --zug-fern: #DE9A66; --zug-regio: #7BC2AB; --zug-sbahn: #9CA1A9; --zug-mein: #DBB24C;        /* wie map.js CLS */
  /* Transparenzen: Schatten in Tinte, Glanz in Messingweiß */
  --schatten-zart: rgba(58, 46, 38, .14); --schatten-leicht: rgba(58, 46, 38, .25); --schatten: rgba(58, 46, 38, .3);
  --schatten-stark: rgba(58, 46, 38, .35); --schleier: rgba(58, 46, 38, .55); --schatten-tief: rgba(30, 21, 16, .32);
  --schatten-tiefer: rgba(30, 21, 16, .35); --schatten-schwarz: rgba(0, 0, 0, .35);
  --glanz: rgba(255, 240, 176, .5); --glanz-stark: rgba(255, 240, 176, .6); --glanz-weiss: rgba(255, 255, 255, .45);
  --glanz-schild: rgba(255, 250, 220, .6); --gravur: rgba(126, 90, 28, .35); --pergament-schleier: rgba(251, 242, 222, .88);
  --wein-hauch: rgba(116, 48, 62, .08);
  /* Raster: aN = N Bildpixel der Oberfläche (2 CSS-Pixel je Bildpixel) */
  --a1: 2px; --a2: 4px; --a3: 6px; --a4: 8px; --a5: 10px; --a6: 12px; --a7: 14px; --a8: 16px; --a12: 24px;
  /* Schrift „Echtora Pixel“: nur ganze Vielfache ihres Rasters (10 px) – 20, 30, 40 */
  --schrift: 20px; --schrift-gross: 30px; --schrift-logo: 40px;
  --tipp: 44px; --feld: 54px;                                                                  /* Tippfläche, Feld der Leiste */
  /* Fokus (STIL.md B3): Tastatur gestrichelt in Tinte, auf dunklem Grund Messingglanz; „Mehr Kontrast“ setzt 3 px durchgezogen */
  --fokus-farbe: var(--ink); --fokus-hell: var(--brass-g); --fokus-breite: 2px; --fokus-stil: dashed; --fokus-abstand: 2px;
  /* vier alte Namen aus der Pastell-Zeit, noch in Gebrauch (canvas.scene, .tutorial, spiele.css) – sie zeigen auf Steampunk-Töne */
  --sky-l: #DEE0E4; --mint: #62A08A; --meadow-d: #3E6E5E; --rose-l: #FAD6B2;
  --font: "Echtora Pixel", ui-monospace, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; scrollbar-color: var(--brass-d) var(--schatten-zart); }
html, body { margin: 0; color: var(--ink); font: 400 var(--schrift)/30px var(--font); -webkit-font-smoothing: none; font-synthesis: none; }
html { background: var(--bg) url("/img/ui/bg.png") repeat; background-size: 64px 64px; image-rendering: pixelated; }
body { min-height: 100vh; padding: env(safe-area-inset-top) 0 calc(78px + env(safe-area-inset-bottom)); }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
main { max-width: 560px; margin: 0 auto; padding: 14px 12px 24px; display: grid; gap: 22px; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--brass-l); color: var(--ink); }

/* Kopf (außerhalb des Spiels): auf dem Damast, Schrift in Messing und Pergament */
.top { max-width: 560px; margin: 0 auto; padding: 10px 12px 4px; display: flex; align-items: center; justify-content: space-between; color: var(--on-dark); }
.brand { color: var(--brass-l); text-decoration: none; font-weight: 700; font-size: var(--schrift); display: flex; gap: 8px; align-items: center;
  min-height: var(--tipp); min-width: var(--tipp); justify-content: center;   /* Logo als Link: Tippfläche 44 px */
  text-shadow: 2px 2px 0 var(--tinte-tief); }
.brand img { width: 32px; height: 32px; box-shadow: 2px 2px 0 var(--schatten-schwarz); }
.right-group { display: flex; gap: 10px; align-items: center; }
.taler { font-weight: 700; display: inline-flex; gap: 4px; align-items: center; font-size: var(--schrift); }
.taler canvas { width: 24px; height: 24px; }

/* Fenster = Pergament im Nussholzrahmen mit Messingleiste, Eckbeschläge stehen über (border-image-outset) */
.card, .toast {
  border-style: solid; border-width: 14px; border-image: url("/img/ui/panel.png") 16 / 32px / 6px repeat;
  padding: 6px 10px 10px; background: var(--parch) url("/img/ui/parchment.png") repeat 0 0 / 64px 64px; background-clip: padding-box;
  background-origin: padding-box; image-rendering: pixelated; min-width: 0;
}
/* Überschrift als Messing-Namensschild mit Rollwerk an beiden Enden, Schrift eingraviert */
.card > h2:first-child, .legend-panel > h2:first-child {
  margin: 0 0 12px; padding: 4px 6px; min-height: 40px; align-items: center; color: var(--ink); text-shadow: 2px 2px 0 var(--glanz-stark);
  border-style: solid; border-width: 4px 14px; border-image: url("/img/ui/plate.png") 10 7 fill / 20px 14px stretch;
}
.card > h2:first-child .note, .card > h2:first-child .right { color: var(--messing-tinte); text-shadow: none; }
.card.tut { border-image-source: url("/img/ui/panel-butter.png"); }
.card.tut > h2:first-child { color: var(--ink); }
.hero { padding: 6px 10px 12px; }
.scene-box { display: grid; justify-items: center; gap: 8px; margin-bottom: 8px; }
canvas.scene { display: block; max-width: 100%; border: 8px solid; border-image: url("/img/ui/field.png") 4 stretch; background: var(--sky-l); cursor: pointer; }
canvas.icon { width: 24px; height: 24px; flex: none; }   /* 24er-Symbol 1:1 – Symbole nur in 24, 48 oder 72 px (STIL.md A5) */
.views { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }

/* Schrift */
h1.logo { display: inline-block; font-size: var(--schrift-logo); line-height: 40px; margin: 12px 0 0; font-weight: 700; padding: 8px 10px; color: var(--ink);
  border-style: solid; border-width: 4px 21px; border-image: url("/img/ui/plate.png") 10 7 fill / 30px 21px stretch;
  text-shadow: 2px 2px 0 var(--brass-g), 4px 4px 0 var(--gravur); }
h2 { font-size: var(--schrift); line-height: 24px; margin: 0 0 10px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
h3 { padding-bottom: 6px; background: url("/img/ui/perf.png") repeat-x left bottom / 8px 4px; }
.tagline { font-size: var(--schrift); margin: 6px 0 0; color: var(--wine); font-weight: 700; }
.caption { margin: 8px 0 0; font-weight: 700; }
.note { color: var(--soft); font-size: var(--schrift); }
.center { text-align: center; }
.right { margin-left: auto; font-weight: 400; font-size: var(--schrift); color: var(--soft); }
p { margin: 6px 0; }
.link { color: var(--wine); display: inline-block; margin: 6px 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (pointer: coarse) { .link { display: inline-flex; align-items: center; min-height: var(--tipp); margin: 0; } }   /* allein stehende Links: Tippfläche 44 px */
img.px-arrow { width: 14px; height: 14px; vertical-align: -1px; margin: 0 3px; }
img.px-check { width: 14px; height: 12px; margin-right: 4px; }

/* Knöpfe: Messingplatten mit Nieten und 3D-Kante, Schrift eingeprägt; gedrückt sinkt die Platte ein */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 var(--schrift)/24px var(--font); color: var(--ink);
  background: none; border-style: solid; border-width: 8px 8px 12px; border-image: url("/img/ui/btn-butter.png") 4 4 6 fill / 8px 8px 12px stretch;
  padding: 2px 10px 2px; margin: 4px 0; cursor: pointer; text-decoration: none; image-rendering: pixelated; min-height: var(--tipp); justify-self: start;
  text-shadow: 2px 2px 0 var(--glanz);
}
.btn:active:not(:disabled) { border-image-source: url("/img/ui/btn-butter-down.png"); padding: 6px 10px 0; }
.btn.discord { border-image-source: url("/img/ui/btn-lilac.png"); color: var(--paper); text-shadow: 2px 2px 0 var(--wein-tief); }
.btn.discord:active:not(:disabled) { border-image-source: url("/img/ui/btn-lilac-down.png"); }
.btn.small { font-size: var(--schrift); min-height: var(--tipp); padding: 0 8px; }
.btn.small:active:not(:disabled) { padding: 4px 8px 0; }
.btn.small.discord { border-image-source: url("/img/ui/btn-lilac.png"); }
.btn.on, .btn[aria-pressed="true"] { border-image-source: url("/img/ui/btn-butter-down.png"); padding-top: 6px; padding-bottom: 0; }
.btn.small.on, .btn.small[aria-pressed="true"] { padding-top: 4px; }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.5); }
/* Fokus (STIL.md B3): ein Stil für alles, was sich mit Tastatur oder Fernbedienung erreichen lässt – auch Links und Aufklapper */
:focus-visible { outline: var(--fokus-breite) var(--fokus-stil) var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
.top :focus-visible { outline-color: var(--fokus-hell); }
.btn canvas.icon { width: 24px; height: 24px; }

/* Eingaben: Messingfassung, darin vertieftes Pergament */
input[type=search], input[type=number], select {
  font: 400 var(--schrift)/30px var(--font); color: var(--ink); background: none; border-style: solid; border-width: 8px;
  border-image: url("/img/ui/field.png") 4 fill / 8px stretch; padding: 2px 6px; width: 100%; image-rendering: pixelated; min-height: var(--tipp);
}
select { appearance: none; -webkit-appearance: none; border-image: url("/img/ui/field.png") 4 / 8px stretch; padding-right: 30px; cursor: pointer;
  background: var(--paper) url("/img/ui/select.png") no-repeat right 8px center / 14px 10px; background-clip: padding-box; }
input::placeholder { color: var(--soft); opacity: 1; }
input[type=search]::-webkit-search-cancel-button { filter: grayscale(1) sepia(1) brightness(.45); cursor: pointer; }
input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--brass-d); vertical-align: middle; cursor: pointer; }
.places li { margin-top: 6px; }
.place { width: 100%; text-align: left; font: 400 var(--schrift)/30px var(--font); color: var(--ink); background: none; cursor: pointer;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; padding: 2px 6px; }
@media (hover: hover) { .place:hover { border-image-source: url("/img/ui/chip-butter.png"); } }   /* Finger: kein Hängenbleiben nach dem Tippen */
.place span { color: var(--soft); }

/* Waren als Pergament-Schilder mit Messingöse */
.stock { display: grid; gap: 8px; }
.stock li {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 0 10px; align-items: center; padding: 4px 8px 4px 22px; position: relative;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch;
}
.stock li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: url("/img/ui/hole.png") center / 12px 12px no-repeat; }
.stock li canvas.icon { width: 48px; height: 48px; }
.stock .note { grid-column: 2 / 4; }
.amount { font-weight: 700; font-size: var(--schrift); }

/* Balken: Glasröhre in Messing, gefüllt mit Bernstein */
.bar { height: 20px; border-style: solid; border-width: 6px; border-image: url("/img/ui/tube.png") 3 fill / 6px stretch; margin-bottom: 8px; }
.bar .fill { height: 100%; background: url("/img/ui/bar-fill.png") repeat-x left top / 4px 8px; }

/* Vorhersage */
.outlook { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.hour { display: grid; justify-items: center; gap: 2px; min-width: 44px; font-size: var(--schrift); }
.hour canvas.icon { width: 24px; height: 24px; }

/* Listen mit gravierter Linie */
.deps li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 0; background: url("/img/ui/perf.png") repeat-x left top / 8px 4px; }
.deps li:first-child { background: none; }
.deps.big li { padding: 10px 0; }
.deps li > a, .todo a { display: inline-block; padding: 7px 0; }
.todo li { padding: 6px 0; } .todo a { color: var(--wine); text-decoration-thickness: 2px; }
.deps a { color: var(--wine); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tutorial { padding-left: 0; display: grid; gap: 4px; }
.tutorial li { display: flex; align-items: center; gap: 6px; color: var(--soft); }
.tutorial li.done { color: var(--meadow-d); }
.tutorial li.now { color: var(--ink); font-weight: 700; }

/* Abzeichen und Linien als Schilder: Messing bzw. Emaille (helle Schrift auf Kupfer, Grünspan, Eisen, Weinrot) */
.badge, .line {
  display: inline-block; font: 700 var(--schrift)/24px var(--font); color: var(--ink); vertical-align: middle; padding: 0 4px;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch;
}
.badge { margin-left: 6px; }
.badge.gold { border-image-source: url("/img/ui/chip-butter.png"); }
.line { min-width: 44px; text-align: center; }
.line.c1 { border-image-source: url("/img/ui/chip-rose.png"); color: var(--paper); }
.line.c2 { border-image-source: url("/img/ui/chip-mint.png"); color: var(--paper); }
.line.c3 { border-image-source: url("/img/ui/chip-sky.png"); color: var(--paper); }
.line.c4 { border-image-source: url("/img/ui/chip-lilac.png"); color: var(--paper); }

/* Buchen */
.book { flex-basis: 100%; display: grid; gap: 6px; padding: 8px; border-style: solid; border-width: 8px;
  border-image: url("/img/ui/field.png") 4 fill / 8px stretch; }

/* Einladung, Hinweise (Brief mit Wachssiegel) */
.invite code { display: block; word-break: break-all; padding: 4px 8px; margin-top: 8px; font: 400 var(--schrift)/30px var(--font);
  border-style: solid; border-width: 8px; border-image: url("/img/ui/field.png") 4 fill / 8px stretch; }
.invite .btn.small { margin-right: 8px; }
.toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 10; max-width: min(92vw, 560px);
  border-image-source: url("/img/ui/panel-rose.png"); font-weight: 700; padding-left: 40px; }
.toast::before { content: ""; position: absolute; left: 6px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  background: url("/img/ui/seal.png") 0 0 / 24px 24px no-repeat; }
.toast:not(.still-note) { pointer-events: none; }   /* Mitteilungen lassen Tippen durch: darunter liegt oft der Knopf eines Fensters („Nach Hause zum Hof“) */
/* Stillmodus (stadt.js setzt body.still-ort auf großen Gedenkgeländen und Friedhöfen): Leiste, Taler und Mitteilungen gehen ruhig
   weg – Menü, Tafel mit Name und Bitte um Respekt, Fehler und Ortsschild bleiben */
.hotbar, #taler, .toast { transition: opacity .6s ease, visibility .6s; }
body.still-ort .hotbar, body.still-ort #taler, body.still-ort .toast:not(.still-note):not(.err) { opacity: 0; visibility: hidden; pointer-events: none; }
body.drinnen .toast:not(.still-note) { pointer-events: none; }   /* drinnen liegt der Hinweis unten über Tür und Echti: Tipps gehen durch (er hat keine Knöpfe) */
@media (prefers-reduced-motion: reduce) { .hotbar, #taler, .toast { transition: none; } }
/* Lesekärtchen: Schrift im Bild antippen → gut lesbar am Schild; am PC zusätzlich als Tooltip am Zeiger (lesen.js) */
.lese { position: fixed; z-index: 6; width: max-content; max-width: min(80vw, 360px); text-align: center; font: 400 var(--schrift)/26px var(--font); color: var(--ink);
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; padding: 1px 8px;
  image-rendering: pixelated; cursor: pointer; animation: lese-auf .14s ease-out; }
.lese.tip { pointer-events: none; cursor: default; font-size: var(--schrift); line-height: 24px; animation: none; }
.lese[hidden] { display: none; }
@keyframes lese-auf { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .lese { animation: none; } }
/* Ortsschild beim Betreten einer Stadt (ortsschild.js): das Gelb des echten Ortsschilds als Emaille, gefasst in eine barocke Kartusche
   aus Messing und Kupfer (Voluten, Kupfernieten, Grünspan unten an den Voluten), oben eine Mauerkrone, links ein Manometer, rechts ein
   Zahnrad; beim Einblenden ein kurzer Messing-Glanz (Bewegung reduzieren: nur Ein- und Ausblenden). Pixelteile web/img/ui/ortsschild-* aus tools/make_ui.py */
.ortsschild { position: fixed; top: calc(26px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto; width: max-content; max-width: min(84vw, 460px);
  z-index: 7; padding: 3px 18px 5px; text-align: center; color: var(--emaille-tinte); cursor: pointer; image-rendering: pixelated;
  border-style: solid; border-width: 14px; border-image: url("/img/ui/ortsschild-rahmen.png") 16 / 32px / 6px repeat;   /* 2× wie die Legende: scharfe Pixel */
  background: var(--emaille-gelb); background-clip: padding-box;   /* Emaille flach – der Glanz kommt aus den Kanten (kein weicher Verlauf) */
  box-shadow: inset 0 0 0 2px var(--emaille-tinte), inset 0 0 0 4px var(--emaille-gelb-l), 3px 6px 0 var(--schatten-tief); }
.ortsschild .ort { font: 700 var(--schrift-gross)/36px var(--font); letter-spacing: 1px; position: relative; }
.ortsschild .teil { font: 400 var(--schrift)/24px var(--font); margin-top: -2px; position: relative; }
.ortsschild .krone { position: absolute; left: 50%; top: -34px; width: 38px; height: 20px; margin-left: -19px; background: url("/img/ui/ortsschild-krone.png") 0 0 / 38px 20px no-repeat; }
.ortsschild .zier { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; }
.ortsschild .zier.l { left: -32px; background: url("/img/ui/ortsschild-manometer.png") 1px 1px / 22px 22px no-repeat; }
.ortsschild .zier.r { right: -32px; background: url("/img/ui/gear.png") 0 0 / 96px 24px no-repeat; }
.ortsschild .glanz { position: absolute; inset: -4px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, var(--glanz-schild) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat; opacity: 0; }
.ortsschild.an .glanz { animation: ortsschild-glanz .9s ease-out .2s 1 both; }
@keyframes ortsschild-glanz { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
.ortsschild[hidden] { display: none; }
@media (max-width: 560px) { .ortsschild { top: calc(240px + env(safe-area-inset-top)); padding: 2px 10px 4px; border-width: 12px; max-width: calc(100vw - 52px); }
  .ortsschild .ort { font-size: var(--schrift); line-height: 26px; } .ortsschild .zier.l { left: -30px; } .ortsschild .zier.r { right: -30px; } }   /* Handy: unter Menü und Karte */
.ortsschild.an { animation: ortsschild-ein .4s cubic-bezier(.2, .9, .3, 1.2); }
.ortsschild.aus { animation: ortsschild-aus .35s ease-in forwards; }
@keyframes ortsschild-ein { from { transform: translateY(calc(-100% - 60px)); } }
@keyframes ortsschild-aus { to { opacity: 0; transform: translateY(-30%); } }
@media (prefers-reduced-motion: reduce) { .ortsschild.an { animation: ortsschild-hell .2s linear; } .ortsschild.aus { animation: ortsschild-dunkel .2s linear forwards; } .ortsschild.an .glanz { animation: none; } }
@keyframes ortsschild-hell { from { opacity: 0; } }
@keyframes ortsschild-dunkel { to { opacity: 0; } }
footer { padding: 0 12px 20px; }
footer .note { color: var(--on-dark); }

/* Karte */
.map-holder { position: relative; }
canvas.map { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; border: 2px solid var(--line); }
.map-controls { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 2px; }
.map-controls .btn { width: 44px; min-height: var(--tipp); padding: 0; margin: 0; }
.info-panel .card { margin-top: 0; }
.info-panel { padding: 6px; }   /* Platz für die überstehenden Eckbeschläge (sonst schneidet das Scrollen sie ab) */
.info { display: flex; gap: 12px; align-items: center; min-height: 48px; }

@media (min-width: 900px) {
  main, .top { max-width: 900px; }
  body { font-size: var(--schrift); }
}
@media (prefers-reduced-motion: reduce) { .btn:active { padding-top: 2px; } }

/* Einstellungen-Knopf (Zahnrad) */
#gear { min-height: var(--tipp); padding: 0 4px; }
#gear canvas.icon { width: 24px; height: 24px; }
.wiki h2 { display: flex; align-items: center; gap: 8px; }
.wiki-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wiki-list li { display: grid; grid-template-columns: 33px 1fr; gap: 2px 10px; align-items: start; }
.wiki-list canvas.mini { width: 33px; height: 33px; grid-row: span 2; }
.wiki-list .note { grid-column: 2; }
.wiki-list li.rad { grid-template-columns: 48px 1fr; }                       /* Räder: Symbol doppelt groß, Knöpfe rechts daneben */
.wiki-list li.rad > :not(canvas) { grid-column: 2; justify-self: start; }
canvas.rad { width: 48px; height: 48px; grid-row: span 4; }

/* Karte als Vollbild zwischen Kopf und Reitern; Infos als Fenster darüber */
body.fullmap main { max-width: none; padding: 0; }
body.fullmap footer { display: none; }
body.fullmap .map-holder { position: fixed; left: 0; right: 0; top: var(--top-h, 56px); bottom: calc(66px + env(safe-area-inset-bottom));
  overflow: hidden; background: var(--karte-meer); }
body.fullmap canvas.map { border: 0; }
/* Messingrahmen der alten Landkarte: liegt nur über dem Bildrand, Eckrosetten, nimmt keine Berührungen an */
body.fullmap .map-holder::after, .map-overlay .map-holder::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-style: solid; border-width: 8px; border-image: url("/img/ui/map-frame.png") 10 / 20px stretch; }
.map-legend { display: none; }
body.fullmap .map-legend { display: block; position: fixed; left: 8px; top: calc(var(--top-h, 56px) + 8px); z-index: 4; max-width: calc(100% - 76px);
  font-size: var(--schrift); padding: 0 6px; border-style: solid; border-width: 6px 6px 8px;
  border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; }
body.fullmap .info-panel { position: fixed; left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); max-height: 46vh;
  overflow-y: auto; z-index: 6; max-width: 560px; margin: 0 auto; }
.info-panel[hidden] { display: none; }
/* Schließen: kleiner Eisenknauf mit ×, Tippfläche reicht über den Knauf hinaus (44 px) */
.btn.close { margin: -4px 0 -4px auto; min-height: 36px; min-width: 36px; padding: 0 6px; font-size: var(--schrift); position: relative;
  border-image-source: url("/img/ui/btn-sky.png"); text-shadow: 2px 2px 0 var(--glanz-weiss); }
.btn.close:active:not(:disabled) { border-image-source: url("/img/ui/btn-sky-down.png"); }
.btn.close::after { content: ""; position: absolute; inset: -10px -8px -12px; }

/* Hof als Vollbild: Welt zwischen Kopf und Reitern, Anzeigen schweben darüber */
body.fullfarm main { max-width: none; padding: 0; }
body.fullfarm footer { display: none; }
.farm-holder { position: fixed; left: 0; right: 0; top: var(--top-h, 56px); bottom: calc(66px + env(safe-area-inset-bottom));
  overflow: hidden; display: grid; place-items: center; background: var(--ink); touch-action: none; }
.farm-holder canvas.scene { border: 0; background: none; }
.farm-holder canvas.wolken-rand { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }   /* Hof als Insel in den Wolken (wolken.js) */
.hud-top { position: fixed; left: 8px; top: calc(var(--top-h, 56px) + 8px); z-index: 4; display: grid; gap: 4px; max-width: calc(100% - 84px); justify-items: start; }
.hud-chip { display: flex; align-items: center; gap: 6px; font: 400 var(--schrift)/24px var(--font); color: var(--ink); text-align: left; padding: 0 6px;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; background: none; }
.hud-chip canvas.icon { width: 24px; height: 24px; }
.hud-chip .note { font-size: var(--schrift); }
.todo-chip { cursor: pointer; border-image-source: url("/img/ui/chip-butter.png"); font-weight: 700; min-height: var(--tipp); }
/* Wolken beim Wechsel Hof ↔ Stadt (vorhang.js, STIL.md A10): über der Welt, unter Menü, Leiste, Hinweisen und Fenstern; fängt Tippen auf
   die Welt darunter ab. Der Hinweis darauf ist ruhig und erscheint erst, wenn es dauert */
.wolken-vorhang { position: fixed; inset: 0; z-index: 2; overflow: hidden; touch-action: none; }
.wolken-vorhang[hidden], .wolken-hinweis[hidden] { display: none; }
.wolken-start { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }   /* der ganze Bildschirm ist der Knopf */
.wolken-start .hud-chip { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 16px); bottom: calc(86px + env(safe-area-inset-bottom)); }
.wolken-start:focus-visible .hud-chip { outline: var(--fokus-breite) var(--fokus-stil) var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
.wolken-vorhang[data-start] { z-index: 100; }   /* beim Start über allem, auch über Kopfzeilen */
.wolken-recht { position: absolute; right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); gap: 12px; }
.wolken-recht a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: inherit; }
.wolken-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* für Vorleser: das Bild trägt den Namen */
.wolken-vorhang canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.wolken-hinweis { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 16px);
  bottom: calc(86px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: center; gap: 6px; }
.shop-chip { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 140px); top: calc(var(--top-h, 56px) + 8px); z-index: 5; gap: 8px; }
.shop-chip[hidden] { display: none; }
.shop-chip .btn { margin: 0 0 0 4px; }
body.fullfarm .info-panel { position: fixed; left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); max-height: 58vh;
  overflow-y: auto; z-index: 6; max-width: 560px; margin: 0 auto; }
body.fullfarm .info-panel .card.tut { margin-bottom: 8px; }

/* Karte: Legende zum Aufklappen als barocke Kartusche (Messingrahmen, Muschel obenauf), Annahme-Zeilen */
body.fullmap .map-legend { padding: 0; border: 0; background: none; display: grid; gap: 4px; justify-items: start; }
.legend-panel { position: relative; border-style: solid; border-width: 14px; border-image: url("/img/ui/panel-kartusche.png") 16 / 32px / 6px repeat;
  background: var(--parch) url("/img/ui/parchment.png") repeat 0 0 / 64px 64px; background-clip: padding-box; background-origin: padding-box;
  padding: 4px 8px 8px; margin-top: 18px; max-width: min(520px, calc(100vw - 36px)); }
.legend-panel::before { content: ""; position: absolute; left: 50%; top: -38px; width: 48px; height: 20px; margin-left: -24px;
  background: url("/img/ui/crest.png") 0 0 / 48px 20px no-repeat; }
.legend-panel > h2:first-child { justify-content: center; }
/* Karte als eigene Ansicht über allem (map.js openMapOverlay, z. B. aus der Bahnhofshalle): Titel als Namensschild */
.map-overlay { position: fixed; inset: 0; z-index: 30; background: var(--karte-meer); }
.map-overlay .map-holder { position: absolute; inset: 0; overflow: hidden; }
.map-overlay canvas.map { border: 0; }
.map-overlay .map-controls { top: calc(env(safe-area-inset-top) + 70px); right: 14px; z-index: 2; }
.map-overlay .map-close { position: absolute; right: 14px; top: calc(env(safe-area-inset-top) + 14px); z-index: 2; margin: 0; }
.map-overlay .map-title { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translateX(-50%); z-index: 2; margin: 0;
  max-width: calc(100vw - 150px); justify-content: center; text-align: center; padding: 4px 6px; min-height: 40px; align-items: center; color: var(--ink);
  text-shadow: 2px 2px 0 var(--glanz-stark); border-style: solid; border-width: 4px 14px; border-image: url("/img/ui/plate.png") 10 7 fill / 20px 14px stretch; }
.map-overlay .info-panel { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); max-height: 50vh; overflow-y: auto;
  z-index: 3; max-width: 560px; margin: 0 auto; }
.map-overlay .info-panel[hidden] { display: none; }
.legend-panel[hidden] { display: none; }
.legend-panel p { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* Hof-Editor: Leiste unten mit Werkzeugen und Material (7 × 7-Symbole dreifach) */
.edit-bar { position: fixed; left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 5;
  border-style: solid; border-width: 14px; border-image: url("/img/ui/panel.png") 16 / 32px / 6px repeat; padding: 2px 4px;
  background: var(--parch) url("/img/ui/parchment.png") repeat 0 0 / 64px 64px; background-clip: padding-box; background-origin: padding-box; }
.edit-bar[hidden], .info-panel:not([hidden]) ~ .edit-bar { display: none; }
.edit-head { display: flex; align-items: center; gap: 8px; }
.edit-head .note { flex: 1; font-size: var(--schrift); line-height: 24px; }
.edit-head .btn { margin: 0; }
.tools { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: thin; }
.tool { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 72px; padding: 4px 4px 2px; border: 0;
  background: transparent; color: inherit; font: inherit; font-size: var(--schrift); line-height: 22px; cursor: pointer;
  border-style: solid; border-width: 10px; border-image: url("/img/ui/slot.png") 5 fill / 10px stretch; }
.tool[aria-pressed="true"] { border-image-source: url("/img/ui/slot-on.png"); padding-top: 6px; padding-bottom: 0; }
.tool canvas.mini { width: 33px; height: 33px; }
.tool-count { font-size: var(--schrift); color: var(--soft); }
body.editing .hud-top { display: none; }
.avatar-edit { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
canvas.echti-preview { width: 144px; height: 176px; image-rendering: pixelated; flex: none; background: var(--paper); padding: 0;
  border: 8px solid; border-image: url("/img/ui/field.png") 4 stretch; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.swatches strong { min-width: 7em; }
.swatch { width: 44px; height: 44px; border: 3px solid var(--ink); padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--brass-l), inset 0 0 0 5px var(--schatten-stark), 2px 2px 0 var(--schatten); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: inset 0 0 0 3px var(--brass-g), inset 0 0 0 5px var(--ink); }
.osm-credit { position: fixed; left: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 3; margin: 0; padding: 0 6px;
  font-size: var(--schrift); line-height: 24px; background: var(--pergament-schleier); color: var(--soft); box-shadow: 2px 2px 0 var(--schatten); }
.hud-chip canvas.mini { width: 22px; height: 22px; vertical-align: middle; }
.legend-goods { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 2px 10px; }
.legend-goods li { display: flex; align-items: center; gap: 6px; }
canvas.mini { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.legend-panel canvas.icon, .accepts canvas.icon { width: 24px; height: 24px; }
.sw { display: inline-block; width: 28px; height: 6px; border: 2px solid var(--ink); }
.sw.mine { background: var(--karte-mein); } .sw.other { background: var(--karte-fremd); } .sw.station { width: 10px; height: 10px; background: var(--karte-bahnhof); }
.wagon { display: inline-block; width: 14px; height: 10px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--schatten-leicht); }
.wagon.c1 { background: var(--zug-fern); } .wagon.c2 { background: var(--zug-regio); } .wagon.c3 { background: var(--zug-sbahn); } .wagon.own { background: var(--zug-mein); }
.accepts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; }
.accepts .offer { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
/* Hof: Zoom-Knöpfe oben in der Seitenleiste */
.zoom-row { display: flex; gap: 2px; }
.zoom-row .btn { width: 44px; min-width: 0; min-height: var(--tipp); padding: 0; }
@media (min-width: 900px) { .zoom-row .btn { width: 44px; } }
/* Dev-Menü (nur Admins): Fenster rechts oben über allem, Abzeichen unten rechts, solange etwas verstellt ist */
#dev { min-height: var(--tipp); padding: 0 6px; }
.dev-panel { position: fixed; right: 8px; top: calc(var(--top-h, 56px) + 8px); z-index: 12; width: min(470px, calc(100vw - 16px));
  max-height: calc(100dvh - var(--top-h, 56px) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.dev-panel[hidden], .dev-badge[hidden], .dev-anzeige[hidden], #dev[hidden] { display: none; }
/* Karte im Reisemodus (app.js viewMap): Hinweis oben in der Mitte, nimmt keine Eingaben */
.map-reise { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 64px); z-index: 7;
  max-width: min(520px, calc(100vw - 32px)); margin: 0; pointer-events: none; text-align: center; }
.map-reise p { margin: 0 0 6px; }
.map-reise button { pointer-events: auto; }               /* „Zurück“: dorthin, wo man herkam (Hof oder Stadt) */
/* Dev-Anzeige im Spiel (dev.js): Bilder/s und Technik, rechts oben, nimmt keine Eingaben */
.dev-anzeige { position: fixed; right: calc(env(safe-area-inset-right) + 8px); top: calc(env(safe-area-inset-top) + 64px); z-index: 8;
  pointer-events: none; white-space: pre-line; max-width: min(360px, 60vw); font: 700 20px/24px var(--font); color: var(--ink); padding: 0 6px;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-butter.png") 3 3 4 fill / 6px 6px 8px stretch; }
/* Klangkarte (klang-karte.js, nur Dev): über Stadt und Hof, nimmt keine Eingaben; die Zahlen links oben */
.klangkarte { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; transform-origin: 0 0; }
.klangkarte[hidden], .klangkarte-legende[hidden] { display: none; }
.klangkarte-legende { position: fixed; left: calc(env(safe-area-inset-left) + var(--a4)); top: calc(env(safe-area-inset-top) + 64px); z-index: 8;
  pointer-events: none; max-width: min(400px, 70vw); font: 700 20px/24px var(--font); color: var(--ink); padding: 0 var(--a3);
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-butter.png") 3 3 4 fill / 6px 6px 8px stretch; }
.klangkarte-legende p { margin: var(--a1) 0; }
.klangkarte-titel { font-size: var(--schrift); }
.klangkarte-feld { display: inline-block; width: var(--a6); height: var(--a6); vertical-align: middle; }
.klangkarte-balken { display: inline-block; height: var(--a4); background: var(--ink); vertical-align: middle; }
.dev-panel .card { margin: 0; }
.dev-panel h3 { margin: 10px 0 4px; font-size: var(--schrift); }
.dev-now { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.dev-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab val" "inp inp"; gap: 0 8px; align-items: center; margin: 6px 0; }
.dev-row .dev-lab { grid-area: lab; } .dev-row .dev-val { grid-area: val; }
.dev-addr { display: flex; gap: 6px; margin: 8px 0 4px; } .dev-addr input { flex: 1; min-width: 0; }
.dev-hits { max-height: 220px; overflow: auto; margin: 4px 0; } .dev-hits li { overflow-wrap: anywhere; }
.dev-sens { max-height: min(60vh, 520px); } .dev-sens li.geprueft > span:first-child { opacity: .6; }   /* Sensible Orte: höher, durchgesehene blass */
.dev-sens li.dev-sens-zu { border-top: 1px dashed var(--soft); }                  /* zugeklappte Hinweistafeln am Ende */
.dev-panel input[type="search"] { width: 100%; box-sizing: border-box; }
.dev-row input[type=range] { grid-area: inp; width: 100%; min-height: var(--tipp); }
/* Schieberegler: Rille im Holz mit Messingkante, Griff aus Messing mit Riffeln */
input[type=range] { -webkit-appearance: none; appearance: none; background: none; height: 44px; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-style: solid; border-width: 6px; border-image: url("/img/ui/track.png") 3 fill / 6px stretch; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 32px; margin-top: -16px; border: 0;
  background: url("/img/ui/knob.png") 0 0 / 24px 32px no-repeat; }
input[type=range]::-moz-range-track { height: 12px; border-style: solid; border-width: 6px; border-image: url("/img/ui/track.png") 3 fill / 6px stretch; background: none; }
input[type=range]::-moz-range-thumb { width: 24px; height: 32px; border: 0; border-radius: 0; background: url("/img/ui/knob.png") 0 0 / 24px 32px no-repeat; }
.dev-row input[type=date] { grid-area: inp; font: 400 var(--schrift)/30px var(--font); color: var(--ink); background: none; border-style: solid; border-width: 8px;
  border-image: url("/img/ui/field.png") 4 fill / 8px stretch; padding: 0 6px; min-height: var(--tipp); }
.dev-val { text-align: right; white-space: nowrap; }
.dev-lab { color: var(--soft); }
.dev-btns { justify-content: flex-start; gap: 4px; margin: 4px 0; }
.dev-btns .btn { margin: 0; }
/* Dev-Menü in Reitern (dev.js): oben „Was ist an?“ mit „Alles zurücksetzen“, darunter die Reiter (wie die Einstellungen, Stil oben bei
   .einst-reiter), dann der Bereich; die Diagnose als Tabelle Name – Wert */
.dev-stand { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 2px; }
.dev-stand p { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.dev-stand .btn { margin: 0; }
.dev-stand .btn[hidden] { display: none; }
.dev-reiter { padding-bottom: 6px; border-bottom: 2px solid var(--brass-d); }
/* Handy (schmal, oder quer und niedrig): die Reiter rollen in einer Reihe (STIL.md B2 „am Handy rollt die Reihe“) – sonst wären es drei
   Zeilen über dem Inhalt; dev.js rollt den gewählten Reiter ins Bild */
@media (max-width: 540px), (max-height: 540px) {
  .dev-reiter { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .dev-reiter .btn { flex: none; }
}
.dev-diag { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.dev-diag th, .dev-diag td { padding: 2px 4px; text-align: left; vertical-align: top; }
.dev-diag th { width: 40%; color: var(--soft); font-weight: 400; }
.dev-diag td, .dev-diag-zeile { overflow-wrap: anywhere; }
.dev-not input[type=text] { font: 400 20px/30px var(--font); color: var(--ink); background: none; border-style: solid; border-width: 8px;   /* Grund (Notschalter) */
  border-image: url("/img/ui/field.png") 4 fill / 8px stretch; padding: 2px 6px; width: 100%; image-rendering: pixelated; min-height: 44px; }
/* Zeichnen-Vergleich (Dev-Menü, gl.js): Tabelle auf dem 2-px-Raster, Kopfzeile mit Messinglinie, Farben nur aus den Tokens */
.dev-gl { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.dev-gl th, .dev-gl td { padding: 2px 4px; text-align: right; white-space: nowrap; }
.dev-gl th:first-child { text-align: left; white-space: normal; }
.dev-gl tr:first-child th { border-bottom: 2px solid var(--brass-d); }
.dev-badge { position: fixed; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 11; cursor: pointer;
  font: 700 var(--schrift)/24px var(--font); color: var(--ink); background: none; padding: 0 6px; min-height: var(--tipp);
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-butter.png") 3 3 4 fill / 6px 6px 8px stretch; }

/* Frei setzen (stadt.js, hof.js): kurze Blende, wenn Echti aus einer Tasche geholt wird */
canvas.blende { animation: blende .5s ease-out; }
@keyframes blende { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { canvas.blende { animation: none; } }

/* Moderation (moderation.js): MOD-Knopf, Leiste „Beobachtermodus“, Übersicht, Sperrseite. Die Leiste steht im Spiel am großen Bildschirm
   oben neben dem Menü, sonst unten über der Werkzeugleiste – oben liegen Menüknopf und kleine Karte (bei starkem Zoom bis 430 px breit),
   dort ging am Handy der Rückweg unter. Unten bleibt sie unter offenen Fenstern; Mitteilungen und Ladeanzeige rücken darüber (body.beob) */
#modBtn[hidden], .mod-leiste[hidden] { display: none; }
.mod-leiste { position: fixed; z-index: 13; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 8px);
  width: max-content; max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
@media (min-width: 1101px) {
  body.game .mod-leiste { bottom: auto; top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 72px); transform: none;
    max-width: calc(100vw - 88px); justify-content: flex-start; }
}
@media (max-width: 1100px) {
  body.game .mod-leiste { z-index: 5; bottom: calc(env(safe-area-inset-bottom) + 70px); }
  body.game.beob .toast { bottom: calc(env(safe-area-inset-bottom) + 210px); }   /* auch über drei Zeilen Leiste (320 px) */
}
.mod-leiste .btn { margin: 0; min-height: var(--tipp); padding: 0 6px; font-size: var(--schrift); }
@media (max-width: 480px) { .mod-leiste .btn { padding: 0 8px; } }
.mod-leiste-text { color: var(--ink); text-decoration: none; padding: 4px 0; }
.mod-karte .btn[hidden] { display: none; }
.mod-liste li { display: grid; gap: 2px; justify-items: start; }
.mod-bann { color: var(--wine); font-weight: 700; }
.mod-knoepfe { justify-content: flex-start; gap: 4px; }
.mod-knoepfe .btn, .mod-form .btn { margin: 0; }
.mod-form { display: grid; gap: 6px; width: 100%; padding: 6px 0 2px; }
.mod-form .views { justify-content: flex-start; gap: 4px; }
.mod-form input { width: 100%; box-sizing: border-box; }
.mod-form input[type=text], .mod-form input[type=datetime-local] { font: 400 var(--schrift)/30px var(--font); color: var(--ink); background: none; border-style: solid;
  border-width: 8px; border-image: url("/img/ui/field.png") 4 fill / 8px stretch; padding: 2px 6px; min-height: var(--tipp); image-rendering: pixelated; }
.mod-form input[hidden] { display: none; }
.mod-protokoll li { display: grid; gap: 0; justify-items: start; }
#modBtn.mod-neu { border-image-source: url("/img/ui/btn-lilac.png"); color: var(--paper); text-shadow: 2px 2px 0 var(--wein-tief); }   /* offene Meldungen */
.mod-notiz { display: flex; gap: 6px; width: 100%; align-items: center; }
.mod-notiz input { flex: 1; min-width: 0; }
.mod-notiz input, .mod-melden input[type=text] { font: 400 var(--schrift)/30px var(--font); color: var(--ink); background: none; border-style: solid;
  border-width: 8px; border-image: url("/img/ui/field.png") 4 fill / 8px stretch; padding: 2px 6px; min-height: var(--tipp); image-rendering: pixelated; }
.fc-person > .mod-melden { order: 4; flex: 1 0 100%; }   /* Freunde & Clan (freunde.js): das Formular unter dem Eintrag */
.info-panel .mod-melden { padding-top: 0; }

/* ===== Im Spiel (Hof, Stadt, Karte): keine Balken – die Welt füllt das ganze Fenster, alles andere steckt im Menü links oben ===== */
body.game { padding: 0; }
body.game .top, body.game footer { display: none; }
body.game main { max-width: none; padding: calc(env(safe-area-inset-top) + 66px) 12px 24px; }
body.game.fullfarm main, body.game.fullmap main { padding: 0; }
body.game .farm-holder, body.game.fullmap .map-holder { top: 0; bottom: 0; }
.menu-btn, .menu { display: none; }
body.game .menu-btn { display: grid; place-items: center; position: fixed; z-index: 9; left: calc(env(safe-area-inset-left) + 8px); top: calc(env(safe-area-inset-top) + 8px);
  width: 54px; height: 50px; padding: 0; margin: 0; cursor: pointer; background: none;
  border-style: solid; border-width: 8px 8px 12px; border-image: url("/img/ui/btn-butter.png") 4 4 6 fill / 8px 8px 12px stretch; }
body.game .menu-btn[aria-expanded="true"] { border-image-source: url("/img/ui/btn-butter-down.png"); padding-top: 4px; }
.menu-btn .bars { display: block; width: 22px; height: 18px; background: url("/img/ui/menu-bars.png") 0 0 / 22px 18px no-repeat; }
body.game .menu:not([hidden]) { display: grid; gap: 6px; position: fixed; z-index: 9; margin: 0; left: calc(env(safe-area-inset-left) + 8px); top: calc(env(safe-area-inset-top) + 66px);
  width: min(420px, calc(100vw - 16px)); max-height: calc(100dvh - 80px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
.menu-top { display: flex; }
.menu .right-group { flex-wrap: wrap; gap: 6px; }
.menu .taler { color: var(--ink); }
.menu-here { display: grid; gap: 6px; justify-items: start; }
.menu-here:empty, .menu-foot:empty { display: none; }
.menu .hud-top { position: static; max-width: none; }
.menu .map-controls { position: static; flex-direction: row; gap: 4px; }
.menu .map-controls .btn { width: 48px; }
.menu-foot { padding-top: 6px; background: url("/img/ui/perf.png") repeat-x left top / 8px 4px; }
.menu-foot p { margin: 0; font-size: var(--schrift); line-height: 24px; }
/* was im Spiel draußen bleibt: Fenster, Bau-Leiste, Laden, Ladeanzeige, Hinweise – jetzt bis an den unteren Rand */
body.game .info-panel, body.game.fullfarm .info-panel, body.game.fullmap .info-panel { bottom: calc(8px + env(safe-area-inset-bottom)); }
body.game .edit-bar { bottom: calc(8px + env(safe-area-inset-bottom)); }
body.game .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
body.game .shop-chip { top: calc(env(safe-area-inset-top) + 10px); }
body.game .dev-badge { bottom: calc(8px + env(safe-area-inset-bottom)); }
body.game .dev-panel { top: calc(env(safe-area-inset-top) + 8px); max-height: calc(100dvh - 24px); }
body.game .map-legend { top: calc(env(safe-area-inset-top) + 66px); }
.hud-tut { position: fixed; z-index: 4; left: calc(env(safe-area-inset-left) + 70px); top: calc(env(safe-area-inset-top) + 8px); max-width: calc(100vw - 86px); }
body.game .osm-credit { bottom: calc(8px + env(safe-area-inset-bottom)); transition: opacity .8s; }
.osm-credit.gone { opacity: 0; pointer-events: none; }
/* Werkzeugleiste unten wie in Minecraft: nur Symbole in Messingfeldern, mittig, keine Beschriftung (steht im Tooltip) */
.hotbar { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom));
  display: flex; gap: 2px; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
.hotbar .btn { width: var(--feld); min-width: var(--feld); height: var(--feld); min-height: var(--feld); padding: 0; margin: 0; flex: none; font-size: var(--schrift-gross);
  border-width: 10px; border-image: url("/img/ui/slot.png") 5 fill / 10px stretch; }
.hotbar .btn:active:not(:disabled) { border-image-source: url("/img/ui/slot-on.png"); padding: 4px 0 0; }
.hotbar .btn[aria-pressed="true"], .hotbar .btn[aria-expanded="true"] { border-image-source: url("/img/ui/slot-on.png"); padding: 4px 0 0; }
.hotbar .btn span { display: none; }
.hotbar .btn canvas.icon { width: 24px; height: 24px; }
.hotbar .map-controls { display: contents; }
body.editing .hotbar { display: none; }
body.drinnen .hotbar { display: none; }   /* in Bahnhofshalle und Läden keine Leiste (stadt.js): sofort weg, beim Hinausgehen sofort wieder da */
body.game .info-panel, body.game.fullfarm .info-panel, body.game.fullmap .info-panel { bottom: calc(70px + env(safe-area-inset-bottom)); }
body.game.editing .info-panel { bottom: calc(8px + env(safe-area-inset-bottom)); }
body.game .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
body.game .osm-credit { bottom: calc(72px + env(safe-area-inset-bottom)); }
body.game .dev-badge { left: calc(env(safe-area-inset-left) + 8px); right: auto; top: calc(env(safe-area-inset-top) + 64px); bottom: auto; z-index: 8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 230px); }
@media (min-width: 900px) { body.game .dev-badge { max-width: 520px; } }
body.game .map-legend { left: calc(env(safe-area-inset-left) + 8px); }
.menu-btns { justify-content: flex-start; gap: 4px; }
.menu-btns .btn { margin: 0; }
.menu-btns .map-controls { display: contents; }
.menu-btns .map-controls .btn { width: 48px; }
/* Bau-Leiste wie in Minecraft: gleich große Felder, Symbol mittig, Anzahl (oder Preis) klein unten rechts */
.edit-bar .tools { gap: 2px; }
.edit-bar .tool { position: relative; min-width: 0; width: 56px; height: 56px; padding: 0; justify-content: center; }
.edit-bar .tool[aria-pressed="true"] { padding: 4px 0 0; }
.edit-bar .tool canvas.mini { width: 33px; height: 33px; }
.edit-bar .tool-count { position: absolute; right: 0; bottom: -6px; font-size: var(--schrift); line-height: 20px; color: var(--ink); font-weight: 700;
  text-shadow: 2px 0 0 var(--paper), -2px 0 0 var(--paper), 0 2px 0 var(--paper), 0 -2px 0 var(--paper); }
/* Kopf auf anderen Seiten: Vollbild-Knopf nur im Spiel (Menü), am Handy nur das Logo – sonst wird die Zeile zu breit */
body:not(.game) #fs, body:not(.game) #installieren { display: none; }
@media (max-width: 440px) { .top .brand { font-size: 0; gap: 0; } .top .right-group { gap: 6px; } }
/* Mehrere Geräte (geraete.js): Wechsel-Hinweis als schlichtes Overlay über dem angehaltenen Spiel, Geräteliste in den Einstellungen */
.geraet-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--schleier); }
.geraet-overlay[hidden] { display: none; }
.geraet-overlay.leer { background: var(--bg) url("/img/ui/bg.png") repeat; background-size: 64px 64px; }   /* ohne Standbild: nur die Tapete */
.geraet-overlay .card { width: min(420px, 100%); display: grid; justify-items: center; text-align: center; }
.geraet-overlay .card > h2:first-child { justify-self: stretch; justify-content: center; }
.geraet-overlay .btn { justify-self: center; }
.geraet-still { position: fixed; z-index: 0; pointer-events: none; filter: sepia(.35) brightness(.9); }
.geraete { display: grid; gap: 8px; margin: 8px 0; }
.geraete li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; padding: 2px 8px 4px;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; }
.geraete li.me { border-image-source: url("/img/ui/chip-butter.png"); }
.geraete li .note { grid-column: 1; }
.geraete li .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.geraete li strong { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.geraete .badge { margin-left: 0; white-space: nowrap; }
@media (max-width: 520px) { .geraete li { grid-template-columns: 1fr; } .geraete li .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; } }

/* Lager als Gesamtliste (habe.js): oben die Suche, darunter Auswahl und Ordnen nebeneinander; kleine Symbole groß genug */
.habe-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 10px; }
.habe-kopf input { grid-column: 1 / -1; }
.habe-liste canvas.mini { width: 33px; height: 33px; }

/* ===== Finger und Controller (gesten.js, pad.js) ===== */
/* Browser-Gesten, die im Spiel stören: Ziehen-zum-Aktualisieren, Gummiband, Seiten-Zoom, Doppeltipp-Zoom, Textauswahl und
   Kontextmenü beim langen Drücken. Fenster und Menü scrollen weiter (nur senkrecht), Leisten waagerecht. */
html.game, html.game body { overscroll-behavior: none; }
body.game { touch-action: none; -webkit-tap-highlight-color: transparent; }
@media (any-pointer: coarse) {   /* auch Touch-Laptops (Surface, Chromebook): Finger sind dort nicht die erste, aber eine Eingabe */
  body.game { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  body.game input, body.game textarea, body.game select { -webkit-user-select: text; user-select: text; }
}
button, .btn, a, .tool, .place, .swatch, .menu-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.game .menu, body.game .info-panel, body.game .dev-panel, body.game .legend-panel { touch-action: pan-y; overscroll-behavior: contain; }
body.game .tools, body.game .hotbar, body.game .outlook { touch-action: pan-x; overscroll-behavior: contain; }
/* sichere Ränder (Notch, abgerundete Ecken) auch links und rechts */
body.game main .info-panel, body.game.fullfarm main .info-panel, body.game.fullmap main .info-panel,
body.game .edit-bar { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); }
body.game .osm-credit { left: calc(8px + env(safe-area-inset-left)); }
body.game .hotbar { max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
/* Daumen: Knöpfe sind schon ≥ 44 px (Schließen 36 px mit größerer Trefferfläche); Textlinks in Listen bekommen am Touchgerät Höhe */
@media (pointer: coarse) {
  .deps li > a, .todo a, .dev-hits a { display: inline-block; min-height: 44px; padding: 7px 0; }
}
/* Tablet und Handy quer: Fenster als Seitenblatt rechts, die Welt bleibt daneben sichtbar (nur die Fenster der Ansicht, nicht die Karten-Ansicht) */
@media (pointer: coarse) and (min-width: 700px), (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  body.game main .info-panel, body.game.fullfarm main .info-panel, body.game.fullmap main .info-panel {
    left: auto; right: calc(8px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); bottom: auto;
    width: min(440px, 46vw); max-width: none; max-height: calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0; }
  body.game.editing main .info-panel { max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
/* Daumen-Stick: erscheint nur beim Berühren, dort wo der Daumen aufsetzt (Messing-Zahnkranz, dezent) */
.thumb-stick { position: fixed; z-index: 7; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: .72; }
.thumb-stick[hidden] { display: none; }
.thumb-ring { position: absolute; width: 102px; height: 102px; left: -51px; top: -51px; image-rendering: pixelated; }
.thumb-knob { position: absolute; width: 48px; height: 48px; left: -24px; top: -24px; image-rendering: pixelated; }
/* Ziel-Marker beim Antippen */
.tap-mark { position: fixed; z-index: 3; left: 0; top: 0; width: 45px; height: 27px; margin: -14px 0 0 -23px; pointer-events: none; image-rendering: pixelated; }
/* Lupe im Bau-Modus */
.loupe { position: fixed; z-index: 7; pointer-events: none; padding: 0; line-height: 0;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; }
.loupe[hidden] { display: none; }
.loupe canvas { display: block; image-rendering: pixelated; }
/* Controller und Fernbedienung (fokus.js): der Fokusrahmen sind vier Messingecken über allem (Bildpixel × 2), die dem gewählten
   Element folgen; das Element selbst bekommt keinen Umriss mehr. Auf der Karte zeigt ein Fadenkreuz, was A ansieht. */
.pad-focus, .pad-focus:focus-visible { outline: none !important; }
.fokus-rahmen { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; box-sizing: border-box; border: 12px solid transparent;
  border-image: url("/img/ui/fokus.png") 6 / 12px stretch; image-rendering: pixelated; will-change: transform;   /* Bild aus tools/make_ui.py (CSP: nur 'self') */
  animation: fokus-atem 1.6s steps(2, jump-none) infinite; }
.fokus-rahmen[hidden] { display: none; }
@keyframes fokus-atem { from { opacity: 1; } to { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .fokus-rahmen { animation: none; } }
/* Tastensymbole (tastenbild.js): Bildpixel × 2, mitten in der Zeile; folgen der zuletzt benutzten Eingabeart */
.taste { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; vertical-align: middle; line-height: 1; max-width: 100%; }
canvas.tb { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; flex: none; }
.tasten-hilfe { line-height: 32px; }
.tasten-hilfe .hilfe-teil, .tasten-legende .hilfe-teil { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }   /* schmal (160 %): bricht um statt überzulaufen */
.tasten-hilfe[hidden] { display: none; }
/* Belegung (belegung.js) */
body.belegung-seite main { max-width: 760px; }
.belegung .reiter, .einst-reiter, .dev-reiter { justify-content: flex-start; gap: 4px; margin: 6px 0 10px; }
.einst-kopf { justify-content: flex-start; margin: 6px 0 0; }   /* Einstellungen: „Zurück ins Spiel“ links über den Reitern */
.belegung .reiter .btn[aria-selected="true"], .einst-reiter .btn[aria-selected="true"], .dev-reiter .btn[aria-selected="true"] { border-image-source: url("/img/ui/btn-butter-down.png"); padding-top: 4px; }
.bel-abbildung { margin: 6px 0 10px; display: grid; justify-items: center; overflow: hidden; }
canvas.bel-bild { display: block; image-rendering: pixelated; max-width: 100%; height: auto !important; }
.bel-familien { justify-content: flex-start; gap: 4px; }
.bel-liste { display: grid; gap: 6px; margin: 6px 0; }
.bel-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: center; padding: 2px 8px 4px;
  border-style: solid; border-width: 6px 6px 8px; border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; }
.bel-zeile.fest { grid-template-columns: minmax(0, 1fr) auto auto; }
.bel-zeile.konflikt { border-image-source: url("/img/ui/chip-rose.png"); }
.bel-zeile.faengt { border-image-source: url("/img/ui/chip-butter.png"); }
.bel-zeile .btn { margin: 0; }
.bel-zeile > span:first-child { min-width: 0; }
.bel-tasten { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bel-kappe { min-width: 44px; }
.bel-regler { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px; gap: 0 10px; align-items: center; margin: 4px 0; }
.bel-regler .note { grid-column: 1 / -1; }
.bel-wert { text-align: right; white-space: nowrap; }
/* Ton (klang.js): Name und Wert in einer Zeile, der Schieber darunter über die ganze Breite (auch bei 320 px) */
.ton-regler { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; margin: 4px 0; }
.ton-regler input[type=range] { grid-column: 1 / -1; width: 100%; }
.bel-meldung:empty { display: none; }
@media (max-width: 520px) { .bel-zeile { grid-template-columns: minmax(0, 1fr) auto; } .bel-zeile > .btn { grid-column: 2; } .bel-zeile .bel-tasten { grid-column: 1 / -1; justify-content: flex-start; } }
html.pad body.fullmap .map-holder::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none;
  background: linear-gradient(var(--ink), var(--ink)) center / 2px 22px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 22px 2px no-repeat; }

/* „Bald geht's los“ ohne Freigabe (bald.js): nur Echti, Name, ein Satz – kein Spiel dahinter */
body.bald .right-group, body.bald footer { display: none; }
.bald-karte { display: grid; justify-items: center; text-align: center; padding: 24px 12px 14px; gap: 2px; }
canvas.bald-echti { width: 128px; height: 160px; image-rendering: pixelated; }
.bald-vorgemerkt { margin: 10px 0 0; font-weight: 700; }
.bald-unten { margin: 22px 0 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--wine); text-decoration: underline; cursor: pointer;
  display: inline-flex; align-items: center; min-height: var(--tipp); }   /* Textlink als Knopf: Tippfläche 44 px */
.mod-recht-discord { font-size: var(--schrift); }

/* ===== Geräte (formen.js): Bildschirmformen, Tastatur, Faltgeräte ===== */
/* iPhone quer bläht Text sonst auf (die Pixelschrift fiele vom Raster); Zoomen bleibt möglich */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Knöpfe mit hidden wirklich weg: .btn setzt display und schlüge sonst das hidden des Browsers (z. B. Vollbild auf dem iPhone, das es
   dort nicht gibt, oder „App installieren“, solange nichts angeboten wird) */
.btn[hidden] { display: none; }
/* schmale Handys (320 px) außerhalb des Spiels: die Knöpfe oben (Taler, Freunde, Wiki, Einstellungen, für Admins DEV und MOD) brechen
   um, statt die Seite breiter zu machen – sonst verkleinert das Handy die ganze Seite */
@media (max-width: 440px) { .top { flex-wrap: wrap; gap: 6px; } .top .right-group { flex-wrap: wrap; justify-content: flex-end; min-width: 0; row-gap: 4px; } }
/* Handy mit ein- und ausfahrender Adressleiste: Fenster nach der sichtbaren Höhe (dvh), sonst wie bisher (vh) */
@supports (height: 1dvh) {
  body.fullmap .info-panel { max-height: 46dvh; }
  body.fullfarm .info-panel { max-height: 58dvh; }
  .map-overlay .info-panel { max-height: 50dvh; }
}
/* Bildschirmtastatur, wo der Browser das Layout nicht selbst darüber schiebt (Safari): Fenster und Bau-Leiste rücken über die
   Tastatur, ihre Höhe bleibt im sichtbaren Teil (--tastatur misst formen.js) */
html.tastatur body.game main .info-panel, html.tastatur body.game .edit-bar { bottom: calc(8px + var(--tastatur, 0px)); top: auto;
  max-height: calc(100dvh - var(--tastatur, 0px) - 16px - env(safe-area-inset-top)); }
html.tastatur body.game .hotbar { visibility: hidden; }   /* läge unter der Tastatur */
html.tastatur body.game .toast { bottom: calc(24px + var(--tastatur, 0px)); }
/* Faltgeräte mit Scharnier (zwei Bildschirmteile): Fenster auf der zweiten Hälfte, die Welt und das Menü auf der ersten */
@media (horizontal-viewport-segments: 2) {
  body.game main .info-panel, body.game.fullfarm main .info-panel, body.game.fullmap main .info-panel {
    left: calc(env(viewport-segment-left 1 0, 50vw) + 8px); right: calc(8px + env(safe-area-inset-right)); width: auto; max-width: none;
    top: calc(8px + env(safe-area-inset-top)); bottom: auto; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  body.game .menu:not([hidden]) { width: min(420px, calc(env(viewport-segment-width 0 0, 50vw) - 16px)); }
}
@media (vertical-viewport-segments: 2) {
  body.game main .info-panel, body.game.fullfarm main .info-panel, body.game.fullmap main .info-panel {
    top: calc(env(viewport-segment-top 0 1, 50vh) + 8px); bottom: calc(8px + env(safe-area-inset-bottom)); left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right)); width: auto; max-width: none; max-height: none; }
  body.game .menu:not([hidden]) { max-height: calc(env(viewport-segment-height 0 0, 50vh) - 76px - env(safe-area-inset-top)); }
}

/* ===== Barrierefreiheit (System-Einstellungen) ===== */
/* „Mehr Kontrast“ (iOS, macOS, Android, Windows): Nebentexte in Tinte statt Braungrau, Fokus kräftiger, Hinweise ohne Durchscheinen */
@media (prefers-contrast: more) {
  :root { --soft: #3A2E26; --fokus-breite: 3px; --fokus-stil: solid; }
  .note, .menu-foot p, .place span, .tool-count { color: var(--ink); }
  .osm-credit { background: var(--paper); }
  .thumb-stick { opacity: 1; }
}
/* Kontrastdesign von Windows (erzwungene Farben): die Pixelrahmen sind Bilder, die der Browser stehen lässt – Systemschrift auf
   Messing oder Pergament wäre kaum zu lesen. Darum fallen die Bilder weg, Knöpfe, Felder und Fenster bekommen Ränder in Systemfarben;
   die Welt (Leinwand) und die kleinen Symbole bleiben, wie sie sind */
@media (forced-colors: active) {
  .btn, .menu-btn, .tool, .place, .swatch, input, select, textarea, .hotbar .btn, .hud-chip, .geraete li, .loupe {
    border-image: none !important; border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .card, .info-panel, .menu, .dev-panel, .legend-panel, .toast, .ortsschild, .edit-bar {
    border-image: none !important; border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .btn[aria-pressed="true"], .hotbar .btn[aria-pressed="true"], .tool[aria-pressed="true"] { border-color: Highlight; outline: 2px solid Highlight; }
  .btn:disabled { border-color: GrayText; color: GrayText; }
  canvas, img, .menu-btn .bars { forced-color-adjust: none; }
  :focus-visible, .pad-focus { outline: 3px solid Highlight !important; }
  h2 { background: none; border-image: none !important; }
}