/* =========================================================================
   SOLDESTROYER — Custom Block Theme Stylesheet
   Prototyp V1: Startseite, 8 Portale (Navigation), Welt "Abenteuer mit KI"
   Mobile-first. Kein externes Framework, keine externen Fonts.
   ========================================================================= */

:root {
  /* Basis / Soldestroyer-Zentrale */
  --sd-bg: #150f0c;
  --sd-bg-elevated: #201811;
  --sd-bg-panel: rgba(21, 15, 12, 0.86);
  --sd-ink: #f4ead9;
  --sd-ink-muted: #cdbea9;
  --sd-gold: #e7a94c;
  --sd-gold-bright: #f4c977;
  --sd-focus: #ffd27a;

  /* Welt-Akzentfarben (Portale + spätere Welt-Atmosphären) */
  --w-spielen: #4fb3bf;
  --w-ki: #4fd1b0;
  --w-ki-rune: #6fa3ff;
  --w-werkstatt: #d98a3d;
  --w-bilder: #b06bd9;
  --w-unterwegs: #5fb3d9;
  --w-kueche: #d9713f;
  --w-geschichten: #c15a72;
  --w-benutzt: #8493ab;
  --w-walhalla: #5ec9f2;

  --sd-font-display: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Palatino, Georgia, serif;
  --sd-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sd-radius: 14px;
  --sd-max: 78rem;
}

/* ---------- Reset / Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--sd-bg);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--sd-font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.container { max-width: var(--sd-max); margin-inline: auto; padding-inline: 1.25rem; }

/* ---------- Skip Link & Fokus ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--sd-gold);
  color: #1a1210;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
  z-index: 100;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--sd-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Site Header (minimal, Wortmarke ist Teil der Hero) ---------- */
.site-header {
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__title {
  font-family: var(--sd-font-display);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--sd-ink-muted);
  text-decoration: none;
}
.site-header__title strong { color: var(--sd-gold); }

/* ---------- HERO-TITELZONE (Wortmarke, Leitgedanke, Intro) ---------- */
.hero {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center;
}
.hero__brand {
  font-size: clamp(2.4rem, 7vw, 4rem);
  letter-spacing: .04em;
  color: var(--sd-gold-bright);
  text-shadow: 0 0 28px rgba(231, 169, 76, .35);
}
.hero__subline {
  font-family: var(--sd-font-display);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--sd-ink);
  margin-bottom: .35em;
}
.hero__leitgedanke {
  color: var(--sd-ink-muted);
  font-style: italic;
  margin-bottom: 1.1em;
}
.hero__intro {
  color: var(--sd-ink-muted);
  font-size: 1rem;
}

/* Banner-Bildstreifen (Wortmarke/Subline sind im Konzeptbild bereits als Teil
   des Raums vorhanden – "SOLDESTROYER" steht auf einem Sims über den Portalen).
   Nur auf Desktop genutzt, um die Titelzone in die Szene zu verschmelzen;
   siehe @media (min-width:900px) unten. Mobil bleibt unverändert verborgen. */
.hero__banner { display: none; }

/* ---------- DER RAUM: Szene mit eingebetteten Portalen ---------- */
/* main#main trägt hier keinerlei content-width-Beschränkung (front-page.html
   nutzt bewusst kein "constrained" Layout), daher genügt normale Blockbreite
   für den Full-Bleed-Effekt. Kein width:100vw/negative-margin-Hack nötig –
   der hätte bei sichtbarer Scrollbar zu 100vw > tatsächlich sichtbarer
   Breite geführt und damit den horizontalen Overflow verursacht. */
.hero__room-wrap {
  position: relative;
}
.hero__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 524; /* mobil: enger Bildausschnitt, siehe hero-mobile */
  object-fit: cover;
  object-position: center;
}
/* Vignette für zusätzliche räumliche Tiefe, rein dekorativ */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,4,3,.55) 100%);
}
.hero__scene-caption {
  /* visuell verborgen, beschreibt die Szene für nicht-visuelle Nutzer:innen,
     da das Bild selbst keinen zugänglichen Textinhalt trägt */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.portals__intro {
  margin: 1.25rem 0 0;
  padding-inline: 1.25rem;
  color: var(--sd-ink-muted);
  font-size: .95rem;
  text-align: center;
}

/* ---------- Portal-Liste: mobil/tablet = Kartenliste (unverändert) ---------- */
.portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .portal-grid { grid-template-columns: 1fr 1fr; }
}

.portal-card {
  --accent: var(--sd-gold);
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.25rem 1.15rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.portal-card::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
  opacity: .5;
  pointer-events: none;
}
.portal-card__icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
  margin-bottom: .75rem;
}
.portal-card__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
  margin-bottom: .3em;
}
.portal-card__caption {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: .5em;
}
.portal-card__teaser {
  display: block;
  font-size: .92rem;
  color: var(--sd-ink-muted);
}

.portal-card[data-world="spielen"]        { --accent: var(--w-spielen); }
.portal-card[data-world="ki"]             { --accent: var(--w-ki); }
.portal-card[data-world="werkstatt"]      { --accent: var(--w-werkstatt); }
.portal-card[data-world="bilder"]         { --accent: var(--w-bilder); }
.portal-card[data-world="unterwegs"]      { --accent: var(--w-unterwegs); }
.portal-card[data-world="kueche"]         { --accent: var(--w-kueche); }
.portal-card[data-world="geschichten"]    { --accent: var(--w-geschichten); }
.portal-card[data-world="benutzt"]        { --accent: var(--w-benutzt); }

.portal-card--soon .portal-card__title::after {
  content: " (folgt)";
  font-size: .7rem;
  color: var(--sd-ink-muted);
  font-family: var(--sd-font-body);
}

/* Der Hover-Chip existiert nur in der Desktop-Rauminszenierung (s.u.);
   auf Mobil/Tablet bleibt er unsichtbar und wird nicht mitgelesen. */
.portal-chip { display: none; }

/* Der Portalbild-Ausschnitt (05.09.2026) existiert ebenfalls nur in der
   Desktop-Rauminszenierung; auf Mobil/Tablet bleibt die dortige
   Kartenoptik unverändert, kein zusätzliches Bild im Kartentext. */
.portal-card__frame { display: none; }

/* JS-only: kurzer Öffnen-Effekt beim Klick, respektiert prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .portal-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .js-motion .portal-card:hover,
  .js-motion .portal-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .js-motion .portal-card--opening {
    transform: scale(1.035);
    box-shadow: 0 0 0 1px var(--accent), 0 0 50px 4px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): Portale werden Teil der Raumszene statt Kartenraster.
   Jede <li> bekommt per Inline-Style die Position/Größe des jeweiligen
   Fensters/Monitors im Bild (--x/--y/--w/--h, in % relativ zum Bild).
   ========================================================================= */
@media (min-width: 900px) {
  .hero__image { aspect-ratio: 1536 / 909; }

  .portals__intro { display: none; } /* der Raum spricht für sich */

  /* Titelzone verschmilzt mit der Raumszene (statt eigener Textblock
     über dem Bild). Der schmale Ausschnitt oben mit "SOLDESTROYER" auf
     dem Sims (hero__banner) sitzt direkt vor dem – unverändert
     freigegebenen – Raumbild. Wortmarke/Subline/Leitgedanke/Intro liegen
     als Overlay mit dunklem Scrim darüber. Die acht Portalflächen darunter
     werden von dieser Änderung nicht berührt. */
  .home .site-header,
  .front-page .site-header { display: none; } /* Schriftzug oben links: rein dekorativ, keine Funktion auf der Startseite */

  main#main { position: relative; }

  /* Banner nicht mehr als durchgehende Leiste, sondern als zwei seitliche
     "Flanken" derselben Bildquelle. Dazwischen (exakt dort, wo die
     HTML-Wortmarke liegt) wird nichts vom Banner gezeigt – der im Bild
     gemalte Schriftzug "SOLDESTROYER" (Quellbild-x ca. 480–1040 von
     1536px) liegt dadurch nie mehr hinter der echten Wortmarke. Beide
     Flanken zeigen weiterhin exakt denselben Bildausschnitt/Maßstab wie
     zuvor die durchgehende Leiste (object-fit:cover, gleiche Höhe) – nur
     die sichtbare Breite pro Seite ist über feste Prozentwerte begrenzt.
     Die Schnittkanten (30,5% / 32%, ≈ Quellbild-x 468 bzw. 1045) liegen
     gezielt in ruhigen, dunklen Bildstellen (nicht mitten durch
     Bilderrahmen, Figuren oder die Notiz). Die Notiz "Ideen. Projekte."
     (Quellbild-x ca. 1060–1145) bleibt dadurch vollständig innerhalb der
     rechten Flanke sichtbar und unverändert. */
  .hero__banner {
    display: block;
    width: 100%;
    height: clamp(4.5rem, 6vw, 5.5rem);
    position: relative;
    line-height: 0;
  }
  .hero__banner__flank {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
  }
  .hero__banner__flank--left {
    left: 0;
    width: 30.5%;
  }
  .hero__banner__flank--right {
    right: 0;
    width: 32%;
  }
  .hero__banner__flank img {
    position: absolute;
    top: 0;
    width: 100vw;
    max-width: none; /* die globale img{max-width:100%}-Regel bezieht sich
      sonst auf die schmale Flanke (Containing Block) statt auf den
      Viewport und würde das Bild fälschlich auf Flankenbreite stauchen –
      dadurch würde der Bildausschnitt verschoben und der Schriftzug
      wieder sichtbar. */
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .hero__banner__flank--left img { left: 0; }
  .hero__banner__flank--right img { right: 0; }

  .hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: 38rem;
    margin: 0 auto;
    padding: .7rem 1.5rem .6rem;
    text-align: center;
    pointer-events: none;
  }
  .hero::before {
    content: "";
    position: absolute;
    /* Bleed nach allen Seiten, unten deutlich weiter als seitlich: die Box
       selbst bleibt unsichtbar, sie gibt dem Verlauf nur Raum, vollständig
       auf 0 auszulaufen, bevor irgendeine Kante erreicht wird (Korrektur­
       runde 31.08.2026, Punkt 2 – kein hart gesetzter Kasten mehr). */
    inset: -1rem -3rem -7rem -3rem;
    z-index: -1;
    /* Mehrstufiger Verlauf statt Plateau+Kante: blendet von oben nach unten
       in vier sanften Schritten aus, ohne Zwischenstopp auf konstanter
       Deckkraft. Der lange, weiche Auslauf (45→100%) reicht bewusst bis in
       den oberen Rand des Raumbilds hinein – dort sitzt die gemalte Tafel
       mit ähnlichem Wortlaut wie der Leitgedanke; das dämpft sie zusätzlich,
       ohne die Portaltitel merklich zu verdunkeln (Punkt 3). */
    background: linear-gradient(180deg,
      rgba(9,7,5,.92) 0%,
      rgba(9,7,5,.88) 45%,
      rgba(9,7,5,.55) 70%,
      rgba(9,7,5,.16) 88%,
      rgba(9,7,5,0) 100%);
    /* Horizontale Maske mit breiten, weichen Rampen (statt der schmalen
       5–25%/75–95%-Rampen zuvor): dadurch verschmelzen auch die seitlichen
       Kanten organischer mit der Szene, ohne den Lesekern zu verengen. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 3%, black 32%, black 68%, transparent 97%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 3%, black 32%, black 68%, transparent 97%, transparent 100%);
  }
  .hero__brand {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    text-shadow: 0 0 16px rgba(231, 169, 76, .45);
    margin-bottom: .1em;
  }
  .hero__subline {
    font-size: .8rem;
    margin-bottom: .2em;
  }
  .hero__leitgedanke {
    font-size: .72rem;
    margin-bottom: .3em;
  }
  .hero__intro {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 31rem;
    margin: 0 auto;
  }

  .hero__stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .hero__stage > picture,
  .hero__stage > .portal-nav,
  .hero__stage > .notaus {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .hero__stage > picture { z-index: 0; }
  .hero__stage > .portal-nav { z-index: 1; }
  .hero__stage > .notaus { z-index: 2; }

  .portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }

  .portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Fensterfläche im Bild IST die Karte.
     Im Ruhezustand bleibt die Klickfläche komplett unsichtbar – sichtbar
     ist ausschließlich der im Bild gemalte Portalrahmen. Die eigentliche
     Fläche bleibt zu 100% klickbar/fokussierbar. */
  .portal-card {
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    overflow: visible; /* Chip darf über die schmale Fensterfläche hinausragen */
  }
  /* Portalbild-Ausschnitt (05.09.2026, ersetzt die vorherige rechteckige
     Hover-Kontur ::before): zeigt exakt den zum jeweiligen Fenster
     gehörenden Ausschnitt der Raumszene noch einmal einzeln an, in einem
     auf die Fensterform zugeschnittenen, überlaufverdeckten Rahmen. So
     kann beim Hover/Fokus das Portalbild selbst dezent skaliert werden,
     statt eine zusätzliche rechteckige Fläche einzublenden. --xn/--yn/
     --wn/--hn sind die unitless Zahlenwerte zu --x/--y/--w/--h (s. Markup),
     nötig, da CSS zwei Prozentwerte nicht direkt dividieren kann. */
  .portal-card__frame {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 8px;
    pointer-events: none;
  }
  .portal-card__img {
    position: absolute;
    top: calc(-100% * var(--yn) / var(--hn));
    left: calc(-100% * var(--xn) / var(--wn));
    width: calc(100% * 100 / var(--wn));
    height: calc(100% * 100 / var(--hn));
    max-width: none;
    transform: scale(1);
    transition: transform .35s ease;
  }

  /* Sichtbar, aber nicht redundant: Titel/Caption/Teaser nur für Screenreader
     bzw. als kleine Bestätigung bei Hover/Fokus – das Bild trägt die Optik. */
  .portal-card__icon { display: none; }
  .portal-card__title,
  .portal-card__caption,
  .portal-card__teaser {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Kleine Wächter-Markierung pro Fenster (unten mittig) – wie die
     ::before-Kontur nur bei Hover/Fokus sichtbar, damit im Ruhezustand
     wirklich kein permanenter Glow über dem gemalten Portal liegt
     (Korrekturrunde 31.08.2026, Punkt 1: „kein permanenter Glow"). */
  .portal-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 70%, transparent);
    opacity: 0;
    pointer-events: none;
  }
  .portal-card--soon { cursor: default; }

  /* Sichtbarer Titel-Chip, erscheint bei Hover/Fokus (bzw. dauerhaft
     schwach sichtbar), damit die Fläche nachweislich nicht nur ein
     unsichtbarer Hotspot ist. */
  .portal-chip {
    display: inline-flex;
    position: absolute;
    left: 50%;
    bottom: -.6rem;
    transform: translate(-50%, 100%);
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .35rem .75rem;
    border-radius: 10px;
    background: rgba(8,6,5,.94);
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    color: var(--sd-ink);
    font-size: .78rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 11rem;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
  }
  .portal-card--soon .portal-chip { color: var(--sd-ink-muted); }

  /* Portal 1 ("Spielen & Welten") sitzt direkt über der Hexe: der Chip
     würde in seiner Standardposition (unterhalb der Fensterfläche) auf
     ihrem Gesicht landen. Für dieses eine Portal erscheint der Chip
     deshalb oberhalb der Fensterfläche statt darunter (Korrekturrunde
     31.08.2026, Punkt 1: keine Fläche/Linie über der Hexe). */
  .portal-card[data-world="spielen"] .portal-chip {
    bottom: auto;
    top: -.6rem;
    transform: translate(-50%, -100%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .portal-card::after { transition: opacity .18s ease; }
    .js-motion .portal-chip { transition: opacity .15s ease; }
  }

  .portal-card:hover .portal-card__img,
  .portal-card:focus-visible .portal-card__img {
    transform: scale(1.05);
  }
  .portal-card:hover::after,
  .portal-card:focus-visible::after {
    opacity: 1;
  }
  .portal-card--soon:hover::after,
  .portal-card--soon:focus-visible::after {
    opacity: .45;
  }
  /* Eigene, dezente Fokusmarkierung (05.09.2026): folgt dank border-radius
     auf .portal-card der Fensterform statt eines eckigen Standard-
     Outlines, bleibt aber – anders als die frühere ::before-Kontur – nur
     für Tastatur-Fokus sichtbar, nicht bei Maus-Hover. */
  .portal-card:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }
  .portal-card:hover .portal-chip,
  .portal-card:focus-visible .portal-chip,
  li:has(.portal-card:hover) .portal-chip,
  li:has(.portal-card:focus-visible) .portal-chip {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(231,169,76,.15);
  padding: 1.75rem 1.25rem 2.5rem;
  color: var(--sd-ink-muted);
  font-size: .85rem;
}
.site-footer a { color: var(--sd-gold); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__row { max-width: var(--sd-max); margin-inline: auto; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.site-footer__note { max-width: 40rem; }
.site-footer__links { white-space: nowrap; }
.site-footer__credit-row {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(231,169,76,.08);
  font-size: .78rem;
  opacity: .8;
}
.site-footer__credit-row p { margin: 0; }

/* ---------- Rechtliche Seiten (Impressum/Datenschutz): ruhig, gut lesbar ---------- */
.page-legal {
  max-width: 42rem;
}
.page-legal h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 1rem;
}
.page-legal h2 {
  font-size: 1.2rem;
  margin-top: 2.25rem;
  color: var(--sd-gold-bright);
}
.page-legal p,
.page-legal li {
  color: var(--sd-ink-muted);
  font-size: 1rem;
}
.page-legal a { color: var(--sd-gold); text-decoration: underline; text-underline-offset: 2px; }
.page-legal ul { padding-left: 1.2rem; }
.page-legal li { margin-bottom: .4em; }

/* =========================================================================
   WELT: ABENTEUER MIT KI  — eigene Atmosphäre (nordisch-mystisch)
   ========================================================================= */
.world-ki {
  --sd-bg: #0b1412;
  --sd-bg-elevated: #101d1a;
  --accent: var(--w-ki);
  --accent-2: var(--w-ki-rune);
  background:
    radial-gradient(1200px 500px at 15% -10%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--sd-bg);
  min-height: 100%;
}

/* Navigationsregel (05.09.2026, siehe claude/regel-navigation-zurueck-links.md):
   "Zurück ins Chaos" führt IMMER zur Soldestroyer-Startseite.
   "Zurück zu …" (.back-to-parent) führt eine logische Ebene zurück, laut
   Seitenhierarchie – auf oberster Ebene (z.B. Spielen & Welten) ist das
   ebenfalls die Startseite, auf tieferen Seiten (z.B. Walhalla) die
   jeweils übergeordnete Seite. Beide Varianten teilen bewusst dieselbe
   Optik, oben, immer erreichbar. */
.back-to-chaos,
.back-to-parent,
.back-to-context {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 1.25rem 0;
  padding: .5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 45%, transparent);
  border-radius: 999px;
  text-decoration: none;
  color: var(--sd-gold-bright);
  font-size: .85rem;
  background: rgba(0,0,0,.25);
}
.back-to-chaos:hover, .back-to-chaos:focus-visible,
.back-to-parent:hover, .back-to-parent:focus-visible,
.back-to-context:hover, .back-to-context:focus-visible { border-color: var(--sd-gold-bright); }

.world-hero {
  padding: 2rem 1.25rem 1.5rem;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.world-hero__eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}
.world-hero__title {
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--sd-ink);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.world-hero p { color: var(--sd-ink-muted); font-size: 1.05rem; }

/* "Mehr folgt"-Hinweis: als Zitat-Block gepflegt (semantisch passend) */
.world-ki .wp-block-quote {
  max-width: 34rem;
  margin: 0 auto 3rem;
  padding: 0 1.25rem;
  text-align: center;
  color: var(--sd-ink-muted);
  font-style: italic;
  border: 0;
}
.world-ki .wp-block-quote p { font-size: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .js-motion .world-hero { animation: sdFadeUp .55s ease both; }
}
@keyframes sdFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Runen-Trenner: reines CSS/SVG-Ornament statt zusätzlicher Grafik-Assets */
.rune-divider {
  height: 1px;
  max-width: 20rem;
  margin: 1.75rem auto;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent);
  position: relative;
}
.rune-divider::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-2);
  background: var(--sd-bg);
  padding: 0 .6rem;
  font-size: .7rem;
}

