/* WoW Forever - Basis: Design-Tokens, Reset, Typografie.
   Farben: Qualitaets-/Klassenfarben exakt nach docs/recherche/vorbild-wowhead.md.
   Grundflaechen Nachtblau-Grau, Akzent Himmelblau-nach-Gold (Skyborne). */

:root {
  /* Qualitaetsfarben. Poor/Common/Uncommon/Legendary/Artifact/Heirloom sind
     exakt Wowhead/Blizzard und liegen auf allen genutzten dunklen
     Hintergruenden bereits ueber 4,5:1. Rare und Epic sind gegenueber dem
     Original (#0070dd/#9345ff, dort nur 2,89-3,98:1) aufgehellt, gleicher
     Farbton, damit sie auf jedem genutzten Hintergrund (siehe Bericht:
     #121a26, #0f151f, #1a2433, #0e1420, #212d3f, #17202d) die 4,5:1-Schwelle
     fuer normalen Text erreichen. */
  --wf-quality-poor: #9d9d9d;
  --wf-quality-common: #ffffff;
  --wf-quality-uncommon: #1eff00;
  --wf-quality-rare: #2799ff;
  --wf-quality-epic: #b47bff;
  --wf-quality-legendary: #ff8000;
  --wf-quality-artifact: #e5cc80;
  --wf-quality-heirloom: #00ccff;

  /* Klassenfarben (9 Classic-Klassen) */
  --wf-class-warrior: #c69b6d;
  --wf-class-paladin: #f48cba;
  --wf-class-hunter: #aad372;
  --wf-class-rogue: #fff468;
  --wf-class-priest: #ffffff;
  --wf-class-shaman: #3d9bff; /* Blizzard: #0070dd (nur 2,9-3,6:1 auf den dunklen Flaechen); gleicher Farbton, aufgehellt wie Rare/Epic */
  --wf-class-mage: #3fc7eb;
  --wf-class-warlock: #8788ee;
  --wf-class-druid: #ff7c0a;

  /* Grundflaechen: kuehles Nachtblau-Grau */
  --wf-bg-body: #121a26;
  --wf-bg-header: #0f151f;
  --wf-bg-card: #1a2433;
  --wf-bg-content: #0e1420;
  --wf-bg-table-head: #212d3f;
  --wf-bg-table-row-alt: #17202d;
  --wf-border: #2a3648;
  /* Rand von Bedienelementen (Eingabefeld, Auswahl, Kontrollkaestchen): als
     einziger Hinweis auf die Flaeche braucht er laut WCAG 1.4.11 mindestens
     3:1 - --wf-border liegt nur bei ~1,3:1. Gemessen: 4,1:1 auf Karte
     #1a2433, 4,6:1 auf Grund #121a26, 4,8:1 im Feld #0e1420. */
  --wf-control-border: #6f84a2;
  --wf-control-bg: #0e1420;
  /* Eigener Ton fuer waagrechte Scrollleisten (Zeitleiste, Kartenreihen,
     Tabellen): --wf-border allein liegt nur bei ~1,3-1,4:1 gegen die
     dunklen Flaechen und waere als Greiffläche kaum zu sehen. Dieser Ton
     liegt auf allen genutzten Hintergruenden bei mindestens 3,1:1 (siehe
     Bericht) - dezent, aber noch greifbar. */
  --wf-scrollbar-thumb: #5f7ba0;
  --wf-text: #dbe3ee;
  --wf-text-dim: #a7b4c7;
  --wf-heading: #f3f6fa;
  --wf-link: #6fc3f7;
  --wf-link-hover: #9ad8ff;

  /* Markenakzent: Himmelblau-nach-Gold-Verlauf (Skyborne) */
  --wf-accent: #4dabf7;
  --wf-accent-gold: #f0b429;
  --wf-accent-gradient: linear-gradient(135deg, var(--wf-accent) 0%, var(--wf-accent-gold) 100%);
  --wf-accent-hover: #74c3ff;
  --wf-accent-text: #0b1017;

  /* Zierwerk ("episches" Thema, siehe assets/css/theme.css).
     Gold traegt Rahmen, Trenner und Initialen; die Werte sind auf den
     dunklen Grundflaechen alle ueber 7:1 Kontrast. */
  --wf-gold: #e3c37a;
  --wf-gold-bright: #ffeab8;
  --wf-gold-deep: #9a7628;
  --wf-gold-dark: #5d4818;
  --wf-gold-line: rgba(227, 195, 122, 0.38);
  /* Goldrand fuer Bedienelemente (Ghost-Knopf, Schnellzugriff, Filter-
     Schaltflaeche): 3,5:1 auf Karte und Grund, --wf-gold-line nur 2,5:1. */
  --wf-gold-edge: #8a7648;
  --wf-gold-glow: rgba(240, 180, 41, 0.28);
  --wf-stone: #1b2433;
  --wf-stone-dark: #0c111a;
  --wf-parchment-bg: #221d14;
  --wf-parchment-fg: #efdcb4;
  --wf-frame-shadow: 0 0 0 1px var(--wf-gold-line), 0 10px 28px rgba(0, 0, 0, 0.6);

  /* Konfidenz-Badges */
  --wf-badge-bestaetigt-bg: #163425;
  --wf-badge-bestaetigt-fg: #6fe0a0;
  --wf-badge-gutbelegt-bg: #16273a;
  --wf-badge-gutbelegt-fg: #7ec4f2;
  --wf-badge-unbestaetigt-bg: #3a2c16;
  --wf-badge-unbestaetigt-fg: #e0b06f;
  --wf-badge-classic-bg: #1f2a3a;
  --wf-badge-classic-fg: #c3cedd;

  /* Reifegrad-Badges (/tools): eigene Tokens, damit Navigation und
     Startseite dieselben Badges spaeter unabhaengig von der
     Konfidenz-Faerbung wiederverwenden koennen. */
  --wf-reifegrad-fertig-bg: #163425;
  --wf-reifegrad-fertig-fg: #6fe0a0;
  --wf-reifegrad-beta-bg: #16273a;
  --wf-reifegrad-beta-fg: #7ec4f2;
  --wf-reifegrad-arbeit-bg: #3a2c16;
  --wf-reifegrad-arbeit-fg: #e0b06f;

  /* Tooltip-Text: flache Attributwerte weiss, nur Effekte gruen */
  --wf-stat-white: #ffffff;
  --wf-effect-green: #1eff00;

  /* Muenzfarben */
  --wf-coin-gold: #ffd700;
  --wf-coin-silver: #c8c8c8;
  --wf-coin-copper: #c07a45;

  /* Typografie */
  --wf-font-body: 'Inter', Arial, "Helvetica Neue", Helvetica, sans-serif;
  --wf-font-display: 'Cinzel', Georgia, "Times New Roman", serif;
  /* 13px statt 12px: Datum, Brotkrumen, Quellen-Meta und Badges sind
     Lesetext, keine Zierde - 12px in der hellgrauen Nebenfarbe war auf
     Handys grenzwertig klein. */
  --wf-fs-100: 0.8125rem; /* 13px - Meta, Badges */
  --wf-fs-200: 0.875rem;  /* 14px - Tabellen, dichte UI */
  --wf-fs-300: 1rem;      /* 16px - Basis-Fliesstext (mobil) */
  --wf-fs-400: 1.0625rem; /* 17px - betonter Text, Karten-Titel */
  --wf-fs-500: 1.25rem;   /* 20px - H3 / Tooltip-Name */
  --wf-fs-600: 1.5rem;    /* 24px - H2 */
  --wf-fs-700: 2rem;      /* 32px - H1 klein / Countdown-Ziffern */
  --wf-fs-800: 2.5rem;    /* 40px - H1 Hero */

  /* Abstaende (8px-Raster) */
  --wf-sp-1: 0.25rem;
  --wf-sp-2: 0.5rem;
  --wf-sp-3: 0.75rem;
  --wf-sp-4: 1rem;
  --wf-sp-5: 1.5rem;
  --wf-sp-6: 2rem;
  --wf-sp-7: 3rem;

  /* Radien & Schatten */
  --wf-radius-sm: 4px;
  --wf-radius-md: 8px;
  --wf-radius-lg: 12px;
  --wf-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -10px rgba(0, 0, 0, 0.55);
  --wf-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);

  /* Rhythmus: Innenabstand von Karten/Kaesten (waechst ab Tablet) und
     Abstand zwischen Seitenabschnitten. */
  --wf-card-pad: var(--wf-sp-4);
  --wf-section-gap: var(--wf-sp-6);
  /* Lesebreite von Fliesstext und Einleitungen (~75-80 Zeichen). */
  --wf-measure: 40rem;

  /* Fokusring: 3px, ~7:1 auf dem Grund, ~6,3:1 auf Karten (WCAG 2.4.11/
     1.4.11 verlangen 3:1). Die dunkle Aussenkante trennt ihn von hellen
     Bildflaechen (Hero-Artwork, Beitragsbilder). */
  --wf-focus-ring: #6cc0ff;
  --wf-focus-halo: #0a0f17;

  --wf-maxwidth: 1280px;

  color-scheme: dark;
}

