/* MakerLand – Titelbildschirm, Hauptmenü, Pausemenü, Einstellungen und HUD im Look der Konzeptzeichnung
   (Pixelart: dunkelblaue Fenster mit hellem Rand, gelbe Auswahlleiste, Holzschilder am Wegweiser, orangefarbenes Titelschild).
   Wird nach style.css geladen und überschreibt dort nur das Aussehen.
   Alle Grafiken liegen in client/menue/ (siehe menue/LIESMICH.md). Wer eine Datei gleichen Namens austauscht, ändert den Look. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(wiki-design/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(wiki-design/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
/* Pixelschrift Jersey 10 (SIL OFL, lizenzen/Jersey10-OFL.txt): nur ein Schnitt, auch für „fett“ benutzt, damit der Browser nichts künstlich verdickt */
@font-face { font-family: "Jersey 10"; font-weight: 400 800; font-display: swap; src: url(menue/schrift/jersey-10-latin-400-normal.woff2) format("woff2"); }

:root {
  --stuebi-schwarz: #141414;
  --stuebi-gelb: #ffd400;
  --stuebi-weiss: #ffffff;
  --stuebi-flaeche: #f4f4f2;
  --stuebi-linie: #dedede;
  --stuebi-grau: #5b5b5b;
  --stuebi-titel: "Barlow Condensed", Bahnschrift, "Arial Narrow", sans-serif;
  --ink: var(--stuebi-schwarz);
  --muted: var(--stuebi-grau);
  --paper: var(--stuebi-weiss);
  --accent: var(--stuebi-gelb);
  --accent-dark: #e6be00;

  /* Farben aus der Konzeptzeichnung */
  --ml-pixel: "Jersey 10", "Barlow Condensed", system-ui, sans-serif;
  --ml-nacht: #0c1a33;      /* Fensterinneres */
  --ml-tief: #07101f;       /* Umrisse */
  --ml-rand: #5b8fd6;       /* heller Fensterrand */
  --ml-text: #eef3ff;
  --ml-leise: #a9bbdc;
  --ml-gelb: #ffc928;
  --ml-holz: #3a1c06;       /* Schrift auf dem Titelschild */
}

/* ---------- Bausteine ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.touch .nur-tasten { display: none !important; }
html:not(.touch) .nur-touch { display: none !important; }

/* Fenster: dunkelblau mit hellem Rand (menue/fenster.png, Ecken 26 px, Mitte gestreckt) */
.ml-fenster {
  position: relative; color: var(--ml-text);
  border: 22px solid transparent; border-radius: 0;
  border-image: url(menue/fenster.png) 26 fill / 22px stretch;
  background: none; padding: 34px 12px 10px; box-shadow: none;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45));
}
/* Titelschild aus Holz, mittig über der Oberkante */
.titelschild, .ml-fenster h2.titelschild {
  position: absolute; left: 50%; top: -48px; transform: translateX(-50%); z-index: 1;
  min-width: 220px; max-width: calc(100% + 20px); box-sizing: border-box; margin: 0; padding: 0 22px;
  height: 60px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 0 solid transparent; border-width: 18px 30px; border-image: url(menue/titelschild.png) 22 36 fill / 18px 30px stretch;
  font: 700 34px/1 var(--ml-pixel); letter-spacing: 1px; text-transform: uppercase; color: var(--ml-holz);
  text-shadow: 0 1px 0 rgba(255, 210, 140, .55);
}
.titelschild::after { display: none !important; }
/* × oben rechts im Fenster */
.fenster-zu {
  position: absolute; top: -12px; right: -12px; z-index: 2; width: 40px; height: 40px; padding: 0;
  border: 2px solid var(--ml-rand); border-radius: 6px; background: var(--ml-tief); color: var(--ml-text);
  font: 700 31px/1 var(--ml-pixel); cursor: pointer;
}
.fenster-zu:hover, .fenster-zu:focus-visible { background: var(--ml-gelb); color: var(--ml-tief); border-color: var(--ml-tief); outline: none; }