.figures {
  max-width: 56rem;
  margin: 0 auto;
  padding: .5rem 1.25rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .figures { grid-template-columns: 1fr 1fr; }
}

.figure-card {
  background: rgba(0,0,0,.28);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.5rem;
}
.figure-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--sd-radius) - 4px);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--sd-ink-muted);
  font-size: .85rem;
  padding: 1rem;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-2) 8%, transparent) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  border: 1px dashed color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.figure-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.figure-card__name {
  font-family: var(--sd-font-display);
  font-size: 1.3rem;
  color: var(--sd-ink);
  margin-bottom: .2em;
}
.figure-card__role {
  display: block;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75em;
}
.figure-card__bio { color: var(--sd-ink-muted); font-size: .96rem; margin: 0; }

.back-to-chaos--bottom {
  display: flex;
  justify-content: center;
  margin: 0 auto 3rem;
}

/* =========================================================================
   SEITE: BAUSTELLE — wiederverwendbare "Baustelle im Chaos"-Seite
   Wird für alle bereits verlinkten, aber inhaltlich noch nicht fertigen
   Bereiche verwendet (Ziel-Link zeigt vorübergehend auf /baustelle/, wird
   bei Fertigstellung des jeweiligen Bereichs auf die echte Seite umgestellt;
   die Baustellenseite selbst bleibt für andere unfertige Bereiche bestehen).

   Bildkomposition (baustelle-desktop/-mobile, nachgeliefert 04.09.2026):
   die Ratten-Werkstattszene enthält bewusst KEINEN eingebrannten Text – alle
   Inhalte (Schild-Überschrift, Sprechblase, Status-Tafel, Fußzeile) sind
   echtes, zugängliches HTML, das per Prozent-Koordinaten auf die freien
   Flächen der Szene gelegt wird: das linke Schild trägt die Überschrift,
   die freie Fläche über der Ratte trägt die Sprechblase, das zweite
   (rechte) Schild trägt die Status-Tafel – nur auf Desktop, im Mobil-
   Zuschnitt gibt es kein zweites Schild. Kerze und Werkzeugkoffer bleiben
   in beiden Layouts frei von Textflächen: mobil, weil Sprechblase/Tafel/
   Fußzeile im normalen Lesefluss UNTER dem Bild stehen (kein Overlay
   nötig); desktop, weil die Overlay-Koordinaten gezielt an den Bildinhalt
   (Schilder, freie Fläche über dem Kopf, unterer Rand) angepasst sind.
   ========================================================================= */
.page-baustelle {
  --accent: var(--sd-gold);
  background:
    radial-gradient(900px 480px at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, color-mix(in srgb, var(--w-werkstatt) 10%, transparent), transparent 60%),
    var(--sd-bg);
  min-height: 100%;
}

.baustelle {
  max-width: var(--sd-max);
  margin: 1.5rem auto 3rem;
  padding: 0 1.25rem;
}

.baustelle__stage {
  position: relative;
  border-radius: var(--sd-radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 30%, transparent);
  background: var(--sd-bg-elevated); /* sichtbar während des Ladens */
}
/* Eigener innerer Rahmen NUR um Bild + Schild-Überschrift: dessen Höhe
   entspricht exakt der Bildhöhe (kein anderer Inhalt darin), damit die
   Prozent-Koordinaten der Schild-Überschrift sich korrekt auf das Bild
   beziehen. .baustelle__stage selbst kann auf Mobil höher sein als das
   Bild (Sprechblase/Tafel/Fußzeile stehen dort im normalen Lesefluss
   darunter) – Prozentwerte relativ zu stage wären deshalb falsch. */
.baustelle__frame {
  position: relative;
}
.baustelle__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1919; /* mobil: hochformatiger Zuschnitt */
  object-fit: cover;
  display: block;
}
/* Leichte Vignette für zusätzliche Tiefe, rein dekorativ – bewusst nur
   über dem Bild (.baustelle__frame), nicht über den gestapelten Mobil-
   Textkarten darunter. */
.baustelle__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 90% at 50% 35%, transparent 60%, rgba(6,4,3,.4) 100%);
}

/* ---------- Schild-Überschrift: liegt in beiden Layouts auf dem linken
   Holzschild, deshalb in beiden Fällen absolut positioniert (relativ zu
   .baustelle__frame, siehe oben). Dunkle „Ink"-Farbe statt der üblichen
   hellen Textfarbe, da der Untergrund helles Holz ist (keine eigene
   Box/Hintergrund nötig). ---------- */
.baustelle__sign-text {
  position: absolute;
  left: 4%;
  top: 23.5%;
  width: 28%;
  height: 17.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.baustelle__eyebrow {
  font-size: clamp(.56rem, 1.9vw, .72rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3d2410;
  text-shadow: 0 1px 0 rgba(255, 238, 208, .3);
  margin: 0 0 .3em;
}
.baustelle__title {
  font-size: clamp(.92rem, 3.3vw, 1.3rem);
  line-height: 1.12;
  font-weight: 800;
  color: #170d05;
  /* Feinschliff 05.09.2026 (Kontrast/Lesbarkeit): zusätzlich zum
     hellen "eingeritzten" Glanzrand (1. Layer) ein weicher dunkler
     Schein direkt hinter den Buchstaben (2./3. Layer) – erhöht die
     gefühlte Deckkraft gegenüber der unruhigen Holzmaserung, ohne
     eine sichtbare Box/Kante zu erzeugen. */
  text-shadow:
    0 1px 0 rgba(255, 238, 208, .3),
    0 0 10px rgba(15, 8, 3, .5),
    0 2px 3px rgba(15, 8, 3, .4);
  margin: 0;
}
/* Optionale dezente Zeile unter der Hauptaussage – auf kleinen Schild-
   Flächen (Mobil, schmales Desktop) bewusst ausgeblendet, siehe
   @media-Freischaltung weiter unten, damit sie nicht in die Enge auf
   der Holzfläche gezwängt wird. */
.baustelle__sign-note {
  display: none;
  font-family: var(--sd-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(.58rem, 1.7vw, .7rem);
  color: #1f1006;
  /* Feinschliff 05.09.2026: war zuvor kaum erkennbar (#5a3a1c ohne
     Schatten) – dunklere Grundfarbe + derselbe dezente dunkle Schein
     wie bei der Hauptaussage, Position/Zeilenumbruch unverändert. */
  text-shadow:
    0 1px 0 rgba(255, 238, 208, .28),
    0 0 8px rgba(15, 8, 3, .45);
  margin: .5em 0 0;
}

/* ---------- Sprechblase, Status-Tafel, Fußzeile: mobil normaler
   Lesefluss UNTER dem Bild (keine Overlay-Koordinaten nötig, damit Ratte/
   Kerze/Koffer frei bleiben), Desktop dann als Overlay auf die freien
   Bildflächen verschoben (siehe Media Query unten). ---------- */
.baustelle__bubble {
  margin: 1.1rem 1.25rem 0;
  padding: 1.1rem 1.3rem;
  background: rgba(21,15,12,.9);
  border: 1px solid color-mix(in srgb, var(--sd-gold) 40%, transparent);
  border-radius: 12px;
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
}
.baustelle__bubble p { margin: 0; }

.baustelle__board {
  margin: 1rem 1.25rem 0;
  padding: 1.1rem 1.2rem;
  background: rgba(0,0,0,.28);
  border: 1px solid color-mix(in srgb, var(--sd-gold) 25%, transparent);
  border-radius: 10px;
  text-align: left;
}
.baustelle__board-title {
  margin: 0 0 .75em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sd-gold-bright);
  /* Feinschliff 05.09.2026 (Kontrast/Lesbarkeit): dunkler Schein hinter
     der Überschrift, damit sie auch auf dunkleren Holzbereichen des
     rechten Schilds klar hervorsticht – Struktur/Abstände unverändert. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 6px rgba(0, 0, 0, .5);
}
.baustelle__board ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  font-size: .92rem;
  line-height: 1.3;
  /* Feinschliff 05.09.2026: heller (--sd-ink statt --sd-ink-muted) plus
     dunkler Schein für mehr Kontrast auf dem Holz. */
  color: var(--sd-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 5px rgba(0, 0, 0, .45);
}
.baustelle__board li span {
  display: block;
  color: var(--sd-gold-bright);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 6px rgba(0, 0, 0, .5);
}

.baustelle__footnote {
  margin: 1.1rem 1.25rem 0;
  padding: 0 .25rem;
  color: var(--sd-ink-muted);
  font-size: .88rem;
  font-style: italic;
  text-align: center;
}

/* =========================================================================
   DESKTOP (≥900px): Sprechblase, Status-Tafel und Fußzeile wandern als
   Overlay auf die freien Flächen der Szene. Koordinaten wurden am
   gelieferten baustelle-desktop.jpg (1920×1079) ausgemessen:
   - linkes Schild:  Quellbild-x ca.  65– 580, -y ca.  65– 430
   - rechtes Schild: Quellbild-x ca. 1440–1740, -y ca. 370– 750
   - Kerze (Ratte):  Quellbild-x ca.  580– 770, -y ca.  340– 560
   - Werkzeugkoffer: Quellbild-x ca.  930–1310, -y ca.  650– 880
   Keine der Text-Flächen unten überschneidet Kerze oder Koffer.
   ========================================================================= */
@media (min-width: 900px) {
  .baustelle__image { aspect-ratio: 1920 / 1079; }

  /* Feinschliff 04.09.2026: Box verkleinert und an die tatsächliche,
     leicht gedrehte Holzfläche des linken Schilds angepasst (anhand des
     gelieferten Fotos ausgemessen) – vorher ragte die Box an der
     Unterkante rechts über den Schildrand hinaus. Schrift zusätzlich
     verkleinert/enger, damit Überschrift+Titel sicher auf der Fläche
     bleiben. */
  .baustelle__sign-text {
    left: 6%;
    top: 9.5%;
    width: 22%;
    height: 28%;
  }
  .baustelle__eyebrow { font-size: clamp(.8rem, 1.2vw, 1.05rem); letter-spacing: .16em; margin-bottom: .5em; }
  .baustelle__title { font-size: clamp(1.05rem, 2.05vw, 1.65rem); line-height: 1.2; }

  /* Feinschliff 04.09.2026: echte Sprechblasenform (abgeflachte Ecke +
     Zipfel zur Schnauze der Ratte) statt schlichter Box, kompakter und
     näher an Kopf/Lampe positioniert statt breit über die ganze Lücke
     zwischen den Schildern zu spannen. */
  .baustelle__bubble {
    position: absolute;
    left: 31%;
    top: 2.5%;
    width: 26%;
    margin: 0;
    font-size: clamp(.86rem, 1.3vw, 1.05rem);
    line-height: 1.32;
    padding: .8rem 1.05rem;
    text-align: center;
    border-radius: 22px 22px 22px 6px;
  }
  .baustelle__bubble::after {
    content: "";
    position: absolute;
    left: 34%;
    bottom: -13px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid rgba(21, 15, 12, .92);
    transform: rotate(-6deg);
  }

  /* Feinschliff 04.09.2026: Liste war zu hoch für die Schildfläche (5
     Holzlatten) und lief unten über den Schildrand hinaus. Einträge jetzt
     einzeilig (Name + Doppelpunkt + Status statt zweier Zeilen), Box an
     den Latten-Bereich angepasst. */
  /* Kompakte Basiswerte für die schmalste Desktop-Breite (~900–1099px):
     die Schildfläche des rechten Schilds ist hier physisch am kleinsten,
     deshalb bewusst enger als ab 1100px (siehe Media Query weiter unten).
     Historisch bekannter Problembereich – Statusliste lief hier zuvor
     schon einmal über den Schildrand hinaus. */
  .baustelle__board {
    position: absolute;
    left: 76%;
    top: 36.8%;
    width: 15.3%;
    margin: 0;
    padding: .4rem .55rem;
  }
  .baustelle__board-title { font-size: clamp(.5rem, .75vw, .58rem); letter-spacing: .08em; margin-bottom: .35em; }
  .baustelle__board ul { font-size: clamp(.48rem, .72vw, .56rem); gap: .16rem; line-height: 1.15; }
  .baustelle__board li span {
    display: inline;
    margin-right: 0;
  }
  /* Geschütztes Leerzeichen statt normalem Space: bleibt zuverlässig
     erhalten, auch ohne Leerzeichen zwischen </span> und dem Status-Text
     im Markup (vorher fehlte hier sichtbar der Abstand: "Mimir:auf
     Mission" statt "Mimir: Mission"). */
  .baustelle__board li span::after { content: ":\00a0"; color: var(--sd-gold); font-weight: 400; }

  .baustelle__footnote {
    /* unterer Rand über der Werkbank, mit Verlauf hinterlegt für
       Lesbarkeit über den Werkzeugen */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2.5rem 1.5rem .9rem;
    background: linear-gradient(0deg, rgba(6,4,3,.85) 0%, rgba(6,4,3,.55) 55%, transparent 100%);
    font-size: .82rem;
  }
}

/* Feinschliff 04.09.2026: Große Desktop-Auflösungen (≥1440px) – die Szene
   wirkte relativ klein, von viel leerer Fläche umgeben. Container darf
   hier breiter werden (bis 100rem), Seitenverhältnis bleibt über
   aspect-ratio erhalten, das Bild wird nicht beschnitten. Betrifft
   ausschließlich .baustelle, nicht die globale --sd-max-Variable (Header/
   Footer/andere Seiten bleiben unverändert). */
@media (min-width: 1440px) {
  .baustelle { max-width: min(94vw, 100rem); }
}

/* Feinschliff 05.09.2026: die dezente Zusatzzeile unter der Hauptaussage
   ("Die Ratten arbeiten dran. Angeblich.") braucht mehr Luft auf der
   Schildfläche, als bei ~900–1200px zur Verfügung steht. Erst ab hier
   bewusst eingeblendet, statt sie in die Enge zu zwängen. */
@media (min-width: 1200px) {
  .baustelle__sign-note { display: block; }
}

/* Feinschliff 05.09.2026: ab ~1100px steht auf dem rechten Schild spürbar
   mehr physischer Platz zur Verfügung (die Schildfläche wächst mit der
   Bildgröße) – hier darf die Statusliste großzügiger atmen als in der
   engen 900–1099px-Basisversion oben. */
@media (min-width: 1100px) {
  .baustelle__board { padding: .55rem .8rem; }
  .baustelle__board-title { font-size: clamp(.58rem, .9vw, .72rem); letter-spacing: .1em; margin-bottom: .45em; }
  .baustelle__board ul { font-size: clamp(.6rem, .92vw, .74rem); gap: .3rem; line-height: 1.22; }
  .baustelle__board li span::after { content: "\00a0\00b7\00a0"; color: var(--sd-gold); font-weight: 400; }
}

/* =========================================================================
   WELT: SPIELEN & WELTEN — Rohfassung, zwei eigenständige Varianten (04.09.2026)
   V1 "Rauminszenierung": strukturierte Card-/Portal-Variante.
   V2 "Gemalte Fantasy-Szene": malerische, erzählerische Variante mit
   Schild-/Parchment-Optik (rein CSS, keine zusätzlichen Bild-Assets).
   Ausgewählt serverseitig per Shortcode (functions.php, ?v=1 / ?v=2),
   dadurch lädt immer nur der Bildsatz der aktiv angezeigten Variante.
   Alle Regeln unten sind auf .world-spielen (Body-Klasse der Seite
   spielen-welten) begrenzt und berühren keine andere Seite.
   ========================================================================= */
.world-spielen {
  --accent: var(--w-spielen);
  background:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--sd-gold) 12%, transparent), transparent 60%),
    var(--sd-bg);
  min-height: 100%;
}

