:root {
  --grund: #0b0806;
  --gold: #d9b45f;
  --gold-dunkel: #8a6a1c;
  --text: #eadfc6;
  --leise: #a8997b;
  --linie: rgba(217, 180, 95, 0.26);
  --rand: clamp(20px, 6vw, 96px);
  --zieh: cubic-bezier(0.7, 0, 0.2, 1);
  --schrift-zier: "Cinzel", Georgia, serif;
  --schrift-text: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* 3D-Welt */
#welt {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
  touch-action: none;
  cursor: grab;
}
#welt:active { cursor: grabbing; }
body.eintritt #welt { opacity: 1; }
body.ohne-3d { background: var(--grund) url("bilder/banner.jpg") center / cover no-repeat; }
body.ohne-3d #welt { display: none; }

/* Abdunklung hinter Text und Leisten nach der Ankunft */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 8, 6, 0.78) 0%, rgba(11, 8, 6, 0.35) 38%, transparent 60%),
    linear-gradient(180deg, rgba(11, 8, 6, 0.6) 0%, transparent 18%, transparent 78%, rgba(11, 8, 6, 0.7) 100%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.angekommen::before { opacity: 1; }

/* Filmkorn über allem */
.korn {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.08;
  background-size: 200px;
  animation: korn 0.8s steps(5) infinite;
}
@keyframes korn {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* Startseite */
#intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 46%, #18110b 0%, var(--grund) 68%);
  transition: opacity 1.5s ease;
}
body.eintritt #intro { opacity: 0; pointer-events: none; }
#intro[hidden] { display: none; }

.wappen {
  grid-area: 1 / 1;
  width: min(66vmin, 540px);
  aspect-ratio: 1;
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.8s var(--zieh);
}
#intro.bereit .wappen { opacity: 1; }
body.eintritt .wappen { transform: scale(1.7); opacity: 0; }

.wappen { position: relative; }
#spur {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.wappen svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--linie);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.7s ease, filter 0.7s ease;
}
.wappen.schwebt svg {
  stroke: rgba(236, 200, 120, 0.6);
  filter: drop-shadow(0 0 3px rgba(230, 140, 50, 0.35));
}
.wappen [data-tiefe] { transform-box: view-box; transform-origin: 200px 200px; }

.zug {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s var(--zieh);
}
#intro.bereit .zug { stroke-dashoffset: 0; }

.wortmarke {
  grid-area: 1 / 1;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  font-family: var(--schrift-zier);
  text-transform: uppercase;
  transition: opacity 1s ease;
}
.wortmarke span {
  display: block;
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  text-shadow: 0 0 18px var(--grund), 0 0 6px var(--grund);
}
.wortmarke small {
  display: block;
  margin-top: 0.6em;
  font-size: 10px;
  letter-spacing: 0.55em;
  padding-left: 0.55em;
  color: var(--leise);
}
body.eintritt .wortmarke { opacity: 0; }

.eingang {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8vh;
  display: grid;
  place-items: center;
}
.eingang > * { grid-area: 1 / 1; }

.ladebalken {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 11px var(--schrift-zier);
  letter-spacing: 0.1em;
  color: var(--leise);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.ladebalken span { width: 120px; height: 1px; background: rgba(217, 180, 95, 0.15); }
.ladebalken i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.ladebalken b { font-weight: 400; min-width: 3em; }
#intro.bereit .ladebalken { opacity: 0; }

#mitKlang { position: relative; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.9s 0.5s ease, transform 0.9s 0.5s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
#intro.bereit #mitKlang { opacity: 1; transform: none; pointer-events: auto; }

#ohneKlang {
  position: absolute;
  right: var(--rand);
  bottom: calc(8vh + 12px);
  opacity: 0;
  transition: opacity 0.9s 0.9s ease;
  pointer-events: none;
}
#intro.bereit #ohneKlang { opacity: 1; pointer-events: auto; }

