/* ==========================================================================
   RABENKRIEG – CUSTOM.CSS
   Flowershow + Leaf Theme

   Startseite:
   - dunkle al'anfanische / südaventurische Optik
   - Vollbild-Hero
   - Rabenkrallen
   - Chronik / Spielberichte
   - Kampagnenbereich

   Hero-Bild:
   /assets/bg.png
   ========================================================================== */


/* ==========================================================================
   1. FLOWERSHOW / LEAF – GRUNDVARIABLEN
   ========================================================================== */

:root {
  /* Flowershow Theme */
  --color-l-background: #f3eee2;
  --color-l-foreground: #453f35;
  --color-l-accent: #8a6a32;

  --color-d-background: #111713;
  --color-d-foreground: #ddd4c1;
  --color-d-accent: #c3a45b;

  --navbar-height: 4.6rem;

  --radius: 0.25rem;

  /* Rabenkrieg */
  --rk-black: #0b0e0c;
  --rk-black-soft: #101511;

  --rk-green-950: #111713;
  --rk-green-900: #151d18;
  --rk-green-850: #1a231d;
  --rk-green-800: #202b23;
  --rk-green-700: #2c392e;

  --rk-ivory: #eee7d7;
  --rk-ivory-soft: #d4cbb9;
  --rk-ivory-muted: #aaa391;

  --rk-gold: #b99a52;
  --rk-gold-light: #d1b66c;
  --rk-gold-dark: #81682f;

  --rk-red: #6f2926;
  --rk-red-light: #943c35;
  --rk-red-dark: #461918;

  --rk-border: rgba(209, 182, 108, 0.18);
  --rk-border-light: rgba(238, 231, 215, 0.12);

  --rk-content-width: 76rem;
  --rk-reading-width: 48rem;

  --rk-shadow:
    0 18px 45px rgba(0, 0, 0, 0.28);
}


/* ==========================================================================
   2. ALLGEMEIN
   ========================================================================== */

html {
  scroll-behavior: smooth;
}


/*
 * Verhindert horizontales Scrollen durch große Bilder oder Karten.
 */

body {
  overflow-x: hidden;
}


/*
 * Die Rabenkrieg-Startseite verwendet layout: plain.
 * Daher gestalten wir Text und Abstände dieser Seite selbst.
 */

body:has(.rk-hero) .rendered-mdx.is-plain {
  margin: 0;
  padding: 0;

  background:
    linear-gradient(
      180deg,
      var(--rk-green-950) 0%,
      var(--rk-black-soft) 100%
    );

  color: var(--rk-ivory);
}


/*
 * Standard-Seitenkopf auf der Landingpage ausblenden.
 */

body:has(.rk-hero) .page-header {
  display: none;
}


/*
 * Kein heller Abstand zwischen Navigation und Hero.
 */

body:has(.rk-hero) .layout-inner,
body:has(.rk-hero) .layout-inner-center,
body:has(.rk-hero) .page-main {
  margin-top: 0;
  padding-top: 0;
}


/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */

body:has(.rk-hero) .site-navbar {
  background:
    rgba(13, 18, 15, 0.97);

  border-bottom:
    1px solid rgba(185, 154, 82, 0.2);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/*
 * Etwas kompakterer innerer Bereich.
 */

body:has(.rk-hero) .site-navbar-inner {
  max-width: 90rem;
}


/* Logo */

body:has(.rk-hero) .site-navbar-site-logo {
  max-height: 2.8rem;
  width: auto;
}


/* Seitentitel */

body:has(.rk-hero) .site-navbar-site-name,
body:has(.rk-hero) .site-navbar-site-title {
  color: var(--rk-ivory);

  font-family: var(--font-heading);

  letter-spacing: 0.025em;
}


/* Links */

body:has(.rk-hero) .site-navbar-link {
  color:
    rgba(238, 231, 215, 0.86);

  transition:
    color 160ms ease;
}


body:has(.rk-hero) .site-navbar-link:hover {
  color: var(--rk-gold-light);
}


/* Mobile Navigation */

body:has(.rk-hero) .mobile-nav {
  background: var(--rk-green-950);

  border-color: var(--rk-border);
}


body:has(.rk-hero) .mobile-nav-link {
  color: var(--rk-ivory);
}


/* ==========================================================================
   4. HERO
   ========================================================================== */

.rk-hero {
  position: relative;

  min-height:
    calc(
      100vh -
      var(--navbar-height)
    );

  min-height:
    calc(
      100svh -
      var(--navbar-height)
    );

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    clamp(5rem, 11vw, 9rem)
    clamp(1.4rem, 6vw, 5rem);

  text-align: center;

  background-image:

    linear-gradient(
      180deg,
      rgba(5, 8, 6, 0.20) 0%,
      rgba(7, 11, 8, 0.34) 38%,
      rgba(11, 16, 13, 0.66) 70%,
      rgba(17, 23, 19, 0.98) 100%
    ),

    url("/assets/bg.png");

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*
 * Dunkle Vignette.
 */

.rk-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:

    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 0.08) 40%,
      rgba(0, 0, 0, 0.48) 100%
    );
}


/*
 * Dünne goldene Linie unten.
 */

.rk-hero::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  width: min(80%, 70rem);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold-dark),
      var(--rk-gold-light),
      var(--rk-gold-dark),
      transparent
    );
}


/*
 * Optionaler zusätzlicher Overlay-Container aus README.
 */

.rk-hero-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 6, 0.18),
      transparent 35%,
      transparent 65%,
      rgba(5, 8, 6, 0.18)
    );
}


/* ==========================================================================
   5. HERO-INHALT
   ========================================================================== */

.rk-hero-content {
  position: relative;

  z-index: 2;

  width: min(100%, 54rem);

  margin-inline: auto;
}


/* Kleine Überschrift */

.rk-hero-eyebrow {
  margin:
    0 0 1rem;

  color: var(--rk-gold-light);

  font-size:
    clamp(0.72rem, 1.2vw, 0.88rem);

  font-weight: 600;

  letter-spacing: 0.19em;

  line-height: 1.4;

  text-transform: uppercase;
}


/* RABENKRIEG */

.rk-hero-title {
  margin: 0;

  color: #f5efe1;

  font-family: var(--font-heading);

  font-size:
    clamp(3.7rem, 10vw, 8rem);

  font-weight: 600;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-shadow:
    0 5px 30px rgba(0, 0, 0, 0.65);
}


/* Untertitel */

.rk-hero-subtitle {
  margin:
    1.3rem 0 0;

  color: var(--rk-gold-light);

  font-family: var(--font-heading);

  font-size:
    clamp(1.15rem, 2.4vw, 1.6rem);

  letter-spacing: 0.035em;

  line-height: 1.35;
}


/* Beschreibung */

.rk-hero-description {
  max-width: 44rem;

  margin:
    1.5rem auto 0;

  color:
    rgba(238, 231, 215, 0.88);

  font-size:
    clamp(1rem, 1.8vw, 1.16rem);

  line-height: 1.75;

  text-wrap: balance;
}


/* ==========================================================================
   6. HERO-BUTTONS
   ========================================================================== */

.rk-hero-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 0.8rem;

  margin-top: 2.1rem;
}


.rk-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 3rem;

  padding:
    0.75rem 1.5rem;

  border:
    1px solid transparent;

  border-radius: var(--radius);

  font-size: 0.91rem;
  font-weight: 600;

  letter-spacing: 0.025em;

  line-height: 1;

  text-decoration: none;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}


/* Primär */

.rk-button-primary {
  background: var(--rk-gold);

  color: var(--rk-black);
}


.rk-button-primary:hover {
  background: var(--rk-gold-light);

  color: var(--rk-black);

  transform: translateY(-2px);
}


/* Sekundär */

