/* =========================================================================
   DiceCast — Homepage
   Farbwelt und Formensprache stammen aus lib/presentation/theme/dicecast_theme.dart:
   flache Formen, starke Akzente auf dunklem Grund. Würfel lesen sich als Würfel
   über eine abgerundete Quadratsilhouette und eine Hell-nach-Dunkel-Füllung —
   nie über 3D, Perspektive oder fotorealistisches Rendering.
   ========================================================================= */

/* --- Schriften: gebündelt, nie nachgeladen ------------------------------- */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Token --------------------------------------------------------------- */
:root {
  /* Grundflächen */
  --bg: #0e0e15;
  --surface: #1c1c26;
  --surface-2: rgba(38, 38, 51, 0.68);
  --border: #343446;
  --border-soft: rgba(52, 52, 70, 0.55);

  /* Text */
  --text: #ececf2;
  --muted: #9a9aae;

  /* Akzent */
  --accent: #e0703a;
  --accent-dim: #8a4726;

  /* Symbolfarben — jede Wirkung hat eigene Farbe UND eigene Form */
  --dmg: #e05252;
  --true: #f0f0f5;
  --block: #4a90d9;
  --heal: #4fbf7f;
  --status: #b06ad9;
  --spark: #e8c34a;
  --focus: #e0703a;

  /* Fraktionen */
  --warden: #4a90d9;
  --threat: #e05252;

  /* Typografie */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Raster */
  --page: 1180px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

p {
  margin: 0;
}

/* Auch die ol: die Ablauf- und Kampfschritte sind semantisch geordnet, ihre
   Nummer zeichnet aber das Layout — der Browsermarker stand doppelt daneben. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--accent);
  color: #14140f;
  font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --- Layout -------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
}

section[id] {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  position: relative;
}

.section-head {
  max-width: 54rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.section-head p {
  max-width: 46rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 1.9rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

h2 {
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.1rem);
}

.section-head p {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  text-wrap: pretty;
}

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 14, 21, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--border-soft);
  background: rgba(14, 14, 21, 0.92);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: auto;
}
.brand .mark {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
}
.brand em {
  font-style: normal;
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 0.35rem;
}
.site-nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current='true'] {
  color: var(--text);
  background: var(--surface-2);
}

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg {
  margin: auto;
  width: 1.15rem;
  height: 1.15rem;
}
.nav-toggle .icon-close,
.nav-toggle[aria-expanded='true'] .icon-open {
  display: none;
}
.nav-toggle[aria-expanded='true'] .icon-close {
  display: block;
}

/* --- Schaltflächen ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--accent);
  color: #16110c;
  box-shadow: 0 8px 26px -12px rgba(224, 112, 58, 0.9);
}
.btn-primary:hover {
  background: #ef8049;
  box-shadow: 0 14px 34px -12px rgba(224, 112, 58, 0.95);
}

.btn-ghost {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--accent-dim);
  background: var(--surface);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Warden Stage: das quadratische Feld, auf dem der Kampf steht */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: -10% -5% 0;
  background-image: linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 78%);
  opacity: 0.5;
}
.hero-bg::after {
  content: '';
  position: absolute;
  top: -18%;
  left: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(224, 112, 58, 0.17) 0%,
    rgba(224, 112, 58, 0.05) 38%,
    transparent 68%
  );
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

.hero-copy {
  max-width: 34rem;
}

.hero h1 {
  font-size: clamp(2.9rem, 1.4rem + 6.6vw, 5.6rem);
  letter-spacing: -0.035em;
}
.hero h1 .line-2 {
  display: block;
  color: var(--accent);
}

.hero-tagline {
  margin-top: 1.35rem;
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
  color: var(--text);
  font-weight: 500;
  text-wrap: balance;
}

.hero-lede {
  margin-top: 0.9rem;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* Vier Zahlen, immer eine Reihe — als Flexbox riss die vierte auf eine
   eigene Zeile und stand dann allein unter der ersten. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}
