:root {
  --bg: #09090a;
  --panel: #101012;
  --panel-2: #151518;
  --text: #e5dcc8;
  --muted: #9a9488;
  --faint: #5c5a55;
  --accent: #8f3028;
  --accent-soft: #431b18;
  --accent-2: #c65b4b;
  --line: rgba(226,214,188,.17);
  --paper: #d7c9aa;
  --max: 1380px;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34rem),
    linear-gradient(180deg, #0b0b0d 0%, #09090a 100%);
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.72;
  overflow-x: hidden;
  transition: background 1.1s var(--ease), color .4s ease;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 80%);
}

a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }

.grain, .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.grain {
  opacity: .14;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.25) 0 .6px, transparent .8px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.16) 0 .5px, transparent .8px),
    radial-gradient(circle at 35% 80%, rgba(0,0,0,.65) 0 .7px, transparent .9px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
  mix-blend-mode: soft-light;
}
.scanlines { opacity: .05; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 76px; padding: 0 clamp(20px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7,7,8,.95), rgba(7,7,8,.72));
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; letter-spacing: .18em; font: 700 13px/1 "Georgia", serif; }
.brand-mark { width: 18px; height: 18px; display: inline-block; transform: rotate(45deg); border: 1px solid var(--accent); position: relative; transition: border-color .6s ease; }
.brand-mark::after { content:""; position:absolute; inset:4px; border:1px solid var(--paper); }
.brand-mark.small { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
.main-nav { display: flex; gap: clamp(16px,2vw,30px); }
.main-nav a { text-decoration: none; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .16em; transition: color .25s; }
.main-nav a:hover { color: var(--text); }
.sound-toggle { justify-self: end; border: 1px solid var(--line); background: rgba(255,255,255,.02); min-height: 38px; padding: 0 13px; display:flex; align-items:center; gap:9px; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
.sound-toggle:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); }
.sound-dot { width:7px; height:7px; border-radius:50%; border:1px solid var(--muted); }
.sound-toggle[aria-pressed="true"] .sound-dot { background:var(--accent-2); border-color:var(--accent-2); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 60%, transparent); }

.hero {
  min-height: 100svh;
  min-height: 100vh;
  padding: 150px clamp(24px, 8vw, 140px) 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px,.55fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: #09090a;
}

/* Drei echte Bildebenen. Die mittlere und vordere PNG müssen Transparenz besitzen. */
/* ============================================================
   ASTRANOX HERO PARALLAX
   ============================================================ */

.hero-parallax {
  --parallax-x: 0;
  --parallax-y: 0;
  --drift-x: 0;
  --drift-y: 0;

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #09090a;
}

/*
 * Etwas größer als der Hero selbst,
 * damit durch die Bewegung keine leeren Kanten entstehen.
 */
.hero-parallax-layer {
  position: absolute;
  inset: -5%;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* Alle drei Bilder deckungsgleich halten */
.hero-parallax-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}


/* ------------------------------------------------------------
   HINTERGRUND
   sehr langsame Bewegung
   ------------------------------------------------------------ */

.hero-parallax-bg {
  z-index: 1;

  transform:
    translate3d(
      calc(
        (var(--parallax-x) * -5px) +
        (var(--drift-x) * 2px)
      ),
      calc(
        (var(--parallax-y) * -3px) +
        (var(--drift-y) * 1.5px)
      ),
      0
    )
    scale(1.05);
}


/* ------------------------------------------------------------
   MITTELGRUND
   sichtbar stärkere Tiefenbewegung
   ------------------------------------------------------------ */

.hero-parallax-mid {
  z-index: 2;

  transform:
    translate3d(
      calc(
        (var(--parallax-x) * 10px) +
        (var(--drift-x) * -4px)
      ),
      calc(
        (var(--parallax-y) * 6px) +
        (var(--drift-y) * 3px)
      ),
      0
    )
    scale(1.07);
}


/* ------------------------------------------------------------
   VORDERGRUND
   stärkste Bewegung
   ------------------------------------------------------------ */

.hero-parallax-front {
  z-index: 3;

  transform:
    translate3d(
      calc(
        (var(--parallax-x) * 18px) +
        (var(--drift-x) * 7px)
      ),
      calc(
        (var(--parallax-y) * 10px) +
        (var(--drift-y) * -5px)
      ),
      0
    )
    scale(1.095);
}


/* ------------------------------------------------------------
   DUNKLER SCHLEIER
   deutlich heller als vorher
   ------------------------------------------------------------ */