.rk-button-secondary {
  border-color:
    rgba(238, 231, 215, 0.4);

  background:
    rgba(11, 14, 12, 0.32);

  color: var(--rk-ivory);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


.rk-button-secondary:hover {
  border-color: var(--rk-gold-light);

  background:
    rgba(185, 154, 82, 0.12);

  color: #ffffff;

  transform: translateY(-2px);
}


/* ==========================================================================
   7. SCROLL-HINWEIS
   ========================================================================== */

.rk-hero-scroll {
  position: absolute;

  z-index: 3;

  bottom: 1.3rem;
  left: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.2rem;

  color:
    rgba(238, 231, 215, 0.57);

  font-size: 0.67rem;
  font-weight: 500;

  letter-spacing: 0.15em;

  text-decoration: none;

  text-transform: uppercase;

  transform: translateX(-50%);
}


.rk-hero-scroll:hover {
  color: var(--rk-gold-light);
}


.rk-hero-scroll-arrow {
  font-size: 1.15rem;

  line-height: 1;
}


/* ==========================================================================
   8. ABSCHNITTSÜBERSCHRIFTEN
   ========================================================================== */

.rk-section-heading {
  width:
    min(
      calc(100% - 3rem),
      var(--rk-reading-width)
    );

  margin:
    0 auto;

  padding:
    clamp(5rem, 9vw, 7rem)
    0
    clamp(2rem, 4vw, 3rem);

  text-align: center;
}


/* Kleine Überschrift */

.rk-section-eyebrow {
  margin:
    0 0 0.65rem;

  color: var(--rk-gold);

  font-size: 0.74rem;
  font-weight: 600;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}


/* H2 */

.rk-section-heading h2,
.rk-campaign h2 {
  margin: 0;

  color: var(--rk-ivory);

  font-family: var(--font-heading);

  font-size:
    clamp(2.25rem, 5vw, 4rem);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing: -0.025em;

  text-wrap: balance;
}


/* Beschreibung */

.rk-section-heading > p:last-child {
  max-width: 42rem;

  margin:
    1.1rem auto 0;

  color: var(--rk-ivory-muted);

  font-size:
    clamp(0.98rem, 1.5vw, 1.08rem);

  line-height: 1.75;

  text-wrap: balance;
}


/* ==========================================================================
   9. FLOWERSHOW LISTEN
   ========================================================================== */

/*
 * Die Listen werden ausschließlich auf unserer Rabenkrieg-Startseite
 * verändert.
 */

body:has(.rk-hero) .list-component {
  width:
    min(
      calc(100% - 3rem),
      var(--rk-content-width)
    );

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    clamp(1rem, 2.5vw, 1.7rem);
}


/* Karten */

body:has(.rk-hero) .list-component-item {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid var(--rk-border-light);

  border-radius: var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.15);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}


/*
 * Feine goldene Oberkante.
 */

body:has(.rk-hero) .list-component-item::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold),
      transparent
    );

  transition:
    opacity 180ms ease;
}


/* Hover */

body:has(.rk-hero) .list-component-item:hover {
  border-color:
    rgba(185, 154, 82, 0.4);

  background:
    rgba(255, 255, 255, 0.055);

  box-shadow: var(--rk-shadow);

  transform:
    translateY(-4px);
}


body:has(.rk-hero)
.list-component-item:hover::before {
  opacity: 1;
}


/* ==========================================================================
   10. LISTEN-BILDER
   ========================================================================== */

body:has(.rk-hero)
.list-component-item-media {
  width: 100%;

  margin: 0;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  background: var(--rk-black);
}


/*
 * Bei den Rabenkrallen wirken Portraits etwas höher.
 */

body:has(.rk-hero)
#rabenkrallen
+ .list-component
.list-component-item-media {
  aspect-ratio: 4 / 5;
}


body:has(.rk-hero)
.list-component-item-media-img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  object-fit: cover;

  transition:
    transform 500ms ease,
    filter 300ms ease;
}


/*
 * Leicht gedämpfte Bilder passen besser zur Kampagne.
 */

body:has(.rk-hero)
.list-component-item-media-img {
  filter:
    saturate(0.9)
    contrast(1.03);
}


body:has(.rk-hero)
.list-component-item:hover
.list-component-item-media-img {
  filter:
    saturate(1)
    contrast(1.05);

  transform:
    scale(1.035);
}


/* ==========================================================================
   11. KARTEN-INHALT
   ========================================================================== */

body:has(.rk-hero)
.list-component-item-content {
  display: flex;

  flex: 1;
  flex-direction: column;

  padding:
    1.3rem
    1.35rem
    1.45rem;
}


/* Datum / Eyebrow */

body:has(.rk-hero)
.list-component-item-eyebrow {
  margin:
    0 0 0.5rem;

  color: var(--rk-gold);

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


/* Titel */

body:has(.rk-hero)
.list-component-item-headline {
  margin: 0;

  color: var(--rk-ivory);

  font-family: var(--font-heading);

  font-size:
    clamp(1.25rem, 2vw, 1.55rem);

  font-weight: 600;

  line-height: 1.25;

  letter-spacing: -0.01em;
}


/* Zusammenfassung */

body:has(.rk-hero)
.list-component-item-summary {
  margin:
    0.7rem 0 0;

  color: var(--rk-ivory-muted);

  font-size: 0.92rem;

  line-height: 1.65;
}


/* Meta / Footnote */

body:has(.rk-hero)
.list-component-item-footnote {
  margin-top: auto;

  padding-top: 1rem;

  color:
    rgba(212, 203, 185, 0.65);

  font-size: 0.78rem;
}


/* ==========================================================================
   12. "ALLE ANSEHEN"
   ========================================================================== */

.rk-section-more {
  display: flex;

  justify-content: center;

  padding:
    clamp(2rem, 4vw, 3rem)
    1.5rem
    clamp(4rem, 8vw, 6rem);
}


.rk-section-more a {
  display: inline-flex;

  align-items: center;

  padding-bottom: 0.2rem;

  border-bottom:
    1px solid rgba(185, 154, 82, 0.5);

  color: var(--rk-gold-light);

  font-size: 0.91rem;
  font-weight: 600;

  letter-spacing: 0.02em;

  text-decoration: none;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}


.rk-section-more a:hover {
  border-color: var(--rk-gold-light);

  color: var(--rk-ivory);

  transform:
    translateX(3px);
}


/* ==========================================================================
   13. TRENNLINIEN
   ========================================================================== */

.rk-divider {
  width:
    min(
      calc(100% - 3rem),
      62rem
    );

  height: 1px;

  margin-inline: auto;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185, 154, 82, 0.35),
      transparent
    );
}


/* ==========================================================================
   14. KAMPAGNEN-BEREICH
   ========================================================================== */

.rk-campaign {
  margin-top:
    clamp(4rem, 8vw, 7rem);

  padding:
    clamp(5rem, 10vw, 8rem)
    1.5rem;

  border-top:
    1px solid rgba(185, 154, 82, 0.14);

  background:

    linear-gradient(
      180deg,
      rgba(111, 41, 38, 0.08),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #141b16,
      #0c100d
    );
}


.rk-campaign-inner {
  width:
    min(
      100%,
      var(--rk-reading-width)
    );

  margin-inline: auto;

  text-align: center;
}


.rk-campaign h2 {
  margin-top: 0;
}


/* Einleitung */

.rk-campaign-lead {
  margin:
    1.5rem auto 0;

  color: var(--rk-ivory);

  font-size:
    clamp(1.05rem, 1.8vw, 1.18rem);

  line-height: 1.8;
}


/* Zweiter Absatz */

.rk-campaign-inner > p:not(
  .rk-section-eyebrow,
  .rk-campaign-lead
) {
  margin:
    1.3rem auto 0;

  color: var(--rk-ivory-muted);

  font-size: 1rem;

  line-height: 1.75;
}

/* ==========================================================================
   STARTSEITE – HELLEN BEREICH VOR DEM FOOTER ENTFERNEN
   ========================================================================== */

body:has(.rk-hero) {
  background: var(--rk-black-soft);
}

body:has(.rk-hero) .page-main,
body:has(.rk-hero) .layout-inner,
body:has(.rk-hero) .layout-inner-center,
body:has(.rk-hero) .page-body {
  background: var(--rk-black-soft);
}


/*
 * Kein Abstand zwischen Seiteninhalt und Footer.
 */

