/* ============================================================
   MIDGARD 5 — DESIGN TOKENS · v3 · PERGAMENT & HERALDIK
   ------------------------------------------------------------
   Pergament als Grundfläche der Karten, Sepia-Tinte als Text,
   klassische heraldische Tinkturen als lebendige Akzente:
     Gules (Rot) · Azure (Blau) · Or (Gold) · Vert (Grün) · Sable
   ============================================================ */
:root {
  /* ---- Heraldische Tinkturen (lebendig) ---- */
  --h-gules:        #a3231d;   /* Rot   */
  --h-gules-deep:   #7d160f;
  --h-gules-bright: #c8392f;
  --h-azure:        #1f4e79;   /* Blau  */
  --h-azure-deep:   #14355a;
  --h-azure-bright: #2f6ba3;
  --h-or:           #c8962a;   /* Gold  */
  --h-or-deep:      #9a6f17;
  --h-or-bright:    #e6b94e;
  --h-vert:         #3f6e3a;   /* Grün  */
  --h-vert-deep:    #2c4f29;
  --h-vert-bright:  #57904f;
  --h-sable:        #1c1812;   /* Schwarz */
  --h-purpure:      #6d2c63;   /* Purpur (selten, für Spezialakzente) */

  /* ---- Pergament (Grundflächen) ---- */
  --c-parchment:      #f2e7cd;
  --c-parchment-hi:   #f8f0dc;   /* Lichtkante */
  --c-parchment-deep: #e6d6b2;
  --c-parchment-edge: #cdb88c;
  --c-parchment-shade:#d8c39a;   /* Vertiefungen, Flecken */

  /* ---- Tinte (Text auf Pergament) ---- */
  --c-ink:            #2a2014;
  --c-ink-soft:       #5a4a31;
  --c-ink-faded:      #8a7551;

  /* ---- Bühne (Hintergrundbild bleibt; nur noch für Rahmen/Nav) ---- */
  --c-stage:          #16130e;
  --c-stage-2:        #1f1b14;
  --c-stage-edge:     #322a1e;
  --c-stage-edge-hi:  #4a3c28;
  --c-on-stage:       #f2e7cd;    /* Text direkt auf dem Bild (Nav/Hero) */
  --c-on-stage-soft:  #d8c39a;
  --c-on-stage-faded: #b09a72;

  /* ---- Alias-Layer: alte Token-Namen → heraldische Werte ----
     Damit bestehende Komponenten ohne Bruch weiterlaufen.        */
  --c-gold:        var(--h-or);
  --c-gold-deep:   var(--h-or-deep);
  --c-gold-bright: var(--h-or-bright);
  --c-gold-glow:   rgba(200,150,42,.18);
  --c-blood:       var(--h-gules);
  --c-blood-on-dark: var(--h-gules-bright);
  --c-azure:       var(--h-azure);
  --c-forest:      var(--h-vert);

  /* ---- Typografie ---- */
  --f-display: "Cinzel", serif;
  --f-heading: "Cormorant Garamond", serif;
  --f-body:    "EB Garamond", Georgia, serif;

  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---- Schatten ---- */
  --shadow-card:  0 2px 6px rgba(40,28,12,.28), 0 20px 50px rgba(20,12,4,.5);
  --shadow-glow:  0 0 32px rgba(200,150,42,.10);
  --shadow-inset-parchment: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 40px rgba(180,150,100,.12);
}


/* ============================================================
   ZOOM-ANPASSUNG — QHD (2560 px) bei 150 % → ~1707 CSS-px
   Faustregel: ab ~1500 CSS-px Breite hochskalieren
   ============================================================ */
/* Skalierung läuft AUSSCHLIESSLICH über --zoom (gesetzt von app.js,
   abhängig von der Viewportbreite). Keine zusätzliche --base-size-
   Staffelung mehr — sonst multipliziert sich beides. */
html {
  --base-size: 18px;
  --zoom: 1;
  font-size: calc(var(--base-size) * var(--zoom));
  scroll-behavior: smooth;
}

