/* MAD42 · Der Parcours · Testseite */
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Light.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Regular.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Bold.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
:root {
  --black: #0E0E0F; --g950: #161618; --g900: #1F2023; --g800: #2A2B2F; --g700: #3A3B40;
  --g50: #F4F4F5; --g300: #A1A4AB; --g500: #6B6E76; --accent: #FF6A1A; --accent-hover: #FF8242;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --gutter: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--g50); font-family: "Montserrat", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.fx, .fx body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.fx body { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--g300); }
.a { color: var(--accent); }
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; background-image: var(--grain); background-size: 220px; opacity: .045; }

/* Loader */
.loader { display: none; }
.is-loading .loader, .loader.is-leaving { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #050505 url(bilder/ladebild-kurve.jpg) center / cover no-repeat; }
/* Stufe 17c: Bild hinter dem Ladebildschirm (große Kurve bei Nacht), abgedunkelt, damit Zähler, Tastatur und Text lesbar bleiben */
.loader::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.7) 45%, rgba(5,5,5,.82) 100%); pointer-events: none; }
.loader > * { position: relative; }
.loader .count { font-weight: 300; font-size: clamp(72px, 12vw, 150px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow: hidden; }
/* Stufe 17c: Zwischeninfo im Ladebildschirm – Tastatur-Outlines, Legende, wechselnder Hinweis */
.ld-mitte { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(860px, calc(100vw - 2 * var(--gutter))); padding-bottom: 60px; }
.ld-keys { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.ld-kb { width: min(760px, 100%); height: auto; display: block; }
.ld-kb .k rect { fill: none; stroke: var(--g700); stroke-width: 1.2; }
.ld-kb .k text { fill: var(--g500); font-family: var(--mono); text-anchor: middle; letter-spacing: .02em; }
.ld-kb .k.hl rect { stroke: var(--accent); stroke-width: 1.6; fill: rgba(255,106,26,.10); }
.ld-kb .k.hl text { fill: var(--accent); }
.ld-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; color: var(--g500); text-transform: none; letter-spacing: .06em; }
.ld-legende b { font-weight: 400; color: var(--accent); margin-right: 8px; text-transform: uppercase; letter-spacing: .14em; }
.ld-tipp { margin: 0; max-width: 640px; min-height: 2.6em; text-align: center; font-size: 15px; line-height: 1.5; color: var(--g300); opacity: 0; transition: opacity .5s; }
.ld-tipp.is-on { opacity: 1; }
.touch .ld-keys { display: none; }
@media (max-height: 700px) { .loader .count { font-size: 64px; } .ld-mitte { gap: 14px; } .ld-kb { width: min(560px, 100%); } }
.loader .count span { display: inline-block; }
.ld-meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; display: flex; justify-content: space-between; }

/* Welt */
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; }
.calm #world, .calm .speed, .calm .touchpad, .calm .hint { display: none !important; }