.sw-page { max-width: var(--sd-max); margin: 0 auto; padding: 0 1.25rem 3rem; }

/* ---------- Hero (V1: schwebende Portal-Stimmung, reine Typografie) ---------- */
.sw-hero {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
}
.sw-hero__eyebrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5em;
}
.sw-hero__title {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  color: var(--sd-gold-bright);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 40%, transparent);
  margin: 0 0 .2em;
}
.sw-hero__subtitle {
  font-family: var(--sd-font-display);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sd-ink);
  margin: 0 0 .9em;
}
.sw-hero__intro { color: var(--sd-ink-muted); font-size: 1rem; margin: 0 0 1em; }
.sw-hero__quote {
  font-family: var(--sd-font-display);
  font-style: italic;
  color: var(--sd-gold);
  font-size: 1.02rem;
  margin: 0;
}

/* ---------- Card-Grid (beide Varianten teilen das Grundgerüst) ---------- */
.sw-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 1.5rem 0;
  padding: 0;
}
.sw-card { flex: 1 1 150px; min-width: 150px; }
.sw-card--featured { flex: 2 1 260px; }
.sw-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--sd-radius);
  overflow: hidden;
}
.sw-card--featured > a { border-color: color-mix(in srgb, var(--sd-gold) 55%, transparent); }
.sw-card__frame { position: relative; display: block; line-height: 0; }
.sw-card__img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.sw-card__badge {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  left: .6rem;
  padding: .5rem .6rem;
  background: rgba(8,6,5,.86);
  border: 1px solid color-mix(in srgb, var(--sd-gold) 55%, transparent);
  border-radius: 8px;
  color: var(--sd-gold-bright);
  font-family: var(--sd-font-display);
  font-size: .78rem;
  line-height: 1.3;
  text-align: center;
}
.sw-card__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .8rem .9rem 1rem;
}
.sw-card__title {
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
}
.sw-card__tag { color: var(--sd-ink-muted); font-size: .84rem; }
.sw-card__cta { color: var(--accent); font-size: .82rem; margin-top: .35em; }

@media (prefers-reduced-motion: no-preference) {
  .sw-card > a { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .sw-card > a:hover,
  .sw-card > a:focus-visible {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
.sw-card > a:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }

/* ---------- Info-Boxen + Zitat (nur V1, siehe PHP) ---------- */
.sw-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.75rem 0;
}
/* Feinschliff 05.09.2026: WordPress fügt zwischen den Shortcode-Elementen
   zwei leere Formatierungsknoten ein (<br> bzw. leeres <p></p>, Artefakt
   der Inhalts-Filterung) – ohne jeden Inhalt. Sie werden ausgeblendet,
   damit sie die gezielte Grid-Positionierung unten nicht mit
   zusätzlichen leeren Zellen/Zeilen durcheinanderbringen. Kein Eingriff
   in echten Inhalt. */
.sw-info-grid > br,
.sw-info-grid > p:empty {
  display: none;
}
@media (min-width: 700px) {
  .sw-info-grid { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
  /* Feinschliff 05.09.2026: Zitat-Kasten stand bisher unterhalb beider
     Info-Kästen. Jetzt gezielt in die mittlere Spalte zwischen "Meine
     Charaktere" und "Eigene Welten & Experimente" gesetzt – horizontal
     durch die mittlere Spalte, vertikal per align-self zwischen den
     beiden (höheren) Kästen zentriert. Inhalt/Gestaltung des Zitat-
     Kastens selbst unverändert, nur seine Position im Grid. */
  .sw-info-grid .sw-info-box:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .sw-info-grid .sw-info-box:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .sw-info-grid .sw-info-quote {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
}
.sw-info-box {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  background: rgba(0,0,0,.26);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.15rem 1.2rem;
}
.sw-info-box:hover, .sw-info-box:focus-visible { border-color: var(--accent); }
.sw-info-box__icon { width: 1.7rem; height: 1.7rem; color: var(--accent); }
.sw-info-box__title { font-family: var(--sd-font-display); font-size: 1.02rem; color: var(--sd-gold-bright); }
.sw-info-box__text { color: var(--sd-ink-muted); font-size: .9rem; }
.sw-info-box__cta { color: var(--accent); font-size: .84rem; margin-top: .2em; }
.sw-info-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  padding: 1.15rem 1.2rem;
  border: 1px dashed color-mix(in srgb, var(--sd-gold) 45%, transparent);
  border-radius: var(--sd-radius);
  color: var(--sd-ink-muted);
  font-family: var(--sd-font-display);
  font-style: italic;
}
.sw-info-quote__symbol { width: 1.6rem; height: 1.6rem; color: var(--sd-gold); }
.sw-info-quote p { margin: 0; }

/* ---------- Banner (V1: schlichte Abschlusszeile) ---------- */
.sw-banner { text-align: center; padding: 1.5rem 1rem .5rem; }
.sw-banner__text { color: var(--sd-ink-muted); font-family: var(--sd-font-display); font-style: italic; font-size: 1rem; }

/* =========================================================================
   VARIANTE 2 — malerisch/erzählerisch: Schild-/Parchment-Optik statt
   Karten-Ästhetik. Rein CSS (kein Foto-Hintergrund vorhanden).
   ========================================================================= */
.sw-v2 .sw-hero--v2 { max-width: 52rem; padding: 1.75rem 1rem 1.25rem; }
.sw-hero__sign {
  display: inline-block;
  background: linear-gradient(160deg, #e9d9b6, #d3bd8d);
  border: 1px solid #6b4a24;
  border-radius: 10px;
  padding: 1.1rem 1.6rem;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.6);
}
.sw-hero__sign .sw-hero__title {
  font-family: var(--sd-font-display);
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  color: #2b1a0f;
  text-shadow: none;
  margin: 0 0 .25em;
}
.sw-hero__sign .sw-hero__subtitle {
  font-family: var(--sd-font-body);
  text-transform: none;
  letter-spacing: 0;
  color: #4a3218;
  font-size: .95rem;
  margin: 0;
}
.sw-hero__note {
  margin: 1rem 0 0;
  color: var(--sd-ink-muted);
  font-family: var(--sd-font-display);
  font-style: italic;
  font-size: .95rem;
}

.sw-grid--v2 .sw-card > a {
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border-color: color-mix(in srgb, var(--sd-gold) 35%, transparent);
}
.sw-grid--v2 .sw-card__chip {
  position: absolute;
  inset: auto .5rem .5rem .5rem;
  padding: .4rem .5rem;
  background: rgba(8,6,5,.92);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 8px;
  color: var(--sd-ink);
  font-size: .74rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .sw-grid--v2 .sw-card__chip { transition: opacity .15s ease; }
}
.sw-grid--v2 .sw-card > a:hover .sw-card__chip,
.sw-grid--v2 .sw-card > a:focus-visible .sw-card__chip {
  opacity: 1;
  visibility: visible;
}
.sw-grid--v2 .sw-card__caption {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .9rem .95rem;
  text-align: center;
}
.sw-grid--v2 .sw-card__tag { font-style: italic; }

.sw-banner--v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.75rem 1rem .5rem;
}
.sw-banner__sign {
  background: linear-gradient(160deg, #e9d9b6, #d3bd8d);
  border: 1px solid #6b4a24;
  border-radius: 8px;
  padding: .8rem 1.1rem;
  color: #2b1a0f;
  font-family: var(--sd-font-display);
  font-size: .84rem;
  line-height: 1.35;
  max-width: 16rem;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.55);
}
.sw-banner--v2 .sw-banner__text {
  color: var(--sd-ink-muted);
  font-size: .95rem;
  flex: 1 1 14rem;
}

/* =========================================================================
   VARIANTE 3 — "Portalhalle": atmosphärischer Raum mit unterschiedlich
   großen Portalen statt gleichförmiger Spielkarten (Rohfassung,
   06.09.2026, nach freigegebenem Konzeptbild
   spielen-welten-konzept-portalhalle.jpg). Ersetzt NICHT V1/V2 — die
   bleiben unverändert über ?v=1 / ?v=2 als Rückfallebene erreichbar —
   ist aber ab jetzt die Standard-Ansicht ohne Parameter. Bild-Assets:
   dieselben Portrait-Motive wie in V1, hier als Portalmotive eingesetzt
   (keine neuen Bilder erzeugt). Raumatmosphäre rein per CSS (Gradients),
   kein neues Hintergrundbild. Walhalla/ARK ist HaJos aktuell wichtigste
   Welt und bekommt deshalb bewusst das größte, deutlich dominantere
   Portal in einer eigenen Reihe; die übrigen fünf sind bewusst
   unterschiedlich hoch versetzt ("gestaffelt"), damit keine
   Bibliotheks-/Shop-Optik aus gleichförmigen Kacheln entsteht.
   ========================================================================= */
.sw-v3 .sw-hero--v3 { max-width: 46rem; padding: 1.75rem 1rem 1.25rem; }

.sw-hall {
  position: relative;
  max-width: var(--sd-max);
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
  background:
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--w-walhalla) 16%, transparent), transparent 55%),
    radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--sd-gold) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--sd-bg-elevated), var(--sd-bg));
  border-radius: var(--sd-radius);
}

.sw-portals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}
.sw-portal--featured { grid-column: 1 / -1; }

.sw-portal > a { display: block; text-decoration: none; color: inherit; }
.sw-portal > a:focus-visible {
  outline: 3px solid var(--sd-focus);
  outline-offset: 3px;
  border-radius: var(--sd-radius);
}

.sw-portal__frame {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
  border-radius: 50% 50% 12px 12px / 22% 22% 8px 8px;
  border: 2px solid color-mix(in srgb, var(--sw-accent, var(--sd-gold)) 55%, transparent);
  box-shadow:
    0 14px 32px -16px rgba(0,0,0,.7),
    0 0 24px -10px color-mix(in srgb, var(--sw-accent, var(--sd-gold)) 45%, transparent);
}
.sw-portal--featured .sw-portal__frame { border-width: 3px; }
.sw-portal__img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transform: scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  .sw-portal__img { transition: transform .4s ease; }
}
.sw-portal > a:hover .sw-portal__img,
.sw-portal > a:focus-visible .sw-portal__img {
  transform: scale(1.06);
}