/* Leisten (Menüeinträge): dunkel, ausgewählt gelb (menue/leiste.png, menue/leiste-aktiv.png) */
.ml-liste { display: flex; flex-direction: column; gap: 6px; }
.ml-leiste, .ml-fenster button.primary {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; box-sizing: border-box; margin: 0;
  padding: 0 8px; border: 0 solid transparent; border-width: 12px 14px; border-radius: 0;
  border-image: url(menue/leiste.png) 24 26 fill / 12px 14px stretch; background: none;
  font: 500 25px/1.1 var(--ml-pixel); letter-spacing: .3px; text-align: left; text-decoration: none; text-transform: none;
  color: var(--ml-text); cursor: pointer; transition: none;
}
.ml-leiste:hover, .ml-leiste:focus, .ml-leiste[aria-selected="true"],
.ml-liste:not(:focus-within) .ml-leiste.haupt, .ml-leiste.haupt:not(.ml-liste .ml-leiste), .ml-fenster button.primary {
  border-image-source: url(menue/leiste-aktiv.png); color: var(--ml-tief); font-weight: 700; outline: none; box-shadow: none;
}
.ml-leiste:hover, .ml-leiste:focus-visible { filter: brightness(1.06); }
.ml-leiste:active { transform: translateY(1px); }
.ml-leiste:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
/* Tastatur: deutlicher Rahmen um die gewählte Leiste */
.ml-leiste:focus-visible { box-shadow: 0 0 0 3px var(--ml-tief), 0 0 0 5px var(--ml-gelb); }

/* Icons aus menue/icons/ (je ca. 86 × 80, verkleinert) */
.ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font: 800 17px/1 system-ui, sans-serif; text-transform: none;
  background: center / contain no-repeat;
}
.ico[data-ico]:not([data-ico="menue"]) { font-size: 0; color: transparent; }
.ico[data-ico="spielen"]       { background-image: url(menue/icons/gluehbirne.png); }
.ico[data-ico="fortfahren"]    { background-image: url(menue/icons/werkzeuge.png); }
.ico[data-ico="einstellungen"] { background-image: url(menue/icons/zahnrad.png); }
.ico[data-ico="extras"]        { background-image: url(menue/icons/gruppe.png); }
.ico[data-ico="weiter"]        { background-image: url(menue/icons/play.png); }
.ico[data-ico="hilfe"], .ico[data-ico="steuerung"] { background-image: url(menue/icons/gamepad.png); }
.ico[data-ico="wiki"]          { background-image: url(menue/icons/buch.png); }
.ico[data-ico="tools"]         { background-image: url(menue/icons/werkzeuge.png); }
.ico[data-ico="info"]          { background-image: url(menue/icons/stern.png); }
.ico[data-ico="waende"]        { background-image: url(menue/icons/werkzeuge.png); }
.ico[data-ico="figur"]         { background-image: url(menue/icons/figur.png); }
.ico[data-ico="haus"]          { background-image: url(menue/icons/haus.png); }
.ico[data-ico="vollbild"], .ico[data-ico="anzeige"] { background-image: url(menue/icons/monitor.png); }
.ico[data-ico="audio"]         { background-image: url(menue/icons/lautsprecher.png); }
.ico[data-ico="barriere"]      { background-image: url(menue/icons/barrierefrei.png); }

