/* WoW Forever - Dungeon-Beute (/dungeon-beute, /dungeon-beute/{slug}).
   Baut auf den Tokens aus base.css und den Komponenten aus components.css
   auf. Ergaenzt nur, was dort fehlt: den Kopfbereich eines Dungeons, die
   Bossleiste, Bosskarten und die Beutezeilen mit Qualitaetsfarbe und
   Dropchancen-Balken. Praefix wf- wie im Kern. */

/* ============ Kopfbereich eines Dungeons ============ */

.wf-dungeonhead {
  position: relative;
  background:
    linear-gradient(180deg, rgba(26, 36, 51, 0.95) 0%, var(--wf-bg-card) 100%);
  border: 1px solid var(--wf-gold-line);
  border-radius: var(--wf-radius-lg);
  padding: var(--wf-sp-5);
  margin-bottom: var(--wf-sp-5);
  box-shadow: var(--wf-frame-shadow);
}

.wf-dungeonhead h1 {
  margin: 0 0 var(--wf-sp-2) 0;
  color: var(--wf-gold-bright);
  text-shadow: 0 0 18px var(--wf-gold-glow);
}

.wf-dungeonhead__en {
  font-family: var(--wf-font-body);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wf-dungeonhead__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
  margin: var(--wf-sp-3) 0 0 0;
  padding: 0;
  list-style: none;
}

.wf-fakt {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wf-sp-2);
  background: var(--wf-bg-content);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  padding: var(--wf-sp-1) var(--wf-sp-3);
  font-size: var(--wf-fs-200);
}

.wf-fakt__label {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wf-fakt__wert { color: var(--wf-text); }
.wf-fakt--stufe .wf-fakt__wert { color: var(--wf-gold); font-weight: 600; }
.wf-fakt--allianz { border-color: rgba(77, 171, 247, 0.5); }
.wf-fakt--horde { border-color: rgba(196, 84, 84, 0.5); }

.wf-dungeonhead__text {
  margin: var(--wf-sp-4) 0 0 0;
  max-width: 68ch;
  color: var(--wf-text);
}

/* ============ Bossleiste zum Springen ============ */

.wf-bossleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
  margin: 0 0 var(--wf-sp-5) 0;
  padding: 0;
  list-style: none;
}

.wf-bossleiste__link {
  display: inline-block;
  padding: var(--wf-sp-2) var(--wf-sp-3);
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  font-size: var(--wf-fs-200);
  color: var(--wf-text);
  text-decoration: none;
}

.wf-bossleiste__link:hover,
.wf-bossleiste__link:focus-visible {
  border-color: var(--wf-gold-line);
  color: var(--wf-gold-bright);
  background: linear-gradient(180deg, var(--wf-bg-card) 40%, rgba(240, 180, 41, 0.12) 100%);
}

/* ============ Bosskarte ============ */

.wf-boss {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  margin: 0 0 var(--wf-sp-5) 0;
  overflow: hidden;
  box-shadow: var(--wf-shadow-card);
}

.wf-boss__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  background:
    linear-gradient(180deg, var(--wf-bg-table-head) 0%, var(--wf-bg-card) 100%);
  border-bottom: 1px solid var(--wf-gold-line);
}

.wf-boss__name {
  margin: 0;
  font-family: var(--wf-font-display);
  font-size: var(--wf-fs-500);
  color: var(--wf-gold-bright);
}

.wf-boss__zusatz {
  display: block;
  margin-top: var(--wf-sp-1);
  font-family: var(--wf-font-body);
  font-size: var(--wf-fs-100);
  font-weight: 400;
  color: var(--wf-text-dim);
  max-width: 60ch;
}

.wf-boss__anzahl {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  white-space: nowrap;
}

/* ============ Beutezeilen ============ */

.wf-beute {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-beute__zeile {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--wf-sp-3);
  align-items: center;
  padding: var(--wf-sp-3) var(--wf-sp-4);
  border-top: 1px solid var(--wf-border);
}

.wf-beute__zeile:first-child { border-top: 0; }
.wf-beute__zeile:nth-child(even) { background: var(--wf-bg-table-row-alt); }

/* Boss ohne bekannten Beuteeintrag: keine Icon-Spalte, nur der Hinweistext. */
.wf-beute__zeile--leer {
  grid-template-columns: 1fr;
}

.wf-beute__zeile--leer .wf-beute__meta { margin-top: 0; }

.wf-beute__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--wf-radius-sm);
  border: 1px solid var(--wf-border);
  display: block;
}

.wf-beute__leer {
  width: 40px;
  height: 40px;
  border-radius: var(--wf-radius-sm);
  border: 1px dashed var(--wf-border);
  display: grid;
  place-items: center;
  color: var(--wf-text-dim);
  font-size: var(--wf-fs-100);
}

.wf-beute__text { min-width: 0; }

.wf-beute__name {
  font-size: var(--wf-fs-400);
  font-weight: 600;
  text-decoration: none;
}

.wf-beute__name:hover { text-decoration: underline; }

.wf-beute__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-1) var(--wf-sp-3);
  margin-top: var(--wf-sp-1);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

