/* ═══════════════════════════════════════
   DAS WALDTOR — Gestaltung
   ═══════════════════════════════════════

   ⚠️ Alles unter .ft-* und .wo-forest--direkt. Das Stylesheet der Klickvorschau
   (previews/forest/forest.css) wurde BEWUSST nicht uebernommen: Es setzt
   Grundregeln fuer body, button und h1/h2 und wuerde damit das ganze Spiel
   umfaerben. Hier steht nur, was das Tor selbst braucht; Farben und Radien
   kommen aus den vorhandenen Variablen, damit das Tor zum Rest passt und bei
   einem Themenwechsel mitgeht. */
/* ══════════════════════════════════════════════════════════════════════
   DER WALDEINGANG — nach dem Konzeptpaket (ENTWICKLUNGSKONZEPT.txt, 2A)

   Ganzflaechige Waldtor-Illustration, zentral ein Pergament mit kurzer
   Einleitung und dem dominanten Knopf, rechts oben die kompakte Leiste der
   sechs Abschnitte, darunter nur die NAECHSTE Freischaltung, unten drei
   kleine Kaesten.

   ⚠️ Texte, Rahmen und Knoepfe sind HTML/CSS, kein gerasterter Screenshot —
   so verlangt es das Konzept (Abschnitt 5). Die Illustration liefert nur die
   Kulisse; alles Lesbare liegt darueber.

   ⚠️ Farben aus den Variablen des Spiels, wo der Untergrund hell ist. Ueber
   der Kulisse steht helle Schrift auf dunklem Verlauf — die muss in BEIDEN
   Themes gleich aussehen, weil das Bild sich nicht mitaendert.
══════════════════════════════════════════════════════════════════════ */

.ft-tor {
  position: relative;
  isolation: isolate;
  /* ⚠️ WACHSEN, aber nie schrumpfen (flex: 1 0 auto).
     Die 0 beim Schrumpfen: #contentScroll ist ein Flex-Container (column),
     ein Kind gibt darin bereitwillig nach — zusammen mit dem overflow:hidden
     unten wurden daraus einmal 167 px statt 1111 px Inhalt.
     Die 1 beim Wachsen: Sonst bleibt auf hohen Fenstern unter dem Tor eine
     leere Flaeche stehen; die Kulisse soll den Platz fuellen. */
  flex: 1 0 auto;
  min-height: 560px;
  padding: 1.1rem 1.1rem 1.3rem;
  border-radius: var(--r);
  overflow: hidden;
}

/* Die Kulisse. Der Verlauf darueber haelt die Schrift lesbar — das Bild ist
   oben hell und in der Mitte sehr bunt. */
.ft-kulisse {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, #10251a66, #10251a1a 38%, #10251ab8),
    url('../assets/events/tor/waldeingang.webp');
  background-size: cover;
  background-position: center;
}

/* Der Innenraum waechst mit: die Mitte (Pergament + Knopf) nimmt den Platz,
   die rechte Spalte bleibt oben stehen.

   ⚠️ `container-type: inline-size` macht das Tor zu seinem EIGENEN Massstab.
   Die Umbrueche unten fragen damit, wie breit das Tor ist — nicht, wie breit
   das Fenster ist. Der Unterschied ist gross: Heldenspalte und Chat nehmen
   zusammen leicht zwei Drittel weg, und mit @media blieb das Tor bei 1500 px
   Fenster zweispaltig, obwohl ihm nur 430 px blieben. */
.ft-tor { display: flex; flex-direction: column; container-type: inline-size; }
.ft-raum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 1rem;
  align-items: start;
  flex: 1 1 auto;
}

/* ── Mitte: Pergament und Hauptknopf ─────────────────────────────────── */

.ft-mitte {
  display: flex;
  flex-direction: column;
  /* Pergament nach links oben — es soll am Rand der Kulisse sitzen, nicht
     mitten darauf. */
  align-items: flex-start;
  justify-content: flex-start;
  /* ⚠️ Auf die volle Zeilenhoehe wachsen. .ft-raum steht auf
     `align-items: start`, damit die rechten Tafeln oben bleiben — ohne dieses
     `align-self` waere die Mitte nur 460 px hoch, und der Knopf saesse mit
     seinem `margin-block: auto` mitten im oberen Drittel statt im Torbogen. */
  align-self: stretch;
  min-height: 460px;
  gap: 1.2rem;
}

