/* Weihnachtsmarkt – interaktiver Standplan */
@font-face { font-family: "Lock Serif"; src: url(schrift/lockserif-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lock Serif"; src: url(schrift/lockserif-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --nacht: #0b152d;
  --nacht-2: #13213f;
  --flaeche: rgba(14, 25, 52, .92);
  --linie: rgba(160, 185, 240, .18);
  --text: #eef2ff;
  --text-2: #a9b6d8;
  --gold: #ffd36b;
  --warm: #ffb347;
  --rot: #c0262f;
  --radius: 16px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zier: "Lock Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--nacht); color: var(--text); font: 15px/1.45 var(--schrift); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }

.wm { position: relative; height: 100%; min-height: 320px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1a2b52 0%, var(--nacht) 60%); }

/* ---------- Bühne ---------- */
.wm-buehne { position: absolute; inset: 0; }
.wm-karte { display: block; width: 100%; height: 100%; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.wm.frei .wm-karte { touch-action: none; }
.wm-karte.zieht { cursor: grabbing; }
.wm-schnee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Kopf & Suche ---------- */
.wm-kopf { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 14px 18px 22px; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 21, 45, .8), rgba(11, 21, 45, 0)); }
.wm-titel { margin: 0; font: 600 clamp(18px, 2.4vw, 26px)/1.15 var(--zier); color: #fff3d6; letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(255, 190, 90, .35); }
.wm-untertitel { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }
.wm-untertitel:empty { display: none; }
.wm-wechsel { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--text-2); pointer-events: auto; text-decoration: none; border-bottom: 1px dotted currentColor; }
.wm-wechsel:hover { color: var(--gold); }

.wm-suche { position: absolute; z-index: 4; top: 14px; right: 14px; width: min(300px, calc(100% - 28px)); }
.wm-suche input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche) no-repeat 13px 50% / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E");
  color: var(--text); font: inherit; outline: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wm-suche input::placeholder { color: var(--text-2); }