/* HUD */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: flex-start; padding: 20px var(--gutter); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud h1 { margin: 0; font-weight: 400; font-size: 12px; }
.hud h1 .brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; white-space: nowrap; }
.hud-l { flex: 0 0 auto; width: 210px; }   /* Stufe 17c: Logo führt zur Startseite wie auf allen Seiten */
.hud h1 .brand:hover .a { color: var(--accent); }
.hud-logo { height: 18px; width: auto; opacity: .85; display: block; }
.hint { margin: 8px 0 0; color: var(--g300); }
.hint-touch { display: none; }
.touch .hint-keys { display: none; } .touch .hint-touch { display: block; }
.pill { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--g700); border-radius: 999px; color: var(--g50); text-decoration: none; background: rgba(14,14,15,.6); transition: border-color .2s, color .2s; }
.pill:hover { border-color: var(--accent); color: var(--accent); }
.hud-r { display: flex; gap: 8px; align-items: flex-start; }
button.pill { font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.calm .pill.sound { display: none; }
@media (max-width: 520px) { .hud-r { flex-direction: column; align-items: flex-end; } html.touch .speed { top: 178px; } }
.speed { position: fixed; right: var(--gutter); bottom: 22px; z-index: 30; pointer-events: none; }
.speed b { font-weight: 400; font-size: 28px; color: var(--g50); letter-spacing: 0; margin-right: 4px; font-variant-numeric: tabular-nums; }
.touch .speed { bottom: auto; top: 76px; }

/* Stationen als Karte */
.fx .stations { position: fixed; left: 50%; bottom: 28px; z-index: 35; width: min(520px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%); pointer-events: none; }
.fx .calm-intro, .fx .calm-title { display: none; }
.fx .station { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px); transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s var(--ease), visibility 0s .5s; visibility: hidden; }
.fx .station.is-open { opacity: 1; transform: none; filter: none; visibility: visible; pointer-events: auto; transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s var(--ease); }
.station { padding: 26px 28px 28px; background: linear-gradient(160deg, rgba(31,32,35,.94), rgba(22,22,24,.97)); border: 1px solid var(--g800); border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.6); overflow: hidden; position: relative; }
.station::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.station h2 { margin: 10px 0 8px; font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; line-height: 1.1; }
.station p { margin: 0 0 18px; color: var(--g300); font-size: 16px; line-height: 1.6; }
.station .tag { display: inline-block; padding: 7px 12px; border: 1px solid var(--g700); border-radius: 999px; }
.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--g950); border: 1px solid var(--g700); color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .2s, color .2s, box-shadow .3s; }
.btn:hover, .btn:focus-visible { border-color: var(--accent); color: var(--accent-hover); box-shadow: 0 0 24px rgba(255,106,26,.25); } /* Stufe 11: Orange nur als Linie und Text */
.touch.fx .stations { bottom: 190px; }

/* Ruhige Fassung */
.calm .stations { max-width: 1100px; margin: 0 auto; padding: 110px var(--gutter) 80px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.calm .calm-intro, .calm .calm-title { grid-column: 1 / -1; margin: 0; }
.calm .calm-title { font-size: clamp(36px, 6vw, 72px); letter-spacing: -.03em; margin-bottom: 20px; }
.calm .hud { position: absolute; }

/* Touch-Steuerung */
.touchpad { display: none; }
.touch.fx .touchpad { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 180px; z-index: 32; pointer-events: none; }
.stick { position: absolute; left: 20px; bottom: 28px; width: 128px; height: 128px; border-radius: 50%; border: 1px solid var(--g700); background: rgba(22,22,24,.55); pointer-events: auto; touch-action: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--g800); border: 1px solid var(--accent); box-shadow: 0 0 18px rgba(255,106,26,.35); }
.pedals { position: absolute; right: 16px; bottom: 28px; display: flex; gap: 10px; pointer-events: auto; }
.pedal { touch-action: none; font: 700 13px "Montserrat", sans-serif; color: var(--g50); background: rgba(22,22,24,.7); border: 1px solid var(--g700); border-radius: 18px; width: 76px; height: 96px; -webkit-tap-highlight-color: transparent; }
.pedal.gas { border-color: var(--accent); color: var(--accent); height: 118px; }
.pedal.is-down { background: var(--g800); box-shadow: inset 0 0 0 2px var(--accent); }
.pedal.reset { position: absolute; right: 16px; bottom: 156px; width: 56px; height: 40px; border-radius: 999px; pointer-events: auto; font: 400 11px var(--mono); }

