/* Halloweenmarkt Heppenheim – statische Version (ohne WordPress/Avada) */

/* Schrift lokal eingebunden – kein Abruf von Google-Servern */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Bebas Neue", "Arial Narrow", "Instrument Sans", sans-serif;
  --orange: #f17e14;
  --orange-hot: #ff9a2e;
  --orange-deep: #d9620a;
  --orange-dark: #a84a00;   /* Orange auf hellem Grund, Kontrast ≥ 4,5:1 */
  --ink: #1a0f06;
  --night: #140b05;         /* identisch mit der Füllfarbe in kante-friedhof.svg */
  --bone: #fff4e2;
  --moon: #ffd98a;
  --white: #ffffff;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius: 999px;
  --wrap: 1180px;
  --header-h: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--orange);
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible { outline-color: var(--white); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .025em;
  margin: 0 0 0.55em;
}
h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
h3 { font-size: clamp(1.75rem, 3vw, 2.2rem); }
p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 1000;
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled, .site-header.is-open, .page-legal .site-header {
  background: var(--orange);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
}
.site-logo img { width: 190px; }
.site-nav { margin-right: auto; }
.site-nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { border-bottom-color: currentColor; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; margin: auto; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn:hover { background: transparent; color: var(--ink); transform: translateY(-1px); }
.btn svg { width: 1.9em; height: .8em; flex: none; fill: currentColor; transition: transform .5s var(--ease-out); }
.btn:hover svg { transform: translateY(-3px) rotate(-8deg) scale(1.1); }

.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--orange:hover { background: transparent; color: var(--orange-hot); }

/* ---------- Hero (ersetzt Slider Revolution) ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 56.25vw);
  min-height: max(420px, min(100svh, 56.25vw));
  background: #c2410c url("../img/hero-poster.webp") center / cover no-repeat;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__art {
  position: absolute;
  left: 41%;
  bottom: 21%;
  display: flex;
  align-items: center;
  gap: 1vw;
  width: min(46vw, 720px);
}
.hero__schriftzug { width: 60%; animation: rise .9s var(--ease-out) both; }
.hero__kuerbis { width: 40%; animation: rise .9s .25s ease-out both; }

@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.hero__controls {
  position: absolute;
  right: clamp(12px, 3vw, 32px);
  bottom: clamp(12px, 3vw, 28px);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: var(--white);
  cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn .icon-play, .icon-btn[aria-pressed="true"] .icon-pause { display: none; }
.icon-btn[aria-pressed="true"] .icon-play { display: block; }

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(48px, 8vw, 96px); }
.paper { background: var(--bone); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.split__media img { margin-inline: auto; max-height: 360px; width: auto; }
.lead { font-size: 1.3rem; font-weight: 600; }

.section-title { text-align: center; margin-bottom: 0; }

/* ---------- Karte (2-Klick-Lösung, ersetzt Google Maps) ---------- */
.map {
  position: relative;
  min-height: 440px;
  background: #e9e4dc;
}
.map iframe { display: block; width: 100%; height: 480px; border: 0; }
.map__consent {
  display: grid;
  place-items: center;
  min-height: 440px;
  padding: 32px 20px;
  text-align: center;
  background: var(--bone);
}
.map__consent-box { max-width: 620px; }
.map__consent-box p { font-size: 1rem; }
.map__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.map__address { font-style: normal; font-weight: 600; font-size: 1.15rem; margin-bottom: 12px; }
.map__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 10px clamp(20px, 5vw, 60px);
  font-size: .9rem;
  background: var(--white);
}
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Programm ---------- */
.program { display: grid; gap: clamp(28px, 4vw, 44px); }
.program h3 { margin-bottom: .9em; }
.program ul { margin: 0; padding-left: 1.2em; }
.program li { margin-bottom: .55em; }
.program li::marker { color: var(--orange-deep); }