.ft-pergament {
  /* Schmaler als zuvor (war 34rem): Die Kulisse soll zu sehen sein. */
  max-width: 26rem;
  padding: .9rem 1.1rem 1rem;
  text-align: center;
  border-radius: 14px;
  border: 1px solid #e8dcc0;
  background: linear-gradient(180deg, #fffaf0f2, #f6ecd8f2);
  box-shadow: 0 10px 34px #0b1d1455;
  color: #4a3a22;
}

.ft-titel {
  margin: 0 0 .4rem;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.25rem, 2.2cqi + .7rem, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: #4a3a22;
}

.ft-text { margin: 0; font-size: .8rem; line-height: 1.55; }
.ft-text--klein { margin-top: .45rem; font-size: .72rem; opacity: .75; }

/* Der dominante Knopf. Gruen wie im Konzept, und gross genug, dass er die
   erste Sache ist, die man sieht. */
/* Knopf, Nervenkitzel und „Gebiet ansehen" sind EIN Block.

   ⚠️ `margin-block: auto` sitzt hier, nicht mehr am Knopf. Solange der Knopf
   allein stand, hat es ihn im Torbogen zentriert; mit den beiden kleinen
   Knoepfen darunter haette es nur noch IHN zentriert und den Rest nach unten
   geschoben. Zentriert wird der ganze Block. */
.ft-aktion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  align-self: center;
  margin-block: auto;
  width: min(26rem, 100%);
}

