:root{
  --bg:#13151a; --flaeche:#1a1e26; --flaeche2:#212734; --rand:#2c3444;
  --text:#e6e9ee; --leise:#98a1b0; --akzent:#a78bfa; --akzent2:#c4b5fd;
  --tank:#6aa9e0; --heal:#6fcf97; --dps:#e79268; --gold:#f0d98c;
  --nav:#000; --werkzeug:#08090c;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif}
header{background:var(--nav); padding:14px 18px 0;
  border-bottom:3px solid var(--akzent)}
h1{margin:0 0 3px; font-size:19px; letter-spacing:-.2px}
.zurueck{display:inline-block; margin:0 0 8px; color:var(--akzent2);
  text-decoration:none; font-size:12.5px; font-weight:700}
.zurueck:hover{color:var(--text)}
.stand{color:var(--leise); font-size:12px; margin:0 0 12px}
.stand a{color:var(--akzent2)}
.regionen{display:flex; align-items:center; gap:10px; padding-bottom:12px}
/* ── Kleinschrift am Desktop, 29.08.2026 ──────────────────────────────
   Am 26.08. wurde die Lesbarkeit auf dem HANDY reparaert: dort lag
   nichts mehr unter 11,5 px. Der Desktop blieb bei 10,5 px stehen - und
   damit war die Schrift am GROSSEN Schirm kleiner als am kleinen, genau
   die Verkehrung, die damals behoben werden sollte.
   Betroffen waren fuenf Regeln (.regionen label, .rt-n, .sp-anz, h4,
   h5) und darueber sieben gemessene Bausteine. Die Begruendung von
   damals gilt hier unveraendert: Reiterzahl und Regionsbeschriftung
   gehoeren zur Bedienung, nicht zur Fussnote.
   Gemessen mit _test/pruef_meta_handy.py, dem einzigen Befund, den die
   Suite ueber Tage gemeldet hat. */
.regionen label{font-size:11.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--leise); font-weight:700}
/* Kein eigener Pfeil ueber background-image: Ein data:-URI faellt unter
   img-src, nicht unter style-src, und waere von der CSP des Guides
   blockiert. Der Pfeil des Systems tut es genauso. */
.regionen select{background:var(--flaeche2); border:1px solid var(--rand);
  color:var(--text); font:inherit; font-size:13px; font-weight:700;
  padding:0 11px; min-height:44px; border-radius:8px; cursor:pointer}
.regionen select:focus-visible{outline:2px solid var(--akzent);
  outline-offset:2px}
/* Breiter als die alten 940px: Zwei Spalten brauchen Platz, sonst wird
   die rechte Spalte schmaler als die Gruppenkaertchen darin. */
main{padding:14px 18px 40px; max-width:1440px}

/* Links die Gesamtsicht, rechts die einzelne Instanz. Unter 900px
   untereinander - nebeneinander waere beides zu schmal zum Lesen. */
.zwei{display:grid; grid-template-columns:minmax(290px,370px) minmax(0,1fr);
  gap:16px; align-items:start}
.links .hr-grid{flex-direction:column}
.links .heldenrang{margin-bottom:0}
.rechts{min-width:0}

.kopfzahlen{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.kz{flex:1 1 150px; background:var(--flaeche); border:1px solid var(--rand);
  border-radius:10px; padding:11px 14px; display:flex; align-items:baseline;
  gap:11px}
.kz > b{font-size:23px; font-variant-numeric:tabular-nums; color:var(--gold)}
.kz > b.knapp{color:var(--dps); font-size:19px}
.kz span{font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--leise); font-weight:700; line-height:1.35}
.kz i{display:block; font-style:normal; text-transform:none;
  letter-spacing:0; font-weight:400; font-size:12.5px; color:var(--text)}

.luecke{background:rgba(231,146,104,.09); border-left:3px solid var(--dps);
  border-radius:9px; padding:10px 14px; margin:0 0 14px;
  color:var(--leise); font-size:12.5px; line-height:1.6}
.luecke b{color:var(--text)}

.heldenrang{margin-bottom:20px}
/* Drei Rollen als Reiter statt als drei Spalten untereinander. Vorher
   musste man an Tanks und Heilern vorbeiscrollen, um DPS zu sehen, und
   jede zusaetzliche Zeile verlaengerte die Seite fuer alle drei Rollen
   zugleich. */