/* Garage (Stufe 5) */
.calm-garage { grid-column: 1 / -1; margin: -8px 0 12px; color: var(--g300); font-size: 16px; }
.fx .calm-garage { display: none; }
.garage { position: fixed; left: 50%; top: 84px; z-index: 36; width: min(1080px, calc(100% - 2 * var(--gutter))); transform: translate(-50%, -20px); opacity: 0; filter: blur(6px);
  padding: 22px 24px 24px; background: linear-gradient(160deg, rgba(31,32,35,.95), rgba(22,22,24,.97)); border: 1px solid var(--g800); border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  transition: opacity .35s var(--ease), transform .45s var(--ease), filter .35s var(--ease); }
.garage::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.garage.is-open { opacity: 1; transform: translate(-50%, 0); filter: none; }
.garage-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.garage-head h2 { margin: 0; font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; }
.garage-head .hint { margin: 0 0 0 auto; }
.touch .garage-head .hint { display: none; }
.garage-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.garage-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 10px 12px; background: var(--g950); border: 1px solid var(--g800); border-radius: 14px; color: var(--g50); font: inherit; cursor: pointer; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.garage-card .pic { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #0b0b0c; }
.garage-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garage-card h3 { margin: 10px 2px 2px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.garage-card p { margin: 0 2px; }
.garage-card .cur { white-space: nowrap; position: absolute; top: 16px; left: 16px; padding: 4px 8px; border-radius: 999px; background: rgba(14,14,15,.75); border: 1px solid var(--accent); color: var(--accent); font-size: 10px; opacity: 0; }
.garage-card.is-cur .cur { opacity: 1; }
.garage-card.is-laden { cursor: progress; } .garage-card.is-laden .pic { opacity: .45; } .garage-card.is-laden .cur { opacity: 1; border-color: var(--g700); color: var(--g300); }   /* Stufe 17b: Wagen lädt noch */
.garage-card.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 28px rgba(255,106,26,.25); transform: translateY(-3px); }
@media (max-width: 600px) { .garage { padding: 16px; } .garage-cards { gap: 8px; } .garage-card h3 { font-size: 14px; } .garage-card p { font-size: 9px; letter-spacing: .08em; } .touch.fx .garage { top: 176px; } .garage-head h2 { font-size: 22px; } .garage-card .cur { top: 12px; left: 12px; padding: 2px 6px; font-size: 8px; letter-spacing: .06em; } }

/* Wegweisung (Stufe 6) */
.compass { position: fixed; left: 50%; top: 74px; z-index: 31; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1px solid var(--g800); border-radius: 999px; background: rgba(14,14,15,.6); pointer-events: none; transition: opacity .3s; }
.compass.is-off, .calm .compass, .calm .guide-hint, .calm .compass-btn { display: none; }
.compass .arr { width: 22px; height: 22px; position: relative; transition: transform .15s linear; }
.compass .arr::before { content: ""; position: absolute; left: 50%; top: 1px; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--accent); }
.compass .arr::after { content: ""; position: absolute; left: 50%; top: 12px; width: 3px; height: 9px; transform: translateX(-50%); background: var(--accent); }
.compass .lbl { color: var(--g50); white-space: nowrap; }
.guide-hint { position: fixed; left: 50%; top: 124px; z-index: 31; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; padding: 16px 20px; min-width: min(420px, calc(100% - 32px)); background: linear-gradient(160deg, rgba(31,32,35,.92), rgba(22,22,24,.95)); border: 1px solid var(--g800); border-radius: 16px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.guide-hint::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.guide-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.guide-hint ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.guide-hint li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--g300); }
.guide-hint li b { color: var(--g50); font-weight: 700; }
.guide-hint li.is-rec b { color: var(--accent); }
.guide-hint li i { display: inline-block; width: 16px; height: 16px; position: relative; flex: none; }
.guide-hint li i::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--accent); }
.guide-hint li i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 2px; height: 7px; transform: translateX(-50%); background: var(--accent); }
@media (max-width: 600px) { .compass { top: 236px; } .guide-hint { top: 286px; } .compass-btn { display: none; } }

.prueffoto .guide-hint, .prueffoto .compass { display: none; }