.wm-suche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.wm-suche input:focus { border-color: rgba(255, 211, 107, .6); box-shadow: 0 0 0 3px rgba(255, 211, 107, .15); }
.wm-treffer { list-style: none; margin: 6px 0 0; padding: 6px; border-radius: 14px; background: var(--flaeche);
  border: 1px solid var(--linie); max-height: 320px; overflow: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.wm-treffer li { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 9px; cursor: pointer; }
.wm-treffer li[aria-selected="true"], .wm-treffer li:hover { background: rgba(255, 211, 107, .12); }
.wm-treffer .nr { flex: none; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--rot);
  color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.wm-treffer .leer { color: var(--text-2); cursor: default; }
.wm-treffer .leer:hover { background: none; }

/* ---------- Steuerung ---------- */
.wm-zoom { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.wm-zoom button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche);
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wm-zoom button:hover { border-color: rgba(255, 211, 107, .5); }
.wm-zoom .wm-3d { font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.wm-zoom .wm-3d[aria-pressed="true"] { color: var(--gold); border-color: rgba(255, 211, 107, .6); }
.wm:not(.tief) [data-drehen] { display: none; }
.wm-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, .wm-stand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wm-kompass { position: absolute; z-index: 3; left: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--flaeche); border: 1px solid var(--linie); pointer-events: none; }
.wm-kompass svg { width: 100%; height: 100%; transform: rotate(112deg); transition: transform .5s ease; }
.wm-kompass .n { fill: var(--rot); }
.wm-kompass .s { fill: #c9d6f5; }
.wm-kompass text { fill: var(--text); font: 700 7px var(--schrift); text-anchor: middle; }

.wm-tipp { position: absolute; z-index: 5; pointer-events: none; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  background: rgba(8, 14, 32, .94); border: 1px solid rgba(255, 211, 107, .35); font-size: 13px; transform: translate(-50%, calc(-100% - 12px)); }
.wm-tipp b { color: var(--gold); margin-right: 6px; }
.wm-hinweis { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 12px;
  background: rgba(8, 14, 32, .9); font-size: 14px; pointer-events: none; }

.wm-laden { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; color: var(--text-2);
  background: var(--nacht); transition: opacity .5s ease, visibility .5s; }
.wm.bereit .wm-laden { opacity: 0; visibility: hidden; }
.wm-laden.fehler { color: #ffb4b4; }

/* ---------- Panel ---------- */
.wm-panel { position: absolute; z-index: 4; top: 66px; right: 14px; width: 340px; max-height: calc(100% - 80px); overflow: auto;
  border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: wm-panel-rein .35s cubic-bezier(.2, .9, .3, 1); }
.wm-panel[hidden] { display: none; }
@keyframes wm-panel-rein { from { opacity: 0; transform: translateX(24px); } }
.wm-zu { position: absolute; z-index: 1; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .35); font-size: 22px; line-height: 1; cursor: pointer; }
.wm-p-bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.wm-p-inhalt { padding: 18px 20px 20px; }
.wm-p-nr { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--rot); color: #fff; font-weight: 700; font-size: 13px; }
.wm-p-name { margin: 10px 40px 6px 0; font: 600 23px/1.2 var(--zier); color: #fff3d6; }
.wm-p-kurz { margin: 0 0 14px; color: #d5ddf3; }
.wm-p-kurz.leer { color: var(--text-2); font-style: italic; }
.wm-p-kontakt { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wm-p-kontakt:empty { display: none; }
.wm-p-kontakt a, .st-kontakt a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 14px; background: rgba(255, 255, 255, .04); }
.wm-p-kontakt a:hover, .st-kontakt a:hover { border-color: rgba(255, 211, 107, .55); color: #fff; }
.wm-p-kontakt svg, .st-kontakt svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-p-mehr { display: inline-flex; gap: 8px; padding: 10px 16px; border-radius: 12px; background: linear-gradient(180deg, #ffd36b, #f2a93b);
  color: #2a1700; font-weight: 700; text-decoration: none; }
.wm-p-mehr:hover { filter: brightness(1.06); }

/* ---------- SVG-Inhalte ---------- */
.wm-boden { fill: rgba(30, 50, 95, .28); }
.wm-karte text { font-family: var(--schrift); }
.wm-huette { transform-box: fill-box; transform-origin: center; }
.wm-schein { fill: none; stroke: #ffb347; stroke-width: 5; stroke-opacity: .34; stroke-linejoin: round; pointer-events: none; }
.wm-flaeche { fill: url(#wm-dach); stroke: #f0a040; stroke-width: .45; stroke-linejoin: round; transition: fill .2s; }
.wm-stand { cursor: pointer; outline: none; }
.wm-stand:hover .wm-flaeche, .wm-stand:focus-visible .wm-flaeche { fill: url(#wm-dach-hell); }
.wm-stand.aktiv .wm-flaeche { fill: url(#wm-dach-aktiv); stroke: #fff2c8; stroke-width: .7; }
.wm-grat { fill: none; stroke: #b8864a; stroke-width: .3; stroke-opacity: .55; pointer-events: none; }
.wm-kette { fill: none; stroke: #fffbe8; stroke-width: 1.45; filter: drop-shadow(0 0 1.2px #ffcf6e); stroke-linecap: round; stroke-dasharray: 0 2.3; pointer-events: none;
  animation: wm-funkeln 2.6s steps(3, jump-none) infinite alternate; animation-delay: var(--f, 0s); }
.wm-wand polygon { pointer-events: none; stroke: rgba(0, 0, 0, .3); stroke-width: .25; stroke-linejoin: round; }
.wm-koerper { pointer-events: none; }
.wm-bim { pointer-events: none; }
.wm-flaeche.wm-radflaeche { fill: #2b3354; stroke: #6a7bb0; }
.wm-tor, .wm-tor-hinten { fill: none; stroke-linejoin: miter; stroke-linecap: square; pointer-events: none; }
.wm-tor { stroke: #ffd77a; stroke-width: 3.6; }
.wm-tor-hinten { stroke: #9c7b3e; stroke-width: 4.2; }
.wm-kugel { stroke: rgba(255, 255, 255, .35); stroke-width: .25; filter: drop-shadow(0 0 1.2px rgba(255, 200, 120, .9)); pointer-events: none; }
.wm-tor-fuss { fill: #a98f58; stroke: #7d6a42; stroke-width: .3; }
.wm-rad path { fill: none; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.wm-rad .wm-rad-stuetze { stroke: #e8e2d4; stroke-width: 1.2; }
.wm-rad .wm-rad-speiche { stroke: #fffbea; stroke-width: .75; stroke-dasharray: 0 1.5; }
.wm-rad .wm-rad-kranz { stroke: #ffa184; stroke-width: 1; stroke-dasharray: 0 1.5; animation: wm-funkeln 2s steps(3, jump-none) infinite alternate; }
.wm-rad .wm-rad-gondel { fill: #c0262f; stroke: #f3ece0; stroke-width: .4; }
.wm-rad .wm-rad-nabe { fill: #3a2a40; stroke: #ffd36b; stroke-width: .6; stroke-dasharray: 0 1.2; }
.wm-bim-fenster { fill: #ffd892; }
.wm-bim-buegel { fill: none; stroke: #2b313d; stroke-width: .45; stroke-linejoin: round; }
.wm-bim-licht { fill: #fffbe6; filter: drop-shadow(0 0 1.2px #fff3c0); }
.wm-bim-ruecklicht { fill: #ff3b30; filter: drop-shadow(0 0 1px #ff2a1a); }
.wm-tram-spur { visibility: hidden; }   /* Bim zeichnet karte.js, auch in 2D */
.wm-auslage { fill: #ffd47e; opacity: .95; stroke: #fff0c8; stroke-width: .3; filter: drop-shadow(0 0 1.5px #ffb347); pointer-events: none; }
.wm-vorhang { fill: none; stroke: #ffe7b0; stroke-width: .5; stroke-linecap: round; stroke-dasharray: 0 1.5; }
/* Hauptplatz: Flachdach mit beleuchtetem Hütchen */
.wm.huetchen .wm-flaeche { fill: url(#wm-dach-silber); }
.wm-huetchen { fill: rgba(255, 190, 95, .5); stroke: none; pointer-events: none; }
.wm-huetchen-licht { fill: none; stroke: #fff1c4; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 1.25; pointer-events: none;
  animation: wm-funkeln 2.2s steps(3, jump-none) infinite alternate; animation-delay: var(--f, 0s); }
.wm-einr { fill: #26345a; stroke: #4b5d8c; stroke-width: .4; pointer-events: none; }
.wm-einr.wm-flach { fill: #2f4271; stroke: #6a7eb2; stroke-dasharray: 1.2 .8; }
.wm.huetchen .wm-einr.wm-flach { stroke: none; }   /* Hauptplatz: Bühne/Karussell ohne Umrandung */
.wm-einr-text.gross { font-size: 5px; fill: #e8ecf6; }
.wm:not(.tief) .wm-einr-text.gross { font-size: 10px; }   /* WC in 2D doppelt so groß */
.wm-einr.wm-gebaeude { fill: #5d6274; stroke: #a3a9ba; }
.wm-einr-text { fill: #9fb0d8; font-size: 2.6px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.wm-nr { pointer-events: none; }
.wm-nr circle { fill: var(--rot); stroke: #ffd98a; stroke-width: .55; }
.wm-nr text { fill: #fff; font-size: 4.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.wm-nr.m circle { fill: #c2508f; }
.wm-nr.aktiv circle { fill: var(--gold); stroke: #fff; }
.wm-nr.aktiv text { fill: #3a1d00; }
.wm-puls { fill: none; stroke: var(--gold); stroke-width: .8; pointer-events: none; transform-box: fill-box; transform-origin: center;
  animation: wm-puls 1.6s ease-out infinite; }

.wm.auswahl .wm-huette:not(.aktiv) { opacity: .5; transition: opacity .3s; }
.wm-huette { transition: opacity .3s; }

/* Einblenden beim Laden */
.wm.los .wm-huette { animation: wm-auf .75s cubic-bezier(.2, 1.35, .4, 1) both; animation-delay: var(--v, 0s); }
.wm.los .wm-busch > g, .wm.baumlos .wm-busch > g { animation: wm-baum-auf .6s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--v, 0s); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wm-baum-auf { from { transform: scale(0); } to { transform: none; } }
.wm.los .wm-baum { animation: wm-auf 1.1s cubic-bezier(.2, 1.3, .4, 1) both .2s; transform-box: fill-box; transform-origin: center; }

@keyframes wm-auf { from { opacity: 0; transform: translateY(-5px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes wm-funkeln { from { stroke-opacity: .35; } to { stroke-opacity: 1; } }
@keyframes wm-puls { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@keyframes wm-blink { from { opacity: .25; } to { opacity: 1; } }
@keyframes wm-tram { 0% { stroke-dashoffset: 70; opacity: 0; } 2% { opacity: .9; } 35% { opacity: .9; } 37%, 100% { stroke-dashoffset: -880; opacity: 0; } }

/* Lichter schalten in Stufen statt fließend – spart Neuzeichnungen (Akku, Mobilgeräte) */
.wm-licht { animation: wm-blink 1.8s steps(2, jump-none) infinite alternate; }
.wm-licht.t1 { animation-delay: -.45s; animation-duration: 2.3s; }
.wm-licht.t2 { animation-delay: -.9s; animation-duration: 1.5s; }
.wm-licht.t3 { animation-delay: -1.3s; animation-duration: 2.7s; }
.wm-glanz { animation: wm-glanz 2.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes wm-glanz { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
.wm-stern { animation: wm-blink 1.6s steps(2, jump-none) infinite alternate; }
/* Straßenbahn: ~10 s für die Strecke, je eine pro Richtung, zeitversetzt */
.wm-tram-spur { stroke-dasharray: 70 2000; animation: wm-tram 28s linear infinite 2s; }
.wm-tram-spur.rueck { animation-delay: 15s; }

/* ---------- Schmal / Hochformat ---------- */
@media (max-width: 640px) {
  .wm-kopf { padding: 10px 14px 18px; }
  .wm-suche { top: auto; bottom: 14px; left: 68px; right: 62px; width: auto; }
  .wm-treffer { position: absolute; bottom: 46px; left: 0; right: 0; margin: 0; }
  .wm-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62%; border-radius: 20px 20px 0 0;
    animation-name: wm-sheet-rein; padding-bottom: env(safe-area-inset-bottom); }
  .wm-p-bild img { aspect-ratio: 16 / 8; }
  .wm-p-name { font-size: 21px; }
}
@media (min-width: 641px) {
  .wm-zoom { right: auto; left: 14px; bottom: 70px; }   /* nicht unter dem Panel */
}
@media (max-height: 600px) and (min-width: 641px) {
  .wm-p-bild img { aspect-ratio: 16 / 7; }
}
@keyframes wm-sheet-rein { from { transform: translateY(40%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wm-tram-spur { opacity: 0; }
}