/* Knöpfe und Verweise */
.knopf {
  display: inline-block;
  padding: 15px 28px;
  font: 600 11px var(--schrift-zier);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid rgba(217, 180, 95, 0.35);
  border-radius: 3px;
  background: rgba(11, 8, 6, 0.35);
  transition: box-shadow 0.45s var(--zieh), border-color 0.45s ease, background 0.45s ease;
}
.knopf:hover, .knopf:focus-visible {
  border-color: rgba(217, 180, 95, 0.7);
  background: rgba(40, 26, 12, 0.55);
  box-shadow: 0 0 0 5px var(--grund), 0 0 0 6px rgba(217, 180, 95, 0.3), 0 0 30px rgba(220, 130, 50, 0.25);
}

.rolle { display: block; white-space: nowrap; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.rolle > span { display: block; transition: transform 0.5s var(--zieh); }
.rolle > span + span { color: var(--gold); }
:hover > .rolle > span, :focus-visible > .rolle > span { transform: translateY(-100%); }

.leise-link {
  position: relative;
  font: 400 10px var(--schrift-zier);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--leise);
  padding-bottom: 5px;
  transition: color 0.4s ease;
}
.leise-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: right;
  transition: transform 0.5s var(--zieh);
}
.leise-link:hover, .leise-link:focus-visible { color: var(--text); }
.leise-link:hover::after { transform: scaleX(0); transform-origin: left; animation: strich 0.5s 0.25s var(--zieh) forwards; }
@keyframes strich { to { transform: scaleX(1); } }

/* Kopfleiste */
#kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--rand);
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s var(--zieh);
}
body.angekommen #kopf { opacity: 1; transform: none; pointer-events: auto; }

.marke { display: flex; align-items: center; gap: 12px; font: 600 11px var(--schrift-zier); letter-spacing: 0.32em; text-transform: uppercase; }
.marke small { font-weight: 400; color: var(--leise); margin-left: 0.4em; }
.marke svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linejoin: round; transition: transform 0.6s var(--zieh); }
.marke:hover svg { transform: rotate(-8deg) scale(1.08); }

.kopf-rechts { display: flex; align-items: center; gap: 22px; }
.knopf-klein { padding: 10px 18px; }
nav a[aria-current="page"] { color: var(--gold); }
nav { display: flex; gap: clamp(14px, 2.2vw, 40px); font: 600 10px var(--schrift-zier); letter-spacing: 0.3em; text-transform: uppercase; }

.klang-schalter { white-space: nowrap; display: flex; align-items: center; gap: 10px; font: 400 10px var(--schrift-zier); letter-spacing: 0.26em; text-transform: uppercase; color: var(--leise); }
.klang-schalter b { font-weight: 600; color: var(--text); }
.wellen { display: flex; align-items: center; gap: 2px; height: 14px; }
.wellen i { width: 2px; height: 14px; background: var(--gold); transform: scaleY(0.2); }
.klang-schalter[aria-pressed="true"] .wellen i { animation: welle 0.9s ease-in-out infinite alternate; }
.wellen i:nth-child(2) { animation-delay: -0.3s !important; }
.wellen i:nth-child(3) { animation-delay: -0.6s !important; }
.wellen i:nth-child(4) { animation-delay: -0.15s !important; }
@keyframes welle { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

/* Hauptbereich nach dem Flug */
#buehne {
  position: fixed;
  left: var(--rand);
  top: 22vh;
  z-index: 5;
  max-width: 36rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 1.4s 0.3s ease, transform 1.4s 0.3s var(--zieh);
}
body.angekommen #buehne { opacity: 1; transform: none; }

.vorzeile { margin: 0 0 1.4em; font: 600 10px var(--schrift-zier); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
h1, .buehne-titel {
  margin: 0 0 0.4em;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7);
}
.unterzeile { margin: 0; max-width: 30rem; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; font-style: italic; color: var(--leise); text-shadow: 0 1px 20px rgba(0, 0, 0, 0.8); }

.aktion {
  position: fixed;
  left: var(--rand);
  bottom: 8vh;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 34px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s 0.7s ease;
}
body.angekommen .aktion { opacity: 1; pointer-events: auto; }

