/* Gruselhäuser Woltersdorf – lokale Styles, nur System-Schriften */
:root {
  --bg: #140b1c; --night: #0c0612; --card: #21122e; --card2: #190d23; --fg: #f3ead8; --muted: #c4b6cf;
  --pumpkin: #f08a24; --pumpkin-fg: #2a1406; --toxic: #b8f040; --border: #4a2f62; --danger: #e5483b; --warn: #f2cf4a;
  --radius: 14px; --display: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--fg); line-height: 1.55;
  background: radial-gradient(ellipse at 70% 0%, rgba(90, 40, 130, .7), transparent 60%),
    radial-gradient(ellipse at 10% 30%, rgba(240, 138, 36, .15), transparent 50%),
    linear-gradient(180deg, var(--night), var(--bg)) fixed;
  background-color: var(--bg); min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: .4em 0; }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
a { color: var(--pumpkin); }
:focus-visible { outline: 3px solid var(--toxic); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; margin: .3rem 0; }
.prewrap { white-space: pre-line; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 1000; background: var(--pumpkin); color: var(--pumpkin-fg); padding: .5rem 1rem; border-radius: 8px; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem; }

.site-header { position: sticky; top: 0; z-index: 500; background: rgba(12, 6, 18, .88); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .7rem; padding-bottom: .7rem; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--fg); text-decoration: none; font-family: var(--display); font-size: 1.25rem; }
.brand em { color: var(--pumpkin); font-style: normal; }
.icon-house { width: 32px; height: 32px; }
.site-header nav { display: flex; gap: .25rem; }
.site-header nav a { color: var(--muted); text-decoration: none; padding: .45rem .7rem; border-radius: 999px; font-weight: 500; font-size: .95rem; }
.site-header nav a:hover, .site-header nav a.active { color: var(--pumpkin); }