body:has(.rk-hero) .site-footer {
  margin-top: 0;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

body:has(.rk-hero) .site-footer,
body:has(.rk-character) .site-footer {
  margin-top: 0;

  border-top:
    1px solid var(--rk-border);

  background: #090c0a;

  color: var(--rk-ivory-muted);
}


body:has(.rk-hero)
.site-footer-publication-name {
  color: var(--rk-ivory);
}


body:has(.rk-hero)
.site-footer-navigation-link {
  color: var(--rk-ivory-muted);
}


body:has(.rk-hero)
.site-footer-navigation-link:hover {
  color: var(--rk-gold-light);
}


/* ==========================================================================
   16. TABLET
   ========================================================================== */

@media (max-width: 900px) {

  body:has(.rk-hero) .list-component {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .rk-hero-description {
    max-width: 38rem;
  }


  .rk-hero-title {
    font-size:
      clamp(3.5rem, 12vw, 6rem);
  }

}


/* ==========================================================================
   17. SMARTPHONE
   ========================================================================== */

@media (max-width: 640px) {

  :root {
    --navbar-height: 4rem;
  }


  .rk-hero {
    min-height:
      calc(
        100svh -
        var(--navbar-height)
      );

    padding:
      4.5rem
      1.2rem
      5rem;

    background-position:
      center center;
  }


  .rk-hero-title {
    font-size:
      clamp(
        3rem,
        17vw,
        4.6rem
      );
  }


  .rk-hero-subtitle {
    font-size: 1.1rem;
  }


  .rk-hero-description {
    margin-top: 1.25rem;

    font-size: 0.98rem;

    line-height: 1.65;
  }


  .rk-hero-actions {
    flex-direction: column;

    width:
      min(
        100%,
        19rem
      );

    margin-left: auto;
    margin-right: auto;
  }


  .rk-button {
    width: 100%;
  }


  .rk-hero-scroll {
    bottom: 0.9rem;
  }


  .rk-section-heading {
    width:
      calc(100% - 2rem);

    padding-top: 4rem;
  }


  .rk-section-heading h2,
  .rk-campaign h2 {
    font-size:
      clamp(
        2.1rem,
        10vw,
        2.8rem
      );
  }


  body:has(.rk-hero) .list-component {
    width:
      calc(100% - 2rem);

    grid-template-columns: 1fr;

    gap: 1.2rem;
  }


  body:has(.rk-hero)
  .list-component-item-content {
    padding:
      1.15rem
      1.2rem
      1.3rem;
  }


  /*
   * Portraitkarten werden auf kleinen Displays etwas weniger hoch.
   */

  body:has(.rk-hero)
  #rabenkrallen
  + .list-component
  .list-component-item-media {
    aspect-ratio: 4 / 3;
  }


  .rk-divider {
    width:
      calc(100% - 2rem);
  }


  .rk-campaign {
    padding:
      4rem
      1.2rem;
  }

}


/* ==========================================================================
   18. KLEINE SMARTPHONES
   ========================================================================== */

@media (max-width: 400px) {

  .rk-hero-title {
    font-size: 2.9rem;
  }


  .rk-hero-eyebrow {
    letter-spacing: 0.13em;
  }


  .rk-section-heading h2,
  .rk-campaign h2 {
    font-size: 2rem;
  }

}


/* ==========================================================================
   19. REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  .rk-button,
  .rk-section-more a,
  .list-component-item,
  .list-component-item-media-img {
    transition: none;
  }

}



/* ==========================================================================
   RABENKRIEG – CHARAKTER-EINZELSEITEN
   /player/*.md mit .rk-character
   ========================================================================== */

/* ==========================================================================
   1. SEITENLAYOUT / LEAF-HINTERGRUND ENTFERNEN
   ========================================================================== */

html:has(.rk-character),
body:has(.rk-character) {
  background: var(--rk-black-soft);
  color: var(--rk-ivory);
}

body:has(.rk-character) .page-header {
  display: none;
}

body:has(.rk-character) main,
body:has(.rk-character) .page-main,
body:has(.rk-character) .page-body,
body:has(.rk-character) .layout-inner,
body:has(.rk-character) .layout-inner-center,
body:has(.rk-character) .rendered-mdx,
body:has(.rk-character) .rendered-mdx.is-plain {
  margin-top: 0;
  padding-top: 0;
  background: var(--rk-black-soft);
  color: var(--rk-ivory);
}

/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */

body:has(.rk-character) .site-navbar {
  background: rgba(13, 18, 15, 0.97);
  border-bottom: 1px solid rgba(185, 154, 82, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(.rk-character) .site-navbar-site-name,
body:has(.rk-character) .site-navbar-site-title {
  color: var(--rk-ivory);
}

body:has(.rk-character) .site-navbar-link {
  color: rgba(238, 231, 215, 0.86);
}

body:has(.rk-character) .site-navbar-link:hover {
  color: var(--rk-gold-light);
}

body:has(.rk-character) .mobile-nav {
  background: var(--rk-green-950);
  border-color: var(--rk-border);
}

body:has(.rk-character) .mobile-nav-link {
  color: var(--rk-ivory);
}

/* ==========================================================================
   3. CHARAKTER-HERO / HAUPTBEREICH
   ========================================================================== */

.rk-character {
  position: relative;
  min-height: calc(100svh - var(--navbar-height, 4.6rem));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding:
    clamp(4.5rem, 8vw, 7rem)
    clamp(1.25rem, 5vw, 4rem);
  color: var(--rk-ivory);
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 11, 8, 0.98) 0%,
      rgba(10, 16, 12, 0.95) 44%,
      rgba(12, 18, 14, 0.82) 100%
    ),
    url("/assets/bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.rk-character::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 62% 45%,
      transparent 0%,
      rgba(0, 0, 0, 0.10) 44%,
      rgba(0, 0, 0, 0.52) 100%
    );
}

.rk-character::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(78%, 68rem);
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold-dark),
      var(--rk-gold-light),
      var(--rk-gold-dark),
      transparent
    );
}

/* ==========================================================================
   4. CHARAKTER-LAYOUT
   ========================================================================== */

.rk-character-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 72rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

/* ==========================================================================
   5. PORTRAIT
   ========================================================================== */

.rk-character-portrait {
  position: relative;
}

.rk-character-portrait::before {
  content: "";
  position: absolute;
  inset: 1.15rem -1rem -1.15rem 1rem;
  border: 1px solid rgba(185, 154, 82, 0.18);
  background: rgba(0, 0, 0, 0.20);
  transform: rotate(2deg);
}

.rk-character-image-frame {
  position: relative;
  padding: 0.42rem;
  border: 1px solid var(--rk-gold-dark);
  background:
    linear-gradient(
      145deg,
      #c6a65c,
      #6e5728 35%,
      #d2b96d 65%,
      #715a2b
    );
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5);
}

.rk-character-image-frame::after {
  content: "";
  position: absolute;
  inset: 0.72rem;
  pointer-events: none;
  border: 1px solid rgba(238, 231, 215, 0.28);
}

/* Markdown erzeugt häufig einen p-Wrapper um das Bild. */
.rk-character-image-frame p {
  margin: 0;
}

.rk-character-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #171813;
  filter: saturate(0.88) contrast(1.04);
}

/* ==========================================================================
   6. TEXTBEREICH
   ========================================================================== */

.rk-character-content {
  max-width: 43rem;
}

.rk-character-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--rk-gold-light);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.rk-character-name {
  display: block;
  margin: 0;
  color: var(--rk-ivory);
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 7vw, 5.9rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.48);
}

.rk-character-nickname {
  display: inline-block;
  margin: 1.3rem 0 0;
  padding: 0.48rem 1.15rem;
  color: var(--rk-ivory);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-red-dark) 8%,
      var(--rk-red) 50%,
      var(--rk-red-dark) 92%,
      transparent
    );
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==========================================================================
   7. ORNAMENTALE TRENNLINIE
   ========================================================================== */

.rk-character-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(100%, 34rem);
  margin: 2rem 0 1.6rem;
}

.rk-character-divider span:not(.rk-character-divider-symbol) {
  display: block;
  flex: 1;
  height: 1px;
}

.rk-character-divider span:first-child {
  background: linear-gradient(90deg, transparent, var(--rk-gold));
}

.rk-character-divider span:last-child {
  background: linear-gradient(90deg, var(--rk-gold), transparent);
}

.rk-character-divider-symbol {
  color: var(--rk-gold-light);
  font-size: 0.72rem;
}

/* ==========================================================================
   8. CHARAKTER-KURZBESCHREIBUNG
   ========================================================================== */

.rk-character-description {
  max-width: 39rem;
  margin: 0;
  color: rgba(238, 231, 215, 0.90);
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-style: italic;
  line-height: 1.72;
}

/* ==========================================================================
   9. ZURÜCK-LINK
   ========================================================================== */

