/* ============================================================
   Gedenkportrait — „Der schönere Ort"
   Das Bild ist die Website: ein gemaltes Panorama als Bühne,
   Funktionen sind Orte darin. Tokens: Morgenlicht-Palette.
   ============================================================ */
:root {
  --rose:      #DFA391;  /* Himmelsrosé */
  --gold:      #E7B97F;  /* Morgengold */
  --gold-tief: #C4924E;
  --elfenbein: #F2EADC;  /* Marmor, Briefbogen */
  --wolke:     #A8B6C6;  /* Wolkenblau */
  --lorbeer:   #31493C;  /* Tiefgrün — Anker */
  --nacht:     #2B2026;  /* Dämmerpflaume — Text auf Hell, Vignette */
  --tinte:     #3A3028;  /* Fließtext auf Briefbogen */

  --display: 'Fraunces', Georgia, serif;
  --body: 'Switzer', system-ui, sans-serif;

  --fs-h1: clamp(2.2rem, 4.6vw, 3.9rem);
  --fs-h2: clamp(1.55rem, 2.6vw, 2.2rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--nacht);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;               /* die Bühne scrollt nicht */
}
body.seite-brief { overflow: auto; overflow-x: hidden; }

img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--body); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.spring {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--elfenbein); color: var(--tinte);
  padding: 0.6rem 1rem; border-radius: 8px; text-decoration: none;
  transition: top 0.2s;
}
.spring:focus { top: 1rem; }

/* ---------- Wortmarke & Knöpfe ---------- */
.wortmarke {
  font-family: var(--display); font-style: italic; font-weight: 450;
  font-size: 1.35rem; color: var(--elfenbein); text-decoration: none;
  letter-spacing: 0.01em;
}
.wortmarke span { color: var(--gold); font-style: normal; }

.knopf {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 0.98rem;
  padding: 0.85rem 1.6rem; border: none; border-radius: 999px;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, background 0.3s;
}
.knopf--gold {
  background: linear-gradient(170deg, #F2CD96, var(--gold) 55%, #D9A45F);
  color: #3D2B14;
  box-shadow: 0 6px 26px rgba(231,185,127,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.knopf--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(231,185,127,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.knopf--zart {
  background: rgba(242,234,220,0.12); color: var(--elfenbein);
  box-shadow: inset 0 0 0 1.5px rgba(242,234,220,0.4);
}
.knopf--zart:hover { background: rgba(242,234,220,0.22); transform: translateY(-2px); }

.klein { font-size: 0.8rem; color: rgba(242,234,220,0.75); }

/* ============================================================
   BÜHNE (index)
   ============================================================ */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1.1rem, 3vw, 2.2rem);
  background: linear-gradient(rgba(43,32,38,0.55), transparent);
}
.leiste__nav { display: flex; align-items: center; gap: 1.4rem; }
.leiste__nav button {
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; font-weight: 500; color: rgba(242,234,220,0.85);
  border-bottom: 1px dashed rgba(242,234,220,0.35); padding-bottom: 2px;
}
.leiste__nav button:hover { color: var(--gold); border-color: var(--gold); }
.leiste .knopf { padding: 0.6rem 1.2rem; font-size: 0.88rem; }

.buehne { position: fixed; inset: 0; overflow: hidden; }

.welt {
  position: absolute; left: 0; top: 0;
  width: 2752px; height: 1536px;
  transform-origin: 0 0;
  will-change: transform;
}
.welt__bild { width: 2752px; height: 1536px; max-width: none; user-select: none; -webkit-user-drag: none; }

/* Der leere Rahmen wird lebendig: langsame Überblendung der Motive */
.rahmen-leinwand {
  position: absolute;
  left: 44.7%; top: 36.2%; width: 11.7%; height: 24.8%;
  overflow: hidden; border-radius: 2px;
  box-shadow: inset 0 0 30px rgba(43,32,38,0.35);
}
.rahmen-leinwand img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0; transition: opacity 3.5s ease;
}
.rahmen-leinwand img.zeigt { opacity: 0.96; }

/* Orte (Hotspots) */
.ort {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--gegen, 1));
  transition: transform 1.9s cubic-bezier(.45,0,.25,1);
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  background: none; border: none; cursor: pointer; z-index: 5;
}
@media (prefers-reduced-motion: reduce) { .ort { transition: none; } }
.ort__funke {
  width: 19px; height: 19px; border-radius: 50%;
  background: radial-gradient(circle, #FFF3D8 0%, var(--gold) 52%, rgba(231,185,127,0) 74%);
  box-shadow: 0 0 26px 10px rgba(231,185,127,0.7), 0 0 4px 1px rgba(255,243,216,0.9);
  position: relative;
}
.ort__funke::after {
  content: ""; position: absolute; inset: -11px; border-radius: 50%;
  border: 1.5px solid rgba(242,234,220,0.7);
  animation: funkenPuls 3s ease-in-out infinite;
}
@keyframes funkenPuls {
  0%, 100% { transform: scale(0.75); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0.15; }
}
.ort__name {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--elfenbein);
  background: rgba(43,32,38,0.55); backdrop-filter: blur(3px);
  padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
}
.ort:hover .ort__name, .ort:focus-visible .ort__name { opacity: 1; transform: none; }

