/* Climb TFT – Styles (früher direkt in index.html) */
:root{
  --ff-head:'Barlow Condensed',Impact,sans-serif; --ff-body:Barlow,system-ui,sans-serif;
  --bg:#121219; --bg-2:#16161f; --panel:#1b1b26; --panel-2:#20202d; --panel-3:#272738;
  --bar:#191925; --bar-line:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#f2f3f8; --muted:#b4b6c8; --faint:#7f8197;
  --accent:#3b82f6; --accent-2:#6aa8ff; --accent-soft:rgba(59,130,246,.18);
  --gold:#f2c14e; --gold-soft:rgba(242,193,78,.16);
  --up:#4ade80; --down:#f87171;
  --c1:#8a94a8; --c2:#22a35a; --c3:#2f80ed; --c4:#a855f7; --c5:#f2c14e;
  --radius:12px; --maxw:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff-body); color:var(--text); line-height:1.55; font-size:16px;
  background-color:var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 42%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 34% 64%, rgba(255,255,255,.2), transparent 60%),
    radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,.2), transparent 60%),
    radial-gradient(1200px 600px at 50% -10%, rgba(59,130,246,.10), transparent 60%);
  background-size:420px 420px,520px 520px,380px 380px,460px 460px,600px 600px,100% 100%;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--ff-head);margin:0 0 .5em;line-height:1.02;font-weight:800;font-style:italic;letter-spacing:-.005em}
h1,h2{text-transform:uppercase}
h3,h4{font-weight:700}
p{margin:0 0 1em}
em.serif{font-family:inherit;font-style:italic;font-weight:inherit;color:var(--accent-2);letter-spacing:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--accent);padding:8px 12px;border-radius:8px;z-index:99}

/* ---------- Top bar (dota2freaks-style tiles) ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:stretch;height:84px;background:var(--bar);border-bottom:1px solid var(--bar-line);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.tb-icon-btn{width:70px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text);cursor:pointer;border-right:1px solid var(--bar-line)}
.tb-icon-btn:hover{background:rgba(255,255,255,.04)}
.tb-icon-btn svg{width:20px;height:20px}
.tb-search{border-right:0;border-left:1px solid var(--bar-line);width:84px}
.tb-logo{display:flex;align-items:center;gap:12px;padding:0 24px 0 22px;border-right:1px solid var(--bar-line);font-family:var(--ff-head);font-style:italic;font-size:2rem;line-height:1;white-space:nowrap;letter-spacing:-.01em}
.tb-logo svg{width:42px;height:42px}
.tb-logo span{font-weight:400}.tb-logo b{font-weight:800}
.tb-nav{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-item{position:relative;flex:1 1 0;min-width:84px;max-width:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-right:1px solid var(--bar-line);font-family:var(--ff-head);font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;padding:0 10px;background:none;border-top:0;border-bottom:0;border-left:0;cursor:pointer;transition:background .15s}
.tb-item:hover{background:rgba(255,255,255,.04)}
.tb-item.active{background:var(--accent)}
.tb-item.dim{color:var(--faint)}
.tb-ic{width:30px;height:30px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.tb-ic img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.15)}
.tb-ic svg{width:22px;height:22px}
.tb-ic.svg{border-radius:0;box-shadow:none}
.tb-badge{position:absolute;top:7px;right:calc(50% - 34px);background:#39a548;color:#fff;font-family:var(--ff-body);font-size:.52rem;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.04em}
.tb-more{flex:0 0 74px;max-width:74px;font-size:1.6rem;letter-spacing:.15em;padding-bottom:6px}
.more-menu{position:fixed;top:84px;width:230px;background:var(--panel);border:1px solid var(--line-2);border-radius:0 0 10px 10px;padding:6px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:60}
.more-menu.open{display:block}
.more-menu a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-family:var(--ff-head);font-weight:700;font-size:1.02rem}
.more-menu a:hover,.more-menu a.active{background:var(--accent-soft)}
/* drawer (hamburger) */
.drawer{position:fixed;inset:0;z-index:70;display:none}
.drawer.open{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:300px;max-width:85vw;background:var(--bar);border-right:1px solid var(--bar-line);padding:18px 14px;overflow:auto;animation:slide .2s ease}
@keyframes slide{from{transform:translateX(-100%)}to{transform:none}}
.drawer-panel h5{font-family:var(--ff-head);font-style:italic;font-size:.85rem;text-transform:uppercase;color:var(--faint);margin:18px 10px 6px}
.drawer-panel a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;font-family:var(--ff-head);font-weight:700;font-size:1.1rem}
.drawer-panel a:hover,.drawer-panel a.active{background:var(--accent-soft)}
.drawer-panel .tb-ic{width:28px;height:28px}
.cta-btn{display:none}

/* ---------- Buttons/badges ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:600;font-size:.93rem;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2f74e6}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:rgba(148,180,255,.04)}
.btn-ghost:hover{background:rgba(148,180,255,.1)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2)}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.link-arrow{color:var(--accent-2);font-weight:600;font-size:.92rem}
.link-arrow:hover{text-decoration:underline}

/* ---------- Sections ---------- */
main{padding-bottom:40px}
.page{display:none}
.page.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section{padding:64px 0 0}
.section-head{max-width:720px;margin-bottom:26px}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.section-head p{color:var(--muted)}
.card{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.page-head{padding:44px 0 20px}
.page-head h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.page-head p{color:var(--muted);max-width:680px}
.crumb{font-size:.8rem;color:var(--faint);margin-bottom:10px}

/* ---------- Hero ---------- */
.hero{padding:56px 0 10px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);margin:16px 0 14px}
.hero p.lead{font-size:1.1rem;color:var(--muted);max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 16px}
.hero-links{display:flex;flex-wrap:wrap;gap:18px;font-size:.88rem}
.hero-links a{color:var(--muted)}.hero-links a:hover{color:var(--text)}
.hero-art{position:relative;aspect-ratio:1/1;max-width:440px;margin-left:auto;width:100%}
.hero-art .glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%)}
.hero-art .mascot{position:absolute;inset:10%;animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.float-card{position:absolute;background:rgba(18,31,58,.92);border:1px solid var(--line-2);border-radius:14px;padding:10px 14px;font-size:.8rem;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.float-card b{display:block;font-family:var(--ff-head);font-size:1.05rem}
.float-card.a{top:8%;left:-4%}.float-card.b{bottom:12%;right:-2%}
.spark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:4px}
.spark i{width:6px;border-radius:2px;background:var(--accent-2)}

/* ---------- Tools ---------- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tool{display:flex;flex-direction:column;gap:10px;transition:.15s}
.tool:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tool h3{font-size:1.08rem;margin:0}
.tool p{color:var(--muted);font-size:.88rem;margin:0}
.tool ul{margin:0;padding:0;list-style:none;font-size:.8rem;color:var(--faint)}
.tool ul li::before{content:"› ";color:var(--accent-2)}
.tool .link-arrow{margin-top:auto}
.tool-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.tool-icon svg{width:22px;height:22px;color:var(--accent-2)}
.note{font-size:.82rem;color:var(--faint);margin-top:14px}

/* ---------- Data blocks ---------- */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.data-block{display:flex;flex-direction:column;gap:14px}
.data-top{display:flex;align-items:center;gap:14px}
.big-num{font-family:var(--ff-head);font-weight:800;font-size:2.4rem;color:var(--accent-2);line-height:1}
.data-top h3{margin:0;font-size:1.2rem}
.data-top small{color:var(--faint)}
.portrait-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.portrait{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.7rem;color:var(--muted);text-align:center}
.portrait:hover{color:var(--text)}

/* champion avatar (shared) */
.av{position:relative;border-radius:10px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;color:#fff;background:var(--panel-3);border:2px solid var(--c1)}
.av img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.av img.wide{object-position:72% 40%}
.av .fb{display:none;width:100%;height:100%;align-items:center;justify-content:center;font-size:.8rem}
.av.no-img .fb{display:flex}
.av.c1{border-color:var(--c1)}.av.c2{border-color:var(--c2)}.av.c3{border-color:var(--c3)}.av.c4{border-color:var(--c4)}.av.c5{border-color:var(--c5)}
.av-56{width:56px;height:56px}.av-46{width:46px;height:46px}.av-40{width:40px;height:40px}.av-64{width:64px;height:64px}
.star{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.65);font-size:.55rem;color:var(--gold);text-align:center;line-height:1.4}

.item-list{display:flex;flex-direction:column;gap:8px}
.item-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:rgba(148,180,255,.04);border:1px solid var(--line);font-size:.88rem}
.item-row .ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;font-size:.72rem;color:#0b1324;flex-shrink:0}
.item-row .meta{margin-left:auto;font-size:.75rem;color:var(--faint)}

/* ---------- Patch box ---------- */
.patch{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.patch h3{font-size:1.5rem}
.patch p{color:var(--muted)}
.mini-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(148,180,255,.04);border:1px solid var(--line);font-size:.86rem}
.mini span{display:block;font-size:.72rem}
.up{color:var(--up)}.down{color:var(--down)}.new{color:var(--gold)}
.callout{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;color:var(--muted);font-size:.9rem}
.callout b{color:var(--text)}