.rk-character-back {
  display: inline-block;
  margin-top: 2.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(185, 154, 82, 0.45);
  color: var(--rk-gold-light);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.rk-character-back:hover {
  border-color: var(--rk-gold-light);
  color: var(--rk-ivory);
  transform: translateX(-3px);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

body:has(.rk-character) .site-footer {
  margin-top: 0;
  border-top: 1px solid var(--rk-border);
  background: #090c0a;
  color: var(--rk-ivory-muted);
}

body:has(.rk-character) .site-footer-publication-name {
  color: var(--rk-ivory);
}

body:has(.rk-character) .site-footer-navigation-link {
  color: var(--rk-ivory-muted);
}

body:has(.rk-character) .site-footer-navigation-link:hover {
  color: var(--rk-gold-light);
}

/* ==========================================================================
   11. TABLET
   ========================================================================== */

@media (max-width: 850px) {
  .rk-character-inner {
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 3rem;
  }

  .rk-character-name {
    font-size: clamp(2.8rem, 7vw, 4.5rem);
  }
}

/* ==========================================================================
   12. SMARTPHONE
   ========================================================================== */

@media (max-width: 640px) {
  .rk-character {
    min-height: auto;
    padding: 3.2rem 1.2rem 4rem;
    background-position: 58% center;
  }

  .rk-character-inner {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .rk-character-portrait {
    width: min(78%, 300px);
    margin-inline: auto;
  }

  .rk-character-content {
    margin-inline: auto;
    text-align: center;
  }

  .rk-character-name {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .rk-character-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .rk-character-description {
    margin-inline: auto;
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   13. REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rk-character-back {
    transition: none;
  }
}

/* ==========================================================================
   RABENKRIEG – ÜBERSICHTSSEITEN
   /player/ und /blog/
   ========================================================================== */


/* ==========================================================================
   1. GESAMTE SEITE
   ========================================================================== */

/*
 * Leaf-Hintergrund auf den Übersichtsseiten durchgehend dunkel halten.
 */

body:has(.rk-player-overview),
body:has(.rk-blog-overview),
body:has(.rk-world-overview) {
  background: var(--rk-black-soft);
  color: var(--rk-ivory);
}


/*
 * Standard-Seitenkopf von Flowershow ausblenden.
 * Wir verwenden stattdessen unseren eigenen Kampagnenkopf.
 */

body:has(.rk-player-overview) .page-header,
body:has(.rk-blog-overview) .page-header,
body:has(.rk-world-overview) .page-header {
  display: none;
}


/*
 * Leaf-Abstände und hellen Standardhintergrund entfernen.
 */

body:has(.rk-player-overview) .layout-inner,
body:has(.rk-player-overview) .layout-inner-center,
body:has(.rk-player-overview) .page-main,
body:has(.rk-player-overview) .page-body,
body:has(.rk-player-overview) .rendered-mdx,

body:has(.rk-blog-overview) .layout-inner,
body:has(.rk-blog-overview) .layout-inner-center,
body:has(.rk-blog-overview) .page-main,
body:has(.rk-blog-overview) .page-body,
body:has(.rk-blog-overview) .rendered-mdx,

body:has(.rk-world-overview) .layout-inner,
body:has(.rk-world-overview) .layout-inner-center,
body:has(.rk-world-overview) .page-main,
body:has(.rk-world-overview) .page-body,
body:has(.rk-world-overview) .rendered-mdx {
  margin-top: 0;
  padding-top: 0;

  background: var(--rk-black-soft);
}


body:has(.rk-player-overview) .rendered-mdx.is-plain,
body:has(.rk-blog-overview) .rendered-mdx.is-plain,
body:has(.rk-world-overview) .rendered-mdx.is-plain {
  margin: 0;
  padding: 0;

  background:
    linear-gradient(
      180deg,
      #101713 0%,
      var(--rk-green-950) 38%,
      var(--rk-black-soft) 100%
    );

  color: var(--rk-ivory);
}


/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */

body:has(.rk-player-overview) .site-navbar,
body:has(.rk-blog-overview) .site-navbar,
body:has(.rk-world-overview) .site-navbar {
  background:
    rgba(13, 18, 15, 0.97);

  border-bottom:
    1px solid rgba(185, 154, 82, 0.2);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


body:has(.rk-player-overview) .site-navbar-site-name,
body:has(.rk-player-overview) .site-navbar-site-title,
body:has(.rk-blog-overview) .site-navbar-site-name,
body:has(.rk-blog-overview) .site-navbar-site-title,
body:has(.rk-world-overview) .site-navbar-site-name,
body:has(.rk-world-overview) .site-navbar-site-title {
  color: var(--rk-ivory);
}


body:has(.rk-player-overview) .site-navbar-link,
body:has(.rk-blog-overview) .site-navbar-link,
body:has(.rk-world-overview) .site-navbar-link {
  color:
    rgba(238, 231, 215, 0.86);
}


body:has(.rk-player-overview) .site-navbar-link:hover,
body:has(.rk-blog-overview) .site-navbar-link:hover,
body:has(.rk-world-overview) .site-navbar-link:hover {
  color: var(--rk-gold-light);
}

body:has(.rk-player-overview) .mobile-nav,
body:has(.rk-blog-overview) .mobile-nav,
body:has(.rk-world-overview) .mobile-nav {
  background: var(--rk-green-950);
  border-color: var(--rk-border);
}

body:has(.rk-player-overview) .mobile-nav-link,
body:has(.rk-blog-overview) .mobile-nav-link,
body:has(.rk-world-overview) .mobile-nav-link {
  color: var(--rk-ivory);
}



/* WORLD-ÜBERSICHT – Leaf-Hellmodus vollständig überschreiben */
body:has(.rk-world-overview) {
  --color-l-background: var(--rk-black-soft);
  --color-l-foreground: var(--rk-ivory);
  --color-l-accent: var(--rk-gold-light);
}

body:has(.rk-world-overview) .page-main,
body:has(.rk-world-overview) .page-body,
body:has(.rk-world-overview) .layout-inner,
body:has(.rk-world-overview) .layout-inner-center,
body:has(.rk-world-overview) .rendered-mdx {
  background-color: var(--rk-black-soft);
}


/* ==========================================================================
   3. ÜBERSICHTS-HEADER
   ========================================================================== */

.rk-overview-header {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 25rem;

  padding:
    clamp(4.5rem, 8vw, 7rem)
    1.5rem
    clamp(3.5rem, 7vw, 5.5rem);

  overflow: hidden;

  text-align: center;

  background:

    linear-gradient(
      180deg,
      rgba(5, 8, 6, 0.55) 0%,
      rgba(11, 17, 13, 0.82) 65%,
      var(--rk-green-950) 100%
    ),

    url("/assets/bg.png");

  background-position: center 42%;
  background-repeat: no-repeat;
  background-size: cover;
}


/*
 * Vignette
 */

.rk-overview-header::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 10%,
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0.52) 100%
    );
}


/*
 * Goldene Abschlusslinie.
 */

.rk-overview-header::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  width:
    min(
      calc(100% - 3rem),
      68rem
    );

  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold-dark),
      var(--rk-gold-light),
      var(--rk-gold-dark),
      transparent
    );
}


.rk-overview-header-inner {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      50rem
    );

  margin-inline: auto;
}


/* ==========================================================================
   4. HEADER-TYPOGRAFIE
   ========================================================================== */

.rk-overview-eyebrow {
  margin:
    0 0 0.9rem;

  color: var(--rk-gold-light);

  font-size:
    clamp(0.7rem, 1.3vw, 0.82rem);

  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}


.rk-overview-header h1 {
  margin: 0;

  color: var(--rk-ivory);

  font-family: var(--font-heading);

  font-size:
    clamp(3rem, 7vw, 5.8rem);

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.035em;

  text-shadow:
    0 5px 25px rgba(0, 0, 0, 0.55);
}


.rk-overview-description {
  max-width: 42rem;

  margin:
    1.4rem auto 0;

  color:
    rgba(238, 231, 215, 0.84);

  font-size:
    clamp(1rem, 1.6vw, 1.1rem);

  line-height: 1.75;

  text-wrap: balance;
}


/* ==========================================================================
   5. ORNAMENTALE TRENNLINIE
   ========================================================================== */

.rk-overview-divider {
  display: flex;

  align-items: center;

  width:
    min(
      100%,
      30rem
    );

  gap: 0.75rem;

  margin:
    2rem auto 0;
}


.rk-overview-divider span:not(
  .rk-overview-divider-symbol
) {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold)
    );
}


.rk-overview-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--rk-gold),
      transparent
    );
}


.rk-overview-divider-symbol {
  color: var(--rk-gold-light);

  font-size: 0.68rem;
}


/* ==========================================================================
   6. INHALTSBEREICH
   ========================================================================== */

.rk-overview-content {
  padding:
    clamp(3.5rem, 7vw, 6rem)
    1.5rem
    2rem;

  background:
    linear-gradient(
      180deg,
      var(--rk-green-950),
      var(--rk-black-soft)
    );
}


