/* WoW Forever - Komponenten: Karten, Badges, Tabellen, Filter, Tabs,
   Buttons, Countdown, Tooltip, Muenzen, Paginierung, Icon-Kacheln.
   Praefix wf-. Auch von Modulen genutzt, die noch nicht existieren
   (Datenbank, Tools) - Klassen sind hier vollstaendig angelegt. */

/* ============ Karte (News) ============ */
.wf-card {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--wf-sp-3);
  box-shadow: var(--wf-shadow-card);
  /* .wf-card steht oft als Kind in einem Grid (.wf-cardgrid, einspaltig ab
     375px): ohne min-width: 0 verweigert der Grid-Default min-width: auto
     das Schrumpfen unter die Breite eines langen Titelworts (gemessen:
     /item-set/381, /item-set/1734, Karten unter "Teile des Sets"). */
  min-width: 0;
}

/* Absaetze in Karten: Abstand regelt das Flex-"gap" der Karte, nicht der
   Browser-Standardrand (der machte aus 12px Luft 28px). */
.wf-card p { margin: 0; }
.wf-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--wf-sp-2); flex-wrap: wrap; }
.wf-card__date { font-size: var(--wf-fs-100); color: var(--wf-text-dim); }
.wf-card__title { font-size: var(--wf-fs-400); font-weight: 700; color: var(--wf-heading); margin: 0; line-height: 1.35; }
.wf-card__title a { color: inherit; }
.wf-card__excerpt { font-size: var(--wf-fs-200); line-height: 1.6; color: var(--wf-text); flex-grow: 1; }
.wf-card__tags { display: flex; flex-wrap: wrap; gap: var(--wf-sp-2); }

/* Ganze Karte anklickbar ("gestreckter Link"): der Titel-Link spannt ueber
   die Karte, alles andere Bedienbare (Schlagwoerter, Bildlink, Links im
   Text) liegt darueber und bleibt eigenstaendig. Das Ziel ist damit so gross
   wie die Karte - der Titel allein waere eine 24px hohe Zeile. */
.wf-card a,
.wf-guidecard a { position: relative; z-index: 2; }
.wf-card__title a,
.wf-guidecard__title a { position: static; z-index: auto; }
.wf-card__title a::after,
.wf-guidecard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.wf-card:has(.wf-card__title a),
.wf-guidecard:has(.wf-guidecard__title a) { cursor: pointer; }

/* Karte (Guide) */
.wf-guidecard {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-card-pad);
  display: flex;
  gap: var(--wf-sp-3);
  align-items: flex-start;
  min-width: 0;
}

.wf-guidecard__icon { width: 36px; height: 36px; border-radius: var(--wf-radius-sm); border: 1px solid var(--wf-border); flex-shrink: 0; }
.wf-guidecard__title { font-size: var(--wf-fs-300); font-weight: 700; color: var(--wf-heading); margin-bottom: var(--wf-sp-1); line-height: 1.35; }
.wf-guidecard__title a { color: inherit; }
.wf-guidecard__desc { font-size: var(--wf-fs-200); line-height: 1.6; color: var(--wf-text-dim); margin: 0; }
/* Stand und Kennzeichen wie auf den News-Karten: Aktualitaet und
   Belastbarkeit sieht man schon in der Liste, nicht erst im Guide. */
.wf-guidecard__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--wf-sp-2); flex-wrap: wrap; margin: var(--wf-sp-2) 0 var(--wf-sp-3); font-size: var(--wf-fs-100); color: var(--wf-text-dim); }

/* Einleitungssatz unter einem Seitentitel (Listen-Seiten). */
.wf-page-intro { color: var(--wf-text-dim); margin: 0 0 var(--wf-sp-5); max-width: var(--wf-measure); font-size: var(--wf-fs-400); line-height: 1.6; }

/* Icon-Kacheln (Datenbank-Schnellzugriff) */
.wf-icontile {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-sp-3) var(--wf-sp-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wf-sp-2);
  color: var(--wf-text);
  min-height: 44px;
  justify-content: center;
}

.wf-icontile:hover, .wf-icontile:focus-visible { border-color: var(--wf-accent); color: var(--wf-heading); text-decoration: none; }
.wf-icontile__img { width: 36px; height: 36px; border-radius: var(--wf-radius-sm); border: 1px solid var(--wf-border); }
.wf-icontile__label { font-size: var(--wf-fs-200); font-weight: 600; }

/* Tag */
.wf-tag {
  font-size: var(--wf-fs-100);
  line-height: 1.3;
  background: var(--wf-bg-body);
  border: 1px solid var(--wf-border);
  color: var(--wf-text-dim);
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-block;
  position: relative;
}