.sw-portal__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.8rem .8rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(8,6,5,.92));
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-align: center;
  /* Fix 06.09.2026: .sw-portal__frame setzt line-height:0 (entfernt die
     Inline-Bild-Lücke unter <img>) – das vererbt sich sonst auf den
     Label-Text und lässt mehrzeilige Tags (z.B. "Weltraum-Simulation")
     übereinander statt untereinander rendern. Hier für den Text-Bereich
     wieder auf einen normalen Zeilenabstand zurückgesetzt. */
  line-height: 1.3;
}
.sw-portal__title {
  font-family: var(--sd-font-display);
  color: var(--sd-gold-bright);
  font-size: 1rem;
  line-height: 1.2;
}
.sw-portal__tag { color: var(--sd-ink-muted); font-size: .78rem; }
.sw-portal--featured .sw-portal__title { font-size: 1.4rem; }
.sw-portal--featured .sw-portal__tag { font-size: .92rem; }
.sw-portal--featured .sw-portal__label { padding: 3rem 1rem 1.2rem; }

.sw-portal[data-game="walhalla"]   { --sw-accent: var(--w-walhalla); }
.sw-portal[data-game="guildwars2"] { --sw-accent: #c15ad9; }
.sw-portal[data-game="elite"]      { --sw-accent: #4a7fd1; }
.sw-portal[data-game="eso"]        { --sw-accent: #4fae6a; }
.sw-portal[data-game="diablo4"]    { --sw-accent: #c2453f; }
.sw-portal[data-game="diablo2"]    { --sw-accent: #d97a3d; }

@media (min-width: 900px) {
  .sw-portals { grid-template-columns: repeat(5, 1fr); gap: 2rem 1.25rem; }
  .sw-portal--featured { max-width: 32rem; margin: 0 auto 1rem; }
  /* Bewusste Höhenstaffelung der fünf kleineren Portale, damit keine
     gleichförmige Kachelreihe entsteht (siehe Auftrag: "kontrollierte
     Asymmetrie ausdrücklich erwünscht"). */
  .sw-portal:nth-of-type(2) { margin-top: 0; }
  .sw-portal:nth-of-type(3) { margin-top: 2.2rem; }
  .sw-portal:nth-of-type(4) { margin-top: .6rem; }
  .sw-portal:nth-of-type(5) { margin-top: 2.6rem; }
  .sw-portal:nth-of-type(6) { margin-top: 1rem; }
}

.sw-scene { max-width: var(--sd-max); margin: 0 auto; padding: 0 1rem 2rem; }
.sw-scene__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* siehe .sw-info-grid weiter oben: WordPress fügt zwischen
   Shortcode-Nachbarelementen leere <br>/<p></p>-Artefakte ein. */
.sw-scene__grid > br,
.sw-scene__grid > p:empty { display: none; }
.sw-scene__quote {
  display: block;
  margin: 0;
  padding: 1.15rem 1.2rem;
  text-align: center;
  color: var(--sd-ink-muted);
  font-family: var(--sd-font-display);
  font-style: italic;
}
/* Feinschliff 06.09.2026: wpautop fügt bei einigen Portalen zusätzliche
   <br>-Artefakte direkt in Frame/Label ein (Ursache siehe PHP-Kommentar
   in spielen-welten-v3.php); vorsorglich zusätzlich per CSS entschärft,
   falls Inhalte redaktionell künftig doch wieder mehrzeilig gepflegt
   werden. */
.sw-portal__frame > br,
.sw-portal__label > br { display: none; }
@media (min-width: 700px) {
  .sw-scene__grid { grid-template-columns: 1fr 1fr 1fr; align-items: center; }
  .sw-scene__grid .sw-info-box:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .sw-scene__grid .sw-info-box:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .sw-scene__grid .sw-scene__quote { grid-column: 2; grid-row: 1; }
}


/* =========================================================================
   VARIANTE 4 — "Weltenraum": EIN zusammenhängender Raum statt einzelner
   Portal-Karten (Rohfassung 06.09.2026, nach Rückmeldung zu V3 — siehe
   Statusdokumentation: V3 wirkte trotz Portalform im Kern noch wie ein
   Kartenraster/Auswahlmenü). Walhalla groß links, die übrigen fünf Welten
   als unterschiedlich große "Durchgänge" in einer Mosaik-Anordnung, eine
   dekorative Tisch-Zeile und ein Platzhalter für eine rechte Raumfigur.
   Unterer Bereich (Charaktere/Zitat/Welten) im selben durchgehenden
   Hintergrund statt in separaten Webboxen. Ersetzt NICHT V1/V2/V3 — die
   bleiben unverändert über ?v=1 / ?v=2 / ?v=3 als Rückfallebene
   erreichbar, ist aber ab jetzt die Standard-Ansicht ohne Parameter.
   Eigener Klassen-Namensraum "rw-*" (Raumwelt), komplett getrennt von
   den sw-card-/sw-portal-Klassen der älteren Varianten, damit nichts an
   V1/V2/V3 durch diese Änderungen beeinflusst wird.
   ========================================================================= */
.rw-room {
  position: relative;
  max-width: var(--sd-max);
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
  border-radius: var(--sd-radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 8% 12%, color-mix(in srgb, var(--w-walhalla) 20%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 42% at 94% 68%, color-mix(in srgb, var(--sd-gold) 16%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 45% at 50% 102%, color-mix(in srgb, #6b4a24 20%, transparent), transparent 65%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--sd-bg-elevated), var(--sd-bg) 55%, #0c0805 100%);
  box-shadow: inset 0 0 90px 20px rgba(0,0,0,.55);
}

.rw-intro { position: relative; z-index: 1; text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.rw-intro__eyebrow { color: var(--w-spielen); letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .4em; }
.rw-intro__title { font-family: var(--sd-font-display); font-size: clamp(2rem, 5vw, 2.9rem); color: var(--sd-gold-bright); margin: 0 0 .3em; }
.rw-intro__subtitle { color: var(--sd-ink-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; margin: 0; }

.rw-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-bottom: 2rem;
}
.rw-portal[data-slot="walhalla"],
.rw-table,
.rw-figure { grid-column: 1 / -1; }
/* wpautop fügt zwischen den Top-Level-Kindern von .rw-stage/.rw-lower
   einzelne <br>-Artefakte ein (siehe V3-Lessons-Learned); als eigene
   Grid-Items würden sie unbeabsichtigt zusätzliche Zeilen erzeugen. */
.rw-stage > br,
.rw-lower > br { display: none; }

.rw-portal { display: block; text-decoration: none; color: inherit; }
.rw-portal:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 3px; border-radius: 14px; }

.rw-frame {
  position: relative;
  display: block;
  height: 100%;
  min-height: 150px;
  overflow: hidden;
  line-height: 0;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--rw-accent, var(--sd-gold)) 55%, transparent),
    inset 0 0 30px 8px rgba(0,0,0,.55),
    0 0 16px -4px color-mix(in srgb, var(--rw-accent, var(--sd-gold)) 50%, transparent);
}
.rw-portal[data-slot="walhalla"] .rw-frame { min-height: 260px; }
.rw-portal[data-slot="gw2"] .rw-frame { transform: rotate(-1.1deg); }
.rw-portal[data-slot="diablo2"] .rw-frame { transform: rotate(1deg); }

.rw-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  .rw-img { transition: transform .4s ease; }
}
.rw-portal:hover .rw-img,
.rw-portal:focus-visible .rw-img { transform: scale(1.05); }

.rw-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem .7rem .6rem;
  background: linear-gradient(180deg, transparent, rgba(8,6,5,.92));
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: center;
  /* siehe V3-Lessons-Learned: line-height des Frames (0) nicht auf den
     Label-Text vererben lassen, sonst überlappen mehrzeilige Tags. */
  line-height: 1.25;
}
.rw-title { font-family: var(--sd-font-display); color: var(--sd-gold-bright); font-size: .95rem; }
.rw-tag { color: var(--sd-ink-muted); font-size: .74rem; }
.rw-portal[data-slot="walhalla"] .rw-title { font-size: 1.3rem; }
.rw-portal[data-slot="walhalla"] .rw-tag { font-size: .88rem; }
.rw-portal[data-slot="walhalla"] .rw-label { padding-top: 2.3rem; }

.rw-portal[data-game="walhalla"]   { --rw-accent: var(--w-walhalla); }
.rw-portal[data-game="guildwars2"] { --rw-accent: #c15ad9; }
.rw-portal[data-game="elite"]      { --rw-accent: #4a7fd1; }
.rw-portal[data-game="eso"]        { --rw-accent: #4fae6a; }
.rw-portal[data-game="diablo4"]    { --rw-accent: #c2453f; }
.rw-portal[data-game="diablo2"]    { --rw-accent: #d97a3d; }

.rw-table {
  border-radius: 12px;
  min-height: 90px;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #2c1c10, #1a1108);
  box-shadow: inset 0 0 0 1px rgba(184,138,74,.25), inset 0 10px 24px rgba(0,0,0,.5);
}
.rw-table__icon { width: 1.6rem; height: 1.6rem; color: var(--sd-gold); opacity: .85; flex: none; }
.rw-table__icon--candle { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sd-gold) 70%, transparent)); }

.rw-figure {
  position: relative;
  border-radius: 14px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  padding: 1rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--sd-gold) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #241a12, #140d08);
  box-shadow: inset 0 0 0 1px rgba(184,138,74,.2), inset 0 0 30px 8px rgba(0,0,0,.5);
  overflow: hidden;
}
.rw-figure__silhouette { width: 5.5rem; height: 9rem; position: relative; display: block; }
.rw-figure__silhouette::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2a1e, #17110b 75%);
}
.rw-figure__silhouette::after {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.4rem;
  height: 7rem;
  border-radius: 50% 50% 20% 20% / 60% 60% 15% 15%;
  background: radial-gradient(ellipse at 35% 20%, #3a2a1e, #17110b 75%);
}
.rw-figure__note { color: var(--sd-ink-muted); font-size: .74rem; font-style: italic; text-align: center; margin: 0; }

.rw-lower {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.rw-room .sw-info-box {
  background: rgba(0,0,0,.34);
  border-color: transparent;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.55), inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}
.rw-quote {
  display: block;
  margin: 0;
  padding: .6rem 1rem;
  text-align: center;
  color: var(--sd-ink-muted);
  font-family: var(--sd-font-display);
  font-style: italic;
}

@media (min-width: 900px) {
  .rw-stage {
    grid-template-columns: 1.3fr .85fr .85fr .85fr 1.1fr;
    grid-template-rows: 190px 190px auto;
  }
  /* Explizite Linien-Platzierung statt grid-template-areas: in Tests
     lieferte die Namens-Auflösung für mehrspaltige Bereiche (Diablo IV
     über zwei Spalten) falsche Positionen; nummerische Linien sind
     hier zuverlässiger. Spalten 1–6, Zeilen 1–4 (3 Zeilen-Tracks). */
  .rw-portal[data-slot="walhalla"] { grid-column: 1 / 2; grid-row: 1 / 3; }
  .rw-portal[data-slot="gw2"]      { grid-column: 2 / 3; grid-row: 1 / 2; }
  .rw-portal[data-slot="elite"]    { grid-column: 3 / 4; grid-row: 1 / 2; }
  .rw-portal[data-slot="eso"]      { grid-column: 4 / 5; grid-row: 1 / 2; }
  .rw-portal[data-slot="diablo4"]  { grid-column: 2 / 4; grid-row: 2 / 3; }
  .rw-portal[data-slot="diablo2"]  { grid-column: 4 / 5; grid-row: 2 / 3; }
  .rw-table  { grid-column: 1 / 6; grid-row: 3 / 4; }
  .rw-figure { grid-column: 5 / 6; grid-row: 1 / 3; }

  .rw-lower { grid-template-columns: 1fr 1fr 1fr; align-items: center; }
  .rw-lower .sw-info-box:nth-of-type(1) { grid-column: 1; }
  .rw-lower .rw-quote { grid-column: 2; }
  .rw-lower .sw-info-box:nth-of-type(2) { grid-column: 3; }
}

/* =========================================================================
   SPIELEN & WELTEN — Version 5 „Portalhalle als Bildszene" (06.09.2026)
   Zweite Rückmeldung zu V4: das Konzeptbild wird direkt als Grundszene
   verwendet (kein neu interpretiertes HTML/CSS-Grid mehr). Technik 1:1 vom
   bereits funktionierenden Prinzip der Startseite übernommen (siehe
   .hero__stage / .portal-card weiter oben in dieser Datei) – Klassen hier
   bewusst im eigenen Namensraum "rk-" gehalten, um V1–V4 nicht zu berühren.
   Nur über ?v=5 erreichbar (Test-/Vorschau-Variante, siehe functions.php).
   ========================================================================= */
.rk-page { max-width: none; margin: 0; padding: 0; }
.rk-room { position: relative; }

/* Für Screenreader: echte Überschrift + Szenenbeschreibung, visuell
   verborgen, weil Titel/Untertitel bereits Teil des gemalten Bildes sind
   (dasselbe Verstecken-Muster wie .hero__scene-caption der Startseite). */
.rk-sr-title,
.rk-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rk-stage { position: relative; }
.rk-image-wrap { line-height: 0; }
.rk-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 480; /* mobil: gekürzter Bildstreifen, siehe unten */
  object-fit: cover;
  object-position: 50% 18%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Kartenliste ---------- */
.rk-portal-nav { display: block; }
.rk-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .rk-portal-grid { grid-template-columns: 1fr 1fr; }
}

.rk-portal {
  --rk-accent: var(--sd-gold);
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--rk-accent) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.rk-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
  margin-bottom: .3em;
}
.rk-portal__tag {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rk-accent);
}
/* Bildausschnitt + Hover-Chip existieren nur in der Desktop-Rauminszenierung */
.rk-portal__frame { display: none; }
.rk-portal__chip { display: none; }

.rk-portal[data-game="walhalla"]   { --rk-accent: var(--w-walhalla); }
.rk-portal[data-game="guildwars2"] { --rk-accent: #c15ad9; }
.rk-portal[data-game="elite"]      { --rk-accent: #4a7fd1; }
.rk-portal[data-game="eso"]        { --rk-accent: #4fae6a; }
.rk-portal[data-game="diablo4"]    { --rk-accent: #c2453f; }
.rk-portal[data-game="diablo2"]    { --rk-accent: #d97a3d; }

@media (prefers-reduced-motion: no-preference) {
  .js-motion .rk-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .rk-portal:hover,
  .js-motion .rk-portal:focus-visible {
    border-color: var(--rk-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk-accent) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--rk-accent) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die sechs Portale
   werden zu unsichtbaren Klickflächen darüber (identisch zum Prinzip der
   Startseite: .hero__stage > picture / > .portal-nav, hier .rk-stage >
   .rk-image-wrap / > .rk-portal-nav).
   ========================================================================= */
@media (min-width: 900px) {
  .rk-image { aspect-ratio: 1536 / 1024; object-position: center; }

  .rk-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .rk-stage > .rk-image-wrap,
  .rk-stage > .rk-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .rk-stage > .rk-image-wrap { z-index: 0; }
  .rk-stage > .rk-portal-nav { z-index: 1; }

  .rk-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .rk-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Fensterfläche im Bild IST die Karte. Im
     Ruhezustand bleibt die Klickfläche vollständig unsichtbar. */
  .rk-portal {
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    overflow: visible; /* Chip darf über die schmale Fensterfläche hinausragen */
  }
  .rk-portal__frame {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 10px;
    pointer-events: none;
  }
  /* Zeigt exakt den zum Portal gehörenden Bildausschnitt noch einmal
     einzeln, deckungsgleich mit der Grundszene (--xn/--yn/--wn/--hn sind
     die unitless Zahlen zu --x/--y/--w/--h, s. Markup – nötig, weil CSS
     zwei Prozentwerte nicht direkt dividieren kann). */
  .rk-portal__img {
    position: absolute;
    top: calc(-100% * var(--yn) / var(--hn));
    left: calc(-100% * var(--xn) / var(--wn));
    width: calc(100% * 100 / var(--wn));
    height: calc(100% * 100 / var(--hn));
    max-width: none;
    transform: scale(1);
    transition: transform .35s ease;
  }

  .rk-portal__title,
  .rk-portal__tag {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Kleine Wächter-Markierung pro Fenster (unten mittig), nur bei Hover/
     Fokus sichtbar – kein permanenter Glow über dem gemalten Portal. */
  .rk-portal::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rk-accent);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--rk-accent) 70%, transparent);
    opacity: 0;
    pointer-events: none;
  }

  .rk-portal__chip {
    display: inline-flex;
    position: absolute;
    left: 50%;
    bottom: -.6rem;
    transform: translate(-50%, 100%);
    align-items: center;
    justify-content: center;
    padding: .35rem .75rem;
    border-radius: 10px;
    background: rgba(8,6,5,.94);
    border: 1px solid color-mix(in srgb, var(--rk-accent) 60%, transparent);
    color: var(--sd-ink);
    font-size: .78rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 11rem;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
  }

  @media (prefers-reduced-motion: no-preference) {
    .rk-portal::after { transition: opacity .18s ease; }
    .js-motion .rk-portal__chip { transition: opacity .15s ease; }
  }

  .rk-portal:hover .rk-portal__img,
  .rk-portal:focus-visible .rk-portal__img { transform: scale(1.045); }
  .rk-portal:hover::after,
  .rk-portal:focus-visible::after { opacity: 1; }
  .rk-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }
  .rk-portal:hover .rk-portal__chip,
  .rk-portal:focus-visible .rk-portal__chip,
  li:has(.rk-portal:hover) .rk-portal__chip,
  li:has(.rk-portal:focus-visible) .rk-portal__chip {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================================
   BILDER & CHARAKTERE — "Die Kammer der Bilder und Charaktere" (10.09.2026)
   Einstiegsseite, URL /bilder-charaktere/. Selbes Prinzip wie "Spielen &
   Welten" V5 (siehe .rk-* oben): das freigegebene Konzeptbild ist die
   Grundszene, HTML/CSS liegen nur für die zwei unsichtbaren Klickflächen
   "Charaktere" und "KI-Bilder" darüber. Eigener Namensraum "bc-", um
   bestehende Bereiche nicht zu berühren.
   ========================================================================= */
.bc-page { max-width: none; margin: 0; padding: 0; }
.bc-room { position: relative; }

.bc-sr-title,
.bc-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bc-stage { position: relative; }
.bc-image-wrap { line-height: 0; }
.bc-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 480; /* mobil: gekürzter Bildstreifen, siehe unten */
  object-fit: cover;
  object-position: 50% 22%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Zwei-Karten-Liste ---------- */
.bc-portal-nav { display: block; }
.bc-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .bc-portal-grid { grid-template-columns: 1fr 1fr; }
}

.bc-portal {
  --bc-accent: var(--sd-gold);
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--bc-accent) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.bc-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
  margin-bottom: .3em;
}
.bc-portal__tag {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bc-accent);
}
/* Bildausschnitt + Hover-Chip existieren nur in der Desktop-Rauminszenierung */
.bc-portal__frame { display: none; }
.bc-portal__chip { display: none; }

.bc-portal[data-path="charaktere"] { --bc-accent: var(--sd-gold); }
.bc-portal[data-path="ki-bilder"]  { --bc-accent: #5a91e0; }

@media (prefers-reduced-motion: no-preference) {
  .js-motion .bc-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .bc-portal:hover,
  .js-motion .bc-portal:focus-visible {
    border-color: var(--bc-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bc-accent) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--bc-accent) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die zwei Wege
   werden zu unsichtbaren Klickflächen darüber (identisch zum Prinzip von
   "Spielen & Welten" V5 bzw. der Startseite: .bc-stage > .bc-image-wrap /
   .bc-portal-nav übereinandergelegt per CSS-Grid).
   ========================================================================= */
@media (min-width: 900px) {
  .bc-image { aspect-ratio: 1536 / 1024; object-position: center; }

  .bc-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .bc-stage > .bc-image-wrap,
  .bc-stage > .bc-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .bc-stage > .bc-image-wrap { z-index: 0; }
  .bc-stage > .bc-portal-nav { z-index: 1; }

  .bc-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .bc-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Archivfläche im Bild IST die Karte. Im
     Ruhezustand bleibt die Klickfläche vollständig unsichtbar. */
  .bc-portal {
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    overflow: visible; /* Chip darf über die schmale Fläche hinausragen */
  }
  .bc-portal__frame {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 10px;
    pointer-events: none;
  }
  /* Zeigt exakt den zum Weg gehörenden Bildausschnitt noch einmal einzeln,
     deckungsgleich mit der Grundszene (--xn/--yn/--wn/--hn sind die
     unitless Zahlen zu --x/--y/--w/--h, s. Markup). */
  .bc-portal__img {
    position: absolute;
    top: calc(-100% * var(--yn) / var(--hn));
    left: calc(-100% * var(--xn) / var(--wn));
    width: calc(100% * 100 / var(--wn));
    height: calc(100% * 100 / var(--hn));
    max-width: none;
    transform: scale(1);
    transition: transform .35s ease;
  }

  .bc-portal__title,
  .bc-portal__tag {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Kleine Wächter-Markierung pro Fläche (unten mittig), nur bei Hover/
     Fokus sichtbar – kein permanenter Glow über der gemalten Szene. */
  .bc-portal::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bc-accent);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--bc-accent) 70%, transparent);
    opacity: 0;
    pointer-events: none;
  }

  .bc-portal__chip {
    display: inline-flex;
    position: absolute;
    left: 50%;
    bottom: -.6rem;
    transform: translate(-50%, 100%);
    align-items: center;
    justify-content: center;
    padding: .35rem .75rem;
    border-radius: 10px;
    background: rgba(8,6,5,.94);
    border: 1px solid color-mix(in srgb, var(--bc-accent) 60%, transparent);
    color: var(--sd-ink);
    font-size: .78rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 11rem;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
  }

  @media (prefers-reduced-motion: no-preference) {
    .bc-portal::after { transition: opacity .18s ease; }
    .js-motion .bc-portal__chip { transition: opacity .15s ease; }
  }

  .bc-portal:hover .bc-portal__img,
  .bc-portal:focus-visible .bc-portal__img { transform: scale(1.045); }
  .bc-portal:hover::after,
  .bc-portal:focus-visible::after { opacity: 1; }
  .bc-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }
  .bc-portal:hover .bc-portal__chip,
  .bc-portal:focus-visible .bc-portal__chip,
  li:has(.bc-portal:hover) .bc-portal__chip,
  li:has(.bc-portal:focus-visible) .bc-portal__chip {
    opacity: 1;
    visibility: visible;
  }
}

/* ---- Erweiterung 10.09.2026: einzelner Ratten-Hotspot (Easter Egg) ----
   Zusätzlicher, eigenständiger unsichtbarer Klickbereich für die im
   Konzeptbild bereits vorhandene kleine Ratte (unterer Bereich, separat von
   den beiden Haupt-Hotspots). Bewusst NICHT Teil von .bc-portal-grid, damit
   er auf Mobil nicht als dritte Karte erscheint – dort bleibt er per
   display:none vollständig inaktiv/unsichtbar (Auftrag: "Mobile-Darstellung
   nicht verändern, dort vorerst kein Ratten-Link"). Ab 900px wird er wie die
   Haupt-Hotspots per --x/--y/--w/--h gegen die Bildfläche von .bc-stage
   positioniert (Formel/Bezug identisch, da .bc-stage bereits position:
   relative ist und exakt die Bildmaße hat). Kein sichtbarer Text/Label –
   nur ein aria-label für Screenreader/Tastaturbedienung sowie ein Fokusring
   bei :focus-visible, kein dauerhafter visueller Marker. */
.bc-easter-egg { display: none; }

@media (min-width: 900px) {
  .bc-easter-egg {
    display: block;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    z-index: 2;
    border-radius: 8px;
  }
  .bc-easter-egg:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }
}


/* =========================================================================
   KÜCHE & GENUSS — Einstiegsseite (10.09.2026). Gleiches Prinzip wie
   "Spielen & Welten" V5 und "Bilder & Charaktere": das freigegebene
   Konzeptbild ist die Grundszene, HTML/CSS legen nur die drei unsichtbaren
   Klickflächen ("Rezepte", "Küchenexperimente", "Genuss & Entdeckungen")
   darüber, die exakt auf den drei im Bild bereits sichtbaren Karten rechts
   liegen. Eigener Namensraum "kg-", um bestehende Bereiche nicht zu
   berühren.
   ========================================================================= */
.kg-page { max-width: none; margin: 0; padding: 0; }
.kg-room { position: relative; }

.kg-sr-title,
.kg-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kg-stage { position: relative; }
.kg-image-wrap { line-height: 0; }
.kg-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1535 / 380; /* mobil: gekürzter, rein dekorativer Bildstreifen (zeigt Eir, keine der drei Klickkarten erneut) */
  object-fit: cover;
  object-position: 50% 21%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Drei-Karten-Liste ---------- */
.kg-portal-nav { display: block; }
.kg-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}