/*
 * Flowershow setzt um Listen teilweise eigene Margins.
 */

body:has(.rk-player-overview) .list-component,
body:has(.rk-blog-overview) .list-component,
body:has(.rk-world-overview) .list-component {
  width:
    min(
      100%,
      var(--rk-content-width)
    );

  margin-inline: auto;

  padding: 0;
}


/* ==========================================================================
   7. ALLGEMEINE KARTEN
   ========================================================================== */

body:has(.rk-player-overview) .list-component-item,
body:has(.rk-blog-overview) .list-component-item,
body:has(.rk-world-overview) .list-component-item {
  position: relative;

  overflow: hidden;

  border:
    1px solid var(--rk-border-light);

  border-radius:
    var(--radius-lg, 0.6rem);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.16);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}


/*
 * Goldene obere Linie beim Hover.
 */

body:has(.rk-player-overview) .list-component-item::before,
body:has(.rk-blog-overview) .list-component-item::before,
body:has(.rk-world-overview) .list-component-item::before {
  content: "";

  position: absolute;

  z-index: 3;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold),
      transparent
    );

  transition:
    opacity 180ms ease;
}


body:has(.rk-player-overview) .list-component-item:hover,
body:has(.rk-blog-overview) .list-component-item:hover,
body:has(.rk-world-overview) .list-component-item:hover {
  border-color:
    rgba(185, 154, 82, 0.42);

  background:
    rgba(255, 255, 255, 0.055);

  box-shadow: var(--rk-shadow);

  transform:
    translateY(-4px);
}


body:has(.rk-player-overview)
.list-component-item:hover::before,

body:has(.rk-blog-overview)
.list-component-item:hover::before,

body:has(.rk-world-overview)
.list-component-item:hover::before {
  opacity: 1;
}


/* ==========================================================================
   8. KARTENBILDER
   ========================================================================== */

body:has(.rk-player-overview) .list-component-item-media,
body:has(.rk-blog-overview) .list-component-item-media,
body:has(.rk-world-overview) .list-component-item-media {
  margin: 0;

  overflow: hidden;

  background: var(--rk-black);
}


/*
 * Helden: Portraitformat
 */

body:has(.rk-player-overview)
.list-component-item-media {
  aspect-ratio: 4 / 5;
}


/*
 * Chronik: klassisches Blog-/Titelbild
 */

body:has(.rk-blog-overview)
.list-component-item-media,
body:has(.rk-world-overview)
.list-component-item-media {
  aspect-ratio: 4 / 3;
}


body:has(.rk-player-overview)
.list-component-item-media-img,

body:has(.rk-blog-overview)
.list-component-item-media-img,
body:has(.rk-world-overview)
.list-component-item-media-img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  object-fit: cover;

  filter:
    saturate(0.88)
    contrast(1.04);

  transition:
    transform 450ms ease,
    filter 250ms ease;
}


body:has(.rk-player-overview)
.list-component-item:hover
.list-component-item-media-img,

body:has(.rk-blog-overview)
.list-component-item:hover
.list-component-item-media-img,

body:has(.rk-world-overview)
.list-component-item:hover
.list-component-item-media-img {
  filter:
    saturate(1)
    contrast(1.06);

  transform:
    scale(1.035);
}


/* ==========================================================================
   9. KARTENINHALT
   ========================================================================== */

body:has(.rk-player-overview)
.list-component-item-content,

body:has(.rk-blog-overview)
.list-component-item-content,

body:has(.rk-world-overview)
.list-component-item-content {
  padding:
    1.3rem
    1.4rem
    1.5rem;
}


body:has(.rk-player-overview)
.list-component-item-eyebrow,