/* Schlagwort-Links: sichtbar 29px hoch, die Trefferflaeche reicht ueber ein
   unsichtbares Polster auf 44px (und mindestens 44px breit). Genau das
   liefert der Abstand der Reihe (gap 8px) ohne Ueberlappung der Nachbarn. */
a.wf-tag::after { content: ""; position: absolute; inset: -10px -4px; }

a.wf-tag:hover { color: var(--wf-heading); border-color: var(--wf-accent); text-decoration: none; }

/* Klassen-Chip (z. B. Skyborne-Teaser auf der Startseite): kleine Marke wie
   .wf-tag, zusaetzlich mit Klassen-Icon. */
.wf-classchip {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-sp-2);
  font-size: var(--wf-fs-100);
  background: var(--wf-bg-body);
  border: 1px solid var(--wf-border);
  color: var(--wf-text);
  padding: 3px var(--wf-sp-3) 3px 3px;
  border-radius: 999px;
}

.wf-classchip__icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }

/* Konfidenz-Badge */
.wf-badge {
  display: inline-block;
  font-size: var(--wf-fs-100);
  font-weight: 700;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: var(--wf-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.wf-badge--bestaetigt { background: var(--wf-badge-bestaetigt-bg); color: var(--wf-badge-bestaetigt-fg); }
.wf-badge--gutbelegt { background: var(--wf-badge-gutbelegt-bg); color: var(--wf-badge-gutbelegt-fg); }
.wf-badge--unbestaetigt { background: var(--wf-badge-unbestaetigt-bg); color: var(--wf-badge-unbestaetigt-fg); }
.wf-badge--classic { background: var(--wf-badge-classic-bg); color: var(--wf-badge-classic-fg); }

/* Direktes Kind einer Spalten-Flexbox (Karte, Zeitleisten-Kachel): ohne
   align-self zieht deren align-items: stretch das Kennzeichen auf die volle
   Breite, obwohl es nur inline-block ist. In einer Zeilen-Flexbox
   (z. B. .wf-card__meta, wo das Badge neben dem Datum mittig sitzen soll)
   bleibt das unangetastet - dort greift diese Regel nicht. */
.wf-card > .wf-badge,
.wf-hero-timeline__item > .wf-badge {
  align-self: flex-start;
}

/* Reifegrad-Badge (z. B. /tools): eigene Varianten, unabhaengig von der
   Konfidenz-Faerbung oben, damit Navigation und Startseite denselben
   Reifegrad einer Seite spaeter mit derselben Klasse zeigen koennen. */
.wf-badge--reifegrad-fertig { background: var(--wf-reifegrad-fertig-bg); color: var(--wf-reifegrad-fertig-fg); }
.wf-badge--reifegrad-beta { background: var(--wf-reifegrad-beta-bg); color: var(--wf-reifegrad-beta-fg); }
.wf-badge--reifegrad-arbeit { background: var(--wf-reifegrad-arbeit-bg); color: var(--wf-reifegrad-arbeit-fg); }

/* ============ Buttons ============ */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wf-sp-2);
  background: var(--wf-accent-gradient);
  color: var(--wf-accent-text);
  font-weight: 700;
  padding: var(--wf-sp-2) var(--wf-sp-4);
  border-radius: var(--wf-radius-md);
  border: none;
  cursor: pointer;
  font-size: var(--wf-fs-200);
  line-height: 1.2;
  min-height: 44px;
  text-align: center;
  transition: filter 120ms ease, transform 120ms ease;
}

.wf-btn:hover, .wf-btn:focus-visible { filter: brightness(1.08); text-decoration: none; color: var(--wf-accent-text); }
.wf-btn:active { transform: translateY(1px); filter: brightness(0.97); }
.wf-btn[disabled], .wf-btn[aria-disabled="true"] { filter: grayscale(0.7) brightness(0.7); cursor: not-allowed; transform: none; }
.wf-btn--ghost { background: transparent; background-image: none; color: var(--wf-text); border: 1px solid var(--wf-gold-edge); }
.wf-btn--ghost:hover { border-color: var(--wf-accent); color: var(--wf-heading); filter: none; }
.wf-btn--ghost:active { filter: none; background: rgba(255, 255, 255, 0.05); }

/* ============ Countdown ============ */
.wf-countdown {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  padding: var(--wf-sp-4);
  box-shadow: var(--wf-shadow-card);
}

@media (min-width: 640px) { .wf-countdown { padding: var(--wf-sp-5); } }

.wf-countdown__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--wf-sp-3); gap: var(--wf-sp-2); flex-wrap: wrap; }
.wf-countdown__title { font-weight: 700; color: var(--wf-heading); font-size: var(--wf-fs-400); line-height: 1.3; }