.hinweis {
  position: fixed;
  right: var(--rand);
  bottom: 8vh;
  z-index: 5;
  margin: 0;
  font: 400 10px var(--schrift-zier);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--leise);
  opacity: 0;
  transition: opacity 1.4s 1.2s ease;
}
body.angekommen .hinweis { opacity: 0.7; }

/* Name über der Fackel unter der Maus */
.fackel-schild {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  padding: 7px 14px 8px;
  font: 600 10px var(--schrift-zier);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(11, 8, 6, 0.7);
  border: 1px solid rgba(217, 180, 95, 0.35);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.fackel-schild.sichtbar { opacity: 1; }

/* Unterseite als Inhaltsbahn rechts, links bleibt die Stadt sichtbar */
.seite {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  z-index: 8;
  overflow-y: auto;
  background: linear-gradient(90deg, rgba(11, 8, 6, 0.9), rgba(11, 8, 6, 0.97) 30%);
  border-left: 1px solid rgba(217, 180, 95, 0.18);
  transform: translateX(102%);
  transition: transform 1.1s var(--zieh);
}
body.offen .seite { transform: none; }
.seite-inhalt { display: grid; gap: 28px; max-width: 46rem; padding: 130px 8vw 120px 6vw; }
.seite h1 { margin: 0; font-weight: 500; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; text-wrap: balance; }
.seite-text { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--leise); max-width: 34rem; }
.seite .vorzeile { margin: 0; }
.seite-raster-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px 44px; padding-top: 18px; border-top: 1px solid rgba(217, 180, 95, 0.15); }
.seite-raster-alt h3 { margin: 0 0 8px; font-weight: 500; font-size: 24px; }
.seite-raster-alt p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--leise); }
.seite-bild-alt {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  max-width: 100%;
  border: 1px dashed rgba(217, 180, 95, 0.3);
  border-radius: 3px;
  font: 400 10px var(--schrift-zier);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--leise);
  background: rgba(217, 180, 95, 0.04);
}
body.offen #buehne, body.offen .aktion, body.offen .hinweis { opacity: 0; pointer-events: none; transition-delay: 0s; }

.zurueck {
  position: fixed;
  left: var(--rand);
  bottom: 8vh;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, box-shadow 0.45s var(--zieh), border-color 0.45s ease, background 0.45s ease;
}
body.offen .zurueck { opacity: 1; pointer-events: auto; transition-delay: 0.6s, 0s, 0s, 0s; }

@media (max-width: 1280px) {
  .marke small { display: none; }
  nav { letter-spacing: 0.2em; gap: 16px; }
  .klang-schalter > span:last-child { display: none; }
  #kopf { gap: 16px; }
}