/* ---- Zoom-Regler ---- */
.zoomctl {
  display: flex;
  align-items: center;
  gap: .15rem;
  border: 1px solid rgba(74,60,40,.6);
  border-radius: 999px;
  padding: .15rem .3rem;
  background: rgba(18,14,9,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.zoomctl button {
  font-family: var(--f-heading);
  font-size: .85rem;
  font-weight: 700;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--c-on-stage-faded);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.zoomctl button:hover { color: var(--c-gold-bright); background: rgba(198,154,69,.08); }
.zoomctl__val {
  font-family: var(--f-heading);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--c-on-stage-faded);
  min-width: 3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.zoomctl__val:hover { color: var(--c-on-stage-soft); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--f-body);
  line-height: 1.68;
  color: var(--c-on-stage);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   HINTERGRUNDBILD — vollflächig, fixiert
   ============================================================ */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Fallback-Grund (sichtbar, falls das Bild fehlt) ZUERST,
     darüber das eigentliche Hintergrundbild. Pfad relativ zur
     CSS-Datei in css/ → daher ../ */
  background-color: var(--c-stage);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 18%, rgba(60, 48, 30, 0.5), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(20, 15, 9, 0.92), transparent 70%),
    url("/media/shared/bg-midgard.webp");
  background-size: cover, cover, cover;
  background-position: center, center, center 28%;
  background-repeat: no-repeat;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Vorhang unten — dezenter, da Pergament-Karten darüber liegen */
    linear-gradient(
      to top,
      rgba(14, 10, 5, 0.72)  0%,
      rgba(14, 10, 5, 0.52)  22%,
      rgba(14, 10, 5, 0.25)  48%,
      rgba(14, 10, 5, 0.06)  68%,
      transparent            80%
    ),
    /* Abdunklung oben — Nav-Zone */
    linear-gradient(
      to bottom,
      rgba(14, 10, 5, 0.55)  0%,
      rgba(14, 10, 5, 0.15)  18%,
      transparent            35%
    ),
    /* Vignette seitlich */
    radial-gradient(
      ellipse 130% 100% at 50% 50%,
      transparent 35%,
      rgba(8, 5, 2, 0.50) 100%
    );
}

/* ============================================================
   SEITEN-CONTAINER
   ============================================================ */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 3rem 0;
}

.topnav__brand {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.topnav__brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-gold-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: .55rem;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.topnav__brand-text {
  font-family: var(--f-display);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-on-stage-faded);
}

.topnav__links {
  display: flex;
  gap: .25rem;
  list-style: none;
}

.topnav__links a {
  font-family: var(--f-heading);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-on-stage-faded);
  text-decoration: none;
  border: none;
  padding: .4rem .85rem;
  border-radius: var(--radius);
  transition: color .2s ease, background .2s ease;
}

.topnav__links a:hover {
  color: var(--c-gold-bright);
  background: rgba(198,154,69,.06);
}

/* Einheitliche „Zurück zum Atrium"-Marke — gleich über alle Bereiche
   (Bibliothek, Generator; das Kompendium nutzt sie in seiner Rail-Form). */
.nav-zurueck {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--c-on-stage-soft);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border: 1px solid var(--c-stage-edge);
  border-radius: var(--radius);
  transition: color .2s, border-color .2s;
}
.nav-zurueck:hover { color: var(--c-gold-bright); border-color: var(--c-gold-deep); }

/* ============================================================
   GEMEINSAMER SEITENKOPF
   ------------------------------------------------------------
   Einheitlich über Bibliothek & Generator (strukturgleich zum
   Atrium): Rück-Marke links, Werkzeuge (Musik/Zoom) rechts,
   zentrierter Titel mit Glyph + Goldlinie + kursivem Unterzeiler.
   ============================================================ */