/* Dämmerung + wanderndes Licht (Signature) */
.daemmerung {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  background: radial-gradient(circle calc(var(--lr, 900) * 1px) at calc(var(--lx, 50) * 1%) calc(var(--ly, 45) * 1%),
    rgba(43,32,38,0) 0%,
    rgba(43,32,38,0.16) 55%,
    rgba(43,32,38,0.66) 100%);
}
.vorhang {
  position: absolute; inset: 0; pointer-events: none; z-index: 11;
  background: var(--nacht); opacity: 0;
}
.kein-js .vorhang { opacity: 0; }

/* Entrée-Text (Station 0) */
.entree {
  position: absolute; z-index: 20;
  left: clamp(1.2rem, 5vw, 5rem); top: 50%; transform: translateY(-50%);
  max-width: 30rem; color: var(--elfenbein);
  text-shadow: 0 2px 26px rgba(43,32,38,0.75);
}
.entree::before {
  content: ""; position: absolute; z-index: -1;
  inset: -22% -30% -22% -60%;
  background: radial-gradient(80% 90% at 38% 50%, rgba(32,22,28,0.66), rgba(32,22,28,0.38) 55%, transparent 78%);
  filter: blur(6px);
  pointer-events: none;
}
.entree__gruss {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem;
}
.entree h1 {
  font-family: var(--display); font-weight: 380;
  font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.01em;
  text-wrap: balance; margin-bottom: 1.1rem;
}
.entree h1 em { font-style: italic; color: var(--gold); font-weight: 420; }
.entree__sub { max-width: 26rem; color: rgba(242,234,220,0.92); margin-bottom: 1.7rem; }
.entree__sub strong { color: var(--gold); font-weight: 600; }
.entree .klein { margin-top: 0.8rem; }

/* Galerist-Zeile */
.galerist {
  position: absolute; z-index: 20; left: 50%; bottom: clamp(4.6rem, 9vh, 6rem);
  transform: translateX(-50%);
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: rgba(242,234,220,0.92);
  text-shadow: 0 2px 18px rgba(43,32,38,0.8);
  text-align: center; max-width: min(80vw, 40rem);
  pointer-events: none;
}
.galerist::before {
  content: "— "; color: var(--gold);
}

/* Steuerung */
.steuer {
  position: absolute; z-index: 30; left: 50%; bottom: 1.3rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
}
.steuer > button {
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  border: 1px solid rgba(242,234,220,0.4);
  background: rgba(43,32,38,0.5); backdrop-filter: blur(4px);
  color: var(--elfenbein); font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.steuer > button:hover { background: rgba(231,185,127,0.3); transform: scale(1.07); }
.punkte { display: flex; gap: 0.55rem; }
.punkte button {
  width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: rgba(242,234,220,0.35);
  transition: background 0.25s, transform 0.25s;
}
.punkte button[aria-current="true"] { background: var(--gold); transform: scale(1.35); }

/* Overlay-Karten (Passepartout) */
.karte {
  position: fixed; z-index: 80;
  right: clamp(1rem, 4vw, 3.2rem); top: 50%; transform: translateY(-50%);
  width: min(92vw, 460px); max-height: min(84vh, 700px); overflow-y: auto;
  background:
    linear-gradient(173deg, rgba(255,252,246,0.98), rgba(242,234,220,0.98)),
    var(--elfenbein);
  border-radius: 14px;
  border: 1px solid rgba(196,146,78,0.4);
  box-shadow: 0 30px 90px rgba(24,16,20,0.6), inset 0 0 0 6px rgba(255,255,255,0.5), inset 0 0 0 7px rgba(196,146,78,0.25);
  padding: 2rem 1.9rem 2.1rem;
}
.karte[hidden] { display: none; }
.karte__zu {
  position: absolute; top: 0.8rem; right: 1rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: rgba(58,48,40,0.5); padding: 0.2rem;
}
.karte__zu:hover { color: var(--tinte); }
.karte h2 {
  font-family: var(--display); font-weight: 420; font-size: var(--fs-h2);
  line-height: 1.15; margin-bottom: 0.4rem; letter-spacing: -0.01em;
}
.karte h2 em { font-style: italic; color: var(--gold-tief); }
.karte__zeile {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-tief); margin-bottom: 0.8rem;
}
.karte p { color: rgba(58,48,40,0.88); font-size: 0.95rem; }
.karte .knopf { margin-top: 1.3rem; }
.karte .knopf--gold { display: block; text-align: center; }