.kg-portal {
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.kg-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
  margin-bottom: .3em;
}
.kg-portal__tag {
  display: block;
  font-size: .8rem;
  color: var(--sd-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .kg-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .kg-portal:hover,
  .js-motion .kg-portal:focus-visible {
    border-color: var(--sd-gold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-gold) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--sd-gold) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die drei Wege
   werden zu unsichtbaren Klickflächen darüber (identisches Prinzip wie bei
   "Bilder & Charaktere": .kg-stage > .kg-image-wrap / .kg-portal-nav
   übereinandergelegt per CSS-Grid).
   ========================================================================= */
@media (min-width: 900px) {
  .kg-image { aspect-ratio: 1535 / 1024; object-position: center; }

  /* Korrektur 10.09.2026: Konzeptbild lief zuvor über die volle
     Containerbreite und war dadurch auf normalen Desktop-Bildschirmen zu
     hoch, sodass nur die obere Bildhälfte ohne Scrollen sichtbar war.
     .kg-stage bekommt deshalb eine feste Maximalbreite und wird zentriert –
     Seitenverhältnis (1535/1024) und Bild bleiben unverändert, es wird
     lediglich insgesamt kleiner dargestellt. Die drei Hotspots sind über
     --x/--y/--w/--h weiterhin relativ zu .kg-stage positioniert und bleiben
     dadurch automatisch exakt auf den drei Karten.

     Feinjustierung 10.09.2026 (zweite Runde): 72vw wirkte im Vergleich zu
     den anderen immersiven Bereichsseiten ("Spielen & Welten"/.rk-stage,
     "Bilder & Charaktere"/.bc-stage – beide ohne max-width, füllen die
     volle Containerbreite) immer noch spürbar schmaler, mit zu viel
     dunklem Rand links/rechts. Die Bühne nutzt jetzt ~88vw (statt 72vw),
     damit die Szene wieder wie Teil der Website wirkt statt wie ein
     zentriertes Bild auf schwarzem Hintergrund – bleibt aber weiterhin bei
     1000px nach unten und neu bei 1800px nach oben gedeckelt, damit sie
     auf sehr breiten Displays nicht doch wieder randlos/bildschirmfüllend
     wird. Bild, Seitenverhältnis und Hotspot-Prozentwerte unverändert;
     vertikales Scrollen ist bei dieser größeren Breite ausdrücklich in
     Ordnung. */
  .kg-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    max-width: clamp(1000px, 88vw, 1800px);
    margin: 0 auto;
  }
  .kg-stage > .kg-image-wrap,
  .kg-stage > .kg-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .kg-stage > .kg-image-wrap { z-index: 0; }
  .kg-stage > .kg-portal-nav { z-index: 1; }

  .kg-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .kg-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die bereits im Bild gestaltete Karte IST die
     Karte. Im Ruhezustand bleibt die Klickfläche vollständig unsichtbar. */
  .kg-portal {
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    overflow: visible;
  }
  .kg-portal__title,
  .kg-portal__tag {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Dezente Hervorhebung der jeweiligen Karte bei Hover/Fokus – kein
     dauerhafter Glow über der gemalten Szene. */
  .kg-portal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: 0 0 0 0 transparent;
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .kg-portal::after { transition: opacity .18s ease; }
  }

  .kg-portal:hover::after,
  .kg-portal:focus-visible::after {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--sd-gold), 0 0 22px 2px color-mix(in srgb, var(--sd-gold) 55%, transparent);
  }
  .kg-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }
}


/* =========================================================================
   WELT: WALHALLA — Unterseite von "Spielen & Welten" (Rohfassung, 05.09.2026)
   URL: /spielen-welten/walhalla/ (Elternseite Spielen & Welten, Template
   nach Slug: templates/page-walhalla.html). Zwei Varianten wie bei
   Spielen & Welten selbst, per Shortcode [walhalla_variant] ausgewählt
   (?v=1 Default / ?v=2), noch KEIN Zufalls-Umschalten (spätere Aufgabe).
   Laut Konzeptvorgabe teilen sich V1/V2 dieselbe Struktur und dieselben
   Cluster-Daten – nur Hero-Bild (walhalla-hero-v1/v2.jpg) und
   Schlusszitat unterscheiden sich je Variante, siehe inc/walhalla-v1.php
   und inc/walhalla-v2.php. Cluster-Zahlen unten sind exakt die aus dem
   Projekt bekannten Werte – keine erfundenen Daten, kein Live-Status.
   ========================================================================= */
.world-walhalla {
  --accent: var(--w-walhalla);
  background:
    radial-gradient(1100px 520px at 15% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--sd-gold) 10%, transparent), transparent 60%),
    var(--sd-bg);
  min-height: 100%;
}
.wh-page { max-width: var(--sd-max); margin: 0 auto; padding: 0 0 1rem; }

/* ---------- Hero ---------- */
.wh-hero {
  position: relative;
  margin: 1.25rem 1.25rem 0;
  border-radius: var(--sd-radius);
  overflow: hidden;
}
.wh-hero__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5; /* mobil: hochformatiger Ausschnitt der breiten Szene */
  object-fit: cover;
  /* Feinschliff 05.09.2026: Beide Hero-Bilder zeigen ihre Survivor-Figur
     nahe am linken Bildrand. Bei "center" schneidet der sehr schmale
     Mobil-Ausschnitt (4/5) aus dem breiten Quellbild (v2: ~2.73/1) die
     Figur komplett weg. Horizontal nach links verschoben, damit sie auf
     beiden Varianten im Bild bleibt. */
  object-position: 18% 30%;
}
.wh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6,4,3,.9) 0%, rgba(6,4,3,.6) 36%, rgba(6,4,3,.18) 64%, transparent 85%);
}
.wh-hero__content {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}
.wh-hero__eyebrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6em;
}
.wh-hero__title {
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  letter-spacing: .03em;
  color: var(--sd-gold-bright);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent);
  margin: 0 0 .15em;
}
.wh-hero__subtitle {
  font-family: var(--sd-font-display);
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  color: var(--sd-ink);
  margin: 0 0 .6em;
}
.wh-hero__intro {
  color: var(--sd-ink-muted);
  font-size: .96rem;
  max-width: 34rem;
  margin: 0 auto 1.3em;
}
.wh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}
.wh-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--sd-gold-bright), var(--sd-gold));
  color: #1a1210;
  font-weight: 700;
  text-decoration: none;
  font-size: .92rem;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}
