/* Gedenkblüte — Die Welt. Setzt basis.css voraus (Farben, Schrift, Kopf, Knöpfe).
   Hier steht nur, was allein die Welt betrifft. */

/* Die Welt ist eine Bühne, kein Dokument: Sie wird nicht gescrollt. */
html, body { height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }

/* ---------- Bühne ---------- */

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

.ebene {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms;
}
.ebene[data-aktiv="true"] { opacity: 1; visibility: visible; }

.ebene__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Die Weltfläche trägt Bild UND Ortsmarken gemeinsam. Ihre Maße setzt das
   Skript exakt auf die formatfüllende Bildgeometrie — dadurch bleiben die
   Marken bei jeder Fensterform genau auf ihrer Stelle in der Landschaft,
   und jede Bewegung der Fläche nimmt sie mit. */
.welt-flaeche {
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform;
}
.welt-flaeche > img { display: block; width: 100%; height: 100%; }

/* Der Film legt sich über das Standbild und übernimmt erst, wenn er läuft. */
.welt-film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1800ms ease;
  pointer-events: none;
}
.welt-flaeche[data-film="laeuft"] .welt-film { opacity: 1; }

/* Die Karte atmet sehr langsam — kaum merklich, aber nie ganz still. */
.karte .welt-flaeche {
  animation: atmen 90s ease-in-out infinite alternate;
}
@keyframes atmen {
  from { transform: scale(1.03) translate3d(-0.5%, 0, 0); }
  to   { transform: scale(1.08) translate3d(0.5%, -0.7%, 0); }
}

/* Beim Hineinfahren übernimmt die Fahrt und das Atmen pausiert. */
.karte[data-faehrt="true"] .welt-flaeche {
  animation: none;
  transition: transform 1500ms var(--fahrt);
}
.karte[data-faehrt="true"] .marken { opacity: 0; transition: opacity 500ms ease; }

.ebene__schleier {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(12, 22, 17, 0.55) 100%),
    linear-gradient(to bottom, rgba(12, 22, 17, 0.45) 0%, transparent 22%, transparent 62%, rgba(12, 22, 17, 0.7) 100%);
  pointer-events: none;
}

/* ---------- Ortsmarken ---------- */

.marken { position: absolute; inset: 0; }

.marke {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0;
  color: var(--creme);
  font-family: var(--serif);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 0.7rem;
  /* Das Auftauchen ist ein Übergang, keine Animation: Der sichtbare Zustand
     steht als Endwert im Stylesheet. Führt ein Browser den Übergang nicht aus,
     stehen die Marken trotzdem da — statt unsichtbar zu bleiben. */
  opacity: 0;
  transition: opacity 1500ms var(--fahrt);
  transition-delay: var(--verzug, 0s);
}
.marken[data-da="true"] .marke { opacity: 1; }

.marke__punkt {
  position: relative;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--creme);
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.5), 0 0 26px 7px rgba(200, 169, 126, 0.5);
  transition: transform 700ms var(--fahrt), box-shadow 700ms ease;
}
.marke__punkt::after {
  content: ""; position: absolute; inset: -13px;
  border: 1px solid rgba(244, 239, 230, 0.4);
  border-radius: 50%;
  animation: puls 5s ease-out infinite;
}
@keyframes puls {
  0%   { transform: scale(0.7); opacity: 0; }
  35%  { opacity: 0.75; }
  100% { transform: scale(1.9); opacity: 0; }
}

.marke__name {
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 2px 22px rgba(12, 22, 17, 0.95), 0 1px 4px rgba(12, 22, 17, 0.8);
  opacity: 0.85;
  transition: opacity 500ms ease, letter-spacing 700ms var(--fahrt);
  white-space: nowrap;
}
.marke__form {
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--creme-still);
  text-transform: none;
  opacity: 0;
  max-height: 0;
  transition: opacity 600ms ease, max-height 600ms ease;
  text-shadow: 0 2px 18px rgba(12, 22, 17, 0.9);
}

.marke:hover .marke__punkt,
.marke:focus-visible .marke__punkt {
  transform: scale(1.5);
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.8), 0 0 42px 14px rgba(200, 169, 126, 0.65);
}
.marke:hover .marke__name,
.marke:focus-visible .marke__name { opacity: 1; letter-spacing: 0.24em; }
.marke:hover .marke__form,
.marke:focus-visible .marke__form { opacity: 0.9; max-height: 2rem; }
.marke:focus { outline: none; }
.marke:focus-visible { outline: 1px solid rgba(244, 239, 230, 0.5); outline-offset: 22px; }