@media (min-width: 640px) { .wf-countdown__title { font-size: var(--wf-fs-500); } }
.wf-countdown__date { color: var(--wf-text); font-size: var(--wf-fs-200); }
.wf-countdown__digits { display: flex; gap: var(--wf-sp-2); }
.wf-countdown__unit { flex: 1; min-width: 0; background: var(--wf-bg-body); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); text-align: center; padding: var(--wf-sp-2) var(--wf-sp-1); }
.wf-countdown__num { display: block; font-size: clamp(1.5rem, 1rem + 2.5vw, 2rem); line-height: 1.3; font-weight: 700; font-family: var(--wf-font-display); background: var(--wf-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.wf-countdown__unitlabel { display: block; font-size: var(--wf-fs-100); color: var(--wf-text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.wf-countdown__note { margin-top: var(--wf-sp-2); font-size: var(--wf-fs-100); color: var(--wf-text-dim); }
.wf-countdown__done { font-size: var(--wf-fs-500); font-weight: 700; color: var(--wf-heading); margin: 0; }

/* ============ Zeitleiste im Hero (Startseite) ============
   Roadmap-Leiste ueber alle Stationen aus zeitplan.yaml, horizontal
   scrollbar statt umbrechend - so bleibt sie auf 375px bedienbar, ohne
   dass die Seite selbst quer scrollt (das Scrollen bleibt auf die Liste
   begrenzt). Reihenfolge = geordnete Liste im Markup. */
.wf-hero-timeline {
  display: flex;
  gap: var(--wf-sp-3);
  overflow-x: auto;
  list-style: none;
  margin: var(--wf-sp-5) 0 var(--wf-sp-4);
  padding: var(--wf-sp-1) var(--wf-sp-1) var(--wf-sp-3);
  max-width: 100%;
  /* Karten rasten beim Wischen ein, statt halb angeschnitten stehen zu
     bleiben; die naechste Karte lugt als Hinweis auf mehr hervor. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--wf-sp-1);
}

.wf-hero-timeline__item {
  flex: 0 0 min(220px, 72vw);
  display: flex;
  flex-direction: column;
  gap: var(--wf-sp-1);
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-top: 3px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  scroll-snap-align: start;
}

/* Nur Rand und Symbol schwaechen, nie den Text: #a7b4c7 (--wf-text-dim) auf
   #1a2433 (--wf-bg-card) liegt bei voller Deckkraft bei ~7,4:1 (WCAG AA
   verlangt 4,5:1) - eine Opacity auf die ganze Karte draueckte Datum und
   Status zusammen mit dem Rand auf ~4,4:1. */
.wf-hero-timeline__item--erledigt { border-top-color: var(--wf-text-dim); }
.wf-hero-timeline__item--erledigt .wf-hero-timeline__symbol { opacity: 0.7; }
.wf-hero-timeline__item--laeuft { border-top-color: var(--wf-accent-gold); }
.wf-hero-timeline__item--kommt { border-top-color: var(--wf-accent); }

.wf-hero-timeline__date {
  margin: 0;
  line-height: 1.4;
  font-size: var(--wf-fs-100);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wf-text-dim);
}

.wf-hero-timeline__title { margin: 0; font-weight: 700; color: var(--wf-heading); font-size: var(--wf-fs-300); line-height: 1.35; }

.wf-hero-timeline__status {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-1);
  margin: 0;
  font-size: var(--wf-fs-100);
  color: var(--wf-text);
}

.wf-hero-timeline__symbol { font-size: var(--wf-fs-200); line-height: 1; }
.wf-hero-timeline__more { margin: 0 0 var(--wf-sp-2); }
/* Startseite: "Raids" folgte 20px unter dem Knopf "Alle Dungeons ansehen"
   und las sich wie dessen Beschriftung. */
.wf-hero-timeline__more + h3 { margin-top: var(--wf-sp-6); }

/* ============ Schnellzugriffs-Leiste (Startseite, direkt unter Hero) ============ */
.wf-quicknav { padding-top: var(--wf-sp-4); padding-bottom: var(--wf-sp-4); border-bottom: 1px solid var(--wf-border); }

.wf-quicknav__list {
  display: flex;
  gap: var(--wf-sp-3);
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: var(--wf-sp-1);
}

.wf-quicknav__list > li { flex: 0 0 auto; scroll-snap-align: start; }
.wf-quicknav__list { scroll-snap-type: x proximity; scroll-padding-inline: var(--wf-sp-1); }

.wf-quicknav__link {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-2);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border: 1px solid var(--wf-gold-edge);
  border-radius: 999px;
  background: var(--wf-bg-card);
  color: var(--wf-text);
  white-space: nowrap;
  min-height: 44px;
}

.wf-quicknav__link:hover, .wf-quicknav__link:focus-visible { border-color: var(--wf-accent); color: var(--wf-heading); text-decoration: none; }
.wf-quicknav__icon { width: 24px; height: 24px; border-radius: var(--wf-radius-sm); flex-shrink: 0; }
.wf-quicknav__label { font-size: var(--wf-fs-200); font-weight: 600; }

/* ============ Waagrechte Scrollleisten ============
   Dezenter Balken statt des weissen Systemstandards auf dunklem Grund, fuer
   jeden waagrecht scrollbaren Bereich der Seite (Zeitleiste im Hero,
   Dungeon-/Raid-Kartenreihen, Schnellzugriff, Tabellen unter 640px).
   scrollbar-color/-width fuer Firefox, ::-webkit-scrollbar* fuer
   Chromium/Safari - beide Wege noetig, es gibt keinen gemeinsamen Standard. */
.wf-hero-timeline,
.wf-quicknav__list,
.wf-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--wf-scrollbar-thumb) var(--wf-bg-body);
}

