: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}
.regionen label{font-size:10.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:10.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. */
.sp-zeile{display:grid; grid-template-columns:1fr 46px 38px; gap:7px;
  align-items:center; margin:2px 0 0 13px}
.sp-anz{font-size:10.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:10.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:10.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}
  .m{font-size:11.5px}
  .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}
}


/* 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%}
.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%}
.w29{width:2.9%}
.w30{width:3.0%}
.w31{width:3.1%}
.w32{width:3.2%}
.w33{width:3.3%}
.w35{width:3.5%}
.w36{width:3.6%}
.w37{width:3.7%}
.w39{width:3.9%}
.w42{width:4.2%}
.w44{width:4.4%}
.w45{width:4.5%}
.w46{width:4.6%}
.w48{width:4.8%}
.w49{width:4.9%}
.w51{width:5.1%}
.w52{width:5.2%}
.w53{width:5.3%}
.w55{width:5.5%}
.w57{width:5.7%}
.w58{width:5.8%}
.w60{width:6.0%}
.w61{width:6.1%}
.w63{width:6.3%}
.w65{width:6.5%}
.w74{width:7.4%}
.w78{width:7.8%}
.w79{width:7.9%}
.w83{width:8.3%}
.w85{width:8.5%}
.w87{width:8.7%}
.w88{width:8.8%}
.w90{width:9.0%}
.w95{width:9.5%}
.w96{width:9.6%}
.w98{width:9.8%}
.w99{width:9.9%}
.w100{width:10.0%}
.w112{width:11.2%}
.w122{width:12.2%}
.w132{width:13.2%}
.w149{width:14.9%}
.w152{width:15.2%}
.w154{width:15.4%}
.w173{width:17.3%}
.w174{width:17.4%}
.w189{width:18.9%}
.w194{width:19.4%}
.w198{width:19.8%}
.w203{width:20.3%}
.w213{width:21.3%}
.w214{width:21.4%}
.w221{width:22.1%}
.w224{width:22.4%}
.w246{width:24.6%}
.w258{width:25.8%}
.w261{width:26.1%}
.w262{width:26.2%}
.w278{width:27.8%}
.w283{width:28.3%}
.w299{width:29.9%}
.w336{width:33.6%}
.w359{width:35.9%}
.w362{width:36.2%}
.w408{width:40.8%}
.w409{width:40.9%}
.w418{width:41.8%}
.w433{width:43.3%}
.w458{width:45.8%}
.w508{width:50.8%}
.w545{width:54.5%}
.w626{width:62.6%}
.w703{width:70.3%}
.w810{width:81.0%}
.w816{width:81.6%}
.w923{width:92.3%}

/* 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}