@media (max-width: 760px) {
  .seite { width: 100%; }
  .seite-inhalt { padding: 100px var(--rand) 140px; }
  nav { display: none; }
  .marke span { display: none; }
  #buehne { top: 16vh; right: var(--rand); }
  .aktion { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hinweis { display: none; }
  #ohneKlang { right: 50%; transform: translateX(50%); bottom: 3vh; }
}

@media (prefers-reduced-motion: reduce) {
  .korn { animation: none; }
  .zug { transition: none; }
}

/* Inhalte der Bahn, vom Server als HTML geliefert */
.seite-text p, .md p { margin: 0 0 0.9em; }
.seite-text p:last-child, .md p:last-child { margin-bottom: 0; }
.seite .md { font-size: 17px; line-height: 1.6; color: var(--leise); max-width: 36rem; }
.seite .md strong { color: var(--text); font-weight: 600; }
.seite .md ul { margin: 0; padding-left: 1.2em; }
.seite .md a, .seite-text a, .leise a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.seite-abschnitt { display: grid; gap: 14px; padding-top: 28px; border-top: 1px solid rgba(217, 180, 95, 0.15); scroll-margin-top: 90px; }
.seite-abschnitt h2, .regel-gruppe h2, .abschluss h2 { margin: 0; font-weight: 500; font-size: 26px; line-height: 1.15; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.karte { display: grid; gap: 8px; align-content: start; padding: 20px 20px 22px; border: 1px solid rgba(217, 180, 95, 0.2); border-radius: 4px; background: rgba(217, 180, 95, 0.04); transition: border-color 0.4s ease, background 0.4s ease; }
a.karte:hover, a.karte:focus-visible { border-color: rgba(217, 180, 95, 0.55); background: rgba(217, 180, 95, 0.09); }
.karte h2 { margin: 0; font-weight: 500; font-size: 22px; line-height: 1.15; }
.karte p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--leise); }
.seite-bild { margin: 0; }
.seite-bild img { display: block; width: 100%; height: auto; border-radius: 3px; }
.seite-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.inhaltsverzeichnis ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font: 600 10px var(--schrift-zier); letter-spacing: 0.26em; text-transform: uppercase; }
.inhaltsverzeichnis a { color: var(--gold); }
.regel-gruppe { display: grid; gap: 20px; padding-top: 28px; border-top: 1px solid rgba(217, 180, 95, 0.15); scroll-margin-top: 90px; }
.regel { display: grid; gap: 6px; scroll-margin-top: 90px; }
.regel h3 { margin: 0; font-weight: 500; font-size: 21px; }
.regel h3 a { color: var(--gold); }
.credit-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 18px; }
.credit-liste span, .leise { color: var(--leise); }
.leise { margin: 0; font-size: 16px; }
.abschluss { display: grid; gap: 14px; padding: 28px 0 0; border-top: 1px solid rgba(217, 180, 95, 0.15); }
.abschluss p { margin: 0; color: var(--leise); }
.spendenziel .balken { height: 6px; border-radius: 3px; background: rgba(217, 180, 95, 0.15); overflow: hidden; }
.spendenziel .balken span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dunkel), var(--gold)); }
.seite-bild.leer { display: grid; place-items: center; aspect-ratio: 16 / 7; border: 1px dashed rgba(217, 180, 95, 0.3); border-radius: 3px; font: 400 10px var(--schrift-zier); letter-spacing: 0.24em; text-transform: uppercase; color: var(--leise); background: rgba(217, 180, 95, 0.04); }

/* Fuß: Rechtliches und Hinweis, liegt hinter der Bahn */
.fuss { position: fixed; left: 0; right: 0; bottom: 1.8vh; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 0 var(--rand); font: 400 9px var(--schrift-zier); letter-spacing: 0.18em; text-transform: uppercase; color: var(--leise); opacity: 0; transition: opacity 1.4s 1.4s ease; }
body.angekommen .fuss { opacity: 0.7; }
.fuss a:hover, .fuss a:focus-visible { color: var(--text); }
body.offen .fuss a, body.offen .fuss span { pointer-events: none; }

/* Inhaltsbahn nutzt die ganze Breite: Abschnitte mit Text links und Bild rechts, Karten und Regeln in Spalten */
.seite { container-type: inline-size; }
.seite-inhalt { max-width: 1500px; padding: 130px clamp(24px, 5vw, 110px) 120px; gap: 36px; }
.seite-text { max-width: 48rem; font-size: clamp(18px, 1.4vw, 23px); }
.seite .md { max-width: none; }
.karten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.seite-bild.leer { aspect-ratio: 4 / 3; }
.seite-bild img { max-height: 520px; object-fit: cover; }
.regel-gruppe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 48px; }
.regel-gruppe > h2 { grid-column: 1 / -1; }
@container (min-width: 900px) {
  .seite-abschnitt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "titel bild" "text bild"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 80px); align-items: start; align-content: start; }
  .seite-abschnitt > h2 { grid-area: titel; }
  .seite-abschnitt > .md { grid-area: text; }
  .seite-abschnitt > .seite-bild { grid-area: bild; grid-row: 1 / span 2; }
  .seite-abschnitt:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "bild titel" "bild text"; grid-template-rows: auto 1fr; }
}
@media (max-width: 760px) { .seite-inhalt { padding: 100px var(--rand) 140px; } }