.wf-hero-timeline::-webkit-scrollbar,
.wf-quicknav__list::-webkit-scrollbar,
.wf-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.wf-hero-timeline::-webkit-scrollbar-track,
.wf-quicknav__list::-webkit-scrollbar-track,
.wf-table-wrap::-webkit-scrollbar-track {
  background: var(--wf-bg-body);
}

.wf-hero-timeline::-webkit-scrollbar-thumb,
.wf-quicknav__list::-webkit-scrollbar-thumb,
.wf-table-wrap::-webkit-scrollbar-thumb {
  background-color: var(--wf-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--wf-bg-body);
}

.wf-hero-timeline::-webkit-scrollbar-thumb:hover,
.wf-quicknav__list::-webkit-scrollbar-thumb:hover,
.wf-table-wrap::-webkit-scrollbar-thumb:hover {
  background-color: var(--wf-accent);
}

/* Diese drei Bereiche sind per JS/Markup ohnehin nicht immer fokussierbar
   (siehe tabindex="0" auf den <ol>-Zeitleisten in home.php) - der globale
   :focus-visible-Umriss aus base.css greift dafuer automatisch. */

/* ============ Tabellen (Datenbank/Zeitplan) ============ */
/* contain: layout ist Pflicht, nicht nur Kosmetik: ohne das zaehlt eine
   breite Tabelle innerhalb dieses eigentlich richtig scrollenden Wrappers
   trotzdem zur Scrollbreite des ganzen Dokuments (document.documentElement.
   scrollWidth), obwohl der Wrapper sie visuell korrekt klemmt - gemessen an
   /tools/editionen und /tools/rassen-klassen. contain: layout macht den
   Wrapper zu einem echten Containment-Root und kappt das. */
.wf-table-wrap { overflow-x: auto; border: 1px solid var(--wf-gold-line); border-radius: var(--wf-radius-md); contain: layout; background: var(--wf-bg-card); }
.wf-table { width: 100%; border-collapse: collapse; font-size: var(--wf-fs-200); }
.wf-table caption { text-align: left; padding: var(--wf-sp-3); color: var(--wf-text-dim); font-size: var(--wf-fs-100); }
.wf-table th, .wf-table td { padding: var(--wf-sp-3); text-align: left; border-bottom: 1px solid var(--wf-border); vertical-align: top; }
.wf-table thead th { background: var(--wf-bg-table-head); color: var(--wf-gold-bright); font-size: var(--wf-fs-100); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; border-bottom: 1px solid var(--wf-gold-line); }
.wf-table td { font-variant-numeric: tabular-nums; line-height: 1.5; }
/* Links in Tabellenzellen: Trefferflaeche so hoch wie die Zeile. */
.wf-table td a, .wf-table tbody th a { position: relative; }
.wf-table td a::after, .wf-table tbody th a::after { content: ""; position: absolute; inset: -12px -4px; }
.wf-table tbody tr:nth-child(even) { background: var(--wf-bg-table-row-alt); }
/* Zeilen-Hover nur dort, wo es einen Zeiger gibt - auf dem Handy bliebe er
   nach dem Tippen haengen. */
@media (hover: hover) { .wf-table tbody tr:hover { background: var(--wf-bg-table-head); } }
.wf-table tbody tr:last-child td { border-bottom: none; }

