/* zeitreise.hue-lab.de — Prototyp. Ein Panel unten, Karte dahinter, mobil zuerst. */
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, sans-serif }
#map { position: absolute; inset: 0 }

#panel {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 16px));
  background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
  border-radius: 14px; box-shadow: 0 2px 14px rgba(0,0,0,.25);
  padding: 12px 16px 10px; z-index: 5;
}
#kopf { min-height: 44px }
#epoche b { font-size: 16px }
#ep-zeit { color: #555; margin-left: 6px; font-size: 14px }
#ep-quelle { color: #777; font-size: 12px; margin-top: 2px }
#ep-quelle a { color: inherit }
#ep-hinweis { color: #a33; font-size: 12px; margin-top: 4px }

#regler { position: relative; margin: 10px 0 18px }
#jahr { width: 100%; margin: 0; accent-color: #7a5c2e; height: 28px; touch-action: pan-x }
#ticks { position: absolute; left: 0; right: 0; top: 30px; height: 14px; pointer-events: none }
#ticks span {
  position: absolute; transform: translateX(-50%);
  font-size: 10.5px; color: #666; white-space: nowrap;
}
#ticks span::before {
  content: ''; position: absolute; left: 50%; top: -7px;
  width: 1px; height: 5px; background: #999;
}

#fuss { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #444 }
#deck { flex: 1; accent-color: #7a5c2e; height: 24px }
#deck-wert { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums }

@media (max-width: 480px) {
  #panel { padding: 10px 12px 8px }
  #epoche b { font-size: 14.5px }
}