.hero-parallax-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;

  background:

    /* links weiterhin etwas dunkler für den Hero-Text */
    linear-gradient(
      90deg,
      rgba(5, 5, 7, .58) 0%,
      rgba(7, 7, 9, .34) 31%,
      rgba(8, 8, 10, .08) 58%,
      rgba(5, 5, 7, .14) 100%
    ),

    /* unten nur noch leichte Abdunklung */
    linear-gradient(
      0deg,
      rgba(6, 6, 8, .48) 0%,
      transparent 42%,
      rgba(5, 5, 7, .12) 100%
    ),

    /* sehr subtile Randvignette */
    radial-gradient(
      ellipse at 58% 42%,
      transparent 20%,
      rgba(5, 5, 7, .04) 62%,
      rgba(4, 4, 6, .20) 100%
    );
}


/*
 * Farbiger Ambient-Layer des bestehenden Designs.
 * Ebenfalls etwas schwächer, damit das Artwork sichtbar bleibt.
 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 70% 42%,
      color-mix(in srgb, var(--accent) 7%, transparent),
      transparent 55%
    );

  mix-blend-mode: soft-light;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 980px) {

  .hero-parallax-layer {
    inset: -7%;
  }

  .hero-parallax-vignette {
    background:
      linear-gradient(
        90deg,
        rgba(5,5,7,.52),
        rgba(5,5,7,.14)
      ),
      linear-gradient(
        0deg,
        rgba(5,5,7,.54),
        transparent 48%
      );
  }
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

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

  .hero-parallax-layer {
    transform: none !important;
  }

}
.hero-parallax-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(5,5,7,.84) 0%, rgba(7,7,9,.61) 31%, rgba(8,8,10,.20) 58%, rgba(5,5,7,.38) 100%),
    linear-gradient(0deg, rgba(6,6,8,.82) 0%, transparent 38%, rgba(5,5,7,.34) 100%),
    radial-gradient(ellipse at 58% 42%, transparent 15%, rgba(5,5,7,.12) 58%, rgba(4,4,6,.47) 100%);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(ellipse at 70% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%);
  mix-blend-mode: soft-light;
}
.hero-grid {
  position:absolute;
  z-index:2;
  inset:76px 0 0 48%;
  border-left:1px solid rgba(226,214,188,.10);
  background: repeating-linear-gradient(90deg, transparent 0 94px, rgba(255,255,255,.018) 94px 95px);
  opacity:.42;
  pointer-events:none;
}
.hero-copy { position:relative; z-index:6; max-width: 830px; text-shadow:0 3px 26px rgba(0,0,0,.55); }
.eyebrow { margin:0 0 20px; color:var(--accent-2); text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:700; transition: color .6s; }
h1,h2,h3 { font-family: "Palatino Linotype", Palatino, Georgia, serif; font-weight: 400; letter-spacing: -.035em; margin:0; }
h1 { font-size: clamp(58px, 8.5vw, 138px); line-height:.82; max-width: 9ch; }
h1 em { color:var(--accent-2); font-style:italic; transition: color .6s; }
.lede { max-width: 62ch; color:#d0c7b7; font-size: clamp(19px,1.45vw,23px); line-height:1.68; margin:34px 0 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:38px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font-size:10px; border:1px solid var(--line); transition:.3s var(--ease); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#f7eedf; }
.btn.primary:hover { transform:translateY(-2px); background:var(--accent-2); }
.btn.ghost:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.hero-codex {
  align-self:end;
  justify-self:end;
  width:min(100%, 390px);
  border-top:1px solid rgba(226,214,188,.23);
  position:relative;
  z-index:6;
  padding: 8px 16px 0;
  background: linear-gradient(90deg, rgba(6,6,8,.32), rgba(6,6,8,.68));
  backdrop-filter: blur(4px);
}
.codex-line { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:13px 0; }
.codex-line span { color:#77736a; font-size:9px; letter-spacing:.16em; }
.codex-line strong { font:400 12px Georgia, serif; color:#d8cdb8; text-align:right; }

.section { width:min(var(--max), calc(100% - 48px)); margin:0 auto; padding:clamp(110px,10vw,168px) 0; }
.section-head { max-width:100%; margin-bottom:60px; }
.section-head h2, .dominat-copy h2, .agents-copy h2 { font-size:clamp(42px,6vw,82px); line-height:.95; }
.section-head > p:last-child { color:#aaa397; max-width:66ch; margin-top:28px; font-size:19px; line-height:1.75; }

.setting-intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:clamp(60px,10vw,150px); align-items:end; }
.setting-intro-copy { max-width:820px; }
.setting-intro h2, .rules-intro h2 { font-size:clamp(46px,6vw,88px); line-height:.96; }
.setting-intro-copy > p:not(.eyebrow), .rules-copy > p:not(.eyebrow) { max-width:68ch; color:#aaa397; margin:28px 0 0; font-size:19px; line-height:1.78; }
.setting-intro-copy .intro-lede, .rules-copy .intro-lede { color:#d1c7b6; font:400 clamp(21px,1.7vw,26px)/1.62 Georgia,serif; }
.setting-brief { border-top:2px solid var(--accent); padding-top:22px; }
.setting-brief-label, .portal-kicker { color:var(--accent-2); text-transform:uppercase; letter-spacing:.17em; font-size:10px; font-weight:700; }
.setting-brief dl { margin:20px 0 0; }
.setting-brief dl div { display:grid; grid-template-columns:105px 1fr; gap:22px; padding:16px 0; border-bottom:1px solid var(--line); }
.setting-brief dt { color:var(--faint); text-transform:uppercase; letter-spacing:.13em; font-size:10px; }
.setting-brief dd { margin:0; color:#d2c7b4; font:400 16px/1.4 Georgia,serif; }

.portal-section { border-top:1px solid var(--line); }
.portal-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.portal-card { min-height:470px; padding:clamp(28px,3.5vw,52px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; background:linear-gradient(155deg,rgba(255,255,255,.025),transparent 50%); transition:background .4s var(--ease),transform .4s var(--ease); }
.portal-card::before { content:""; position:absolute; width:260px; height:260px; border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:50%; right:-130px; top:-130px; transition:transform .6s var(--ease); }
.portal-card:hover { background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 13%,transparent),transparent 60%); transform:translateY(-5px); }
.portal-card:hover::before { transform:scale(1.18); }
.portal-index { color:var(--faint); font:400 13px Georgia,serif; letter-spacing:.14em; }
.portal-card h3 { margin:10px 0 22px; font-size:clamp(36px,3.6vw,56px); line-height:.95; }
.portal-card p:not(.portal-kicker) { color:#aaa397; font-size:17px; line-height:1.72; max-width:34ch; }
.portal-link { color:#d8cdb9; text-transform:uppercase; letter-spacing:.13em; font-size:10px; }

.faction-shell { border-top:1px solid var(--line); }
.faction-selector { display:grid; grid-template-columns:repeat(6,1fr); border-left:1px solid var(--line); }
.faction-tab { border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; color:var(--muted); min-height:62px; cursor:pointer; letter-spacing:.12em; text-transform:uppercase; font-size:10px; position:relative; overflow:hidden; }
.faction-tab::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .35s var(--ease); }
.faction-tab:hover { color:var(--text); background:rgba(255,255,255,.02); }
.faction-tab.active { color:var(--text); }
.faction-tab.active::after { transform:scaleX(1); }
.faction-panel { min-height:760px; display:grid; grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr); border:1px solid var(--line); border-top:0; background:linear-gradient(135deg,rgba(255,255,255,.02),transparent 45%), #0d0d0f; overflow:hidden; }
.faction-art-wrap { position:relative; min-height:760px; overflow:hidden; border-right:1px solid var(--line); }
.faction-art-bg { position:absolute; inset:-8%; background-size:cover; background-position:center; filter:blur(26px) saturate(.7); opacity:.22; transform:scale(1.08); transition:background-image .8s ease; }
.faction-art-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 45%,rgba(9,9,10,.72) 100%),linear-gradient(0deg,rgba(9,9,10,.8),transparent 35%); }
.faction-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.84) contrast(1.03); transition:opacity .45s, transform 1.2s var(--ease); }
.faction-panel.changing .faction-art { opacity:.15; transform:scale(1.035); }
.faction-index { position:absolute; z-index:3; left:24px; bottom:20px; font:400 11px Georgia,serif; letter-spacing:.16em; color:#d4c7ad; }
.faction-content { padding:clamp(34px,5vw,76px); align-self:center; }
.faction-kicker { color:var(--accent-2); text-transform:uppercase; letter-spacing:.16em; font-size:10px; margin:0 0 10px; }
.faction-content h3 { font-size:clamp(54px,7vw,104px); line-height:.9; }
.faction-tagline { margin:18px 0 0; color:#d6cdbb; font:italic 18px/1.5 Georgia,serif; max-width:52ch; }
.faction-summary { color:#b4ac9e; max-width:66ch; margin:34px 0; font-size:18px; line-height:1.75; }
.faction-facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin:32px 0; }
.fact { padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:90px; }
.fact span { display:block; color:var(--faint); text-transform:uppercase; letter-spacing:.14em; font-size:8px; margin-bottom:8px; }
.fact strong { font:400 13px/1.4 Georgia,serif; color:#cec4b2; }
.faction-columns { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.faction-columns p { color:#a29b90; font-size:16px; line-height:1.7; margin:10px 0 0; }
.micro-label { color:var(--accent-2); text-transform:uppercase; letter-spacing:.16em; font-size:8px; font-weight:700; }
.audio-card { margin-top:34px; border:1px solid var(--line); min-height:70px; padding:12px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; background:rgba(255,255,255,.02); }
.audio-card strong { display:block; font:400 13px Georgia,serif; margin-top:2px; }
.audio-visual { display:flex; gap:3px; align-items:end; height:30px; width:42px; }
.audio-visual i { display:block; width:2px; height:24%; background:var(--accent-2); animation:bar 1.2s ease-in-out infinite alternate; animation-play-state:paused; }
.audio-card.playing .audio-visual i { animation-play-state:running; }
.audio-visual i:nth-child(2){animation-delay:.15s;height:48%}.audio-visual i:nth-child(3){animation-delay:.34s;height:80%}.audio-visual i:nth-child(4){animation-delay:.05s;height:56%}.audio-visual i:nth-child(5){animation-delay:.27s;height:92%}.audio-visual i:nth-child(6){animation-delay:.18s;height:42%}.audio-visual i:nth-child(7){animation-delay:.4s;height:65%}
@keyframes bar { to { height:100%; opacity:.55; } }
.audio-inline { border:1px solid var(--line); background:transparent; min-height:34px; padding:0 12px; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.audio-inline:hover { border-color:var(--accent); }
.faction-more { margin-top:28px; }

.dominat-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,120px); align-items:center; }
.dominat-visual { min-height:620px; position:relative; margin:0; border:1px solid var(--line); background:#0c0c0e; overflow:hidden; }
.dominat-visual img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86) contrast(1.03); }
.dominat-visual figcaption { position:absolute; left:0; right:0; bottom:0; padding:22px 26px; background:linear-gradient(0deg,rgba(9,9,10,.86) 20%,transparent 100%); font:italic 13px/1.5 Georgia,serif; color:#d6cdbb; }
.dominat-copy > p:not(.eyebrow) { color:#aaa397; max-width:66ch; margin-top:28px; font-size:18px; line-height:1.78; }
.quote-block { border-left:2px solid var(--accent); padding:6px 0 6px 22px; margin-top:36px; }
.quote-block span { color:var(--faint); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.quote-block blockquote { margin:8px 0 0; font:italic 18px/1.55 Georgia,serif; color:#d2c8b7; }

.timeline { border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:160px 1fr; gap:40px; border-bottom:1px solid var(--line); padding:28px 0; position:relative; transition:padding .3s var(--ease), background .3s; }
.timeline-item:hover { padding-left:18px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%); }
.timeline-year { font:400 15px Georgia,serif; color:var(--accent-2); }
.timeline-item h3 { font-size:clamp(22px,2vw,32px); letter-spacing:-.02em; }
.timeline-item p { margin:10px 0 0; color:#aaa397; max-width:76ch; font-size:17px; line-height:1.72; }

.rules-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:clamp(60px,9vw,130px); align-items:center; border-top:1px solid var(--line); }
.rules-copy .btn { margin-top:36px; }
.probe-card { border:1px solid var(--line); padding:clamp(28px,4vw,58px); background:radial-gradient(circle at 80% 12%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 42%),#0d0d0f; }
.probe-formula { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.probe-formula strong { font:400 clamp(22px,2.5vw,34px)/1 Georgia,serif; color:var(--paper); }
.probe-formula span { color:var(--accent-2); }
.probe-controls { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--line); margin-top:26px; }
.probe-controls label { display:flex; flex-direction:column; gap:8px; padding:15px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--faint); text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.probe-controls select { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:7px 0; background:#0d0d0f; color:var(--paper); font:400 16px Georgia,serif; }
.probe-controls select:focus { outline:0; border-color:var(--accent-2); }
.probe-roll { width:100%; min-height:74px; margin-top:18px; border:1px solid var(--accent); background:color-mix(in srgb,var(--accent) 19%,transparent); display:flex; align-items:center; justify-content:center; gap:18px; color:var(--paper); cursor:pointer; text-transform:uppercase; letter-spacing:.14em; font-size:10px; transition:background .25s,transform .25s; }
.probe-roll:hover { background:color-mix(in srgb,var(--accent) 34%,transparent); transform:translateY(-2px); }
.probe-die { display:grid; place-items:center; width:46px; height:42px; border:1px solid var(--accent-2); clip-path:polygon(50% 0,96% 24%,86% 82%,50% 100%,14% 82%,4% 24%); font:400 14px Georgia,serif; }
.probe-roll.is-rolling .probe-die { animation:die-roll .55s var(--ease); }
@keyframes die-roll { 50% { transform:rotate(180deg) scale(.72); opacity:.35; } }
.probe-result { margin-top:18px; padding:22px; border-left:2px solid var(--line); background:rgba(255,255,255,.018); }
.probe-result.is-success { border-color:#8fa770; }
.probe-result.is-critical { border-color:var(--accent-2); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.probe-result.is-failure { border-color:#77736a; }
.probe-result-label { display:block; margin-bottom:7px; color:var(--accent-2); text-transform:uppercase; letter-spacing:.14em; font-size:9px; }
.probe-result strong { display:block; color:var(--paper); font:400 20px/1.4 Georgia,serif; }
.probe-result p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }

.agents-card { min-height:660px; border:1px solid var(--line); background:radial-gradient(circle at 84% 40%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 30%),#0d0d0f; padding:clamp(40px,7vw,90px); position:relative; overflow:hidden; }
.agents-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.agents-copy { position:relative; z-index:2; }
.agents-copy > p:not(.eyebrow):not(.agents-note) { max-width:65ch; color:#aaa397; margin-top:28px; font-size:18px; line-height:1.76; }
.agents-note { border-left:1px solid var(--accent); padding-left:18px; color:#d3c7b2; font:italic 17px/1.55 Georgia,serif; margin-top:30px; max-width:58ch; }
.agents-roster { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; position:relative; z-index:2; }
.roster-card { min-height:150px; border:1px solid var(--line); background-size:cover; background-position:center 26%; position:relative; overflow:hidden; cursor:pointer; }
.roster-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#09090b 5%,rgba(9,9,11,.18) 85%); transition:background .35s; }
.roster-card:hover::before { background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 34%,#09090b) 5%,rgba(9,9,11,.08) 90%); }
.roster-card span { position:absolute; z-index:2; left:14px; bottom:10px; text-transform:uppercase; letter-spacing:.14em; font-size:9px; }
.agents-orbit { position:absolute; right:-210px; top:-170px; width:620px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--accent) 36%,transparent); border-radius:50%; }
.agents-orbit::after { content:""; position:absolute; inset:20%; border:1px dashed color-mix(in srgb,var(--accent) 30%,transparent); border-radius:50%; }

.site-footer { width:min(var(--max),calc(100% - 48px)); margin:0 auto; min-height:120px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--faint); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.site-footer a { text-decoration:none; }

.audio-library { border-top:1px solid var(--line); }
.audio-track { display:flex; align-items:center; gap:22px; width:100%; padding:20px 6px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--text); cursor:pointer; text-align:left; font:400 17px/1.3 Georgia,serif; transition:color .25s; }
.audio-track:hover { color:var(--accent-2); }
.audio-track-index { flex:0 0 auto; width:2.4em; color:var(--faint); font:400 12px Georgia,serif; letter-spacing:.08em; }
.audio-track-title { flex:1 1 auto; }
.audio-track-state { flex:0 0 auto; width:22px; text-align:center; color:var(--muted); }
.audio-track.is-playing { color:var(--paper); }
.audio-track.is-playing .audio-track-index,
.audio-track.is-playing .audio-track-state { color:var(--accent-2); }

.audio-dock { position:fixed; z-index:31; right:24px; bottom:24px; min-width:310px; display:grid; grid-template-columns:auto 1fr 95px; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); background:rgba(8,8,9,.88); backdrop-filter:blur(14px); box-shadow:0 18px 60px rgba(0,0,0,.35); transform:translateY(0); transition:.35s var(--ease); }
.dock-play { width:34px; height:34px; border:1px solid var(--line); background:color-mix(in srgb,var(--accent) 18%,transparent); cursor:pointer; }
.dock-meta span { display:block; font:400 12px Georgia,serif; }
.dock-meta small { display:block; color:var(--faint); margin-top:1px; font-size:9px; text-transform:uppercase; letter-spacing:.11em; }
.audio-dock input { width:95px; accent-color:var(--accent); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.16s; }

html[data-faction="nyxaren"] { --accent:#7f2923; --accent-soft:#381713; --accent-2:#d05a4d; }
html[data-faction="terraner"] { --accent:#a4512f; --accent-soft:#3b251a; --accent-2:#c97949; }
html[data-faction="prometheaner"] { --accent:#8d2826; --accent-soft:#331314; --accent-2:#e0554d; }
html[data-faction="lykaner"] { --accent:#52623a; --accent-soft:#1d2a1c; --accent-2:#9aa46b; }
html[data-faction="orks"] { --accent:#8a4d20; --accent-soft:#392316; --accent-2:#d0833b; }
html[data-faction="aeldir"] { --accent:#716389; --accent-soft:#2b2738; --accent-2:#b8a9d0; }

@media (max-width: 980px) {
  .site-header { grid-template-columns:1fr auto; }
  .main-nav { display:none; }
  .hero { grid-template-columns:1fr; grid-template-rows:auto auto; padding-top:140px; }
  .hero-codex { justify-self:start; }
  .faction-selector { grid-template-columns:repeat(3,1fr); }
  .faction-panel { grid-template-columns:1fr; }
  .faction-art-wrap { min-height:640px; border-right:0; border-bottom:1px solid var(--line); }
  .setting-intro, .rules-intro, .dominat-section, .agents-intro { grid-template-columns:1fr; }
  .portal-grid { grid-template-columns:1fr; }
  .portal-card { min-height:360px; }
  .dominat-visual { min-height:500px; }
}

@media (max-width: 640px) {
  body { font-size:17px; }
  .setting-intro-copy > p:not(.eyebrow), .rules-copy > p:not(.eyebrow) { font-size:18px; }
  .portal-card { min-height:330px; }
  .probe-formula { flex-wrap:wrap; justify-content:flex-start; }
  .probe-controls { grid-template-columns:1fr; }
  .site-header { padding:0 14px; min-height:66px; }
  .sound-label { display:none; }
  .hero { padding:120px 22px 70px; min-height:100svh; }
  .hero-parallax-layer { inset:-7%; }
  .hero-parallax-vignette { background:linear-gradient(90deg,rgba(5,5,7,.78),rgba(5,5,7,.28)),linear-gradient(0deg,rgba(5,5,7,.82),transparent 44%); }
  h1 { font-size:clamp(54px,18vw,86px); }
  .section { width:min(100% - 28px,var(--max)); padding:82px 0; }
  .faction-selector { grid-template-columns:repeat(2,1fr); }
  .faction-art-wrap { min-height:540px; }
  .faction-content { padding:30px 22px; }
  .faction-facts { grid-template-columns:1fr; }
  .faction-columns { grid-template-columns:1fr; }
  .timeline-item { grid-template-columns:1fr; gap:8px; }
  .agents-card { padding:32px 22px; }
  .agents-roster { grid-template-columns:1fr 1fr; }
  .audio-dock { left:14px; right:14px; bottom:14px; min-width:0; grid-template-columns:auto 1fr 80px; }
  .audio-dock input { width:80px; }
  .site-footer { padding:35px 0 120px; flex-direction:column; gap:12px; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .hero-parallax-layer { transform:none !important; }
}

/* ============================================================
   Volk-Detailseiten (pages/volk-*.html)
   ============================================================ */