/* Breite Tabellen (Dungeons, Raids): Stufenbereiche nicht als "24-" /
   "29" umbrechen, und der Name bekommt genug Platz neben einer langen
   Beschreibungsspalte ("Hall of" / "Thanes" stand zweizeilig). */
@media (min-width: 640px) {
  .wf-table td[data-label="Level"],
  .wf-table td[data-label="Spieler"] { white-space: nowrap; }
  .wf-table td[data-label="Name"] { min-width: 9em; }
}

/* Responsive Modifier: Tabelle -> Karten unter 640px, Spaltenbeschriftung ueber data-label */
@media (max-width: 639px) {
  .wf-table-wrap--responsive table,
  .wf-table-wrap--responsive thead,
  .wf-table-wrap--responsive tbody,
  .wf-table-wrap--responsive tr,
  .wf-table-wrap--responsive td { display: block; width: 100%; }
  .wf-table-wrap--responsive thead { position: absolute; left: -9999px; }
  .wf-table-wrap--responsive tr { border-bottom: 1px solid var(--wf-border); padding: var(--wf-sp-3) 0; }
  .wf-table-wrap--responsive tbody tr:nth-child(even) { background: transparent; }
  .wf-table-wrap--responsive td {
    border-bottom: none;
    padding: var(--wf-sp-1) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--wf-sp-3);
    text-align: right;
  }
  .wf-table-wrap--responsive td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--wf-text-dim);
    text-align: left;
    padding-right: var(--wf-sp-3);
  }

  /* Symbol + Name bilden den Kopf der Karte (Items, Zauber, Dungeons,
     Raids): ohne "Icon"/"Name"-Beschriftung, links, fett - so erkennt man
     beim Scrollen sofort, welche Karte welches Ding ist. */
  .wf-table-wrap--responsive td[data-label="Icon"] {
    float: left;
    width: auto;
    padding: 0 var(--wf-sp-3) 0 0;
  }
  .wf-table-wrap--responsive td[data-label="Icon"]::before,
  .wf-table-wrap--responsive td[data-label="Name"]::before { content: none; }
  .wf-table-wrap--responsive td[data-label="Name"] {
    width: auto;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    min-height: 38px;
    font-size: var(--wf-fs-300);
    font-weight: 700;
    padding-bottom: var(--wf-sp-2);
  }

  /* Tabellentitel als normale Zeile ueber den Karten - als table-caption in
     einem Block-Layout wurde er zu einer 80px schmalen Spalte. */
  .wf-table-wrap--responsive caption { display: block; }

  /* Laengere Texte (Beschreibung, Effekt) nicht rechtsbuendig in eine
     halbe Spalte quetschen, sondern unter der Beschriftung in voller
     Breite und linksbuendig - Fliesstext liest man nicht von rechts. */
  .wf-table-wrap--responsive td[data-label="Beschreibung"],
  .wf-table-wrap--responsive td[data-label="Effekt"] {
    flex-direction: column;
    gap: var(--wf-sp-1);
    text-align: left;
  }
}

/* ============ Filterleiste ============ */
.wf-filterbar { background: var(--wf-bg-card); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); padding: var(--wf-card-pad); margin-bottom: var(--wf-sp-5); }
.wf-filterbar__grid { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-3); }
@media (min-width: 640px) { .wf-filterbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .wf-filterbar__grid { grid-template-columns: repeat(4, 1fr) auto; align-items: end; } }

/* min-width: 0 hebt die Grid-Standardvorgabe min-width:auto auf - sonst
   erzwingt der breiteste <select> (lange Unterklassen-Namen) eine 1fr-Spur,
   die breiter als der Container ist, und die Seite laeuft bei 375px quer
   ueber (Befund 24.09.2026: documentElement.scrollWidth 459 statt 375). */
.wf-filterfield { display: flex; flex-direction: column; gap: var(--wf-sp-1); min-width: 0; }
.wf-filterfield label { font-size: var(--wf-fs-100); font-weight: 600; color: var(--wf-text-dim); text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; hyphens: auto; }
/* Checkboxen/Radios ausgenommen: width 100% machte aus ihnen grosse weisse Kaesten. */
/* Aussehen (Rand >= 3:1, Pfeil, 16px) kommt aus base.css; hier nur die
   Breite im Raster. */
.wf-filterfield select, .wf-filterfield input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wf-filterfield--range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wf-sp-2); min-width: 0; }
.wf-filterfield--range > div { display: flex; flex-direction: column; gap: var(--wf-sp-1); min-width: 0; }