.site-footer { margin-top: 4rem; border-top: 1px solid var(--border); background: rgba(12, 6, 18, .9); color: var(--muted); font-size: .9rem; }
.footer-inner { padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--pumpkin); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn-hero { background: var(--pumpkin); color: var(--pumpkin-fg); box-shadow: 0 0 22px rgba(240, 138, 36, .5); }
.btn-hero:hover { filter: brightness(1.08); }
.btn-spooky { background: transparent; color: var(--toxic); border-color: var(--toxic); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-outline:hover, .btn-outline[aria-pressed="true"] { border-color: var(--pumpkin); color: var(--pumpkin); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-whatsapp { background: #25d366; color: #071d0f; }
.btn-whatsapp:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.flyer-page { padding-top: 2rem; }
.flyer-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 .5rem; }
.flyer-viewer { max-width: 850px; margin-left: auto; margin-right: auto; padding: .75rem; overflow: hidden; }
.flyer-preview-link { display: block; border-radius: 10px; overflow: hidden; background: #fff; }
.flyer-preview-image { display: block; width: 100%; height: auto; }
.flyer-fallback { margin: .75rem .25rem 0; }
@media (max-width: 640px) {
  .flyer-actions .btn { width: 100%; }
}

.hero { position: relative; overflow: hidden; padding: 3.5rem 0 9rem; text-align: center; }
.hero-inner { position: relative; max-width: 780px; }
.kicker { color: var(--toxic); text-transform: uppercase; letter-spacing: .25em; font-weight: 700; font-size: .85rem; }
.hero h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); text-shadow: 0 0 24px rgba(240, 138, 36, .55); }
.lead { font-size: 1.15rem; color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background:
  linear-gradient(to top, var(--night) 0 40%, transparent 40%),
  conic-gradient(from 135deg at 10% 40%, var(--night) 90deg, transparent 0) 0 0 / 160px 110px repeat-x; opacity: .95; }
.fog { position: absolute; left: -20%; bottom: 40px; width: 140%; height: 160px; background: radial-gradient(ellipse, rgba(220, 200, 240, .13), transparent 65%); filter: blur(18px); animation: fog 18s ease-in-out infinite alternate; }
@keyframes fog { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.bats .bat { position: absolute; top: 18%; left: -10%; font-size: 1.6rem; animation: bat 22s linear infinite; opacity: .8; }
.bats .b2 { top: 30%; animation-delay: -8s; font-size: 1.2rem; }
.bats .b3 { top: 10%; animation-delay: -15s; font-size: 1rem; }
@keyframes bat { 0% { transform: translate(0, 0); } 50% { transform: translate(60vw, -30px); } 100% { transform: translate(120vw, 10px); } }

.card { background: linear-gradient(160deg, var(--card), var(--card2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; margin: 1rem 0; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); }
.card.danger { border-color: var(--danger); }
.safety { border: 1px solid rgba(184, 240, 64, .5); background: rgba(12, 6, 18, .7); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.safety h2 { font: 700 1rem var(--sans); color: var(--toxic); margin: 0; }
.note-warning { border: 1px solid var(--warn); background: rgba(242, 207, 74, .1); border-radius: 10px; padding: .8rem; margin: 1rem 0; }
.flash { padding: .8rem 1rem; border-radius: 10px; margin: 1rem 0; }
.flash-ok { background: rgba(184, 240, 64, .15); border: 1px solid var(--toxic); }
.flash-error { background: rgba(229, 72, 59, .15); border: 1px solid var(--danger); }
.field-error { color: #ff9c92; font-weight: 600; margin: .25rem 0; }

label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--night); color: var(--fg); font: 1rem var(--sans);
}
input[readonly] { opacity: .75; }
input[type=checkbox], input[type=radio] { width: 1.2rem; height: 1.2rem; accent-color: var(--pumpkin); vertical-align: middle; }
label.check, .checks label, .scare-radios label, label.toggle { font-weight: 500; display: flex; gap: .5rem; align-items: flex-start; }
fieldset { border: 1px solid var(--border); border-radius: 10px; margin: 1rem 0; padding: .8rem 1rem; }
legend { font-family: var(--display); font-size: 1.25rem; padding: 0 .3rem; }
.scare-radios { display: flex; gap: 1rem; flex-wrap: wrap; }
.grid2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.steps { display: flex; gap: .75rem; padding: 0; list-style: none; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.steps li[aria-current] { color: var(--pumpkin); font-weight: 700; }

.filters input[type=search] { margin-bottom: .75rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.filter-row label { margin: 0; }
.filter-row select { width: auto; display: inline-block; margin-left: .4rem; }
.view-toggle { display: flex; gap: .5rem; margin: 1rem 0; }
.split { display: grid; gap: 1.5rem; }
.split .pane-map { display: none; }
.split[data-active="map"] .pane-list { display: none; }
.split[data-active="map"] .pane-map { display: block; }
@media (min-width: 1024px) {
  .view-toggle { display: none; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .split .pane-list, .split .pane-map { display: block !important; }
  .pane-map { position: sticky; top: 5.5rem; align-self: start; }
}
.house-list { list-style: none; padding: 0; margin: 0; }
.house-card h3 { margin: 0 0 .3rem; font-size: 1.4rem; }
.house-card h3 a { color: var(--fg); text-decoration: none; }
.house-card h3 a:hover { color: var(--pumpkin); }
.house-thumb { display: block; margin: -1.1rem -1.1rem 1rem; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--night); }
.house-thumb img { display: block; width: 100%; height: 180px; object-fit: cover; }
.house-actions { margin-top: .9rem; }
.btn-route { min-height: 40px; padding: .42rem .85rem; font-size: .92rem; }
.btn-route.selected { border-color: var(--toxic); color: var(--toxic); background: rgba(184, 240, 64, .08); }
.house-photo, .admin-photo { margin: 1rem 0; }
.house-photo img, .admin-photo img, .photo-existing img, .photo-preview img { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 12px; background: var(--night); border: 1px solid var(--border); }
.house-photo figcaption, .admin-photo figcaption { color: var(--muted); font-size: .85rem; margin-top: .35rem; }
.admin-photo { max-width: 560px; }
.admin-photo img { max-height: 420px; }
.photo-upload { background: rgba(12, 6, 18, .35); }
.photo-upload input[type=file] { display: block; width: 100%; padding: .7rem; border: 1px dashed var(--border); border-radius: 10px; background: var(--night); color: var(--fg); }
.photo-preview, .photo-existing { margin-top: .8rem; }
.photo-preview img, .photo-existing img { max-height: 360px; }
.photo-rights { margin-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; }
.chip-scare { border-color: var(--pumpkin); color: var(--pumpkin); }
.scare .pumpkin { filter: grayscale(1) opacity(.35); }
.scare .pumpkin.on { filter: drop-shadow(0 0 4px rgba(240, 138, 36, .9)); }
.empty { text-align: center; padding: 2rem; }
.empty .big { font-size: 3rem; margin: 0; }
.display { font-family: var(--display); font-size: 1.5rem; }
.token { font: 700 1.3rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; background: var(--night); border: 2px dashed var(--pumpkin); padding: .8rem; border-radius: 10px; word-break: break-all; user-select: all; }
.status-approved { color: var(--toxic); } .status-pending { color: var(--warn); } .status-rejected { color: var(--danger); }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.tabs a { padding: .4rem .9rem; border: 1px solid var(--border); border-radius: 999px; color: var(--fg); text-decoration: none; }
.tabs a.active { border-color: var(--pumpkin); color: var(--pumpkin); }
.legal h2 { margin-top: 2rem; } .legal h3 { font: 700 1.1rem var(--sans); margin-top: 1.2rem; }

.map-box { width: 100%; height: 360px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--night); overflow: hidden; margin: .75rem 0; }
.pin-tools { margin: .7rem 0 .25rem; }
.pin-confirm { margin-top: .6rem; }
.pin-confirm .btn:disabled { opacity: .55; cursor: not-allowed; }
.map-large { height: 60vh; min-height: 360px; }
.map-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; gap: .25rem; }
.leaflet-tile-pane { filter: grayscale(.6) brightness(.65) contrast(1.1) hue-rotate(230deg) saturate(1.4); }
.leaflet-container { font-family: var(--sans); background: var(--night); }
.leaflet-control-attribution { background: rgba(20, 11, 28, .9) !important; color: var(--fg) !important; font-size: 12px; }
.leaflet-control-attribution a { color: var(--pumpkin) !important; text-decoration: underline; }
.leaflet-container .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; background: var(--card) !important; color: var(--fg); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0, 0, 0, .65); }
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-container .leaflet-popup-tip { background: var(--card) !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--pumpkin); z-index: 2; text-shadow: 0 1px 2px var(--night); }
.map-popup-card { width: min(270px, 70vw); overflow: hidden; }
.map-popup-photo { display: block; background: var(--night); }
.map-popup-photo img { display: block; width: 100%; height: 145px; object-fit: cover; }
.map-popup-body { padding: .8rem .9rem .9rem; background: var(--card); }
.map-popup-body h3 { margin: 0; font: 700 1.15rem var(--display); }
.map-popup-body h3 a { color: var(--fg); text-decoration: none; }
.map-popup-body h3 a:hover { color: var(--pumpkin); }
.map-popup-hours { margin: .55rem 0 0; color: var(--toxic); font-weight: 650; }
.map-popup-description { margin: .55rem 0 0; color: var(--muted); white-space: pre-line; line-height: 1.4; }
.map-popup-route { width: 100%; margin-top: .75rem; }
.spook-marker { background: transparent; border: 0; font-size: 28px; filter: drop-shadow(0 0 6px rgba(240, 138, 36, .9)); }
.route-start-picking { cursor: crosshair; outline: 3px solid var(--toxic); outline-offset: 2px; }