.wh-btn--ghost {
  background: rgba(0,0,0,.32);
  color: var(--sd-gold-bright);
  border: 1px solid color-mix(in srgb, var(--sd-gold) 55%, transparent);
  box-shadow: none;
}
.wh-btn:hover, .wh-btn:focus-visible { filter: brightness(1.08); }
.wh-btn:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }

@media (min-width: 900px) {
  .wh-hero__image { aspect-ratio: 16 / 7; object-position: center 38%; }
  .wh-hero__content { padding: 3rem 3rem 3.5rem; max-width: 46rem; margin: 0 auto; }
}

/* ---------- Acht Welten: eine zusammenhängende Bildtafel (4×2),
   NICHT in Einzelbilder zerlegt. Die acht Namen sind echtes HTML.
   Mobil: einfache, gut lesbare 2-spaltige Link-Liste unter dem
   unzerschnittenen Bild. Ab 900px: dieselbe Liste wird zum
   Overlay-Raster direkt auf der Bildtafel (analog zur Portal-Technik
   der Startseite), weil dort genug Platz pro Zelle vorhanden ist. */
.wh-welten { padding: 2.5rem 1.25rem 0; }
.wh-welten__head { max-width: 40rem; margin: 0 auto 1.25rem; text-align: center; }
.wh-welten__head h2 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--sd-gold-bright); margin: 0 0 .3em; }
.wh-welten__head p { color: var(--sd-ink-muted); margin: 0; }
.wh-welten__tafel {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  border-radius: var(--sd-radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 30%, transparent);
}
.wh-welten__img { width: 100%; height: auto; display: block; aspect-ratio: 1672 / 941; object-fit: cover; }
.wh-welten__grid {
  list-style: none;
  margin: 1rem auto 0;
  padding: 0 1.25rem;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.wh-welten__grid a {
  display: block;
  padding: .6rem .8rem;
  background: rgba(0,0,0,.26);
  border: 1px solid color-mix(in srgb, var(--sd-gold) 25%, transparent);
  border-radius: 8px;
  color: var(--sd-ink);
  text-decoration: none;
  font-family: var(--sd-font-display);
  font-size: .9rem;
  text-align: center;
}
.wh-welten__grid a:hover, .wh-welten__grid a:focus-visible { border-color: var(--accent); color: var(--sd-gold-bright); }
.wh-welten__grid a:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
.wh-welten__cell-media { display: none; }

@media (min-width: 900px) {
  .wh-welten__grid {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    max-width: none;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
  }
  .wh-welten__grid li { grid-column: calc(var(--gx) + 1); grid-row: calc(var(--gy) + 1); }
  /* Hover-Prinzip 05.09.2026, wie bei den Community-Kacheln: das Bild
     selbst reagiert (dezentes transform: scale), keine zusätzliche
     rechteckige Hover-Fläche mehr. Jede Kachel zeigt per absolut
     positioniertem, überskaliertem <img> exakt ihr Feld aus
     walhalla-welten.jpg (unverändert, eine Datei) – dieselbe
     Drittelungs-Technik wie bei den Community-Bildern, hier zweiachsig
     (4 Spalten × 2 Zeilen). Die vorhandenen, ins Bild gemalten
     gerundeten Ecken bleiben dadurch unangetastet erhalten. */
  .wh-welten__grid a {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 .5rem .8rem;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    font-size: clamp(.75rem, 1.1vw, .98rem);
  }
  .wh-welten__cell-media {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .wh-welten__cell-img {
    position: absolute;
    top: calc(var(--gy) * -100%);
    left: calc(var(--gx) * -100%);
    width: 400%;
    height: 200%;
    max-width: none;
    transform: scale(1);
    transition: transform .35s ease;
  }
  .wh-welten__grid a:hover .wh-welten__cell-img,
  .wh-welten__grid a:focus-visible .wh-welten__cell-img {
    transform: scale(1.06);
  }
  .wh-welten__cell-label {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 1.6rem .4rem .1rem;
    background: linear-gradient(0deg, rgba(6,4,3,.75) 0%, transparent 100%);
    color: var(--sd-ink);
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
  }
  .wh-welten__grid a:hover .wh-welten__cell-label,
  .wh-welten__grid a:focus-visible .wh-welten__cell-label {
    color: var(--sd-gold-bright);
  }
  .wh-welten__grid a:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: -3px; }
}

/* ---------- Cluster-Status: nur bestätigte Projektwerte, kein
   erfundener Live-/Online-Status. ---------- */
.wh-status { padding: 2.5rem 1.25rem 0; }
.wh-status__box {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.6rem;
  background: rgba(0,0,0,.28);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--sd-radius);
  text-align: center;
}
.wh-status__box h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); color: var(--sd-gold-bright); margin: 0 0 .9em; }
.wh-status__list { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: .55rem; text-align: left; }
.wh-status__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .94rem;
  color: var(--sd-ink-muted);
  border-bottom: 1px dashed color-mix(in srgb, var(--sd-gold) 18%, transparent);
  padding-bottom: .4em;
}
.wh-status__list li span { color: var(--sd-ink); font-weight: 600; }
.wh-status__quote { margin: 0; font-family: var(--sd-font-display); font-style: italic; color: var(--sd-gold); }
.wh-status__quote span { display: block; margin-top: .3em; font-size: .82rem; color: var(--sd-ink-muted); font-style: normal; }

/* ---------- Community: drei eigenständige Kacheln (05.09.2026, zweite
   Überarbeitung). walhalla-community.jpg bleibt EINE Datei, wird aber
   pro Kachel per object-position exakt gedrittelt (volle Bildhöhe,
   keine zusätzliche Beschneidung) – dadurch keine Textüberlagerung
   mehr auf den Motiven. Prinzip je Kachel: Bild (Klickfläche) →
   Überschrift → Beschreibung → ggf. Aktion, in normalem Lesefluss. ---------- */
.wh-community { padding: 2.5rem 1.25rem 0; }
.wh-community__grid {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
}
.wh-community__tile-img-link {
  display: block;
  border-radius: var(--sd-radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 25%, transparent);
}
.wh-community__tile-img-link:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
/* 06.09.2026: Aktuelles/Galerie/Mitmachen sind jetzt drei eigenständige
   Bilder (walhalla-aktuelles.jpg/-galerie.jpg/-mitmachen.jpg), keine
   Ausschnitte mehr aus einem gemeinsamen walhalla-community.jpg. Alle drei
   neuen Bilder liegen im selben Seitenverhältnis (3:2) vor, daher zeigt
   aspect-ratio hier – anders als zuvor – keinen Bildbereich abgeschnitten,
   sondern sorgt nur für gleich hohe Kacheln im Grid. */
.wh-community__tile-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .25s ease;
}
.wh-community__tile-img-link:hover .wh-community__tile-img,
.wh-community__tile-img-link:focus-visible .wh-community__tile-img {
  transform: scale(1.04);
}
/* WordPress (wpautop) fügt in den Shortcode-Output leere <p>/<br>
   ein (gleiches bekanntes Verhalten wie bei "Spielen & Welten") –
   die haben keinen Inhalt und werden nur ausgeblendet. */
.wh-community br,
.wh-community p:empty { display: none; }
.wh-community__tile-body { padding: .9rem .1rem 0; }
.wh-community__tile-body h3 { font-size: 1.05rem; color: var(--sd-gold-bright); margin: 0 0 .35em; }
.wh-community__tile-body p { color: var(--sd-ink-muted); font-size: .92rem; margin: 0; }

@media (min-width: 900px) {
  .wh-community__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Schlussbanner: variantenabhängiges Zitat aus dem
   jeweiligen Konzeptbild, siehe inc/walhalla-v1.php / v2.php. ---------- */
.wh-banner { text-align: center; padding: 2rem 1.25rem .5rem; }
.wh-banner p {
  color: var(--sd-ink-muted);
  font-family: var(--sd-font-display);
  font-style: italic;
  font-size: 1rem;
  margin: 0 auto;
  max-width: 34rem;
}

/* ---------- Walhalla – inhaltliche Ergänzung 05.09.2026:
   Svartalfheim-Hervorhebung, "Wo findet ihr uns?", Ein-Charakter-Regel,
   Discord-Platzhalter. Kein Redesign der freigegebenen Rohfassung,
   walhalla-welten.jpg bleibt unverändert. ---------- */
.wh-welten__grid li.wh-welten__item--home a {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, rgba(0,0,0,.26));
  color: var(--sd-gold-bright);
  font-weight: 600;
}
.wh-home-badge {
  display: block;
  margin-top: .3em;
  font-family: var(--sd-font-body);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .01em;
  color: var(--sd-ink-muted);
}
@media (min-width: 900px) {
  .wh-welten__grid li.wh-welten__item--home a {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: -2px;
  }
  .wh-welten__grid li.wh-welten__item--home .wh-welten__cell-label {
    background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 55%, rgba(6,4,3,.75)) 0%, color-mix(in srgb, var(--accent) 15%, transparent) 70%, transparent 100%);
  }
  .wh-home-badge {
    color: var(--sd-ink);
    font-size: .68rem;
  }
}

.wh-finden { padding: 2rem 1.25rem 0; }
.wh-finden__box {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.3rem 1.5rem;
  background: rgba(0,0,0,.24);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--sd-radius);
  text-align: center;
}
.wh-finden__box h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--sd-gold-bright); margin: 0 0 .6em; }
.wh-finden__box p { color: var(--sd-ink-muted); margin: 0 0 .6em; font-size: .95rem; }
.wh-finden__box p:last-child { margin-bottom: 0; }
.wh-finden__note { font-style: italic; font-size: .85rem; }

.wh-status__rule {
  margin: 0 0 1.1em;
  padding: .7rem .9rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px;
  font-size: .88rem;
  color: var(--sd-ink);
  text-align: left;
}
.wh-status__rule strong { color: var(--sd-gold-bright); }

/* ---------- Discord-Button (05.09.2026): echter Einladungslink ist da,
   Platzhalter "kommt in Kürze" damit abgelöst. ---------- */
.wh-community__tile-body .wh-discord-cta {
  margin: .8em 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35em;
}
.wh-community__tile-body .wh-btn--discord {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 90%, white), var(--accent));
  color: #0b1a22;
  font-size: .92rem;
  text-decoration: none;
}
.wh-community__tile-body .wh-btn--discord:hover,
.wh-community__tile-body .wh-btn--discord:focus-visible {
  text-decoration: none;
  filter: brightness(1.08);
}
.wh-discord-sub { font-size: .78rem; color: var(--sd-ink-muted); }

/* =========================================================================
   WALHALLA — GALERIE (07.09.2026)
   Unterseite von Walhalla: /spielen-welten/walhalla/galerie/ (Template
   templates/page-galerie.html, Inhalt via [walhalla_galerie] aus
   inc/walhalla-galerie.php). Screenshots sind echte WordPress-Beiträge des
   Custom Post Type "walhalla_screenshot", über die Mediathek gepflegt –
   Filter/Grid/Sidebar-Werte sind serverseitig aus echten Beiträgen und
   Taxonomie-Begriffen erzeugt, keine festen Bilder/Zahlen im Theme. Nutzt
   dieselbe .world-walhalla-Hintergrundatmosphäre wie die Walhalla-
   Hauptseite (siehe body_class in functions.php: is_page('galerie')).
   ========================================================================= */
.wg-page { max-width: var(--sd-max); margin: 0 auto; padding: 0 0 2rem; }

/* ---------- Hero: Ausschnitt des freigegebenen Konzeptbilds. Titel/Intro
   sind zusätzlich als echter, aber visuell ausgeblendeter Text vorhanden
   (der sichtbare Schriftzug ist bereits Teil der Bildkomposition selbst,
   siehe Konzeptvorgabe – keine doppelte sichtbare Überschrift). Mobil ein
   höheres Seitenverhältnis mit Bildausschnitt auf Kriegerin/Raptor (rechte
   Bildhälfte), ab 900px die volle, unbeschnittene Bildkomposition. ---------- */
.wg-hero {
  position: relative;
  margin: 1.25rem 1.25rem 0;
  border-radius: var(--sd-radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 30%, transparent);
}
.wg-hero__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 78% 50%;
}
@media (min-width: 900px) {
  .wg-hero__image { aspect-ratio: 1199 / 262; object-position: center; }
}
.wg-hero__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout: Galerie + rechte Seitenspalte (Konzept-Vorgabe). ---------- */
.wg-layout {
  display: grid;
  gap: 1.75rem;
  padding: 1.75rem 1.25rem 0;
}
@media (min-width: 1000px) {
  .wg-layout { grid-template-columns: 1fr 18rem; align-items: start; }
}

/* ---------- Filter: aus echten Taxonomie-Begriffen erzeugt (walhalla_karte
   + walhalla_kategorie), NICHT hart codiert – neue/geänderte Begriffe im
   wp-admin erscheinen automatisch, ohne Theme-Änderung. ---------- */
.wg-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.wg-filter__btn {
  font: inherit;
  cursor: pointer;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  background: rgba(0,0,0,.28);
  color: var(--sd-ink-muted);
  font-size: .85rem;
}
.wg-filter__btn:hover, .wg-filter__btn:focus-visible { border-color: var(--accent); color: var(--sd-ink); }
.wg-filter__btn:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
.wg-filter__btn.is-active {
  background: color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.28));
  border-color: var(--accent);
  color: var(--sd-gold-bright);
  font-weight: 600;
}

/* ---------- Grid: die Screenshots selbst sind der Inhalt, keine langen
   Textkarten. ---------- */
.wg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .wg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .wg-grid { gap: 1.25rem; }
}
.wg-grid__item[hidden] { display: none; }
.wg-grid__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 25%, transparent);
  border-radius: var(--sd-radius);
  overflow: hidden;
  background: var(--sd-bg-elevated);
  cursor: zoom-in;
  text-align: left;
}
.wg-grid__btn:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
.wg-grid__btn img { width: 100%; height: auto; aspect-ratio: 640 / 420; object-fit: cover; display: block; transition: transform .25s ease; }
.wg-grid__btn:hover img, .wg-grid__btn:focus-visible img { transform: scale(1.04); }
.wg-grid__caption {
  display: block;
  padding: .55rem .7rem .65rem;
  background: linear-gradient(0deg, rgba(6,4,3,.9), rgba(6,4,3,.55) 70%, transparent);
}
.wg-grid__title { display: block; font-family: var(--sd-font-display); font-size: .92rem; color: var(--sd-ink); }
.wg-grid__meta { display: block; font-size: .74rem; color: var(--sd-ink-muted); margin-top: .15em; }

/* ---------- Leerer Zustand: kein erfundenes Platzhalterbild. ---------- */
.wg-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  background: rgba(0,0,0,.2);
  color: var(--sd-ink-muted);
}
.wg-empty p { margin: 0 0 .6em; }
.wg-empty p:last-child { margin-bottom: 0; }

/* ---------- Sidebar: Zitat + echte, berechnete Werte (keine erfundenen
   Statistiken/Likes/Kommentare). ---------- */