/* Bewerbungsformular */
.formular { display: grid; gap: 22px; max-width: 46rem; }
.formular-feld { display: grid; gap: 8px; font-size: 17px; color: var(--text); }
.formular-feld small, .zaehler { font-size: 14px; color: var(--leise); }
.zaehler.ok { color: #9fc98a; }
.formular input, .formular textarea { width: 100%; padding: 12px 14px; background: rgba(11, 8, 6, 0.6); color: var(--text); border: 1px solid rgba(217, 180, 95, 0.28); border-radius: 3px; font: 400 18px/1.5 var(--schrift-text); }
.formular input { max-width: 9rem; }
.formular textarea { resize: vertical; min-height: 96px; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.formular .knopf:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.formular-meldung { margin: 0; font-size: 17px; line-height: 1.5; color: var(--leise); }
.formular-meldung.fehler { color: #e08a7a; }
.formular-meldung.ok { color: #9fc98a; }

/* Kontoseite */
.konto-daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 28px; margin: 0; font-size: 18px; }
.konto-daten dt { color: var(--leise); }
.konto-daten dd { margin: 0; color: var(--text); }
.karte-knopf { text-align: left; cursor: pointer; color: inherit; font: inherit; }
.karte-knopf:hover, .karte-knopf:focus-visible { border-color: rgba(217, 180, 95, 0.55); background: rgba(217, 180, 95, 0.09); }
.karte h3 { margin: 0; font-weight: 500; font-size: 22px; line-height: 1.15; }
.karte-leer { border-style: dashed; opacity: 0.7; }
@media (max-width: 560px) { .konto-daten { grid-template-columns: 1fr; gap: 2px; } .konto-daten dd { margin-bottom: 10px; } }

/* Karte der Orte */
.seite-inhalt.breit { max-width: none; }
.ortskarte { position: relative; overflow: hidden; height: min(74vh, 900px); min-height: 360px; border: 1px solid rgba(217, 180, 95, 0.3); background: #0b0806; touch-action: none; cursor: grab; user-select: none; }
.ortskarte:active { cursor: grabbing; }
.karte-flaeche { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
.karte-bild { display: block; width: 100%; height: auto; pointer-events: none; }
.ortskarte.bereit + .orte-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.orte-text { margin: 0; padding-left: 1.2em; color: var(--leise); line-height: 1.6; }
.ort-marke {
  position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1)));
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a1f14, #0e0a07); border: 2px solid var(--gold); color: var(--gold); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); font: inherit;
}
.ort-marke.art-stadt { width: 46px; height: 46px; border-width: 3px; }
.ort-marke:hover, .ort-marke[aria-expanded="true"], .ort-marke:focus-visible { background: var(--ortfarbe, var(--gold)); color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(217, 180, 95, 0.45), 0 2px 10px rgba(0, 0, 0, 0.7); }
.ort-marke .ort-name {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; pointer-events: none;
  font-size: 14px; letter-spacing: 0.04em; color: #f3e8cf; text-shadow: 0 1px 3px #000, 0 0 6px #000, 0 0 10px #000;
}
.symbol { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.symbol-bild { object-fit: contain; }
.karte-zoom { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 6px; }
.knopf-zoom { width: 38px; height: 38px; font-size: 22px; line-height: 1; border-radius: 3px; background: rgba(11, 8, 6, 0.85); color: var(--gold); border: 1px solid rgba(217, 180, 95, 0.4); cursor: pointer; }
.knopf-zoom:hover, .knopf-zoom:focus-visible { background: rgba(40, 30, 18, 0.95); outline: none; }

.ort-karte {
  position: absolute; right: 14px; top: 14px; width: min(360px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow-y: auto;
  --ortfarbe: #8a5a2b; background: #1a130d; color: #eadfc6; border: 1px solid var(--ortfarbe); border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}
.ort-karte * { margin: 0; }
.ort-zu {
  position: absolute; right: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; padding: 0; font-size: 0; color: transparent; border: 0; border-radius: 50%; cursor: pointer;
  background:
    linear-gradient(45deg, transparent 45%, #fff 45% 55%, transparent 55%) center / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent 45%, #fff 45% 55%, transparent 55%) center / 12px 12px no-repeat,
    rgba(0, 0, 0, 0.45);
}
.ort-zu:hover, .ort-zu:focus-visible { background-color: rgba(0, 0, 0, 0.7); outline: 1px solid #fff; }
.ort-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 44px 12px 16px; background: var(--ortfarbe); color: #fff; }
.ort-wappen { flex: none; display: grid; place-items: center; width: 52px; height: 60px; padding-bottom: 8px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 4px 4px 50% 50% / 4px 4px 70% 70%; background: rgba(0, 0, 0, 0.2); }
.ort-wappen .symbol { display: block; stroke-width: 1.8; }
.ort-titel h3 { font-size: 24px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; }
.ort-titel p { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }
.ort-bild { display: block; width: 100%; max-height: 190px; object-fit: cover; }
.ort-merkmale { list-style: none; padding: 12px 16px; display: grid; gap: 9px; }
.ort-merkmale li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; }
.ort-merkmale .symbol { flex: none; color: var(--gold); }
.ort-fuss { padding: 11px 16px; font-size: 14px; line-height: 1.4; text-align: center; background: var(--ortfarbe); color: #fff; }
.ort-karte.art-dorf .ort-kopf { background: transparent; color: #eadfc6; border-bottom: 2px solid var(--ortfarbe); }
.ort-karte.art-dorf .ort-titel h3 { font-size: 21px; }
.ort-karte.art-dorf .ort-fuss { background: transparent; color: var(--leise); border-top: 1px solid rgba(217, 180, 95, 0.2); }
@media (max-width: 760px) {
  .ortskarte { height: 62vh; }
  .ort-karte { right: 0; left: 0; top: auto; bottom: 0; width: 100%; max-height: 62%; border-radius: 4px 4px 0 0; }
}

/* Team: Stammbaum */
.stammbaum { position: relative; overflow-x: auto; padding: 8px 0 24px; }
.stammbaum.bereit + .team-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.baum, .baum ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; position: relative; }
.baum ul { padding-top: 26px; }
.baum li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 10px 0; }
.baum > li { padding-top: 0; }
.baum li::before, .baum li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 26px; border-top: 1px solid rgba(217, 180, 95, 0.55); }
.baum li::after { right: auto; left: 50%; border-left: 1px solid rgba(217, 180, 95, 0.55); }
.baum > li::before, .baum > li::after, .baum li:only-child::before, .baum li:only-child::after { display: none; }
.baum li:first-child::before, .baum li:last-child::after { border: 0 none; }
.baum li:last-child::before { border-right: 1px solid rgba(217, 180, 95, 0.55); border-radius: 0 6px 0 0; }
.baum li:first-child::after { border-radius: 6px 0 0 0; }
.baum ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 26px; border-left: 1px solid rgba(217, 180, 95, 0.55); }
.team-karte {
  --farbe: #d9b45f; display: grid; justify-items: center; gap: 3px; width: 168px; padding: 10px 8px 12px; text-align: center; cursor: pointer; font: inherit; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.team-karte:hover, .team-karte:focus-visible, .team-karte[aria-expanded="true"] { outline: none; border-color: var(--farbe); background: rgba(255, 255, 255, 0.04); }
.team-bild { width: 76px; height: 76px; box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.7); border-radius: 50%; object-fit: cover; border: 2px solid var(--farbe); background: #0b0806; display: grid; place-items: center; font-size: 26px; color: var(--farbe); }
.team-name { margin-top: 6px; font-size: 18px; line-height: 1.15; }
.team-titel { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--farbe) 55%, #ffffff); }
.team-rolle { font-size: 14px; color: var(--leise); }
.team-info {
  position: relative; margin: 20px auto 0; width: min(460px, 100%); padding: 18px 20px 20px; box-sizing: border-box;
  background: #1a130d; border: 1px solid var(--farbe, #d9b45f); border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}
.team-info h3 { margin: 0; font-size: 24px; font-weight: 500; }
.team-info .team-titel { margin: 4px 0 10px; }
.team-info p { margin: 0; color: var(--leise); line-height: 1.55; }
.team-info .ort-zu { top: 10px; }