@media (max-width: 600px) { .garage-cards { grid-template-columns: repeat(2, 1fr); } }

/* Führung (Stufe 7) */
.found { margin: 6px 0 0; font-size: 10px; letter-spacing: .1em; color: var(--g500); text-transform: none; }
.found span.is-on { color: var(--accent); }
.found.blink { animation: foundBlink 1.2s var(--ease) 1; }
@keyframes foundBlink { 0%, 100% { color: var(--g500); } 20% { color: var(--g50); text-shadow: 0 0 12px rgba(255,106,26,.8); } }
.steps { position: fixed; left: 50%; bottom: 28px; z-index: 31; transform: translate(-50%, 10px); opacity: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--g800); border-radius: 999px; background: rgba(14,14,15,.72); color: var(--g50); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); white-space: nowrap; }
.steps.is-on { opacity: 1; transform: translate(-50%, 0); }
.steps .ck { width: 14px; height: 14px; border: 1px solid var(--accent); border-radius: 50%; position: relative; flex: none; transition: background .25s; }
.steps .ck.is-done { background: var(--accent); }
.steps .ck.is-done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #0E0E0F; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.touch .steps { bottom: 190px; font-size: 10px; }
.fly { position: fixed; inset: 0; z-index: 34; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14vh; gap: 14px; opacity: 0; transition: opacity .5s var(--ease); }
.fly.is-on { opacity: 1; }
.fly .lbl { font-weight: 700; font-size: clamp(28px, 4vw, 54px); letter-spacing: .06em; color: var(--g50); text-shadow: 0 0 30px rgba(255,106,26,.45); }
.fly .lbl.pop { animation: flyPop .9s var(--ease) 1; }
@keyframes flyPop { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.fly .skip { color: var(--g300); }
.flying .compass, .flying .steps, .flying .guide-hint, .flying .speed, .flying .touchpad { opacity: 0 !important; }
.calm .found, .calm .steps, .calm .fuehrung-btn, .calm .fly { display: none !important; }

/* Karte (Stufe 8) */
.karte { position: fixed; right: var(--gutter); top: 74px; z-index: 31; border: 1px solid var(--g800); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform .35s var(--ease); background: rgba(14,14,15,.8); }
.karte canvas { display: block; }
.karte-hint { position: absolute; left: 8px; bottom: 6px; font-size: 9px; color: var(--g500); pointer-events: none; }
.karte.is-big { right: 50%; top: 50%; transform: translate(50%, -50%); z-index: 40; border-color: var(--accent); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.karte.is-big .karte-hint::after { content: " · Esc schließt"; }
.karte-btn { display: none; }
.touch .karte-btn { display: inline-flex; }
.touch .karte { top: auto; bottom: 330px; }
.touch .karte-hint { display: none; }
.calm .karte, .calm .karte-btn, .flying .karte { display: none !important; }

/* Stufe 12g: Hinweis beim Einparken */
.park-hint { position: fixed; left: 50%; bottom: 84px; z-index: 31; transform: translate(-50%, 8px); opacity: 0; padding: 9px 16px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(14,14,15,.78); color: var(--g50); white-space: nowrap; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.park-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.touch .park-hint { bottom: 246px; }
.calm .park-hint { display: none; }

/* Stufe 13b: Vollgas-Knopf am Handy, über den Pedalen links neben [ R ] */
.pedal.boost { position: absolute; right: 82px; bottom: 156px; width: 96px; height: 40px; border-radius: 999px; pointer-events: auto; font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-color: var(--accent); color: var(--accent); }

/* Stufe 12h: Knopf im Feld, Hand über geparkten Wagen */
.pill.wechsel-btn { border-color: var(--accent); color: var(--accent); }
.pill.wechsel-btn[hidden] { display: none; }
canvas.is-pick { cursor: pointer; }

/* Stufe 14b: Backstage-Anmeldung in der Tiefgarage – im Stil der Garage-Karten, Welt gedimmt dahinter */
.bs-dim { position: fixed; inset: 0; z-index: 34; background: rgba(8,8,9,.5); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.bs-on .bs-dim { opacity: 1; }
.fx .bs-login { position: fixed; left: 50%; top: 50%; z-index: 36; width: min(520px, calc(100% - 2 * var(--gutter))); transform: translate(-50%, -46%); opacity: 0; visibility: hidden; filter: blur(6px);
  padding: 22px 24px 24px; background: linear-gradient(160deg, rgba(31,32,35,.95), rgba(22,22,24,.97)); border: 1px solid var(--g800); border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  transition: opacity .35s var(--ease), transform .45s var(--ease), filter .35s var(--ease), visibility 0s .4s; }
.fx .bs-login.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); filter: none; transition: opacity .35s var(--ease), transform .45s var(--ease), filter .35s var(--ease); }
.bs-login::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.bs-login:not(.is-open) { display: none; }
.fx .bs-login:not(.is-open) { display: block; }
.bs-form { display: grid; gap: 12px; margin-top: 18px; }
.bs-field { display: grid; gap: 6px; }
.bs-field input { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--g700); background: var(--g950); color: var(--g50); font: 400 16px "Montserrat", sans-serif; }
.bs-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,26,.18); }
.bs-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.bs-req { color: var(--g300); text-decoration: none; border-bottom: 1px solid var(--g700); padding-bottom: 2px; }
.bs-req:hover, .bs-req:focus-visible { color: var(--accent); border-color: var(--accent); }
.bs-status { min-height: 16px; margin: 14px 0 0; color: var(--accent); }
.bs-note { margin: 10px 0 0; color: var(--g300); font-size: 14px; line-height: 1.5; }
.bs-note a { color: var(--accent); }
.touch .bs-login .hint { display: none; }