.wg-sidebar { display: grid; gap: 1.25rem; }
.wg-sidebar__box {
  padding: 1.2rem 1.3rem;
  background: rgba(0,0,0,.28);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--sd-radius);
}
.wg-sidebar__quote {
  margin: 0;
  font-family: var(--sd-font-display);
  font-style: italic;
  color: var(--sd-gold);
  font-size: .98rem;
}
.wg-sidebar__quote span { display: block; margin-top: .5em; font-size: .8rem; color: var(--sd-ink-muted); font-style: normal; }
.wg-sidebar__stats h2 { font-size: 1.05rem; color: var(--sd-gold-bright); margin: 0 0 .7em; }
.wg-sidebar__stats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wg-sidebar__stats li { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--sd-ink-muted); }

/* =========================================================================
   NOTAUS — humorvoller Fluchtweg von der Startseite in die Safe Zone
   (08.09.2026). Echter Link (kein reines Deko-Icon), volle Tastatur- und
   Fokusbedienbarkeit. Bewusst KEIN moderner Webbutton: rundes, "montiertes"
   Bedienelement mit Bündchen/Schrauben-Optik, wie ein physischer
   Not-Aus-Schalter. Sitzt in einem eigenen Abschnitt NACH der kompletten
   Raumszene (inkl. Portale) – dadurch muss keine bestehende Portalposition
   angefasst werden und nichts Vorhandenes wird verdeckt; bei knappem Platz
   ordnet sich der NOTAUS dem vorhandenen Layout unter (eigene, neue Zeile),
   nicht umgekehrt.
   ========================================================================= */
.notaus {
  max-width: var(--sd-max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  display: flex;
  justify-content: center;
}
.notaus__panel {
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 30%, transparent);
  border-radius: var(--sd-radius);
}
/* Folgekorrektur 10.09.2026: Ratte war auf Desktop durch die .notaus-Skalierung
   (transform: scale(.62), siehe unten) kaum erkennbar – Basisbreite vergrößert
   (3.6rem → 6.5rem), der NOTAUS-Knopf selbst bleibt unverändert. */
.notaus__ratte {
  width: 6.5rem;
  height: auto;
  flex: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.notaus__control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.notaus__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0454b, #c1272d 60%, #7a1418 100%);
  border: 4px solid #2b2320;
  box-shadow: 0 0 0 4px #3a2f28, inset 0 -4px 6px rgba(0,0,0,.4), 0 8px 14px rgba(0,0,0,.55);
  text-decoration: none;
  color: #fff2ea;
  font-family: var(--sd-font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}
.notaus__btn:hover { filter: brightness(1.08); }
.notaus__btn:focus-visible {
  outline: 3px solid var(--sd-focus);
  outline-offset: 4px;
}
.notaus__hint {
  margin: 0;
  font-size: .72rem;
  color: var(--sd-ink-muted);
  font-style: italic;
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .notaus__btn { transition: transform .15s ease, filter .15s ease; }
  .js-motion .notaus__btn:hover { transform: scale(1.04); }
  .js-motion .notaus__btn:active { transform: scale(.96); }
}
@media (max-width: 420px) {
  .notaus__panel { flex-direction: column; align-items: center; text-align: center; }
}

/* NOTAUS auf Desktop (10.09.2026, Korrekturauftrag): wird Teil der Raumszene
   statt eigener Sektion unterhalb – dieselbe --x/--y/--w/--h-Technik wie bei
   den Portalen (.portal-grid > li, siehe oben), Zielbereich links neben der
   Sessellehne, wo die Szene ohnehin dunkel/leer ist. Inhalt (Ratte, Knopf,
   Hinweistext) bleibt unverändert, wird nur per transform verkleinert und
   von der bisherigen Kartenbox befreit (transparentes Overlay statt Panel). */
@media (min-width: 900px) {
  .notaus {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .notaus__panel {
    padding: 0;
    background: none;
    border: 0;
    transform: scale(.62);
  }
}

/* =========================================================================
   SAFE ZONE (08.09.2026) — bewusster Kontrast zur dunklen Soldestroyer-
   Hauptwelt: hell, kitschig, übertrieben friedlich. Ziel des NOTAUS auf der
   Startseite. Grundzustand des Easter-Egg-Konzepts, siehe inc/safe-zone.php.
   ========================================================================= */
body.page-safe-zone {
  color-scheme: light;
  --sz-accent: #ff8fc7;
  --sz-ink: #4a2b52;
  --sz-ink-muted: #7d5a86;
  background:
    radial-gradient(1100px 520px at 12% -10%, color-mix(in srgb, #baf7e0 55%, transparent), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, #ffe2f3 60%, transparent), transparent 60%),
    #fff3f8;
  color: var(--sz-ink);
}
body.page-safe-zone .site-header__title { color: var(--sz-ink-muted); }
body.page-safe-zone .site-header__title strong { color: #b23a86; }
body.page-safe-zone .site-footer { color: var(--sz-ink-muted); border-top-color: rgba(178,58,134,.18); }
body.page-safe-zone .site-footer a { color: #b23a86; }

.sz-page { min-height: 0; }

/* Die Szene ist die Website: das Konzeptbild füllt großflächig den
   Viewport (object-fit:cover-Technik ohne Verzerrung, siehe .sz-scene__inner
   unten). Auf sehr schmalen/hohen Mobil-Viewports wird die Ausschnitt-
   vergrößerung bewusst gedeckelt (min()-Formel), damit die im Bild
   vorhandenen Buttons "Zurück ins Chaos"/"Hier bleiben" nie aus dem
   sichtbaren Ausschnitt herausfallen – siehe Statusdokumentation. */
.sz-scene {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: min(100dvh, calc(100vw * 7 / 6));
}

/* .sz-scene__inner repliziert object-fit:cover per reinem CSS (aspect-ratio +
   min-width/min-height 100 % auf ein absolut positioniertes Element mit
   fixem Seitenverhältnis) – dadurch behält dieses Element IMMER exakt das
   Seitenverhältnis des Originalbilds (1746×901), unabhängig vom Zuschnitt
   durch .sz-scene außen. Bild UND Hotspots liegen beide in .sz-scene__inner,
   ihre Prozent-Koordinaten entsprechen deshalb 1:1 den Pixel-Koordinaten im
   Originalbild – kein Verrutschen der Hotspots bei unterschiedlichen
   Bildschirmformaten. top:80%/translateY(-80%) verschiebt den Bildausschnitt
   bevorzugt nach unten (Richtung Buttons), analog zu object-position. */
.sz-scene__inner {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -80%);
  aspect-ratio: 1746 / 901;
  min-width: 100%;
  min-height: 100%;
}
.sz-scene__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sz-hotspot {
  position: absolute;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.sz-hotspot__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sz-hotspot:hover, .sz-hotspot:focus-visible { background: rgba(255,255,255,.2); }
.sz-hotspot:focus-visible {
  outline: 3px solid var(--sd-focus);
  outline-offset: 3px;
}
.sz-reaction {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, 0);
  margin: 0;
  max-width: min(80%, 24rem);
  padding: .6em 1.1em;
  border-radius: 999px;
  background: rgba(74,43,82,.88);
  color: #ffe2f3;
  font-family: var(--sd-font-display);
  font-style: italic;
  font-size: .92rem;
  text-align: center;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: no-preference) {
  .sz-reaction--pop { animation: szPop .5s ease; }
}
@keyframes szPop {
  0% { transform: translate(-50%, 0) scale(.85); opacity: 0; }
  60% { transform: translate(-50%, 0) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); }
}
.wg-sidebar__stats li span:first-child { color: var(--sd-ink); }
.wg-btn--admin { display: block; text-align: center; }
.wg-sidebar__admin-note { margin: .6em 0 0; font-size: .72rem; color: var(--sd-ink-muted); text-align: center; }

.wg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--sd-gold-bright), var(--sd-gold));
  color: #1a1210;
  font-weight: 700;
  text-decoration: none;
  font-size: .88rem;
}
.wg-btn:hover, .wg-btn:focus-visible { filter: brightness(1.08); }
.wg-btn:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }

/* ---------- Lightbox: reines Vanilla-JS, keine externe Abhängigkeit. ---------- */
.wg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.wg-lightbox[hidden] { display: none; }
.wg-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6,4,3,.92); }
.wg-lightbox__body {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 60rem);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wg-lightbox__image { max-width: 100%; max-height: 72vh; display: block; border-radius: 8px; }
.wg-lightbox__close, .wg-lightbox__prev, .wg-lightbox__next {
  position: absolute;
  border: 0;
  cursor: pointer;
  background: rgba(0,0,0,.55);
  color: var(--sd-ink);
  border-radius: 999px;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.3rem;
  line-height: 1;
}
.wg-lightbox__close { top: -.5rem; right: -.5rem; }
.wg-lightbox__prev { left: -.5rem; top: 50%; transform: translateY(-50%); }
.wg-lightbox__next { right: -.5rem; top: 50%; transform: translateY(-50%); }
.wg-lightbox__close:hover, .wg-lightbox__close:focus-visible,
.wg-lightbox__prev:hover, .wg-lightbox__prev:focus-visible,
.wg-lightbox__next:hover, .wg-lightbox__next:focus-visible { background: color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,.55)); }
.wg-lightbox__close:focus-visible, .wg-lightbox__prev:focus-visible, .wg-lightbox__next:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
.wg-lightbox__caption { margin-top: .8rem; text-align: center; }
.wg-lightbox__title { margin: 0; font-family: var(--sd-font-display); color: var(--sd-gold-bright); }
.wg-lightbox__meta { margin: .2em 0 0; font-size: .82rem; color: var(--sd-ink-muted); }

/* wpautop fügt in den Shortcode-Output ggf. leere <p>/<br> ein (gleiches
   bekanntes Verhalten wie bei "Spielen & Welten"/Walhalla-Community, siehe
   dortiger Kommentar) – rein kosmetischer Schutz, kein Layoutfehler. */
.wg-page br, .wg-page p:empty { display: none; }


/* =========================================================================
   GESCHICHTEN, FILME & BÜCHER — Einstiegsseite (12.09.2026). Gleiches
   Prinzip wie "Bilder & Charaktere" und "Küche & Genuss": das freigegebene
   Konzeptbild ist die Grundszene, HTML/CSS legen die fünf Klickflächen
   ("Eigene Geschichten", "Comics & Bildgeschichten", "Filme & Serien",
   "Bücher", "Welten & Hintergründe") darüber. Anders als bei den beiden
   vorherigen Welten enthält das Konzeptbild KEINE eingemalten
   Beschriftungen – die Bereichsnamen sind deshalb hier als permanent
   sichtbares HTML-Label (.gfb-portal__label) umgesetzt statt nur als
   Hover-Chip. Eigener Namensraum "gfb-", um bestehende Bereiche nicht zu
   berühren.
   ========================================================================= */
.gfb-page { max-width: none; margin: 0; padding: 0; }
.gfb-room { position: relative; }

.gfb-sr-title,
.gfb-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gfb-stage { position: relative; }
.gfb-image-wrap { line-height: 0; }
.gfb-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 460; /* mobil: gekürzter, rein dekorativer Bildstreifen */
  object-fit: cover;
  object-position: 50% 26%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Fünf-Karten-Liste ---------- */
.gfb-portal-nav { display: block; }
.gfb-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .gfb-portal-grid { grid-template-columns: 1fr 1fr; }
}

.gfb-portal {
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.gfb-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
}
/* Korrektur 12.09.2026: Untertitel (.gfb-portal__tag) auf Wunsch überall
   (Desktop UND Mobil) nur noch sichtbar für Screenreader, nicht mehr im
   Bild/auf der Karte lesbar – sichtbar bleibt ausschließlich die
   Hauptbezeichnung (.gfb-portal__title). Text bleibt im Markup erhalten
   (Barrierefreiheit), wird aber visuell ausgeblendet statt gelöscht. */
.gfb-portal__tag {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .gfb-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .gfb-portal:hover,
  .js-motion .gfb-portal:focus-visible {
    border-color: var(--sd-gold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-gold) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--sd-gold) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die fünf Bereiche
   werden zu Klickflächen darüber (identisches Prinzip wie bei "Bilder &
   Charaktere"/"Küche & Genuss": .gfb-stage > .gfb-image-wrap /
   .gfb-portal-nav übereinandergelegt per CSS-Grid). Anders als dort bleibt
   das Beschriftungslabel hier dauerhaft sichtbar statt nur bei Hover, da
   das Konzeptbild selbst keine Beschriftung enthält.
   ========================================================================= */
@media (min-width: 900px) {
  .gfb-image { aspect-ratio: 1672 / 941; object-position: center; }

  .gfb-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .gfb-stage > .gfb-image-wrap,
  .gfb-stage > .gfb-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .gfb-stage > .gfb-image-wrap { z-index: 0; }
  .gfb-stage > .gfb-portal-nav { z-index: 1; }

  .gfb-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .gfb-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Klickfläche selbst bleibt unsichtbar, nur
     das Label darin ist sichtbar (siehe .gfb-portal__label unten). */
  .gfb-portal {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    overflow: visible;
  }

  /* Dezenter Rahmen um die gesamte Fläche bei Hover/Fokus, damit die
     Ausdehnung der Klickfläche erkennbar wird. */
  .gfb-portal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 0 transparent;
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .gfb-portal::after { transition: opacity .18s ease; }
  }
  .gfb-portal:hover::after,
  .gfb-portal:focus-visible::after {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--sd-gold), 0 0 22px 2px color-mix(in srgb, var(--sd-gold) 55%, transparent);
  }
  .gfb-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }

  /* Das Label ist – anders als bei "Bilder & Charaktere"/"Küche & Genuss" –
     dauerhaft sichtbar, da das Konzeptbild selbst keine Beschriftung
     enthält. Es sitzt am unteren Rand der jeweiligen Fläche, dezent
     hinterlegt für Lesbarkeit vor dem detailreichen Bild, und hellt sich
     bei Hover/Fokus zusätzlich auf. */
  /* Korrektur 12.09.2026 (zweite Runde): Im Ruhezustand sind Beschriftung
     UND Rahmen jetzt vollständig unsichtbar – das Konzeptbild soll zunächst
     ganz ohne erkennbare Navigation wirken und zum Erkunden einladen. Beides
     erscheint erst bei Hover/Tastaturfokus (siehe .gfb-portal::after weiter
     oben, das bereits nach demselben Prinzip gebaut war). Der Titel bleibt
     dabei unabhängig vom Hover-Zustand jederzeit für Screenreader lesbar:
     versteckt wird ausschließlich über opacity (nicht über visibility/
     display), das entfernt einen Text nicht aus dem Accessibility-Tree. */
  .gfb-portal__label {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1rem);
    padding: .3rem .65rem;
    border-radius: 8px;
    background: rgba(8, 6, 5, .82);
    border: 1px solid color-mix(in srgb, var(--sd-gold) 45%, transparent);
    text-align: center;
    opacity: 0;
  }
  .gfb-portal__title {
    display: block;
    font-family: var(--sd-font-display);
    font-size: .95rem;
    line-height: 1.2;
    color: var(--sd-gold-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
  }
  /* .gfb-portal__tag bleibt hier bewusst ohne Desktop-Override – die
     globale, visuell ausgeblendete Screenreader-Fassung von oben gilt
     unverändert auch auf Desktop (Korrektur 12.09.2026). */
  @media (prefers-reduced-motion: no-preference) {
    .gfb-portal__label { transition: opacity .18s ease; }
  }
  .gfb-portal:hover .gfb-portal__label,
  .gfb-portal:focus-visible .gfb-portal__label {
    opacity: 1;
  }
}