.wf-beute__werte { color: var(--wf-quality-uncommon); }

/* Herkunft der Werte: Forever-Aenderungen laut Wowhead, sonst Classic */
.wf-beute__forever { flex-basis: 100%; color: var(--wf-text); }
.wf-beute__forever--gleich,
.wf-beute__forever--offen { flex-basis: auto; color: var(--wf-text-dim); font-style: italic; }

/* Dropchance: Zahl mit hinterlegtem Balken, Breite = Chance */
.wf-chance {
  position: relative;
  display: inline-block;
  min-width: 4.5rem;
  padding: 2px var(--wf-sp-2);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-content);
  font-size: var(--wf-fs-100);
  color: var(--wf-text);
  text-align: right;
  overflow: hidden;
}

.wf-chance__balken {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.35), rgba(240, 180, 41, 0.12));
  z-index: 0;
}

/* Breite in 5-%-Schritten (kein style-Attribut wegen CSP, siehe Template). */
.wf-chance__balken--p0 { width: 0%; }
.wf-chance__balken--p5 { width: 5%; }
.wf-chance__balken--p10 { width: 10%; }
.wf-chance__balken--p15 { width: 15%; }
.wf-chance__balken--p20 { width: 20%; }
.wf-chance__balken--p25 { width: 25%; }
.wf-chance__balken--p30 { width: 30%; }
.wf-chance__balken--p35 { width: 35%; }
.wf-chance__balken--p40 { width: 40%; }
.wf-chance__balken--p45 { width: 45%; }
.wf-chance__balken--p50 { width: 50%; }
.wf-chance__balken--p55 { width: 55%; }
.wf-chance__balken--p60 { width: 60%; }
.wf-chance__balken--p65 { width: 65%; }
.wf-chance__balken--p70 { width: 70%; }
.wf-chance__balken--p75 { width: 75%; }
.wf-chance__balken--p80 { width: 80%; }
.wf-chance__balken--p85 { width: 85%; }
.wf-chance__balken--p90 { width: 90%; }
.wf-chance__balken--p95 { width: 95%; }
.wf-chance__balken--p100 { width: 100%; }

.wf-chance__wert { position: relative; z-index: 1; }
.wf-chance--unbekannt { color: var(--wf-text-dim); min-width: 0; }

/* ============ Abschnitte: Zonendrops, Quests ============ */

.wf-beuteabschnitt { margin: var(--wf-sp-6) 0 var(--wf-sp-4) 0; }

.wf-beuteabschnitt__titel {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-3);
  margin: 0 0 var(--wf-sp-2) 0;
}

.wf-beuteabschnitt__titel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wf-gold-line);
}

.wf-quest {
  background: linear-gradient(180deg, rgba(34, 29, 20, 0.55) 0%, var(--wf-bg-card) 100%);
  border: 1px solid var(--wf-gold-line);
}

.wf-quest .wf-boss__kopf {
  background: linear-gradient(180deg, rgba(34, 29, 20, 0.85) 0%, rgba(26, 36, 51, 0.9) 100%);
}

.wf-quest .wf-boss__name { font-size: var(--wf-fs-400); }

/* ============ Uebersichtskarten ============ */

.wf-dungeonkarte { position: relative; }

.wf-dungeonkarte__stufe {
  display: inline-block;
  padding: 2px var(--wf-sp-2);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-content);
  border: 1px solid var(--wf-gold-line);
  color: var(--wf-gold);
  font-size: var(--wf-fs-100);
  font-weight: 600;
  white-space: nowrap;
}

.wf-dungeonkarte__zahlen {
  display: flex;
  gap: var(--wf-sp-4);
  margin-top: auto;
  padding-top: var(--wf-sp-3);
  border-top: 1px solid var(--wf-border);
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

.wf-dungeonkarte__zahl { display: flex; flex-direction: column; }

.wf-dungeonkarte__zahl b {
  font-size: var(--wf-fs-500);
  font-family: var(--wf-font-display);
  color: var(--wf-gold-bright);
  line-height: 1.1;
}

/* ============ Bosse ohne bekannte Beute ============ */

.wf-bossliste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-sp-3);
  margin: 0 0 var(--wf-sp-5) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .wf-bossliste { grid-template-columns: 1fr 1fr; }
}

.wf-bossliste__eintrag {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-left: 3px solid var(--wf-gold-deep);
  border-radius: var(--wf-radius-sm);
  padding: var(--wf-sp-3) var(--wf-sp-4);
}

.wf-bossliste__name {
  font-family: var(--wf-font-display);
  font-size: var(--wf-fs-400);
  color: var(--wf-gold-bright);
}

.wf-bossliste__quelle {
  display: block;
  margin-top: var(--wf-sp-1);
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

/* ============ Schmale Darstellung ============ */

@media (max-width: 560px) {
  .wf-dungeonhead { padding: var(--wf-sp-4); }
  .wf-beute__zeile { grid-template-columns: 32px 1fr; padding: var(--wf-sp-3); }
  .wf-beute__icon,
  .wf-beute__leer { width: 32px; height: 32px; }
  .wf-boss__kopf { padding: var(--wf-sp-3); }
}