/* ============ Tabs (ARIA-Tab-Muster) ============ */
.wf-tabs__list { display: flex; gap: var(--wf-sp-1); border-bottom: 1px solid var(--wf-border); list-style: none; margin: 0 0 var(--wf-sp-4); padding: 0; flex-wrap: wrap; }
.wf-tabs__btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--wf-text-dim);
  font-weight: 600;
  font-size: var(--wf-fs-200);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  cursor: pointer;
  min-height: 44px;
}

.wf-tabs__btn[aria-selected="true"] { color: var(--wf-heading); border-bottom-color: var(--wf-accent); }
.wf-tabs__btn:hover { color: var(--wf-heading); background: rgba(255, 255, 255, 0.04); }
.wf-tabs__panel[hidden] { display: none; }

/* ============ Paginierung ============ */
.wf-pagination { display: flex; align-items: center; justify-content: center; gap: var(--wf-sp-2); margin-top: var(--wf-sp-6); flex-wrap: wrap; }
.wf-pagination__link, .wf-pagination__current {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wf-control-border);
  border-radius: var(--wf-radius-md);
  color: var(--wf-text);
  font-size: var(--wf-fs-200);
  padding: 0 var(--wf-sp-3);
}

.wf-pagination__link:hover { border-color: var(--wf-accent); color: var(--wf-heading); text-decoration: none; }
.wf-pagination__current { background: var(--wf-accent-gradient); color: var(--wf-accent-text); font-weight: 700; border-color: transparent; }
.wf-pagination__ellipsis { color: var(--wf-text-dim); padding: 0 var(--wf-sp-2); }

/* ============ Tooltip (Item/Spell) ============ */
.wf-tooltip {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-sp-4) var(--wf-sp-5);
  box-shadow: var(--wf-shadow-pop);
  font-size: var(--wf-fs-200);
  max-width: 420px;
}

.wf-tooltip__head { display: flex; align-items: center; gap: var(--wf-sp-3); margin-bottom: var(--wf-sp-2); padding-bottom: var(--wf-sp-3); border-bottom: 1px solid var(--wf-border); }
.wf-tooltip__icon { width: 56px; height: 56px; border: 1px solid var(--wf-border); border-radius: var(--wf-radius-sm); flex-shrink: 0; }
.wf-tooltip__name { font-size: var(--wf-fs-500); font-weight: 700; line-height: 1.25; }
.wf-tooltip__ilvl { font-size: var(--wf-fs-100); color: var(--wf-text-dim); margin-top: 2px; }
.wf-tooltip__body p { margin: 0 0 2px 0; }
.wf-tooltip__line { display: flex; justify-content: space-between; gap: var(--wf-sp-3); }

/* Flache Attributwerte (+8 Beweglichkeit) sind WEISS. Nur Anlegen/Benutzen/
   Chance-bei-Treffer-Effekte sind gruen. */
.wf-tooltip__stat { color: var(--wf-stat-white); }
.wf-tooltip__effect { color: var(--wf-effect-green); }
.wf-tooltip__dim { color: var(--wf-text-dim); }
.wf-tooltip__divider { height: 1px; background: var(--wf-border); margin: var(--wf-sp-2) 0; border: none; }
.wf-tooltip__sell { display: flex; align-items: center; gap: var(--wf-sp-2); margin-top: var(--wf-sp-2); color: var(--wf-text); }
/* Forever-Werte laut Wowhead: Aenderungen, die keine Zahl oben abbildet, und die Herkunftszeile */
.wf-tooltip__forever { color: var(--wf-gold); }
.wf-tooltip__herkunft { margin-top: var(--wf-sp-2); font-size: var(--wf-fs-100); color: var(--wf-text-dim); font-style: italic; }
.wf-tooltip__actions { display: flex; gap: var(--wf-sp-2); margin-top: var(--wf-sp-4); flex-wrap: wrap; }

/* Schwebender Hover-/Touch-Tooltip aus assets/js/tooltip.js */
.wf-tooltip--floating { position: absolute; max-width: min(420px, calc(100vw - 16px)); }