.hero-facts dt {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  color: var(--text);
  line-height: 1.1;
}
.hero-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Würfelbühne im Hero */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(17rem, 42vw, 25rem);
}
.hero-dice {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(0.7rem, 1.8vw, 1.15rem);
  transform: rotate(-8deg);
}
.hero-dice .die:nth-child(1) { --float-delay: 0s; }
.hero-dice .die:nth-child(2) { --float-delay: -1.1s; }
.hero-dice .die:nth-child(3) { --float-delay: -2.3s; }
.hero-dice .die:nth-child(4) { --float-delay: -0.6s; }
.hero-dice .die:nth-child(5) { --float-delay: -1.8s; }
.hero-dice .die:nth-child(6) { --float-delay: -2.9s; }

/* --- Würfel als Bauteil -------------------------------------------------- */
.die {
  --die-size: clamp(3.4rem, 8vw, 4.6rem);
  --die-tint: var(--muted);
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  display: grid;
  place-items: center;
  border-radius: 26%;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #2c2c3a 0%, #1a1a24 62%, #14141d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 26px -16px rgba(0, 0, 0, 0.9);
  color: var(--die-tint);
  flex: none;
}
.die::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--die-tint) 22%, transparent) 0%,
    transparent 70%
  );
}
.die svg {
  position: relative;
  z-index: 1;
  width: 46%;
  height: 46%;
}
.die-sm {
  --die-size: 2.4rem;
  border-radius: 28%;
}

.die-float {
  animation: die-float 5.5s var(--float-delay, 0s) ease-in-out infinite;
}
@keyframes die-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}

/* Würfel, der im Hero durchzählt */
.die-rolling {
  --die-tint: var(--spark);
  border-color: color-mix(in srgb, var(--spark) 45%, var(--border));
}
.die-rolling.is-rolling svg {
  animation: die-tumble 0.32s var(--ease);
}
@keyframes die-tumble {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-25deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* --- Symbollegende ------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  margin-top: 1.6rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.legend svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

/* Symbolfarben */
.s-dmg { color: var(--dmg); }
.s-true { color: var(--true); }
.s-block { color: var(--block); }
.s-heal { color: var(--heal); }
.s-status { color: var(--status); }
.s-spark { color: var(--spark); }
.s-focus { color: var(--focus); }

/* --- Karten -------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.028) 0%,
    transparent 42%
  );
}

.pillars {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.pillar h3 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin-top: 1.1rem;
}
.pillar p {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.pillar-icon {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.pillar-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

/* --- Spielmodi ----------------------------------------------------------- */
.modes {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
}

.mode {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  overflow: hidden;
}
.mode::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--mode-tint, var(--accent)), transparent 75%);
}
.mode-chronicle { --mode-tint: var(--accent); }
.mode-endless { --mode-tint: var(--spark); }

.mode-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.mode-head svg.mode-glyph {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  color: var(--mode-tint);
}
.mode h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
}
.mode-kicker {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mode-tint);
}
.mode > p {
  margin-top: 1.15rem;
  color: var(--muted);
  font-size: 0.97rem;
}

.mode-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.82rem;
  color: var(--muted);
}
.stat-chip b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
}

/* --- Ablaufdiagramm ------------------------------------------------------ */
.flow {
  margin-top: 1.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 0;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 0.95rem;
  padding-bottom: 1.15rem;
}
.flow-step:last-child {
  padding-bottom: 0;
}
/* Verbindungslinie zwischen den Schritten */
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.35rem;
  top: 2.9rem;
  bottom: 0.15rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--mode-tint, var(--accent)) 0%,
    var(--border) 100%
  );
  opacity: 0.45;
  transform: translateX(-50%);
}

.flow-badge {
  position: relative;
  z-index: 1;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--mode-tint, var(--accent));
}
.flow-badge svg {
  width: 1.3rem;
  height: 1.3rem;
}
.flow-badge span {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--muted);
}