body:has(.rk-blog-overview)
.list-component-item-eyebrow {
  margin:
    0 0 0.5rem;

  color: var(--rk-gold);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


body:has(.rk-player-overview)
.list-component-item-headline,

body:has(.rk-blog-overview)
.list-component-item-headline,

body:has(.rk-world-overview)
.list-component-item-headline {
  color: var(--rk-ivory);

  font-family: var(--font-heading);

  font-size:
    clamp(1.25rem, 2vw, 1.55rem);

  line-height: 1.25;
}


body:has(.rk-player-overview)
.list-component-item-summary,

body:has(.rk-blog-overview)
.list-component-item-summary,

body:has(.rk-world-overview)
.list-component-item-summary {
  color: var(--rk-ivory-muted);

  font-size: 0.92rem;

  line-height: 1.65;
}


body:has(.rk-player-overview)
.list-component-item-footnote,

body:has(.rk-blog-overview)
.list-component-item-footnote {
  color:
    rgba(212, 203, 185, 0.62);
}


/* ==========================================================================
   10. PAGINATION
   ========================================================================== */

body:has(.rk-player-overview)
.list-component-pagination,

body:has(.rk-blog-overview)
.list-component-pagination {
  margin:
    3rem auto 0;

  color: var(--rk-ivory-muted);
}


body:has(.rk-player-overview)
.list-component-pagination a,

body:has(.rk-blog-overview)
.list-component-pagination a {
  border-color:
    var(--rk-border);

  color: var(--rk-gold-light);

  background:
    rgba(255, 255, 255, 0.025);
}


body:has(.rk-player-overview)
.list-component-pagination a:hover,

body:has(.rk-blog-overview)
.list-component-pagination a:hover {
  border-color: var(--rk-gold);

  color: var(--rk-ivory);

  background:
    rgba(185, 154, 82, 0.1);
}


/* ==========================================================================
   11. ZURÜCK ZUR STARTSEITE
   ========================================================================== */

.rk-overview-back {
  display: flex;

  justify-content: center;

  padding:
    2rem
    1.5rem
    clamp(4rem, 8vw, 6rem);

  background: var(--rk-black-soft);
}


.rk-overview-back a {
  display: inline-block;

  padding-bottom: 0.2rem;

  border-bottom:
    1px solid rgba(185, 154, 82, 0.45);

  color: var(--rk-gold-light);

  font-size: 0.88rem;
  font-weight: 600;

  text-decoration: none;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}


.rk-overview-back a:hover {
  border-color: var(--rk-gold-light);

  color: var(--rk-ivory);

  transform:
    translateX(-3px);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

body:has(.rk-player-overview) .site-footer,
body:has(.rk-blog-overview) .site-footer,
body:has(.rk-world-overview) .site-footer {
  margin-top: 0;

  border-top:
    1px solid var(--rk-border);

  background: #090c0a;

  color: var(--rk-ivory-muted);
}


body:has(.rk-player-overview)
.site-footer-publication-name,

body:has(.rk-blog-overview)
.site-footer-publication-name,

body:has(.rk-world-overview)
.site-footer-publication-name {
  color: var(--rk-ivory);
}


body:has(.rk-player-overview)
.site-footer-navigation-link,

body:has(.rk-blog-overview)
.site-footer-navigation-link,

body:has(.rk-world-overview)
.site-footer-navigation-link {
  color: var(--rk-ivory-muted);
}


body:has(.rk-player-overview)
.site-footer-navigation-link:hover,

body:has(.rk-blog-overview)
.site-footer-navigation-link:hover,

body:has(.rk-world-overview)
.site-footer-navigation-link:hover {
  color: var(--rk-gold-light);
}


/* ==========================================================================
   13. TABLET
   ========================================================================== */

@media (max-width: 900px) {

  .rk-overview-header {
    min-height: 22rem;
  }

}


/* ==========================================================================
   14. SMARTPHONE
   ========================================================================== */

@media (max-width: 640px) {

  .rk-overview-header {
    min-height: 20rem;

    padding:
      3.8rem
      1.1rem
      3.5rem;

    background-position:
      center center;
  }


  .rk-overview-header h1 {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }


  .rk-overview-description {
    font-size: 0.96rem;

    line-height: 1.65;
  }


  .rk-overview-content {
    padding:
      3rem
      1rem
      1rem;
  }


  /*
   * Portraits auf kleinen Geräten etwas kompakter.
   */

  body:has(.rk-player-overview)
  .list-component-item-media {
    aspect-ratio: 4 / 4.5;
  }

}


/* ==========================================================================
   15. REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  body:has(.rk-player-overview) .list-component-item,
  body:has(.rk-blog-overview) .list-component-item,
  body:has(.rk-player-overview) .list-component-item-media-img,
  body:has(.rk-blog-overview) .list-component-item-media-img,
  .rk-overview-back a {
    transition: none;
  }

}

/* ==========================================================================
   RABENKRIEG – SPIELBERICHTE
   Robuste Variante:
   Die Seite wird anhand unserer eigenen .rk-session-meta erkannt.
   ========================================================================== */


/* ==========================================================================
   1. SPIELBERICHT – GRUNDFARBEN
   ========================================================================== */

html:has(.rk-session-meta),
body:has(.rk-session-meta) {
  background: var(--rk-black-soft);
  color: var(--rk-ivory-muted);
}

/* Sämtliche Flowershow-Layoutcontainer dunkel halten. */
body:has(.rk-session-meta) main,
body:has(.rk-session-meta) .page-main,
body:has(.rk-session-meta) .page-body,
body:has(.rk-session-meta) .layout-inner,
body:has(.rk-session-meta) .layout-inner-center,
body:has(.rk-session-meta) .rendered-mdx,
body:has(.rk-session-meta) .post-page {
  background:
    linear-gradient(
      180deg,
      var(--rk-green-950) 0%,
      var(--rk-black-soft) 32rem
    );

  color: var(--rk-ivory-muted);
}

/* Native Post-Variablen zusätzlich überschreiben, falls vorhanden. */
body:has(.rk-session-meta) .post-page {
  --post-max-width: 52rem;
  --post-wide-max-width: 70rem;
  --post-body-size: 1.05rem;
  --post-hero-max-height: 34rem;
  --post-hero-radius: 0.5rem;
  --post-meta-color: var(--rk-ivory-muted);
  --post-eyebrow-color: var(--rk-gold);
  --post-rule-color: var(--rk-border);
  --color-background: var(--rk-black-soft);
  --color-foreground: var(--rk-ivory);
  --color-accent: var(--rk-gold-light);
}


/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */

body:has(.rk-session-meta) .site-navbar {
  background: rgba(13, 18, 15, 0.97);
  border-bottom: 1px solid rgba(185, 154, 82, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(.rk-session-meta) .site-navbar-site-name,
body:has(.rk-session-meta) .site-navbar-site-title {
  color: var(--rk-ivory);
}

body:has(.rk-session-meta) .site-navbar-link {
  color: rgba(238, 231, 215, 0.86);
}

body:has(.rk-session-meta) .site-navbar-link:hover {
  color: var(--rk-gold-light);
}


/* ==========================================================================
   3. SEITENKOPF
   Funktioniert mit normalem Page-Header und nativem Post-Header.
   ========================================================================== */

body:has(.rk-session-meta) .page-header,
body:has(.rk-session-meta) .post-header {
  background: transparent;
  color: var(--rk-ivory);
  text-align: center;
}

body:has(.rk-session-meta) .post-header {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: 1rem;
}

body:has(.rk-session-meta) .page-header-title,
body:has(.rk-session-meta) .post-header .page-header-title {
  max-width: 52rem;
  margin-inline: auto;
  color: var(--rk-ivory);
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

body:has(.rk-session-meta) .page-header-description,
body:has(.rk-session-meta) .post-dek {
  max-width: 42rem;
  margin-inline: auto;
  color: rgba(238, 231, 215, 0.78);
  font-size: clamp(1rem, 1.7vw, 1.13rem);
  line-height: 1.7;
}

body:has(.rk-session-meta) .page-header-date,
body:has(.rk-session-meta) .post-byline {
  color: var(--rk-gold);
}

body:has(.rk-session-meta) .post-eyebrow {
  color: var(--rk-gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ==========================================================================
   4. TITELBILD
   ========================================================================== */

body:has(.rk-session-meta) .post-hero {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rk-border);
  border-radius: 0.5rem;
  background: var(--rk-black);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
}

body:has(.rk-session-meta) .post-hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold-light),
      transparent
    );
}

body:has(.rk-session-meta) .post-hero img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  filter: saturate(0.88) contrast(1.04);
}

body:has(.rk-session-meta) .post-hero figcaption {
  padding: 0.7rem 1rem;
  background: var(--rk-green-950);
  color: var(--rk-ivory-muted);
  text-align: center;
}


/* ==========================================================================
   5. ARTIKELTEXT
   ========================================================================== */

body:has(.rk-session-meta) .rendered-mdx {
  color: var(--rk-ivory-muted);
}

body:has(.rk-session-meta) .rendered-mdx p,
body:has(.rk-session-meta) .rendered-mdx li {
  color: var(--rk-ivory-muted);
  line-height: 1.8;
}

body:has(.rk-session-meta) .rendered-mdx h1,
body:has(.rk-session-meta) .rendered-mdx h2,
body:has(.rk-session-meta) .rendered-mdx h3,
body:has(.rk-session-meta) .rendered-mdx h4 {
  color: var(--rk-ivory);
  font-family: var(--font-heading);
}

body:has(.rk-session-meta) .rendered-mdx h2 {
  margin-top: 3.5rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
}

body:has(.rk-session-meta) .rendered-mdx h3 {
  margin-top: 2.5rem;
  color: var(--rk-gold-light);
}

body:has(.rk-session-meta) .rendered-mdx strong {
  color: var(--rk-ivory);
}

body:has(.rk-session-meta) .rendered-mdx a {
  color: var(--rk-gold-light);
  text-decoration-color: rgba(185, 154, 82, 0.4);
}

body:has(.rk-session-meta) .rendered-mdx a:hover {
  color: var(--rk-ivory);
}

body:has(.rk-session-meta) .rendered-mdx li::marker {
  color: var(--rk-gold);
}

body:has(.rk-session-meta) .rendered-mdx hr {
  border-color: var(--rk-border);
}


/* ==========================================================================
   6. BLOCKQUOTES
   ========================================================================== */

body:has(.rk-session-meta) .rendered-mdx blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 2px solid var(--rk-gold);
  background: rgba(185, 154, 82, 0.06);
  color: var(--rk-ivory-soft);
}

body:has(.rk-session-meta) .rendered-mdx blockquote p {
  color: var(--rk-ivory-soft);
}


/* ==========================================================================
   7. SITZUNGS-METADATEN
   ========================================================================== */

.rk-session-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: 1px solid var(--rk-border);
  border-bottom: 1px solid var(--rk-border);
  background: rgba(255, 255, 255, 0.025);
}

.rk-session-meta > div {
  padding: 1.15rem 0.8rem;
  border-right: 1px solid var(--rk-border);
  text-align: center;
}

.rk-session-meta > div:last-child {
  border-right: 0;
}

.rk-session-meta span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--rk-gold);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.rk-session-meta strong {
  display: block;
  color: var(--rk-ivory);
  font-family: var(--font-heading);
  font-size: 0.94rem;
}


/* ==========================================================================
   8. ORNAMENTALE TRENNLINIE
   ========================================================================== */

.rk-session-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(100%, 32rem);
  margin: 2.5rem auto;
}

.rk-session-divider span:first-child,
.rk-session-divider span:last-child {
  flex: 1;
  height: 1px;
}

.rk-session-divider span:first-child {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold)
    );
}

.rk-session-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--rk-gold),
      transparent
    );
}

.rk-session-divider span:nth-child(2) {
  color: var(--rk-gold-light);
  font-size: 0.7rem;
}


/* ==========================================================================
   9. SITZUNGSENDE
   ========================================================================== */

.rk-session-end {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rk-border);
  text-align: center;
}

.rk-session-end p {
  color: var(--rk-gold);
  font-family: var(--font-heading);
  font-style: italic;
}

.rk-session-end a {
  display: inline-block;
  margin-top: 0.7rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(185, 154, 82, 0.45);
  color: var(--rk-gold-light);
  text-decoration: none;
}

.rk-session-end a:hover {
  border-color: var(--rk-gold-light);
  color: var(--rk-ivory);
}


/* ==========================================================================
   10. POST-NAVIGATION / READ MORE
   ========================================================================== */

body:has(.rk-session-meta) .post-footer,
body:has(.rk-session-meta) .post-nav,
body:has(.rk-session-meta) .post-read-more {
  background: transparent;
  color: var(--rk-ivory-muted);
  border-color: var(--rk-border);
}

body:has(.rk-session-meta) .post-nav a {
  color: var(--rk-ivory);
}

body:has(.rk-session-meta) .post-nav a:hover {
  color: var(--rk-gold-light);
}

body:has(.rk-session-meta) .post-read-more h2 {
  color: var(--rk-ivory);
  font-family: var(--font-heading);
}