/* =========================================================================
   WERKSTATT & EXPERIMENTE — Einstiegsseite (12.09.2026). Gleiches Prinzip
   wie die finale Fassung von "Geschichten, Filme & Bücher": das
   freigegebene Konzeptbild ist die Grundszene, HTML/CSS legen die fünf
   Klickflächen ("Homelab & Server", "Bifröst & Netzwerk", "KI-Labor",
   "Webprojekte & Entwicklung", "Hardwaretests & Experimente") darüber.
   Im Desktop-Ruhezustand sind weder Rahmen noch Beschriftung sichtbar –
   beides erscheint erst bei Hover/Tastaturfokus (Auftrag 12.09.2026,
   identisch zur zuletzt bei "Geschichten, Filme & Bücher" freigegebenen
   Lösung). Keine Untertitel – jeder Hotspot trägt ausschließlich seine
   Hauptbezeichnung, die zugleich der zugängliche Name ist. Eigener
   Namensraum "wx-", um bestehende Bereiche nicht zu berühren.
   ========================================================================= */
.wx-page { max-width: none; margin: 0; padding: 0; }
.wx-room { position: relative; }

.wx-sr-title,
.wx-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wx-stage { position: relative; }
.wx-image-wrap { line-height: 0; }
.wx-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 460; /* mobil: gekürzter, rein dekorativer Bildstreifen */
  object-fit: cover;
  object-position: 50% 30%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Fünf-Karten-Liste ---------- */
.wx-portal-nav { display: block; }
.wx-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .wx-portal-grid { grid-template-columns: 1fr 1fr; }
}

.wx-portal {
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.wx-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .wx-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .wx-portal:hover,
  .js-motion .wx-portal:focus-visible {
    border-color: var(--sd-gold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-gold) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--sd-gold) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die fünf
   Bereiche werden zu unsichtbaren Klickflächen darüber (identisches
   Prinzip wie bei den bestehenden Bildszenen-Welten: .wx-stage >
   .wx-image-wrap / .wx-portal-nav übereinandergelegt per CSS-Grid).
   Ruhezustand: keine Beschriftung, kein Rahmen sichtbar – das Bild wirkt
   vollständig unverstellt. Erst bei Hover/Fokus erscheinen ein dezenter
   goldener Rahmen und die Hauptbezeichnung (per opacity, nicht
   visibility/display, damit der Text jederzeit im Accessibility-Tree
   bleibt).
   ========================================================================= */
@media (min-width: 900px) {
  .wx-image { aspect-ratio: 1672 / 941; object-position: center; }

  .wx-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .wx-stage > .wx-image-wrap,
  .wx-stage > .wx-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .wx-stage > .wx-image-wrap { z-index: 0; }
  .wx-stage > .wx-portal-nav { z-index: 1; }

  .wx-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .wx-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Klickfläche selbst bleibt unsichtbar. */
  .wx-portal {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    overflow: visible;
  }

  /* Dezenter Goldrahmen, ausschließlich bei Hover/Fokus sichtbar. */
  .wx-portal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 0 transparent;
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .wx-portal::after { transition: opacity .18s ease; }
  }
  .wx-portal:hover::after,
  .wx-portal:focus-visible::after {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--sd-gold), 0 0 22px 2px color-mix(in srgb, var(--sd-gold) 55%, transparent);
  }
  .wx-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }

  /* Beschriftung: im Ruhezustand unsichtbar (opacity:0), erscheint nur
     bei Hover/Fokus. opacity statt visibility/display, damit der Titel
     jederzeit für Screenreader lesbar bleibt, unabhängig vom visuellen
     Zustand. */
  .wx-portal__label {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1rem);
    padding: .3rem .65rem;
    border-radius: 8px;
    background: rgba(8, 6, 5, .82);
    border: 1px solid color-mix(in srgb, var(--sd-gold) 45%, transparent);
    text-align: center;
    opacity: 0;
  }
  .wx-portal__title {
    display: block;
    font-family: var(--sd-font-display);
    font-size: .95rem;
    line-height: 1.2;
    color: var(--sd-gold-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
  }
  @media (prefers-reduced-motion: no-preference) {
    .wx-portal__label { transition: opacity .18s ease; }
  }
  .wx-portal:hover .wx-portal__label,
  .wx-portal:focus-visible .wx-portal__label {
    opacity: 1;
  }
}

/* =========================================================================
   REZEPTE (12.09.2026) — Übersicht (Kartenraster, natives CPT-Archiv
   "soldestroyer_rezept") und Einzelrezept-Detailseite. Anders als die
   "Konzeptbild-als-Grundszene"-Welten sind das echte, textbasierte
   Inhaltsseiten (Aufbau wie templates/page.html, auf Basis von
   .container) statt eines eigenen Vollbild-Layouts. Eigener Namensraum
   "rp-", um bestehende Bereiche nicht zu berühren.
   ========================================================================= */
.rp-page h1,
.rp-detail h1 { color: var(--sd-gold-bright); }

.rp-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
}
@media (min-width: 600px) {
  .rp-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .rp-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.rp-card {
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rp-card { transition: border-color .18s ease, box-shadow .18s ease; }
}
.rp-card:hover,
.rp-card:focus-visible {
  border-color: var(--sd-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-gold) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--sd-gold) 60%, transparent);
}
.rp-card__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--sd-bg);
  overflow: hidden;
}
.rp-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Auftrag 12.09.2026: Rezeptbild möglichst nicht beschneiden */
}
.rp-card__title {
  display: block;
  padding: .9rem 1.1rem 1.1rem;
  font-family: var(--sd-font-display);
  font-size: 1.1rem;
  color: var(--sd-gold-bright);
}

/* ---------- Detailseite ---------- */
.rp-detail__image-wrap { margin: 1.5rem 0; line-height: 0; }
.rp-detail__image {
  width: 100%;
  height: auto;
  border-radius: var(--sd-radius);
  border: 1px solid color-mix(in srgb, var(--sd-gold) 30%, transparent);
}
.rp-detail h2 {
  font-size: 1.2rem;
  color: var(--sd-gold-bright);
  margin-top: 1.75rem;
}
.rp-detail__zutaten,
.rp-detail__naehrwerte,
.rp-detail__zubereitung {
  color: var(--sd-ink-muted);
  padding-inline-start: 1.35rem;
}
.rp-detail__zubereitung li { margin-bottom: .5em; }

/* =========================================================================
   UNTERWEGS & ERLEBT — Einstiegsseite (12.09.2026). Gleiches Prinzip wie
   die finale Fassung von "Werkstatt & Experimente": das freigegebene
   Konzeptbild ist die Grundszene, HTML/CSS legen die vier Klickflächen
   ("Länder & Orte", "Reisevorbereitung & Unterwegs", "Reiseberichte &
   Erlebnisse", "Fotos & Erinnerungen") darüber. Im Desktop-Ruhezustand
   sind weder Rahmen noch Beschriftung sichtbar – beides erscheint erst
   bei Hover/Tastaturfokus (Auftrag 12.09.2026, identisch zum zuletzt bei
   "Werkstatt & Experimente" freigegebenen Verhalten). Keine Untertitel –
   jeder Hotspot trägt ausschließlich seine Hauptbezeichnung. Eigener
   Namensraum "ue-", um bestehende Bereiche nicht zu berühren.
   ========================================================================= */
.ue-page { max-width: none; margin: 0; padding: 0; }
.ue-room { position: relative; }

.ue-sr-title,
.ue-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ue-stage { position: relative; }
.ue-image-wrap { line-height: 0; }
.ue-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 460; /* mobil: gekürzter, rein dekorativer Bildstreifen */
  object-fit: cover;
  object-position: 50% 35%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Vier-Karten-Liste ---------- */
.ue-portal-nav { display: block; }
.ue-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .ue-portal-grid { grid-template-columns: 1fr 1fr; }
}

.ue-portal {
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.ue-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .ue-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .ue-portal:hover,
  .js-motion .ue-portal:focus-visible {
    border-color: var(--sd-gold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-gold) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--sd-gold) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die vier
   Bereiche werden zu unsichtbaren Klickflächen darüber (identisches
   Prinzip wie bei den bestehenden Bildszenen-Welten: .ue-stage >
   .ue-image-wrap / .ue-portal-nav übereinandergelegt per CSS-Grid).
   Ruhezustand: keine Beschriftung, kein Rahmen sichtbar – das Bild wirkt
   vollständig unverstellt. Erst bei Hover/Fokus erscheinen ein dezenter
   goldener Rahmen und die Hauptbezeichnung (per opacity, nicht
   visibility/display, damit der Text jederzeit im Accessibility-Tree
   bleibt).
   ========================================================================= */
@media (min-width: 900px) {
  .ue-image { aspect-ratio: 1672 / 941; object-position: center; }

  .ue-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .ue-stage > .ue-image-wrap,
  .ue-stage > .ue-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .ue-stage > .ue-image-wrap { z-index: 0; }
  .ue-stage > .ue-portal-nav { z-index: 1; }

  .ue-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .ue-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Klickfläche selbst bleibt unsichtbar. */
  .ue-portal {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    overflow: visible;
  }

  /* Dezenter Goldrahmen, ausschließlich bei Hover/Fokus sichtbar. */
  .ue-portal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 0 transparent;
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ue-portal::after { transition: opacity .18s ease; }
  }
  .ue-portal:hover::after,
  .ue-portal:focus-visible::after {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--sd-gold), 0 0 22px 2px color-mix(in srgb, var(--sd-gold) 55%, transparent);
  }
  .ue-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }

  /* Beschriftung: im Ruhezustand unsichtbar (opacity:0), erscheint nur
     bei Hover/Fokus. opacity statt visibility/display, damit der Titel
     jederzeit für Screenreader lesbar bleibt, unabhängig vom visuellen
     Zustand. */
  .ue-portal__label {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1rem);
    padding: .3rem .65rem;
    border-radius: 8px;
    background: rgba(8, 6, 5, .82);
    border: 1px solid color-mix(in srgb, var(--sd-gold) 45%, transparent);
    text-align: center;
    opacity: 0;
  }
  .ue-portal__title {
    display: block;
    font-family: var(--sd-font-display);
    font-size: .95rem;
    line-height: 1.2;
    color: var(--sd-gold-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ue-portal__label { transition: opacity .18s ease; }
  }
  .ue-portal:hover .ue-portal__label,
  .ue-portal:focus-visible .ue-portal__label {
    opacity: 1;
  }
}

/* =========================================================================
   BENUTZT & AUSPROBIERT — Einstiegsseite (12.09.2026). Gleiches Prinzip wie
   die finale Fassung von "Werkstatt & Experimente" / "Unterwegs & Erlebt":
   das freigegebene Konzeptbild ist die Grundszene, HTML/CSS legen die vier
   Klickflächen ("Computer, Technik & Digitales", "Werkzeuge, Haushalt &
   Alltag", "Kurioses & Alltagshelfer", "Finanzen, Verträge & Dienste")
   darüber. Im Desktop-Ruhezustand sind weder Rahmen noch Beschriftung
   sichtbar – beides erscheint erst bei Hover/Tastaturfokus (Auftrag
   12.09.2026, identisch zum zuletzt freigegebenen Verhalten). Keine
   Untertitel – jeder Hotspot trägt ausschließlich seine Hauptbezeichnung.
   Eigener Namensraum "ba-", um bestehende Bereiche nicht zu berühren.
   ========================================================================= */
.ba-page { max-width: none; margin: 0; padding: 0; }
.ba-room { position: relative; }

.ba-sr-title,
.ba-sr-desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ba-stage { position: relative; }
.ba-image-wrap { line-height: 0; }
.ba-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 460; /* mobil: gekürzter, rein dekorativer Bildstreifen */
  object-fit: cover;
  object-position: 50% 40%;
}

/* ---------- Mobil/Tablet (<900px): einfache, echte Vier-Karten-Liste ---------- */
.ba-portal-nav { display: block; }
.ba-portal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
@media (min-width: 600px) {
  .ba-portal-grid { grid-template-columns: 1fr 1fr; }
}

.ba-portal {
  display: block;
  text-decoration: none;
  color: var(--sd-ink);
  background: linear-gradient(160deg, var(--sd-bg-elevated), var(--sd-bg));
  border: 1px solid color-mix(in srgb, var(--sd-gold) 35%, transparent);
  border-radius: var(--sd-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.ba-portal__title {
  display: block;
  font-family: var(--sd-font-display);
  font-size: 1.05rem;
  color: var(--sd-gold-bright);
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .ba-portal { transition: border-color .18s ease, box-shadow .18s ease; }
  .js-motion .ba-portal:hover,
  .js-motion .ba-portal:focus-visible {
    border-color: var(--sd-gold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-gold) 50%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--sd-gold) 60%, transparent);
  }
}

/* =========================================================================
   DESKTOP (≥900px): das Konzeptbild wird zur Grundszene, die vier
   Bereiche werden zu unsichtbaren Klickflächen darüber (identisches
   Prinzip wie bei den bestehenden Bildszenen-Welten: .ba-stage >
   .ba-image-wrap / .ba-portal-nav übereinandergelegt per CSS-Grid).
   Ruhezustand: keine Beschriftung, kein Rahmen sichtbar – das Bild wirkt
   vollständig unverstellt. Erst bei Hover/Fokus erscheinen ein dezenter
   goldener Rahmen und die Hauptbezeichnung (per opacity, nicht
   visibility/display, damit der Text jederzeit im Accessibility-Tree
   bleibt).
   ========================================================================= */
@media (min-width: 900px) {
  .ba-image { aspect-ratio: 1672 / 941; object-position: center; }

  .ba-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .ba-stage > .ba-image-wrap,
  .ba-stage > .ba-portal-nav {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .ba-stage > .ba-image-wrap { z-index: 0; }
  .ba-stage > .ba-portal-nav { z-index: 1; }

  .ba-portal-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .ba-portal-grid > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
  }

  /* Kartenoptik abschalten: die Klickfläche selbst bleibt unsichtbar. */
  .ba-portal {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    overflow: visible;
  }

  /* Dezenter Goldrahmen, ausschließlich bei Hover/Fokus sichtbar. */
  .ba-portal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 0 transparent;
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ba-portal::after { transition: opacity .18s ease; }
  }
  .ba-portal:hover::after,
  .ba-portal:focus-visible::after {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--sd-gold), 0 0 22px 2px color-mix(in srgb, var(--sd-gold) 55%, transparent);
  }
  .ba-portal:focus-visible {
    outline: 3px solid var(--sd-focus);
    outline-offset: 2px;
  }

  /* Beschriftung: im Ruhezustand unsichtbar (opacity:0), erscheint nur
     bei Hover/Fokus. opacity statt visibility/display, damit der Titel
     jederzeit für Screenreader lesbar bleibt, unabhängig vom visuellen
     Zustand. */
  .ba-portal__label {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1rem);
    padding: .3rem .65rem;
    border-radius: 8px;
    background: rgba(8, 6, 5, .82);
    border: 1px solid color-mix(in srgb, var(--sd-gold) 45%, transparent);
    text-align: center;
    opacity: 0;
  }
  .ba-portal__title {
    display: block;
    font-family: var(--sd-font-display);
    font-size: .95rem;
    line-height: 1.2;
    color: var(--sd-gold-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ba-portal__label { transition: opacity .18s ease; }
  }
  .ba-portal:hover .ba-portal__label,
  .ba-portal:focus-visible .ba-portal__label {
    opacity: 1;
  }
}