/* Muenzen */
.wf-coins { display: inline-flex; align-items: center; gap: 6px; }
.wf-coin { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.wf-coin::before { content: ""; width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.wf-coin--gold::before { background: var(--wf-coin-gold); }
.wf-coin--silver::before { background: var(--wf-coin-silver); }
.wf-coin--copper::before { background: var(--wf-coin-copper); }

/* Qualitaetsfarben als Hilfsklassen (fuer Item-Namen etc.). Alle acht Toens
   (--wf-quality-* in base.css) erreichen auf jedem genutzten dunklen
   Hintergrund mindestens 4.5:1 - die normale AA-Schwelle, keine Ausnahme
   fuer grossen/fetten Text noetig (Rare/Epic wurden dafuer gegenueber dem
   Blizzard-Original aufgehellt, siehe Kommentar dort). font-weight/font-size
   bleiben trotzdem: sie geben Qualitaetsnamen dasselbe optische Gewicht wie
   im Vorbild, unabhaengig vom Kontrast. min() sorgt dafuer, dass eine
   bereits groessere geerbte Schrift (z. B. in Ueberschriften) nicht
   verkleinert wird. */
.wf-q-poor,
.wf-q-common,
.wf-q-uncommon,
.wf-q-rare,
.wf-q-epic,
.wf-q-legendary,
.wf-q-artifact,
.wf-q-heirloom {
  font-weight: 600;
  font-size: max(0.9375rem, 1em);
}

.wf-q-poor { color: var(--wf-quality-poor); }
.wf-q-common { color: var(--wf-quality-common); }
.wf-q-uncommon { color: var(--wf-quality-uncommon); }
.wf-q-rare { color: var(--wf-quality-rare); }
.wf-q-epic { color: var(--wf-quality-epic); }
.wf-q-legendary { color: var(--wf-quality-legendary); }
.wf-q-artifact { color: var(--wf-quality-artifact); }
.wf-q-heirloom { color: var(--wf-quality-heirloom); }

/* Klassenfarben als Hilfsklassen */
.wf-c-warrior { color: var(--wf-class-warrior); }
.wf-c-paladin { color: var(--wf-class-paladin); }
.wf-c-hunter { color: var(--wf-class-hunter); }
.wf-c-rogue { color: var(--wf-class-rogue); }
.wf-c-priest { color: var(--wf-class-priest); }
.wf-c-shaman { color: var(--wf-class-shaman); }
.wf-c-mage { color: var(--wf-class-mage); }
.wf-c-warlock { color: var(--wf-class-warlock); }
.wf-c-druid { color: var(--wf-class-druid); }

/* Inhaltsverzeichnis (Guide) */
.wf-toc { background: var(--wf-bg-card); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); padding: var(--wf-card-pad); }
.wf-toc h2 { font-size: var(--wf-fs-300); margin-bottom: var(--wf-sp-2); }
.wf-toc ol { margin: 0; padding-left: var(--wf-sp-4); }
.wf-toc li { margin-bottom: var(--wf-sp-1); font-size: var(--wf-fs-200); line-height: 1.5; }
.wf-toc a { position: relative; }
/* Inhaltsverzeichnis: Eintraege sind 21px hohe Zeilen - Trefferflaeche
   unsichtbar auf 44px verlaengert (die Zeilen bleiben dicht). */
@media (max-width: 767px), (pointer: coarse) { .wf-toc a::after { content: ""; position: absolute; inset: -14px -4px; } }
.wf-toc ol ol { padding-left: var(--wf-sp-4); margin-top: var(--wf-sp-1); }

.wf-sources { font-size: var(--wf-fs-200); color: var(--wf-text-dim); }
.wf-sources ul { padding-left: var(--wf-sp-4); }
/* Nackte Quellen-URLs ohne wf-sources__url-Modifier (z. B. Klassen-/
   Rassenseiten) brechen sonst nicht um (gemessen: /klasse/1, /rasse/skyborne). */
.wf-sources a { overflow-wrap: anywhere; position: relative; }
/* Quellenlinks: in der Liste ein Ziel je Eintrag, nicht nur die Textzeile. */
@media (max-width: 767px), (pointer: coarse) { .wf-sources li > a::after, .wf-sources__url::after { content: ""; position: absolute; inset: -14px -4px; } }
.wf-sources__url { position: relative; }

.wf-prose { font-size: var(--wf-fs-300); }
.wf-prose h2 { margin-top: var(--wf-sp-6); }
.wf-prose h3 { margin-top: var(--wf-sp-5); }
.wf-prose p { margin: 0 0 var(--wf-sp-4); }
.wf-prose a.wf-link-extern::after { content: " \2197"; font-size: 0.85em; }
.wf-prose ul, .wf-prose ol { padding-left: var(--wf-sp-5); }
.wf-prose table { width: 100%; border-collapse: collapse; margin: var(--wf-sp-4) 0; }
/* Huelle um Tabellen im Fliesstext (Markdown::wrapTables): scrollt seitlich
   fuer sich allein. Kein eigener Rahmen - die Zellen haben schon einen. */
.wf-prose .wf-table-wrap--prose { margin: var(--wf-sp-4) 0; border: 0; border-radius: 0; }
.wf-prose .wf-table-wrap--prose table { margin: 0; }
.wf-prose table th, .wf-prose table td { border: 1px solid var(--wf-border); padding: var(--wf-sp-2) var(--wf-sp-3); }

/* Haeufige Fragen (Startseite): natives <details>/<summary>, funktioniert
   ohne JS und ist ueber Tab/Enter/Leertaste voll bedienbar. Der Pfeil-
   Marker ist reines CSS (zwei Balken, siehe .wf-faq__marker), keine
   Inline-Styles, kein Bild. */
.wf-faq { display: flex; flex-direction: column; gap: var(--wf-sp-2); }

.wf-faq__item {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  box-shadow: var(--wf-shadow-card);
}

.wf-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-sp-3);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  min-height: 52px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wf-heading);
  cursor: pointer;
  list-style: none;
  border-radius: var(--wf-radius-md);
}