.flow-step h4 {
  margin: 0.35rem 0 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.flow-step p {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* Rücksprung-Marke am Ende einer Schleife */
.flow-loop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  margin-left: 3.65rem;
  padding: 0.55rem 0.9rem;
  border: 1px dashed color-mix(in srgb, var(--mode-tint, var(--accent)) 45%, var(--border));
  border-radius: 999px;
  font-size: 0.83rem;
  color: var(--mode-tint, var(--accent));
  align-self: start;
  justify-self: start;
}
.flow-loop svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Etappenkarte als Miniatur */
.tier-track {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.tier-node {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.tier-node svg {
  width: 0.8rem;
  height: 0.8rem;
}
.tier-node.is-battle { color: var(--dmg); }
.tier-node.is-respite { color: var(--heal); }
.tier-node.is-encounter { color: var(--status); }
.tier-node.is-warlord {
  color: var(--spark);
  border-color: color-mix(in srgb, var(--spark) 50%, var(--border));
  width: 1.85rem;
  height: 1.85rem;
}
.tier-track .dash {
  width: 0.55rem;
  height: 1px;
  background: var(--border);
  flex: none;
}

/* --- Kampfablauf: nummerierte Spur --------------------------------------- */
.round-flow {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: beat;
}

.beat {
  position: relative;
  padding: 1.35rem 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.beat:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
}
.beat::before {
  counter-increment: beat;
  content: counter(beat, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.beat-icon {
  margin: 0.85rem 0 0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--text);
}
.beat-icon svg {
  width: 100%;
  height: 100%;
}
.beat h3 {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 700;
}
.beat p {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-wrap: pretty;
}
.beat-tag {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.beat[data-side='warden'] .beat-icon { color: var(--warden); }
.beat[data-side='threat'] .beat-icon { color: var(--threat); }
.beat[data-side='spark'] .beat-icon { color: var(--spark); }

/* --- Gegner -------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.9rem;
}
.filter {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.filter:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}
.filter[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #16110c;
  font-weight: 600;
}

/* Ein Raster für alle Kartenlisten. Wie breit eine Karte mindestens sein
   will, entscheidet die Liste über --card-min — nicht ein zweites Raster
   daneben. */
.card-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--card-min, 19rem)), 1fr)
  );
}
.card-grid > [hidden] {
  display: none;
}

/* Gemeinsame Form von Gegner- und Gegenstandskarte: Spalte mit farbiger
   Kante, deren Ton die Karte über --card-tint setzt. */
.threat,
.item {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.35rem 1.5rem;
  border-left: 3px solid var(--card-tint, var(--border));
}

.threat[data-tier='lesser'] { --card-tint: #6c8fb0; }
.threat[data-tier='common'] { --card-tint: var(--block); }
.threat[data-tier='elite'] { --card-tint: var(--status); }
.threat[data-tier='warlord'] { --card-tint: var(--spark); }

.threat-top,
.item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-tint) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-tint) 42%, transparent);
  color: var(--card-tint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.threat-hp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}
.threat-hp svg {
  width: 1rem;
  height: 1rem;
  color: var(--dmg);
}
.threat-hp small {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Porträt und Name gehören zusammen — das Bild ist das Token, das im Spiel
   auf der Warden Stage steht, nicht eine zweite Zeichnung daneben. */
.threat-id,
.item-id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
}

