/* ==========================================================================
   WoW Forever – Design-Tokens (Basis-Theme: "Dunkler Stein & Gold")
   Andere Themes überschreiben nur die Farb-Variablen in diesem Block,
   siehe theme-pergament-holz.css und theme-arkan.css.
   ========================================================================== */
:root {
  /* Farben – Grundflächen */
  --c-bg: #0d0b08;
  --c-bg-alt: #1a1510;
  --c-surface: #17130e;
  --c-border-gold: #c9a227;
  --c-border-gold-bright: #f8d66d;
  --c-text: #ece3d2;
  --c-text-muted: #b3a68c;

  /* Farben – Fraktionen */
  --c-horde: #8c1616;
  --c-horde-bright: #c92c2c;
  --c-alliance: #144587;
  --c-alliance-bright: #2f6fc4;

  /* Farben – Klassen (offiziell, fraktions- und theme-unabhängig) */
  --class-druide: #ff7c0a;
  --class-jaeger: #aad372;
  --class-magier: #3fc7eb;
  --class-paladin: #f48cba;
  --class-priester: #ffffff;
  --class-schurke: #fff468;
  --class-schamane: #0070dd;
  --class-hexenmeister: #8788ee;
  --class-krieger: #c69b6d;

  /* Farben – Item-Qualität */
  --q-grau: #9d9d9d;
  --q-weiss: #ffffff;
  --q-gruen: #1eff00;
  --q-blau: #0070dd;
  --q-lila: #a335ee;
  --q-orange: #ff8000;

  /* Typografie */
  --font-heading: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --fs-hero: clamp(2.25rem, 5vw + 1rem, 5rem);
  --fs-h2: clamp(1.5rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.2vw + 1rem, 1.6rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.65;

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radien & Schatten */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow-gold: 0 0 16px rgba(248, 214, 109, 0.45);

  /* Bewegung */
  --dur-fast: 150ms;
  --dur-medium: 320ms;
  --dur-slow: 700ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Textur-Feinjustierung (von Themes überschreibbar) */
  --texture-opacity: 0.06;

  /* Status-Farben (Ampel im Dashboard) – fest, folgen keinem Theme, bewusst
     unterscheidbar von Klassen-/Rollen-/Fraktionsfarben, immer mit Text/Icon
     gepaart, nie alleiniger Bedeutungsträger. */
  --status-gut: #2f9e44;
  --status-warnung: #d98c00;
  --status-kritisch: #d03b3b;
  /* Aufgehellte Variante fuer Fliesstext auf dunklem Grund - #d03b3b direkt
     als Textfarbe erreicht nur Kontrast 4.09:1 auf --c-bg (Lighthouse-Fund,
     leere Dashboard-Kategorie), diese Variante liegt bei 5.3:1. */
  --status-kritisch-text: #e2564d;

  /* Akzentfarbe: standardmäßig Gold, wird per JS auf die Farbe der gewählten
     Fraktion bzw. Hauptklasse gesetzt (siehe formular.js setzeAkzent()).
     Bewusst "dezent" gehalten (siehe design_2026 Punkt 4) - nur wenige,
     ausgewählte Elemente reagieren, nicht die ganze Palette. */
  --akzent: var(--c-border-gold-bright);
  --akzent-dunkel: var(--c-border-gold);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-medium: 0ms;
    --dur-slow: 0ms;
  }
}

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Feines Rauschen als Stein-/Pergament-Textur, rein per CSS, kein Bild-Download */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--texture-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

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

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-4);
  color: var(--c-border-gold-bright);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
}

a {
  color: var(--c-border-gold-bright);
}

.container {
  width: min(1100px, 100% - var(--space-8));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}

.site-header__brand {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-border-gold-bright);
  text-decoration: none;
}

/* ==========================================================================
   Hero + Fraktions-Split
   ========================================================================== */
.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-24);
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--space-4);
}

.hero__lead {
  margin-inline: auto;
  color: var(--c-text-muted);
  font-size: 1.125rem;
}

.faction-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border-gold);
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .faction-split {
    grid-template-columns: 1fr;
  }
}