@media (min-width: 640px) {
  :root { --wf-card-pad: 1.25rem; }
}

@media (min-width: 960px) {
  :root { --wf-section-gap: 3rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--wf-bg-body);
  color: var(--wf-text);
  font-family: var(--wf-font-body);
  font-size: var(--wf-fs-300);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

::selection { background: rgba(240, 180, 41, 0.35); color: var(--wf-heading); }

p { text-wrap: pretty; }

/* Lange deutsche Zusammensetzungen ("Auftragsverarbeitungsvertrags") duerfen
   die Zeile nie sprengen - bei 320px Breite (Reflow, WCAG 1.4.10) oder mit
   erhoehtem Buchstabenabstand (1.4.12) sonst waagrechtes Scrollen. Erst
   Silbentrennung (lang="de"), zur Not Umbruch mitten im Wort. */
p, li, dd, dt, td, th, figcaption, summary, blockquote {
  overflow-wrap: break-word;
  hyphens: auto;
}

a { color: var(--wf-link); text-decoration: none; }
a:hover { color: var(--wf-link-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--wf-heading);
  font-family: var(--wf-font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--wf-sp-3) 0;
  letter-spacing: 0.01em;
  text-wrap: balance;
  /* Einzelne lange Woerter (deutsche Zusammensetzungen wie "Feldkommandanten",
     "Datenschutzerklaerung") sprengen bei den grossen Ueberschrift-
     Schriftgroessen sonst die 375px-Breite, weil ein Wort ohne Leerzeichen
     nicht umbricht (gemessen: /datenschutz, /rasse/skyborne, /zone/*,
     /item-set/*, /fraktion/*). */
  overflow-wrap: break-word;
}

h1 {
  /* Fliessend statt Sprung: 26px auf dem Handy bis 34px ab ~1100px. */
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  line-height: 1.2;
  margin-bottom: var(--wf-sp-4);
}
h2 { font-size: var(--wf-fs-600); }
h3 { font-size: var(--wf-fs-500); }
/* h4 bleibt in der Fliesstextschrift: ab dieser Ebene steht Lesbarkeit in
   dichten Listen ueber dem Schauwert. */
h4 { font-family: var(--wf-font-body); font-size: var(--wf-fs-400); }

/* height: auto ist Pflicht, sobald Bilder width/height als Attribut tragen
   (tun sie, gegen Layoutspruenge beim Laden): ohne die Zeile wuerde
   max-width das Bild schmaler machen, die Hoehe aber auf dem Attributwert
   stehen bleiben - das Bild waere gestaucht. Klassen mit eigener Hoehe
   (Icons, Tooltip-Bilder) gewinnen weiterhin ueber die Spezifitaet. */
img { max-width: 100%; height: auto; display: block; }

table { font-size: var(--wf-fs-200); }

/* ============ Fokus ============
   Ein Ring fuer alles Bedienbare. Bedienelemente mit eigenem Rand
   (Eingabefelder) behalten ihn und bekommen den Ring zusaetzlich. */
:focus-visible {
  outline: 3px solid var(--wf-focus-ring);
  outline-offset: 2px;
}

/* Textfelder und Auswahlen behalten zusaetzlich den farbigen Rand. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--wf-focus-ring);
}

/* ============ Formularelemente ============
   Einheitlich fuer alle Seiten (Filter, Rechner, Suche). Rand >= 3:1
   (--wf-control-border), Schrift >= 16px auf dem Handy, damit iOS nicht
   hineinzoomt, 44px Mindesthoehe. */
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
textarea {
  font-family: var(--wf-font-body);
  font-size: var(--wf-fs-300);
  line-height: 1.3;
  color: var(--wf-text);
  background-color: var(--wf-control-bg);
  border: 1px solid var(--wf-control-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  min-height: 44px;
  max-width: 100%;
}

@media (min-width: 768px) {
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  textarea { font-size: var(--wf-fs-200); }
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23e3c37a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.75rem 0.5rem;
  cursor: pointer;
}

select option { background: var(--wf-bg-card); color: var(--wf-text); }

input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--wf-accent-gold);
  cursor: pointer;
}

input::placeholder,
textarea::placeholder { color: var(--wf-text-dim); opacity: 1; }

input:hover:not(:focus-visible),
select:hover:not(:focus-visible),
textarea:hover:not(:focus-visible) { border-color: var(--wf-gold); }

button:disabled,
input:disabled,
select:disabled { cursor: not-allowed; }

.wf-container {
  max-width: var(--wf-maxwidth);
  margin: 0 auto;
  padding: 0 var(--wf-sp-4);
}

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

/* Sprungziel des Skip-Links: programmatisch fokussierbar (tabindex="-1"),
   aber kein Bedienelement - ein Umriss um den ganzen Inhaltsbereich waere
   nur Rauschen. */
#wf-main:focus { outline: none; }

.wf-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wf-accent);
  color: var(--wf-accent-text);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  min-height: 44px;
  box-sizing: border-box;
  z-index: 1000;
  border-radius: var(--wf-radius-sm);
  font-weight: 700;
}

.wf-skiplink:focus {
  left: var(--wf-sp-2);
  top: var(--wf-sp-2);
}