:root {
  --bg: #14181c;
  --panel: #1d2329;
  --panel-2: #262e36;
  --text: #e8edf1;
  --muted: #8d99a5;
  --accent: #5fb36b;
  --danger: #e5534b;
  --line: #333d47;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }

#map { position: fixed; inset: 0; background: #1a2026; }
#map.crosshair { cursor: crosshair; }
.leaflet-container { background: #1a2026; font: inherit; }

/* ---------- Leiste oben ---------- */
#bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  background: rgba(20, 24, 28, 0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
#bar .group { display: flex; gap: 4px; }
button, select, input { font: inherit; color: var(--text); }
button, select {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; min-height: 36px; cursor: pointer;
}
button:hover, select:hover { border-color: #4b5966; }
button.tool.active { background: var(--accent); border-color: var(--accent); color: #0c140e; }
.swatch { width: 28px; min-height: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); }
#gotoInput { width: 136px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-height: 36px; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
#users { color: var(--muted); font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); margin-left: auto; }
.status.on { color: #8fe09a; }
.status.off { color: #ff9b94; }

#lineBar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(46px + env(safe-area-inset-bottom)); z-index: 1000;
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  background: rgba(20, 24, 28, 0.94); border: 1px solid var(--line); border-radius: 12px;
}

#coords {
  position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 1000;
  padding: 4px 10px; border-radius: 8px; background: rgba(20, 24, 28, 0.85);
  font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
}
#coords:empty { display: none; }
#notice {
  position: fixed; left: 8px; bottom: calc(46px + env(safe-area-inset-bottom)); z-index: 1000; max-width: min(360px, 70vw);
  padding: 6px 10px; border-radius: 8px; background: rgba(20, 24, 28, 0.85); color: var(--muted); font-size: 12px;
}
#toast {
  position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 3000;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#toast.show { opacity: 1; }

/* ---------- Login ---------- */
#login {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: radial-gradient(circle at 30% 20%, #26313a 0%, #14181c 70%);
}
#loginForm {
  width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
}
#loginForm h1 { margin: 0; font-size: 22px; }
#loginForm .sub { margin: -6px 0 4px; color: var(--muted); }
#loginForm label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
#loginForm label.chk { flex-direction: row; }
#loginForm input[type=text], #loginForm input[type=password], #loginForm input:not([type]) {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 16px;
}
#loginForm .row { display: flex; gap: 8px; }
#loginForm .row button { flex: 1; min-height: 42px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #0c140e; font-weight: 600; }
.error { margin: 0; min-height: 1.4em; color: #ff9b94; font-size: 14px; }

/* ---------- Marker ---------- */
.pin-wrap { background: none; border: none; }
.pin {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; border: 2px solid rgba(0, 0, 0, .75); box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.leaflet-tooltip.lbl {
  background: rgba(20, 24, 28, .88); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; font-size: 12px; box-shadow: none;
}
.leaflet-tooltip.lbl::before { display: none; }
.gl {
  background: none; border: none; color: rgba(255, 255, 255, .6); text-align: center;
  font: 11px/14px ui-monospace, Menlo, monospace; pointer-events: none; text-shadow: 0 0 3px #000;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); }
.leaflet-popup-content { margin: 10px 12px; font-size: 14px; }
.popup-title { font-weight: 600; margin-bottom: 2px; word-break: break-word; }
.popup-meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.popup-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.popup-actions button { min-height: 30px; padding: 3px 9px; font-size: 13px; }
.popup-actions .del { border-color: #6a2b27; color: #ff9b94; }

@media (max-width: 640px) {
  #bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  #users { display: none; }
  #gotoInput { width: 124px; }
  #toast { top: 120px; }
}

/* ---------- Startbild ---------- */
#splash {
  position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 24px 24px calc(28px + env(safe-area-inset-bottom)); text-align: center; overflow: hidden;
  background: #0b0d0f; transition: opacity .5s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }
#splash::after { /* dunkler Verlauf unten, damit der Text lesbar bleibt */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); pointer-events: none;
}
/* Bühne = Bild + Schaltflächen, wie "cover" skaliert; Prozentwerte der Stellen beziehen sich auf das Bild */
#splashStage {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -40%); z-index: 0;
  width: max(100vw, calc(100vh * var(--ar, 1.5))); aspect-ratio: var(--ar, 1.5);
}
#splashStage img { display: block; width: 100%; height: 100%; }
#spots { position: absolute; inset: 0; }
#splash h1, #splash p { position: relative; z-index: 2; margin: 0; }
#splash h1 { font-size: clamp(26px, 6vw, 44px); letter-spacing: .02em; margin-bottom: 4px; }
#splash #splashCaption { color: #d5dbe0; font-size: clamp(15px, 3.6vw, 20px); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 6px #000; }
#splash #splashHint { margin-top: 4px; font-size: 12px; letter-spacing: .08em; color: #9aa5af; }

.spot {
  position: absolute; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; min-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.spot::before { /* Leuchten */
  content: ""; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 52% 40% at var(--gx, 50%) var(--gy, 34%), rgba(255, 196, 120, .75), rgba(255, 170, 90, .25) 45%, rgba(255, 170, 90, 0) 72%);
  opacity: .35; animation: spotPulse 2.8s ease-in-out infinite; transition: opacity .25s;
}
.spot:hover::before, .spot:focus-visible::before { opacity: 1; animation: none; }
.spot:focus-visible { outline: none; }
.spot-label {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
  font: italic 16px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: #f4e3c4; letter-spacing: .04em;
  text-shadow: 0 0 10px rgba(255, 190, 110, .8), 0 1px 4px #000; opacity: 0; transition: opacity .25s, transform .25s;
}
.spot:hover .spot-label, .spot:focus-visible .spot-label { opacity: 1; transform: translate(-50%, 0); }
@keyframes spotPulse { 0%, 100% { opacity: .22; } 50% { opacity: .8; } }

/* Hochformat (Handy): Bild breiter als der Schirm; Logo, Wasserturm und Schild bleiben sichtbar */
@media (orientation: portrait) {
  #splash::after { display: none; }
  #splashStage { top: 46%; width: 130vw; transform: translateY(-50%); left: 0; }
  #splashStage img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* ---------- Spruch-Bildschirm ---------- */
#verse { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: #0b0d0f; animation: verseIn .5s ease; }
#verse[hidden] { display: none; }
#verseBg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(16px) brightness(.3) saturate(.8); }
.verse-box {
  position: relative; z-index: 1; width: min(760px, 100%); max-height: 100%; overflow-y: auto; text-align: center;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: #f1ece2; padding: 8px 4px;
}
.verse-back { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 14px; z-index: 2; background: rgba(20, 24, 28, .6); border-color: #4b3f2c; color: #e9cf9f; font-family: inherit; font-style: italic; }
.verse-kicker { margin: 0 0 6px; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: #b99a63; }
#verseTitle { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(30px, 7vw, 54px); color: #f3d9a4; text-shadow: 0 0 24px rgba(255, 180, 90, .55); }
.verse-orn { margin: 14px 0 20px; font-size: 26px; color: #c9a45e; text-shadow: 0 0 14px rgba(255, 180, 90, .6); }
#verseText { margin: 0 auto; padding: 0 6px; font-style: italic; font-size: clamp(26px, 5.6vw, 46px); line-height: 1.35; text-shadow: 0 2px 18px rgba(0, 0, 0, .9), 0 0 30px rgba(255, 190, 110, .25); }
#verseText .q { color: #d9b068; font-size: 1.5em; line-height: 0; vertical-align: -.18em; padding: 0 .08em; }
#verseText.in, #verseBy.in, #verseFrom.in { animation: verseText 1s ease both; }
#verseFrom.in { animation-delay: .25s; }
.verse-from { margin: 28px 0 0; font-style: italic; font-size: clamp(22px, 4.4vw, 32px); color: #f3d9a4; letter-spacing: .08em; text-shadow: 0 0 18px rgba(255, 180, 90, .55); }
.verse-by { margin: 8px 0 0; font-style: italic; font-size: 15px; color: #a99677; letter-spacing: .06em; }
.verse-by.in { animation-delay: .35s; }
.verse-nav { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #c9a45e; letter-spacing: .2em; font-size: 14px; }
.verse-nav button { background: rgba(20, 24, 28, .6); border-color: #4b3f2c; color: #e9cf9f; min-width: 46px; font-size: 18px; }
@keyframes verseIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes verseText { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  #splash, #verse { transition: none; animation: none; }
  .spot::before { animation: none; opacity: .6; }
  #verseText.in, #verseBy.in, #verseFrom.in { animation: none; }
}