.route-planner { border-color: rgba(240, 138, 36, .7); background: linear-gradient(145deg, rgba(60, 25, 78, .96), rgba(25, 13, 35, .98)); }
.route-planner .kicker { margin: 0 0 .25rem; }
.route-planner h3 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.route-planner-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.route-planner-head .muted { margin-bottom: 0; }
.route-count { flex: 0 0 auto; margin: 0; padding: .45rem .75rem; border: 1px solid var(--pumpkin); border-radius: 999px; color: var(--pumpkin); }
.route-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: 1rem; }
.route-mode { display: flex; align-items: center; gap: .5rem; margin: 0 0 0 auto; font-size: .9rem; }
.route-mode select { width: auto; min-width: 135px; }
.route-selection { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.route-selection li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .45rem .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--night); }
.route-remove { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 700 1.25rem/1 var(--sans); cursor: pointer; }
.route-remove:hover { color: var(--fg); background: rgba(255, 255, 255, .08); }
.route-start-actions { padding-top: .25rem; border-top: 1px solid var(--border); }
.route-status { margin: .8rem 0 0; }
.route-results { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(184, 240, 64, .45); border-radius: 12px; background: rgba(12, 6, 18, .6); }
.route-results h4 { margin: 0; font: 700 1.2rem var(--display); color: var(--toxic); }
.route-order { margin: .7rem 0 1rem; padding-left: 1.5rem; }
.route-order li + li { margin-top: .25rem; }
.route-links { display: grid; gap: .75rem; }
.route-part { padding: .8rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(33, 18, 46, .75); }
.route-part-summary { margin: 0 0 .65rem; color: var(--muted); font-size: .9rem; }

@media (max-width: 639px) {
  .route-planner-head { flex-direction: column; }
  .route-mode { width: 100%; margin-left: 0; justify-content: space-between; }
  .route-start-actions .btn, .route-part .btn { width: 100%; }
}

.ad-slot { border: 1px dashed var(--border); border-radius: var(--radius); padding: 1rem; margin: 2rem 0 1rem; text-align: center; background: rgba(12, 6, 18, .45); overflow: hidden; }
.ad-label { font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ad-placeholder { color: var(--muted); font-size: .9rem; margin: .25rem 0 0; }
.ad-creative { display: block; width: fit-content; max-width: 100%; margin: .65rem auto 0; border-radius: 10px; overflow: hidden; }
.ad-creative img { display: block; width: 100%; max-width: 970px; height: auto; aspect-ratio: 970 / 250; object-fit: contain; background: #fff; }
.ad-creative:hover img { filter: brightness(1.06); }
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--card); border-top: 1px solid var(--border); padding: 1rem; box-shadow: 0 -10px 30px rgba(0, 0, 0, .6); max-height: 80vh; overflow: auto; }
.consent > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.consent h2 { font: 700 1.15rem var(--sans); margin: 0 auto .5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}