/* Stufe 14c: Loader mit Logo, Laufleiste und Zeile, was gerade lädt */
.loader .ld-logo { position: absolute; top: 24px; left: var(--gutter); height: 22px; opacity: .85; }
.loader .ld-bar { position: absolute; left: 50%; bottom: 96px; width: min(320px, 60vw); height: 1px; transform: translateX(-50%); background: var(--g800); overflow: hidden; }
.loader .ld-bar i { position: absolute; top: 0; bottom: 0; width: 34%; background: var(--accent); animation: ld-run 1.6s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes ld-run { from { left: -34%; } to { left: 100%; } }
.loader .ld-state { color: var(--g50); }
@media (prefers-reduced-motion: reduce) { .loader .ld-bar i { animation: none; left: 0; width: 100%; opacity: .5; } }

/* Stufe 14d: Hinweis, wenn der Wagen festsitzt */
.free-hint { position: fixed; left: 50%; top: 128px; z-index: 31; transform: translate(-50%, 8px); opacity: 0; padding: 9px 16px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(14,14,15,.78); color: var(--accent); white-space: nowrap; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.free-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.touch .free-hint { top: 150px; }
.calm .free-hint { display: none; }

/* Stufe 14e: Kamera-Knopf nur mit Maus sinnvoll */
.touch .kamera-btn { display: none; }

/* Stufe 15a-2: Backstage-Anmeldung als ein Knopf (öffnet die Lobby in einem neuen Tab) */
.bs-lead { margin: 16px 0 18px; color: var(--g50); font-size: 18px; line-height: 1.45; }
.bs-go { display: flex; align-items: center; justify-content: center; min-height: 64px; border: 1px solid var(--accent); border-radius: 999px; background: var(--g950); color: var(--accent); font-size: 15px; letter-spacing: .2em; text-decoration: none; transition: box-shadow .2s, color .2s; }
.bs-go:hover, .bs-go:focus-visible { color: var(--accent-hover); box-shadow: 0 0 28px rgba(255,106,26,.3); outline: none; }
.bs-login .bs-note { margin: 12px 0 0; text-align: center; color: var(--g300); font-size: 11px; }

/* Stufe 15b: HUD-Schrift bleibt bei Tag lesbar (dunkler Schein hinter dem Text) */
.hud .mono, .hud .hint, .hud .found, .found { text-shadow: 0 0 6px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); }

/* Stufe 15b: Am Handy und in schmalen Fenstern liegen alle Knöpfe oben in einem Menü „[ ≡ ]" */
.hud-menu { display: contents; }
.menu-btn { display: none; }
.hud-kompakt .menu-btn { display: inline-flex; min-height: 44px; min-width: 56px; justify-content: center; font-size: 14px; letter-spacing: .1em; }
.hud-kompakt .hud-r { flex-direction: row; align-items: flex-start; position: relative; }
.hud-kompakt .hud-menu { display: none; position: absolute; right: 0; top: 52px; z-index: 45; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px;
  background: rgba(14,14,15,.94); border: 1px solid var(--g800); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); min-width: 220px; }