.faction-split__side {
  padding: var(--space-12) var(--space-6);
  text-decoration: none;
  color: var(--c-text);
  transition: filter var(--dur-medium) var(--ease-standard),
    transform var(--dur-medium) var(--ease-standard);
  position: relative;
}

.faction-split__side:hover,
.faction-split__side:focus-visible {
  filter: brightness(1.2);
}

.faction-split__side--horde {
  background: linear-gradient(160deg, var(--c-horde) 0%, #3a0909 100%);
}

.faction-split__side--alliance {
  background: linear-gradient(200deg, var(--c-alliance) 0%, #061d3a 100%);
}

.faction-split__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin: 0;
}

/* ==========================================================================
   Countdown
   ========================================================================== */
.countdown {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.countdown__block {
  min-width: 5.5rem;
  padding: var(--space-3) var(--space-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-md);
}

.countdown__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--c-border-gold-bright);
  display: block;
}

.countdown__label {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
  padding: var(--space-16) 0;
}

.section__intro {
  max-width: 60ch;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section__intro p {
  margin-inline: auto;
}

/* ==========================================================================
   Karten-Grid & Tooltip-Karten
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.tooltip-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-medium) var(--ease-standard),
    box-shadow var(--dur-medium) var(--ease-standard),
    border-color var(--dur-medium) var(--ease-standard);
}

.tooltip-card:hover,
.tooltip-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--c-border-gold-bright);
  box-shadow: var(--shadow-card), var(--shadow-glow-gold);
}

.tooltip-card__class {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin: 0 0 var(--space-1);
  /* Klassenfarbe mit der Theme-Textfarbe mischen: behält den Farbton,
     bleibt aber in jedem Theme lesbar (z. B. Priester-Weiß auf hellem
     Pergament-Hintergrund würde sonst fast verschwinden). */
  color: color-mix(in srgb, var(--tooltip-accent, var(--c-border-gold-bright)) 55%, var(--c-text));
}

.tooltip-card__role {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.tooltip-card__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.tooltip-card__list li {
  padding-left: var(--space-4);
  position: relative;
  margin-bottom: var(--space-1);
}

.tooltip-card__list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--tooltip-accent, var(--c-border-gold)) 55%, var(--c-text));
}

.badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: var(--fs-small);
  border: 1px solid currentColor;
  margin-bottom: var(--space-3);
}

.badge--beta {
  color: var(--q-orange);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2a1c04;
  background: linear-gradient(180deg, var(--c-border-gold-bright) 0%, var(--c-border-gold) 100%);
  border: 1px solid #7a5c12;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
  box-shadow: 0 2px 0 #7a5c12;
}

.btn:hover {
  box-shadow: 0 2px 0 #7a5c12, var(--shadow-glow-gold);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* .btn setzt eine eigene display-Deklaration, die sonst das
   hidden-Attribut ueberschreiben wuerde (Autor-CSS gewinnt immer gegen
   das UA-Stylesheet, unabhaengig von Spezifitaet). */
.btn[hidden] {
  display: none;
}

/* ==========================================================================
   Scroll-Reveal (progressive enhancement, ohne JS)
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      /* "forwards" statt "both": Ohne rückwirkendes Fill bleibt der Inhalt
         sichtbar (Standard-Opazität 1), falls die Timeline nie aktiviert
         wird (z. B. Seite passt komplett in den Viewport, kein Scrollen
         möglich). Nur "both" würde den Inhalt dann dauerhaft unsichtbar
         lassen, weil die "from"-Keyframe (opacity 0) vorab greift. */
      animation: fade-up linear forwards;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Generische Inline-Rueckmeldung (Erfolg/Fehler) - wiederverwendet von
   admin.js, formular.js (Discord-Kopieren) u. a.
   ========================================================================== */
.meldung {
  font-size: var(--fs-small);
  margin-top: var(--space-2);
}

.meldung--ok {
  color: var(--status-gut);
}

.meldung--fehler {
  color: var(--status-kritisch-text);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: var(--space-12) 0 var(--space-16);
  border-top: 1px solid var(--c-bg-alt);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  text-align: center;
}

.site-footer a {
  color: var(--c-text-muted);
}