/* Formularfelder auf dunklem Grund */
.ml-fenster .field > span, .ml-fenster .field > legend {
  font: 700 23px/1 var(--ml-pixel); letter-spacing: .3px; color: var(--ml-gelb); text-transform: none; margin-bottom: 8px;
}
.ml-fenster .field input {
  background: var(--ml-tief); color: var(--ml-text); border: 2px solid var(--ml-rand); border-radius: 4px;
  font: 500 23px/1.2 var(--ml-pixel); padding: 10px 12px;
}
.ml-fenster .field input::placeholder { color: #6f84aa; }
.ml-fenster .field input:focus { outline: none; border-color: var(--ml-gelb); box-shadow: 0 0 0 3px rgba(255, 201, 40, .3); }
.ml-fenster .fineprint { color: var(--ml-leise); text-align: left; }
.ml-fenster p { line-height: 1.5; }
.ml-fenster kbd {
  display: inline-block; min-width: 1.6em; padding: 2px 6px; margin: 0 2px 2px 0; text-align: center;
  background: var(--ml-tief); color: var(--ml-text); border: 1.5px solid var(--ml-rand); border-bottom-width: 3px; border-radius: 4px;
  font: 500 18px/1.2 var(--ml-pixel);
}
.ml-fenster td { border-bottom: 1px solid rgba(91, 143, 214, .25); color: var(--ml-text); }
.ml-fenster a { color: var(--ml-gelb); }

/* ---------- Titelbildschirm ---------- */
#titel {
  z-index: 51; flex-direction: column; justify-content: flex-start; gap: 0; cursor: pointer; overflow: hidden;
  padding: max(3vh, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 20, 50, .05) 50%, rgba(8, 20, 50, .55)), url(menue/titelbild.jpg) center 70% / cover no-repeat, #2a5ab0;
}
.titel-logo { margin: 0; line-height: 0; }
.titel-logo img { display: block; width: min(640px, 82vw, 90vh); height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); animation: logo-schweben 4s ease-in-out infinite; }
@keyframes logo-schweben { 50% { transform: translateY(-6px); } }
.titel-untertitel {
  margin: -6px 0 0; font: 700 clamp(20px, 3vw, 28px)/1 var(--ml-pixel); color: #fff; letter-spacing: .5px;
  text-shadow: 2px 0 var(--ml-tief), -2px 0 var(--ml-tief), 0 2px var(--ml-tief), 0 -2px var(--ml-tief), 2px 2px var(--ml-tief);
}
.titel-druecken {
  margin: auto 0 4vh; padding: 10px 26px; font: 700 clamp(28px, 4.6vw, 44px)/1 var(--ml-pixel); color: var(--ml-gelb); text-transform: uppercase; letter-spacing: 1px;
  background: rgba(7, 16, 31, .78); border: 3px solid var(--ml-rand); border-radius: 6px;
  animation: blinken 1.2s steps(2, jump-none) infinite;
}
@keyframes blinken { 50% { color: #fff; } }
.titel-fuss { margin: 0; font: 500 17px/1.3 var(--ml-pixel); color: #fff; text-shadow: 0 1px 3px #000; text-align: center; }
@media (prefers-reduced-motion: reduce) { .titel-logo img, .titel-druecken { animation: none; } }

/* ---------- Hauptmenü ---------- */
#login.startmenue {
  display: grid; align-items: center; justify-items: center; gap: 8px 32px; overflow-y: auto;
  grid-template-columns: minmax(280px, 360px) minmax(0, 560px); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo logo" "schilder fenster" "fuss fuss";
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(7, 16, 31, .2), rgba(7, 16, 31, .55)), url(menue/hintergrund.jpg) center / cover no-repeat, var(--ml-nacht);
}
#login.startmenue.hidden { display: none !important; }
.hm-logo { grid-area: logo; display: block; width: min(440px, 60vw); height: auto; max-height: 21vh; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }

/* Wegweiser: Holzpfosten mit vier Schildern */
.wegweiser { grid-area: schilder; position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 6px 0 70px; justify-self: start; }
.wegweiser-pfosten { position: absolute; left: 36px; top: -16px; bottom: 6px; width: 46px; height: calc(100% + 10px); object-fit: fill; z-index: 0; pointer-events: none; }
.wegweiser-katze { position: absolute; left: 92px; bottom: 0; width: 70px; height: auto; pointer-events: none; }
.schild {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; box-sizing: border-box;
  margin: 0; padding: 0 8px; border: 0 solid transparent; border-width: 16px 26px; border-radius: 0;
  border-image: url(menue/schild-gelb.png) 18 30 fill / 16px 26px stretch; background: none;
  font: 700 36px/1 var(--ml-pixel); letter-spacing: 1px; text-transform: uppercase; color: #fff; text-align: left; cursor: pointer;
  text-shadow: 2px 0 var(--ml-tief), -2px 0 var(--ml-tief), 0 2px var(--ml-tief), 0 -2px var(--ml-tief), 2px 2px var(--ml-tief), -2px 2px var(--ml-tief);
  transition: transform .12s ease-out; transform-origin: left center;
}
.schild.blau  { border-image-source: url(menue/schild-blau.png); }
.schild.gruen { border-image-source: url(menue/schild-gruen.png); }
.schild.rot   { border-image-source: url(menue/schild-rot.png); }
.schild.grau  { border-image-source: url(menue/schild-blau.png); --grau: grayscale(1) brightness(.95); filter: var(--grau); }
.schild.lila  { border-image-source: url(menue/schild-blau.png); --lila: hue-rotate(45deg) saturate(1.1); filter: var(--lila); }
.schild.lila:hover, .schild.lila:focus-visible { filter: var(--lila) brightness(1.1) drop-shadow(0 0 6px rgba(255, 220, 90, .8)); }
.wegweiser:has(#hm-lehrer:not(.hidden)) { gap: 4px; }
.wegweiser:has(#hm-lehrer:not(.hidden)) .schild { min-height: 58px; }
.schild.orange { border-image-source: url(menue/schild-rot.png); --orange: hue-rotate(28deg) saturate(1.15) brightness(1.05); filter: var(--orange); }
.schild.orange:hover, .schild.orange:focus-visible { filter: var(--orange) brightness(1.1) drop-shadow(0 0 6px rgba(255, 220, 90, .8)); }
.schild.grau:hover, .schild.grau:focus-visible { filter: var(--grau) brightness(1.1) drop-shadow(0 0 6px rgba(255, 220, 90, .8)); }
.schild:nth-of-type(odd)  { transform: rotate(-1.2deg); }
.schild:nth-of-type(even) { transform: rotate(1deg); }
.schild .ico { width: 36px; height: 36px; }
.schild-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.schild-text small { font-size: 18px; letter-spacing: .3px; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schild:hover, .schild:focus-visible, .schild[aria-expanded="true"] { transform: translateX(14px) rotate(0); filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 220, 90, .8)); outline: none; }
.schild[aria-expanded="true"]::after { content: "▶"; position: absolute; right: -4px; color: var(--ml-gelb); font-size: 20px; }

/* Fenster rechts (Spielen, Extras) */
.hm-fenster { grid-area: fenster; width: 100%; max-height: calc(100% - 40px); overflow: visible; margin-top: 40px; animation: menue-auf .14s ease-out; }
.hm-fenster > form, .hm-fenster > nav { max-height: calc(100dvh - 300px); overflow-y: auto; padding: 0 4px; }
#hm-abenteuer-fenster { max-width: 460px; }
#login-go { width: 100%; min-height: 62px; font-size: 32px; margin-top: 8px; justify-content: center; }
#login-go .ico { width: 34px; height: 34px; }

/* Figur im Fenster „Spielen“ */
.ml-fenster #figure-grid .fe-mini { background: #18305a; border: 2px solid var(--ml-rand); border-radius: 4px; }
.ml-fenster #figure-grid .fe-knopf {
  min-height: 48px; padding: 0 8px; border: 0 solid transparent; border-width: 12px 14px; border-radius: 0;
  border-image: url(menue/leiste.png) 24 26 fill / 12px 14px stretch; background: none; box-shadow: none;
  font: 500 22px/1 var(--ml-pixel); color: var(--ml-text); text-transform: none; letter-spacing: .3px;
}
.ml-fenster #figure-grid .fe-knopf.fe-haupt { border-image-source: url(menue/leiste-aktiv.png); color: var(--ml-tief); font-weight: 700; }
.ml-fenster #figure-grid .fe-knopf:hover { filter: brightness(1.12); }

.hm-fuss { grid-area: fuss; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.start-fuss { margin: 0; color: #fff; font: 500 17px/1.3 var(--ml-pixel); text-shadow: 0 1px 3px #000; text-align: left; }
.start-fuss a { color: var(--ml-gelb); }
.tasten-hinweis {
  display: flex; gap: 18px; margin: 0; padding: 6px 14px; flex: none;
  background: rgba(7, 16, 31, .82); border: 2px solid var(--ml-rand); border-radius: 8px;
  font: 700 21px/1 var(--ml-pixel); color: var(--ml-text);
}
.tasten-hinweis span { display: inline-flex; align-items: center; gap: 6px; }
.tasten-hinweis img { width: 26px; height: 26px; }

/* ---------- Einstellungen ---------- */
#einstellungen { background: rgba(7, 16, 31, .55); z-index: 62; }
.einst-karte { width: min(780px, 100%); max-height: calc(100dvh - 70px); margin-top: 40px; display: flex; flex-direction: column; padding-bottom: 12px; }
.einst-bereiche { display: grid; grid-template-columns: 220px 1fr; gap: 14px; min-height: 0; flex: 1; }
.einst-reiter { align-self: start; }
.einst-inhalt {
  min-height: 300px; overflow-y: auto; padding: 4px 16px 12px;
  background: rgba(7, 16, 31, .55); border: 2px solid rgba(91, 143, 214, .45); border-radius: 6px;
}
.einst-zeile { padding: 0; border: 0; }
.einst-zeile h3 { margin: 12px 0 8px; font: 700 25px/1 var(--ml-pixel); color: var(--ml-gelb); text-transform: none; letter-spacing: .3px; }
.einst-zeile .ml-leiste { margin-top: 8px; }
.einst-schalter { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.einst-schalter input { width: 22px; height: 22px; accent-color: var(--ml-gelb); flex: none; }
.einst-regler { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.einst-regler input { width: 100%; accent-color: var(--ml-gelb); height: 28px; }
.einst-regler input:disabled { opacity: .4; }
.einst-regler select {
  width: 100%; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 15px; color: #141414;
  background: #fffdf3; border: 2px solid #141414; border-radius: 0; accent-color: var(--ml-gelb);
}
.einst-regler select:focus-visible { outline: 3px solid var(--ml-gelb); outline-offset: 2px; }
.einst-tasten { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.einst-tasten td { padding: 8px 4px; font-size: 15px; vertical-align: middle; }
.einst-tasten td:last-child { text-align: right; }
.tasten-bild { width: 26px; height: 26px; vertical-align: middle; margin-left: 4px; }
#einst-zu { margin-top: 12px; justify-content: center; }

/* ---------- Karten: Hilfe, Über, Vollbild-Frage, Laden ---------- */
.help-card.ml-fenster { width: min(620px, 100%); max-height: calc(100dvh - 70px); margin-top: 40px; overflow: visible; padding: 36px 14px 8px; display: flex; flex-direction: column; }
.help-card.ml-fenster > .fenster-inhalt { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
#help, #ueber { background: rgba(7, 16, 31, .55); z-index: 64; }
#help .ml-leiste.haupt, #ueber .ml-leiste.haupt { margin-top: 14px; justify-content: center; }
#loading { background: linear-gradient(rgba(7, 16, 31, .5), rgba(7, 16, 31, .5)), url(menue/titelbild.jpg) center 70% / cover no-repeat, var(--ml-nacht); }
.loading-card.ml-fenster { width: min(420px, 100%); padding: 18px 12px 8px; }
.bar { height: 14px; border-radius: 3px; background: var(--ml-tief); border: 2px solid var(--ml-rand); overflow: hidden; }
#loading-bar { background: var(--ml-gelb); border-radius: 0; }
#loading-text { color: var(--ml-text); font: 700 23px/1.2 var(--ml-pixel); text-transform: none; letter-spacing: .3px; }

/* ---------- HUD ---------- */
.hud-brand {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px;
  background: var(--stuebi-schwarz); color: var(--stuebi-weiss); text-shadow: none;
  font: 800 19px/1 var(--stuebi-titel); text-transform: uppercase; letter-spacing: .5px;
}
.hud-brand img { height: 28px; width: auto; display: block; }
.chip, #hud button {
  background: rgba(7, 16, 31, .85); color: var(--stuebi-weiss); border: 0; border-radius: 0;
  min-height: 34px; padding: 6px 12px; font-size: 13.5px;
}
#hud-room { box-shadow: inset 4px 0 0 var(--ml-gelb); padding-left: 14px; }
#hud button.icon { width: 34px; height: 34px; }
#hud button:hover { background: var(--ml-tief); color: var(--ml-gelb); }
#hud button.menue-knopf {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 8px;
  background: var(--ml-gelb); color: var(--ml-tief); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ml-tief);
  font: 700 23px/1 var(--ml-pixel); letter-spacing: .5px;
}
#hud button.menue-knopf:hover, #hud button.menue-knopf[aria-expanded="true"] { background: var(--ml-tief); color: var(--ml-gelb); }
#hud button.menue-knopf .ico { width: 22px; height: 22px; }
#hint, .msg, #chat-input { border-radius: 0; }
#hint b, .msg .who { color: var(--stuebi-gelb); }
#toast { border-radius: 0; border-left: 6px solid var(--ml-gelb); }

/* Gelbe Hauptknöpfe außerhalb der Menüs (Agentenfenster usw.) */
button.primary {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px;
  font: 800 19px/1 var(--stuebi-titel); letter-spacing: .5px; text-transform: uppercase;
  color: var(--stuebi-schwarz); background: var(--stuebi-gelb); border: 2px solid var(--stuebi-schwarz); border-radius: 0;
}
button.primary:hover { background: var(--stuebi-schwarz); color: var(--stuebi-gelb); }
#musik-pop .st-knopf {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  font: 600 21px/1 var(--ml-pixel); color: var(--ml-text); background: var(--ml-tief);
  border: 2px solid var(--ml-rand); border-radius: 4px; cursor: pointer;
}
#musik-pop .st-knopf:hover { background: var(--ml-gelb); color: var(--ml-tief); }

/* ---------- Pausemenü ---------- */
#spielmenue { background: rgba(7, 16, 31, .5); z-index: 55; }
.menue-karte { width: min(400px, 100%); max-height: calc(100dvh - 70px); margin-top: 40px; overflow: visible; display: flex; flex-direction: column; animation: menue-auf .14s ease-out; }
@keyframes menue-auf { from { transform: translateY(8px); opacity: 0; } }
.menue-liste { overflow-y: auto; padding: 2px; }
#spielmenue .menue-liste #btn-leave { display: flex; }   /* style.css blendet btn-leave auf dem Handy aus, im Menü soll er bleiben */
.menue-fuss { margin: 8px 0 0; padding: 0 4px; color: var(--ml-leise); font: 500 17px/1.3 var(--ml-pixel); }

/* ---------- Handy und Tablet ---------- */
@media (max-width: 720px), (max-height: 520px) {
  #login.startmenue {
    grid-template-columns: minmax(0, 340px); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "logo" "schilder" "." "fuss"; align-content: start; gap: 10px;
  }
  .hm-logo { width: min(300px, 80vw); max-height: 20vh; }
  .wegweiser { justify-self: center; padding-bottom: 66px; }
  .schild { min-height: 58px; font-size: 31px; }
  /* Fenster öffnet über dem ganzen Bildschirm */
  .hm-fenster {
    position: fixed; z-index: 3; left: 8px; right: 8px; top: max(52px, calc(env(safe-area-inset-top) + 44px)); bottom: max(8px, env(safe-area-inset-bottom));
    width: auto; max-width: none !important; max-height: none; margin: 0; display: flex; flex-direction: column;
  }
  .hm-fenster:not(.hidden) ~ .hm-fuss, #login:has(.hm-fenster:not(.hidden)) .start-musik { visibility: hidden; }
  #login:has(.hm-fenster:not(.hidden))::before { content: ""; position: fixed; inset: 0; z-index: 2; background: rgba(7, 16, 31, .6); }
  .hm-fenster > form, .hm-fenster > nav { max-height: none; flex: 1; }
  .hm-fuss { justify-content: center; }
  .start-fuss { text-align: center; }

  #einstellungen, #spielmenue, #help, #ueber { padding: 8px; align-items: stretch; }
  .einst-karte, .menue-karte, .help-card.ml-fenster { width: 100%; max-height: none; height: calc(100% - 48px); margin-top: 48px; }
  .einst-bereiche { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; }
  .einst-reiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; }
  .einst-reiter .ml-leiste { width: auto; min-height: 46px; padding: 0 2px; gap: 6px; font-size: 21px; }
  .einst-reiter .ico { width: 24px; height: 24px; }
  #einst-tab-barriere { font-size: 17px; letter-spacing: 0; }
  .einst-inhalt { min-height: 0; }
  .einst-regler { grid-template-columns: 1fr; gap: 2px; }
  .menue-liste { flex: 1; }
  .menue-liste .ml-leiste { min-height: 56px; font-size: 27px; }

  .hud-left, .hud-right { flex-wrap: nowrap; min-width: 0; }
  .hud-left { flex: 1 1 auto; }
  .hud-right { flex: none; }
  #hud-room { min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #hud-online { display: none; }
  .hud-brand { display: inline-flex; padding: 3px; font-size: 0; gap: 0; }
  #hud button.menue-knopf { min-height: 40px; }
  #hud button.icon { width: 40px; height: 40px; }
  /* Platz für den Musik-Knopf: auf dem Touchscreen zoomt man mit zwei Fingern, die Knöpfe − + sind dort entbehrlich */
  html.touch #btn-zoom-out, html.touch #btn-zoom-in { display: none; }
}
/* Handy quer: Schilder neben dem Logo */
@media (max-height: 520px) and (min-width: 600px) {
  #login.startmenue { grid-template-columns: minmax(0, 300px) minmax(0, 300px); grid-template-rows: 1fr auto; grid-template-areas: "logo schilder" "fuss fuss"; align-content: center; }
  .hm-logo { max-height: 40vh; }
  .wegweiser { gap: 6px; padding-bottom: 8px; }
  .wegweiser-katze { display: none; }
  .schild { min-height: 50px; font-size: 27px; border-width: 12px 22px; }
  .tasten-hinweis { display: none; }
}

/* ---------- Musik: Knopf 🔊 (Titel, Hauptmenü oben rechts, HUD) und kleines Fenster darunter ---------- */
.musik-knopf.aus { opacity: .7; }
.start-musik {
  position: absolute; z-index: 5;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 1;
  background: var(--ml-tief); color: var(--ml-text); border: 2px solid var(--ml-rand); border-radius: 6px; cursor: pointer;
}
.start-musik:hover, .start-musik[aria-expanded="true"] { color: var(--ml-gelb); border-color: var(--ml-gelb); }
#musik-pop {
  position: fixed; z-index: 70; width: 240px; max-width: calc(100vw - 16px); box-sizing: border-box;
  display: grid; gap: 10px; padding: 12px;
  background: var(--ml-nacht); color: var(--ml-text);
  border: 2px solid var(--ml-rand); border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
#musik-pop.hidden { display: none; }
#musik-pop .st-knopf { min-height: 44px; }
#musik-pop .st-knopf[aria-pressed="false"] { background: var(--ml-gelb); color: var(--ml-tief); }
.musik-pop-regler { display: grid; gap: 4px; font: 500 18px/1.2 var(--ml-pixel); }
.musik-pop-regler span { display: flex; justify-content: space-between; }
.musik-pop-regler input { width: 100%; height: 32px; margin: 0; accent-color: var(--ml-gelb); }
.musik-pop-regler input:disabled { opacity: .4; }

/* ---------- Frage nach Vollbild beim Start ---------- */
#vollbild-frage { background: rgba(7, 16, 31, .6); z-index: 66; }
.vf-karte.ml-fenster { width: min(460px, 100%); }
.vf-schritte { margin: 0 0 12px; padding-left: 1.4em; line-height: 1.55; }
.vf-schritte li { margin-bottom: 4px; }
.vf-knoepfe { display: grid; gap: 8px; margin: 16px 0 8px; }
.vf-knoepfe .ml-leiste { justify-content: center; }
.vf-karte .fineprint { margin: 4px 0 0; }

/* Tools aus dem Hauptmenü: Werkzeug-Auswahl über dem ganzen Bildschirm (Kopfzeile mit ✕ kommt aus dem Werkzeug) */
.hm-tools-fenster { position: fixed; inset: 0; z-index: 60; background: #111; }
.hm-tools-fenster iframe { width: 100%; height: 100%; border: 0; display: block; }
.hm-tools-fenster .fenster-zu { top: 10px; right: 10px; }

/* ---------- Intro (js/intro.js) ---------- */
#intro {
  position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .6s;
}
#intro.aus { opacity: 0; }
#intro.breit #intro-buehne { height: min(100vw * 9 / 16, 80vh, 100vh - 110px); width: min(100vw, (100vh - 110px) * 16 / 9); }
.intro-logo { position: absolute; left: 50%; top: 5%; width: min(38%, 520px); transform: translateX(-50%) scale(.85); opacity: 0; animation: intro-logo 1.4s .8s ease-out forwards; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); pointer-events: none; }
@keyframes intro-logo { to { opacity: 1; transform: translateX(-50%) scale(1); } }
#intro-buehne { position: relative; width: 100vw; height: min(100vw / 2.4, 78vh, 100vh - 120px); overflow: hidden; }
.intro-szene {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s;
  background-size: cover; background-repeat: no-repeat; background-position: var(--von) 50%;
  animation: intro-fahrt linear forwards;
}
.intro-szene.da { opacity: 1; }
@keyframes intro-fahrt {
  from { background-position: var(--von) 50%; transform: scale(1); }
  to { background-position: var(--bis) 50%; transform: scale(var(--zoom)); }
}
.intro-szene.hell.da { animation-name: intro-fahrt, intro-aufwachen; }
@keyframes intro-aufwachen { from { filter: brightness(.35); } 40% { filter: brightness(1.25); } to { filter: brightness(1); } }
.intro-szene.teile { display: flex; align-items: center; justify-content: center; gap: 4vw; background: radial-gradient(#1b2c4f, #05080f 75%); }
.intro-szene.teile img { height: 70%; width: auto; max-width: 28vw; object-fit: contain; border-radius: 6px; opacity: 0; transform: translateY(20px) scale(.9); animation: intro-teil .7s ease-out forwards; }
@keyframes intro-teil { to { opacity: 1; transform: none; } }
#intro-text {
  margin: 3vh 16px 0; min-height: 2.4em; max-width: 900px; text-align: center;
  font: 700 clamp(20px, 3.2vw, 34px)/1.2 var(--ml-pixel); color: #fff; letter-spacing: .5px;
  text-shadow: 2px 0 var(--ml-tief), -2px 0 var(--ml-tief), 0 2px var(--ml-tief), 0 -2px var(--ml-tief);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s;
}
#intro-text.da { opacity: 1; transform: none; }
#intro-text.schluss { color: var(--ml-gelb); font-size: clamp(28px, 5vw, 56px); }
#intro-weg {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 16px;
  font: 700 18px/1 var(--ml-pixel); color: #fff; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; padding: 8px 12px; cursor: pointer;
}
#intro-weg:hover, #intro-weg:focus-visible { background: rgba(255, 255, 255, .25); }
#intro-tipp { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); margin: 0; font: 15px/1 system-ui, sans-serif; color: rgba(255, 255, 255, .45); }
@media (max-height: 480px) { #intro-tipp { display: none; } #intro-text { margin-top: 2vh; } }
@media (prefers-reduced-motion: reduce) {
  .intro-szene { animation: none; }
  .intro-szene.teile img { animation: none; opacity: 1; transform: none; }
}