.volk-hero { position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line); }
.volk-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.03); }
.volk-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--bg) 4%,rgba(9,9,10,.28) 45%,rgba(9,9,10,.5) 100%); }
.volk-hero-inner { position:relative; z-index:2; width:min(var(--max), calc(100% - 48px)); margin:0 auto; padding-bottom:70px; }
.volk-hero-index { font:400 11px Georgia,serif; letter-spacing:.16em; color:var(--accent-2); margin:0 0 18px; }
.volk-hero-inner h1 { font-family:"Palatino Linotype",Palatino,Georgia,serif; font-weight:400; font-size:clamp(56px,9vw,140px); line-height:.85; letter-spacing:-.03em; }
.volk-hero-tagline { font:italic 19px/1.6 Georgia,serif; color:#d6cdbb; max-width:52ch; margin:22px 0 0; }

.volk-subnav { position:sticky; top:76px; z-index:20; background:rgba(8,8,9,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); overflow-x:auto; }
.volk-subnav-list { display:flex; gap:34px; width:min(var(--max), calc(100% - 48px)); margin:0 auto; padding:16px 0; list-style:none; white-space:nowrap; }
.volk-subnav-list a { text-decoration:none; color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.14em; transition:color .25s; }
.volk-subnav-list a:hover { color:var(--text); }

.volk-body { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
.volk-opening { max-width:1060px; margin:0 auto; padding:clamp(90px,9vw,140px) 0; border-bottom:1px solid var(--line); text-align:center; }
.volk-opening-mark, .volk-chapter { color:var(--accent-2); text-transform:uppercase; letter-spacing:.17em; font-size:10px; font-weight:700; }
.volk-opening blockquote { margin:24px auto 0; color:#d8cebc; font:italic clamp(24px,3vw,38px)/1.55 Georgia,serif; }
.volk-section { width:100%; margin:0 auto; padding:clamp(90px,9vw,138px) 0; border-bottom:1px solid var(--line); scroll-margin-top:140px; }
.volk-section:last-child { border-bottom:0; }
.volk-section h2 { font-size:clamp(42px,5.5vw,72px); line-height:.98; margin:12px 0 42px; max-width:20ch; }
.volk-section p { color:#b2aa9c; max-width:none; margin:0 0 26px; font-size:19px; line-height:1.82; }
.volk-section .volk-lede { color:#d5cbb9; font:400 clamp(22px,2vw,27px)/1.65 Georgia,serif; }
.volk-section p:last-child { margin-bottom:0; }
.volk-section p strong { color:var(--paper); font-weight:400; }
.volk-section p em { color:var(--accent-2); font-style:italic; }

.badge-draft { display:inline-block; border:1px solid color-mix(in srgb, var(--accent-2) 55%, var(--line)); color:var(--accent-2); text-transform:uppercase; letter-spacing:.14em; font-size:9px; padding:6px 12px; margin-bottom:24px; }

/* Atmosphärische Schmuckbilder innerhalb der Volk-Textabschnitte */
.volk-section::after { content:""; display:block; clear:both; }
.volk-figure { width:min(48%,590px); margin:6px 0 34px; }
.volk-figure--right { float:right; margin-left:clamp(32px,4vw,64px); }
.volk-figure--left { float:left; margin-right:clamp(32px,4vw,64px); }
.volk-figure img { width:100%; display:block; border:1px solid var(--line); filter:saturate(.86) contrast(1.03); }
.volk-figure figcaption { margin-top:12px; font:italic 13px/1.55 Georgia,serif; color:var(--muted); }
.lore-callout { max-width:760px; margin:42px 0 0; padding:28px 32px; border-left:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.lore-callout span { color:var(--accent-2); text-transform:uppercase; letter-spacing:.15em; font-size:9px; font-weight:700; }
.lore-callout p { margin:10px 0 0; color:#cec3b1; font:italic 18px/1.7 Georgia,serif; }
.lore-quote { width:min(720px,82%); margin:48px 0; padding:8px 0 8px 28px; border-left:1px solid var(--accent-2); }
.lore-quote--right { margin-left:auto; }
.lore-quote p { margin:0; color:#ddd2bf; font:italic clamp(20px,2vw,27px)/1.55 Georgia,serif; }
.lore-quote cite { display:block; margin-top:13px; color:var(--faint); text-transform:uppercase; letter-spacing:.13em; font-size:9px; font-style:normal; }

.homeworld-teaser { min-height:680px; margin:80px 0; position:relative; display:flex; align-items:flex-end; overflow:hidden; border:1px solid var(--line); }
.homeworld-teaser > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.homeworld-teaser-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,7,.9),rgba(5,5,7,.22) 72%),linear-gradient(0deg,rgba(5,5,7,.82),transparent 60%); }
.homeworld-teaser-copy { position:relative; z-index:2; width:min(720px,84%); padding:clamp(34px,6vw,78px); }
.homeworld-teaser h2 { margin:12px 0 24px; font-size:clamp(48px,7vw,96px); line-height:.9; }
.homeworld-teaser-copy > p:not(.volk-chapter) { color:#c9bfad; font-size:19px; line-height:1.75; }

.place-hero { min-height:88vh; position:relative; display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line); }
.place-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.place-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--bg),transparent 64%),linear-gradient(90deg,rgba(5,5,7,.68),transparent 70%); }
.place-hero-copy { position:relative; z-index:2; width:min(var(--max),calc(100% - 48px)); margin:0 auto; padding:0 0 78px; }
.place-hero-copy h1 { max-width:none; font-size:clamp(72px,13vw,180px); }
.place-hero-copy p:last-child { color:#d3c9b7; font:italic clamp(20px,2vw,28px)/1.55 Georgia,serif; }
.place-body { width:min(var(--max),calc(100% - 48px)); margin:0 auto; }
.place-facts { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin:46px 0 0; }
.place-facts div { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.place-facts span { display:block; color:var(--faint); text-transform:uppercase; letter-spacing:.13em; font-size:9px; }
.place-facts strong { display:block; margin-top:8px; color:var(--paper); font:400 17px/1.45 Georgia,serif; }
.place-panorama { margin:0; }
.place-panorama img { width:100%; display:block; border:1px solid var(--line); }
.place-panorama figcaption { margin-top:13px; color:var(--muted); font:italic 13px/1.55 Georgia,serif; }
@media (max-width: 760px) {
  .volk-figure, .volk-figure--right, .volk-figure--left { float:none; max-width:none; margin:0 0 28px; }
  .lore-quote { width:100%; }
  .homeworld-teaser { min-height:580px; }
  .place-facts { grid-template-columns:1fr 1fr; }
}

.subfaction-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:36px; }
.subfaction-card { padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.subfaction-card h3 { font-size:22px; margin-bottom:12px; }
.subfaction-card p { font-size:16px; line-height:1.7; color:#a69f93; margin-bottom:16px; }
.subfaction-card ul { margin:0; padding-left:18px; color:#989185; font-size:15px; line-height:1.75; }
.subfaction-card li { margin-bottom:6px; }

.volk-back { display:flex; justify-content:space-between; align-items:center; width:min(var(--max), calc(100% - 48px)); margin:0 auto; padding:60px 0; }
.volk-back a { text-decoration:none; }

.volk-audio-note { text-align:center; color:var(--faint); font-size:9px; text-transform:uppercase; letter-spacing:.14em; padding:14px 0 0; }

/* ============================================================
   Charakter-Editor (eingebettet im Agenten-Bereich)
   ============================================================ */

.wizard-panel { position:relative; z-index:2; }
.wizard-back-link { display:inline-block; background:none; border:0; padding:0; margin-bottom:28px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:10px; cursor:pointer; transition:color .25s; }
.wizard-back-link:hover { color:var(--accent-2); }
.wizard-steps { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin-bottom:44px; }
.wizard-steps span {
  flex:1; min-width:110px; text-align:center; padding:0 8px 16px; text-transform:uppercase; letter-spacing:.12em;
  font-size:10px; color:var(--faint); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.wizard-steps span.is-active { color:var(--text); border-color:var(--accent); }
.wizard-steps span.is-done { color:var(--muted); }

.wizard-step { display:none; }
.wizard-step.is-active { display:block; animation:wstep .5s var(--ease); }
@keyframes wstep { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.wizard-step h3 { font-size:clamp(28px,3vw,40px); margin-bottom:26px; }

.wizard-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.wizard-pick-card {
  position:relative; min-height:170px; border:1px solid var(--line); background-size:cover; background-position:center 26%;
  cursor:pointer; overflow:hidden; padding:0;
}
.wizard-pick-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#09090b 10%,rgba(9,9,11,.1) 80%); transition:background .3s; }
.wizard-pick-card:hover::before { background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 30%,#09090b) 10%,rgba(9,9,11,.05) 85%); }
.wizard-pick-card.is-selected { border-color:var(--accent-2); }
.wizard-pick-card.is-selected::before { background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 46%,#09090b) 10%,rgba(9,9,11,.05) 85%); }
.wizard-pick-card span { position:absolute; z-index:2; left:12px; bottom:10px; text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--text); }

.wizard-sub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wizard-sub-card {
  text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; color:var(--text);
  padding:22px; cursor:pointer; font:inherit;
}
.wizard-sub-card:hover { background:rgba(255,255,255,.02); }
.wizard-sub-card.is-selected { background:color-mix(in srgb, var(--accent) 14%, transparent); }
.wizard-sub-card h4 { font:400 20px Georgia,serif; margin:0 0 8px; color:var(--paper); }
.wizard-sub-card p { font-size:13px; color:#938d82; margin:0; }

.wizard-ability-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wizard-ability-card {
  text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; color:#aaa397;
  padding:20px; cursor:pointer; font-size:13px; line-height:1.6; font:13px/1.6 inherit;
}
.wizard-ability-card:hover { background:rgba(255,255,255,.02); }
.wizard-ability-card.is-selected { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--text); }

.wizard-budget { display:inline-block; border:1px solid var(--line); padding:8px 16px; font:11px/1 Georgia,serif; color:var(--muted); margin-bottom:26px; letter-spacing:.04em; }
.wizard-budget.is-over { color:var(--accent-2); border-color:var(--accent-2); }

.wizard-attr-row, .wizard-skill-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.wizard-attr-row .name, .wizard-skill-row .name { font:400 15px Georgia,serif; }
.wizard-skill-row .lead { color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-left:6px; }
.wizard-stepper { display:flex; align-items:center; gap:12px; }
.wizard-stepper button {
  width:28px; height:28px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; font-size:14px;
}
.wizard-stepper button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-2); }
.wizard-stepper button:disabled { opacity:.25; cursor:not-allowed; }
.wizard-stepper .val { width:1.4em; text-align:center; font:400 14px Georgia,serif; }

.wizard-field { margin-bottom:26px; }
.wizard-field label { display:block; text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--muted); margin-bottom:10px; }
.wizard-field input, .wizard-field textarea {
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text); padding:14px; font:15px/1.5 Georgia,serif;
}
.wizard-field textarea { min-height:110px; resize:vertical; }
.wizard-field input:focus, .wizard-field textarea:focus { outline:none; border-color:var(--accent); }

.wizard-nav { display:flex; justify-content:space-between; margin-top:44px; }
.wizard-note { color:var(--faint); font-size:12px; margin-top:16px; }