.hud-kompakt .hud-menu.is-open { display: flex; }
.hud-kompakt .hud-menu .pill { min-height: 44px; justify-content: flex-start; }
.hud-kompakt .hud-menu .compass-btn { display: inline-flex; }
.hud-kompakt .hint-touch, .hud-kompakt.touch .found { display: none; }   /* Stufe 17c: am Rechner bleibt die Entdeckt-Zeile, nur am Handy weg */
.hud-kompakt.touch .compass { top: 74px; padding: 6px 10px; font-size: 10px; }
.hud-kompakt.touch .speed { top: 120px; }
.menu-offen .hud { z-index: 60; }

/* Leistung: Messanzeige oben links (?stats=1 oder Menü „Leistung"); der Knopf steht nur im ≡-Menü */
.stats { position: fixed; left: 12px; top: 128px; text-transform: none; z-index: 60; margin: 0; padding: 8px 10px; font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: var(--g50); background: rgba(10,10,11,.78); border: 1px solid var(--g700); pointer-events: none; white-space: pre; }
.stats[hidden] { display: none; }
.pill.leistung-btn { display: none; }
.hud-kompakt .hud-menu .leistung-btn { display: inline-flex; }
.hud-kompakt .stats { top: 64px; font-size: 10px; }

/* Stufe 15d: Karte am Handy (Touch oder < 900 px): aus, bis „Karte" im ≡-Menü sie einschaltet; dann klein und halbtransparent oben links */
.karte-mobil .karte { display: none; left: var(--gutter); right: auto; top: 64px; bottom: auto; opacity: .72; border-radius: 8px; }
.karte-mobil .karte.is-on, .karte-mobil .karte.is-big { display: block; }
.karte-mobil .karte.is-big { left: auto; right: 50%; top: 50%; opacity: 1; }
.karte-mobil .karte-hint { display: none; }
.karte-mobil .karte-btn { display: inline-flex; }