.rtabs{display:flex; gap:5px; margin-bottom:8px}
.rtab{display:flex; align-items:center; gap:6px; flex:1 1 0; min-width:0;
  background:var(--flaeche); border:1px solid var(--rand);
  border-bottom-width:3px; border-radius:9px 9px 0 0; color:var(--text);
  font:inherit; font-size:12.5px; font-weight:700; padding:0 9px;
  min-height:44px; cursor:pointer; justify-content:center}
.rtab.tank{border-bottom-color:var(--tank)}
.rtab.dps{border-bottom-color:var(--dps)}
.rtab.heal{border-bottom-color:var(--heal)}
.rtab:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
.rtab.tank.aktiv{background:var(--tank); color:#0d1620}
.rtab.dps.aktiv{background:var(--dps); color:#1f1006}
.rtab.heal.aktiv{background:var(--heal); color:#06180f}
.rt-n{font-weight:400; font-size:11.5px; color:var(--leise)}
.rtab.aktiv .rt-n{color:inherit; opacity:.75}
.rs{width:13px; height:13px; flex:none; fill:currentColor}
.m .rs{width:10px; height:10px; opacity:.85; margin-right:4px;
  vertical-align:-1px}
.m.tank .rs{color:var(--tank)}
.m.dps .rs{color:var(--dps)}
.m.heal .rs{color:var(--heal)}
.hr-grid{display:flex; gap:8px; flex-wrap:wrap}
.rtafel{flex:1 1 100%; background:var(--flaeche); border:1px solid var(--rand);
  border-radius:0 0 10px 10px; padding:4px 13px 8px}
.hr-sp{flex:1 1 240px; background:var(--flaeche); border:1px solid var(--rand);
  border-top-width:3px; border-radius:10px; padding:9px 13px 11px}
.hr-sp.tank{border-top-color:var(--tank)}
.hr-sp.heal{border-top-color:var(--heal)}
.hr-sp.dps{border-top-color:var(--dps)}
.hr-sp ol,.rtafel ol{margin:0; padding:0; list-style:none; counter-reset:r;
  font-size:12.5px}
.hr-sp li,.rtafel li{counter-increment:r; padding:7px 0 8px;
  border-bottom:1px solid #20262f}
.hr-sp li:last-child,.rtafel li:last-child{border-bottom:0}
/* Der eigene Bestwert der Spec. Klein und in Klammern, damit eine Spec
   mit einem einzigen Lauf trotzdem einordbar bleibt: "1x" allein sagt
   nicht, ob das ein +18 war oder ein +14. */
.sp-key{color:var(--gold); font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums}
.sp-kopf{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  margin-bottom:4px}
.sp-kopf::before{content:counter(r); color:#5c6474; font-weight:700;
  font-variant-numeric:tabular-nums; min-width:13px}
.sp-kopf b{color:var(--kl); font-weight:700}
.sp-kopf i{font-style:normal; color:var(--akzent2); font-size:11.5px}
.sp-kopf i small{color:#5c6474; font-size:10px; margin-left:3px}
/* Zwei Bahnen je Spec: oben die breite Basis, darunter die Spitze.
   Absolut skaliert, 0 bis 100 % der Rolle. */
/* ⚠️ Die Spaltenbreiten wachsen mit der Schrift. Bei 10,5 px reichten
   46/38 px fuer "82.2%" und "789x"; bei 11,5 px nicht mehr sicher. Der
   Balken links gibt den Platz her - dieselbe Anpassung wie im
   Handy-Block. Ohne sie bricht die Zahl um oder wird abgeschnitten,
   und das faellt erst bei vierstelligen Laufzahlen auf.

   ⚠️ Kommentare hier IMMER in der gewoehnlichen CSS-Form schreiben.
   Am 29.08.2026 habe ich sie mit umgekehrtem Schraegstrich gesetzt -
   so zeigt die Leseansicht sie an, aber im CSS ist das kein Kommentar.
   Die Folge: .sp-zeile mit display:grid wurde verschluckt, das Raster
   fiel auf dem Desktop ersatzlos weg, und Prozentwert und Laufzahl
   klebten als "80.5%773x" aneinander.

   ⚠️ Und die Zeichenfolge, die einen Kommentar BEENDET, darf im Text
   selbst nicht vorkommen - CSS kennt keine verschachtelten Kommentare.
   Genau daran ist der Reparaturversuch zehn Minuten spaeter noch
   einmal gescheitert. */
.sp-zeile{display:grid; grid-template-columns:1fr 50px 42px; gap:7px;
  align-items:center; margin:2px 0 0 13px}
.sp-anz{font-size:11.5px; text-align:right; color:#5c6474;
  font-variant-numeric:tabular-nums}
.sp-bahn{height:7px; background:#171c25; border-radius:4px; overflow:hidden}
.sp-balken{display:block; height:100%; border-radius:4px}
.sp-balken.breit{background:#48526a}
.sp-balken.spitze{background:var(--akzent)}
.sp-wert{font-size:11.5px; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--text)}
.sp-diff{margin:3px 0 0 46px; font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums}
.sp-diff.hoch{color:var(--heal)}
.sp-diff.runter{color:var(--dps)}
.sp-diff.gleich{color:#5c6474}
.sp-n{display:block; text-transform:none; letter-spacing:0; font-weight:400;
  color:#5c6474; font-size:10px; margin-top:2px}
.sp-fuss{margin:10px 0 0; font-size:11.5px; line-height:1.6;
  color:var(--leise)}
.sp-fuss b{color:var(--text)}
.sp-fuss i{color:var(--text); font-style:italic}
h5{margin:0 0 5px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--leise); font-weight:700}

.dh{margin-top:0}
.dh2{margin-top:18px}
.kombis{margin-bottom:2px}
/* "in 6 dungeons" nur, wo es die Aussage traegt: Eine Aufstellung, die in
   sechs Instanzen getimt hat, ist eine andere Empfehlung als eine, die
   40 Mal in derselben lief. Im Instanzblock steht die Zahl nicht, dort
   waere sie immer 1. */
.dz{color:var(--akzent2)}
/* Die Reiter tragen Name UND Stufe. Deshalb zwei Zeilen je Reiter statt
   einer: Nebeneinander wuerde "Temple of Sethraliss +18" die Leiste auf
   dem Handy in acht einzelne Zeilen zerlegen. */
.dtabs{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px}
.dtab{display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:var(--flaeche); border:1px solid var(--rand); border-radius:8px;
  color:var(--text); font:inherit; padding:6px 11px; min-height:44px;
  cursor:pointer; text-align:left}
.dtab:hover{border-color:var(--akzent)}
.dtab:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
.dtab.aktiv{background:var(--akzent); border-color:var(--akzent);
  color:#12141a}
.dt-name{font-size:12.5px; font-weight:700; white-space:nowrap}
.dt-key{font-size:12px; font-weight:700; color:var(--gold);
  font-variant-numeric:tabular-nums}
.dtab.aktiv .dt-key{color:#2a1d05}
/* Name und Stufe stehen im Reiter UND hier. Auf dem Handy scrollt die
   Reiterleiste aus dem Bild, sobald man in der Spectabelle liest. */
.dkopf{display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  background:var(--flaeche); border:1px solid var(--rand);
  border-radius:10px; padding:11px 15px; min-height:52px}
.key{color:var(--gold); font-variant-numeric:tabular-nums}
.key.gross{font-size:24px; min-width:56px}
.dname{font-weight:700; flex:1 1 auto; font-size:15px}
.zeit{color:var(--text); font-size:13px; font-variant-numeric:tabular-nums}
.zeit i{color:var(--leise); font-style:normal}
.uebrig{color:var(--heal); font-size:12px; min-width:96px; text-align:right}
h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--leise); margin:16px 0 8px; font-weight:700}
.kombi{background:var(--flaeche2); border-radius:8px; padding:8px 11px;
  margin-bottom:6px}
.kk{display:flex; align-items:baseline; gap:9px; margin-bottom:6px;
  font-size:12.5px}
.gr{display:flex; flex-wrap:wrap; gap:5px}
.m{font-size:12px; padding:3px 9px; border-radius:6px; background:#151a22;
  border-left:3px solid var(--rand); line-height:1.35}
.m.tank{border-left-color:var(--tank)}
.m.heal{border-left-color:var(--heal)}
.m.dps{border-left-color:var(--dps)}
.m b{color:var(--kl); font-weight:700; display:block}
.held{color:var(--akzent2); font-style:normal; font-size:11px}

.rollen{display:flex; gap:8px; flex-wrap:wrap}
.rolle{flex:1 1 260px; border-left:3px solid var(--rand);
  padding-left:11px}
.rolle.tank{border-left-color:var(--tank)}
.rolle.heal{border-left-color:var(--heal)}
.rolle.dps{border-left-color:var(--dps)}
table.tab{width:100%; border-collapse:collapse; font-size:13px}
table.tab td{padding:5px 8px 5px 0; border-bottom:1px solid #20262f}
table.tab tr:last-child td{border-bottom:0}
.r{text-align:right; padding-right:0}
.leise{color:var(--leise)}
.kl{color:var(--kl)}
.ht{color:var(--akzent2); font-size:12px}
.offen{color:#5c6474}
.hinweis{margin:26px 0 0; padding:11px 15px; border-radius:9px;
  background:rgba(167,139,250,.08); border-left:3px solid var(--akzent);
  color:var(--leise); font-size:12.5px; line-height:1.6}
.hinweis b{color:var(--text)}
.hinweis a{color:var(--akzent2)}
.hinweis p{margin:0 0 9px}
.hinweis p:last-child{margin:0}
@media (max-width:900px){
  .zwei{grid-template-columns:1fr}
  .links .hr-grid{flex-direction:row}
}
@media (max-width:560px){
  header{padding:12px 12px 0} main{padding:12px 12px 34px}
  .regionen{gap:8px}
  .regionen select{flex:1 1 auto; min-width:0}
  .dkopf{gap:8px}
  .dname{flex:1 1 calc(100% - 70px)}
  .uebrig{min-width:0; text-align:left}
  .kz{flex:1 1 100%; padding:9px 12px}
  .kz > b{font-size:20px}
  .rolle{flex:1 1 100%; padding-left:9px}
  .hr-sp{flex:1 1 100%}
  .dtab{flex:1 1 calc(50% - 3px)}
  .dt-name{white-space:normal}
  /* ── Handy-Lesbarkeit, 26.08.2026 ──────────────────────────────────
     Gemessen mit _test/pruef_meta_handy.py: 27 Bausteine unter 12 px,
     auf dem Desktop nur 14. Auf dem Handy stand also MEHR
     Kleingedrucktes als am grossen Schirm - verkehrt herum. Schuld war
     zum Teil diese Regel selbst: .m stand hier auf 11,5 px, waehrend
     der Grundwert 12 px betraegt. Ein Handy-Block, der Schrift
     verkleinert, statt sie zu vergroessern.
     Jetzt liegt auf dem Handy nichts mehr unter 11,5 px, und die
     Datenzeilen der Specs sind so gross wie der Fliesstext. */
  .m{font-size:12.5px}
  .kz span{font-size:12px}
  .sp-key{font-size:12px}
  .sp-kopf i{font-size:12px}
  .sp-wert{font-size:12.5px}
  .sp-anz{font-size:12px}
  .held{font-size:12px}
  h4{font-size:11.5px}
  h5{font-size:11.5px}
  /* Die Zahl neben dem Rollenreiter ("Tanks 6") und die Beschriftung
     der Regionswahl standen bei 10,5 px - die kleinste Schrift der
     Seite, und beides gehoert zur Bedienung, nicht zur Fussnote. */
  .rt-n{font-size:12px}
  .regionen label{font-size:11.5px}
  /* Der Satz, der erklaert, was ueberhaupt gezaehlt wird. Wer den nicht
     lesen kann, haelt die Balken fuer eine Rangliste. */
  .sp-fuss{font-size:12.5px}
  .sp-n{font-size:11.5px}
  .sp-kopf i small{font-size:11px}
  /* Die beiden Zahlenspalten der Spec-Zeile waren auf die kleinere
     Schrift zugeschnitten. 46/38 px reichen fuer "82.2%" und "789x"
     bei 12,5 px nicht mehr sicher - vier Pixel mehr je Spalte, der
     Balken links gibt sie her. */
  .sp-zeile{grid-template-columns:1fr 50px 42px}
  /* ⚠️ Der Rueckweg in den Guide war 19 px hoch - die schlechteste
     Tippflaeche der ganzen Seite, und ausgerechnet die einzige
     Navigation, die es hier gibt. Apple nennt 44 px, der Guide haelt
     sie bei seinen Reitern ein.
     Die drei uebrigen Verweise unter 40 px (Raider.IO im Stand-Satz,
     "stats" und "Talent Builds" im Hinweiskasten) bleiben, wie sie
     sind: Das sind Verweise MITTEN IM FLIESSTEXT. Sie auf 44 px zu
     ziehen, wuerde den Satz auseinanderreissen, und die 44 px gelten
     fuer freistehende Bedienelemente, nicht fuer verlinkte Woerter. */
  .zurueck{
    display:inline-flex; align-items:center; min-height:44px;
    margin:0; font-size:13.5px;
  }
}


/* erzeugt: Balkenbreiten */
.w0{width:0.0%}
.w1{width:0.1%}
.w2{width:0.2%}
.w3{width:0.3%}
.w4{width:0.4%}
.w5{width:0.5%}
.w6{width:0.6%}
.w7{width:0.7%}
.w8{width:0.8%}
.w9{width:0.9%}
.w10{width:1.0%}
.w11{width:1.1%}
.w12{width:1.2%}
.w13{width:1.3%}
.w14{width:1.4%}
.w15{width:1.5%}
.w16{width:1.6%}
.w17{width:1.7%}
.w18{width:1.8%}
.w19{width:1.9%}
.w20{width:2.0%}
.w21{width:2.1%}
.w22{width:2.2%}
.w23{width:2.3%}
.w24{width:2.4%}
.w25{width:2.5%}
.w26{width:2.6%}
.w27{width:2.7%}
.w28{width:2.8%}
.w29{width:2.9%}
.w30{width:3.0%}
.w32{width:3.2%}
.w33{width:3.3%}
.w34{width:3.4%}
.w35{width:3.5%}
.w36{width:3.6%}
.w37{width:3.7%}
.w40{width:4.0%}
.w42{width:4.2%}
.w43{width:4.3%}
.w46{width:4.6%}
.w48{width:4.8%}
.w50{width:5.0%}
.w51{width:5.1%}
.w55{width:5.5%}
.w57{width:5.7%}
.w58{width:5.8%}
.w60{width:6.0%}
.w62{width:6.2%}
.w63{width:6.3%}
.w64{width:6.4%}
.w67{width:6.7%}
.w68{width:6.8%}
.w70{width:7.0%}
.w73{width:7.3%}
.w74{width:7.4%}
.w76{width:7.6%}
.w79{width:7.9%}
.w82{width:8.2%}
.w96{width:9.6%}
.w107{width:10.7%}
.w108{width:10.8%}
.w109{width:10.9%}
.w110{width:11.0%}
.w125{width:12.5%}
.w128{width:12.8%}
.w129{width:12.9%}
.w148{width:14.8%}
.w151{width:15.1%}
.w152{width:15.2%}
.w154{width:15.4%}
.w155{width:15.5%}
.w157{width:15.7%}
.w160{width:16.0%}
.w170{width:17.0%}
.w182{width:18.2%}
.w188{width:18.8%}
.w190{width:19.0%}
.w196{width:19.6%}
.w203{width:20.3%}
.w205{width:20.5%}
.w211{width:21.1%}
.w217{width:21.7%}
.w238{width:23.8%}
.w254{width:25.4%}
.w264{width:26.4%}
.w280{width:28.0%}
.w287{width:28.7%}
.w301{width:30.1%}
.w313{width:31.3%}
.w319{width:31.9%}
.w321{width:32.1%}
.w354{width:35.4%}
.w373{width:37.3%}
.w380{width:38.0%}
.w393{width:39.3%}
.w410{width:41.0%}
.w417{width:41.7%}
.w418{width:41.8%}
.w464{width:46.4%}
.w534{width:53.4%}
.w570{width:57.0%}
.w587{width:58.7%}
.w701{width:70.1%}
.w798{width:79.8%}
.w859{width:85.9%}
.w922{width:92.2%}

/* erzeugt: Klassenfarben */
.kl-death-knight{--kl:#C41E3A}
.kl-demon-hunter{--kl:#A330C9}
.kl-druid{--kl:#FF7C0A}
.kl-evoker{--kl:#33937F}
.kl-hunter{--kl:#AAD372}
.kl-mage{--kl:#3FC7EB}
.kl-monk{--kl:#00FF98}
.kl-paladin{--kl:#F48CBA}
.kl-priest{--kl:#FFFFFF}
.kl-rogue{--kl:#FFF468}
.kl-shaman{--kl:#0070DD}
.kl-warlock{--kl:#8788EE}
.kl-warrior{--kl:#C69B6D}