.wf-faq__question::-webkit-details-marker { display: none; }

.wf-faq__marker { flex-shrink: 0; width: 1em; height: 1em; position: relative; }
.wf-faq__marker::before,
.wf-faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.wf-faq__marker::before { width: 0.8em; height: 2px; }
.wf-faq__marker::after { width: 2px; height: 0.8em; }
.wf-faq__item[open] .wf-faq__marker::after { transform: translate(-50%, -50%) rotate(90deg); }

.wf-faq__body { padding: 0 var(--wf-sp-4) var(--wf-sp-4); font-size: var(--wf-fs-300); line-height: 1.65; color: var(--wf-text); max-width: calc(var(--wf-measure) + 2rem); }
.wf-faq__body p:first-child { margin-top: 0; }
.wf-faq__meta { display: flex; align-items: center; gap: var(--wf-sp-2); flex-wrap: wrap; }

/* Abstandshelfer (statt Inline-Styles, CSP verbietet style-Attribute) */
.wf-news-meta { margin-bottom: var(--wf-sp-3); }
.wf-tags-block { margin-bottom: var(--wf-sp-5); }

/* Leere Ergebnisse und 404 (search.php, errors/404.php): Hinweis plus
   Einstiege als Schlagwort-Reihe. */
.wf-empty { max-width: 40rem; margin: var(--wf-sp-5) 0; }
.wf-empty__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wf-sp-2); margin: var(--wf-sp-3) 0 0; padding: 0; }
.wf-empty__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--wf-sp-4);
  border: 1px solid var(--wf-gold-edge);
  border-radius: 999px;
  color: var(--wf-text);
  font-weight: 600;
}
.wf-empty__links a:hover,
.wf-empty__links a:focus-visible { border-color: var(--wf-gold); color: var(--wf-gold-bright); text-decoration: none; }

/* Schlagwort-Filter ueber der News-Liste (news/index.php). */
.wf-tagfilter { margin: 0 0 var(--wf-sp-5); }
.wf-tagfilter summary {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-sp-2);
  min-height: 44px;
  padding: 0 var(--wf-sp-4);
  border: 1px solid var(--wf-gold-edge);
  border-radius: 999px;
  color: var(--wf-text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.wf-tagfilter summary::-webkit-details-marker { display: none; }
.wf-tagfilter summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.15s ease;
}
.wf-tagfilter[open] summary::after { transform: rotate(180deg); }
.wf-tagfilter summary:hover,
.wf-tagfilter summary:focus-visible { border-color: var(--wf-gold); color: var(--wf-gold-bright); }
.wf-tagfilter__zahl { color: var(--wf-text-dim); font-weight: 400; }
.wf-tagfilter .wf-card__tags { margin: var(--wf-sp-3) 0 0; }
@media (prefers-reduced-motion: reduce) { .wf-tagfilter summary::after { transition: none; } }

/* Link-Listen mit Marken dahinter (verfuegbare Rassen/Klassen): ein
   Eintrag je Zeile, Link unterstrichen (er steht neben Text wie "Wie in
   Classic"), Marken mit Abstand daneben. */
.wf-linkliste { list-style: none; margin: 0 0 var(--wf-sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--wf-sp-2); }
.wf-linkliste li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wf-sp-2); }
.wf-linkliste a { font-weight: 600; }

/* Steckbrief-Zeilen direkt im Seitencontainer (Rassen-, Klassen-, Zonen-
   seiten): Schluessel links, Wert rechts - ueber die volle Breite von
   1250px musste das Auge 1000px weit springen. Jetzt so breit wie der
   Fliesstext, mit Trennlinien. */
.wf-container > p.wf-tooltip__line {
  max-width: 40rem;
  margin: 0;
  padding: var(--wf-sp-2) 0;
  border-bottom: 1px solid var(--wf-border);
}
.wf-container > p.wf-tooltip__line > span:first-child { color: var(--wf-text-dim); }
.wf-container > p.wf-tooltip__line > span:last-child { text-align: right; }