/* Stufe 16: Figur zu Fuß – Hinweis unten, Knopf „Einsteigen" an der Fahrertür (vor allem fürs Handy) */
.fuss-hint { position: fixed; left: 50%; bottom: 74px; z-index: 31; transform: translate(-50%, 8px); opacity: 0; padding: 9px 16px; border: 1px solid var(--g700); border-radius: 999px; background: rgba(14,14,15,.78); color: var(--g50); white-space: nowrap; pointer-events: none; font-size: 11px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fuss-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.fuss-hint .hint-touch, .touch .fuss-hint .hint-keys { display: none; }
.touch .fuss-hint .hint-touch { display: inline; }
.touch .fuss-hint { bottom: auto; top: 128px; }
.einsteigen-btn { position: fixed; left: 50%; bottom: 120px; z-index: 32; transform: translateX(-50%); border-color: var(--accent); color: var(--accent); min-height: 48px; }
.einsteigen-btn[hidden] { display: none; }
.touch .einsteigen-btn { bottom: auto; top: 176px; }
.fuss-btn:disabled { opacity: .45; cursor: default; }
.zu-fuss .speed { opacity: 0 !important; }
/* Stufe 17c: Knöpfe zu Fuß am Handy (nur touch + zu Fuß), Schuss nur mit gezogener Pistole */
.fuss-knoepfe { display: none; }
.touch.zu-fuss .fuss-knoepfe { display: block; }
.touch.zu-fuss .pedals, .touch.zu-fuss .pedal.boost { display: none; }   /* zu Fuß: Joystick bewegt, Pedale weg */
.touch.zu-fuss .pedal.reset { right: 20px; bottom: 240px; width: 84px; height: 32px; }   /* über der Hinweiszeile (bottom 190) */
.fuss-knoepfe .pedal { position: absolute; pointer-events: auto; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; }
.fuss-knoepfe .pedal.schuss { right: 20px; bottom: 36px; width: 84px; height: 84px; border-color: var(--accent); color: var(--accent); font-size: 12px; visibility: hidden; }
.pistole-an .fuss-knoepfe .pedal.schuss { visibility: visible; }
.fuss-knoepfe .pedal.sprung { right: 118px; bottom: 96px; width: 62px; height: 62px; font-size: 10px; }
.fuss-knoepfe .pedal.laufen { right: 20px; bottom: 134px; width: 84px; height: 36px; }
.fuss-knoepfe .pedal.pistole { right: 118px; bottom: 36px; width: 76px; height: 40px; }
.pistole-an .fuss-knoepfe .pedal.pistole, .fuss-knoepfe .pedal.laufen.is-an { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }   /* zu Fuß zählt kein Tempo; am Handy läge der Hinweis darüber */
.fuss-fund { position: fixed; left: 50%; top: 128px; z-index: 33; transform: translate(-50%, 8px); opacity: 0; padding: 9px 16px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(14,14,15,.82); color: var(--accent); white-space: nowrap; pointer-events: none; font-size: 11px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fuss-fund.is-on { opacity: 1; transform: translate(-50%, 0); }
.touch .fuss-fund { top: 230px; }

/* Stufe 17b: Figurwahl (zwei Kacheln nach dem Laden) und Menüpunkt */
.figurwahl { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(14,14,15,.45); opacity: 0; transition: opacity .4s var(--ease); }
.figurwahl.is-on { opacity: 1; }
.figurwahl[hidden] { display: none; }
.figurwahl-t { color: var(--accent); font-size: 12px; letter-spacing: .16em; }
.figurwahl-h { color: var(--g300); font-size: 10px; letter-spacing: .14em; }
.figurwahl-k { display: flex; gap: 16px; }
.figur-kachel { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 170px; padding: 18px 14px 14px; background: rgba(22,22,24,.92); border: 1px solid var(--g700); border-radius: 14px; color: var(--g50); font: inherit; cursor: pointer; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.figur-kachel svg { width: 96px; height: 144px; fill: var(--g300); }
.figur-kachel svg .ak { fill: var(--accent); }
.figur-kachel span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.figur-kachel:hover, .figur-kachel:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 28px rgba(255,106,26,.25); transform: translateY(-3px); outline: none; }
.figur-kachel:hover svg, .figur-kachel:focus-visible svg { fill: var(--g50); }
@media (max-width: 600px) { .figur-kachel { width: 140px; } .figur-kachel svg { width: 76px; height: 114px; } }
.pill.figur-btn { display: none; }
.zu-fuss .pill.figur-btn, .hud-kompakt .hud-menu .figur-btn { display: inline-flex; }
@media (max-width: 1599px) { html.zu-fuss:not(.hud-kompakt) .hud-menu .fuss-btn { display: none; } }   /* zu Fuß in mittelbreiten Fenstern: „Figur“ statt „Einsteigen“ oben (Einsteigen geht über den Knopf unten bzw. E) */
.figur-btn .lang { display: none; } .hud-kompakt .figur-btn .lang { display: inline; white-space: pre; }

/* Stufe 17c: Fadenkreuz, sitzt dort, wo die Pistole hinzeigt; weiß, wenn eine Scheibe im Visier ist */
.visier { position: fixed; left: 0; top: 0; z-index: 34; pointer-events: none; display: none; width: 0; height: 0; }
.visier.is-on { display: block; }
.visier i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border: 1.5px solid var(--accent); border-radius: 50%; box-shadow: 0 0 6px rgba(0,0,0,.8), inset 0 0 4px rgba(0,0,0,.6); }
.visier i::after { content: ''; position: absolute; left: 10px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.visier.is-ziel i, .visier.is-ziel i::after { border-color: #fff; background-color: transparent; }
.visier.is-ziel i::after { background: #fff; }
.visier .munition { display: none; position: absolute; top: 18px; left: 0; transform: translateX(-50%); white-space: nowrap; color: var(--accent); font-size: 10px; letter-spacing: .14em; text-shadow: 0 0 6px rgba(0,0,0,.9); }

/* E2: Munition fest unten rechts (PUBG-HUD), Fadenkreuz beim Zielen kleiner und heller */
.munition-hud { position: fixed; right: var(--gutter); bottom: 112px; z-index: 33; display: none; padding: 8px 14px; border: 1px solid var(--g700); border-radius: 999px; background: rgba(14,14,15,.7); color: var(--accent); font-size: 14px; letter-spacing: .14em; }
.munition-hud.is-on { display: block; }
.touch .munition-hud { bottom: auto; top: 76px; right: 16px; }   /* neben der Kompass-Pille, über dem Hinweis */
.visier.is-zielen i { width: 18px; height: 18px; left: -9px; top: -9px; border-width: 2px; }
.visier.is-zielen i::after { left: 6px; top: 6px; }

.fuss-hint { white-space: normal; max-width: min(92vw, 1100px); text-align: center; line-height: 1.7; }   /* E2: längere Belegung darf umbrechen */

/* E5: Fadenkreuz zuckt beim Schuss, zeigt beim Treffer kurz ein weißes Kreuz; Handy: Zielen-Schalter und zweiter Feuerknopf links */
.visier.is-schuss i { transform: scale(1.35); }
.visier i { transition: transform .08s; }
.visier.is-treffer i { border-color: #fff; }
.visier.is-treffer i::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%); }
.fuss-knoepfe .pedal.zielen { right: 118px; bottom: 170px; width: 62px; height: 36px; visibility: hidden; }
.fuss-knoepfe .pedal.schuss2 { left: 20px; bottom: 176px; width: 64px; height: 64px; border-color: var(--accent); color: var(--accent); visibility: hidden; }
.pistole-an .fuss-knoepfe .pedal.zielen, .pistole-an .fuss-knoepfe .pedal.schuss2 { visibility: visible; }
.fuss-knoepfe .pedal.zielen.is-an { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.touch.zu-fuss .steps { bottom: 300px; }   /* E5: Hinweiszeile über die Knöpfe (Schuss links, Zielen, Zurück) */

/* Pistole nur mit ?pistole=1 (html.pistole): Knöpfe, Anleitungstexte und Tastenhervorhebung */
.nur-pistole { display: none; }
html.pistole li.nur-pistole { display: list-item; } html.pistole span.nur-pistole { display: inline; }
.fuss-knoepfe .pedal.pistole { display: none; } html.pistole .fuss-knoepfe .pedal.pistole { display: block; }
html.pistole .ld-kb .k.kp rect { stroke: var(--accent); stroke-width: 1.6; fill: rgba(255,106,26,.10); } html.pistole .ld-kb .k.kp text { fill: var(--accent); }