.threat-portrait {
  width: 5.2rem;
  height: 5.2rem;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: radial-gradient(
      circle at 50% 68%,
      color-mix(in srgb, var(--card-tint) 26%, transparent) 0%,
      transparent 68%
    ),
    linear-gradient(160deg, #26262f 0%, #16161f 100%);
  /* Luft zwischen Rahmen und Token: Das Bild sitzt sonst auf der Kante auf.
     Mit `box-sizing: border-box` aus dem Reset bleibt die Kachel 5.2rem groß,
     die Zeichnung darin wird kleiner — die Reihe verschiebt sich also nicht. */
  padding: 6px;
  object-fit: contain;
  /* Der Token wirft im Spiel keinen eigenen Schatten — hier trägt ihn die Fläche. */
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.threat h3 {
  font-size: 1.18rem;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.card-flavor {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
  text-wrap: pretty;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 0.76rem;
  color: var(--muted);
}
.meta-chip svg {
  width: 0.85rem;
  height: 0.85rem;
}

.traits {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 0.75rem;
}
.trait {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.65rem;
  align-items: start;
}
.trait svg {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.trait b {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
}
.trait span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Wirkungen sitzen am Kartenfuß, damit sie über eine Reihe hinweg auf einer
   Linie liegen — was darüber steht, ist unterschiedlich lang. */
.chip-row {
  margin-top: auto;
  padding-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.effect-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text);
  background: linear-gradient(160deg, #262633 0%, #1a1a24 100%);
}
.effect-chip svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}
.effect-chip em {
  font-style: normal;
  color: var(--muted);
}

.grid-empty {
  margin-top: 1rem;
  color: var(--muted);
}

/* --- Gegenstände --------------------------------------------------------- */
/* Gegenstandskarten tragen kein Porträt und weniger Text als Gegnerkarten —
   sie dürfen schmaler stehen, sonst reißt die letzte Reihe auseinander. */
.items {
  --card-min: 16.5rem;
}

.item[data-use='once'] { --card-tint: var(--accent); }
.item[data-use='repeatable'] { --card-tint: var(--block); }

/* Das Zeichen steht beim Gegenstand da, wo beim Gegner das Porträt steht —
   es ist dasselbe Zeichen, das er im Gepäck trägt. */
.item-glyph {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--card-tint) 34%, var(--border));
  background: radial-gradient(
      circle at 50% 100%,
      color-mix(in srgb, var(--card-tint) 20%, transparent) 0%,
      transparent 72%
    ),
    var(--surface-2);
}
.item-glyph svg {
  width: 1.4rem;
  height: 1.4rem;
}
.item h3 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* --- Abschluss ----------------------------------------------------------- */
.cta {
  position: relative;
  margin-block: clamp(2rem, 6vw, 4rem);
  padding: clamp(2.25rem, 5.5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: -60% 0 auto;
  height: 150%;
  background: radial-gradient(
    ellipse 50% 45% at 50% 40%,
    rgba(224, 112, 58, 0.2),
    transparent 70%
  );
  pointer-events: none;
}
.cta > * {
  position: relative;
}
.cta h2 {
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.7rem);
}
.cta p {
  margin: 1rem auto 0;
  max-width: 34rem;
  color: var(--muted);
}
.cta .hero-actions {
  justify-content: center;
}

/* --- Fehlerseite (404) ---------------------------------------------------
   404.html erbt Grund, Raster und Knopfformen von der Startseite — eine
   Fehlerseite, die anders aussieht als die Seite, von der man kommt, liest
   sich wie ein fremder Server. Abweichend ist nur die Spalte: Der Hero teilt
   sich ab 62rem in Text und Würfelbühne, hier steht allein Text, und der
   gehört mittig statt in die linke Hälfte. */
.error-page {
  display: flex;
  align-items: center;
  /* Füllt den Rest des Schirms, aber nur den: abgezogen sind die 4,5rem der
     Kopfzeile und rund 7rem für den Fuß. Sonst steht auf einer Seite, die aus
     vier Zeilen besteht, ausgerechnet der Fuß unter der Kante und man muss
     scrollen, um das Ende einer Fehlermeldung zu sehen. */
  min-height: clamp(20rem, calc(100svh - 12rem), 44rem);
  /* Knapper als der Hero der Startseite: Der trägt Fließtext, Zahlen und die
     Würfelbühne, hier sind es vier Zeilen. Mit dessen Polstern schöbe die
     Seite den Fuß trotz der Höhe oben wieder aus dem Bild. */
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* `.hero.error-page` statt `.error-page`: Die Zweispaltigkeit steht weiter
   unten in `@media (min-width: 62rem)` und hätte bei gleicher Spezifität
   allein durch ihre Position gewonnen. */
.hero.error-page .wrap {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.error-copy {
  max-width: 38rem;
  text-align: center;
}

/* Die Ziffern tragen den Verlauf einer Würfelfläche: hell oben, dunkel unten.
   Das Zeichen der Marke, ohne ein zweites Bild zu laden. */
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2rem + 15vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  background: linear-gradient(
    160deg,
    var(--text) 0%,
    var(--muted) 48%,
    var(--accent-dim) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page h1 {
  margin-top: 1.4rem;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.error-page .hero-actions {
  justify-content: center;
}

/* --- Helden -------------------------------------------------------------- */
/* Dieselben Bausteine wie bei den Gegnern (.card, .card-grid, .threat-id,
   .card-flavor, .card-badge) — eigen ist nur, was sich wirklich unterscheidet:
   zwei Kennzahlen statt einer, die Disziplin-Liste und der Talentbaum. */
.heroes {
  --card-min: 20rem;
  /* Ohne das zieht ein aufgeklappter Talentbaum die beiden Nachbarkarten auf
     seine Höhe mit, und daneben stehen zwei halbleere Kästen. Jede Karte
     trägt hier ihre eigene Höhe. */
  align-items: start;
}

.hero-card {
  border-left: 3px solid var(--card-tint, var(--border));
  display: flex;
  flex-direction: column;
}

/* Ein Warden trägt HP UND Focus. Beim Gegner steht rechts oben eine Zahl,
   hier sind es zwei — deshalb untereinander statt nebeneinander, sonst
   drängen sie den Rang aus der Zeile. */
.hero-vitals {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.15;
}
.hero-vitals span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.hero-vitals svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--card-tint, var(--muted));
}
.hero-vitals small {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hero-lede-sm {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* --- Die drei Disziplinen, kurz ------------------------------------------ */
/* Die knappe Sicht: eine Zeile je Zweig. Alles Weitere steckt im Aufklapper,
   damit eine Heldenkarte nicht dreimal so hoch wird wie eine Gegnerkarte. */
.disciplines {
  list-style: none;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.6rem;
}
.disciplines li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.88rem;
  color: var(--muted);
}
/* Jede Disziplin trägt ihre eigene Farbe, nicht die des Wardens — im Spiel
   ist das die Farbe, an der man den Zweig auf dem Talentbaum wiedererkennt
   (`DisciplineStyle`). Drei Zweige in drei Farben sind auch hier die
   schnellere Orientierung als dreimal derselbe Ton. */
.disciplines svg {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--disc-tint, var(--card-tint, var(--muted)));
  margin-top: 0.05rem;
}
.disciplines b {
  display: block;
  color: var(--text);
  font-weight: 650;
}
/* Wie viele Talente in diesem Zweig stecken — rechtsbündig, damit die drei
   Zeilen eine Spalte bilden statt zu flattern. Die Zahl steht MIT ihrem Wort:
   Eine nackte „4" in einer Pille sagt niemandem, ob sie Talente, Stufen oder
   Kosten meint, und ein `title` erreicht auf dem Telefon niemanden. */
.disciplines em {
  font-style: normal;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* --- Talentbaum ----------------------------------------------------------- */
/* <details> statt Skript: Ohne JS bleibt der Baum bedienbar, und was
   eingeklappt ist, steht trotzdem im Dokument — Suchmaschinen und
   Vorlesewerkzeuge finden es. */
.talents {
  padding-top: 1.1rem;
}
.talents > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.talents > summary::-webkit-details-marker { display: none; }
.talents > summary:hover {
  border-color: var(--card-tint, var(--accent));
  background: var(--surface-2);
}
/* Der Pfeil wird selbst gezeichnet, statt den Browsermarker zu nehmen: der
   sieht in jeder Engine anders aus und lässt sich nicht drehen. */
.talents > summary::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
  flex: none;
  margin-left: 0.15rem;
}
.talents[open] > summary::before { transform: rotate(45deg); }
.talents-count {
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
}

.talent-branch { margin-top: 1.4rem; }
.talent-branch h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.7rem;
}
.talent-branch h4 svg {
  width: 1rem;
  height: 1rem;
  color: var(--disc-tint, var(--card-tint, var(--muted)));
}

.talent-branch > ol {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
/* Die Stufe steht als Kante links, nicht als Einrückung: Ein Baum mit drei
   Stufen und vier Knoten braucht keine Grafik, um lesbar zu sein. */
.talent-branch > ol > li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.2rem 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border-left: 2px solid var(--border);
  background: var(--surface-2);
}
.talent-branch > ol > li[data-tier='2'] {
  border-left-color: var(--disc-tint, var(--card-tint, var(--border)));
}
.talent-branch > ol > li[data-tier='3'] {
  border-left-color: var(--disc-tint, var(--card-tint, var(--accent)));
  border-left-width: 3px;
}
.talent-tier {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--muted);
}
.talent-branch > ol > li > b {
  font-size: 0.88rem;
  font-weight: 650;
}
.talent-cost {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.talent-branch > ol > li > p {
  grid-column: 2 / -1;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* Was das Talent gibt — im Spiel steht dieselbe Zeile im Tooltip. Sie trägt
   den Ton der Disziplin, damit sie sich vom Beschreibungstext darüber löst. */
.talent-branch > ol > li > p.talent-grant {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--disc-tint, var(--card-tint, var(--text)));
  font-weight: 600;
  margin-top: 0.35rem;
}
/* Würfel, Funke, Herz oder Ring — dasselbe Zeichen, das im Spiel über der
   Vorschau eines Talentknotens steht. */
.talent-branch > ol > li > p.talent-grant svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

/* Die Seiten eines Würfel-Talents und die Wirkung einer Reserve-Fähigkeit.
   Sechs kurze Zeilen brauchen keine Aufzählungspunkte des Browsers — der
   senkrechte Strich bündelt sie als eine Sache. */
.talent-faces {
  grid-column: 2 / -1;
  list-style: none;
  margin-top: 0.4rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--border);
  display: grid;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}
/* Eine Seite ist eine Zeile aus Zeichen. Sie umbricht, statt zu kürzen:
   Zwei Symbole plus ein Seitenname passen auf einem schmalen Schirm nicht
   nebeneinander, und abgeschnitten wäre die Seite unbrauchbar. */
.talent-faces > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  min-width: 0;
}
/* Ein Zeichen und sein Satz gehören zusammen und dürfen nicht auseinander
   umbrechen — sonst steht das Symbol allein am Zeilenende. */