.callout { padding: clamp(24px, 3.5vw, 40px); position: relative; background: var(--night); color: var(--bone); border-radius: 6px; }
.callout .tape span { background: var(--orange); color: var(--ink); }
.callout__time { font-family: var(--font-display); font-size: clamp(3.6rem, 9vw, 6rem); line-height: .95; letter-spacing: .02em; filter: url(#stempel); color: var(--orange-hot); margin: .2em 0 .25em; font-variant-numeric: tabular-nums; }
.callout a { color: var(--orange-hot); }
.callout p:last-child { margin-bottom: 0; }

.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 3px; }
.timeline::before { content: ""; position: absolute; left: 0; top: .6em; bottom: .6em; width: 3px; border-radius: 3px; background: var(--orange); }
.timeline li { position: relative; margin: 0; padding: 0 0 18px 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -9.5px; top: .45em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--bone);
}
.timeline time { font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.timeline .is-fire::before { background: var(--night); box-shadow: 0 0 0 4px var(--orange-hot); }
.timeline .is-fire time { color: var(--orange-dark); }

.program__cta { margin-top: clamp(28px, 4vw, 44px); }
.hands { margin-bottom: -1px; }
.hands img { width: 100%; }
.site-footer :focus-visible, .night :focus-visible, .marquee :focus-visible, .callout :focus-visible { outline-color: var(--orange-hot); }

/* ---------- Footer ---------- */
.site-footer {
  background: #000;
  color: var(--bone);
  padding-block: clamp(40px, 6vw, 72px) 36px;
  font-size: 1rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}
.site-footer h2 { font-size: 1.7rem; color: var(--orange-hot); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer li a { text-decoration: none; font-weight: 600; }
.site-footer li a:hover { text-decoration: underline; }
.social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.social svg { width: 22px; height: 22px; fill: currentColor; }
.site-footer__legal { border-top: 1px solid rgba(255,244,226,.22); padding-top: 22px; margin: 0; font-size: .95rem; }

.to-top {
  position: fixed;
  right: 18px; bottom: 22px;
  z-index: 80;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Rechtstexte ---------- */
.page-legal main { padding-top: calc(var(--header-h) + clamp(32px, 6vw, 64px)); padding-bottom: clamp(48px, 8vw, 96px); }
.legal { max-width: 860px; }
.legal h1 { margin-bottom: .3em; }
.legal h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin-top: 1.7em; }
.legal h3 { font-family: inherit; font-weight: 700; text-transform: none; line-height: 1.25; font-size: 1.2rem; margin-top: 1.4em; letter-spacing: 0; }
.legal address { font-style: normal; margin-bottom: 1em; }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: .4em; }
.legal .meta { font-size: 1rem; opacity: .85; }
.legal { overflow-wrap: anywhere; }

.error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.error-page img { width: 220px; margin: 0 auto 16px; }

/* ---------- Responsiv ---------- */
@media (max-width: 860px) {
  :root { --header-h: 76px; }
  body { font-size: 1.0625rem; }
  .site-logo img { width: 150px; }
  .nav-toggle { display: grid; }
  .site-header__cta { display: none; }
  .site-nav {
    display: none;
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    background: var(--orange);
    padding: 8px clamp(20px, 5vw, 60px) 20px;
    box-shadow: 0 12px 18px rgba(0,0,0,.18);
  }
  .site-header.is-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 14px 4px; font-size: 1.1rem; border-bottom: 1px solid rgba(0,0,0,.2); }
  .split { grid-template-columns: 1fr; }
  .split__media img { max-height: 220px; }
  .hero__art { width: 64vw; left: 30vw; top: 30%; bottom: auto; }
  .btn { padding: 13px 22px; }
  .map__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Bewegung reduzieren: keine Schleifen und keine Ortsbewegung – Farb- und Zustandswechsel bleiben als Rückmeldung erhalten */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; transition-duration: .15s !important; }
  .btn:hover, .btn:hover svg, .player__btn:hover { transform: none; }
}