/* ---------- Tierlist (tftacademy-like) ---------- */
.tabs{display:flex;gap:6px;padding:5px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto}
.tab{padding:9px 18px;border-radius:9px;border:0;background:none;color:var(--muted);font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit;white-space:nowrap}
.tab.active{background:var(--accent);color:#fff}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0}
.chip-btn{padding:7px 13px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:.8rem;cursor:pointer;font-family:inherit}
.chip-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.input{background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 13px;color:var(--text);font-size:.88rem;font-family:inherit}
.input::placeholder{color:var(--faint)}
.toolbar .input{margin-left:auto;min-width:220px}
.updated{font-size:.78rem;color:var(--faint)}

.tier-block{display:grid;grid-template-columns:64px 1fr;gap:12px;margin-bottom:14px}
.tier-letter{border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;font-size:1.7rem;color:#0b1324}
.tier-S{background:linear-gradient(160deg,#ffd76a,#f2a93b)}
.tier-A{background:linear-gradient(160deg,#a5b4fc,#6d7cf0)}
.tier-B{background:linear-gradient(160deg,#7dd3fc,#3b82f6)}
.tier-C{background:linear-gradient(160deg,#94a3b8,#64748b)}
.comp-list{display:flex;flex-direction:column;gap:8px}
.comp{border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,var(--panel-2),var(--panel));overflow:hidden}
.comp-head{display:grid;grid-template-columns:minmax(170px,1.1fr) auto 2fr auto;gap:16px;align-items:center;padding:12px 16px;cursor:pointer}
.comp-head:hover{background:rgba(148,180,255,.04)}
.comp-name{font-family:var(--ff-head);font-weight:600;font-size:1rem}
.comp-sub{font-size:.75rem;color:var(--faint)}
.trend{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.trend.rising{background:rgba(74,222,128,.12);color:var(--up)}
.trend.falling{background:rgba(248,113,113,.12);color:var(--down)}
.trend.new{background:var(--gold-soft);color:var(--gold)}
.trend.stable{background:rgba(148,180,255,.08);color:var(--faint)}
.units{display:flex;gap:6px;flex-wrap:wrap}
.chev{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--faint);transition:.2s}
.comp.open .chev{transform:rotate(180deg);color:var(--text)}
.comp-body{display:none;padding:4px 16px 18px;border-top:1px solid var(--line)}
.comp.open .comp-body{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.comp-body h4{font-size:.85rem;color:var(--faint);font-family:var(--ff-body);font-weight:600;margin:14px 0 8px;text-transform:uppercase;letter-spacing:.04em}
.comp-body p{color:var(--muted);font-size:.9rem}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.75rem;padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.86rem}
.kv dt{color:var(--faint)}.kv dd{margin:0}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ia-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.ia-card .ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;font-size:.8rem;color:#0b1324;flex-shrink:0}
.ia-card h4{font-size:.95rem;margin:0 0 3px}
.ia-card p{font-size:.82rem;color:var(--muted);margin:0}
.ia-card small{font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.group-title{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-family:var(--ff-head);font-weight:600}

/* ---------- Champions / Traits ---------- */
.champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.champ{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:.15s;text-align:left;color:inherit;font-family:inherit}
.champ:hover{border-color:var(--line-2);background:var(--panel-2)}
.champ h4{font-size:.95rem;margin:0 0 2px}
.champ .cost{font-size:.72rem;color:var(--faint);display:flex;align-items:center;gap:4px}
.coin{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block}
.trait-mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.trait-mini span{font-size:.64rem;padding:2px 7px;border-radius:99px;background:rgba(148,180,255,.07);color:var(--muted)}
.count{font-size:.8rem;color:var(--faint);margin-bottom:12px}

.trait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.trait{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.trait-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.trait-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.trait-ic svg{width:16px;height:16px}
.trait h4{margin:0;font-size:1rem}
.bp{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 8px}
.bp span{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted)}
.trait p{font-size:.86rem;color:var(--muted);margin-bottom:10px}
.trait-units{display:flex;gap:5px;flex-wrap:wrap}

/* modal */
.modal{position:fixed;inset:0;background:rgba(5,10,20,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal.open{display:flex}
.modal-box{width:100%;max-width:560px;max-height:85vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:24px;position:relative}
.modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);cursor:pointer;font-size:1.1rem}

/* search overlay */
.search-ov{position:fixed;inset:0;background:rgba(5,10,20,.75);backdrop-filter:blur(4px);z-index:90;display:none;justify-content:center;padding:80px 20px 20px}
.search-ov.open{display:flex}
.search-box{width:100%;max-width:620px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;align-self:flex-start}
.search-box input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:18px 20px;font-size:1.05rem;color:var(--text);outline:none;font-family:inherit}
.search-res{max-height:60vh;overflow:auto;padding:8px}
.sr{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer}
.sr:hover,.sr.focus{background:var(--accent-soft)}
.sr small{margin-left:auto;color:var(--faint);font-size:.72rem}
.sr-empty{padding:18px;color:var(--faint);font-size:.9rem}

/* ---------- Coaching ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pkg{display:flex;flex-direction:column}
.pkg.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 50px rgba(59,130,246,.15)}
.price{font-family:var(--ff-head);font-weight:800;font-size:2rem;margin:4px 0 14px}
.price small{font-size:.85rem;color:var(--faint);font-weight:400;font-family:var(--ff-body)}
.pkg ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.pkg li{font-size:.88rem;color:var(--muted);padding-left:22px;position:relative}
.pkg li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);transform:rotate(-45deg)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step-n{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;margin-bottom:10px}
.step h4{font-size:.98rem}.step p{font-size:.85rem;color:var(--muted);margin:0}
/* Coaching */
.co-sec{margin-top:54px}
.co-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.co-chips span{font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line-2);color:var(--muted)}
.co-chips .hl{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.co-cta{margin-top:20px}
.co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.co-card{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}
a.co-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.co-pic{aspect-ratio:203/224;border-radius:12px;background-color:#0f1a12;background-position:center 20%;background-size:cover;background-repeat:no-repeat}
.co-pic.team-open{display:flex;align-items:center;justify-content:center}
.co-pic .tcard-plus{width:52px;height:52px;font-size:1.8rem}
.co-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.co-body h3{margin:0;font-size:1.12rem}.co-body h3 em{color:var(--accent-2);font-style:normal}
.co-body p{margin:0;font-size:.82rem;color:var(--muted)}
.co-body .mt-go{margin-top:auto;font-size:.8rem}
.co-role{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.co-soon{border-style:dashed}.co-soon .co-role{color:var(--faint)}
.co-langs{display:flex;flex-wrap:wrap;gap:5px}
.co-lang{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--accent-soft);color:var(--accent-2)}
.co-lang.soft{background:var(--panel-2);color:var(--muted);font-weight:600}
.co-hour{padding:22px}
.co-bar{display:flex;height:34px;border-radius:10px;overflow:hidden;font-size:.78rem;font-weight:700;margin-bottom:18px}
.co-bar span{display:flex;align-items:center;padding:0 12px;color:#fff;white-space:nowrap}
.co-bar .b1{flex:0 0 22%;background:var(--gold);color:#1a1405}
.co-bar .b2{flex:1;background:var(--accent)}
.co-hour-grid{display:grid;grid-template-columns:22% 1fr;gap:22px}
.co-hour-grid h4{margin:0 0 6px;font-size:.98rem;display:flex;align-items:center;gap:8px}
.co-hour-grid p{margin:0;font-size:.86rem;color:var(--muted)}
.co-hour .dot{width:10px;height:10px;border-radius:50%;flex:none}.co-hour .d1{background:var(--gold)}.co-hour .d2{background:var(--accent)}
.co-rec{margin-top:16px;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px;border-color:var(--gold);background:linear-gradient(135deg,var(--gold-soft),var(--panel) 60%)}
.co-rec-ic{width:52px;height:52px;border-radius:14px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.co-rec-ic svg{width:28px;height:28px}
.co-rec h3{margin:0 0 8px;font-size:1.15rem}
.co-rec p{margin:0;font-size:.9rem;color:var(--muted)}.co-rec p b{color:var(--text)}
.co-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.co-tools span{font-size:.82rem;font-weight:700;padding:6px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-2)}
.co-tools span:last-child{font-weight:500;color:var(--muted)}
.co-rec-note{padding-top:12px;border-top:1px solid var(--line);font-size:.84rem !important}
.co-quotes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.co-quote{margin:0;display:flex;flex-direction:column;gap:8px;position:relative}
.co-qm{font-family:Georgia,serif;font-size:3rem;line-height:.6;color:var(--accent-2);height:22px}
.co-quote blockquote{margin:0;font-size:.88rem;color:var(--muted);flex:1}
.co-quote figcaption{display:flex;flex-direction:column;gap:2px}
.co-quote figcaption span{font-size:.74rem;color:var(--gold);font-weight:700}
.co-quote.soon{border-style:dashed;background:transparent}
.co-quote.soon .co-qm{color:var(--faint)}
.co-quote.soon p{margin:0;font-size:.82rem;color:var(--faint);font-style:italic;flex:1}
.faq{display:flex;flex-direction:column;gap:8px;max-width:860px}
.faq details{border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:14px 44px 14px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:400;color:var(--accent-2)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:.9rem}
/* ---------- Guides ---------- */
.guides{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.guide{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.guide-cover{aspect-ratio:3/4;border-radius:12px;display:flex;align-items:flex-end;padding:12px;font-family:var(--ff-head);font-weight:700;font-size:.95rem;line-height:1.2;position:relative;overflow:hidden}
.guide-cover small{display:block;font-family:var(--ff-body);font-weight:500;font-size:.68rem;opacity:.8}
.guide h3{font-size:1.15rem}
.guide p{font-size:.88rem;color:var(--muted)}

/* ---------- About / Apply ---------- */
.about{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start}
.about-pic{aspect-ratio:1;border-radius:20px;background:radial-gradient(circle at 40% 35%,#2b4a85,#121f3a 70%);display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.stat{padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--ff-head);font-size:1.3rem;color:var(--accent-2)}
.stat span{font-size:.75rem;color:var(--faint)}
.ph{color:var(--faint);font-style:italic}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;color:var(--muted);font-weight:500}
.field .input,.field select,.field textarea{width:100%}
select.input{appearance:none}
textarea.input{min-height:110px;resize:vertical}
.ok{display:none;grid-column:1/-1;padding:12px 14px;border-radius:12px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);font-size:.9rem}
.ok.err{background:rgba(255,90,106,.1);border-color:rgba(255,90,106,.4)}
.ok a{color:inherit;font-weight:700}
.field label small{color:var(--faint);font-weight:400}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* Spam-Falle: für Menschen unsichtbar */
.form button:disabled{opacity:.7;cursor:wait}

/* ---------- Footer ---------- */
footer{margin-top:80px;border-top:1px solid var(--line);background:var(--bg-2)}
.foot-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.foot-cta h3{margin:0;font-size:1.2rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;padding:34px 0}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--ff-head);font-style:italic;font-size:1.6rem}.logo svg{width:36px;height:36px}.logo b{color:var(--accent-2)}
.foot h5{font-family:var(--ff-head);font-size:.85rem;margin:0 0 12px;color:var(--text)}
.foot a{display:block;font-size:.86rem;color:var(--muted);padding:3px 0}
.foot a:hover{color:var(--text)}
.foot p{font-size:.85rem;color:var(--faint)}
.legal{font-size:.75rem;color:var(--faint);padding:18px 0 30px;border-top:1px solid var(--line)}


/* ---------- Hero card (dota2freaks-style) ---------- */
.hero-card{max-width:var(--maxw);margin:28px auto 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#14141e;position:relative}
.hero-main{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:560px;
  background:
    radial-gradient(600px 420px at 72% 55%, rgba(59,130,246,.38), transparent 65%),
    radial-gradient(500px 300px at 95% 0%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(100deg,#15151f 0%,#15151f 38%,#1a2140 100%)}
.hero-copy{padding:56px 0 48px 50px;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--ff-body);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.eyebrow svg{width:26px;height:26px}
.hero-copy h1{font-size:clamp(3rem,6.2vw,5.6rem);font-weight:900;line-height:.92;margin:18px 0 22px}
.hero-copy h1 em{display:block}
.hero-copy .lead{font-size:1.08rem;color:#d9dbe8;max-width:420px;line-height:1.5}
.hero-cta{display:flex;align-items:center;gap:14px;max-width:430px;padding:16px 20px;margin-top:12px;border-radius:6px;background:var(--accent);color:#fff;font-family:var(--ff-body);font-weight:700;font-size:1.02rem;border:1px solid rgba(255,255,255,.18);transition:filter .15s}
.hero-cta:hover{filter:brightness(1.1)}
.hero-cta small{margin-left:auto;font-weight:500;font-size:.8rem;opacity:.9}
.hero-note{font-size:.72rem;color:var(--faint);margin:8px 0 18px}
.hero-links{display:flex;gap:24px;font-size:.84rem}
.hero-links a{border-bottom:1px solid currentColor;padding-bottom:2px;color:var(--accent-2)}
.hero-links a+a{color:var(--gold)}
.hero-visual{position:relative}
@keyframes bob{50%{transform:translateY(-12px)}}
.hero-visual .ring{position:absolute;border-radius:50%;border:1px solid rgba(106,168,255,.25)}
.hero-visual .r1{width:420px;height:420px;right:12%;top:12%}
.hero-visual .r2{width:300px;height:300px;right:22%;top:24%;border-color:rgba(242,193,78,.2)}
.chip-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:rgba(20,20,30,.88);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;font-size:.8rem;box-shadow:0 12px 26px rgba(0,0,0,.45)}
.chip-float b{display:block;font-family:var(--ff-head);font-style:italic;font-size:1.25rem;line-height:1}
.chip-float.a{left:4%;top:16%}.chip-float.b{right:5%;bottom:14%}
.rank-strip{border-top:1px solid var(--line);background:#191926;padding:30px 30px 34px;text-align:center}
.rank-strip h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:26px}
.ranks{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:1150px;margin:0 auto}
.ranks::before{content:"";position:absolute;left:5%;right:5%;top:30px;height:2px;background:linear-gradient(90deg,transparent,rgba(106,168,255,.45),transparent)}
.rank{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--ff-head);font-weight:700;font-size:.95rem;color:var(--muted);transition:.15s}
.rank:hover{color:var(--text);transform:translateY(-3px)}
.rank-gem{width:84px;height:62px;display:flex;align-items:center;justify-content:center;overflow:visible}
.rank-gem img{width:76px;height:76px;object-fit:contain;transform:scale(1.9);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .2s}
.rank:hover .rank-gem img{transform:scale(2.05)}


/* ---------- Maskottchen ---------- */
.m-face{display:inline-block;flex-shrink:0;width:42px;height:42px;border-radius:50%;background:#2a1426 url(../img/mascot-chibi-face.webp) center/cover no-repeat;box-shadow:0 0 0 2px rgba(255,59,107,.55),0 4px 12px rgba(0,0,0,.45)}
.m-full{background:url(../img/mascot-vi.webp) center bottom/contain no-repeat}
.tb-logo .m-face{width:44px;height:44px}
.eyebrow .m-face{width:26px;height:26px;box-shadow:0 0 0 1.5px rgba(255,59,107,.6)}
.logo .m-face{width:38px;height:38px}
.drawer-panel .tb-logo .m-face{width:40px;height:40px}
.hero-visual .mascot{position:absolute;right:0;bottom:0;width:100%;height:100%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,40,90,.25));animation:bob 5s ease-in-out infinite;z-index:2}
@media (min-width:821px){ .hero-visual .mascot.m-chibi{width:76%;right:8%;bottom:2%} }
.mascot-glow{position:absolute;right:14%;top:18%;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,45,95,.32),rgba(255,45,95,0) 68%);z-index:1;pointer-events:none}

/* ---------- Items ---------- */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.it-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;text-align:left;color:inherit;font-family:inherit;transition:.15s}
.it-card:hover{border-color:var(--line-2);background:var(--panel-2)}
.it-ic{width:48px;height:48px;border-radius:8px;flex-shrink:0;background:var(--panel-3);border:1px solid var(--line-2)}
.it-card h4{font-size:1rem;margin:0 0 1px}
.it-card small{display:block;font-size:.74rem;color:var(--faint)}
.it-recipe{display:flex;align-items:center;gap:4px;margin-top:7px;color:var(--faint);font-size:.75rem}
.it-recipe img{width:22px;height:22px;border-radius:5px}
.it-stats{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.it-stat{font-size:.7rem;padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);font-weight:600;white-space:nowrap}
.it-desc{font-size:.9rem;color:var(--muted);line-height:1.55;margin-top:14px}
.it-desc .d-kw{color:var(--text);font-weight:700}
.it-desc .d-rad{color:var(--gold);font-weight:700}
.it-desc .d-rules{display:block;font-size:.8rem;color:var(--faint);font-style:italic}
.it-desc .d-var{color:var(--accent-2);font-style:italic}
.it-link{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:99px;border:1px solid var(--line-2);background:none;color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer}
.it-link:hover{border-color:var(--accent);color:var(--text)}
.it-link img{width:26px;height:26px;border-radius:6px}
.recipe-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:10px;margin-top:16px}
.recipe-table{border-collapse:separate;border-spacing:4px;margin:0 auto}
.recipe-table th,.recipe-table td{padding:0}
.recipe-table img{width:42px;height:42px;border-radius:7px;display:block}
.recipe-table th img{outline:2px solid var(--line-2);outline-offset:-2px;opacity:.9}
.recipe-table button{background:none;border:0;padding:0;cursor:pointer;border-radius:7px;display:block}
.recipe-table button:hover img,.recipe-table button:focus-visible img{outline:2px solid var(--accent-2);outline-offset:-2px}

/* ---------- Tierlist v2 (Comps, Hex-Brett) ---------- */
a.tab{display:inline-block}
.tier-block>*,.comp-head>*,.comp-body>*{min-width:0}
.comp-head{grid-template-columns:minmax(180px,220px) 1fr auto}
.comp-title{display:flex;flex-direction:column;gap:6px}
.comp-badges{display:flex;flex-wrap:wrap;gap:5px}
.cbadge{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(148,180,255,.08);color:var(--muted);white-space:nowrap}
.cbadge.d-EASY{background:rgba(74,222,128,.12);color:var(--up)}
.cbadge.d-MEDIUM{background:var(--gold-soft);color:var(--gold)}
.cbadge.d-HARD{background:rgba(248,113,113,.12);color:var(--down)}
.comp-mid{display:flex;flex-direction:column;gap:8px;min-width:0}
.cu-row{display:flex;flex-wrap:wrap;gap:6px}
.cu{position:relative;display:flex;flex-direction:column;align-items:center;width:46px}
.cu .av{width:46px;height:46px}
.cu-stars{position:absolute;top:-7px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--gold);letter-spacing:-1px;text-shadow:0 1px 2px #000;z-index:2}
.cu-items{display:flex;justify-content:center;margin-top:-8px;z-index:2;position:relative}
.cu-items img{width:15px;height:15px;border-radius:3px;border:1px solid rgba(0,0,0,.6)}
.cu-carry .av{box-shadow:0 0 0 2px var(--gold)}
.trait-row{display:flex;flex-wrap:wrap;gap:5px}
.tbadge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 4px;border-radius:7px;font-size:.72rem;font-weight:700;background:var(--panel-3);color:var(--muted);border:1px solid var(--line-2)}
.tbadge.l1,.tbadge.l2,.tbadge.l3,.tbadge.l4{background:var(--panel-3)}
.tbadge.l1{background:rgba(168,113,74,.22);border-color:rgba(168,113,74,.55);color:#e8c4a6}
.tbadge.l2{background:rgba(182,194,209,.18);border-color:rgba(182,194,209,.5);color:#e5ebf3}
.tbadge.l3{background:rgba(242,193,78,.18);border-color:rgba(242,193,78,.55);color:var(--gold)}
.tbadge.l4{background:linear-gradient(120deg,rgba(240,171,252,.25),rgba(106,168,255,.25));border-color:rgba(240,171,252,.6);color:#fbe3ff}
.comp.open .comp-body{grid-template-columns:auto 1fr}
.board-wrap{padding-top:14px}
.board{--hx:58px;--hy:calc(var(--hx) * 1.1547);display:flex;flex-direction:column;padding:6px 0 calc(var(--hy) * .25)}
.board-row{display:flex;gap:4px;margin-bottom:calc(var(--hy) * -.25 + 4px)}
.board-row.odd{margin-left:calc(var(--hx) / 2 + 2px)}
.hex{position:relative;width:var(--hx);height:var(--hy);flex-shrink:0}
.hex-bg{position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:rgba(148,180,255,.07)}
.hex.filled .hex-bg{background:var(--c1)}
.hex.c2 .hex-bg{background:var(--c2)}.hex.c3 .hex-bg{background:var(--c3)}.hex.c4 .hex-bg{background:var(--c4)}.hex.c5 .hex-bg{background:var(--c5)}
.hex-img{position:absolute;inset:3px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#1a1a26 center 25%/cover no-repeat}
.hex.plant .hex-img{background-position:center;background-color:#13261b}
.hex-stars{position:absolute;top:-4px;left:0;right:0;text-align:center;font-size:.66rem;color:var(--gold);text-shadow:0 1px 2px #000,0 0 3px #000;z-index:2;letter-spacing:-1px}
.hex-items{position:absolute;bottom:2px;left:0;right:0;display:flex;justify-content:center;z-index:2}
.hex-items img{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.7)}
.hex-name{position:absolute;bottom:-15px;left:-6px;right:-6px;text-align:center;font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-legend{display:flex;justify-content:space-between;font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.side h4:first-child{margin-top:14px}
.aug-row{display:flex;flex-wrap:wrap;gap:6px}
.aug-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border-radius:9px;border:1px solid var(--line-2);background:none;color:var(--muted);font:inherit;font-size:.78rem;cursor:pointer}
.aug-chip:hover{border-color:var(--accent);color:var(--text)}
.aug-chip img{width:26px;height:26px;border-radius:6px}
.mini-units{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.lv-tag{font-size:.62rem;color:var(--faint);text-align:center;margin-top:2px}
/* Augment-/Item-Tierlist */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.tl-card{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);cursor:pointer;text-align:left;color:inherit;font-family:inherit;transition:.15s}
.tl-card:hover{border-color:var(--line-2);background:var(--panel-2)}
.tl-card img{width:40px;height:40px;border-radius:8px;flex-shrink:0}
.tl-card h4{font-size:.9rem;margin:0;line-height:1.15}
.tl-card small{display:block;font-size:.7rem;color:var(--faint);margin-top:2px}
/* ---------- Tierlist v3: Kacheln + Detail-Panel ---------- */
:root{--hexp:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hx{position:relative;width:100%;height:100%;clip-path:var(--hexp);background:var(--c1)}
.hx.c2{background:var(--c2)}.hx.c3{background:var(--c3)}.hx.c4{background:var(--c4)}.hx.c5{background:var(--c5)}
.hx-in{position:absolute;inset:4px;clip-path:var(--hexp);background:#1a1a26 center 22%/cover no-repeat}
.hx.plant .hx-in{background-position:center;background-color:#13261b}
.tl-tier{margin-bottom:14px}
.tl-row{display:grid;grid-template-columns:110px 1fr;gap:14px}
.tl-letter{position:relative;background:var(--tc);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#111;min-height:108px}
.tl-letter b{font-family:var(--ff-head);font-weight:900;font-size:3.6rem;line-height:.85}
.tl-letter small{font-size:.64rem;font-weight:700;letter-spacing:.06em;opacity:.7;margin-top:4px}
.tl-letter::before,.tl-letter::after{content:"";position:absolute;width:9px;height:9px;border:3px solid #111}
.tl-letter::before{top:6px;left:6px;border-right:0;border-bottom:0}
.tl-letter::after{bottom:6px;right:6px;border-left:0;border-top:0}
.tl-tiles{border:2px solid var(--tc);border-radius:16px;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 9%,transparent),transparent 55%),#0d0d12;display:flex;flex-wrap:wrap;align-items:center;gap:24px 26px;padding:14px 20px;min-width:0}
.ct{position:relative;width:80px;height:92px;background:none;border:0;padding:0;cursor:pointer;transition:transform .15s,filter .15s;flex-shrink:0}
.ct:hover{transform:translateY(-3px)}
.ct.sel{filter:drop-shadow(0 0 7px var(--tc))}
.ct .ct-main{position:relative;z-index:1}
.ct-back{position:absolute;left:24px;top:-10px;width:64px;height:74px;opacity:.35;z-index:0}
.ct-st{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:3;width:24px;height:27px;clip-path:var(--hexp);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:900;color:#111}
.ct-st.sub{font-size:.68rem;color:#111}
.tl-tiles{position:relative}
.tl-label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--tc);color:#062320;font-size:.66rem;font-weight:800;letter-spacing:.08em;padding:2px 14px;border-radius:99px;cursor:help;z-index:2}
.tl-x .tl-tiles{padding-top:20px}
.ct-st.up{background:#9be32d}.ct-st.down{background:#ff4655;color:#fff}.ct-st.new{background:#ffd23f;font-size:.9rem}
.ct-tr{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);z-index:3;display:flex;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.ct::after{content:attr(data-name);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;font-weight:600;color:#fff;background:rgba(0,0,0,.85);padding:3px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:.15s;z-index:6}
.ct:not(:hover):not(:focus-visible)::after{display:none}   /* unsichtbarer Tooltip soll am Rand keinen Platz belegen */
.ct:hover::after,.ct:focus-visible::after{opacity:1}
/* Items, Augments und Holds im selben Reihen-Design wie die Comps */
.tl-ico{position:relative;background:none;border:0;padding:0;cursor:pointer;flex-shrink:0;transition:transform .15s,filter .15s}
.tl-ico:hover{transform:translateY(-3px);filter:drop-shadow(0 0 7px var(--tc))}
.tl-ico img{display:block;width:60px;height:60px;border-radius:10px;border:2px solid color-mix(in srgb,var(--tc) 55%,#2a2a36);background:#15151d}
.tl-ico.tl-champ{width:72px;height:83px}
.tl-ico::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;font-weight:600;color:#fff;background:rgba(0,0,0,.85);padding:3px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:.15s;z-index:6}
.tl-ico:hover::after,.tl-ico:focus-visible::after{opacity:1}
#itemTiers .tl-letter,#augTiers .tl-letter,#holdTiers .tl-letter{min-height:92px}
.tl-detail{margin-top:12px}
.cp-tabs{display:flex;gap:6px;flex-wrap:wrap;padding-left:300px;margin-bottom:-1px;position:relative;z-index:1}
.cp-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:10px 10px 0 0;border:1px solid var(--line-2);border-bottom:0;background:#0d0d12;color:var(--muted);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.cp-tab span{display:inline-flex;width:18px;height:18px;border-radius:5px;background:var(--tc);color:#111;font-size:.7rem;align-items:center;justify-content:center}
.cp-tab.on{color:var(--text);border-color:var(--tc)}
.cp{position:relative;display:grid;grid-template-columns:290px 1fr;gap:12px}
.cp-close{position:absolute;top:10px;right:10px;width:46px;height:30px;border-radius:99px;border:0;background:var(--gold);color:#111;font-weight:900;cursor:pointer;z-index:2}
.cp-left{position:relative;overflow:hidden;border:1px solid var(--tc);border-radius:16px;padding:22px 18px;text-align:center;background:linear-gradient(170deg,color-mix(in srgb,var(--tc) 32%,#0d0d12),#0d0d12 50%);min-width:0}
.cp-left>*{position:relative}
.cp-tierbg{position:absolute!important;top:-34px;left:-8px;font:900 11rem/1 var(--ff-head);color:rgba(0,0,0,.28);pointer-events:none}
.cp-left .hx-big{width:120px;height:139px;margin:0 auto 12px;background:var(--tc)}
.cp-left .hx-big .hx-in{inset:6px}
.cp-left h3{font-size:1.55rem;text-transform:uppercase;margin:0}
.cp-style{color:var(--tc);font-weight:700;font-size:.8rem;text-transform:uppercase;margin:4px 0 12px}
.cp h4{font-family:var(--ff-body);font-style:normal;font-weight:700;font-size:.95rem;margin:18px 0 10px;text-align:center;color:var(--text)}
.cp-augs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;justify-items:center}
.cp-aug{background:none;border:0;padding:0;cursor:pointer;transition:transform .15s}
.cp-aug:hover{transform:scale(1.08)}
.cp-aug img{width:48px;height:48px;border-radius:8px}
.cp-prio,.cp-itemprio{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.cp-pill{padding:4px 11px;border-radius:99px;border:1px solid var(--gold);color:var(--gold);font-size:.68rem;font-weight:800;text-transform:uppercase;background:rgba(242,193,78,.08)}
.cp-arrow{color:var(--faint);font-size:.6rem}
.cp-left p{font-size:.85rem;color:var(--muted);text-align:left;margin:0}
.cp-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-card{border:1px solid var(--line-2);border-radius:14px;background:#0d0d12;padding:12px 14px 16px;min-width:0}
.cp-card h4{margin-top:0}
.cp-final{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:24px 14px 18px}
.cp-mid{display:grid;grid-template-columns:1.25fr 1.25fr .8fr;gap:12px}
.cp-bottom{display:grid;grid-template-columns:1fr 150px;gap:12px}
.cp-units{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 8px;padding-top:6px}
.cp-col{flex-direction:column;align-items:center}
.cp-itemprio button{background:none;border:0;padding:0;cursor:pointer}
.cp-itemprio img{width:40px;height:40px;border-radius:8px;border:1px solid var(--line-2)}
.cp-board{display:flex;justify-content:center}
.cp .board{--hx:62px}
.cp-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.cp-names{background:none;font:inherit;display:inline-flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);cursor:pointer;padding:6px 14px;border:1px solid var(--line-2);border-radius:99px}
.uh{position:relative;display:flex;flex-direction:column;align-items:center;--uw:60px;width:var(--uw);cursor:pointer}
.uh.sm{--uw:46px}
.uh .hx{width:var(--uw);height:calc(var(--uw) * 1.1547)}
.uh-stars{position:absolute;top:-9px;z-index:3;background:var(--gold);color:#1a1200;font-size:.55rem;padding:0 4px;border-radius:3px;letter-spacing:-1px;line-height:1.55}
.uh-items{display:flex;margin-top:-12px;z-index:3;position:relative}
.uh-items img{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.7)}
.uh.sm .uh-items img{width:14px;height:14px}
.uh-lv{position:absolute;top:-6px;left:-8px;z-index:3;width:20px;height:23px;clip-path:var(--hexp);background:#5a5d6e;color:#fff;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.uh-name,.hex-name{display:none}
.uh-name{font-size:.62rem;color:var(--muted);margin-top:3px;white-space:nowrap;max-width:78px;overflow:hidden;text-overflow:ellipsis}
.show-names .uh-name,.show-names .hex-name{display:block}
.soon{max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.soon h3{margin:4px 0 0}.soon p{color:var(--muted);margin:0}

/* ---------- Maskottchen (Chibi) mit Gedankenblase ---------- */
.m-chibi{background:url(../img/mascot-vi-chibi.webp) center bottom/contain no-repeat}
.has-buddy{position:relative;padding-right:360px;min-height:290px}
.buddy{position:absolute;right:0;bottom:-4px;width:340px;height:270px;pointer-events:none}
.buddy-img{position:absolute;right:0;bottom:0;width:176px;height:262px;border:0;padding:0;background-color:transparent;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,40,90,.28));animation:bob 4.5s ease-in-out infinite}
.buddy-img:hover{animation-play-state:paused}
.buddy-img:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:12px}
/* Gedankenblase: saubere Blase mit Namensschild, Punkte führen zum Kopf */
.buddy-bubble{position:absolute;z-index:3;right:166px;top:26px;width:232px;padding:11px 16px 13px;background:linear-gradient(180deg,#ffffff,#f1ebf8);color:#24162e;border-radius:20px;font-size:.86rem;font-weight:600;line-height:1.45;text-align:left;pointer-events:auto;box-shadow:0 16px 34px rgba(0,0,0,.5);animation:bubbleFloat 5s ease-in-out infinite}
.buddy-bubble::before{content:"Vi";display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#e0336b;margin-bottom:3px}
.buddy.ornn .buddy-bubble::before{content:"Ornn";color:#d9480f}
.buddy-text{display:block}
.buddy-bubble i{position:absolute;border-radius:50%;background:#f7f3fb;box-shadow:0 6px 12px rgba(0,0,0,.35)}
.buddy-bubble .bd1{width:15px;height:15px;right:-22px;top:46px}
.buddy-bubble .bd2{width:9px;height:9px;right:-38px;top:36px}
.buddy.ornn .buddy-bubble .bd1{right:-24px;top:58px}
.buddy.ornn .buddy-bubble .bd2{right:-46px;top:72px}
.buddy-bubble.pop{animation:bubblePop .35s ease,bubbleFloat 5s ease-in-out .35s infinite}
@keyframes bubbleFloat{50%{transform:translateY(-3px)}}
@keyframes bubblePop{from{transform:scale(.85) translateY(6px);opacity:0}to{transform:none;opacity:1}}
/* Variante: Vi im Inhalt (links), Blase rechts daneben – z. B. unter der Rang-Tabelle */
.buddy.buddy-inline{position:relative;right:auto;bottom:auto;width:auto;height:auto;margin:26px 0 0;display:flex;align-items:center;gap:36px;pointer-events:auto}
.buddy.buddy-inline .buddy-img{position:relative;right:auto;bottom:auto;flex:none;width:132px;height:196px}
.buddy.buddy-inline .buddy-bubble{position:relative;right:auto;top:auto;width:auto;max-width:380px}
.buddy.buddy-inline .buddy-bubble .bd1{right:auto;left:-22px;top:auto;bottom:24px}
.buddy.buddy-inline .buddy-bubble .bd2{right:auto;left:-38px;top:auto;bottom:12px}
@media (prefers-reduced-motion:reduce){.buddy-img,.buddy-bubble.pop{animation:none}}
/* ---------- Ornn: "im Bau / läuft nicht" ---------- */
.m-ornn{background:url(../img/mascot-ornn.webp) center bottom/contain no-repeat;display:block}
.has-buddy.ornn-head{padding-right:480px}
.buddy.ornn{width:470px}
.buddy.ornn .buddy-img{width:250px;height:216px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,80,30,.3));animation:forge 3.2s ease-in-out infinite;transform-origin:50% 100%}
.buddy.ornn .buddy-bubble{right:240px;top:40px}
@keyframes forge{0%,100%{transform:none}50%{transform:scale(1.025,.985)}}
.ornn-empty{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px dashed var(--line-2);border-radius:14px;background:rgba(255,80,30,.04);max-width:560px}
.ornn-empty .m-ornn{width:92px;height:80px;flex-shrink:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.ornn-say{position:relative;margin:0;background:linear-gradient(180deg,#ffffff,#f1ebf8);color:#24162e;padding:9px 15px 11px;border-radius:16px;font-weight:600;font-size:.86rem;line-height:1.45;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.ornn-say::before{content:"";position:absolute;left:-7px;top:50%;width:16px;height:16px;margin-top:-8px;background:#f7f3fb;transform:rotate(45deg);border-radius:3px}
.say-name{position:relative;display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#d9480f;margin-bottom:2px}
.vi-empty{background:rgba(255,45,95,.05)}
.vi-empty .m-chibi{display:block;width:62px;height:92px;flex-shrink:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.vi-empty .say-name{color:#e0336b}
.sr-empty .vi-empty .m-chibi{width:44px;height:66px}
.sr-empty .ornn-empty{border:0;background:none;padding:6px 0}
.sr-empty .ornn-empty .m-ornn{width:64px;height:56px}
@media (prefers-reduced-motion:reduce){.buddy.ornn .buddy-img{animation:none}}
.tft-logo{display:inline-block;flex-shrink:0;width:44px;height:44px;background:url(../img/tft-logo.png) center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.logo .tft-logo{width:36px;height:36px}
.drawer-panel .tb-logo .tft-logo{width:40px;height:40px}
/* ---------- Ranks ---------- */
.rk-hero{text-align:center;padding:40px 0 24px;background:radial-gradient(700px 220px at 50% 0,rgba(106,168,255,.13),transparent 70%)}
.rk-hero h1{font-size:clamp(2rem,4vw,3rem);margin:6px 0 8px}
.rk-hero p{color:var(--accent-2);margin:0 auto;max-width:620px}.rk-table{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.rk-cell{display:flex;align-items:center;gap:16px;padding:14px 16px;min-width:0;background:var(--panel);transition:background .15s}
.rk-cell.alt{background:var(--panel-2)}
.rk-cell:hover{background:var(--panel-3)}
.rk-empty:hover{background:inherit}
.rk-emb{position:relative;width:88px;height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rk-emb img{width:124px;height:124px;max-width:none;flex:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.rk-div{position:absolute;bottom:-2px;right:0;font:800 .6rem/1.5 var(--ff-body);background:#0d0d12;border:1px solid var(--line-2);color:var(--text);padding:0 5px;border-radius:5px}
.rk-cell strong{display:block;font-family:var(--ff-head);font-weight:700;font-size:1.05rem;line-height:1.1}
.rk-cell small{color:var(--muted);font-size:.78rem}
.rk-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.76rem;color:var(--faint);padding:10px 4px}
.rk-foot span::first-letter{color:var(--accent-2)}
.rk-foot a:hover{color:var(--text)}
.rk-back{font-size:.82rem;color:var(--faint);margin:26px 0 10px}
.rk-back a:hover{color:var(--text)}.rk-back span{color:var(--accent-2)}
.rk-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.rk-head{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.rk-head img{width:190px;height:190px;max-width:none;margin:-40px -20px -40px -30px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.rk-head h1{margin:0 0 6px;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.rk-head p{color:var(--muted);margin:0;max-width:620px}
.rk-big{text-align:right}
.rk-big b{display:block;font-family:var(--ff-head);font-size:2.6rem;color:var(--accent-2);line-height:1}
.rk-big small{color:var(--faint);font-size:.78rem}
.rk-sec{display:flex;justify-content:space-between;align-items:flex-end;margin:26px 0 12px;gap:10px;flex-wrap:wrap}
.rk-sec h3{margin:0;font-family:var(--ff-body);font-style:normal;font-weight:700;font-size:1.05rem}
.rk-divs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border-radius:10px;overflow:hidden}
.rk-divs.three{grid-template-columns:repeat(3,1fr)}
.rk-divs .rk-cell.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.rk-divs .rk-cell{background:var(--panel-2)}
.rk-toggle{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.rk-toggle button{border:0;background:none;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:7px;cursor:pointer}
.rk-toggle button.on{background:var(--accent-soft);color:var(--text)}
.rk-chartwrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:26px}
.rk-chart{position:relative;height:240px;margin:22px 0 0 40px}
.rk-gl{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.08)}
.rk-gl span{position:absolute;left:-40px;top:-8px;width:34px;text-align:right;font-size:.66rem;color:var(--faint)}
.rk-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.rk-bar{position:relative;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:default}
.rk-bar[data-href]{cursor:pointer}
.rk-bar i{display:block;width:64%;max-width:64px;background:#4a4d63;border-radius:4px 4px 0 0;transition:filter .15s}
.rk-bar.on i{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.rk-bar em{font-style:normal;font-size:.7rem;color:var(--muted);margin-bottom:5px;white-space:nowrap}
.rk-bar.on em{color:var(--accent-2);font-weight:700}
.rk-bar:hover i{filter:brightness(1.3)}
.rk-bar:hover::after{content:attr(data-tip);position:absolute;top:-8px;left:50%;transform:translate(-50%,-100%);background:rgba(0,0,0,.88);color:#fff;padding:4px 9px;border-radius:6px;font-size:.72rem;white-space:nowrap;z-index:3;pointer-events:none}
.rk-xl{display:flex;gap:2px;margin:8px 0 0 40px;border-top:1px solid var(--line-2);padding-top:8px}
.rk-xl span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.7rem;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis}
.rk-xl span.on{color:var(--accent-2);font-weight:700}
.rk-xl img{width:100%;max-width:64px;height:auto;aspect-ratio:1;margin:-10px 0 -12px;object-fit:contain}
.rk-side{border-left:1px solid var(--line);padding-left:22px;align-self:center}
.rk-sidebig{display:block;font-family:var(--ff-head);font-size:2.6rem;line-height:1.1;margin-top:6px}
.rk-side p{color:var(--muted);font-size:.86rem;margin:4px 0 0}
.rk-side p b{color:var(--text)}
.rk-side hr{border:0;border-top:1px solid var(--line-2);width:40px;margin:16px 0}
.rk-where{margin-top:10px!important}
.rk-exact{margin-top:14px;font-size:.82rem;color:var(--muted)}
.rk-exact summary{cursor:pointer;color:var(--muted)}
.rk-exact table{border-collapse:collapse;margin-top:8px;width:100%;max-width:420px}
.rk-exact td,.rk-exact th{padding:4px 10px;text-align:left;border-bottom:1px solid var(--line)}
.rk-exact th{color:var(--faint);font-weight:600}
.rk-exact tr.on td{color:var(--accent-2);font-weight:700}
/* Trait-Symbole im Hex-Rahmen (Stil wie im Spiel) */
.thx{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--s);height:calc(var(--s) * 1.1547);flex-shrink:0;clip-path:var(--hexp);background:#4a4c5e}
.thx::before{content:"";position:absolute;inset:max(1.5px, calc(var(--s) * .07));clip-path:var(--hexp);background:#16161f}
.thx img{position:relative;width:60%;height:auto}
.thx-bronze{background:linear-gradient(160deg,#e0a27a,#8a5232)}.thx-bronze::before{background:linear-gradient(160deg,#7a4a2c,#3b2416)}
.thx-silver{background:linear-gradient(160deg,#f1f4f8,#8d97a5)}.thx-silver::before{background:linear-gradient(160deg,#78818f,#3d434e)}
.thx-gold{background:linear-gradient(160deg,#ffe592,#b7862a)}.thx-gold::before{background:linear-gradient(160deg,#ad7f2c,#5c3f11)}
.thx-prism{background:linear-gradient(135deg,#f9a8ff,#8ee6ff 50%,#ffe18a)}.thx-prism::before{background:linear-gradient(135deg,#8a44b5,#2a6f9e)}
.thx-unique{background:linear-gradient(160deg,#ffbf7a,#d9480f)}.thx-unique::before{background:linear-gradient(160deg,#8a3412,#3f1406)}
.sr .thx{margin:0 3px}
/* ---------- Team (Home) ---------- */
.team-head{text-align:center;max-width:720px;margin:0 auto 28px}
.eyebrow-sm{display:block;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.team-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 10px}
.team-head p{color:var(--muted);margin:0}
.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,210px));justify-content:center;gap:14px}
.tcard{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .15s,border-color .15s;color:inherit;text-decoration:none}
a.tcard:hover{border-color:var(--accent)}
.tcard:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tcard-img{position:relative;aspect-ratio:203/224;background:#0f1a12 center 20%/cover no-repeat}
.team-claudio{background-image:url(../img/team-claudio.jpg)}
.team-kevin{background-image:url(../img/team-kevin.jpg)}
.team-romano{background-image:url(../img/team-romano.jpg)}
.team-vi{background:radial-gradient(circle at 50% 42%,rgba(255,45,95,.32),rgba(255,45,95,0) 62%),linear-gradient(160deg,#2a0f1a,#0d0d12)}
.tcard-mascot{position:absolute;inset:8px 8px 0;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));transition:transform .2s}
.tcard:hover .tcard-mascot{transform:translateY(-3px) rotate(-2deg)}
.team-open{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(106,168,255,.18),transparent 60%),linear-gradient(160deg,#141c2e,#0d0d12)}
.tcard-plus{width:74px;height:74px;border-radius:50%;border:2px dashed rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:300;color:#fff}
.tcard-badge{position:absolute;left:8px;bottom:8px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tcard-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.tcard-body h3{margin:0;font-size:1.1rem;font-style:normal}
.tcard-body h3 em{color:var(--accent-2);font-style:normal}
.tcard-body p{color:var(--muted);font-size:.84rem;margin:0}
.tcard-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tcard-facts div{background:var(--panel-2);border-radius:8px;padding:6px 8px}
.tcard-facts small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tcard-facts b{font-size:.8rem}
.tcard-lbl{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tcard-traits{display:flex;gap:5px;flex-wrap:wrap}
.tcard-btn{align-self:flex-start;padding:8px 14px;font-size:.84rem;margin-top:auto}
.team-actions{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}
/* ---------- About ---------- */
.about-id{text-align:center;margin-top:10px;font-family:var(--ff-head)}
.about-id b{display:block;font-size:1.2rem}.about-id span{font-size:.8rem;color:var(--faint);font-family:var(--ff-body)}
.about-lead{font-size:1.05rem}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:16px}
.about-col{display:flex;flex-direction:column;gap:16px}
.about-h{margin:0;font-size:1.15rem}
.about-sub{font-size:.78rem;color:var(--faint);margin:2px 0 12px}
.lp-hist{display:flex;flex-direction:column;gap:6px}
.lp-row{display:grid;grid-template-columns:62px 40px 1fr auto;align-items:center;gap:10px;padding:6px 12px;border-radius:10px;background:var(--panel-2);border:1px solid transparent}
.lp-row span{color:var(--muted);font-weight:600}
.lp-row img{width:40px;height:40px;object-fit:contain}
.lp-row em{font-style:normal;font-family:var(--ff-head);font-weight:700;color:var(--accent-2)}
.lp-row.best{border-color:var(--gold);background:var(--gold-soft)}
.lp-row.best em{color:var(--gold)}
.about-list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.about-list li{margin-bottom:6px}.about-list b{color:var(--text)}
.about-link{display:flex;justify-content:center;margin-top:12px;padding:8px 12px;font-size:.84rem}
.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--accent-2)}
.mt-back{margin-top:16px}
.stats.mt-season{grid-template-columns:repeat(3,1fr);margin-top:0}
/* Champion-Details: Fähigkeit, Werte, Reichweite · Trait-Stufen */
.ch-rng{display:inline-block;margin-left:8px;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:99px;vertical-align:middle}
.ch-rng.melee{background:rgba(239,91,91,.14);color:#f59e9e}
.ch-rng.ranged{background:rgba(106,168,255,.14);color:var(--accent-2)}
.ch-rng.sm{margin-left:6px;font-size:.62rem;padding:1px 6px}
.ch-ab{padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.ch-ab-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ch-ab-head b{font-family:var(--ff-head);font-size:1.05rem}
.ch-ab-head span{font-size:.74rem;font-weight:700;color:#7dd3fc;background:rgba(56,189,248,.12);padding:2px 8px;border-radius:99px}
.ch-ab p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.ab-val{color:var(--text);font-weight:800}
.ab-sc{display:inline-block;font-size:.66rem;font-weight:800;padding:0 5px;border-radius:5px;background:rgba(168,85,247,.18);color:#d8b4fe;margin:0 2px;vertical-align:1px}
.ab-q{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;background:var(--panel-3);color:var(--faint);font-weight:800;font-size:.75rem;cursor:help}
.ch-note{display:block;margin-top:6px;font-size:.72rem;color:var(--faint)}
.ch-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ch-stats div{padding:8px 10px;border-radius:9px;background:var(--panel-2)}
.ch-stats small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ch-stats b{font-size:.86rem}
@media (max-width:600px){ .ch-stats{grid-template-columns:1fr 1fr} }
.tt-more{margin-top:8px}
.tt-more summary{cursor:pointer;font-size:.78rem;font-weight:700;color:var(--accent-2);list-style:none}
.tt-more summary::-webkit-details-marker{display:none}
.tt-more summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.tt-more[open] summary::before{transform:rotate(90deg)}
.tt-intro{margin:8px 0 6px;font-size:.84rem;color:var(--muted);line-height:1.5}
.tt-rows{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.tt-rows li{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.45}
.tt-bp{flex:none;min-width:24px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:var(--panel-3);color:var(--text);font-weight:800;font-size:.74rem}
/* Patches */
.pt-set{margin-top:26px}.pt-set h2{font-size:1.4rem;margin:0 0 12px}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pt-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}
.pt-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.pt-card.cur{border-color:var(--gold)}
.pt-img{position:relative;aspect-ratio:16/8;background:var(--panel-2) center/cover no-repeat}
.pt-img .pill{position:absolute;top:10px;left:10px;background:var(--gold);color:#1a1405}
.pt-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pt-body small{color:var(--faint);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pt-body h3{margin:0;font-size:1.2rem}
.pt-body p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pt-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.pt-meta span{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--panel-2);color:var(--muted)}
.pt-meta .hl{background:var(--gold-soft);color:var(--gold)}
.pd-hero{position:relative;border-radius:18px;overflow:hidden;padding:34px 30px;min-height:260px;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(10,10,16,.94) 0%,rgba(10,10,16,.75) 55%,rgba(10,10,16,.35) 100%),var(--img,none) var(--pos,50% 30%)/cover no-repeat,var(--panel);border:1px solid var(--line)}
.pd-hero > div{max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pd-hero small{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.76rem}
.pd-hero small b{color:var(--gold)}
.pd-hero h1{margin:0}
.pd-hero blockquote{margin:0;padding-left:14px;border-left:3px solid var(--gold);color:var(--text);font-size:.98rem;line-height:1.5}
.pd-hero cite{display:block;margin-top:4px;font-style:normal;font-size:.76rem;color:var(--faint)}
.pd-note{margin-top:16px;padding:20px 22px;border-color:var(--gold);background:linear-gradient(135deg,var(--gold-soft),var(--panel) 60%)}
.pd-note h3{margin:0 0 8px}.pd-note p{margin:0 0 8px;color:var(--muted)}
.pd-search{margin:20px 0 4px;width:100%;max-width:520px}
.pd-grp h2{font-size:1.3rem;margin:24px 0 10px}
.pd-grp[hidden],.pd-sec[hidden],.pn-row[hidden]{display:none}
.pd-sec{padding:16px 18px;margin-bottom:12px}
.pd-sec h3{margin:0 0 10px;font-size:1rem;color:var(--accent-2)}
.pd-sec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pn-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:var(--panel-2)}
.pn-ic{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;cursor:pointer}
span.pn-ic{cursor:default}
.pn-ic .av{width:34px;height:34px;border-radius:8px}
.pn-ic img{width:32px;height:32px;border-radius:7px;object-fit:cover}
.pn-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.pn-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:.88rem;min-width:0}
.pn-txt b{color:var(--text)}
.pn-l{color:var(--muted)}
.pn-v{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.pn-old{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.pn-arr{color:var(--gold)}
.pn-new{color:var(--text);font-weight:700}
.pd-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.cp-list{display:flex;flex-direction:column;gap:8px}
.cp-p{padding:10px 12px;border-radius:10px;background:var(--panel-2)}
.cp-p a{font-weight:800;color:var(--accent-2);font-size:.84rem;text-decoration:none}
.cp-p ul{margin:4px 0 0;padding-left:16px;color:var(--muted);font-size:.84rem}
.cp-p b{color:var(--text)}
@media (max-width:600px){ .pd-hero{padding:24px 18px;min-height:0} }
/* Tools */
.tool-view[hidden]{display:none}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tool-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}
a.tool-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.tool-card h3{margin:4px 0 0;font-size:1.25rem}
.tool-card p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.tool-card .pill{position:absolute;top:18px;right:18px}
.tool-card.soon{border-style:dashed;opacity:.75}
.tool-ic{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent-2);display:flex;align-items:center;justify-content:center}
.tool-ic svg{width:26px;height:26px}
.tool-card.soon .tool-ic{background:var(--gold-soft);color:var(--gold)}
/* Rolldown-Rechner */
.rd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
.rd-in{display:flex;flex-direction:column;gap:22px;padding:22px}
.rd-in section{display:flex;flex-direction:column;gap:10px}
.rd-h{display:flex;align-items:center;gap:10px;margin:0;font-size:1.05rem}
.rd-h b{width:24px;height:24px;border-radius:8px;background:var(--accent-soft);color:var(--accent-2);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--c1)}
.cdot.c2{background:var(--c2)}.cdot.c3{background:var(--c3)}.cdot.c4{background:var(--c4)}.cdot.c5{background:var(--c5)}
.rd-costs{display:flex;gap:6px;flex-wrap:wrap}
.rd-cost{display:inline-flex;align-items:center;padding:7px 12px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-weight:700;font-size:.82rem;cursor:pointer}
.rd-cost.on{background:var(--panel-2);color:var(--text);border-color:var(--accent)}
.rd-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
.rd-ch{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:.68rem;font-weight:600;line-height:1.15;text-align:center}
.rd-ch:hover{background:var(--panel-2)}
.rd-ch.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.rd-ch span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-ch .av{width:46px;height:46px}
.rd-kicker .av{width:26px;height:26px;border-radius:7px;border-width:1.5px}
.rd-f{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-weight:600;font-size:.9rem}
.rd-f b{font-family:var(--ff-head);font-size:1.15rem;color:var(--accent-2)}
.rd-f input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
.rd-odds{display:flex;height:22px;border-radius:7px;overflow:hidden;gap:2px}
.rd-odds span{display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;color:#fff;opacity:.45;background:var(--c1);min-width:4px}
.rd-odds span.c2{background:var(--c2)}.rd-odds span.c3{background:var(--c3)}.rd-odds span.c4{background:var(--c4)}.rd-odds span.c5{background:var(--c5);color:#1a1405}
.rd-odds span.on{opacity:1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.rd-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rd-n{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.86rem}
.rd-n small{font-weight:400;color:var(--faint);font-size:.74rem}
.rd-targets{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.rd-targets button{padding:8px 0;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-weight:800;cursor:pointer}
.rd-targets button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd-targets button[data-k="3"],.rd-targets button[data-k="9"]{border-color:var(--gold)}
.rd-hint{margin:0;font-size:.76rem;color:var(--faint)}
.rd-chk{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;flex-wrap:wrap}
.rd-chk input{accent-color:var(--accent);width:16px;height:16px}
.rd-chk small{font-weight:400;color:var(--faint)}
.rd-res{padding:22px;position:sticky;top:96px}
.rd-hero{display:flex;align-items:center;gap:20px}
.rd-ring{--p:0;flex:none;width:132px;height:132px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,var(--panel) 78%,transparent 79%),conic-gradient(var(--accent) calc(var(--p)*1%),var(--panel-2) 0)}
.rd-ring b{font-family:var(--ff-head);font-size:1.9rem;line-height:1}
.rd-ring small{color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.rd-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.rd-hero h3{margin:4px 0 6px;font-size:1.35rem}
.rd-hero p{margin:0;color:var(--muted);font-size:.88rem}.rd-hero p b{color:var(--text)}
.rd-cmp{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);font-size:.86rem;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.rd-cmp b{color:var(--text)}
.rd-cmp.up{border-color:rgba(34,163,90,.6);background:rgba(34,163,90,.08)}.rd-cmp.up b{color:#4ade80}
.rd-cmp.down{border-color:rgba(242,193,78,.5);background:var(--gold-soft)}.rd-cmp.down b{color:var(--gold)}
.rd-sub{margin:20px 0 10px;font-size:.9rem;color:var(--muted)}
.rd-bars{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;align-items:end}
.rd-bar{display:flex;flex-direction:column;align-items:center;gap:4px}
.rd-cols{width:100%;height:120px;display:flex;align-items:flex-end;gap:2px;background:var(--panel-2);border-radius:8px;padding:0 3px;overflow:hidden}
.rd-fill{flex:1;display:block;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:5px 5px 0 0;min-height:2px;transition:height .25s}
.rd-fill.alt{background:linear-gradient(180deg,#86efac,#22a35a)}
.rd-bar b{font-size:.72rem;font-family:var(--ff-head)}
.rd-bar small{font-size:.7rem;color:var(--faint);font-weight:700}
.rd-bar.on .rd-cols{box-shadow:0 0 0 2px var(--gold)}
.rd-bar.on small{color:var(--gold)}
.rd-legend{display:flex;gap:16px;margin-top:10px;font-size:.76rem;color:var(--muted)}
.rd-legend span{display:flex;align-items:center;gap:6px}
.rd-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.rd-need{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rd-need div{padding:10px 12px;border-radius:10px;background:var(--panel-2);display:flex;flex-direction:column}
.rd-need small{font-size:.7rem;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rd-need b{font-family:var(--ff-head);font-size:1.15rem}
.rd-table-card{margin-top:16px;padding:22px}
.rd-table-wrap{overflow-x:auto;margin-top:12px}
.rd-table{width:100%;border-collapse:collapse;font-size:.86rem;text-align:center;min-width:420px}
.rd-table th,.rd-table td{padding:7px 10px;border-bottom:1px solid var(--line)}
.rd-table th{font-size:.76rem;color:var(--faint);font-weight:700}
.rd-table td:first-child,.rd-table th:first-child{text-align:left;font-weight:700;color:var(--muted)}
.rd-table .on{background:rgba(59,130,246,.08)}
.rd-table tr.on td{background:var(--accent-soft);color:var(--text);font-weight:700}
.rd-table tr.on td.on{background:var(--accent);color:#fff}
/* Tierlist-Maker */
.tm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tm-title{display:flex;align-items:center;gap:12px;font-family:var(--ff-head);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;flex:1;min-width:260px}
.tm-title i{font-style:normal;color:var(--gold);font-size:.7em}
.tm-title input{flex:1;min-width:0;background:transparent;border:0;border-bottom:2px dashed var(--line-2);color:var(--gold);font:inherit;text-transform:uppercase;padding:2px 0;outline:none}
.tm-title input:focus{border-bottom-color:var(--gold)}
.tm-title input::placeholder{color:rgba(242,193,78,.45)}
.tm.view .tm-title input{border-bottom-color:transparent}
.tm-mode{display:inline-flex;padding:4px;border-radius:99px;background:var(--panel);border:1px solid var(--line-2)}
.tm-mode button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.82rem;padding:7px 14px;border-radius:99px;cursor:pointer}
.tm-mode button.on{background:var(--gold);color:#1a1405}
.tm-shared{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent);font-size:.9rem}
.tm-shared[hidden]{display:none}
.tm-shared .btn{padding:7px 14px;font-size:.84rem}
.tm-body{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:20px;align-items:start}
.tm.view .tm-body{grid-template-columns:1fr}
.tm.view .tm-box{display:none}
.tm-rows{display:flex;flex-direction:column;gap:12px}
.tm-row{display:grid;grid-template-columns:104px 1fr;gap:12px;min-height:104px}
.tm-label{position:relative;border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 85%,#fff),var(--rc));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.tm-label > button{width:100%;height:100%;min-height:104px;border:0;background:transparent;cursor:pointer;font-family:var(--ff-head);font-style:italic;font-weight:900;font-size:clamp(1.6rem,4vw,2.9rem);color:#141414;line-height:1;padding:6px;word-break:break-word}
.tm.view .tm-label > button{cursor:default}
.tm-label::before,.tm-label::after{content:"";position:absolute;width:10px;height:10px;border:3px solid #141414;pointer-events:none}
.tm-label::before{top:6px;left:6px;border-right:0;border-bottom:0}
.tm-label::after{bottom:6px;right:6px;border-left:0;border-top:0}
.tm-ctl{position:absolute;left:4px;right:4px;bottom:-1px;display:flex;justify-content:center;gap:2px;opacity:0;transition:opacity .15s}
.tm-row:hover .tm-ctl,.tm-ctl:focus-within{opacity:1}
.tm-ctl button{width:22px;height:20px;border:0;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;font-size:.62rem;cursor:pointer;padding:0}
.tm-ctl button:hover{background:#000}
.tm-drop{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;padding:10px;border-radius:16px;border:2px solid var(--rc);background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 7%,var(--bg)),var(--bg));min-height:104px;transition:box-shadow .15s}
.tm-drop.over{box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 45%,transparent)}
.tm-empty{align-self:center;margin:auto;color:var(--faint);font-size:.82rem}
.tm-tile{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:grab;position:relative;transition:transform .12s}
.tm.view .tm-tile{cursor:default}
.tm-tile:hover{transform:translateY(-2px)}
.tm-tile.sel{outline:3px solid var(--gold);outline-offset:1px}
.tm-tile.dragging{opacity:.35}
.tm-tile .av{width:52px;height:52px;border-radius:10px}
.tm-tile img{width:48px;height:48px;border-radius:9px;object-fit:cover}
.tm-tile.tm-t{background:var(--panel-2);border-radius:12px}
/* In der Tierlist größer als in der Toolbox, damit man die Einträge gut erkennt */
.tm-rows .tm-tile,.tm-rows .tm-tile .av{width:74px;height:74px;border-radius:13px}
.tm-rows .tm-tile img{width:70px;height:70px;border-radius:12px}
.tm-rows .tm-drop{gap:8px}
.tm-box{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:0 14px 14px;position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.tm-box-head{display:flex;align-items:center;gap:8px;margin:0 -14px;padding-right:12px;flex-wrap:wrap}
.tm-box-head h3{margin:0;background:var(--gold);color:#1a1405;padding:9px 18px;border-radius:0 0 14px 0;font-size:1.2rem}
.tm-acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;padding-top:8px}
.tm-acts button{border:0;border-radius:7px;background:var(--panel-2);color:var(--text);font-weight:700;font-size:.76rem;padding:7px 10px;cursor:pointer}
.tm-acts button:hover{background:var(--line-2)}
.tm-acts button.hl{background:var(--gold);color:#1a1405}
.tm-tabs,.tm-sorts{display:flex;gap:4px;flex-wrap:wrap}
.tm-tabs button,.tm-sorts button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.78rem;padding:5px 11px;border-radius:99px;cursor:pointer}
.tm-tabs button.on{background:var(--gold);color:#1a1405}
.tm-sorts button{font-size:.72rem;padding:3px 10px}
.tm-sorts button.on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--gold)}
/* Augment-Stufen im Tierlist-Maker */
.tm-sorts button[data-sort="1"],.tm-sorts button[data-sort="2"],.tm-sorts button[data-sort="3"]{font-size:.76rem;padding:4px 12px}
.tm-sorts button[data-sort="1"].on{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#1f2328;box-shadow:none}
.tm-sorts button[data-sort="2"].on{background:linear-gradient(135deg,#ffe08a,#e0a82e);color:#2a1a00;box-shadow:none}
.tm-sorts button[data-sort="3"].on{background:linear-gradient(135deg,#f0abfc,#93c5fd 55%,#86efac);color:#1b1230;box-shadow:none}
.tm-pool{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;max-height:430px;overflow-y:auto;padding:4px 2px;border-radius:10px;min-height:120px}
.tm-pool.over{background:rgba(242,193,78,.06)}
.tm-tip{margin:0;font-size:.72rem;color:var(--faint)}
.tm-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--gold);color:#1a1405;font-weight:700;padding:10px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:all .2s;z-index:80}
.tm-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1100px){ .tm-body{grid-template-columns:1fr} .tm-box{position:static} .tm-pool{max-height:320px} }
@media (max-width:600px){ .tm-row{grid-template-columns:70px 1fr;min-height:80px} .tm-label > button{min-height:80px} .tm-drop{min-height:80px;padding:8px} .tm-tile,.tm-tile .av{width:44px;height:44px} .tm-tile img{width:40px;height:40px} .tm-rows .tm-tile,.tm-rows .tm-tile .av{width:56px;height:56px;border-radius:11px} .tm-rows .tm-tile img{width:52px;height:52px;border-radius:10px} }
/* Impressum / Datenschutz */
.lg{max-width:860px;padding:26px 30px}
.lg h2{font-size:1.1rem;margin:24px 0 6px}.lg h2:first-child{margin-top:0}
.lg p{margin:0 0 8px;color:var(--muted);line-height:1.6}
.lg a{color:var(--accent-2);text-decoration:underline}
.lg-sub{font-size:.84rem;color:var(--faint) !important}
.lg-todo{color:var(--gold);font-style:italic}
.lg h3{font-family:var(--ff-body);font-style:normal;text-transform:none;font-size:.95rem;font-weight:800;margin:16px 0 6px;color:var(--text)}
.lg ul{margin:0 0 10px;padding-left:20px;color:var(--muted);line-height:1.6}
.lg ul b{color:var(--text)}
.lg-form{margin:8px 0 4px;padding:14px 18px;border-radius:12px;border:1px dashed var(--line-2);background:#13131b}
.form-legal{display:block;margin:0;font-size:.82rem;color:var(--faint)}
.form-legal a{color:var(--accent-2)}
.legal a{color:inherit;text-decoration:underline}
.legal-riot{display:block;margin-top:8px;font-size:.7rem;line-height:1.5;opacity:.85}
/* Meet the Team */
.mt-view[hidden]{display:none}
.mt-list{display:flex;flex-direction:column;gap:14px;max-width:900px}
.mt-card{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:22px;padding:14px 22px 14px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}
a.mt-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.mt-pic{aspect-ratio:203/224;border-radius:12px;background-color:#0f1a12;background-position:center 20%;background-size:cover;background-repeat:no-repeat}
.mt-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.mt-role{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.mt-body h2{margin:0;font-size:1.45rem}
.mt-body h2 em{color:var(--accent-2);font-style:normal}
.mt-body p{margin:0;color:var(--muted);font-size:.9rem}
.mt-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.mt-facts div{background:var(--panel-2);border-radius:8px;padding:6px 10px}
.mt-facts small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mt-facts b{font-size:.85rem}
.mt-go{font-weight:700;font-size:.86rem;color:var(--accent-2);white-space:nowrap}
.mt-soon{opacity:.8}.mt-soon .mt-go{color:var(--faint)}
/* ---------- Team Builder ---------- */
.b-ctx{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold);margin-bottom:14px;font-size:.9rem}
.b-ctx span{margin-right:auto}
.b-ctx[hidden]{display:none}
.b-btn{padding:7px 12px;font-size:.82rem;border-radius:9px}
.b-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:12px}
.b-set{justify-self:start;padding:6px 14px;border-radius:99px;border:1px solid var(--line-2);font-weight:700;font-size:.86rem}
.b-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.b-tbtn{padding:6px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);font:inherit;font-weight:700;font-size:.84rem;cursor:pointer}
.b-tbtn:hover:not(:disabled){border-color:var(--accent-2)}
.b-tbtn:disabled{color:var(--faint);cursor:default;opacity:.6}
.b-sw{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);font-weight:700;font-size:.84rem;cursor:pointer}
.b-sw input{position:absolute;opacity:0;pointer-events:none}
.b-sw i{width:32px;height:16px;border-radius:99px;background:var(--panel-3);position:relative;transition:background .15s}
.b-sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--faint);transition:.15s}
.b-sw input:checked + span + i{background:var(--gold)}
.b-sw input:checked + span + i::after{left:18px;background:#1a1200}
.b-sw input:focus-visible + span{outline:2px solid var(--accent-2)}
.b-info{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--faint);color:var(--faint);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;cursor:help}
.b-icons{justify-self:end;display:flex;gap:8px}
.b-ibtn{width:44px;height:32px;border-radius:99px;border:1px solid var(--gold);background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer}
.b-ibtn:hover{background:var(--gold);color:#1a1200}
.b-ibtn svg{width:16px;height:16px}
.b-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 160px;gap:12px}
.b-layout[hidden]{display:none}
.b-two .b-layout + .b-layout{margin-top:8px}
.b-tag{position:absolute;top:10px;left:14px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:none;pointer-events:none}
.b-two .b-tag{display:block}
.b-two .b-center{cursor:pointer;transition:border-color .15s}
.b-two .b-center.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.b-two .b-center.active .b-tag{color:var(--accent-2)}
.b-enemy .b-center{background:#120d10}
.b-scroll h3 small{font-size:.7rem;color:var(--down);font-family:var(--ff-body);font-style:normal;margin-left:4px}
.b-panel{background:#0d0d12;border:1px solid var(--line-2);border-radius:16px;min-width:0}
/* Seitenspalten bestimmen die Höhe nicht – sie scrollen innen, das Brett bleibt fix */
.b-left,.b-right{height:0;min-height:100%}
.b-left{position:relative;display:flex;flex-direction:column;overflow:hidden}
.b-scroll{flex:1;min-height:0;overflow:auto;padding:14px 14px 6px}
.b-scroll h3{margin:0 0 8px;font-size:1.05rem}
.b-stats{display:flex;justify-content:center;gap:14px;margin:8px auto 12px;padding:6px 16px;border-radius:99px;border:1px solid var(--line-2);font-weight:700;font-size:.85rem}
.b-stats span{display:inline-flex;align-items:center;gap:5px}
.b-center{position:relative;padding:10px 12px}
.b-hint{position:absolute;top:10px;left:14px;right:14px;text-align:center;font-size:.8rem;color:var(--gold);min-height:1.2em;pointer-events:none}
.b-boardwrap{display:flex;justify-content:center;overflow:visible;padding:26px 0 10px}
.b-right{display:flex;flex-direction:column;gap:12px}
.b-mini{padding:12px;text-align:center}
.b-mini h4{margin:0 0 10px;font-family:var(--ff-body);font-style:normal;font-weight:700;font-size:.9rem;color:var(--muted)}
.b-grow{flex:1;min-height:0;overflow:auto}
.b-augs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.b-aug{background:none;border:0;padding:0;cursor:pointer}
.b-aug img{width:36px;height:36px;border-radius:7px}
.b-aug:hover img{outline:2px solid var(--down)}
.b-plus{width:36px;height:36px;border-radius:50%;border:2px solid var(--line-2);background:none;color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.b-plus:hover{border-color:var(--accent-2)}
.b-alt{display:flex;justify-content:center;gap:8px}
.b-altslot{width:40px;height:46px;cursor:pointer}
.b-altslot.over .hx{background:var(--accent-2)}
.b-emptyhx{background:var(--line-2)}.b-emptyhx .hx-in{background:#0d0d12}
.b-comps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.b-comp{position:relative}
.b-comp img{width:34px;height:34px;border-radius:7px;display:block}
.b-comp b{position:absolute;right:-4px;bottom:-4px;font-size:.62rem;background:#000;border:1px solid var(--line-2);border-radius:5px;padding:0 3px}
.b-empty{font-size:.72rem;color:var(--faint);margin:0}
.bboard{--hx:86px}
.bboard .hex{cursor:pointer}
.bboard .hex-bg{transition:background .12s}
.bboard .hex:not(.filled):hover .hex-bg{background:rgba(148,180,255,.16)}
.bboard .hex.over .hex-bg,.bboard .hex.sel .hex-bg{background:var(--accent-2)}
.bboard .hex.filled{cursor:grab}
.bboard .b-star{border:0;background:none;padding:0;cursor:pointer;font-size:.8rem;top:-7px}
.bboard .b-star:hover{color:#fff}
.bboard .b-star.one{opacity:.35}.bboard .hex:hover .b-star.one{opacity:1}
.bboard .hex-items{bottom:5px}
.bboard .hex-items img{width:21px;height:21px;cursor:pointer}
.bboard .hex-items img:hover{outline:2px solid var(--down)}
.b-x{position:absolute;top:12px;right:2px;z-index:4;width:19px;height:19px;border-radius:50%;border:0;background:rgba(0,0,0,.8);color:#fff;font-size:.6rem;cursor:pointer;opacity:0;transition:opacity .15s}
.bboard .hex:hover .b-x,.bboard .hex.sel .b-x{opacity:1}
/* Namen liegen im Hex – das Brett verschiebt sich beim Einblenden nicht */
.bboard .hex-name{top:53%;bottom:auto;left:10%;right:10%;z-index:2;font-size:.62rem;font-weight:700;line-height:1.35;color:#fff;background:rgba(0,0,0,.72);border-radius:4px;padding:0 3px;pointer-events:none}
.bboard.show-names .hex-name{display:block}
.bt{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.bt.off{opacity:.45}
.bt b{display:block;font-size:.86rem}
.bt-bp{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}
.bt-bp i{font-style:normal;font-size:.66rem;padding:0 5px;border-radius:4px;background:var(--panel-2);color:var(--faint)}
.bt-bp i.on{background:var(--accent-soft);color:var(--text)}
.bt em{font-style:normal;font-family:var(--ff-head);font-weight:700;font-size:1.1rem}
/* Auswahl unten */
.bpool{margin-top:14px;padding:16px;background:#0d0d12;border-color:var(--line-2);transition:outline-color .15s}
.bpool.drop-hint{outline:2px dashed var(--down);outline-offset:4px}
.bp-top{display:grid;grid-template-columns:minmax(200px,340px) auto 1fr;align-items:center;gap:12px;margin-bottom:14px}
.bp-search{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px 9px 16px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel)}
.bp-search svg{width:16px;height:16px;color:var(--faint);flex-shrink:0}
.bp-search input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:.95rem;outline:none}
.bp-kbd{font-size:.72rem;color:var(--faint);white-space:nowrap}
.bp-kbd kbd{font:inherit;font-weight:700;background:var(--panel-3);border-radius:4px;padding:1px 5px;color:var(--muted)}
.bp-pills{display:flex;gap:4px;flex-wrap:wrap}
.bp-pills button{padding:5px 12px;border-radius:99px;border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.bp-pills button:hover{color:var(--text)}
.bp-pills button.on{background:var(--gold);color:#1a1200}
#bItemPills{justify-self:end}
.bp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:18px}
.bp-items{border-left:1px solid var(--line-2);padding-left:18px}
.bp-grid{display:flex;flex-wrap:wrap;gap:6px}
.bp-u,.bp-i{background:none;border:0;padding:0;cursor:grab;border-radius:10px;transition:transform .12s}
.bp-u:hover,.bp-i:hover{transform:translateY(-2px)}
.av-52{width:52px;height:52px}
.bp-i img{width:42px;height:42px;border-radius:8px;display:block;border:1px solid var(--line-2)}
.bp-i.sel img{outline:2px solid var(--gold);outline-offset:1px}
.bp-grp{margin-bottom:10px}
.bp-gl{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.b-augpicklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:12px;max-height:55vh;overflow:auto}
.b-augpick{display:flex;align-items:center;gap:8px;padding:6px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;font-size:.78rem;text-align:left;cursor:pointer}
.b-augpick:hover{border-color:var(--accent-2)}
.b-augpick img{width:32px;height:32px;border-radius:6px;flex-shrink:0}
.b-augpick span{flex:1;min-width:0}
.b-augpick small{font-size:.62rem;color:var(--faint)}

/* ---------- Redaktion ---------- */
.adm-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.adm-bar .btn{padding:9px 14px;font-size:.86rem}
.adm-status{margin-left:auto;font-size:.8rem;color:var(--faint)}
.adm-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.adm-row{display:grid;grid-template-columns:92px 1fr;gap:10px;margin-bottom:10px}
.adm-lbl{background:var(--tc);color:#111;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;text-align:center}
.adm-lbl b{font-family:var(--ff-head);font-size:2rem;line-height:1}
.adm-lbl small{font-size:.66rem;font-weight:700}
.adm-lbl em{font-style:normal;font-size:.66rem;opacity:.7}
.adm-meta .adm-lbl{color:#fff}
.adm-drop{min-height:68px;border:2px dashed color-mix(in srgb,var(--tc) 55%,transparent);border-radius:12px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;background:#0d0d12;transition:background .12s}
.adm-drop.adm-ins-end{border-style:solid;background:var(--accent-soft)}
.adm-empty{color:var(--faint);font-size:.8rem;margin:auto}
.adm-card{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-2);cursor:grab;width:200px;user-select:none}
.adm-card:hover{border-color:var(--accent-2)}
.adm-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.adm-card.dragging{opacity:.35}
.adm-card.adm-ins{box-shadow:-5px 0 0 0 var(--accent)}
/* Redaktion: Items, Augments, Holds */
.adm-tlbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adm-tlbar .input{margin-left:auto;max-width:260px}
.adm-tl{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;padding:6px 4px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-2);cursor:grab;user-select:none;text-align:center}
.adm-tl img{width:44px;height:44px;border-radius:8px;pointer-events:none}
.adm-tl .adm-hx{width:40px;height:46px;pointer-events:none}
.adm-tl span:last-child{font-size:.64rem;line-height:1.15;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.adm-tl:hover{border-color:var(--accent-2)}
.adm-tl.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.adm-tl.dragging{opacity:.35}
.adm-tl.adm-ins{box-shadow:-5px 0 0 0 var(--accent)}
.adm-tldrop{cursor:default}
#admTabs{margin-bottom:14px}
#admCompsView[hidden],#admNew[hidden]{display:none}
.adm-hx{width:34px;height:39px;flex-shrink:0;display:block}
.adm-hx.big{width:52px;height:60px}
.adm-txt{min-width:0}
.adm-txt b{display:block;font-size:.84rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-txt small{font-size:.7rem;color:var(--faint)}
.adm-st,.adm-sub{position:absolute;top:-6px;right:-6px;font-style:normal;font-size:.62rem;font-weight:900;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111}
.adm-st.up{background:#9be32d}.adm-st.down{background:#ff4655;color:#fff}.adm-st.new{background:#ffd23f}
.adm-sub{right:16px}
.adm-edit{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto;padding:18px}
.adm-edhead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.adm-edhead h3{margin:0}
.adm-edhead small{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.adm-f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.adm-f[hidden]{display:none}
.adm-f>span{font-size:.72rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.adm-f>small{font-size:.72rem;color:var(--faint)}
.adm-f textarea{resize:vertical;font-family:inherit;line-height:1.4}
.adm-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.adm-chips{display:flex;flex-wrap:wrap;gap:6px}
.adm-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-2);font-size:.76rem}
.adm-chip img{width:22px;height:22px;border-radius:5px}
.adm-chip button{border:0;background:none;color:var(--faint);cursor:pointer;font-size:.7rem}
.adm-chip button:hover{color:var(--down)}
.adm-add{display:flex;gap:6px}
.adm-add .input{flex:1;min-width:0}
.adm-checks{display:flex;gap:14px;flex-wrap:wrap;font-size:.84rem}
.adm-board{display:flex;justify-content:center;background:#0d0d12;border-radius:10px;padding:8px 0}
.adm-board .board{--hx:38px}
.adm-foot{display:flex;gap:8px;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
.adm-danger{color:var(--down)!important;border-color:rgba(248,113,113,.4)!important}

/* ---------- Set-Umschalter & Hinweisbanner ---------- */
.set-sw{position:relative;display:flex;align-items:center;padding:0 14px;border-right:1px solid var(--bar-line)}
.set-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap}
.set-btn:hover{border-color:var(--accent-2)}
.set-btn b{font-family:var(--ff-head);font-size:1rem}
.set-btn svg{width:14px;height:14px;color:var(--faint)}
.set-st{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px}
.set-st.live{background:rgba(74,222,128,.15);color:var(--up)}
.set-st.pbe{background:rgba(242,193,78,.18);color:var(--gold)}
.set-st.archiv{background:rgba(148,180,255,.12);color:var(--muted)}
.set-menu{position:absolute;top:calc(100% - 10px);left:14px;z-index:70;min-width:260px;padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.set-menu[hidden]{display:none}
.set-menu-h{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:4px 8px 6px}
.set-menu button{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.set-menu button:hover{background:var(--panel-2)}
.set-menu button.on{background:var(--accent-soft)}
.set-menu button b{font-family:var(--ff-head);font-size:1.05rem}
.set-menu button small{grid-column:1/-1;font-size:.7rem;color:var(--faint)}
.set-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px 16px;font-size:.84rem;text-align:center}
.set-banner[hidden]{display:none}
.set-banner.pbe{background:linear-gradient(90deg,rgba(242,193,78,.22),rgba(242,193,78,.1));color:#ffe7a3;border-bottom:1px solid rgba(242,193,78,.4)}
.set-banner.archiv{background:rgba(148,180,255,.1);color:var(--muted);border-bottom:1px solid var(--line-2)}
.set-banner button{padding:4px 12px;border-radius:99px;border:1px solid currentColor;background:none;color:inherit;font:inherit;font-weight:700;font-size:.8rem;cursor:pointer}
.b-set{background:var(--panel);color:var(--text);font:inherit;font-weight:700;font-size:.86rem;cursor:pointer}
.b-set:hover{border-color:var(--accent-2)}
/* schmalere Desktop-Fenster: Reiter etwas kompakter, damit alle sichtbar bleiben */
@media (max-width:1240px){ .tb-item{min-width:70px;font-size:.86rem;padding:0 4px;gap:5px} .tb-ic{width:26px;height:26px} .tb-logo{padding:0 16px;font-size:1.7rem} .set-sw{padding:0 10px} }
@media (max-width:1180px){ .team-grid{grid-template-columns:repeat(3,minmax(0,220px))} .co-grid{grid-template-columns:1fr 1fr} .co-quotes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:980px){ .rd{grid-template-columns:1fr} .rd-res{position:static} .tool-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .tool-grid{grid-template-columns:1fr} .rd-nums,.rd-need{grid-template-columns:1fr} .rd-hero{flex-direction:column;align-items:flex-start} .rd-targets{grid-template-columns:repeat(5,1fr)} .rd-bars{gap:3px} .rd-bar b{font-size:.6rem} }
@media (max-width:700px){ .co-grid{grid-template-columns:1fr} .co-quotes{grid-template-columns:1fr 1fr} .co-hour-grid{grid-template-columns:1fr;gap:14px} .co-rec{grid-template-columns:1fr} }
@media (max-width:640px){ .mt-card{grid-template-columns:96px 1fr;gap:14px;padding:12px} .mt-go{grid-column:1/-1;justify-self:end} .mt-body h2{font-size:1.2rem} }
@media (max-width:1100px){ .tb-item{min-width:62px;font-size:.8rem;padding:0 3px} .tb-logo{padding:0 12px;font-size:1.5rem} .tb-more{flex-basis:56px;max-width:56px} }
/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .tools{grid-template-columns:repeat(2,1fr)}
  .ranks{grid-template-columns:repeat(5,1fr);row-gap:22px}
  .ranks::before{display:none}
  .hero-main{grid-template-columns:1.1fr .9fr}
  .comp-head{grid-template-columns:1fr auto}
  .comp-head .comp-mid{grid-column:1/-1;order:3}
  .cp{grid-template-columns:1fr}
  .cp-tabs{padding-left:0}
  .cp-close{top:8px;right:8px}
  .foot{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hero-grid,.data-grid,.patch,.guides,.about,.pkg-grid,.callout{grid-template-columns:1fr}
  .hero-main{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:36px 24px 10px}
  .hero-visual{height:420px}
  .hero-visual .mascot{right:50%;transform:translateX(50%);width:340px;height:440px;bottom:-10px;animation:none}
  .mascot-glow{right:20%;width:60%}
  .hero-visual .r1,.hero-visual .r2{display:none}
  .topbar{height:64px}
  .tb-logo{padding:0 14px;font-size:1.45rem;gap:8px}
  .tb-logo svg{width:32px;height:32px}
  .tb-logo .tft-logo{width:34px;height:34px}
  .set-sw{padding:0 8px}.set-btn{padding:6px 8px 6px 10px;gap:6px}.set-btn b{font-size:.9rem}
  .tb-icon-btn{width:54px}
  .tb-item{flex:0 0 92px;font-size:.88rem;gap:4px}
  .tb-ic{width:24px;height:24px}
  .tb-badge{display:none}
  .more-menu{top:64px}
  .comp.open .comp-body{grid-template-columns:1fr}
  .board,.cp .board{--hx:min(58px,calc((100vw - 90px) / 7.6))}
  .tl-row{grid-template-columns:52px 1fr;gap:8px}
  .tl-letter{min-height:80px}.tl-letter b{font-size:2.2rem}.tl-letter small{display:none}
  .tl-tiles{padding:12px;gap:22px 16px}
  .ct{width:60px;height:69px}.ct-back{width:48px;height:55px;left:18px;top:-8px}
  .cp-mid,.cp-bottom{grid-template-columns:1fr}
  .has-buddy{padding-right:0;min-height:0}  .buddy{position:relative;right:auto;bottom:auto;width:100%;height:200px;margin:4px 0 -6px}
  .buddy-img{width:132px;height:196px}
  .buddy-bubble{right:140px;left:auto;top:16px;width:auto;max-width:min(240px,calc(100vw - 190px));font-size:.8rem}
  .has-buddy.ornn-head{padding-right:0}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-layout,.adm-wrap{grid-template-columns:1fr}
  .b-left,.b-right{height:auto;min-height:0}
  .b-left{max-height:300px}
  .b-right{flex-direction:row;flex-wrap:wrap}.b-right .b-mini{flex:1 1 140px}
  .b-bar{grid-template-columns:1fr auto}.b-tools{grid-column:1/-1;order:3;justify-content:flex-start}
  .bp-body{grid-template-columns:1fr}.bp-items{border-left:0;padding-left:0;border-top:1px solid var(--line-2);padding-top:14px}
  .bp-top{grid-template-columns:1fr}#bItemPills{justify-self:start}
  .bboard{--hx:min(86px,calc((100vw - 90px) / 7.7))}
  .bboard .hex-name{font-size:.52rem}
  .b-center{padding:10px 6px}
  .adm-edit{position:static;max-height:none}
  .adm-row{grid-template-columns:56px 1fr}.adm-lbl small{display:none}
  .b-x{opacity:1}
  .about-grid{grid-template-columns:1fr}
  .rk-table{grid-template-columns:repeat(2,1fr)}
  .rk-divs{grid-template-columns:repeat(2,1fr)}.rk-divs.three{grid-template-columns:1fr}
  .rk-head{grid-template-columns:auto 1fr}.rk-head img{width:120px;height:120px;margin:-24px -14px -24px -18px}
  .rk-cell{gap:8px;padding:12px 10px}.rk-emb{width:62px;height:52px}.rk-emb img{width:96px;height:96px}.rk-cell small{font-size:.72rem}.rk-big{grid-column:1/-1;text-align:left}
  .rk-chartwrap{grid-template-columns:1fr}.rk-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .rk-xl span{font-size:0}.rk-xl img{max-width:44px;margin:-4px 0}.rk-bar em{font-size:.58rem}
  .rk-card{padding:18px 14px}
  .buddy.ornn{width:100%}
  .buddy.ornn .buddy-img{width:180px;height:156px}
  .buddy.ornn .buddy-bubble{right:190px;top:12px;max-width:min(230px,calc(100vw - 236px))}
  .tier-block{grid-template-columns:30px 1fr;gap:8px}
  .tier-letter{font-size:1.2rem;border-radius:9px}
  .comp-head{padding:12px}
  .comp-body{padding:4px 12px 16px}
  .stats{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .guide{grid-template-columns:110px 1fr}
  .toolbar .input{margin-left:0;width:100%}
}
@media (max-width:560px){
  .tools{grid-template-columns:1fr}
  .rank{font-size:.8rem}
  .rank-gem{width:60px;height:46px}
  .rank-gem img{width:56px;height:56px}
  .tb-nav{display:none}
  .tb-logo{flex:1;border-right:0}
  .rank-strip{padding:24px 12px}
  .recipe-table img{width:30px;height:30px}
  .hero-cta small{display:none}
  .portrait-grid{grid-template-columns:repeat(4,1fr)}
  .mini-list{grid-template-columns:1fr}
  .tier-block{grid-template-columns:44px 1fr}
  .tier-letter{font-size:1.3rem}
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}

/* Heimerdinger: Tools-Maskottchen */
.m-heimer{background:url(../img/mascot-heimer-wave.webp) center bottom/contain no-repeat}
.has-buddy.heimer-head{padding-right:490px}
.buddy.heimer{width:490px}
.buddy.heimer .buddy-img{width:290px;height:236px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(242,193,78,.28));transform-origin:50% 100%}
.buddy.heimer .buddy-bubble{right:262px;top:30px}
.buddy.heimer .buddy-bubble::before{content:"Heimerdinger";color:#c9861a}
.buddy.heimer .buddy-bubble .bd1{right:-24px;top:54px}
.buddy.heimer .buddy-bubble .bd2{right:-42px;top:66px}
@media (max-width:820px){ .has-buddy.heimer-head{padding-right:0} .buddy.heimer{width:100%} .buddy.heimer .buddy-img{width:220px;height:180px} .buddy.heimer .buddy-bubble{right:210px;top:10px;max-width:min(230px,calc(100vw - 240px))} }/* Heimerdinger in den Tool-Seiten (Kopfbereich wird erst mit Bild breiter) */
.page-head.art-on{position:relative;padding-right:490px;min-height:256px}
#page-builder:not(.sim-mode) .page-head.art-on{padding-right:0;min-height:0}
@media (max-width:820px){ .page-head.art-on{padding-right:0;min-height:0} }/* ================= STATS ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.statbar{display:block;background:none;border:0;color:var(--text);text-decoration:none}
.statbar:empty,.statbar.sb-off{display:none}
.sb-in{display:flex;align-items:center;justify-content:flex-end;gap:30px;min-height:52px;padding-top:16px;padding-bottom:0}
.sb-main{display:flex;align-items:center;gap:10px}
.sb-main .tft-logo{width:40px;height:40px}
.sb-num b{display:block;font-family:var(--ff-head);font-size:1.75rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;min-width:4.6ch}
.sb-num small{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted);margin-top:2px}
.sb-num small img{width:20px;height:20px}
.sb-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--faint)}
.sb-dot.live{background:#22c55e;box-shadow:0 0 6px #22c55e}
.sb-dot.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:sbPulse 1.8s ease-out infinite}
@keyframes sbPulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){ .sb-dot.live::after{animation:none} }
.sb-main,.sb-item{padding:4px 8px}
.sb-item{display:flex;align-items:center;gap:10px;min-width:0}
.sb-in a{color:inherit;text-decoration:none;border-radius:10px;transition:background .15s}
.sb-in a:hover{background:rgba(255,255,255,.05)}
.sb-in a:hover .sb-num b{color:var(--gold)}

@media (max-width:900px){ .sb-main{padding-right:0;border-right:0} }
.sb-item small{display:block;font-size:.72rem;color:var(--muted);line-height:1.2}
.sb-item b{display:block;font-family:var(--ff-head);font-size:1.05rem;line-height:1.15;white-space:nowrap}
.sb-item b em{font-style:normal;color:var(--gold);margin-left:4px}
.sb-patch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 8px;border-radius:8px;background:var(--accent-soft);color:var(--accent-2);font-weight:800;font-size:.82rem}
@media (max-width:900px){ .sb-hide{display:none} .sb-in{gap:14px} }
.sb-main + .sb-main{padding-left:0}
.sb-main img{flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
/* ================= TOOLS-ÜBERSICHT (Kacheln mit Maskottchen) ================= */
.tc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px;margin-top:8px}
.tc-item{display:flex;flex-direction:column;gap:8px;padding-top:52px}
.tc{position:relative;display:block;height:196px;border-radius:18px;background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.tc::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(59,130,246,.28),rgba(59,130,246,0) 70%);opacity:0;transition:opacity .18s}
a.tc:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 28px rgba(0,0,0,.35)}
a.tc:hover::before{opacity:1}
.tc-text{position:relative;z-index:2;width:calc(100% - 222px);hyphens:auto;padding:22px 0 18px 22px;display:flex;flex-direction:column;gap:8px}
.tc-tag{align-self:flex-start;padding:3px 10px;border-radius:7px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em}
.tc h3{margin:0;font-size:1.3rem;line-height:1.12}
.tc p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.45}
.tc-art{position:absolute;right:-18px;bottom:0;z-index:1;width:244px;height:calc(100% + 52px);display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none}
.tc-art img{max-width:100%;max-height:236px;flex:none;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));transition:transform .2s}
a.tc:hover .tc-art img{transform:scale(1.05) rotate(-1deg)}
.tc-art img + .tc-ph{display:none}
.tc-ph{width:122px;height:122px;margin-bottom:32px;border-radius:32px;display:flex;align-items:center;justify-content:center;color:var(--accent-2);background:radial-gradient(circle at 30% 25%,rgba(106,168,255,.35),rgba(59,130,246,.08) 70%);border:1px solid rgba(106,168,255,.25);transform:rotate(6deg);transition:transform .2s}
.tc-ph svg{width:56px;height:56px}
a.tc:hover .tc-ph{transform:rotate(0) scale(1.05)}
.tc-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px;font-size:.76rem;color:var(--faint)}
.tc-st{font-weight:700;color:var(--accent-2)}
.tc-st.wip{color:var(--gold)}
.tc-st.soon{color:var(--faint)}
.tc-item.tc-soon .tc{border-style:dashed;opacity:.7}
.tc-item.tc-soon .tc-tag{background:var(--panel-3);color:var(--muted)}
.tc-item.tc-soon .tc-ph{color:var(--gold);background:radial-gradient(circle at 30% 25%,rgba(242,193,78,.3),rgba(242,193,78,.06) 70%);border-color:rgba(242,193,78,.25)}
@media (max-width:1180px){ .tc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .tc-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .tc{height:180px} .tc h3{font-size:1.18rem} .tc-text{width:calc(100% - 190px)} .tc-art{width:200px;right:-8px} .tc-art img{max-height:200px} }
/* ================= ITEM-DROP-RECHNER ================= */
.dr{display:flex;flex-direction:column;gap:16px}
.dr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dr-tabs{display:flex;gap:8px;flex-wrap:wrap}
.dr-new{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;border:1px solid var(--gold);background:var(--gold-soft);color:var(--gold);font:inherit;font-weight:800;font-size:.92rem;cursor:pointer;transition:background .15s,color .15s}
.dr-new svg{width:18px;height:18px}
.dr-new:hover{background:var(--gold);color:#1a1405}
.dr-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);font:inherit;cursor:pointer;min-width:96px}
.dr-tab b{font-family:var(--ff-head);font-size:1.15rem;color:var(--text)}
.dr-tab small{font-size:.72rem}
.dr-tab i{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--gold);color:#1a1405;font-style:normal;font-weight:800;font-size:.72rem;display:flex;align-items:center;justify-content:center}
.dr-tab:hover{border-color:var(--accent-2)}
.dr-tab.on{background:var(--accent-soft);border-color:var(--accent)}
.dr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.dr .card{padding:20px}
.dr h3{margin:0 0 10px;font-size:1.15rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dr h3 small{font:600 .8rem var(--ff-body);color:var(--faint)}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.dr-head h3{margin:0}
.dr-note{margin:8px 0;font-size:.84rem;color:var(--muted);line-height:1.5}
.dr-warn{margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--gold-soft);color:var(--gold);font-size:.84rem;font-weight:600}
.dr-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:10px 0}
.dr-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);font:inherit;font-size:.74rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer;transition:border-color .12s,transform .12s}
.dr-c img{border-radius:8px}
.dr-c em{font-style:normal;font-size:.68rem;color:var(--faint);font-weight:600}
.dr-c:hover{border-color:var(--gold);transform:translateY(-1px)}
.dr-c.empty{opacity:.45}
.dr-got{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.dr-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:var(--panel-2)}
.dr-row.on{box-shadow:inset 0 0 0 1px var(--accent)}
.dr-row > span{font-family:var(--ff-head);font-weight:700;font-size:.92rem}
.dr-row > div{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.dr-row small{color:var(--faint);font-size:.76rem}
.dr-chip{padding:0;border:0;background:none;cursor:pointer;border-radius:6px;line-height:0}
.dr-chip img{border-radius:6px;border:1px solid var(--line-2)}
.dr-chip:hover img{outline:2px solid var(--down)}
.dr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.dr-set{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:.84rem;color:var(--muted);font-weight:600}
.dr-set select{flex:1;min-width:220px}
.dr-table{width:100%;border-collapse:collapse;font-size:.86rem}
.dr-table th{font-size:.7rem;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2)}
.dr-table td{padding:7px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.dr-table tr.best td{background:rgba(242,193,78,.08)}
.dr-table tr.best td:nth-child(3){color:var(--gold);font-weight:800}
.dr-table tr.gone td{opacity:.45}
.dr-table.small td{font-size:.8rem;white-space:normal;padding:5px 8px}
.dr-table.small td:last-child{text-align:right;white-space:nowrap;font-weight:700}
.dr-table tr.prism td{color:#f0abfc}
.dr-name{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.dr-name img{border-radius:6px}
.dr-dots{display:inline-flex;gap:3px;vertical-align:middle}
.dr-dots i{width:9px;height:9px;border-radius:50%;background:var(--panel-3)}
.dr-dots i.on{background:var(--accent-2)}
.dr-bar{display:inline-block;width:56px;height:7px;border-radius:4px;background:var(--panel-3);margin-right:8px;vertical-align:middle;overflow:hidden}
.dr-bar i{display:block;height:100%;background:var(--gold)}
.dr-orbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dr-orb{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2)}
.dr-orb span{font-size:.72rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.dr-orb b{font-family:var(--ff-head);font-size:1.35rem}
.dr-orb.prism{border-color:rgba(240,171,252,.5);background:linear-gradient(135deg,rgba(240,171,252,.14),rgba(96,165,250,.1))}.dr-orb.prism b{color:#f0abfc}
.dr-orb.gold b{color:var(--gold)}.dr-orb.blue b{color:#60a5fa}.dr-orb.up b{color:var(--up)}
.dr-h4{margin:16px 0 8px;font-size:.92rem}
.dr-counts{display:flex;gap:8px;align-items:flex-end;height:110px}
.dr-counts div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%}
.dr-counts span{width:100%;max-width:56px;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:6px 6px 0 0;min-height:3px}
.dr-counts b{font-size:.72rem}
.dr-counts small{font-family:var(--ff-head);font-weight:700;color:var(--muted)}
.dr-counts div.off{opacity:.3}
.dr-up{display:inline-block;padding:0 6px;border-radius:99px;background:rgba(74,222,128,.14);color:var(--up);font-size:.68rem;font-weight:700}
.dr-more{margin-top:12px}
.dr-more summary{cursor:pointer;font-weight:700;font-size:.9rem}
details.card.dr-more{margin:0}
.dr-have{display:flex;gap:8px;flex-wrap:wrap}
.dr-have span{position:relative;line-height:0}
.dr-have img{border-radius:8px;border:1px solid var(--line-2)}
.dr-have b{position:absolute;right:-6px;bottom:-6px;padding:1px 5px;border-radius:99px;background:var(--gold);color:#1a1405;font-size:.66rem;line-height:1.3}
.dr-craft{display:flex;gap:6px;flex-wrap:wrap}
.dr-craft button{padding:0;border:0;background:none;cursor:pointer;line-height:0}
.dr-craft img{border-radius:8px;border:1px solid var(--line-2)}
.dr-craft button:hover img{outline:2px solid var(--gold)}
.dr-orbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.dr-orbtbl h4{margin:0 0 6px;font-size:.95rem}
.dr-orbtbl h4 small{display:block;font-weight:600;font-size:.74rem;color:var(--faint)}
@media (max-width:980px){ .dr-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .dr-orbs{grid-template-columns:1fr 1fr} .dr-table th:nth-child(5),.dr-table td:nth-child(5){display:none} .dr-bar{display:none} .dr-tab{min-width:0;padding:8px 12px;flex:1} }
/* ================= KAMPF-SIMULATOR ================= */
.b-simonly{display:none}
.sim-mode .b-only{display:none}
.sim-mode .b-simonly{display:block}
.av-26{width:26px;height:26px;border-width:1.5px;border-radius:7px}
.sim{margin:0 0 14px}
.sim-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;background:#0d0d12;border:1px solid var(--line-2);border-radius:16px}
.sim-go{padding:10px 20px;font-size:1rem}
.sim-ctrl{display:flex;align-items:center;gap:8px;flex:1 1 380px;min-width:0}
.sim-ctrl[hidden],.sim-extra[hidden],.sim-body[hidden],.sim-lower[hidden]{display:none}
.sim-ib{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.sim-ib:hover{border-color:var(--accent-2)}
.sim-ib.sim-play{width:42px;height:42px;background:var(--accent);border-color:var(--accent)}
#simSeek{flex:1;min-width:80px;accent-color:var(--gold)}
.sim-time{font-variant-numeric:tabular-nums;font-size:.84rem;color:var(--muted);white-space:nowrap;min-width:96px}
.sim-speed button{padding:4px 9px}
.sim-extra{display:flex;gap:8px;flex-wrap:wrap}
.sim-hint{font-size:.86rem;color:var(--muted)}
.sim-hint.warn{color:var(--gold);font-weight:700}
.sim-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;margin-top:14px;align-items:start}
.sim-arena-wrap{position:relative;background:#0d0d12;border:1px solid var(--line-2);border-radius:16px;padding:16px 18px 18px}
.sim-arena{position:relative;width:100%;max-width:640px;margin:0 auto;--w:60px}
.sa-cells{position:absolute;inset:0}
.sa-hex{position:absolute;width:var(--w);height:calc(var(--w) * 1.1547);clip-path:var(--hexp);background:rgba(90,169,255,.07);transform:scale(.94)}
.sa-hex.e{background:rgba(255,90,106,.07)}
.sa-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.sa-tl{stroke-width:.035;opacity:.45}
.sa-tl.s0{stroke:#5aa9ff}.sa-tl.s1{stroke:#ff5a6a}
.sa-tl.hi{opacity:1;stroke-width:.05}
.sa-path{fill:none;stroke-width:.04;stroke-dasharray:.1 .08;opacity:.85}
.sa-path.s0{stroke:#5aa9ff}.sa-path.s1{stroke:#ff5a6a}
.sa-dest{fill:none;stroke-width:.03;stroke-dasharray:.08 .06}
.sa-dest.s0{stroke:#5aa9ff}.sa-dest.s1{stroke:#ff5a6a}
.sa-proj.s0{fill:#9cc9ff}.sa-proj.s1{fill:#ff9aa4}
.sa-slash{fill:none;stroke:#fff;stroke-width:.04;opacity:.7}
.sa-cast{fill:none;stroke-width:.06}
.sa-cast.s0{stroke:#6aa8ff}.sa-cast.s1{stroke:#ff6b7a}
.sa-aoe{stroke-width:.03}
.sa-aoe.s0{fill:rgba(106,168,255,.16);stroke:#6aa8ff}.sa-aoe.s1{fill:rgba(255,107,122,.16);stroke:#ff6b7a}
.sa-hit{fill:rgba(242,193,78,.25);stroke:var(--gold);stroke-width:.03}
.sa-num{font:700 .3px var(--ff-head);text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:.06}
.sa-num.s0{fill:#cfe3ff}.sa-num.s1{fill:#ffd0d5}
.sa-jump{fill:none;stroke-width:.05;stroke-dasharray:.12 .07}
.sa-jump.s0{stroke:#9cc9ff}.sa-jump.s1{stroke:#ff9aa4}
.sa-dead{font:700 .5px var(--ff-head);fill:#fff;text-anchor:middle}
.su{position:absolute;left:0;top:0;width:calc(var(--w) * .8);height:calc(var(--w) * .8);margin:calc(var(--w) * -.4) 0 0 calc(var(--w) * -.4);padding:0;border:0;background:none;cursor:pointer;z-index:3;transition:opacity .3s}
.su-img{position:absolute;inset:0;border-radius:50%;background:#1a1a26 center 25%/cover no-repeat;border:3px solid #5aa9ff;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.su.s1 .su-img{border-color:#ff5a6a}
.su.plant .su-img{background-position:center;background-color:#13261b}
.su.sel .su-img{box-shadow:0 0 0 3px var(--gold),0 2px 8px rgba(0,0,0,.7)}
.su.cast .su-img{box-shadow:0 0 0 3px #fff,0 0 14px #fff}
.su.stun .su-img{filter:grayscale(.7) brightness(.8)}
.su.untg{opacity:.4}
.su.jump{z-index:4}
.su.dead{opacity:0;pointer-events:none}
.su-star{position:absolute;top:-9px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--gold);text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:-1px}
.su-bars{position:absolute;left:-6%;right:-6%;bottom:-9px;height:6px;background:#000;border-radius:3px;overflow:hidden;border:1px solid rgba(0,0,0,.8)}
.su-hp{position:absolute;left:0;top:0;bottom:0;background:#3ddc84}
.su.s1 .su-hp{background:#ff5a6a}
.su-sh{position:absolute;top:0;bottom:0;background:#f4f4f4}
.su-mana{position:absolute;left:-6%;right:-6%;bottom:-13px;height:3px;background:#000;border-radius:2px;overflow:hidden}
.su-mana i{display:block;height:100%;background:#4aa3ff}
.su-st{position:absolute;top:-6px;right:-8px;font-size:.85rem;text-shadow:0 0 4px #000}
.sim-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;padding:6px 18px;border-radius:99px;font:700 1.1rem var(--ff-head);text-transform:uppercase;letter-spacing:.06em;background:var(--panel-3);border:1px solid var(--line-2)}
.sim-banner.w0{background:#14532d;border-color:#3ddc84;color:#d9ffe9}
.sim-banner.w1{background:#5a1620;border-color:#ff5a6a;color:#ffe1e4}
.sim-banner.ot{background:#4a3a0c;border-color:var(--gold);color:var(--gold);font-size:.9rem}
.sim-side{padding:16px;font-size:.9rem;max-height:none}
.sim-side h5,.sim-meter h5{margin:12px 0 6px;font:700 .8rem var(--ff-head);text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.sn{font-weight:700}
.sn.s0,.s0 > b,b.s0,h5.s0,span.s0{color:#7db8ff}
.sn.s1,.s1 > b,b.s1,h5.s1,span.s1{color:#ff8592}
.sim-log .sn{cursor:pointer}
.ss-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ss-head > div:nth-child(2){flex:1;min-width:0}
.ss-head small{display:block;color:var(--muted);font-size:.78rem}
.ss-star{color:var(--gold);font-size:.8rem}
.ss-x{border:0;background:none;color:var(--faint);font-size:1rem;cursor:pointer;align-self:flex-start}
.ss-x:hover{color:var(--text)}
.ss-bar{position:relative;height:18px;border-radius:5px;background:#000;overflow:hidden;margin-bottom:6px}
.ss-bar i{position:absolute;left:0;top:0;bottom:0;background:#2f9e5f}
.ss-bar em{position:absolute;top:0;bottom:0;background:#d9d9d9}
.ss-bar.mana i{background:#2f6fd0}
.ss-bar span{position:relative;display:block;text-align:center;font-size:.74rem;font-weight:700;line-height:18px;text-shadow:0 1px 2px #000}
.ss-act{margin:10px 0 4px;line-height:1.45}
.ss-next{margin:0 0 8px;color:var(--muted);font-size:.84rem}
.ss-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}
.ss-stats span{background:var(--panel-3);border-radius:8px;padding:5px 6px;text-align:center;font-weight:700;font-size:.86rem}
.ss-stats small{display:block;font-weight:600;font-size:.66rem;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.ss-items{display:flex;gap:5px;margin:6px 0}
.ss-items img{width:28px;height:28px;border-radius:6px;border:1px solid var(--line-2)}
.ss-ab{font-size:.84rem;color:var(--muted);line-height:1.45;margin:8px 0}
.ss-ab b{color:var(--text);display:block}
.ss-est{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:99px;background:var(--gold-soft);color:var(--gold);font-size:.7rem;font-weight:700}
.ss-sum{font-size:.84rem;color:var(--muted);margin:6px 0 0}
.ss-res{font:700 1.6rem var(--ff-head);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.ss-res small{font:600 .85rem var(--ff-body);text-transform:none;letter-spacing:0;color:var(--muted)}
.ss-res.w0{color:#3ddc84}.ss-res.w1{color:#ff5a6a}.ss-res.w-1{color:var(--gold)}
.ss-count{display:flex;gap:14px;font-size:.9rem;margin-bottom:8px}
.ss-mc{margin:10px 0}
.ss-mcbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--panel-3)}
.ss-mcbar .w0{background:#3ddc84}.ss-mcbar .wd{background:var(--gold)}.ss-mcbar .w1{background:#ff5a6a}
.ss-mc p{margin:6px 0 0;font-size:.86rem;line-height:1.5}
.ss-tip{font-size:.82rem;color:var(--muted);background:var(--accent-soft);border-radius:8px;padding:8px 10px;margin:8px 0}
.ss-chips{display:flex;flex-wrap:wrap;gap:4px;font-size:.78rem}
.ss-chip{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.74rem;font-weight:700;border:1px solid}
.ss-chip.ja{border-color:#2f9e5f;color:#8ff0b8;background:rgba(47,158,95,.15)}
.ss-chip.teil{border-color:#a07d1c;color:var(--gold);background:var(--gold-soft)}
.ss-chip.nein{border-color:var(--line-2);color:var(--faint)}
.ss-legend{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.sim-lower{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;margin-top:14px}
.sim-lower .card{padding:14px 16px}
.sim-boxhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sim-boxhead h4{margin:0;font:700 1.05rem var(--ff-head);text-transform:uppercase;letter-spacing:.04em}
.sm-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sm-row{display:grid;grid-template-columns:26px minmax(0,82px) 1fr 44px;align-items:center;gap:6px;width:100%;padding:3px 4px;margin:0 0 3px;border:0;border-radius:6px;background:none;color:var(--text);font:inherit;font-size:.78rem;cursor:pointer;text-align:left}
.sm-row:hover,.sm-row.sel{background:var(--panel-3)}
.sm-row.dead{opacity:.55}
.sm-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-n small{color:var(--gold);font-size:.6rem}
.sm-row b{text-align:right;font-variant-numeric:tabular-nums}
.sm-bar{display:flex;height:9px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
.sm-bar i,.sm-legend i{display:inline-block;height:100%}
.sm-bar .ph,.sm-legend .ph{background:#f08a3c}.sm-bar .mg,.sm-legend .mg{background:#4aa3ff}.sm-bar .tr,.sm-legend .tr{background:#e9e9f0}
.sm-bar .tk{background:#ff5a6a}.sm-bar .hl{background:#3ddc84}
.sm-legend{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--faint);margin:8px 0 0}
.sm-legend i{width:10px;height:10px;border-radius:2px;margin-left:6px}
.sim-log{list-style:none;margin:10px 0 0;padding:0;max-height:330px;overflow-y:auto;font-size:.82rem}
.sim-log li{display:grid;grid-template-columns:52px 1fr;gap:6px;padding:3px 0;border-bottom:1px solid var(--line);line-height:1.4}
.sim-log time{color:var(--faint);font-variant-numeric:tabular-nums}
.sim-log .lg-atk{color:var(--faint);font-size:.76rem}
.sim-log .lg-death span,.sim-log .lg-end span{font-weight:700}
.sim-log .lg-cast span{color:var(--text)}
.sim-log .lg-tgt span,.sim-log .lg-shield span,.sim-log .lg-stun span{color:var(--muted)}
.sim-log .lg-ot span,.sim-log .lg-end span{color:var(--gold)}
.sim-rules{margin-top:14px;padding:14px 18px}
.sim-rules summary{cursor:pointer;font-weight:700}
.sim-rules ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.88rem;line-height:1.55}
.sim-rules li{margin:4px 0}
.sim-rules b{color:var(--text)}
.bboard .hex.bthex .hex-bg{background:repeating-linear-gradient(45deg,rgba(150,30,60,.55) 0 6px,rgba(70,10,30,.55) 6px 12px)}
.bboard .hex.bthex.filled .hex-bg{background:#b3264a}
.bt-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:1px 6px;border-radius:99px;background:#5c0f24;border:1px solid #e0507a;color:#ffd6e0;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;pointer-events:none}
.bboard .hex.bthex.filled .bt-tag{top:auto;bottom:-6px;transform:translateX(-50%)}
.ss-sac{flex-basis:100%;margin:8px 0 0;padding:8px 10px;border-radius:8px;background:rgba(179,38,74,.15);border:1px solid rgba(224,80,122,.4);font-size:.8rem;line-height:1.45;color:var(--muted)}
.ss-sac b{color:#ffb3c6}
.ss-sac.off{background:none;border-style:dashed}
.sim-log .lg-sac span{color:#ffb3c6}.wip-pill{vertical-align:middle;font:700 .8rem var(--ff-body);font-style:normal;text-transform:uppercase;letter-spacing:.05em;margin-left:8px;position:relative;top:-4px}
.sim-picks{display:flex;align-items:flex-end;gap:10px 14px;flex:1 1 100%;flex-wrap:wrap}
.sim-pick{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;min-width:0}
.sim-pick span{font:700 .78rem var(--ff-head);text-transform:uppercase;letter-spacing:.06em}
.sim-pick.s0 span{color:#7db8ff}.sim-pick.s1 span{color:#ff8592}
.sim-pick select{width:100%;cursor:pointer;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.sim-pick.s0 select{border-color:rgba(90,169,255,.45)}.sim-pick.s1 select{border-color:rgba(255,90,106,.45)}
.sim-vs{font:700 1.1rem var(--ff-head);color:var(--faint);padding-bottom:8px}
@media (max-width:600px){ .sim-vs{display:none} }@media (max-width:1100px){ .sim-body,.sim-lower{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){
  .sim-arena-wrap{padding:12px 8px 16px}
  .sim-ctrl{flex-wrap:wrap;flex-basis:100%}
  #simSeek{flex-basis:100%;order:5}
  .sm-cols{grid-template-columns:1fr}
  .ss-stats{grid-template-columns:repeat(3,1fr)}
  .su-star{font-size:.5rem;top:-7px}
  .su-bars{height:4px;bottom:-6px}
  .su-mana{bottom:-9px;height:2px}
  .su-img{border-width:2px}
}
@media (prefers-reduced-motion:reduce){ .su{transition:none} }

/* ================= SPRACHUMSCHALTER ================= */
.tb-lang{position:relative;align-self:center;display:grid;grid-template-columns:1fr 1fr;margin-right:8px;padding:3px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);font-weight:800;font-size:.72rem;letter-spacing:.04em;text-decoration:none;flex:none;cursor:pointer}
.tl-knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;background:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .22s cubic-bezier(.4,.1,.2,1)}
.tb-lang.is-en .tl-knob{transform:translateX(100%)}
.tl-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;transition:color .22s}
.tl-flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35);opacity:.55;transition:opacity .22s}
.tb-lang:not(.is-en) .tl-de,.tb-lang.is-en .tl-en{color:#fff}
.tb-lang:not(.is-en) .tl-de .tl-flag,.tb-lang.is-en .tl-en .tl-flag{opacity:1}
.tb-lang:hover{border-color:var(--accent-2)}
.tb-lang:hover .tl-flag{opacity:1}
@media (prefers-reduced-motion:reduce){ .tl-knob,.tl-opt,.tl-flag{transition:none} }

/* Schmale Handys: Kopfzeile mit Sprachumschalter und Statusleiste passen auf 360–390 px */
@media (max-width:560px){
  .tb-icon-btn{width:44px}
  .tb-logo{padding:0 8px;gap:6px;font-size:1.15rem;min-width:0}
  .tb-logo .tft-logo{width:28px;height:28px}
  .set-sw{padding:0 4px}
  .set-btn .set-st{display:none}
  .tl-ico img{width:48px;height:48px;border-radius:8px}
  .tl-ico.tl-champ{width:58px;height:67px}
  #itemTiers .tl-tiles,#augTiers .tl-tiles,#holdTiers .tl-tiles{gap:10px 12px;padding:12px}
  .tb-lang{margin-right:4px}
  .tl-opt{height:22px;padding:0 6px}
  .tl-opt b{display:none}
  .sb-in{justify-content:center;gap:10px}
  .sb-main{gap:8px;padding-left:4px}
  .sb-main img{width:32px;height:32px}
  .sb-num b{font-size:1.35rem}
  .sb-num small{white-space:nowrap;font-size:.72rem}
}
@media (max-width:380px){ .tb-logo{font-size:1rem;gap:5px;padding:0 6px} .tb-logo .tft-logo{width:24px;height:24px} .tb-icon-btn{width:40px} }
@media (max-width:340px){ .tb-logo b{display:none} }

/* ================= DPS-RECHNER ================= */
.dps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:16px;align-items:start}
.dps-in{display:flex;flex-direction:column;gap:22px;padding:22px}
.dps-in section{display:flex;flex-direction:column;gap:10px}
.dps-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dps-row > span{font-size:.82rem;font-weight:700;color:var(--muted);min-width:56px}
.dps-build{position:relative;display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line-2);border-left:4px solid var(--bc);background:var(--panel);margin-bottom:8px}
.dps-bn{width:24px;height:24px;border-radius:7px;background:var(--bc);color:#0b0d14;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.dps-slots{display:flex;gap:6px}
.dps-slot{position:relative}
.dps-slot > button:first-child{width:44px;height:44px;border-radius:9px;border:1px solid var(--line-2);background:#13131b;color:var(--faint);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.dps-slot > button:first-child img{width:100%;height:100%;display:block}
.dps-slot.empty > button:first-child{border-style:dashed}
.dps-slot.on > button:first-child{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.dps-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:0;background:#2a2a36;color:#fff;font-size:.6rem;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.dps-slot:hover .dps-x{display:flex}
.dps-bname{font-size:.74rem;color:var(--muted);line-height:1.25;min-width:0}
.dps-del{border:0;background:none;color:var(--faint);cursor:pointer;font-size:.8rem;padding:4px}
.dps-del:hover{color:var(--down)}
.dps-add{align-self:flex-start}
.dps-pick{border:1px solid var(--accent);border-radius:12px;background:#0f0f16;padding:10px;display:flex;flex-direction:column;gap:8px}
.dps-pickbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem;font-weight:700;color:var(--muted)}
.dps-pickbar .input{margin-left:auto;max-width:200px;padding:6px 10px}
.dps-x2{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer}
.dps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:280px;overflow:auto}
.dps-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;border-radius:9px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;font-size:.6rem;line-height:1.1;text-align:center}
.dps-grid button:hover{background:var(--panel-2);border-color:var(--line-2);color:var(--text)}
.dps-grid img{width:38px;height:38px;border-radius:7px}
.dps-grid span{max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dps-res{padding:20px;position:sticky;top:100px}
.dps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dps-chart{position:relative}
.dps-chart svg{display:block;width:100%;height:auto}
.dps-chart text{fill:var(--faint);font-size:11px;font-family:inherit}
.dps-grid-l{stroke:rgba(255,255,255,.07);stroke-width:1}
.dps-at-l{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 4}
.dps-hov-l{stroke:rgba(255,255,255,.35);stroke-width:1}
.dps-tip{position:absolute;top:8px;pointer-events:none;background:rgba(10,10,16,.94);border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;font-size:.74rem;display:flex;flex-direction:column;gap:2px;white-space:nowrap;z-index:3}
.dps-tip[hidden]{display:none}
.dps-tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dps-at{margin:10px 0 6px}
.dps-table-wrap{overflow-x:auto}
.dps-table{width:100%;border-collapse:collapse;font-size:.84rem}
.dps-table th{text-align:left;font-size:.7rem;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dps-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.dps-tb{display:inline-flex;align-items:center;gap:4px;padding-left:8px;border-left:4px solid var(--bc)}
.dps-tb b{margin-right:4px}
.dps-tb img{width:26px;height:26px;border-radius:5px;flex:none}
.dps-big{font-family:var(--ff-head);font-size:1.15rem}
.dps-best{margin-left:8px;font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:99px;background:rgba(155,227,45,.15);color:#9be32d}
.dps-minus{margin-left:8px;color:var(--down);font-weight:700}
.dps-split{display:flex;width:90px;height:8px;border-radius:99px;overflow:hidden;background:#22222c}
.dps-split .ph{background:#ff8a1f}.dps-split .mg{background:#4f8cff}.dps-split .tr{background:#e8e8f0}
@media (max-width:980px){ .dps{grid-template-columns:minmax(0,1fr)} .dps-res{position:static} }
@media (max-width:560px){ .dps-build{grid-template-columns:24px auto 1fr} .dps-bname{grid-column:1/-1} .dps-del{grid-row:1;grid-column:3;justify-self:end} .dps-slot > button:first-child{width:40px;height:40px} .dps-in,.dps-res{padding:14px} }

/* ================= TOOL-TEXTBLOCK (unter jedem Tool: Erklärung, Anleitung, FAQ) ================= */
.tool-seo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-top:40px;padding:28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(79,140,255,.05),transparent 40%),var(--panel)}
.tool-seo.b-simonly{display:none}
.sim-mode .tool-seo.b-simonly{display:grid}
.tool-seo h2{margin:0 0 12px;font-size:1.45rem;line-height:1.2}
.tool-seo h3{margin:22px 0 10px;font-size:1.02rem}
.tool-seo .ts-side h3:first-child{margin-top:0}
.tool-seo p{color:var(--muted);line-height:1.65;margin:0 0 10px}
.ts-steps{list-style:none;counter-reset:ts;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ts-steps li{counter-increment:ts;position:relative;padding-left:40px;color:var(--muted);line-height:1.55;min-height:28px}
.ts-steps li::before{content:counter(ts);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent-2);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.ts-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ts-list li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:#13131b;border:1px solid var(--line)}
.ts-list a{font-weight:800;color:var(--text);text-decoration:none}
.ts-list a:hover{color:var(--accent-2)}
.ts-list span{font-size:.84rem;color:var(--muted);line-height:1.45}
.ts-side{display:flex;flex-direction:column;gap:8px}
.ts-side details{border:1px solid var(--line);border-radius:12px;background:#13131b;padding:0 14px}
.ts-side summary{cursor:pointer;list-style:none;padding:12px 22px 12px 0;font-weight:700;font-size:.9rem;position:relative}
.ts-side summary::-webkit-details-marker{display:none}
.ts-side summary::after{content:"+";position:absolute;right:0;top:9px;color:var(--accent-2);font-size:1.1rem;font-weight:800}
.ts-side details[open] summary::after{content:"–"}
.ts-side details p{font-size:.86rem;margin:0 0 12px}
.ts-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ts-links a{display:inline-flex;padding:7px 12px;border-radius:99px;border:1px solid var(--line-2);color:var(--text);text-decoration:none;font-size:.82rem;font-weight:700}
.ts-links a:hover{border-color:var(--accent);color:var(--accent-2)}
@media (max-width:900px){ .tool-seo{grid-template-columns:minmax(0,1fr);padding:20px} .ts-list{grid-template-columns:1fr} }

/* Tool-Überschriften: Suchbegriff farbig mit Doppelpunkt, danach Beschreibung (normale Schreibweise) */
.page-head h1.tool-h1{font-family:var(--ff-body);font-style:normal;text-transform:none;font-weight:800;font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.22;letter-spacing:-.01em;max-width:860px}
.tool-h1 .th-key{color:var(--accent-2)}
.tool-h1 .wip-pill{vertical-align:middle;font-size:.7rem}

/* ================= CHAMPION-SEITE ================= */
a.champ{text-decoration:none}
.av-34{width:34px;height:34px}.av-44{width:44px;height:44px}.av-112{width:112px;height:112px}
.chp-open{display:inline-block;margin-top:4px;font-size:.8rem;font-weight:700;color:var(--accent-2);text-decoration:none}
.chp-open:hover{text-decoration:underline}
#page-champion .crumb{margin-top:24px}
#page-champion .crumb a{color:inherit;text-decoration:none}
#page-champion .crumb a:hover{color:var(--accent-2)}
.chp-hero{--cc:var(--c1);position:relative;margin-top:12px;border-radius:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--cc) 45%,var(--line));background:#0d0d12;min-height:270px;display:flex;align-items:center}
.chp-hero.c2{--cc:var(--c2)}.chp-hero.c3{--cc:var(--c3)}.chp-hero.c4{--cc:var(--c4)}.chp-hero.c5{--cc:var(--c5)}
.chp-hero::before{content:"";position:absolute;top:0;right:0;bottom:0;width:min(58%,620px);background:var(--splash,none) center 22%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
.chp-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--cc),transparent 70%)}
.chp-hero-in{position:relative;z-index:1;display:flex;gap:24px;align-items:center;padding:32px;max-width:820px}
.chp-portrait .av{width:112px!important;height:112px!important;border-radius:20px;box-shadow:0 0 0 3px var(--cc),0 10px 30px rgba(0,0,0,.5)}
.chp-h1{font-family:var(--ff-body);font-style:normal;text-transform:none;font-weight:800;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 12px}
.chp-h1 .th-key{color:var(--accent-2)}
.chp-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chp-tags .ch-rng{margin-left:0}
.chp-cost,.chp-tr{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid var(--line-2);font-size:.8rem;font-weight:700}
.chp-lead{color:var(--muted);margin:12px 0 16px;font-size:1rem}
.chp-acts{display:flex;gap:8px;flex-wrap:wrap}
.chp-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:18px;align-items:start}
.chp-card{padding:20px;margin-bottom:16px}
.chp-card h2{font-size:1.15rem;margin:0 0 14px}
.chp-best{margin-bottom:14px}
.chp-best small{display:block;font-size:.72rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.chp-best > div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chp-best i{font-style:normal;color:var(--faint);font-weight:800}
.chp-bi{display:flex;flex-direction:column;align-items:center;gap:5px;width:86px;background:none;border:0;color:var(--text);cursor:pointer;font-size:.7rem;font-weight:700;line-height:1.15;text-align:center;padding:0}
.chp-bi img{width:54px;height:54px;border-radius:10px;border:2px solid var(--gold)}
.chp-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.chp-it{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#13131b;color:inherit;cursor:pointer;text-align:left;font-family:inherit}
.chp-it:hover,.chp-comp:hover{border-color:var(--line-2);background:var(--panel-2)}
.chp-it img{width:40px;height:40px;border-radius:8px;flex:none}
.chp-it b{display:block;font-size:.86rem;line-height:1.2}
.chp-it small{font-size:.72rem;color:var(--faint)}
.chp-comps{display:flex;flex-direction:column;gap:8px}
.chp-comp{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;gap:12px;align-items:center;padding:8px 12px;border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--tc);background:#13131b;color:inherit;cursor:pointer;text-align:left;font-family:inherit}
.chp-tier{width:34px;height:34px;border-radius:9px;background:var(--tc);color:#111;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:1.2rem}
.chp-comp span b{display:block;font-size:.92rem}
.chp-comp small{font-size:.74rem;color:var(--faint)}
.chp-chx{display:block;width:40px;height:46px}
.chp-trait + .chp-trait{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.chp-trait h3{margin:0;font-size:1rem}
.chp-trait p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:8px 0}
.chp-mates{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chp-av{display:flex;flex-direction:column;align-items:center;gap:4px;width:62px;color:var(--muted);text-decoration:none;font-size:.62rem;font-weight:600;line-height:1.1;text-align:center}
.chp-av span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chp-av:hover{color:var(--text)}
.chp-hold{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--muted);font-size:.86rem}
.chp-hold b{width:48px;height:48px;border-radius:12px;background:var(--tc);color:#111;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:1.6rem;flex:none}
.chp-nav{display:flex;justify-content:space-between;gap:10px;margin:4px 0 0}
.chp-nav a{padding:9px 16px;border-radius:99px;border:1px solid var(--line-2);color:var(--text);text-decoration:none;font-weight:700;font-size:.86rem}
.chp-nav a:hover{border-color:var(--accent);color:var(--accent-2)}
@media (max-width:900px){ .chp-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .chp-hero{align-items:flex-end;min-height:0} .chp-hero::before{width:100%;bottom:auto;height:230px;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)} .chp-hero-in{flex-direction:column;align-items:flex-start;padding:120px 20px 22px;gap:14px} .chp-portrait .av{width:84px!important;height:84px!important} .chp-card{padding:16px} }

/* DPS-Rechner: Trait-Stufen */
.dps-trait{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#13131b;margin-bottom:6px}
.dps-trait.em{border-style:dashed}
.dps-tn b{display:block;font-size:.88rem}
.dps-tn small{display:block;font-size:.7rem;color:var(--faint)}
.dps-tn small b{display:inline;font-size:inherit;color:var(--muted)}
.dps-tl{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.dps-tl button{min-width:32px;height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-weight:800;font-size:.78rem;cursor:pointer}
.dps-tl button:hover{color:var(--text);border-color:var(--accent-2)}
.dps-tl button.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:560px){ .dps-trait{grid-template-columns:auto minmax(0,1fr)} .dps-tl{grid-column:1/-1;justify-content:flex-start} }

/* ================= ENCOUNTERS (Tierlist-Tab) ================= */
.enc-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.enc-card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.enc-card b{font-family:var(--ff-head);font-size:1.8rem;line-height:1;color:var(--accent-2)}
.enc-card span{font-weight:700;font-size:.88rem}
.enc-card small{font-size:.74rem;color:var(--faint)}
#encList{display:flex;flex-direction:column;gap:8px}
.enc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 150px minmax(0,1.6fr);gap:16px;align-items:center;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.enc-who{display:flex;gap:12px;align-items:center;min-width:0}
.enc-who b{display:block;font-size:.95rem}
.enc-who small{display:block;font-size:.74rem;color:var(--faint)}
.enc-noicon{display:flex;align-items:center;justify-content:center;border-radius:10px;border:2px dashed var(--line-2);color:var(--faint);font-weight:800;flex:none}
.enc-fx{margin:0;color:var(--muted);font-size:.86rem;line-height:1.45}
.enc-odds b{display:block;font-family:var(--ff-head);font-size:1.25rem}
.enc-odds i{display:block;height:6px;border-radius:99px;background:#22222c;margin:4px 0;overflow:hidden}
.enc-odds em{display:block;height:100%;background:var(--accent);border-radius:99px}
.enc-odds small{font-size:.7rem;color:var(--faint)}
.enc-rec p{margin:6px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}
.enc-comps{display:flex;flex-wrap:wrap;gap:6px}
.enc-comp{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;border:1px solid var(--line-2);border-left:3px solid var(--tc);background:#13131b;color:inherit;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.enc-comp:hover{border-color:var(--tc)}
.enc-comp > b{width:20px;height:20px;border-radius:6px;background:var(--tc);color:#111;display:flex;align-items:center;justify-content:center;font-size:.72rem}
.enc-chx{display:block;width:22px;height:25px}
.enc-egal{display:inline-block;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.06);color:var(--muted);font-size:.78rem;font-weight:700}
.enc-none{font-size:.78rem;color:var(--faint)}
.adm-enc{display:flex;flex-direction:column;gap:8px}
.adm-enc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.adm-enc-ed{display:flex;flex-direction:column;gap:8px}
.adm-enc-egal{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;white-space:nowrap;margin-left:6px}
@media (max-width:1000px){ .enc-row{grid-template-columns:minmax(0,1fr) 130px} .enc-fx,.enc-rec{grid-column:1/-1} .enc-sum{grid-template-columns:1fr 1fr} .adm-enc-row{grid-template-columns:minmax(0,1fr)} }
.guide-on{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.guide-on:hover{border-color:var(--accent);transform:translateY(-2px)}
.guide-on .link-arrow{color:var(--accent-2)}
#page-guides .gd-view[data-guide="encounters"] .page-head{margin-bottom:18px}
/* Team-Karten auf der Startseite: Rang · Peak · Aus einheitlich */
.tcard-facts.f3{grid-template-columns:minmax(0,1fr);gap:4px}
.tcard-facts.f3 div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;min-width:0}
.tcard-facts.f3 b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-sorts[hidden]{display:none}

/* ================= SIMULATOR: ein Feld ================= */
/* Aufstellung: Gegner-Brett direkt über deinem Brett, wie ein Spielfeld */
.sim-mode #bRows{display:grid;grid-template-columns:230px minmax(0,1fr) 160px;column-gap:12px;row-gap:0}
.sim-mode #bRows > .b-layout{display:contents}
.sim-mode #bRows > .b-layout[hidden]{display:none}
.sim-mode #bRowE .b-left,.sim-mode #bRowE .b-right{margin-bottom:12px}
.sim-mode #bRowE .b-center{border-bottom:0;border-radius:16px 16px 0 0}
.sim-mode #bRowM .b-center{border-top:2px dashed rgba(255,255,255,.14);border-radius:0 0 16px 16px}
.sim-mode #bRowE .b-boardwrap{padding-bottom:4px}
.sim-mode #bRowM .b-boardwrap{padding-top:22px}
/* Kampf läuft: nur das Kampffeld, die Aufstellung ist ausgeblendet */
.sim-mode.sim-fight #bRows,.sim-mode.sim-fight #bPool{display:none}
.sim-view{margin-left:4px}
@media (max-width:1100px){
  .sim-mode #bRows{grid-template-columns:minmax(0,1fr)}
  /* die beiden Bretter zuerst und direkt untereinander, Traits und Augments danach */
  .sim-mode #bRowE .b-center{order:1} .sim-mode #bRowM .b-center{order:2}
  .sim-mode #bRowM .b-right{order:3} .sim-mode #bRowE .b-right{order:4} .sim-mode #bRowM .b-left{order:5} .sim-mode #bRowE .b-left{order:6}
  .sim-mode #bRows .b-left,.sim-mode #bRows .b-right{height:auto;min-height:0;margin:12px 0 0}
  .sim-mode #bRows .b-left{max-height:300px}
  .sim-mode #bRows .b-right{flex-direction:row;flex-wrap:wrap} .sim-mode #bRows .b-right .b-mini{flex:1 1 140px}
}

/* Kosten-Knöpfe überall einheitlich in den Kostenfarben der Units (1 grau · 2 grün · 3 blau · 4 lila · 5 gold) */
.cb{--cc:var(--c1)}.cb.c2{--cc:var(--c2)}.cb.c3{--cc:var(--c3)}.cb.c4{--cc:var(--c4)}.cb.c5{--cc:var(--c5)}
.cb,.cb:hover{border:1px solid color-mix(in srgb,var(--cc) 60%,transparent)!important;background:color-mix(in srgb,var(--cc) 14%,transparent)!important;color:var(--text)!important}
.cb:hover{background:color-mix(in srgb,var(--cc) 26%,transparent)!important}
.cb.on,.cb.active{background:var(--cc)!important;border-color:var(--cc)!important;color:#0b0d14!important}

/* Coaching: Preis pro Stunde und VIP-Mentoring */
.pkg-h{margin:-8px 0 14px;font-size:.8rem;font-weight:700;color:var(--accent-2)}
.pkg-vip{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;padding:28px;border:1px solid rgba(242,193,78,.55);background:radial-gradient(120% 140% at 100% 0%,rgba(242,193,78,.16),transparent 55%),linear-gradient(160deg,#1c1710,#121018);box-shadow:0 0 0 1px rgba(242,193,78,.25),0 24px 60px rgba(242,193,78,.08)}
.vip-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.vip-badge{padding:4px 12px;border-radius:99px;background:var(--gold);color:#1a1200;font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.vip-seats{padding:4px 12px;border-radius:99px;border:1px solid rgba(242,193,78,.5);color:var(--gold);font-weight:700;font-size:.78rem}
.pkg-vip h3{margin:0 0 8px;font-size:1.5rem}
.pkg-vip p{color:var(--muted);line-height:1.6;margin:0 0 14px}
.pkg-vip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.pkg-vip li{position:relative;padding-left:22px;font-size:.88rem;color:var(--text)}
.pkg-vip li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.vip-side{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding-left:28px;border-left:1px solid rgba(242,193,78,.25)}
.vip-price{font-family:var(--ff-head);font-weight:900;font-size:3rem;line-height:1;color:var(--gold)}
.vip-side small{color:var(--muted);font-size:.84rem}
.vip-rate{margin:6px 0 14px!important;font-size:.86rem;font-weight:700;color:var(--text)!important}
.vip-btn{background:var(--gold);color:#1a1200;border:0;font-weight:800;justify-content:center;align-self:stretch}
.vip-btn:hover{filter:brightness(1.08)}
.vip-note{margin-top:10px;font-size:.74rem!important;color:var(--faint)!important;line-height:1.4}
@media (max-width:900px){ .pkg-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .pkg-vip{grid-template-columns:minmax(0,1fr);padding:22px} .pkg-vip ul{grid-template-columns:1fr} .vip-side{padding-left:0;border-left:0;border-top:1px solid rgba(242,193,78,.25);padding-top:18px} }
@media (max-width:600px){ .pkg-grid{grid-template-columns:minmax(0,1fr)} }
/* ================= CHEATSHEET (minimal, Design folgt) ================= */
/* Kopf */
.cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:26px 0 22px}
.cs-head .crumb{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--accent-2)}
.cs-head .crumb a:hover{color:var(--text)}
.cs-h1{margin:8px 0 6px;font-family:var(--ff-body);font-style:normal;font-weight:800;font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.02;letter-spacing:-.02em;text-transform:none}
.cs-h1 em{font-style:normal;color:var(--accent)}
.cs-head p{color:var(--muted);font-size:1.15rem;margin:0}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Seitenleiste */
.cs-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.cs-side{position:sticky;top:100px;max-height:calc(100vh - 116px);overflow:auto;scrollbar-width:thin;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 12px 12px}
.cs-side-h{font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin:0 8px 12px}
.cs-search{display:flex;align-items:center;gap:8px;margin:0 4px 12px;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--faint)}
.cs-search:focus-within{border-color:var(--accent)}
.cs-search svg{width:16px;height:16px;flex:none}
.cs-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:.88rem}
.cs-group[hidden],.cs-tile[hidden]{display:none}
.cs-group + .cs-group{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.cs-gh{display:flex;width:100%;justify-content:space-between;align-items:center;background:none;border:0;padding:8px;font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);cursor:pointer;border-radius:8px}
.cs-gh:hover{color:var(--text)}
.cs-gh svg{width:14px;height:14px;transition:transform .15s}
.cs-group.closed .cs-gh svg{transform:rotate(-90deg)}
.cs-group.closed:not(.force-open) .cs-menu{display:none}
.cs-menu{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}
.cs-tile{position:relative;display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:.92rem;transition:background .15s,color .15s}
.cs-tile:hover{background:var(--panel-2);color:var(--text)}
.cs-tile.on{background:var(--accent-soft);color:var(--text);font-weight:600}
.cs-tile.on::before{content:'';position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.cs-tile svg{width:19px;height:19px;flex:none}
.cs-foot{display:flex;justify-content:space-between;gap:12px;margin:12px 4px 0;font-size:.76rem;color:var(--faint)}
.cs-foot kbd{display:inline-block;border:1px solid var(--line-2);border-radius:4px;padding:0 6px;margin-right:7px;font:inherit}
/* Panel rechts */
.cs-main{min-width:0}
.cs-sec .csp-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.csp-ic{flex:none;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:var(--gold-soft);border:1px solid rgba(242,193,78,.3)}
.csp-ic svg{width:28px;height:28px}
.cs-sec .csp-head h2{margin:0;font-family:var(--ff-body);font-style:normal;text-transform:none;font-weight:800;font-size:1.75rem;line-height:1.1;letter-spacing:-.01em}
.csp-head p{margin:4px 0 0;color:var(--muted)}
.csp-tabs{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-bottom:16px}
.csp-tabs button{display:flex;align-items:center;gap:8px;background:none;border:0;border-right:1px solid var(--line-2);color:var(--muted);font:inherit;font-size:.88rem;font-weight:600;padding:9px 18px;cursor:pointer}
.csp-tabs button:last-child{border-right:0}
.csp-tabs button:hover{color:var(--text)}
.csp-tabs button.on{background:var(--accent);color:#fff}
.csp-tabs svg{width:16px;height:16px}
.csp-pane[hidden]{display:none}
.csp-box{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:16px}
.csp-tip{display:flex;gap:10px;align-items:center;margin-top:14px;padding:11px 14px;border:1px solid rgba(59,130,246,.45);border-radius:10px;background:rgba(59,130,246,.08);color:var(--accent-2);font-size:.9rem;font-weight:600}
.csp-tip svg{width:18px;height:18px;flex:none}
.csp-rel{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.csp-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.csp-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.csp-card-h{display:flex;gap:12px;align-items:center}
.csp-card-h svg{width:24px;height:24px;color:var(--accent-2);flex:none}
.csp-card-h b{display:block;font-size:1.02rem}
.csp-card-h small{color:var(--muted);font-size:.8rem}
.csp-prev{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.csp-pill{min-width:44px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;text-align:center;font-weight:700;font-size:.86rem;background:var(--bg-2);font-variant-numeric:tabular-nums}
.csp-pill small{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.66rem;color:var(--faint);font-weight:600;white-space:nowrap}
.csp-ch{border-radius:8px;border:1px solid var(--line-2)}
.csp-note{font-size:.74rem;color:var(--faint)}
.csp-more{color:var(--accent-2);font-weight:700;font-size:.85rem;margin-top:auto}
/* Heatmap Shop-Chancen */
.cs-hm{min-width:560px}
.cs-hm th,.cs-hm td{text-align:center;white-space:nowrap}
.cs-hm th:first-child,.cs-hm td:first-child{text-align:center;width:70px;font-weight:700;color:var(--muted)}
.cs-hm td.hm{background:rgba(var(--hc),var(--a))}
.hm.c1{--hc:156,163,175}.hm.c2{--hc:34,197,94}.hm.c3{--hc:59,130,246}.hm.c4{--hc:168,85,247}.hm.c5{--hc:242,193,78}
.cs-hm td.top{font-weight:800;color:#fff}
.cs-hm tbody tr{cursor:pointer}
.cs-hm tbody tr:hover td{filter:brightness(1.15)}
.cs-hm tr.sel td{background-image:linear-gradient(rgba(59,130,246,.16),rgba(59,130,246,.16))}
.cs-hm tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent);color:var(--text)}
.cs-after{margin:12px 0 0}
.cs-grid.cs-grid-2{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
.cs-grid > *{min-width:0}
@media (max-width:900px){
  .cs-layout{grid-template-columns:1fr}
  .cs-side{position:static;max-height:none}
  .csp-rel{grid-template-columns:1fr}
  .cs-sec .csp-head h2{font-size:1.35rem}
  .csp-ic{width:44px;height:44px}
  .cs-grid.cs-grid-2{grid-template-columns:1fr}
  .csp-tabs{width:100%;flex-wrap:nowrap}.csp-tabs button{flex:1;justify-content:center;padding:9px 6px;font-size:.8rem}.csp-tabs svg{display:none}
  .csp-box{padding:10px}.cs-hm{min-width:0;font-size:.76rem}.cs-hm th,.cs-hm td{padding:7px 3px}.cs-hm th{font-size:.64rem}.cs-hm .hm-k{display:none}.cs-hm th:first-child,.cs-hm td:first-child{width:38px}
}
.cs-sec{padding:22px;border-radius:16px}
.cs-wrap{overflow-x:auto}
.cs-table{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.cs-table th{font-size:.74rem;color:var(--faint);font-weight:700;text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.cs-table td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cs-table.cs-top td{vertical-align:top}
.cs-shop th,.cs-shop td{text-align:center;white-space:nowrap}
.cs-shop th:first-child,.cs-shop td:first-child{text-align:left;color:var(--muted);font-weight:700}
.cs-shop tbody tr:nth-child(-n+2) td{color:var(--faint);font-size:.78rem}
.cs-li{display:flex;justify-content:space-between;gap:12px;min-width:170px;padding:1px 0}
.cs-li span{color:var(--muted)}
.cs-aug{display:inline-block;padding:1px 8px;border-radius:5px;font-size:.78rem;font-weight:700;color:#111}
.cs-aug.s{background:#cbd5e1}.cs-aug.g{background:#f2c14e}.cs-aug.p{background:linear-gradient(90deg,#f0abfc,#93c5fd,#86efac)}
.cs-it{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cs-it img{border-radius:5px}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.cs-orb h4{margin:0 0 6px;font-size:.95rem}.cs-orb h4 small{color:var(--faint);font-weight:500}
.cs-units{display:flex;flex-wrap:wrap;gap:14px}
.cs-unit{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.cs-unit img{width:40px;height:40px;border-radius:8px;object-fit:cover;border:2px solid var(--line-2)}
.cs-table td:last-child{white-space:nowrap}
.cs-grid-2 .cs-table td:first-child{white-space:nowrap}
.cs-note{color:var(--muted);font-size:.86rem;margin:0 0 10px}
.cs-wrap + .cs-note{margin:10px 0 0}
.cs-src{color:var(--faint);font-size:.74rem;margin:8px 0 0}

/* Startseite: großes Challenger-Emblem statt Maskottchen (mittig in den Ringen) */
.hero-emblem{position:absolute;width:600px;height:600px;max-width:none;right:calc(12% - 90px);top:calc(12% - 90px);z-index:2;object-fit:contain;pointer-events:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(80,190,255,.3));animation:bob 5s ease-in-out infinite}
.hero-visual .mascot-glow.emb{right:calc(12% + 20px);top:calc(12% + 20px);width:380px;background:radial-gradient(circle,rgba(70,180,255,.34),rgba(242,193,78,.12) 45%,rgba(0,0,0,0) 70%)}
@media (max-width:820px){
  .hero-emblem{width:440px;height:440px;right:50%;margin-right:-220px;top:-10px;animation:none}
  .hero-visual .mascot-glow.emb{right:50%;margin-right:-150px;top:60px;width:300px}
}
/* Patch nur auf Englisch verfügbar */
.pd-lang{margin:0 0 14px;padding:8px 12px;border-radius:8px;background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.35);color:var(--gold);font-size:.86rem;max-width:620px}

/* ================= CHAMPIONS V2 (Beta): Wabenraster mit Wellen-Hover ================= */
#cvApp.wrap{max-width:1560px}
.cv-stage{position:relative;margin:22px 0 40px;padding:34px 28px 26px;border-radius:24px;border:1px solid rgba(106,168,255,.18);overflow:hidden;
  background:radial-gradient(900px 420px at 12% 0%,rgba(56,189,248,.15),transparent 60%),radial-gradient(800px 480px at 92% 8%,rgba(168,85,247,.17),transparent 60%),radial-gradient(760px 520px at 50% 112%,rgba(59,130,246,.16),transparent 60%),#0a0d17;
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03)}
.cv-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64l28 16v32M28 64L0 80v32' fill='none' stroke='%2378a6ff' stroke-width='.6'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%)}
.cv-stage > *{position:relative}
.cv-head{text-align:center}
.cv-crumb{font-size:.74rem;color:var(--faint);letter-spacing:.04em}
.cv-crumb a:hover{color:var(--text)}
.cv-tabs{display:flex;width:fit-content;max-width:100%;gap:4px;margin:20px auto 0;padding:4px;border-radius:12px;background:rgba(15,20,35,.72);border:1px solid rgba(148,180,255,.18)}
.cv-tabs a{padding:7px 16px;border-radius:9px;color:#b9c3dd;font-weight:600;font-size:.88rem;text-decoration:none}
.cv-tabs a:hover{color:#fff}
.cv-tabs a.on{background:rgba(45,212,191,.14);color:#fff;box-shadow:inset 0 0 0 1px #2dd4bf}
.cv-h1{margin:10px 0 6px;font-family:var(--ff-head);font-style:italic;font-weight:900;font-size:clamp(2.6rem,6vw,4.6rem);text-transform:uppercase;line-height:1;
  background:linear-gradient(90deg,#fff 0%,#fff 36%,#5eead4 64%,#38bdf8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(56,189,248,.35))}
.cv-sub{margin:0;color:#b9c3dd;letter-spacing:.42em;text-transform:uppercase;font-size:.8rem}
.cv-filters{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:24px auto 6px;max-width:1040px}
.cv-chip{height:40px;min-width:40px;padding:0 12px;border-radius:10px;border:1px solid rgba(148,180,255,.22);background:rgba(15,20,35,.72);color:#cfd8ee;font:inherit;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.cv-chip:hover{border-color:rgba(94,234,212,.6)}
.cv-chip.on{border-color:#2dd4bf;background:rgba(45,212,191,.12);box-shadow:inset 0 0 0 1px #2dd4bf,0 0 18px rgba(45,212,191,.35);color:#fff}
.cv-cost i{width:9px;height:9px;border-radius:50%;background:var(--cc)}
.cv-cost.c1,.cv-tile.c1{--cc:var(--c1)}.cv-cost.c2,.cv-tile.c2{--cc:var(--c2)}.cv-cost.c3,.cv-tile.c3{--cc:var(--c3)}.cv-cost.c4,.cv-tile.c4{--cc:var(--c4)}.cv-cost.c5,.cv-tile.c5{--cc:var(--c5)}
.cv-trait{padding:0;width:40px}
.cv-trait img{width:22px;height:22px;filter:grayscale(1) brightness(1.7);opacity:.8;transition:filter .15s,opacity .15s}
.cv-trait:hover img,.cv-trait.on img{filter:none;opacity:1}
.cv-sep{width:1px;height:26px;background:rgba(148,180,255,.22);margin:0 4px}
.cv-search{height:40px;min-width:220px;border-radius:10px;border:1px solid rgba(148,180,255,.22);background:rgba(15,20,35,.72);color:#fff;padding:0 14px;font:inherit;font-size:.88rem;outline:0}
.cv-search:focus{border-color:#2dd4bf}
.cv-count{text-align:center;color:var(--faint);font-size:.78rem;margin-top:8px}
.cv-grid{position:relative;transition:height .35s ease}
.cv-tile{position:absolute;left:0;top:0;width:120px;height:138.56px;display:block;--lift:0;--x:0px;--y:0px;--k:1;z-index:1;text-decoration:none;outline:0;will-change:transform;
  transform:translate3d(var(--x),var(--y),0) translateY(calc(var(--lift) * -18px)) scale(calc(var(--k) * (1 + var(--lift) * .08)));
  transition:transform .38s cubic-bezier(.22,.8,.25,1),filter .25s ease-out,opacity .3s ease}
.cv-grid.noanim .cv-tile{transition:none}
.cv-tile.off{opacity:0;pointer-events:none;transform:translate3d(var(--x),var(--y),0) scale(calc(var(--k) * .6))}
.cv-hx{position:absolute;inset:0;clip-path:var(--hexp);background:linear-gradient(160deg,var(--cc),color-mix(in srgb,var(--cc) 40%,#0a0d17))}
.cv-in{position:absolute;inset:3px;clip-path:var(--hexp);background:#111 center 20%/cover no-repeat;transition:filter .22s}
.cv-tr{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);z-index:2;display:flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.cv-label{position:absolute;left:50%;top:calc(100% + 12px);transform-origin:50% 0;transform:translateX(-50%) translateY(-4px) scale(calc(1 / var(--k)));white-space:nowrap;padding:6px 12px;border-radius:9px;background:rgba(8,11,20,.94);border:1px solid var(--cc);box-shadow:0 0 18px color-mix(in srgb,var(--cc) 45%,transparent);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;text-align:center;z-index:3}
.cv-label b{display:block;color:#fff;font-size:.88rem}
.cv-label small{display:inline-flex;align-items:center;gap:5px;color:#aeb8d3;font-size:.68rem}
.cv-grid.waving .cv-tile{filter:brightness(calc(.62 + var(--lift) * .55)) saturate(calc(.78 + var(--lift) * .4))}
.cv-grid .cv-tile.hot{z-index:20;transform:translate3d(var(--x),var(--y),0) translateY(-22px) scale(calc(var(--k) * var(--hs,1.34)));filter:drop-shadow(0 0 14px var(--cc)) drop-shadow(0 0 3px rgba(255,255,255,.9))}
.cv-tile.hot .cv-hx{background:linear-gradient(160deg,#fff,var(--cc) 45%,color-mix(in srgb,var(--cc) 60%,#0a0d17))}
.cv-tile.hot .cv-in{filter:brightness(1.12) saturate(1.15)}
.cv-tile.hot .cv-label{opacity:1;transform:translateX(-50%) translateY(0) scale(calc(1 / var(--k)))}
.cv-back{display:inline-block;margin-top:6px;color:var(--faint);font-size:.82rem}
.cv-back:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){.cv-tile{transition:opacity .2s}.cv-grid .cv-tile.hot{transform:translate3d(var(--x),var(--y),0) scale(calc(var(--k) * 1.15))}}
@media (max-width:560px){.cv-stage{padding:22px 10px 18px;border-radius:18px}.cv-sub{letter-spacing:.2em}.cv-search{min-width:0;flex:1 1 100%}.cv-label{display:none}.cv-chip{height:36px;min-width:36px}.cv-trait{width:36px}}
/* Lange Werte in Patch-Änderungen umbrechen statt seitlich überstehen */
.pn-txt{min-width:0}.pn-v,.pn-old,.pn-new{overflow-wrap:anywhere;min-width:0;max-width:100%}