.face-sym {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}
.face-sym svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}
/* Das Pluszeichen zwischen zwei Wirkungen derselben Seite. Es hängt am
   FOLGENDEN Zeichen, nicht zwischen beiden: Bricht die Zeile um, wandert es
   mit nach unten, statt als einzelnes „+“ am Zeilenende stehen zu bleiben. */
.face-sym + .face-sym::before {
  content: '+';
  margin-right: 0.32rem;
  color: var(--muted);
  opacity: 0.65;
  font-weight: 700;
}
/* Der Name einer benannten Seite („Verkeilt“) steht vor ihren Zeichen, im
   Ton der Karte — im Spiel trägt die Seite ihn ebenso über den Symbolen. */
.face-name {
  color: var(--text);
  font-weight: 650;
}
.face-name::after {
  content: ':';
  color: var(--muted);
  font-weight: 400;
}
/* Das Ziel einer Reserve-Fähigkeit — ein Zusatz, keine Wirkung, deshalb
   abgesetzt statt in der Reihe der Zeichen. */
.face-target { opacity: 0.75; }
.face-target::before {
  content: '—';
  margin-right: 0.35rem;
}
/* Eine leere Würfelseite. Sie bleibt sichtbar: Wer abzählt, wie oft ein
   Würfel nichts tut, muss sie sehen. */
