:root{--c3:#b88ad0}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.chip.gd{background:var(--gold-soft);color:var(--gold)}
.bar{height:12px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--c3));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar.gold i{background:linear-gradient(90deg,var(--gold),#e8d27d)}
.bar.ol i{background:var(--olive)}
.bar.warnb i{background:var(--warn)}
.bar.sm{height:8px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;min-width:0}
.stat .v{font:700 21px/1.15 var(--f-body);font-variant-numeric:tabular-nums}
/* Stufenkarte */
.hero{background:linear-gradient(150deg,var(--accent) 0%,#4b2560 100%);color:#fff;border:0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:var(--hero-mark) no-repeat center/contain;opacity:.13;pointer-events:none}
.hero .eyebrow{color:rgba(255,255,255,.75)}
.hero h1{color:#fff}
.hero .bar{background:rgba(255,255,255,.18);border-color:transparent}
.hero .bar i{background:linear-gradient(90deg,#e8d27d,#fff3c4)}
.hero .reqs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.req{background:rgba(255,255,255,.12);border-radius:12px;padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.req b{font-size:16px;font-variant-numeric:tabular-nums}
.req .st{display:flex;align-items:center;gap:4px;font-weight:700}
.req .st svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.req.done{background:rgba(158,232,183,.22)}
.req.done .st{color:#b9f0cc}
.req .st.no{color:#ffd6a0}
.hero .money{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero .money div{background:rgba(0,0,0,.18);border-radius:12px;padding:10px}
.hero .money b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.hero .money span{font-size:12px;opacity:.8}
.hero .btn.sec{background:rgba(255,255,255,.15);border-color:transparent;color:#fff}
.ladder{display:flex;gap:4px}
.ladder span{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.2)}
.ladder span.on{background:#e8d27d}
.node{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.node .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--f-body);flex:none;background:var(--accent-soft);color:var(--accent)}
.node.me{border:2px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.node.up .av{background:var(--olive-soft);color:var(--olive)}
.node.inact{opacity:.6}
.node .nm{flex:1;min-width:0}
.node .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .nm span{font-size:12px;color:var(--muted)}
.vline{width:2px;height:14px;background:var(--line);margin-left:26px}
.down{display:flex;flex-direction:column;gap:8px;padding-left:18px;border-left:2px solid var(--line);margin-left:26px;padding-top:8px}
.down .down{margin-left:16px}
.twrap{display:flex;flex-direction:column;gap:8px}
/* Guide-Widget */
.guidew{background:linear-gradient(160deg,var(--gold-soft),var(--accent-soft));border:0}
.guidew .gtop{display:flex;gap:12px;align-items:center}
.guidew .masc{width:64px;height:76px;flex:none}
.gsteps{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.gsteps button{all:unset;cursor:pointer;flex:none;width:118px;background:var(--surface);border-radius:12px;padding:10px;font-size:12.5px;font-weight:600;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line)}
.gsteps button span{font:800 18px var(--f-body);color:var(--accent)}
.on.inact{opacity:.55;border-top-color:var(--line)}
.on.inact .oav{border-color:var(--line)}
button.req{all:unset;box-sizing:border-box;cursor:pointer;background:rgba(255,255,255,.12);border-radius:12px;padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;color:#fff;transition:background .15s}
button.req:hover{background:rgba(255,255,255,.22)}
button.req.done{background:rgba(158,232,183,.22)}
button.req:focus-visible{outline:3px solid #e8d27d}
.herotitle{display:flex;align-items:center;gap:12px;min-width:0}
.badgebtn{all:unset;cursor:pointer;border-radius:50%;flex:none}
.badgebtn:focus-visible{outline:3px solid #e8d27d}
.badge-hero{width:72px;height:72px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .2s}
.badgebtn:hover .badge-hero{transform:scale(1.06) rotate(-3deg)}
@media (max-width:420px){.badge-hero{width:58px;height:58px}}
/* Aufstieg: Markierungen */
.hero.gold{background:linear-gradient(150deg,#d9a92c 0%,#a8780f 45%,#6e4c05 100%);box-shadow:0 8px 30px rgba(201,162,39,.45)}
.hero.gold .bar i{background:linear-gradient(90deg,#fff3c4,#ffffff)}
.ascbanner{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.2);border-radius:12px;padding:10px 12px;font-size:14px;flex-wrap:wrap}
.ascbanner b{display:block;font-size:15px}
.ascbanner>div{flex:1;min-width:170px}
.ascbanner .btn{background:#fff;color:#5a3d00;padding:8px 12px;font-size:13px}
/* Stufenkarte: jede Stufe mit eigener Bühne, immer epischer */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>*:not(.hero-fx){position:relative;z-index:2}
.hero[class*="tier-"]::after{z-index:1}
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.hero-fx .wm{position:absolute;right:-34px;bottom:-30px;width:210px;height:210px;opacity:.14;transform:rotate(-12deg)}
.hero-fx .wm svg{width:100%;height:100%}
.maxlvl{background:rgba(0,0,0,.22);border:1px solid rgba(255,225,130,.45);border-radius:12px;padding:10px 12px;font:italic 700 18px var(--f-display);color:#ffe9a0;text-align:center}
/* 0 · Tippgeber: Leder und Pergament, schlicht */
.hero.tier-0{background:linear-gradient(150deg,#6a5442 0%,#3b2c20 70%,#2a1f17 100%)}
.tier-0 .hero-fx{background:repeating-linear-gradient(35deg,rgba(255,255,255,.025) 0 3px,transparent 3px 7px)}
/* I · Commendator: Bronze mit Schmiedeglut und Nieten */
.hero.tier-1{background:linear-gradient(150deg,#b8743a 0%,#6e3d17 55%,#2f1706 100%)}
.tier-1 .hero-fx{background:radial-gradient(ellipse at 50% 120%,rgba(255,130,40,.55),transparent 60%),
 radial-gradient(circle at 12px 12px,#f0b27a 3px,transparent 4px),radial-gradient(circle at calc(100% - 12px) 12px,#f0b27a 3px,transparent 4px),
 radial-gradient(circle at 12px calc(100% - 12px),#f0b27a 3px,transparent 4px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#f0b27a 3px,transparent 4px)}
.tier-1 .hero-fx::before{content:"";position:absolute;inset:6px;border:1px solid rgba(240,178,122,.35);border-radius:12px}
/* II · Junior Centurio: gebürsteter Stahl mit Legionsbanner */
.hero.tier-2{background:linear-gradient(150deg,#4e6a88 0%,#24364c 60%,#101a26 100%)}
.tier-2 .hero-fx{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.tier-2 .hero-fx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:repeating-linear-gradient(180deg,#8b1d24 0 30px,#6e141a 30px 36px);box-shadow:inset -3px 0 0 #c9a227}
.hero.tier-2>*:not(.hero-fx){margin-left:8px}
/* III · Senior Centurio: Silber und Lila, Lorbeer in den Ecken */
.hero.tier-3{background:linear-gradient(150deg,#6f6a9a 0%,#3a3460 55%,#1a1630 100%);box-shadow:inset 0 0 0 2px rgba(220,226,235,.35)}
.tier-3 .hero-fx .lau{position:absolute;width:150px;height:150px;opacity:.35}
.tier-3 .hero-fx .lau.a{left:-40px;top:-40px}
.tier-3 .hero-fx .lau.b{right:-40px;bottom:-40px;transform:rotate(180deg)}
.tier-3 .hero-fx .lau svg{width:100%;height:100%}
/* IV · Tribun: Abendhimmel, Sonnenstrahlen, Adlerschwingen */
.hero.tier-4{background:linear-gradient(165deg,#3b1b52 0%,#6d3a8a 45%,#c48a3a 100%)}
.tier-4 .hero-fx .rays,.tier-5 .hero-fx .rays,.tier-6 .hero-fx .rays{position:absolute;left:50%;top:-30%;width:240%;aspect-ratio:1;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg,rgba(255,225,140,.13) 0deg 6deg,transparent 6deg 15deg);animation:heroSpin 90s linear infinite}
.tier-4 .hero-fx .wing{position:absolute;top:8px;width:46%;opacity:.16;fill:#ffe9a0}
.tier-4 .hero-fx .wing svg{width:100%;height:auto;display:block}
.tier-4 .hero-fx .wing.l{right:50%}
.tier-4 .hero-fx .wing.r{left:50%}
.tier-4 .hero-fx .wing.r svg{transform:scaleX(-1)}
.tier-4 .hero-fx .wm{opacity:.2}
/* V · Präfekt: Purpurrot und Gold, Klingen, umlaufender Goldglanz */
.hero.tier-5{background:linear-gradient(150deg,#a3263a 0%,#5a0f1c 55%,#22040a 100%);padding:18px}
.tier-5 .hero-fx::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 70%,#ffe08a 80%,transparent 90%);animation:heroSpinB 6s linear infinite}
.tier-5 .hero-fx::after{content:"";position:absolute;inset:2px;border-radius:14px;background:linear-gradient(150deg,#a3263a 0%,#5a0f1c 55%,#22040a 100%)}
.tier-5 .hero-fx .rays{z-index:1;opacity:.8}
.tier-5 .hero-fx .wm{z-index:1;opacity:.22}
.tier-5 .hero-fx .sw{position:absolute;z-index:1;right:18%;top:-20px;width:46px;height:230px;opacity:.15}
.tier-5 .hero-fx .sw svg{width:100%;height:100%}
.tier-5 .hero-fx .sw.a{transform:rotate(-38deg)}
.tier-5 .hero-fx .sw.b{transform:rotate(38deg)}
/* VI · Konsul: kaiserliches Purpur, drehende Goldstrahlen, funkelnde Sterne, Goldrahmen, Krone */
.hero.tier-6{background:radial-gradient(circle at 75% 15%,#b277dc 0%,#4a1366 45%,#14041d 100%);box-shadow:0 0 0 2px #f0c040,0 0 28px rgba(240,192,64,.55),inset 0 0 40px rgba(240,192,64,.25)}
.tier-6 .hero-fx .rays{background:repeating-conic-gradient(from 0deg,rgba(255,215,90,.22) 0deg 5deg,transparent 5deg 12deg);animation-duration:45s}
.tier-6 .hero-fx .wm{opacity:.28;width:250px;height:250px;filter:drop-shadow(0 0 20px rgba(255,215,90,.6))}
.tier-6 .hero-fx .tw{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff6c8;box-shadow:0 0 8px 2px rgba(255,230,140,.9);animation:twinkle 2.6s ease-in-out infinite}
.hero.tier-6 h1{background:linear-gradient(180deg,#fff9e0,#f0c040 60%,#c9971f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px rgba(255,200,60,.5));font-family:var(--f-logo);letter-spacing:.04em}
.hero.tier-6 .eyebrow::before{content:"♛ ";color:#f0c040}
/* Goldener Zustand „Aufstieg erreicht“ hat Vorrang */
.hero.gold.gold{background:linear-gradient(150deg,#d9a92c 0%,#a8780f 45%,#6e4c05 100%)}
.hero.gold .hero-fx::after{display:none}

/* Teampartner-Karten */
.on.pick,.node.pick{cursor:pointer;transition:transform .12s,box-shadow .12s}
.on.pick:hover,.node.pick:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.on.pick:focus-visible,.node.pick:focus-visible,.statbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pcard .badge-hero{width:60px;height:60px}

@keyframes heroSpin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes heroSpinB{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(.6)}50%{opacity:1;transform:scale(1.3)}}
.pbars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:18px}
.pcol{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.pcol i{display:block;width:100%;max-width:46px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--accent),#4b2560);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.pcol:last-child i{background:linear-gradient(180deg,var(--gold),#a8780f)}
.pcol .pv{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.pcol .pl{font-size:12px;color:var(--muted)}
.guidew .gtop{display:flex;gap:12px;align-items:center}
.guidew .masc{width:64px;height:76px;flex:none}