.seiten-kopf {
  position: relative;
  text-align: center;
  padding: clamp(1.3rem, 4vw, 2.4rem) clamp(1rem, 5vw, 3rem) 1.3rem;
  border-bottom: 1px solid var(--c-stage-edge);
}
.seiten-kopf > .nav-zurueck {
  position: absolute;
  left: clamp(.8rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 1.5rem);
}
/* Querverweis ins Regel-Kompendium (rechts oben, gegenüber „‹ Atrium") */
.seiten-kopf__quer {
  position: absolute;
  right: clamp(.8rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 1.5rem);
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--f-display); font-size: .8rem; letter-spacing: .03em;
  text-decoration: none;
  padding: .3rem .75rem; border-radius: 999px;
  color: var(--c-on-stage-soft);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--c-stage-edge);
  transition: color .15s, border-color .15s, background .15s;
}
.seiten-kopf__quer:hover { color: var(--c-gold-bright); border-color: var(--c-gold-deep); background: rgba(0,0,0,.35); }
@media (max-width: 560px) { .seiten-kopf__quer span.lbl { display: none; } }
.seiten-kopf__tools {
  position: absolute;
  right: clamp(.8rem, 3vw, 2rem);
  top: clamp(.7rem, 3vw, 1.1rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.seiten-kopf__glyph {
  display: block;
  color: var(--c-gold-bright);
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: .15rem;
}
.seiten-kopf__rule {
  width: 48px; height: 1px; margin: 0 auto .9rem;
  background: linear-gradient(90deg, transparent, var(--c-gold-deep) 30%, var(--c-gold) 50%, var(--c-gold-deep) 70%, transparent);
}
.seiten-kopf__h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 4vw, 2.4rem);
  letter-spacing: .06em;
  margin: .1rem 0;
  color: var(--c-parchment-hi);
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.seiten-kopf__unter {
  font-family: var(--f-heading);
  font-style: italic;
  color: var(--c-on-stage-soft);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  margin: .15rem auto 0;
  max-width: 52ch;
  text-shadow: 0 1px 10px rgba(8,5,2,.85);
}
/* Kleiner Text-Knopf im Werkzeug-Bereich (z. B. „Neu") */
.kopf-aktion {
  font-family: var(--f-heading);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-on-stage-faded); text-decoration: none;
  padding: .4rem .7rem; border-radius: var(--radius);
  transition: color .2s, background .2s;
}
.kopf-aktion:hover { color: var(--c-gold-bright); background: rgba(198,154,69,.06); }
/* Schritt-0-Setup (Herkunft/Volk) unter dem zentrierten Titel */
.seiten-kopf__setup {
  text-align: left;
  max-width: 1100px;
  margin: 1.8rem auto 0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 3rem 3.5rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Goldlinie mit Rautchen */
.hero__rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-deep) 30%, var(--c-gold) 50%, var(--c-gold-deep) 70%, transparent);
  margin-bottom: 1.6rem;
  position: relative;
}
.hero__rule::after {
  content: "◆";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-gold);
  font-size: .45rem;
  text-shadow: 0 0 8px rgba(14,10,5,.95);
}

.hero__eyebrow {
  font-family: var(--f-heading);
  font-size: .8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
  margin-bottom: .65rem;
}

/* .hero__logo: siehe css/chargen.css */


.hero__sub {
  font-family: var(--f-heading);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--c-on-stage-soft);
  margin-bottom: 2.75rem;
  text-shadow: 0 1px 10px rgba(8,5,2,.95);
  max-width: 44ch;
  line-height: 1.5;
}

/* ============================================================
   EINSTIEGS-PANEL — Glassmorphism, modern
   ============================================================ */
.entry-panel {
  /* Glas-Effekt: transluzenter dunkler Grund */
  background: rgba(18, 14, 9, 0.75);
  border: 1px solid rgba(74, 60, 40, 0.7);
  border-top: 1px solid rgba(198,154,69,.30);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem 2.5rem;
  box-shadow:
    var(--shadow-card),
    var(--shadow-glow),
    inset 0 1px 0 rgba(198,154,69,.10),
    inset 0 0 60px rgba(8,5,2,.25);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  max-width: 700px;
  position: relative;
  overflow: hidden;
}

/* Leichte Licht-Reflexion oben links */
.entry-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at -10% -10%, rgba(198,154,69,.07), transparent 55%),
    radial-gradient(ellipse 50% 40% at 110% 110%, rgba(143,42,27,.06), transparent 55%);
  pointer-events: none;
}

/* Sehr dünne Goldlinie oben — moderner als 3px-Balken */
.entry-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 30%, var(--c-gold-bright) 50%, var(--c-gold) 70%, transparent);
  opacity: .6;
}

/* ---- Karten-Kopf ---- */
.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.6rem;
  gap: 1rem;
}

.panel-label {
  font-family: var(--f-heading);
  font-size: .75rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-on-stage-faded);
  font-weight: 600;
}

.panel-title {
  font-family: var(--f-display);
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-gold-bright);
  font-weight: 600;
  line-height: 1.2;
}

/* ---- Fortschritt-Leiste ---- */
/* Schritt-Styling: siehe css/chargen.css (.steps-bar / .step …) */