.ft-los {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding: .95rem 1.4rem;
  border: 1px solid #2f6b3d;
  border-radius: 14px;
  background: linear-gradient(180deg, #3f9b55, #2f7a42);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 1.22rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px #0b1d1466;
  transition: transform .12s, filter .15s;
}

.ft-los:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ft-los:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ft-los-ico { font-size: 1.1rem; }
.ft-los small { font-size: .72rem; font-weight: 600; opacity: .85; font-family: var(--font-ui); }

/* ── Die zweite Reihe: Nervenkitzel und „Gebiet ansehen" ─────────────── */

.ft-neben {
  display: flex;
  align-items: stretch;
  gap: .45rem;
  width: 100%;
}

/* ⚠️ Der Nervenkitzel-Knopf traegt bewusst die Klasse `wo-btn-nk` aus der
   Gebietsansicht: renderForestActs() aktualisiert ihn damit von selbst, wenn
   anderswo umgeschaltet wird. Hier steht nur, was anders AUSSIEHT — eine
   zweite Schaltlogik gibt es nicht. */
.ft-nk {
  flex: 1 1 60%;
  display: flex;
  /* ⚠️ `.wo-btn-nk` stellt die drei Zeilen UNTEREINANDER — in der
     Gebietsansicht ist das eine grosse Kachel. Hier waere der Knopf damit
     92 px hoch geworden und sein Nachbar 40; deshalb ausdruecklich in eine
     Zeile zurueck. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .7rem;
  border-radius: 11px;
  border: 1px solid #ffffff3d;
  background: #0b1d1499;
  color: #f2ece0;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

/* Ohne `nowrap` brach „Ab Level 10" um und machte beide Knoepfe der Reihe
   72 px hoch — die Reihe zieht sich auf den groesseren. */
.ft-nk .wo-btn-nk-sub { font-size: .68rem; font-weight: 600; opacity: .7; white-space: nowrap; }
.ft-nk.wo-btn-nk--active { border-color: #a855f7; background: #4c1d95cc; }
/* Gesperrt, aber nicht unsichtbar: Bei .55 verschwand der Kasten vor der
   Kulisse, und mit ihm der Hinweis, ab wann es ihn gibt. */
.ft-nk.wo-btn-nk--locked { opacity: .75; cursor: not-allowed; }
.ft-nk:focus-visible, .ft-ansehen:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ft-ansehen {
  flex: 1 1 40%;
  padding: .5rem .7rem;
  border-radius: 11px;
  border: 1px solid #ffffff3d;
  background: #0b1d1499;
  color: #f2ece0;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

.ft-nk:hover, .ft-ansehen:hover { filter: brightness(1.15); }

/* Auf schmalen Kaesten untereinander — nebeneinander waeren beide zu eng
   fuer ihre Beschriftung. */
@container (max-width: 30rem) {
  .ft-neben { flex-direction: column; }
}

/* ── Rechte Spalte: Tafeln ───────────────────────────────────────────── */

.ft-seite { display: flex; flex-direction: column; gap: .8rem; }

.ft-panel {
  padding: .8rem .9rem .9rem;
  border: 1px solid #e3d7bb;
  border-radius: 14px;
  background: #fffaf0f2;
  box-shadow: 0 8px 26px #0b1d1440;
  color: #4a3a22;
}

.ft-panel-kopf {
  margin: 0 0 .6rem;
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 800;
  color: #4a3a22;
}

/* Die Abschnittsleiste — waagerecht und scrollbar. */
.ft-streifen {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}

.ft-ab {
  flex: 0 0 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  padding: .3rem .25rem .45rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #4a3a22;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.ft-ab:hover { background: #00000008; }
.ft-ab:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.ft-ab--hier { border-color: #d96aa8; background: #fdeef6; }

.ft-ab-bild {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid #0000001a;
}

.ft-ab-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-ab--zu .ft-ab-bild img { filter: grayscale(.9) brightness(.72); }

.ft-ab-ico {
  position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%);
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: 50%; background: #fffaf0; border: 1px solid #e3d7bb; font-size: .8rem;
}

.ft-ab-schloss {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.15rem; color: #fff; text-shadow: 0 2px 6px #0008;
}

.ft-ab-name { margin-top: .45rem; font-size: .7rem; font-weight: 800; line-height: 1.15; }
.ft-ab-band { font-size: .62rem; opacity: .7; }
.ft-ab--hier .ft-ab-band { color: #b5417f; opacity: 1; font-weight: 700; }
/* ⚠️ Der Sperrgrund steht in der Leiste NICHT mehr als Text: Er machte sie
   dreimal so hoch und fuellte sie mit Kleinschrift. Das Konzept will die
   Erklaerung beim Klick (Abschnitt 2B) — die kommt aus setZone(). Fuer
   Screenreader bleibt er hier, unsichtbar aber vorlesbar. */
.ft-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Die naechste Freischaltung. */
.ft-next { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .6rem .7rem; }

.ft-next-bild {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 3 / 4; border: 1px solid #0000001a;
}
.ft-next-bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.9) brightness(.72); }

.ft-next-text strong { display: block; font-size: .92rem; font-weight: 800; }
.ft-next-text small { display: block; margin-top: .2rem; font-size: .72rem; line-height: 1.45; opacity: .8; }

.ft-req { grid-column: 1 / -1; margin: .2rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }

.ft-req-zeile {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid #e3d7bb;
  border-radius: 9px;
  background: #fff6e6;
  font-size: .75rem;
  line-height: 1.35;
}

.ft-req-zeile--ok { border-color: #9ec79b; background: #eef7ea; }
.ft-req-ico { flex: 0 0 1rem; text-align: center; }
.ft-req-zeile--ok .ft-req-ico { color: #3f7d3a; font-weight: 900; }
.ft-req-text em { font-style: normal; opacity: .65; }

.ft-panel--frei { text-align: center; }
.ft-frei-text { margin: 0; font-size: .78rem; opacity: .8; }

/* ── Die drei Kaesten unten ──────────────────────────────────────────── */

.ft-fuss {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .9rem;
}

.ft-notiz {
  padding: .65rem .8rem .75rem;
  border: 1px solid #e3d7bb;
  border-radius: 12px;
  background: #fffaf0f2;
  box-shadow: 0 6px 20px #0b1d1433;
  color: #4a3a22;
}

.ft-notiz h4 {
  margin: 0 0 .35rem;
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  font-weight: 800;
}

.ft-notiz p { margin: 0; font-size: .72rem; line-height: 1.5; opacity: .85; }
.ft-notiz dl { margin: 0; display: grid; gap: .2rem; font-size: .75rem; }
.ft-notiz dl > div { display: flex; justify-content: space-between; gap: .6rem; }
.ft-notiz dt { opacity: .8; }
.ft-notiz dd { margin: 0; font-weight: 800; }

.ft-notiz-link {
  margin-top: .4rem; padding: 0; border: 0; background: none;
  color: #8a5a2b; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer;
}
.ft-notiz-link:hover { text-decoration: underline; }

/* Die drei Wege aus dem Wald heraus: Jagdgruppe, Heiler, Dorf — dieselbe
   Reihe, die die Gebietsansicht hatte. `wrap`, damit auf dem Handy umbrochen
   statt gequetscht wird. */
.ft-zurueck { margin-top: .8rem; display: flex; justify-content: center; gap: .45rem; flex-wrap: wrap; }

/* ── Schmale Fenster ─────────────────────────────────────────────────
   Konzept Abschnitt 2A: „Auf schmalen Displays werden diese eingeklappt."
   Hier: die Spalten untereinander, die Kulisse niedriger, die drei Kaesten
   in einer Spalte — und keine Textinformation auf kleinen Bilddetails. */
@container (max-width: 980px) {
  .ft-raum { grid-template-columns: minmax(0, 1fr); }
  .ft-mitte { min-height: 300px; padding-top: 1rem; }
}

@container (max-width: 640px) {
  .ft-mitte { min-height: 220px; gap: .9rem; }
  .ft-pergament { padding: .85rem .95rem 1rem; }
  .ft-text { font-size: .78rem; }
  .ft-los { font-size: 1.05rem; padding: .8rem 1rem; }
  .ft-fuss { grid-template-columns: minmax(0, 1fr); }
}

/* Die Mindesthoehe haengt am FENSTER, nicht am Kasten: Auf einem Handy soll
   das Tor nicht 560 px hoch sein, egal wie breit sein Container ist. */
@media (max-width: 640px) {
  .ft-tor { min-height: 0; padding: .8rem .7rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-los { transition: none; }
  .ft-los:hover { transform: none; }
}


/* ⚠️ Der verkuerzte Einstieg blendet die Aufsaetze der alten Auswahlseite
   aus: Reiterleiste, Tipp-Band und Weltkarte. Diese drei Zeilen sind mir beim
   Umbau des Tors einmal verloren gegangen — danach standen Reiter UND Karte
   wieder mitten in der Gebietsansicht. */
.wo-forest--direkt .wo-tabs-wrap,
.wo-forest--direkt .wo-tip-bar,
.wo-forest--direkt .wo-map-wrap { display: none; }

/* ── Das Gebietsbild ──────────────────────────────────────────────────
   Im verkuerzten Einstieg faellt die Weltkarte weg — damit war das einzige
   grosse Bild verschwunden und die Seite nur noch Text und Kacheln. Die
   freigegebene Vorschau zeigte das Gebiet bildschirmfuellend; das hier ist
   die gebaendigte Fassung davon: ein breites Band oben, der Rest bleibt.

   Der Farbverlauf liegt IM background-image (siehe exploration.js), damit die
   Schrift auf jedem Bild lesbar bleibt — die sechs Gebietsbilder sind oben
   hell und unten dunkel, ein fester Textschatten reicht da nicht. */
.wo-band {
  position: relative;
  margin-bottom: .7rem;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  background-size: cover;
  background-position: center 38%;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  box-shadow: var(--sh);
}

.wo-band-text { padding: 1.1rem 1.3rem; max-width: 46rem; }

.wo-band-kicker {
  display: block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffcc;
}

.wo-band-name {
  margin: .15rem 0 .25rem;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.wo-band-desc {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: #f3f1e8;
  text-shadow: 0 1px 6px #0b1d14;
}

.wo-band-risk {
  display: inline-block;
  margin-top: .6rem;
  padding: .3rem .7rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(2px);
}

/* ⚠️ Was das Band sagt, sagt sonst niemand mehr. Ohne diese Zeilen stand der
   Gebietsname DREIMAL untereinander: im Kopf, im Band und in der Tafel — und
   die Beschreibung zweimal. Die Angaben, die das Band NICHT traegt (Lesbarkeit
   des Levels, Tagesvorteil, Kacheln), bleiben stehen. */
.wo-forest--direkt .wo-hdr-left,
.wo-forest--direkt .wo-detail-name,
.wo-forest--direkt .wo-detail-desc,
.wo-forest--direkt .wo-detail-img-wrap { display: none; }

/* Der Kopf traegt jetzt nur noch Knoepfe — die gehoeren nach rechts.

   ⚠️ Und sie muessen umbrechen duerfen: Seit „Details" dazugekommen ist, sind
   es drei, und auf einem 375-px-Schirm wurde der erste links abgeschnitten. */
.wo-forest--direkt .wo-hdr {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Die erste Spalte haelt im verkuerzten Einstieg nur noch den Tagesvorteil.
   Ohne das Bild darueber braucht sie weder Mindesthoehe noch eigene Flaeche —
   sonst steht dort ein hoher, leerer Kasten. */
.wo-forest--direkt .wo-detail-img-col {
  min-height: 0;
  align-self: start;
  background: transparent;
}

/* Auf dem Handy niedriger: dort ist der Bildschirm hoch und schmal, ein
   230-px-Band schoebe die Erkunden-Knoepfe unter die Falz. */
@media (max-width: 640px) {
  .wo-band { min-height: 165px; }
  .wo-band-text { padding: .85rem .95rem; }
  .wo-band-desc { display: none; }
}


/* ── Das einmalige Hinweisfenster nach dem Umbau ──────────────────────
   Nutzt die Modal-Huelle des Spiels (.modal-bg/.modal-sheet); hier stehen nur
   die Innereien. Farben wie ueberall aus den Variablen — das Spiel startet
   HELL und schaltet per [data-theme] um. */

/* ⚠️ Der Innenabstand gehoert HIERHER: .modal-sheet (style.css) bringt
   keinen mit — die Dialoge des Spiels setzen ihn jeweils selbst, entweder
   ueber .modal-hdr/.modal-body oder, wie hier, an ihrer eigenen Box.
   Ohne diese Zeile stossen Kaesten und Knopf an den Fensterrand. */
.wi-box {
  max-width: 460px;
  padding: 22px 20px 20px;
}

.wi-kopf { margin-bottom: .9rem; }

.wi-titel {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}

.wi-lead {
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--text2);
}

.wi-punkt {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .55rem .6rem;
  margin-bottom: .4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
  font-size: .82rem;
  color: var(--text);
}

/* Der Punkt, der Rueckfragen erspart: „behalte ich meinen Dungeon?" */
.wi-punkt--wichtig {
  border-color: var(--green);
  background: var(--green-l);
}

.wi-ico { font-size: 1.15rem; line-height: 1.2; }

.wi-sub {
  margin-top: .15rem;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--text2);
}


/* ══════════════════════════════════════════════════════════════════════
   KONZEPT 2C — die Erkundungsansicht raeumt auf

   „Sekundaere Funktionen in Menue oder Detail-Overlay: Monsterlevel, Beute,
   XP/Gold/Seltenheit, Risiko, Tagesbonus, Jagdgruppe, Heiler, Dorf,
   Erkundungsstatistik."

   Auf der Seite bleiben damit: die Szene, die Geschichte und die Hauptaktion.
   ⚠️ Nur im verkuerzten Einstieg. Wer ueber das Tor kommt, waehlt dort ein
   Gebiet und will die Zahlen sehen, bevor er sich entscheidet.
══════════════════════════════════════════════════════════════════════ */

.wo-forest--direkt .wo-detail {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.wo-forest--direkt .wo-detail-img-col,
.wo-forest--direkt .wo-detail-tags,
.wo-forest--direkt .wo-detail-meta,
.wo-forest--direkt .wo-detail-stat-grid,
.wo-forest--direkt .wo-tier-bar,
.wo-forest--direkt .wo-acts-nav { display: none; }

/* ── Das Detail-Fenster ──────────────────────────────────────────────
   .modal-sheet bringt keinen Innenabstand mit (siehe .wi-box weiter oben). */
/* ⚠️ Kein Innenabstand am Kasten mehr: Das Gebietsbild soll bis an die Kante
   laufen. Der Abstand sitzt jetzt an `.wd-inhalt`, sonst haette ein weisser
   Rahmen um das Bild gestanden. */
.wd-box {
  position: relative;
  /* 620 px waren fuer fuenf Spalten zu eng — siehe das Gitter weiter unten. */
  max-width: 700px;
  padding: 0;
  /* ⚠️ NICHT `overflow: hidden`. Das Fenster ist hoeher als der Bildschirm
     (864 px Inhalt in 765 px), und mit `hidden` liessen sich die Knoepfe
     unten mit dem Rad nicht mehr erreichen — nur noch per Skript. `x: hidden`
     schneidet das Gebietsbild weiterhin an den runden Ecken ab. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* ⚠️ Die Eckranken gehoeren auf die PERGAMENTFLAECHE, nicht an den Kasten:
   Am Kasten lagen sie hinter dem Gebietsbild und waren oben links schlicht
   nicht zu sehen. Auf dem Foto wuerden sie ausserdem untergehen. */
.wd-inhalt { position: relative; }
.wd-inhalt::before,
.wd-inhalt::after {
  content: '';
  position: absolute;
  width: 110px; height: 98px;
  background: url('../assets/ui/zier-ecke.webp') no-repeat center / contain;
  opacity: .45;
  pointer-events: none;
}
.wd-inhalt::before { left: -6px; top: -10px; }
/* Gespiegelt — sonst zeigen beide in dieselbe Richtung und es sieht nach
   Versehen aus statt nach Rahmen.

   ⚠️ `bottom: 0`, nicht `-10px`: Die Ranke ragte sonst zehn Pixel unter den
   Inhalt und erzeugte damit GENAU DIE zehn Pixel Bildlauf, die das Fenster
   nicht mehr auf einen Schirm passen liessen. Oben darf sie ueberstehen,
   dort liegt das Gebietsbild darueber. */
.wd-inhalt::after  { right: -6px; bottom: 0; transform: rotate(180deg); }

/* Der Kopf: Gebietsbild gross, Name darin. */
.wd-held { position: relative; }
/* ⚠️ 16:7 statt 16:9. Bei 700 px Fensterbreite waren das 394 px nur fuer das
   Bild — die Kennzahlen begannen erst unterhalb des Bildschirmrands, und man
   musste scrollen, um ueberhaupt etwas zu lesen. Gross genug bleibt es. */
.wd-held-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  /* ⚠️ Die Hoehe haengt am SCHIRM, nicht nur an der Breite. Alles unter dem
     Bild braucht rund 300 px; bliebe das Bild starr bei 16:7, muesste man auf
     einem flachen Fenster scrollen, um die Knoepfe zu sehen. Mit `max-height`
     schrumpft nur das Bild (object-fit beschneidet es weiter sauber) und das
     Fenster passt von etwa 600 px Schirmhoehe an vollstaendig. */
  max-height: min(30vh, 320px);
  object-fit: cover;
}
/* Verlauf nach unten, damit der Name auf JEDEM Gebietsbild lesbar bleibt —
   die Lichtung ist hell, der Abyssalschlund fast schwarz. */
.wd-held::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0b1d1400 35%, #0b1d14cc 100%);
  pointer-events: none;
}
.wd-held-text {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: .9rem;
  z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
}
.wd-x {
  position: absolute; top: .6rem; right: .6rem;
  z-index: 2;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
}
/* ⚠️ DIE SICHTBARE PILLE IST `::before`, nicht der Knopf selbst. Eine dunkle
   Hintergrundfarbe am Knopf half deshalb gar nichts: Darueber lag weiter die
   helle Pille aus `.modal-x::before` — und das weisse ✕ darauf war schlicht
   unsichtbar. Auf dem Gebietsbild braucht sie dunkel zu sein. */
.wd-x::before {
  background: #0b1d14d9;
  border: 1px solid #ffffff5c;
  box-shadow: 0 2px 10px #0b1d1466;
  backdrop-filter: blur(3px);
}
.wd-x:hover::before { background: #0b1d14f2; }
.wd-titel {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 5cqi + .6rem, 2.3rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 12px #0b1d14cc;
}

.wd-inhalt { display: grid; gap: .55rem; padding: .75rem 1.1rem .9rem; }
/* Alles Echte liegt ueber den Ranken — sonst nimmt die Ecke oben links den
   ersten Klick auf die XP-Kachel entgegen. */
.wd-inhalt > * { position: relative; z-index: 1; }

.wd-bild-band {
  padding: .22rem .6rem;
  border: 1px solid;
  border-radius: 999px;
  background: #0b1d14cc;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  backdrop-filter: blur(3px);
}
.wd-desc {
  margin: 0;
  text-align: center;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text2);
  font-style: italic;
}
/* Die Ranke unter der Beschreibung. Rein schmueckend, deshalb aria-hidden
   und keine eigene Hoehe ueber das Bild hinaus. */
.wd-trenner {
  height: 26px;
  margin: -.2rem 0 .1rem;
  background: url('../assets/ui/zier-trenner.webp') no-repeat center / 210px auto;
}

/* ── Die Jagd-Lobby im selben Gewand ─────────────────────────────────
   Minni am 25.10.: „Mit den UI Elementen die man sonst so auch schon hatte?"
   Die Lobby benutzt jetzt dieselben Bausteine wie das Gebiets-Fenster
   (wd-held, wd-titel, wd-trenner, wd-desc). Hier steht nur, was sich
   unterscheidet: Der Kasten ist schmaler und braucht seinen Innenabstand
   innen statt aussen, weil das Bild bis an die Kante laeuft. */
.hunt-modal--tor {
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 480px;
  position: relative;
}
.hunt-rumpf { position: relative; padding: .8rem 1rem 1rem; }
/* Dieselben Eckranken wie im Gebiets-Fenster. */
.hunt-rumpf::before,
.hunt-rumpf::after {
  content: '';
  position: absolute;
  width: 96px; height: 86px;
  background: url('../assets/ui/zier-ecke.webp') no-repeat center / contain;
  opacity: .4;
  pointer-events: none;
}
.hunt-rumpf::before { left: -6px; top: -8px; }
.hunt-rumpf::after  { right: -6px; bottom: 0; transform: rotate(180deg); }
.hunt-rumpf > * { position: relative; z-index: 1; }

/* „Jagdgruppe" ueber dem Gebietsnamen — die Zeile, die im Gebiets-Fenster
   das Risiko-Abzeichen traegt. */
.hunt-kicker {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px #0b1d14cc;
}
/* Das Bild der Lobby darf flacher sein: Darunter stehen Knoepfe und Liste. */
.hunt-modal--tor .wd-held-bild { max-height: min(22vh, 220px); }

/* ── Die Sperrmeldung („Benoetigt: Level 42") ─────────────────────────
   Sie lag bis zum 25.10. als Kasten zwischen den Tafeln am Tor und schob
   alles darunter weg. Jetzt im gemeinsamen Fenster (genericModal) — die
   Stile stehen hier, weil die Meldung zum Waldeingang gehoert. */
.zl-box { text-align: center; padding: .4rem 0 .2rem; }
.zl-ico { font-size: 2.4rem; line-height: 1; margin-bottom: .5rem; }
.zl-name { font-family: 'Cinzel', serif; font-weight: 800; font-size: 1rem; margin-bottom: .25rem; }
.zl-desc { font-size: .78rem; color: var(--text2); font-style: italic; margin-bottom: .8rem; }

.zl-kasten {
  padding: .6rem .9rem;
  margin-bottom: .7rem;
  border: 1.5px solid;
  border-radius: var(--r-sm);
  text-align: left;
}
.zl-kopf { font-weight: 800; font-size: .85rem; margin-bottom: .2rem; }
.zl-text { font-size: .75rem; color: var(--text2); line-height: 1.55; }
.zl-betont { font-weight: 700; color: #7c3aed; }

/* Je Grund eine Farbe — die Sperre soll man am Rand schon erkennen. */
.zl-kasten--level  { border-color: #fca5a5; background: #fef2f2; }
.zl-kasten--level  .zl-kopf { color: var(--red); }
.zl-kasten--story  { border-color: var(--gold); background: var(--gold-l); }
.zl-kasten--story  .zl-kopf { color: var(--orange); }
.zl-kasten--klasse { border-color: #a78bfa; background: #f5f3ff; }
.zl-kasten--klasse .zl-kopf { color: #7c3aed; }
/* ⚠️ Die drei Fuellfarben sind feste Helltoene. Im Dunkelmodus stuende sonst
   heller Text darauf — deshalb dort dunkle Fuellung bei gleicher Randfarbe. */
:root[data-theme="dark"] .zl-kasten--level  { background: #450a0a66; }
:root[data-theme="dark"] .zl-kasten--klasse { background: #2e1065aa; }
:root[data-theme="dark"] .zl-kasten--klasse .zl-kopf,
:root[data-theme="dark"] .zl-betont { color: #c4b5fd; }

.zl-fuss { font-size: .7rem; color: var(--text3); margin-bottom: .9rem; }
.zl-wege { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* Aufzaehlung und Tagesvorteil nebeneinander. Untereinander blieb rechts der
   halbe Kasten leer, und das Fenster wurde unnoetig hoch. */
.wd-zeile {
  display: grid;
  grid-template-columns: 1fr minmax(11rem, .8fr);
  gap: .6rem;
  align-items: start;
}
@media (max-width: 560px) {
  .wd-zeile { grid-template-columns: 1fr; }
}

.wd-tag {
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
}

/* ⚠️ .wo-daily-head und .wo-daily-txt sind fuer die DUNKLE Bildspalte
   gemacht (weiss auf dunkelblau). Hier liegen sie auf hellem Grund — ohne
   diese zwei Zeilen stand der Tagesvorteil weiss auf weiss im Fenster: der
   Text war da, man sah ihn nur nicht. */
.wd-tag .wo-daily-head { color: var(--text2); }
.wd-tag .wo-daily-txt  { color: var(--text); }

.wd-wege { display: flex; flex-wrap: wrap; gap: .4rem; }
.wd-wege .wo-nav-btn { flex: 1 1 9rem; }

/* ⚠️ Die fuenf Kacheln standen auf `repeat(5,1fr)` — alle gleich breit. Im
   620 px schmalen Fenster blieben je rund 110 px: Die vier Zahlen („⭐ ×1,8")
   schwammen darin, waehrend „Was dich erwartet" seine Aufzaehlung alle zwei
   Woerter umbrach („Schwache / Monster", „Entspannte / Atmosphaere").
   Der Platz war also gleichmaessig verteilt, aber nicht gut verteilt.
   Jetzt bekommt die Liste knapp das Anderthalbfache. */
.wd-box .wo-detail-stat-grid {
  grid-template-columns: repeat(4, 1fr) 1.55fr;
  padding: 0;
  gap: .45rem;
}
.wd-box .wo-detail-stat-cell { padding: .5rem .35rem; }
.wd-box .wo-detail-stat-cell--expect { padding: .5rem .6rem; }
.wd-box .wo-sc-expect-list span { font-size: .66rem; }
/* ⚠️ Auf dem Handy wieder 2+2+1, wie es style.css fuer kleine Schirme
   vorsieht. Die Regel oben hat ZWEI Klassen und schlaegt die dortige mit nur
   einer — ohne diesen Nachtrag haette das Fenster auch auf 375 px fuenf
   Spalten gehabt. */
@media (max-width: 640px) {
  .wd-box .wo-detail-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ein kleines Blatt an den vier Zahlen-Kacheln — dieselbe Handschrift wie die
   Eckranken, nur leiser.

   ⚠️ NICHT an „Was dich erwartet": Dort steht eine Aufzaehlung bis an den
   unteren Rand, das Blatt lag auf dem letzten Eintrag. Und nur im Fenster:
   In der Gebietsansicht liegen dieselben Kacheln auf dunklem Grund. */
.wd-box .wo-detail-stat-cell:not(.wo-detail-stat-cell--expect) {
  position: relative;
  background:
    url('../assets/ui/zier-blatt.webp') no-repeat right .25rem bottom .2rem / 20px auto,
    var(--surface2);
}

/* Auf schmalen Schirmen bleibt der Kopf flacher — sonst fuellt das Bild das
   halbe Handy und die Zahlen stehen unter der Falz. */
@media (max-width: 560px) {
  .wd-held-bild { aspect-ratio: 16 / 10; }
  .wd-inhalt::before, .wd-inhalt::after { width: 76px; height: 68px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BARRIEREFREIHEIT (Konzept Abschnitt 4 und Abnahmekriterium)

   „Buttons per Tastatur bedienbar, Fokuszustaende, textliche Statusangaben
   statt nur Farbe ... Motion reduzieren bei prefers-reduced-motion."

   ⚠️ Sichtbarer Fokus fuer ALLE Knoepfe, die dieser Umbau gebracht hat. Ohne
   ihn ist die Seite mit der Tastatur zwar bedienbar, aber man sieht nicht, wo
   man gerade steht — das ist keine Bedienbarkeit, das ist Raten.
══════════════════════════════════════════════════════════════════════ */

.fs-btn:focus-visible,
.wi-box .btn:focus-visible,
.ft-notiz-link:focus-visible,
.wd-wege .wo-nav-btn:focus-visible,
.wo-hdr-village-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .fs-bar > span { transition: none; }
  .fs-btn:hover { transform: none; }
  .modal-sheet { animation: none; }
}