.face-blank { opacity: 0.55; }
.talent-faces .talent-flavor {
  font-style: italic;
  opacity: 0.8;
  margin-top: 0.15rem;
}

/* Voraussetzungen. Im Spiel stehen sie rot, weil dort ein Knoten gesperrt
   ist; hier ist nichts gesperrt, hier ordnen sie nur den Baum — deshalb
   gedämpft statt alarmierend. */
.talent-branch > ol > li > p.talent-requires {
  grid-column: 2 / -1;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px dashed var(--border-soft);
  padding-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .talents > summary,
  .talents > summary::before { transition: none; }
}

/* --- Rechtstexte --------------------------------------------------------- */
/* Fließtext statt Kartenraster. Die Zeile ist auf rund 70 Zeichen begrenzt
   statt auf die 1180 px des Seitenrasters — über die volle Breite verliert das
   Auge beim Zeilenwechsel den Anschluss, und ein Impressum wird gelesen. */
.legal {
  /* Dieselbe Rechnung wie bei der Fehlerseite: Kopfzeile und Fuß abgezogen.
     Ein Impressum ist ein Dutzend Zeilen lang; ohne Mindesthöhe stünde der
     Fuß auf großen Schirmen mitten im Bild statt an dessen Ende. */
  min-height: clamp(18rem, calc(100svh - 12rem), 44rem);
  /* Knapper als `section[id]`, aus demselben Grund wie bei der Fehlerseite:
     dessen 7,5rem sind für Abschnitte voller Karten gedacht. Auf einer Seite
     aus einem Dutzend Zeilen schoben sie den Fuß aus dem Bild und erzeugten
     eine Bildlaufleiste für 70 Pixel. */
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Begrenzt wird der Textblock, nicht das `.wrap`: so bleibt er links im
   Seitenraster und steht bündig unter der Marke — dieselbe Anordnung wie bei
   `.section-head`. Ein zentriertes `.wrap` wäre gegenüber Kopf und Fuß, die
   beide über die vollen 1180 px laufen, eingerückt gewesen. */
.legal h1,
.legal-block {
  max-width: 46rem;
}

/* Die Größe der Abschnittsüberschriften, nicht die des Heros: die h1 steht
   allein auf der Seite, und die Hero-Größe erschlüge zwei Absätze Text. */
.legal h1 {
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.1rem);
}