/* ---- Optionen ---- */
.option-group-label {
  font-family: var(--f-heading);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 700;
  margin-bottom: .9rem;
  display: block;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 2rem;
}

.option-btn {
  background: rgba(255,255,255,.45);
  border: 1px solid var(--c-parchment-edge);
  border-radius: var(--radius-lg);
  padding: 1rem .85rem .9rem;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease;
  font-family: inherit;
  color: var(--c-ink);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* Auswahl-Markierung: heraldischer Streifen oben */
.option-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--h-or-deep), var(--h-or-bright), var(--h-or-deep));
  opacity: 0;
  transition: opacity .2s;
}

.option-btn:hover {
  border-color: var(--h-or);
  background: rgba(255,255,255,.65);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(40,28,12,.18);
}
.option-btn:hover::before { opacity: .6; }

.option-btn--selected {
  border-color: var(--h-azure);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(47,107,163,.08));
  box-shadow:
    0 0 0 1px rgba(31,78,121,.35),
    0 2px 8px rgba(40,28,12,.18);
}
.option-btn--selected::before { opacity: 1; }

.option-btn__icon {
  width: 28px;
  height: 28px;
  margin-bottom: .6rem;
  opacity: .8;
  display: block;
  /* SVG-Icons in Sepia-Tinte */
  filter: invert(18%) sepia(30%) saturate(700%) hue-rotate(355deg) brightness(.9);
}

.option-btn--selected .option-btn__icon {
  opacity: 1;
  filter: invert(24%) sepia(60%) saturate(900%) hue-rotate(180deg) brightness(.85);
}

.option-btn__label {
  font-family: var(--f-heading);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-ink);
  display: block;
  margin-bottom: .1rem;
}

.option-btn__sub {
  font-family: var(--f-body);
  font-style: italic;
  font-size: .8rem;
  color: var(--c-ink-faded);
  display: block;
  line-height: 1.3;
}

.option-btn--selected .option-btn__label { color: var(--h-azure-deep); }

/* ---- Aktionszeile ---- */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: .25rem;
  border-top: 1px solid rgba(74,60,40,.4);
}

.hint {
  font-family: var(--f-heading);
  font-style: italic;
  font-size: .85rem;
  color: var(--c-on-stage-faded);
  line-height: 1.4;
}

/* ============================================================
   KNÖPFE
   ============================================================ */
.btn {
  font-family: var(--f-heading);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .6em 1.9em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  white-space: nowrap;
  text-decoration: none;
}

.btn--gold {
  background: linear-gradient(150deg, var(--c-gold-bright) 0%, var(--c-gold) 50%, var(--c-gold-deep) 100%);
  color: #1e1608;
  border-color: var(--c-gold-deep);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}
.btn--gold:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(198,154,69,.30), 0 1px 0 rgba(255,255,255,.15) inset;
}
.btn--gold:active { transform: none; filter: brightness(.97); }

.btn--ghost {
  background: rgba(255,255,255,.35);
  color: var(--c-ink-soft);
  border-color: var(--c-parchment-edge);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.btn--ghost:hover {
  color: var(--h-gules);
  border-color: var(--h-gules);
  background: rgba(255,255,255,.6);
}

/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero__rule    { animation: rise .65s cubic-bezier(.22,.68,0,1.1) both; animation-delay: .05s; }
.hero__eyebrow { animation: rise .65s cubic-bezier(.22,.68,0,1.1) both; animation-delay: .12s; }
.hero__logo    { animation: rise .75s cubic-bezier(.22,.68,0,1.1) both; animation-delay: .22s; }
.hero__sub     { animation: rise .65s cubic-bezier(.22,.68,0,1.1) both; animation-delay: .35s; }
.entry-panel   { animation: rise .75s cubic-bezier(.22,.68,0,1.1) both; animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .topnav { padding: 1.25rem 1.5rem 0; }
  .hero   { padding: 0 1.5rem 2.5rem; }
  .entry-panel { padding: 1.75rem 1.5rem 2rem; }
  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .option-grid .option-btn:last-child { grid-column: span 2; }
}

@media (max-width: 480px) {
  .topnav__links { display: none; }
  .hero { padding: 0 1rem 2rem; }
  .entry-panel { padding: 1.5rem 1rem 1.75rem; border-radius: var(--radius-lg); }
  .action-row { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}