/* ---------- Klang (vorbereitet) ---------- */

.klang { display: inline-flex; align-items: center; gap: 0.55rem; }
.klang__wellen { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
.klang__wellen i {
  width: 2px; background: currentColor; height: 4px;
  display: block; border-radius: 1px;
  transition: height 300ms ease;
}
.klang[aria-pressed="true"] .klang__wellen i { animation: welle 2.6s ease-in-out infinite; }
.klang[aria-pressed="true"] .klang__wellen i:nth-child(2) { animation-delay: 0.5s; }
.klang[aria-pressed="true"] .klang__wellen i:nth-child(3) { animation-delay: 1s; }
@keyframes welle {
  0%, 100% { height: 4px; }
  50% { height: 13px; }
}

/* ---------- Bildunterschrift der Karte ---------- */

.geleit {
  position: absolute;
  left: 50%; bottom: clamp(2.2rem, 6vh, 4.5rem);
  transform: translateX(-50%);
  text-align: center;
  z-index: 15;
  padding: 0 1.5rem;
  max-width: 46rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1800ms var(--fahrt) 800ms;
}
.geleit[data-da="true"] { opacity: 1; }
/* Beim Betreten eines Ortes tritt das Geleit ohne Verzögerung zurück. */
.geleit--fort { opacity: 0; transition-delay: 0s; transition-duration: 500ms; }
.geleit__zeile {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--creme);
  text-shadow: 0 2px 30px rgba(12, 22, 17, 0.95);
}
.geleit__hinweis {
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme-still);
  opacity: 0.75;
  text-shadow: 0 2px 20px rgba(12, 22, 17, 0.9);
}

/* ---------- Der Bereich ---------- */

.bereich { z-index: 10; }
.bereich .ebene__bild { transform: scale(1.14); transition: transform 2600ms var(--fahrt); }
.bereich[data-aktiv="true"] .ebene__bild { transform: scale(1); }

.bereich__inhalt {
  position: absolute;
  left: clamp(1.4rem, 6vw, 6rem);
  bottom: clamp(2.5rem, 9vh, 6rem);
  max-width: min(34rem, 82vw);
  z-index: 16;
}
.bereich__form {
  font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  text-shadow: 0 2px 20px rgba(12, 22, 17, 0.9);
}
.bereich__name {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 3px 40px rgba(12, 22, 17, 0.95);
}
.bereich__text {
  margin-top: 1.3rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.72;
  color: var(--creme-still);
  text-shadow: 0 2px 24px rgba(12, 22, 17, 0.95);
}
.bereich__wege { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

.zurueck {
  position: absolute;
  top: 50%; left: clamp(1rem, 2.5vw, 2.2rem);
  transform: translateY(-50%);
  z-index: 18;
  display: flex; align-items: center; gap: 0.7rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  rotate: 180deg;
}

/* Die Inhalte des Bereichs kommen erst, wenn die Fahrt zur Ruhe kommt. */
.bereich__inhalt, .zurueck { opacity: 0; transition: opacity 800ms ease 700ms; }
.bereich[data-aktiv="true"] .bereich__inhalt,
.bereich[data-aktiv="true"] ~ .zurueck { opacity: 1; }

/* ---------- Ladeschleier ---------- */

.schwelle {
  position: fixed; inset: 0; z-index: 60;
  background: var(--tinte-tief);
  display: grid; place-items: center;
  transition: opacity 1400ms ease, visibility 1400ms;
}
.schwelle[hidden] { opacity: 0; visibility: hidden; display: grid; }
.schwelle__wort {
  font-size: 0.82rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--creme-still);
  animation: pulsen 3.4s ease-in-out infinite;
}
@keyframes pulsen { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* ---------- Kleine Schirme ---------- */

@media (max-width: 760px) {
  .marke__name { font-size: 0.82rem; letter-spacing: 0.1em; }
  .marke__form { display: none; }
  .kopf__werkzeuge .nur-weit { display: none; }
  .geleit { bottom: 1.6rem; }
  .zurueck { writing-mode: horizontal-tb; rotate: none; top: auto; bottom: 1.5rem; left: 50%; transform: translateX(-50%); }
}

/* ---------- Wer Bewegung nicht verträgt, bekommt dieselbe Schönheit in Ruhe ---------- */

@media (prefers-reduced-motion: reduce) {
  .karte .ebene__bild { animation: none; transition: none; }
  .bereich .ebene__bild { transform: scale(1); transition: opacity 600ms ease; }
  .marke__punkt::after { animation: none; }
  .schwelle__wort { animation: none; }
  * { transition-duration: 250ms !important; }
}