/* Vorher/Nachher-Schieber */
.wandel { position: relative; margin: 1.1rem 0 0.4rem; border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(58,48,40,0.3); }
.wandel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.wandel__nach { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--schnitt, 50%)); }
.wandel__griff {
  position: absolute; top: 0; bottom: 0; left: var(--schnitt, 50%);
  width: 2px; background: rgba(255,252,246,0.9); pointer-events: none;
  box-shadow: 0 0 12px rgba(43,32,38,0.5);
}
.wandel__griff::after {
  content: "↔"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--elfenbein); color: var(--tinte);
  display: grid; place-items: center; font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(43,32,38,0.45);
}
.wandel input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.wandel__marke {
  position: absolute; bottom: 0.6rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--elfenbein);
  background: rgba(43,32,38,0.55); padding: 0.22rem 0.6rem; border-radius: 999px;
  pointer-events: none;
}
.wandel__marke--vor { left: 0.6rem; }
.wandel__marke--nach { right: 0.6rem; }
.wandel__bu { font-size: 0.8rem; color: rgba(58,48,40,0.65); margin-top: 0.55rem; }

/* Ablauf (echte Sequenz — erzählte Zeit statt Nummern) */
.ablauf { list-style: none; margin-top: 1.2rem; display: grid; gap: 1.1rem; }
.ablauf li { display: grid; gap: 0.15rem; padding-left: 1.1rem; border-left: 2px solid rgba(196,146,78,0.45); }
.ablauf .wann {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-tief);
}
.ablauf h3 { font-family: var(--display); font-weight: 480; font-size: 1.12rem; }
.ablauf p { font-size: 0.9rem; }

/* FAQ */
.frage { border-bottom: 1px solid rgba(58,48,40,0.16); }
.frage summary {
  cursor: pointer; list-style: none; position: relative;
  font-family: var(--display); font-weight: 480; font-size: 1.05rem;
  padding: 0.95rem 2.2rem 0.95rem 0;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 1.35rem; color: var(--gold-tief);
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.frage[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.frage p { padding-bottom: 1rem; font-size: 0.9rem; }

/* Zitat (Horizont) */
.zitat {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.18rem; line-height: 1.5; color: var(--tinte);
  margin-top: 0.9rem;
}
.zitat footer { font-family: var(--body); font-style: normal; font-size: 0.8rem; color: rgba(58,48,40,0.6); margin-top: 0.5rem; }

/* Rechtliches, dezent */
.fussnote {
  position: fixed; z-index: 25; left: 1.1rem; bottom: 1.1rem;
  display: flex; gap: 0.9rem; align-items: center;
}
.fussnote a { font-size: 0.7rem; color: rgba(242,234,220,0.5); text-decoration: none; }
.fussnote a:hover { color: rgba(242,234,220,0.85); }

/* Statischer Fallback ohne JS */
.still { display: none; }
.kein-js .still {
  display: block; position: relative; z-index: 90;
  background: var(--nacht); color: var(--elfenbein);
  padding: 5rem clamp(1.2rem, 5vw, 4rem); min-height: 100vh; overflow: auto;
}
.kein-js .buehne, .kein-js .galerist, .kein-js .steuer, .kein-js .entree { display: none; }
.kein-js body { overflow: auto; }
.still img { max-width: 720px; border-radius: 10px; margin: 1.5rem 0; }
.still h1 { font-family: var(--display); font-size: var(--fs-h1); font-weight: 380; max-width: 22ch; }
.still a { color: var(--gold); }

/* ---------- Responsive Bühne ---------- */
@media (max-width: 900px) {
  .leiste__nav button { display: none; }
  .entree {
    left: 50%; top: auto; bottom: clamp(6.4rem, 14vh, 9rem);
    transform: translateX(-50%);
    width: min(92vw, 30rem); text-align: center;
  }
  .entree::before {
    inset: -18% -14vw -110% -14vw;
    background: linear-gradient(rgba(32,22,28,0) 0%, rgba(32,22,28,0.55) 26%, rgba(32,22,28,0.78) 60%);
    filter: blur(4px);
  }
  .entree__sub { margin-left: auto; margin-right: auto; font-size: 0.94rem; }
  .entree .klein { font-size: 0.72rem; }
  .galerist { bottom: 4.4rem; font-size: 0.95rem; width: 92vw; }
  body[data-station="0"] .galerist { opacity: 0; }
  .steuer { bottom: 1rem; }
  .fussnote { display: none; }
  .karte {
    right: 50%; transform: translate(50%, -50%);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ort__funke::after { animation: none; }
  .rahmen-leinwand img { transition: none; }
  .knopf, .steuer > button { transition: none; }
}