.legal-block {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.legal-block h2 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

/* Kein Kursiv: `address` ist hier eine Anschrift, keine Betonung. */
.legal address {
  margin-top: 0.9rem;
  font-style: normal;
  color: var(--muted);
}

/* Beschriftung und Wert stehen als Paar nebeneinander, auf schmalen Schirmen
   untereinander — deshalb ein Raster mit zwei Spalten statt fester Breiten. */
.legal-contact {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1.75rem;
  color: var(--muted);
}
.legal-contact dt {
  font-weight: 600;
  color: var(--text);
}
.legal-contact dd {
  margin: 0;
}

/* Die Verweise im Text tragen dieselbe Kante wie die im Fuß. Die Regel steht
   unten bei `.site-footer a`, gemeinsam für beide Stellen. */

@media (max-width: 30rem) {
  .legal-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  .legal-contact dd + dt {
    margin-top: 0.75rem;
  }
}

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-block: 2.5rem 3rem;
  font-size: 0.87rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}
.site-footer p {
  margin-right: auto;
}
/* Gilt auch für die Verweise in Rechtstexten: identische Optik, eine Regel —
   zwei Kopien wären beim nächsten Farbwechsel auseinandergelaufen. */
.site-footer a,
.legal a {
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.site-footer a:hover,
.legal a:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* --- Einblenden beim Scrollen -------------------------------------------- */
/* Nur mit laufendem Skript darf etwas unsichtbar starten — sonst bliebe es
   unsichtbar. Die Marke .js setzt ein Inline-Skript im <head>. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Große Ansicht ------------------------------------------------------- */
@media (min-width: 62rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* --- Kleine Ansicht ------------------------------------------------------ */
@media (max-width: 52rem) {
  .nav-toggle {
    display: grid;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.6rem;
    background: rgba(14, 14, 21, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    padding: 0.85rem 1rem;
    font-size: 1rem;
  }
  .header-cta {
    display: none;
  }
  .hero-stage {
    order: -1;
    min-height: 0;
  }
  .hero-dice {
    grid-template-columns: repeat(3, auto);
  }
}

/* --- Zurückhaltende Bewegung -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .site-header,
  .hero-bg,
  .cta {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}