body:has(.rk-session-meta) .post-read-more .list-component-item {
  border: 1px solid var(--rk-border-light);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );
}

body:has(.rk-session-meta) .post-read-more .list-component-item-headline {
  color: var(--rk-ivory);
}

body:has(.rk-session-meta) .post-read-more .list-component-item-summary {
  color: var(--rk-ivory-muted);
}

body:has(.rk-session-meta) .post-read-more .list-component-item-eyebrow {
  color: var(--rk-gold);
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

body:has(.rk-session-meta) .site-footer {
  margin-top: 0;
  border-top: 1px solid var(--rk-border);
  background: #090c0a;
  color: var(--rk-ivory-muted);
}

body:has(.rk-session-meta) .site-footer-publication-name {
  color: var(--rk-ivory);
}

body:has(.rk-session-meta) .site-footer-navigation-link {
  color: var(--rk-ivory-muted);
}

body:has(.rk-session-meta) .site-footer-navigation-link:hover {
  color: var(--rk-gold-light);
}


/* ==========================================================================
   12. TABLET
   ========================================================================== */

@media (max-width: 700px) {
  .rk-session-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rk-session-meta > div:nth-child(2) {
    border-right: 0;
  }

  .rk-session-meta > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--rk-border);
  }
}


/* ==========================================================================
   13. SMARTPHONE
   ========================================================================== */

@media (max-width: 430px) {
  .rk-session-meta {
    grid-template-columns: 1fr;
  }

  .rk-session-meta > div {
    border-right: 0;
    border-bottom: 1px solid var(--rk-border);
  }

  .rk-session-meta > div:last-child {
    border-bottom: 0;
  }

  body:has(.rk-session-meta) .page-header-title {
    font-size: clamp(2.5rem, 13vw, 3.5rem);
  }
}


/* ==========================================================================
   RABENKRIEG – WORLD-EINZELSEITEN
   /world/*.md mit .rk-world
   ========================================================================== */


/* ==========================================================================
   1. SEITENGRUNDLAGE
   ========================================================================== */

html:has(.rk-world),
body:has(.rk-world) {
  background: var(--rk-black-soft);
  color: var(--rk-ivory-muted);
}

/* Standard-Seitenkopf von Leaf ausblenden. */
body:has(.rk-world) .page-header {
  display: none;
}

/* Helle Leaf-Flächen und Standardabstände entfernen. */
body:has(.rk-world) main,
body:has(.rk-world) .page-main,
body:has(.rk-world) .page-body,
body:has(.rk-world) .layout-inner,
body:has(.rk-world) .layout-inner-center,
body:has(.rk-world) .rendered-mdx,
body:has(.rk-world) .rendered-mdx.is-plain {
  margin-top: 0;
  padding-top: 0;
  background: var(--rk-black-soft);
  color: var(--rk-ivory-muted);
}


/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */

body:has(.rk-world) .site-navbar {
  background: rgba(13, 18, 15, 0.97);
  border-bottom: 1px solid rgba(185, 154, 82, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(.rk-world) .site-navbar-site-name,
body:has(.rk-world) .site-navbar-site-title {
  color: var(--rk-ivory);
}

body:has(.rk-world) .site-navbar-link {
  color: rgba(238, 231, 215, 0.86);
}

body:has(.rk-world) .site-navbar-link:hover {
  color: var(--rk-gold-light);
}

body:has(.rk-world) .mobile-nav {
  background: var(--rk-green-950);
  border-color: var(--rk-border);
}

body:has(.rk-world) .mobile-nav-link {
  color: var(--rk-ivory);
}


/* ==========================================================================
   3. WORLD-SEITE
   ========================================================================== */

.rk-world {
  position: relative;
  min-height: calc(100svh - var(--navbar-height));
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 1.5rem clamp(5rem, 9vw, 8rem);
  background:
    linear-gradient(
      180deg,
      rgba(10, 15, 12, 0.84) 0%,
      rgba(16, 21, 17, 0.94) 22rem,
      var(--rk-black-soft) 100%
    ),
    url("/assets/bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Dezente Vignette wie auf den übrigen Rabenkrieg-Seiten. */
.rk-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 12%,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(0, 0, 0, 0.08) 42%,
      rgba(0, 0, 0, 0.34) 100%
    );
}

/* Goldener Abschlussakzent am oberen Inhaltsbereich. */
.rk-world::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 3rem), 70rem);
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold-dark),
      var(--rk-gold-light),
      var(--rk-gold-dark),
      transparent
    );
}

.rk-world-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 70rem);
  margin-inline: auto;
  text-align: center;
}


/* ==========================================================================
   4. TYPOGRAFIE
   ========================================================================== */

.rk-world-eyebrow {
  margin: 0 0 0.9rem;
  color: var(--rk-gold-light);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rk-world-title {
  max-width: 58rem;
  margin: 0 auto;
  color: var(--rk-ivory);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 5px 28px rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   5. ORNAMENTALE TRENNLINIE
   ========================================================================== */

.rk-world-divider {
  display: flex;
  align-items: center;
  width: min(100%, 32rem);
  gap: 0.8rem;
  margin: 2rem auto clamp(2.5rem, 5vw, 4rem);
}

.rk-world-divider span:first-child,
.rk-world-divider span:last-child {
  flex: 1;
  height: 1px;
}

.rk-world-divider span:first-child {
  background: linear-gradient(90deg, transparent, var(--rk-gold));
}

.rk-world-divider span:last-child {
  background: linear-gradient(90deg, var(--rk-gold), transparent);
}

.rk-world-divider span:nth-child(2) {
  color: var(--rk-gold-light);
  font-size: 0.7rem;
}


/* ==========================================================================
   6. WORLD-BILD
   ========================================================================== */

.rk-world-image {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding: 0.35rem;
  overflow: hidden;
  border: 1px solid var(--rk-gold-dark);
  border-radius: var(--radius-lg, 0.6rem);
  background:
    linear-gradient(
      145deg,
      rgba(209, 182, 108, 0.8),
      rgba(129, 104, 47, 0.35)
    );
  box-shadow: var(--rk-shadow);
}

.rk-world-image::after {
  content: "";
  position: absolute;
  inset: 0.35rem;
  pointer-events: none;
  border: 1px solid rgba(238, 231, 215, 0.08);
  border-radius: calc(var(--radius-lg, 0.6rem) - 0.2rem);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.16);
}

.rk-world-image p {
  margin: 0;
}

.rk-world-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius-lg, 0.6rem) - 0.25rem);
  background: var(--rk-black);
  filter: saturate(0.88) contrast(1.04);
}


/* ==========================================================================
   7. BESCHREIBUNG
   ========================================================================== */

.rk-world-description {
  max-width: 48rem;
  margin: clamp(2.2rem, 5vw, 3.5rem) auto 0;
  color: var(--rk-ivory-soft);
  font-size: clamp(1.03rem, 1.7vw, 1.16rem);
  line-height: 1.82;
  text-wrap: balance;
}


/* ==========================================================================
   8. ZURÜCK-LINK
   ========================================================================== */