@media print {
  .site-header, .to-top, .hero__video, .hero__controls, .audio, .map { display: none !important; }
  body { background: #fff; }
}

/* Navigation über dem dunklen Hero-Himmel: weiß, solange nicht gescrollt */
@media (min-width: 861px) {
  .page-home .site-header:not(.is-scrolled) .site-nav a { color: var(--white); }
}
.section--tight-bottom { padding-bottom: clamp(28px, 4vw, 42px); }
/* =====================================================================
   Halloween-Schicht: Dämmerung -> Nacht -> Friedhofsboden
   ===================================================================== */

/* Browser-Oberflächen */
::selection { background: var(--ink); color: var(--orange-hot); }
html { scrollbar-color: var(--orange-deep) var(--night); }
body { accent-color: var(--orange-deep); }
.svg-defs { position: absolute; }

/* Klebeband-Überschriften: gekippt und rau wie der Logo-Schriftzug */
.tape { letter-spacing: .03em; line-height: 1.15; text-wrap: balance; }
.tape span {
  display: inline-block;
  max-width: 100%;
  padding: .12em .4em .02em;
  background: var(--ink);
  color: var(--bone);
  transform: rotate(-2deg);
  filter: url(#rau);
}
.tape span + span { transform: rotate(1.2deg) translateX(.35em); margin-top: .12em; }
.tape--orange span { background: var(--orange); color: var(--ink); }
.tape--sm span { transform: rotate(-1.2deg); padding-inline: .5em; }
.section-title.tape { font-size: clamp(2.8rem, 7vw, 5rem); }

/* Info-Band: der schwarze Hügel trägt die Eckdaten */
.marquee { position: relative; z-index: 2; background: #000; color: var(--bone); margin-top: -1px; }
.marquee__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px) clamp(24px, 5vw, 72px);
  align-items: end;
  padding-block: clamp(20px, 3vw, 36px) clamp(18px, 2.5vw, 30px);
}
.marquee__title {
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 6rem);
  line-height: .9;
  letter-spacing: .02em;
  filter: url(#stempel);
}
.marquee__title span { display: block; color: var(--orange); }
.marquee__facts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px clamp(20px, 3vw, 40px);
  margin: 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(255, 244, 226, .25);
}
.marquee__facts dt { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-hot); }
.marquee__facts dd { margin: 0; font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Audio-Player (ersetzt MediaElement.js) */
.player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 340px);
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(255, 244, 226, .3);
  border-radius: var(--radius);
  font-size: .95rem;
}
.player__btn {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  cursor: pointer;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out);
}
.player__btn:hover { transform: scale(1.08); background: var(--orange-hot); }
.player__btn svg { width: 20px; height: 20px; fill: currentColor; }
.player__btn .icon-pause, .player__btn[aria-pressed="true"] .icon-play { display: none; }
.player__btn[aria-pressed="true"] .icon-pause { display: block; }
.player__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.player__label { font-weight: 700; }
.player__seek { width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.player__time { font-variant-numeric: tabular-nums; color: var(--orange-hot); font-weight: 600; min-width: 2.6em; text-align: right; }

/* Kanten */
.edge { position: absolute; left: 0; width: 100%; max-width: none; pointer-events: none; }
.edge--drip { top: calc(100% - 1px); height: max(110px, 7.7vw); }
.edge--graveyard { bottom: calc(100% - 1px); height: max(120px, 8.4vw); }

/* Intro */
.intro {
  position: relative;
  padding-top: calc(max(110px, 7.7vw) + clamp(24px, 4vw, 56px));
  /* läuft unten nahtlos in die Farbe des Standort-Abschnitts aus – keine harte Kante */
  background:
    linear-gradient(to bottom, rgba(217, 98, 10, 0) 45%, var(--orange-deep) 100%),
    radial-gradient(90% 70% at 72% 40%, var(--orange-hot) 0%, var(--orange) 60%, var(--orange-deep) 125%);
}
.timeline time { font-family: var(--font-display); font-weight: 400; font-size: 1.55em; line-height: 1.1; letter-spacing: .03em; }
.statement {
  font-size: clamp(1.55rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  max-width: 24ch;
  margin-bottom: .8em;
}
.intro p:not(.statement) { max-width: 62ch; }
.intro__spider { position: relative; align-self: start; padding-top: clamp(40px, 8vw, 120px); transform-origin: 50% -400px; animation: sway 7s ease-in-out infinite; }
.intro__spider::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(100% - clamp(40px, 8vw, 120px) - 30px);
  width: 2px; height: 600px;
  background: var(--ink);
}
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

/* Standort */

.map__consent { background: var(--bone); }
.map__footer { background: var(--bone); padding-bottom: calc(max(120px, 8.4vw) * .9); }

/* Nacht */
.night {
  position: relative;
  z-index: 1;
  padding-block: clamp(80px, 11vw, 150px) clamp(50px, 7vw, 90px);
  background: var(--night);
  color: var(--bone);
}
.night__sky {
  position: absolute; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle 46vw at 84% 18%, rgba(255, 190, 90, .2) 0%, rgba(255, 190, 90, .1) 30%, rgba(255, 190, 90, .03) 65%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 55%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 91% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 78%, #fff 50%, transparent 51%);
}
.moon {
  position: absolute;
  top: clamp(28px, 6vw, 70px); right: clamp(20px, 9vw, 150px);
  width: clamp(84px, 13vw, 180px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 30%, rgba(200, 140, 50, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 62%, rgba(200, 140, 50, .3) 0 13%, transparent 14%),
    radial-gradient(circle at 30% 30%, #fff3d0, var(--moon) 62%, #eeb45a);
}
.bat { position: absolute; fill: #000; width: clamp(38px, 5vw, 70px); will-change: transform; }
.bat--1 { top: 16%; right: 8%;  animation: flight-a 16s linear infinite; }
.bat--2 { top: 30%; right: 20%; width: clamp(26px, 3.4vw, 46px); animation: flight-b 21s linear infinite -6s; }
.bat--3 { top: 9%;  right: 28%; width: clamp(20px, 2.6vw, 36px); animation: flight-a 26s linear infinite -13s; }
.bat use { transform-origin: 50% 40%; animation: flap .32s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes flight-a {
  0%   { transform: translate(30vw, 12vh) scale(.6); }
  50%  { transform: translate(-40vw, -2vh) scale(1); }
  100% { transform: translate(-110vw, 9vh) scale(.7); }
}
@keyframes flight-b {
  0%   { transform: translate(24vw, -4vh) scale(.7); }
  45%  { transform: translate(-30vw, 8vh) scale(1.05); }
  100% { transform: translate(-105vw, -3vh) scale(.6); }
}
.night__inner { position: relative; }
.night h2 { font-size: clamp(2.3rem, 9vw, 4.6rem); margin-bottom: .6em; }
.night p { max-width: 60ch; }
.night__pumpkin img { animation: lantern 4.5s ease-in-out infinite; }
@keyframes lantern {
  0%, 100% { opacity: 1; filter: drop-shadow(0 6px 22px rgba(241, 126, 20, .55)); }
  42% { opacity: .82; filter: drop-shadow(0 6px 10px rgba(241, 126, 20, .25)); }
  48% { opacity: 1; }
  55% { opacity: .9; }
}

/* Programm */
.paper { position: relative; }
#programm { padding-top: calc(max(110px, 7.7vw) + clamp(10px, 2vw, 30px)); }
.program-head { overflow: clip; }
.web { position: absolute; top: 0; width: clamp(130px, 22vw, 330px); opacity: .5; pointer-events: none; }
.web--tl { left: 0; }
.web--tr { right: 0; }
.program-head { position: relative; text-align: center; margin-bottom: clamp(36px, 6vw, 72px); }
.dangler {
  width: clamp(96px, 12vw, 150px);
  margin: 0 auto 6px;
  transform: translateY(-105%);
  transform-origin: 50% 0;
}
.dangler.is-down { animation: drop 1.6s var(--ease-out) forwards, sway 6s 1.6s ease-in-out infinite; }
html:not(.js) .dangler { transform: none; }
@keyframes drop { 0% { transform: translateY(-105%); } 70% { transform: translateY(4%); } 100% { transform: translateY(0); } }
.program-head__meta { margin: 1.3em auto 0; font-weight: 600; line-height: 1.5; }
.program-head__meta span { display: block; }
.program-head__meta span + span { font-weight: 400; }
@media (min-width: 900px) {
  .program {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "essen kinder" "staende kinder" "aktion aktion" "allgemein zeitplan";
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .program__essen { grid-area: essen; }
  .program__kinder { grid-area: kinder; }
  .program__staende { grid-area: staende; }
  .program__allgemein { grid-area: allgemein; }
  .program__zeitplan { grid-area: zeitplan; }
  .program .callout { grid-area: aktion; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(28px, 5vw, 72px); align-items: center; }
  .program .callout h3 { grid-column: 1 / -1; }
  .program .callout p:not(.callout__time) { grid-column: 2; margin-bottom: .6em; }
  .program .callout .callout__time { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
}
.program p, .program li { max-width: 68ch; }

.to-top { background: var(--orange); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* Rechtstexte */
.page-legal main { position: relative; background: radial-gradient(80% 50% at 80% 0%, var(--orange-hot), var(--orange) 60%); }
.page-legal .legal h1 { margin-bottom: .6em; font-size: clamp(2rem, 8.4vw, 4.4rem); }
.error-page h1 { font-size: clamp(1.5rem, 6vw, 3.2rem); }

@media (max-width: 860px) {
  .marquee__inner { grid-template-columns: 1fr; }
  .player { width: 100%; }
  .intro__spider { padding-top: 0; order: -1; animation: none; }
  .intro__spider::before { display: none; }
  .intro__spider img { max-height: 150px; }
  .night__pumpkin img { max-height: 190px; }
  .moon { top: 22px; right: 22px; }
  .web { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .bat { display: none; }
  .dangler { transform: none; }
}

/* Feinschliff */
.marquee__countdown dd { color: var(--orange-hot); }
.btn svg:not([viewBox="0 0 100 40"]) { width: 1.25em; height: 1.25em; }
.btn:hover svg:not([viewBox="0 0 100 40"]) { transform: none; }
.timeline li:last-child::after { content: ""; position: absolute; left: -4px; top: calc(.45em + 18px); bottom: -2px; width: 8px; background: var(--bone); }
/* Logo über dem dunklen Abendhimmel hell, sobald gescrollt wird wieder original */
.page-home .site-header:not(.is-scrolled):not(.is-open) .site-logo img { filter: brightness(0) invert(1); }
.site-logo img { transition: filter .3s var(--ease-out); }
@media (max-width: 860px) { .marquee__facts { justify-content: flex-start; gap: 14px 32px; } .marquee__facts div { flex: 1 1 40%; } }

/* ---------- Datenschutz-Einstellungen (Einwilligungs-Banner) ---------- */
.consent {
  position: fixed;
  left: 50%; bottom: clamp(10px, 2vw, 22px);
  z-index: 200;
  transform: translateX(-50%);
  width: min(calc(100vw - 20px), 880px);
  max-height: calc(100svh - 20px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 10px;
  background: #000;
  color: var(--bone);
  border: 2px solid var(--orange);
  animation: consent-in .7s var(--ease-out) both;
}
@keyframes consent-in { from { opacity: 0; transform: translate(-50%, 28px); } to { opacity: 1; transform: translate(-50%, 0); } }
.consent h2 { font-size: 1.6rem; margin: 0 0 .55em; }
.consent p { margin: 0; font-size: .95rem; line-height: 1.55; max-width: 70ch; }
.consent a { color: var(--orange-hot); }
.consent__actions { display: grid; gap: 10px; }
.consent__actions .btn { justify-content: center; white-space: nowrap; }
.btn--bone { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--bone:hover { background: transparent; color: var(--bone); }
.consent :focus-visible { outline-color: var(--orange-hot); }
.site-footer .link-btn { font-weight: 600; text-decoration: none; text-align: left; }
.site-footer .link-btn:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .consent { grid-template-columns: 1fr; }
  .consent__actions { grid-template-columns: 1fr 1fr; }
  .consent__actions .btn { padding-inline: 12px; }
}
@media print { .consent { display: none !important; } }

/* Info-Band: Kalender-Button + Player nebeneinander */
.marquee__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.marquee__side .player { flex: 0 1 340px; width: auto; }
.marquee__ics { justify-content: center; min-height: 66px; }
@media (max-width: 860px) { .marquee__side .player, .marquee__ics { flex: 1 1 100%; } .marquee__ics { min-height: 0; } }

/* Karte: Mausrad/Wischen scrollt die Seite, bis die Karte per Klick aktiviert wird */
.map__shield {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid; place-items: end center;
  padding: 0 16px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.map__shield span {
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bone);
  font-size: .95rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out);
}
.map__shield:hover span, .map__shield:focus-visible span { background: var(--orange-deep); transform: translateY(-2px); }

/* =====================================================================
   Bewegung – nur wenn der Besucher Animationen nicht reduziert hat
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Einblenden beim Scrollen (JS setzt .rv / .is-in; ohne JS bleibt alles sichtbar) */
  .rv { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); }
  .rv.is-in { opacity: 1; translate: 0 0; }
  .rv-left { opacity: 0; translate: -34px 0; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); }
  .rv-left.is-in { opacity: 1; translate: 0 0; }
  li.rv:nth-child(2), li.rv-left:nth-child(2) { transition-delay: .07s; }
  li.rv:nth-child(3), li.rv-left:nth-child(3) { transition-delay: .14s; }
  li.rv:nth-child(4), li.rv-left:nth-child(4) { transition-delay: .21s; }
  li.rv:nth-child(5), li.rv-left:nth-child(5) { transition-delay: .28s; }
  li.rv:nth-child(6), li.rv-left:nth-child(6) { transition-delay: .35s; }
  li.rv:nth-child(7), li.rv-left:nth-child(7) { transition-delay: .42s; }
  li.rv:nth-child(8), li.rv-left:nth-child(8) { transition-delay: .49s; }
  .marquee__facts > .rv:nth-child(2) { transition-delay: .1s; }
  .marquee__facts > .rv:nth-child(3) { transition-delay: .2s; }
  .marquee__facts > .rv:nth-child(4) { transition-delay: .3s; }

  /* Klebeband wird „aufgeklatscht“ */
  .rv-tape span { opacity: 0; scale: 1.3; rotate: -7deg; transition: opacity .35s ease-out, scale .7s var(--ease-out), rotate .7s var(--ease-out); }
  .rv-tape.is-in span { opacity: 1; scale: 1; rotate: 0deg; }
  .rv-tape span + span { transition-delay: .12s; }

  /* Zeitstrahl wächst von oben */
  .timeline.rv-line::before { scale: 1 0; transform-origin: 50% 0; transition: scale 1.6s var(--ease-out); }
  .timeline.rv-line.is-in::before { scale: 1 1; }
  .timeline.rv-line li:last-child::after { display: none; }

  /* 17:30 Uhr */
  .rv-pop { opacity: 0; scale: .7; transition: opacity .5s ease-out, scale .9s var(--ease-out); }
  .rv-pop.is-in { opacity: 1; scale: 1; }

  /* Zombie-Hände kommen aus dem Boden */
  .hands { overflow: hidden; }
  .hands .rv-rise { translate: 0 62%; transition: translate 1.8s var(--ease-out); }
  .hands .rv-rise.is-in { translate: 0 0; }

  /* Tropfen lösen sich von der Kante */
  .drop {
    position: absolute; top: calc(100% + 8px); z-index: -1;
    width: 11px; height: 15px;
    border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
    background: #000;
    opacity: 0;
    animation: drip 7s cubic-bezier(.55, 0, .9, .4) infinite;
  }
  .drop--1 { left: 23%; animation-delay: 1.2s; }
  .drop--2 { left: 57%; animation-delay: 3.9s; width: 9px; height: 12px; }
  .drop--3 { left: 81%; animation-delay: 5.6s; }
  @keyframes drip {
    0%   { opacity: 0; transform: translateY(0) scaleY(.6); }
    8%   { opacity: 1; transform: translateY(40px) scaleY(1); }
    38%  { opacity: 1; transform: translateY(360px) scaleY(1.25); }
    42%, 100% { opacity: 0; transform: translateY(380px) scaleY(.4); }
  }

  /* Hero-Kürbis schwebt, Mond atmet, Sterne funkeln, Netze wehen */
  .hero__kuerbis { animation: rise .9s .25s var(--ease-out) both, hover-float 6s 1.2s ease-in-out infinite; }
  @keyframes hover-float { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -12px; rotate: 2.5deg; } }
  .moon { animation: moon-float 11s ease-in-out infinite; }
  @keyframes moon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
  .night__sky::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(2px 2px at 18% 30%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 33% 15%, #fff 50%, transparent 51%),
      radial-gradient(2px 2px at 48% 48%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 61% 22%, #fff 50%, transparent 51%),
      radial-gradient(2px 2px at 78% 70%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 94% 38%, #fff 50%, transparent 51%),
      radial-gradient(2px 2px at 8% 52%, #fff 50%, transparent 51%);
    animation: twinkle 3.4s ease-in-out infinite alternate;
  }
  @keyframes twinkle { from { opacity: .15; } to { opacity: 1; } }
  .web { transform-origin: 0 0; animation: web-sway 9s ease-in-out infinite; }
  .web--tr { transform-origin: 100% 0; animation-delay: -4s; }
  @keyframes web-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.4deg; } }

  /* Player pulsiert, solange Musik läuft */
  .player__btn[aria-pressed="true"] { animation: pulse 1.6s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 46, .65); } 100% { box-shadow: 0 0 0 16px rgba(255, 154, 46, 0); } }

  /* Spinne im Intro blinzelt nicht – aber sie wippt beim Überfahren */
  .intro__spider img { transition: translate .6s var(--ease-out); }
  .intro__spider:hover img { translate: 0 18px; }
}

/* wehende Netze dürfen nie seitlich überstehen */
.paper, .page-legal main { overflow-x: clip; }

/* =====================================================================
   Halloween-Feeling II: Geist, Augen, Nebel, Laterne, Schwarm, Scroll-Spinne
   ===================================================================== */
.btn--ghost { background: transparent; border-color: rgba(255, 244, 226, .45); color: var(--bone); }
.btn--ghost:hover { background: var(--bone); color: var(--ink); }
.marquee__side .btn { min-height: 66px; }

/* Navigation: Unterstrich zeichnet sich von links */
@media (min-width: 861px) {
  .site-nav a { position: relative; }
  .site-nav a:hover, .site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { border-bottom-color: transparent; }
  .site-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: currentColor; scale: 0 1; transform-origin: 0 50%; transition: scale .35s var(--ease-out); }
  .site-nav a:hover::after, .site-nav a[aria-current]::after { scale: 1 1; }
}

/* Geist */
.ghost { position: absolute; left: 6%; top: 14%; width: clamp(54px, 7vw, 104px); fill: var(--bone); opacity: .9; filter: drop-shadow(0 8px 18px rgba(255, 244, 226, .25)); }
.ghost__eye { fill: var(--night); }
.ghost--404 { position: static; display: block; width: 170px; margin: 0 auto 14px; fill: var(--bone); opacity: 1; filter: drop-shadow(0 10px 14px rgba(26, 15, 6, .3)); }

/* Augen im Dunkeln */
.eyes { position: absolute; display: flex; gap: 9px; pointer-events: none; }
.eyes i { width: 15px; height: 10px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 55%, #000 0 24%, var(--moon) 26%); }
.site-footer { position: relative; overflow: hidden; }
.eyes--f1 { right: 7%; top: 14px; }
/* Nebel */
.fog { position: absolute; left: -10%; right: -10%; bottom: -2%; height: 30%; pointer-events: none; opacity: .22;
  background:
    radial-gradient(38% 60% at 12% 80%, rgba(255, 244, 226, .38), transparent 70%),
    radial-gradient(30% 50% at 38% 95%, rgba(255, 244, 226, .3), transparent 70%),
    radial-gradient(42% 65% at 66% 85%, rgba(255, 244, 226, .34), transparent 70%),
    radial-gradient(32% 55% at 92% 95%, rgba(255, 244, 226, .3), transparent 70%);
  filter: blur(14px);
}
.hero .fog { opacity: .2; bottom: 0; height: 26%; }

/* Flamme am Halloweenfeuer */
.flame { display: inline-block; width: .7em; height: .95em; vertical-align: -.08em; margin-left: .15em; transform-origin: 50% 100%; }
.flame__outer { fill: var(--orange-deep); }
.flame__inner { fill: var(--moon); }

/* Hero-Schwarm: Standard unsichtbar, Bewegung nur unten im Motion-Block */
.hero__swarm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.swarm-bat { position: absolute; left: 14%; top: 34%; width: clamp(26px, 3.6vw, 56px); fill: #000; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ghost { animation: ghost-drift 14s ease-in-out infinite; }
  @keyframes ghost-drift {
    0%, 100% { translate: 0 0; rotate: -4deg; opacity: .9; }
    25% { translate: 5vw -18px; rotate: 3deg; }
    50% { translate: 11vw 8px; rotate: -2deg; opacity: .55; }
    75% { translate: 4vw 22px; rotate: 4deg; }
  }
  .ghost--404 { animation: hover-float 5s ease-in-out infinite; }

  .eyes i { animation: blink 6.5s infinite; }
  .eyes--f1 i { animation-delay: -4.1s; }
  @keyframes blink { 0%, 91%, 100% { scale: 1 1; } 94%, 96% { scale: 1 .08; } }
  .eyes { animation: eyes-look 9s ease-in-out infinite; }
  @keyframes eyes-look { 0%, 40%, 100% { translate: 0 0; } 50%, 85% { translate: 7px 0; } }

  .fog { animation: fog-drift 38s linear infinite alternate; }
  @keyframes fog-drift { from { translate: -7% 0; } to { translate: 7% 0; } }

  .flame { animation: flicker .9s ease-in-out infinite alternate; }
  @keyframes flicker { 0% { scale: 1 1; rotate: -3deg; } 50% { scale: .92 1.08; rotate: 2deg; } 100% { scale: 1.05 .94; rotate: -1deg; } }

  /* Laternen-Flackern im Titel */
  .marquee__title span { animation: lamp 9s linear infinite; }
  @keyframes lamp { 0%, 86%, 100% { opacity: 1; } 87% { opacity: .55; } 88% { opacity: 1; } 90% { opacity: .4; } 91.500% { opacity: 1; } 93% { opacity: .7; } 94% { opacity: 1; } }

  /* Schwarm bricht beim Laden aus dem Spukschloss */
  .swarm-bat { animation: swarm 3.2s cubic-bezier(.3, .1, .3, 1) .6s both; }
  .swarm-bat use { transform-origin: 50% 40%; animation: flap .22s ease-in-out infinite alternate; }
  .swarm-bat--1 { --dx: 70vw; --dy: -34vh; }
  .swarm-bat--2 { --dx: 88vw; --dy: -12vh; animation-delay: .72s; }
  .swarm-bat--3 { --dx: 54vw; --dy: -42vh; animation-delay: .8s; }
  .swarm-bat--4 { --dx: 96vw; --dy: -26vh; animation-delay: .9s; }
  .swarm-bat--5 { --dx: 62vw; --dy: -8vh; animation-delay: 1s; }
  .swarm-bat--6 { --dx: 80vw; --dy: -46vh; animation-delay: 1.08s; }
  .swarm-bat--7 { --dx: 100vw; --dy: -38vh; animation-delay: 1.2s; }
  @keyframes swarm {
    0% { opacity: 0; translate: 0 0; scale: .2; }
    12% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.5; }
  }

  /* Abschnitte außerhalb des Bildschirms pausieren ihre Schleifen */
  .is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
}

/* kleine Klebebänder: nur raue Kante, damit die Schrift klar lesbar bleibt */
.tape--sm span { filter: url(#rau); }

/* ---------- Häufige Fragen ---------- */
.faq { margin-top: clamp(56px, 8vw, 104px); }
.faq h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: .7em; }
.faq__list { max-width: 860px; border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid rgba(26, 15, 6, .3); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 4px;
  font-weight: 700; font-size: 1.1rem; line-height: 1.35;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: linear-gradient(var(--orange-deep), var(--orange-deep)) center / 100% 3px no-repeat, linear-gradient(var(--orange-deep), var(--orange-deep)) center / 3px 100% no-repeat;
  transition: rotate .35s var(--ease-out);
}
.faq__item[open] summary::after { rotate: 135deg; }
.faq__item summary:hover { color: var(--orange-dark); }
.faq__item p { margin: 0; padding: 0 44px 20px 4px; max-width: 68ch; }

@media (max-width: 860px) { .marquee__side .btn { flex: 1 1 100%; justify-content: center; min-height: 0; } }

/* ---------- Feinschliff II ---------- */
/* Titel auf kleinen Displays: nur raue Kante, damit er gestochen lesbar bleibt */
@media (max-width: 860px) { .marquee__title, .callout__time { filter: url(#rau); } }
/* weniger Leerraum zwischen den Häufigen Fragen und den Zombie-Händen */
#programm { padding-bottom: clamp(36px, 5vw, 64px); }
/* ohne JavaScript: Bedienelemente ausblenden, die dann nichts tun würden */
html:not(.js) .player, html:not(.js) .hero__controls, html:not(.js) [data-map-load], html:not(.js) .map__consent-box label, html:not(.js) [data-consent-open] { display: none; }
/* Aufklapp-Fragen: deutlicher Tastatur-Fokus */
.faq__item summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* lange Wörter im Fließtext sauber trennen */
.program li, .program p, .intro p, .night p, .faq__item p, .legal p, .legal li { hyphens: auto; -webkit-hyphens: auto; }

/* ---------- Standort: gerahmtes Kartenfenster ---------- */
.standort {
  position: relative;
  background: var(--orange-deep);
  padding-block: clamp(56px, 8vw, 104px) calc(max(120px, 8.4vw) + clamp(16px, 3vw, 40px));
}
.standort .section-title { margin-bottom: clamp(28px, 5vw, 56px); }
.standort__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.standort__info .map__address { font-family: var(--font-display); font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 400; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 22px; }
.standort__links { display: grid; gap: 12px; justify-items: start; }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bone); }
.map-frame {
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 18px 38px rgba(26, 15, 6, .32);
}
.map-frame .map { min-height: 0; background: var(--bone); }
.map-frame .map iframe { height: clamp(320px, 42vw, 460px); filter: sepia(.38) saturate(1.25) hue-rotate(-8deg) contrast(1.04); }
.map-frame .map__consent { min-height: clamp(320px, 42vw, 460px); background:
  radial-gradient(60% 70% at 50% 45%, rgba(241, 126, 20, .18), transparent 70%), var(--bone); }
.map__pin { width: 54px; height: 54px; margin: 0 auto 12px; fill: var(--orange-deep); }
.map-frame .map__footer { padding: 10px 16px; border-top: 1px solid rgba(26, 15, 6, .2); font-size: .85rem; }
@media (max-width: 860px) {
  .standort__grid { grid-template-columns: 1fr; }
  .standort__info { text-align: center; }
  .standort__links { justify-items: stretch; }
  .standort__links .btn { justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .map__pin { animation: pin-bob 2.6s ease-in-out infinite; }
  @keyframes pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
}

/* ---------- Start-Popup: mit oder ohne Sound ---------- */
.welcome {
  width: min(calc(100vw - 32px), 520px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: clamp(24px, 5vw, 40px);
  border: 2px solid var(--orange);
  border-radius: 14px;
  background: var(--night);
  color: var(--bone);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  overflow-y: auto;
}
.welcome::backdrop { background: rgba(10, 5, 2, .82); }
.welcome__kuerbis { width: 150px; margin: 0 auto 8px; }
.welcome h2 { font-size: clamp(2rem, 7vw, 2.8rem); margin-bottom: .5em; }
.welcome p { font-size: 1rem; line-height: 1.55; margin: 0 auto 1.4em; max-width: 40ch; }
.welcome__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome__actions .btn { justify-content: center; padding-inline: 14px; }
.welcome :focus-visible { outline-color: var(--orange-hot); }
@media (max-width: 420px) { .welcome__actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .welcome[open] { animation: welcome-in .6s var(--ease-out) both; }
  .welcome[open]::backdrop { animation: backdrop-in .4s ease-out both; }
  @keyframes welcome-in { from { opacity: 0; scale: .9; translate: 0 18px; } to { opacity: 1; scale: 1; translate: 0 0; } }
  @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  .welcome__kuerbis { animation: lantern 4.5s ease-in-out infinite; }
}
@media print { .welcome { display: none !important; } }