.rk-world-back {
  display: inline-block;
  margin-top: 2.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(185, 154, 82, 0.45);
  color: var(--rk-gold-light);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.rk-world-back:hover {
  border-color: var(--rk-gold-light);
  color: var(--rk-ivory);
  transform: translateX(-3px);
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

body:has(.rk-world) .site-footer {
  margin-top: 0;
  border-top: 1px solid var(--rk-border);
  background: #090c0a;
  color: var(--rk-ivory-muted);
}

body:has(.rk-world) .site-footer-publication-name {
  color: var(--rk-ivory);
}

body:has(.rk-world) .site-footer-navigation-link {
  color: var(--rk-ivory-muted);
}

body:has(.rk-world) .site-footer-navigation-link:hover {
  color: var(--rk-gold-light);
}


/* ==========================================================================
   10. TABLET
   ========================================================================== */

@media (max-width: 800px) {
  .rk-world {
    padding: 4rem 1.2rem 5rem;
  }

  .rk-world-title {
    font-size: clamp(2.8rem, 10vw, 4.4rem);
  }
}


/* ==========================================================================
   11. SMARTPHONE
   ========================================================================== */

@media (max-width: 520px) {
  .rk-world {
    padding: 3.5rem 1rem 4.5rem;
    background-position: center top;
  }

  .rk-world-title {
    font-size: clamp(2.5rem, 13vw, 3.6rem);
  }

  .rk-world-divider {
    margin-top: 1.6rem;
    margin-bottom: 2rem;
  }

  .rk-world-image {
    padding: 0.25rem;
  }

  .rk-world-image::after {
    inset: 0.25rem;
  }

  .rk-world-description {
    margin-top: 1.8rem;
    font-size: 0.98rem;
    line-height: 1.72;
    text-wrap: pretty;
  }
}


/* ==========================================================================
   12. REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rk-world-back {
    transition: none;
  }
}

/* ==========================================================================
   WORLD – TYPEN
   NSC / ORT / SONSTIGES
   ========================================================================== */


/* ==========================================================================
   1. NSC
   Portraitdarstellung ähnlich Charakterseite
   ========================================================================== */

.rk-world-nsc {
  display: flex;
  align-items: center;
}


.rk-world-nsc-inner {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(220px, 340px)
    minmax(0, 1fr);

  align-items: center;

  gap:
    clamp(3rem, 7vw, 6rem);

  width:
    min(100%, 70rem);

  margin-inline: auto;
}


/* Portrait */

.rk-world-nsc-portrait {
  position: relative;
}


.rk-world-nsc-portrait::before {
  content: "";

  position: absolute;

  inset:
    1rem
    -0.8rem
    -1rem
    0.8rem;

  border:
    1px solid rgba(185, 154, 82, 0.18);

  background:
    rgba(0, 0, 0, 0.2);

  transform:
    rotate(2deg);
}


.rk-world-nsc-image-frame {
  position: relative;

  padding: 0.4rem;

  border:
    1px solid var(--rk-gold-dark);

  background:
    linear-gradient(
      145deg,
      #c6a65c,
      #6e5728 35%,
      #d2b96d 65%,
      #715a2b
    );

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.48);
}


.rk-world-nsc-image-frame p {
  margin: 0;
}


.rk-world-nsc-image-frame img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  background:
    var(--rk-black);

  filter:
    saturate(0.88)
    contrast(1.04);
}


/* Text rechts */

.rk-world-nsc-content {
  max-width: 42rem;

  text-align: left;
}


.rk-world-nsc-content .rk-world-title {
  margin-left: 0;
  margin-right: 0;
}


.rk-world-divider-left {
  margin-left: 0;
  margin-right: 0;
}


.rk-world-description-left {
  margin-left: 0;
  margin-right: 0;

  text-align: left;

  text-wrap: pretty;
}


/* ==========================================================================
   2. ORTE UND SONSTIGES
   Kompakteres Bild
   ========================================================================== */

.rk-world-compact .rk-world-inner {
  width:
    min(100%, 58rem);
}


/*
 * Vorher war das Bild praktisch bis 70rem breit.
 * Jetzt maximal 34rem.
 */

.rk-world-image-compact {
  width:
    min(100%, 34rem);

  margin-left: auto;
  margin-right: auto;
}


.rk-world-image-compact img {
  aspect-ratio: 16 / 9;

  object-fit: cover;
}


/*
 * Beschreibung ebenfalls etwas kompakter,
 * damit Bild und Text zusammengehören.
 */

.rk-world-compact .rk-world-description {
  max-width: 42rem;
}


/* ==========================================================================
   3. TABLET
   ========================================================================== */

@media (max-width: 800px) {

  .rk-world-nsc-inner {
    grid-template-columns:
      minmax(190px, 260px)
      minmax(0, 1fr);

    gap: 3rem;
  }

}


/* ==========================================================================
   4. SMARTPHONE
   ========================================================================== */

@media (max-width: 640px) {

  .rk-world-nsc {
    display: block;
  }


  .rk-world-nsc-inner {
    grid-template-columns: 1fr;

    gap: 2.5rem;

    text-align: center;
  }


  .rk-world-nsc-portrait {
    width:
      min(76%, 290px);

    margin-inline: auto;
  }


  .rk-world-nsc-content {
    margin-inline: auto;

    text-align: center;
  }


  .rk-world-nsc-content .rk-world-title {
    margin-inline: auto;
  }


  .rk-world-divider-left {
    margin-left: auto;
    margin-right: auto;
  }


  .rk-world-description-left {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }


  .rk-world-image-compact {
    width: min(100%, 30rem);
  }

}

/* ==========================================================================
   RABENKRIEG – ABOUT / RECHTLICHE INFORMATIONEN
   ========================================================================== */

html:has(.rk-about),
body:has(.rk-about) {
  background: var(--rk-black-soft);
  color: var(--rk-ivory-muted);
}

body:has(.rk-about) .page-header {
  display: none;
}

body:has(.rk-about) main,
body:has(.rk-about) .page-main,
body:has(.rk-about) .page-body,
body:has(.rk-about) .layout-inner,
body:has(.rk-about) .layout-inner-center,
body:has(.rk-about) .rendered-mdx,
body:has(.rk-about) .rendered-mdx.is-plain {
  margin-top: 0;
  padding-top: 0;
  background: var(--rk-black-soft);
  color: var(--rk-ivory-muted);
}


/* Navigation */

body:has(.rk-about) .site-navbar {
  background: rgba(13, 18, 15, 0.97);
  border-bottom: 1px solid rgba(185, 154, 82, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(.rk-about) .site-navbar-site-name,
body:has(.rk-about) .site-navbar-site-title {
  color: var(--rk-ivory);
}

body:has(.rk-about) .site-navbar-link {
  color: rgba(238, 231, 215, 0.86);
}

body:has(.rk-about) .site-navbar-link:hover {
  color: var(--rk-gold-light);
}


/* Seite */

.rk-about {
  min-height: calc(100svh - var(--navbar-height));

  padding-bottom:
    clamp(5rem, 9vw, 8rem);

  background:
    linear-gradient(
      180deg,
      var(--rk-green-950) 0%,
      var(--rk-black-soft) 30rem
    );
}


/* Kopf */

.rk-about-header {
  width: min(calc(100% - 3rem), 52rem);

  margin-inline: auto;

  padding:
    clamp(5rem, 9vw, 7rem)
    0
    clamp(3rem, 6vw, 4rem);

  text-align: center;
}

.rk-about-eyebrow {
  margin: 0 0 0.8rem;

  color: var(--rk-gold-light);

  font-size: 0.74rem;
  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.rk-about-header h1 {
  margin: 0;

  color: var(--rk-ivory);

  font-family: var(--font-heading);

  font-size:
    clamp(3rem, 7vw, 5.5rem);

  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.035em;
}

.rk-about-intro {
  max-width: 40rem;

  margin:
    1.3rem auto 0;

  color: var(--rk-ivory-muted);

  font-size: 1.05rem;

  line-height: 1.7;
}


/* Ornament */

.rk-about-divider {
  display: flex;

  align-items: center;

  width: min(100%, 30rem);

  gap: 0.8rem;

  margin:
    2rem auto 0;
}

.rk-about-divider span:first-child,
.rk-about-divider span:last-child {
  flex: 1;

  height: 1px;
}

.rk-about-divider span:first-child {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rk-gold)
    );
}

.rk-about-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--rk-gold),
      transparent
    );
}

.rk-about-divider span:nth-child(2) {
  color: var(--rk-gold-light);

  font-size: 0.7rem;
}


/* Inhalt */

.rk-about-content {
  width: min(calc(100% - 3rem), 48rem);

  margin-inline: auto;
}

.rk-about-content h2 {
  margin:
    3.2rem 0 1rem;

  color: var(--rk-ivory);

  font-family: var(--font-heading);

  font-size:
    clamp(1.65rem, 3vw, 2.15rem);
}

.rk-about-content p,
.rk-about-content li {
  color: var(--rk-ivory-muted);

  line-height: 1.8;
}

.rk-about-content strong {
  color: var(--rk-ivory);
}

.rk-about-content a {
  color: var(--rk-gold-light);
}


/* Zurück */

.rk-about-back {
  margin-top: 4rem;

  padding-top: 2rem;

  border-top:
    1px solid var(--rk-border);

  text-align: center;
}

.rk-about-back a {
  color: var(--rk-gold-light);

  text-decoration: none;

  border-bottom:
    1px solid rgba(185, 154, 82, 0.45);
}


/* Footer */

body:has(.rk-about) .site-footer {
  margin-top: 0;

  border-top:
    1px solid var(--rk-border);

  background: #090c0a;

  color: var(--rk-ivory-muted);
}

body:has(.rk-about) .site-footer-publication-name {
  color: var(--rk-ivory);
}

body:has(.rk-about) .site-footer-navigation-link {
  color: var(--rk-ivory-muted);
}