/* =========================================================
   Forever Helferlein – Designsystem
   Dunkles Fantasy-Interface · Gold-Rahmen · JakeeY-Grün #8CD600
   ========================================================= */
@font-face{font-family:"Cinzel";src:url(../fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(../fonts/cinzel-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#080b10; --bg2:#0d1219; --panel:#111821; --panel2:#151d28; --panel3:#1a2431;
  --line:#253141; --line2:#33414f;
  --gold:#e5b24a; --gold2:#f6d17a; --gold-d:#8a6420; --bronze:#c47a45; --silver:#b9c3cf;
  --lime:#8CD600; --lime2:#a6ef1c; --lime-d:#5d8f00;
  --text:#ece8de; --muted:#98a2ae; --dim:#6c7682;
  --red:#ee3b3b; --blue:#3e8ed8; --purple:#9b5cf5;
  --r:10px; --r-sm:6px;
  --f-head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-logo:"Cinzel",Georgia,serif;
  --side:212px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--f-body);min-height:100vh;
  background-image:radial-gradient(1200px 600px at 70% -10%,#16233340,transparent),radial-gradient(800px 500px at 0 100%,#1a2a1040,transparent)}
a{color:var(--lime);text-decoration:none} a:hover{color:var(--lime2)}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;letter-spacing:.02em;margin:.2em 0 .5em;line-height:1.1;text-transform:uppercase}
h1{font-size:2.1rem} h2{font-size:1.45rem} h3{font-size:1.15rem}
p{margin:.4em 0 .8em}
.muted{color:var(--muted)} .fine{font-size:.82rem;color:var(--muted)} .right{float:right}
code,pre{background:#05080c;border:1px solid var(--line);padding:1px 6px;border-radius:4px;color:var(--gold2)}
.hp{position:absolute;left:-9999px}
.ic{width:20px;height:20px;flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* ---------- Sidebar ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:linear-gradient(#0b1016,#070a0e);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:60;overflow-y:auto;scrollbar-width:thin}
.brand{display:block;text-align:center;padding:18px 10px 14px;text-decoration:none!important}
.brand .w1{display:block;font:900 .95rem var(--f-logo);letter-spacing:.32em;color:var(--lime);text-shadow:0 0 12px #8cd60055}
.brand .w2{display:block;font:900 1.55rem/1 var(--f-logo);letter-spacing:.02em;
  background:linear-gradient(#fff3c4,#f2c55a 45%,#b47a1c 60%,#f8d77d);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3b2606) drop-shadow(0 0 10px #e5b24a40)}
.brand .w3{display:block;margin-top:6px;font:700 .68rem var(--f-head);letter-spacing:.25em;color:var(--muted)}
.brand .w3 b{color:var(--lime)}
.sidenav{display:flex;flex-direction:column;gap:2px;padding:6px 10px}
.sidenav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-sm);color:#c9cdd3;font:600 .98rem var(--f-body);border:1px solid transparent}
.sidenav a:hover{background:#ffffff08;color:#fff}
.sidenav a.on{background:linear-gradient(90deg,#8cd60033,#8cd60010);border-color:#8cd60066;color:#fff;box-shadow:inset 3px 0 0 var(--lime)}
.sidenav a.on .ic{color:var(--lime)}
.sidenav .sep{height:1px;background:var(--line);margin:8px 4px}
.side-mascot{margin-top:auto;padding:10px 0 0;text-align:center}
.side-mascot img{display:block;width:100%;max-width:206px;margin:auto;mask-image:linear-gradient(transparent,#000 12%)}

/* ---------- Topbar ---------- */
.app{margin-left:var(--side);min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:10px 22px;
  background:#090d12ee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r-sm);color:#c9cdd3;white-space:nowrap;font:600 .92rem var(--f-body);border:1px solid transparent}
.topnav a .ic{width:17px;height:17px}
.topnav a:hover{color:#fff;background:#ffffff08}
.topnav a.on{color:#fff;border-color:#8cd60088;background:#8cd60018}
.search{position:relative;flex:0 1 240px}
.search input{width:100%;padding:8px 12px 8px 34px;border-radius:var(--r-sm);background:#0f151d;border:1px solid var(--line);color:var(--text);font:inherit;font-size:.88rem}
.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.iconbtn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#d3d7dc;border:1px solid transparent;background:none;cursor:pointer}
.iconbtn:hover{background:#ffffff0c;color:#fff}
.iconbtn .dot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--lime);color:#111;font:700 .66rem/16px var(--f-body)}
.userchip{display:flex;align-items:center;gap:10px;color:var(--text);padding:3px 10px 3px 3px;border-radius:30px;border:1px solid var(--line)}
.userchip:hover{border-color:var(--lime);color:#fff}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b3a1a,#0d1209);border:2px solid var(--lime);font-size:1.1rem;flex:0 0 auto;overflow:hidden}
.avatar.sm{width:26px;height:26px;font-size:.8rem;border-width:1px}
.avatar img{width:100%;height:100%;object-fit:cover}
.userchip b{display:block;font-size:.9rem;line-height:1.1}
.userchip small{display:flex;gap:8px;color:var(--muted);font-size:.78rem}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;flex:0 0 auto}
.langsw a{padding:3px 9px;font:700 .74rem var(--f-body);color:var(--muted)}
.langsw a.on{background:var(--lime);color:#111}
.burger{display:none}
main.content{flex:1;padding:20px 22px 40px;width:100%;max-width:1680px}

/* ---------- Buttons / Formulare ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:0;border-radius:var(--r-sm);padding:10px 18px;
  font:800 .95rem var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:#0b1200;
  background:linear-gradient(#a8f020,#8cd600 55%,#6fae00);box-shadow:0 0 0 1px #00000060,0 4px 14px #8cd60040,inset 0 1px 0 #ffffff60;text-decoration:none!important;transition:.15s}
.btn:hover{filter:brightness(1.08);color:#0b1200;transform:translateY(-1px)}
.btn:active{transform:none}
.btn .ic{width:18px;height:18px}
.btn.alt{background:linear-gradient(#26313f,#1a222d);color:var(--text);box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 #ffffff14}
.btn.alt:hover{color:#fff;box-shadow:0 0 0 1px var(--lime)}
.btn.gold{background:linear-gradient(#ffe39a,#e5b24a 55%,#b9821e);color:#2b1b00;box-shadow:0 0 0 1px #00000060,0 4px 14px #e5b24a40}
.btn.yt{background:linear-gradient(#ff4b4b,#d71f1f);color:#fff;box-shadow:0 4px 14px #d71f1f40}
.btn.small{padding:6px 12px;font-size:.82rem} .btn.big{padding:14px 26px;font-size:1.1rem} .btn.block{width:100%}
.btn:disabled,.btn.disabled{opacity:.45;pointer-events:none;filter:grayscale(.6)}
input,select,textarea{font:inherit;background:#0b1118;color:var(--text);border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 11px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px #8cd60022}
textarea{width:100%;min-height:120px}
label{display:block;margin:10px 0;color:var(--muted);font-size:.88rem}
label input:not([type=checkbox]):not([type=radio]):not([type=range]),label select,label textarea{display:block;width:100%;margin-top:5px}
label.check{display:flex;gap:9px;align-items:flex-start;color:var(--text)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 16px}
.filters .slider{margin:0;display:flex;align-items:center;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.chips a,.chips button{padding:6px 14px;border:1px solid var(--line2);border-radius:20px;background:var(--panel);color:#cfd4da;font:600 .86rem var(--f-body);cursor:pointer}
.chips a.on,.chips button.on,.chips a:hover,.chips button:hover{border-color:var(--lime);color:#fff;background:#8cd6001c}
.form{max-width:520px}

/* ---------- Panels & Karten ---------- */
.panel,.card-panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:0 10px 30px #0006,inset 0 1px 0 #ffffff08;position:relative}
.panel.goldframe{border-color:#8a6420;box-shadow:0 10px 30px #0006,inset 0 0 0 1px #e5b24a22,inset 0 1px 0 #f6d17a22}
.card-panel.narrow,.panel.narrow,.narrow{max-width:560px;margin:30px auto}
.panel.info{background:linear-gradient(180deg,#132232,#0f1a26);border-color:#27425c}
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-2px 0 12px}
.phead h2,.phead h3{margin:0;font-size:1.2rem;display:flex;align-items:center;gap:8px}
.phead h2 .ic,.phead h3 .ic{color:var(--lime)}
.phead .more{font:600 .86rem var(--f-body);color:#d5d9de;display:flex;align-items:center;gap:6px}
.phead .more:hover{color:var(--lime)}
.phead .more .ic{width:16px;height:16px}
.sec{margin:26px 0 12px;display:flex;align-items:center;gap:8px}
.tag{display:inline-block;font:700 .7rem var(--f-head);letter-spacing:.08em;text-transform:uppercase;background:#0b1118;border:1px solid var(--line2);color:var(--gold2);border-radius:4px;padding:1px 7px;vertical-align:middle}
.tag.demo{color:#ffb35c;border-color:#7a4a12;background:#2a1606}
.tag.lime{color:var(--lime);border-color:var(--lime-d)}
.tag.live{color:#fff;background:var(--red);border-color:var(--red)}
.tag.off{color:var(--muted)}
.flash{padding:11px 15px;border-radius:var(--r-sm);margin-bottom:14px;border:1px solid}
.flash.ok{background:#14240a;border-color:var(--lime-d);color:#c9f58a}
.flash.err{background:#2c1010;border-color:#7d2626;color:#ffb3ab}
.empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--r)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--text);transition:.15s;text-decoration:none!important;position:relative}
a.card:hover,.card.hov:hover{border-color:#8cd60099;transform:translateY(-2px);box-shadow:0 10px 24px #0008}
.card[hidden]{display:none}
.card .body{padding:10px 13px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.card .body b{font-weight:700;color:#fff}
.card .body small{color:var(--muted)}

/* ---------- Hero ---------- */
.hero{position:relative;border-radius:var(--r);overflow:hidden;min-height:300px;border:1px solid #3a2d14;
  box-shadow:0 20px 40px #000a,inset 0 0 0 1px #e5b24a22;display:grid;grid-template-columns:1.25fr 1fr .55fr;align-items:end;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#05080ccc 0%,#05080c77 38%,#05080c00 60%),linear-gradient(0deg,#05080caa,transparent 40%)}
.hero-text{padding:30px 32px;align-self:center}
.hero-text .k1{font:800 2.5rem/1 var(--f-head);text-transform:uppercase;color:#fff;letter-spacing:.01em;text-shadow:0 3px 0 #000}
.hero-text .k2{font:800 3rem/1 var(--f-head);text-transform:uppercase;color:var(--lime);text-shadow:0 3px 0 #000,0 0 30px #8cd60055}
.hero-text .sub{margin:12px 0 18px;font:700 .95rem var(--f-head);letter-spacing:.12em;color:#e9e3cf}
.hero-text .cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ytpill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border-radius:20px;background:#000a;border:1px solid #ffffff22;color:#fff;font:700 .85rem var(--f-head);letter-spacing:.08em}
.ytpill .ic{color:#ff3b3b}
.hero-person{align-self:end;justify-self:center;max-height:300px;display:flex;align-items:flex-end}
.hero-person img{max-height:300px;width:auto;display:block;filter:drop-shadow(0 10px 30px #000)}
.hero-scroll{align-self:center;justify-self:end;padding:14px 18px 14px 0}
.hero-scroll img{width:140px;transform:rotate(3deg);filter:drop-shadow(0 8px 20px #000)}

/* ---------- Schnellzugriff ---------- */
.quick{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.qcard{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:linear-gradient(180deg,#141b25,#0f141b);border:1px solid var(--line);color:var(--text);min-width:0}
.qcard:hover{border-color:var(--lime);color:#fff;transform:translateY(-2px)}
.qcard .qi{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:8px}
.qcard .qi img{width:44px;height:44px;object-fit:contain}
.qcard .qi .ic{width:30px;height:30px}
.qcard b{display:block;font:800 .95rem var(--f-head);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard small{display:block;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi.red{color:#ff4d4d;background:radial-gradient(#5a0d0d,#1a0606)} .qi.purple{color:#b07cff;background:radial-gradient(#3a1d6a,#120822)} .qi.green{color:var(--lime);background:radial-gradient(#29420a,#0d1404)}

/* ---------- Homepage-Raster ---------- */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px 270px;grid-template-areas:"guides events rail" "topics topics rail" "live login rail";gap:16px;align-items:start}
.a-guides{grid-area:guides}.a-events{grid-area:events}.a-rail{grid-area:rail;display:flex;flex-direction:column;gap:16px}
.a-topics{grid-area:topics}.a-live{grid-area:live}.a-login{grid-area:login}

/* Videokarten */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.vcard .thumb{position:relative;aspect-ratio:16/9;background:#000 center/cover;border-radius:8px;overflow:hidden;border:1px solid #ffffff14}
.vcard .thumb .dur{position:absolute;right:6px;bottom:6px;background:#000c;color:#fff;font:700 .74rem var(--f-body);padding:1px 6px;border-radius:4px}
.vcard .thumb .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:#0006;transition:.15s;color:#fff}
.vcard .thumb .play .ic{width:46px;height:46px}
.vcard:hover .thumb .play{opacity:1}
.vcard .vt{display:flex;gap:8px;align-items:flex-start;margin-top:9px}
.vcard .vt .yt{color:#ff3434;flex:0 0 auto;margin-top:1px}
.vcard .vt b{display:block;font-weight:700;line-height:1.25;color:#fff}
.vcard .vt small{display:block;color:var(--muted)}
.vcard .meta{font-size:.78rem;color:var(--dim);margin-top:3px}
.vcard .vbtns{display:flex;gap:6px;margin-top:9px}
.vcard{background:none;border:0}
a.vcard:hover,.vcard:hover{transform:none;box-shadow:none}

/* Events-Liste */
.elist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.eitem{display:flex;gap:11px;align-items:center;color:var(--text)}
.eitem:hover{color:#fff}
.edate{flex:0 0 44px;text-align:center;border-radius:6px;overflow:hidden;border:1px solid var(--line2);background:#0b1118}
.edate span{display:block;background:#c0282a;color:#fff;font:800 .68rem/1.5 var(--f-head);letter-spacing:.08em}
.edate b{display:block;font:800 1.25rem/1.4 var(--f-head)}
.eitem b{display:block;font-weight:700;font-size:.92rem;line-height:1.2}
.eitem small{color:var(--muted);font-size:.8rem}

/* Belohnungen */
.badges{display:flex;justify-content:space-around;gap:6px;margin:4px 0 10px}
.badge{text-align:center}
.badge img{width:58px;height:58px;display:block;margin:auto;filter:drop-shadow(0 4px 8px #000)}
.badge.off img{filter:grayscale(1) brightness(.5)}
.badge small{display:block;font:800 .75rem var(--f-head);letter-spacing:.08em;text-transform:uppercase}
.badge.bronze small{color:var(--bronze)} .badge.silber small{color:var(--silver)} .badge.gold small{color:var(--gold)}
.badge b{font:800 1.1rem var(--f-head)}
.lvl{display:flex;justify-content:space-between;font:700 .85rem var(--f-body);margin-bottom:5px}
.bar{height:10px;background:#05080c;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.bar>div{height:100%;background:linear-gradient(90deg,#5d8f00,var(--lime),#c6ff4f);border-radius:6px;box-shadow:0 0 10px #8cd60088;transition:width .6s}

/* Highscore */
.tabs{display:flex;background:#0b1118;border:1px solid var(--line);border-radius:6px;padding:2px;margin-bottom:10px}
.tabs button{flex:1;background:none;border:0;color:var(--muted);font:700 .82rem var(--f-body);padding:6px;border-radius:4px;cursor:pointer}
.tabs button.on{background:var(--panel3);color:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
.hs{list-style:none;margin:0;padding:0}
.hs li{display:flex;align-items:center;gap:9px;padding:6px 4px;border-bottom:1px solid #ffffff08;font-size:.9rem}
.hs .pos{flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:4px;font:800 .78rem var(--f-head);background:#1b2430;color:#cdd2d8}
.hs li:nth-child(1) .pos{background:var(--gold);color:#1d1300}.hs li:nth-child(2) .pos{background:var(--silver);color:#111}.hs li:nth-child(3) .pos{background:var(--bronze);color:#140a02}
.hs .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs li.me{background:#8cd60014;border-radius:6px;color:var(--lime)}
.hs-pane[hidden]{display:none}

/* Themen-Karten */
.topics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tcard .timg{aspect-ratio:16/8;background:#000 center/cover}
.tcard .body b{font:800 1rem var(--f-head);text-transform:uppercase;letter-spacing:.03em}

/* Streamer live */
.live-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.scard .simg{position:relative;aspect-ratio:16/8;background:#000 center/cover}
.scard .simg .tag{position:absolute;right:6px;top:6px}
.scard.featured{border:2px solid var(--lime);box-shadow:0 0 18px #8cd60033}
.scard .body{flex-direction:row;align-items:center;gap:9px}
.scard .body .who{min-width:0;flex:1}
.scard .body b,.scard .body small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plat{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;flex:0 0 auto}
.plat.twitch{background:#6e3bd6;color:#fff}.plat.youtube{background:#e02424;color:#fff}.plat.kick{background:#53fc18;color:#111}.plat.tiktok{background:#111;color:#fff;border:1px solid #333}.plat.other{background:#333;color:#fff}
.plat .ic{width:17px;height:17px}

/* Login-Box */
.loginbtns{display:flex;gap:10px;margin:6px 0 12px}
.loginbtns a{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;color:#fff}
.lb-twitch{background:#7b3fe4}.lb-yt{background:#e02424}.lb-mail{background:#2a7fd4}.lb-key{background:#3b4652}
.loginbtns a:hover{filter:brightness(1.15);transform:translateY(-2px)}
.loginbtns .ic{width:24px;height:24px}
.codeform{display:flex;gap:6px}
.codeform input{flex:1;min-width:0}

/* ---------- Listen / Tabellen ---------- */
.list{list-style:none;margin:0;padding:0}
.list li{padding:9px 4px;border-bottom:1px solid #ffffff0d}
.rank .pos{display:inline-block;width:28px;color:var(--gold);font-weight:800}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th,table.t td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t th{color:var(--gold2);font:700 .8rem var(--f-head);letter-spacing:.08em;text-transform:uppercase}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.tile{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--text)}
.tile b{font:800 1.4rem var(--f-head);color:var(--lime)}

/* ---------- Muenzen ---------- */
.money{display:inline-flex;gap:7px;align-items:center;font-weight:700;white-space:nowrap}
.m{display:inline-flex;align-items:center;gap:3px}
.m.g{color:#ffd54a}.m.s{color:#d4dce6}.m.c{color:#e49a62}
.coin{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid #0008;box-shadow:inset 0 -2px 2px #0005,inset 0 2px 2px #fff6}
.coin.g{background:radial-gradient(circle at 35% 30%,#fff3b0,#e0b020 60%,#9a7108)}
.coin.s{background:radial-gradient(circle at 35% 30%,#fff,#b8c2cf 60%,#76808c)}
.coin.c{background:radial-gradient(circle at 35% 30%,#ffd0aa,#c5703a 60%,#7b3f1a)}
.purse-big{font-size:1.5rem}
.coinpop{position:fixed;right:24px;top:80px;z-index:99;background:#000d;border:1px solid var(--lime);padding:9px 18px;border-radius:30px;font-weight:700;color:var(--lime);animation:pop 2.2s ease-out forwards}
@keyframes pop{0%{transform:translateY(20px) scale(.8);opacity:0}12%{opacity:1;transform:none}80%{opacity:1}100%{transform:translateY(-30px);opacity:0}}

/* ---------- Video-Seite ---------- */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.player{aspect-ratio:16/9;background:#000;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 30px #000}
.player iframe,#yt-frame{width:100%;height:100%;display:block;border:0}
.poster{height:100%;background:#000 center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative}
.poster::before{content:"";position:absolute;inset:0;background:#000a}
.poster>*{position:relative}
.prose{font-size:1.02rem;max-width:75ch}
.prose-wrap{max-width:860px;margin-left:auto;margin-right:auto}

/* ---------- Quiz ---------- */
.quiz{display:flex;flex-direction:column;gap:8px}
.quiz .q{font-weight:700;font-size:1.02rem}
.quiz .ans{display:grid;gap:7px}
.quiz .ans button{text-align:left;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line2);background:#0f151d;color:var(--text);font:inherit;cursor:pointer}
.quiz .ans button:hover{border-color:var(--lime)}
.quiz .ans button.right{border-color:var(--lime);background:#8cd60020}
.quiz .ans button.wrong{border-color:#a33;background:#3a1010}
.quiz.solved .ans button{pointer-events:none}
.quiz .res{font-size:.88rem}

/* ---------- Skiller ---------- */
.classbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.classbar a{padding:6px 14px;border:1px solid var(--cc);border-radius:20px;color:var(--cc);font-weight:700;background:var(--panel)}
.classbar a.on,.classbar a:hover{background:var(--cc);color:#111}
.skill-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.skill-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-color:var(--cc,var(--line))}
.skill-head #sk-class{color:var(--cc);font:800 1.3rem var(--f-head);text-transform:uppercase}
.trees{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:12px}
.tree{background:linear-gradient(180deg,#1a1410e6,#0c0a08f2),var(--treebg,none) center/cover;border:1px solid #3d2f19;border-radius:var(--r);padding:10px 12px}
.tree header{display:flex;align-items:center;gap:8px;border-bottom:1px solid #3d2f19;padding-bottom:6px;margin-bottom:8px;font:800 1.05rem var(--f-head);text-transform:uppercase}
.tree header .tp{margin-left:auto;background:#000;border:1px solid var(--gold-d);padding:0 10px;border-radius:12px;color:var(--gold2)}
.tree .note{margin:0 0 6px}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(var(--rows),62px);gap:6px;justify-items:center;align-items:center}
.tgrid.empty{display:block;min-height:60px}
.tal{position:relative;width:50px;height:50px;border-radius:8px;display:grid;place-items:center;cursor:pointer;user-select:none;
  background:radial-gradient(circle at 40% 30%,#3a3324,#0c0a07);border:2px solid #4b3f28;font:800 1.2rem var(--f-head);color:#8b7c5c}
.tal.locked{filter:grayscale(1) brightness(.5);cursor:not-allowed}
.tal.open{border-color:var(--lime);color:#dff5b8;box-shadow:0 0 10px #8cd60055}
.tal.has{border-color:var(--gold);color:#ffe08a}
.tal.max{border-color:#ffd54a;color:#fff;box-shadow:0 0 12px #ffd54a99}
.tal .rk{position:absolute;right:-6px;bottom:-6px;background:#000;border:1px solid var(--gold-d);font-size:.68rem;padding:0 5px;border-radius:8px;color:#fff}
.tal .minus{position:absolute;left:-7px;top:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--red);background:#2a0e0b;color:#fff;font-size:.9rem;line-height:1;padding:0;cursor:pointer}
.sk-tip{position:absolute;z-index:100;max-width:280px;background:#06090df2;border:1px solid var(--gold-d);padding:9px 12px;border-radius:6px;pointer-events:none;font-size:.88rem;box-shadow:0 10px 30px #000}
.sk-tip b{color:var(--gold2)} .sk-tip .w{color:#ff8a7a} .sk-tip .d{color:#c8f08a}
.builds .bitem{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:6px;margin-bottom:6px;background:#0d131a}
.builds .bitem .grow{flex:1;min-width:0}
.builds .bitem b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builds .bitem small{color:var(--muted)}
.builds .bitem button{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px}
.builds .bitem button:hover{color:#fff}

/* ---------- Rezepte ---------- */
.recipes{display:flex;flex-direction:column;gap:8px}
.rrow{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.rrow[hidden]{display:none}
.rrow .ri{flex:0 0 40px;height:40px;border-radius:6px;display:grid;place-items:center;font-size:1.3rem;background:#0b1118;border:1px solid var(--gold-d)}
.rrow .grow{flex:1;min-width:0}
.rrow b{display:block}
.rrow small{color:var(--muted);font-size:.8rem}
.rrow.done{opacity:.65}
.rrow.done b{text-decoration:line-through;text-decoration-color:var(--lime)}
.tog{background:none;border:1px solid var(--line2);border-radius:6px;color:var(--muted);cursor:pointer;padding:6px;display:grid;place-items:center}
.tog .ic{width:18px;height:18px}
.tog.on{color:var(--lime);border-color:var(--lime-d);background:#8cd60018}
.tog.fav.on{color:var(--gold);border-color:var(--gold-d);background:#e5b24a18}
.proflist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.proflist a{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:#d5d9de;font-weight:600}
.proflist a.on,.proflist a:hover{border-color:var(--lime);color:#fff}

/* ---------- Dungeon / BG ---------- */
.dhead{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center}
.dhead img{width:100%;border-radius:8px;border:1px solid var(--line2)}
.dtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:14px 0}
.dtabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:9px 14px;font:700 .95rem var(--f-head);text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.dtabs button.on{color:#fff;border-color:var(--lime)}
.dpane[hidden]{display:none}
.mapbox{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line2)}
.mapbox img{display:block;width:100%}
.mapbox .ph{position:absolute;inset:auto 8px 8px auto}
.placeholder-map{aspect-ratio:16/10;display:grid;place-items:center;text-align:center;border:1px dashed var(--line2);border-radius:8px;color:var(--muted);background:repeating-linear-gradient(45deg,#0d131a,#0d131a 12px,#101820 12px,#101820 24px)}
.diff{color:var(--gold)}
.checklist label{margin:6px 0}

/* ---------- Kalender ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font:700 .78rem var(--f-head);letter-spacing:.08em;color:var(--muted);text-align:center;padding:4px}
.cal .day{min-height:96px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px;font-size:.8rem;overflow:hidden}
.cal .day.out{opacity:.35}
.cal .day.today{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.cal .day .n{font-weight:700;color:var(--muted)}
.cal .ev{display:block;margin-top:3px;padding:2px 5px;border-radius:4px;background:#1c2633;color:#e6e9ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--lime)}
.ev.c-pvp{border-color:#e04848}.ev.c-dungeon{border-color:#3e8ed8}.ev.c-beruf{border-color:#e5b24a}.ev.c-livestream{border-color:#9b5cf5}.ev.c-offiziell{border-color:#fff}
.calnav{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.calnav b{font:800 1.3rem var(--f-head);text-transform:uppercase}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:18px 22px;color:var(--muted);font-size:.86rem}
footer p{margin:.3em 0}

/* ---------- Admin ---------- */
.adminnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.install{display:grid;place-items:center;min-height:100vh;padding:16px}
body.admin .wrap{max-width:1300px;margin:auto;padding:20px}

/* ---------- Responsive ---------- */
@media (max-width:1400px){
  .quick{grid-template-columns:repeat(4,minmax(0,1fr))}
  .topics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .live-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1200px){
  .home-grid{grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"guides rail" "events rail" "topics topics" "live live" "login login"}
  .hero{grid-template-columns:1.3fr 1fr}
  .hero-scroll{display:none}
  .topbar .userchip small{display:none}
}
@media (max-width:980px){
  :root{--side:0px}
  .side{transform:translateX(-100%);width:240px;transition:transform .2s;box-shadow:20px 0 40px #000}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:#0008;z-index:55}
  .burger{display:grid}
  .topnav{display:none}
  .search{flex:1 1 auto}
  .home-grid{grid-template-columns:1fr;grid-template-areas:"guides" "rail" "events" "topics" "live" "login"}
  .watch,.cols,.skill-layout,.dhead{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-person{display:none}
}
@media (max-width:640px){
  main.content{padding:14px 16px 30px}
  .topbar{padding:8px 16px;gap:8px}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topics,.live-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-text{padding:22px 18px}
  .hero-text .k1{font-size:1.8rem}.hero-text .k2{font-size:2.1rem}
  h1{font-size:1.7rem}
  .userchip>span:last-child{display:none}
  .cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
  .cal .day{min-height:54px;padding:3px}
  .cal .ev{font-size:0;height:6px;padding:0;border-left-width:0;background:var(--lime)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- Buff-Food & Schatzkammer ---------- */
.grid.food,.grid.shop{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card.food,.card.shopitem{flex-direction:row;align-items:center;gap:6px;padding:8px}
.ico{flex:0 0 54px;height:54px;display:grid;place-items:center;font-size:1.7rem;background:#05080c;border:1px solid var(--gold-d);border-radius:8px;box-shadow:inset 0 0 10px #e5b24a33}
.ico img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.buff{color:#bfe37a!important}
.card.tip .body b{font-size:1.02rem}

/* Feinschliff nach Screenshot-Vergleich */
.a-guides .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.topnav a{padding:8px 10px;font-size:.9rem}
.search{flex:0 1 210px}
.qcard small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
.qcard b{font-size:.9rem}
@media (max-width:1450px){.topnav a .ic{display:none}}
.side-lang{text-align:center;margin:-4px 0 8px}
.search{flex:0 1 190px}
@media (max-width:1200px){.a-guides .vgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
/* Kein horizontales Ueberlaufen auf kleinen Bildschirmen */
html,body{overflow-x:clip}
.app,main.content,.home-grid>*,.hero,.hero-text,.panel,.card{min-width:0}
.hero-text .sub{overflow-wrap:anywhere}
@media (max-width:980px){.app{width:100%}}

/* Hero: Foto von JakeeY + Ork */
.hero-person{position:relative}
.hero-photo{position:relative;z-index:2;max-height:300px;filter:drop-shadow(0 10px 30px #000)}
.hero-orc{position:absolute;z-index:1;right:-70px;bottom:0;max-height:250px!important;opacity:.95}
@media (max-width:1200px){.hero-orc{display:none}}

/* Offizielle Trailer */
.trailer-box{margin-bottom:16px}
.trailer-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.trailer-side{display:flex;flex-direction:column;gap:12px}
.trailer-side .vt b{font-size:.92rem}
@media (max-width:980px){.trailer-grid{grid-template-columns:1fr}}

/* Hero mit Gasthaus-Bild (JakeeY) */
.hero.hero-photo-bg{display:block;min-height:0;aspect-ratio:3/1;max-height:480px;width:100%}
.hero-photo-bg .hero-bg{position:absolute;inset:0;z-index:-2}
.hero-photo-bg .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;display:block}
.hero-photo-bg::after{background:linear-gradient(90deg,#05080cf2 0%,#05080cd0 22%,#05080c66 36%,#05080c00 48%),linear-gradient(0deg,#05080c99,transparent 30%)}
.hero-photo-bg .hero-text{position:relative;max-width:46%;height:100%;display:flex;flex-direction:column;justify-content:center}
@media (max-width:1300px){.hero-photo-bg .hero-text .k1{font-size:2rem}.hero-photo-bg .hero-text .k2{font-size:2.4rem}}
@media (max-width:980px){
  .hero.hero-photo-bg{aspect-ratio:auto;max-height:none}
  .hero-photo-bg .hero-bg{position:relative;display:block;aspect-ratio:3/1}
  .hero-photo-bg::after{display:none}
  .hero-photo-bg .hero-text{max-width:none;background:linear-gradient(180deg,#0d131a,#080b10)}
}

.hero-photo-bg .hero-text{align-items:flex-start}

/* Talentbaum: Symbole + Pfeile */
.tree header .ti{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#0008;border:1px solid var(--gold-d)}
.tree header .ti svg{width:20px;height:20px}
.tgrid{position:relative}
.tarrows{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
.tarrows path{fill:none;stroke:#4a5361;stroke-width:3;stroke-linecap:round}
.tarrows path.on{stroke:#ffd54a;filter:drop-shadow(0 0 3px #ffd54a99)}
.tal{z-index:1;--ic:#e5b24a;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--ic) 22%,#1a1410),#0a0806 75%);
  box-shadow:inset 0 0 0 1px #000,inset 0 2px 6px #ffffff14}
.tal .ic{display:grid;place-items:center}
.tal .ic svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px #000)}
.tal.locked .ic svg{opacity:.45}
.tal.open{border-color:var(--lime);box-shadow:0 0 10px #8cd60066,inset 0 0 0 1px #000}
.tal.has{border-color:var(--gold)}
.tal.max{border-color:#ffd54a;box-shadow:0 0 14px #ffd54aaa,inset 0 0 0 1px #000}
.tal:hover:not(.locked){transform:translateY(-1px);filter:brightness(1.15)}
.tal:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* Buff-Food-Uebersicht */
.fstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:16px}
.fstat{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--text);cursor:pointer;font:inherit}
.fstat .fi{grid-row:1/3;font-size:1.6rem;display:grid;place-items:center;background:#05080c;border:1px solid var(--gold-d);border-radius:8px;height:40px}
.fstat b{font:700 .95rem var(--f-head);color:#fff}
.fstat small{color:var(--muted);font-size:.78rem}
.fstat:hover{border-color:var(--gold-d)}
.fstat.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime) inset,0 0 14px #8cd60033}
.fbest{margin-bottom:16px}
.fbest-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.fbest-head h2{margin:0}
.fbest-head input{width:130px;margin-left:6px}
.fbest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.fpick{display:flex;gap:10px;align-items:center;text-align:left;background:#0b1118;border:1px solid var(--line2);border-radius:8px;padding:8px;color:var(--text);cursor:pointer;font:inherit}
.fpick:hover{border-color:var(--gold-d)}
.fpick .fi{font-size:1.4rem}
.fpick .ft{display:flex;flex-direction:column;min-width:0}
.fpick .ft small{color:var(--muted);font-size:.74rem}
.fpick .ft b{color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fview{margin:0;flex:0 0 auto}
.fview button{flex:0 0 auto;padding:6px 12px}
.grid.food.as-table{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grid.food.as-table .card.food{border-radius:0;border:0;border-bottom:1px solid var(--line);padding:4px 10px;box-shadow:none;background:var(--panel)}
.grid.food.as-table .card.food:nth-child(even){background:var(--panel2)}
.grid.food.as-table .ico{flex-basis:32px;height:32px;font-size:1.1rem}
.grid.food.as-table .body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 18px;flex:1}
.grid.food.as-table .body > b{flex:1 1 200px}
.grid.food.as-table .buff{display:none}
.fbest-head label{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.tag.on{color:var(--lime);border-color:var(--lime)}

/* Startseite ohne Konten (keine Belohnungs-Spalte) */
.home-grid.no-acc{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"guides events" "topics login" "live live"}
@media (max-width:1200px){.home-grid.no-acc{grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"guides events" "topics login" "live live"}}
@media (max-width:900px){.home-grid.no-acc{grid-template-columns:1fr;grid-template-areas:"guides" "events" "topics" "login" "live"}}

/* Original-Symbole im Talentbaum (wie im Spiel: Symbol im goldenen Rahmen) */
.tal{background:#0a0806;border:2px solid #4a3a1f;border-radius:6px;padding:0;overflow:visible}
.tal .ic{display:block;width:100%;height:100%;border-radius:4px;overflow:hidden}
.tal .ic img{width:100%;height:100%;display:block;object-fit:cover}
.tal.locked{filter:none;border-color:#2c2c2c}
.tal.locked .ic img{filter:grayscale(1) brightness(.42)}
.tal.open{border-color:#3fd15a;box-shadow:0 0 10px #3fd15a88}
.tal.has{border-color:#3fd15a;box-shadow:0 0 8px #3fd15a66}
.tal.max{border-color:#ffd54a;box-shadow:0 0 12px #ffd54aaa}
.tal .rk{right:-7px;bottom:-7px;background:#000;border:1px solid #ffd54a;color:#ffd54a;font-weight:700}
.tree header .ti{padding:0;overflow:hidden;width:34px;height:34px;border:2px solid var(--gold-d);border-radius:6px}
.tree header .ti img{width:100%;height:100%;display:block}

/* ---------- Berufe & Rezepte ---------- */
.gi{display:block;border-radius:5px;background:#000;object-fit:cover}
.q0,.q0 b{color:#9d9d9d}.q1{color:#fff}.q2{color:#1eff00}.q3{color:#4a9dff}.q4{color:#c06bff}.q5{color:#ff8000}
.prof-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:center;background:linear-gradient(120deg,#16110a,#0c1118 60%);border-color:var(--gold-d)}
.prof-hero h1{margin:6px 0}.prof-hero .lead{color:var(--text);max-width:60ch}
.statrow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.statrow div{background:#0008;border:1px solid var(--line2);border-radius:8px;padding:10px 12px}
.statrow b{display:block;font:800 1.7rem var(--f-head);color:var(--gold2)}.statrow span{font-size:.8rem;color:var(--muted)}
.subnav{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:0;z-index:5;background:#0a0e14ee;backdrop-filter:blur(6px);padding:8px 0;margin:10px 0}
.subnav a{padding:6px 12px;border:1px solid var(--line2);border-radius:20px;font:700 .82rem var(--f-body);color:var(--text)}
.subnav a:hover{border-color:var(--lime);color:var(--lime)}
.blk{margin:26px 0;scroll-margin-top:60px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.pcards.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pcard{padding:14px;flex-direction:column;gap:10px}
.pcard header{display:flex;gap:12px;align-items:center}
.pcard header h3{margin:0;font-size:1.15rem}.pcard header small{color:var(--muted)}.pcard header .tag{margin-left:auto}
.pcard ul{margin:0;padding-left:18px;color:var(--text);font-size:.9rem;display:flex;flex-direction:column;gap:5px}
.pcard .good{margin:0;font-size:.85rem;color:var(--muted)}
.pcard footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap}
.newc{color:#ffd54a}
.combos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.combo{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px}
.combo small{display:block;color:var(--muted)}.cicons{display:flex;align-items:center;gap:4px;color:var(--gold2)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.steps div{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px}
.steps b{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#10200a;font:800 1.1rem var(--f-head)}
.checklist-plain{color:var(--text);padding-left:20px;display:flex;flex-direction:column;gap:5px}
.perks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.perk{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px}
.perk b{color:var(--gold2)}.perk small.rank{display:block;color:var(--lime);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.perk span{font-size:.86rem}
.faq{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:700}.faq p{margin:8px 0 0;color:var(--muted)}
.rsearch{display:flex;gap:8px;flex-wrap:wrap}.rsearch input{flex:1;min-width:220px}
.ph1{display:flex;align-items:center;gap:12px;margin:0}
.tag.new{background:#3b2a00;border-color:#ffd54a;color:#ffd54a}.tag.src{margin-left:6px}
.rrow .ri{position:relative;flex:0 0 46px;height:46px;padding:0;border:2px solid currentColor;overflow:hidden;background:#000}
.rrow .ri .gi{width:100%;height:100%;border-radius:0}.rrow .ri i{position:absolute;right:2px;bottom:0;font:700 .72rem var(--f-body);color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;font-style:normal}
.rrow b{display:block}.skl{display:block}
.c-o{color:#ff8040}.c-y{color:#ffd100}.c-g{color:#4cd54c}.c-x{color:#9d9d9d}.skl span{font-weight:700}.skl .tag,.skl .muted{font-weight:400}
.reag{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px}
.rg{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:var(--text)}.rg .gi{width:28px;height:28px;border:1px solid #3a3a3a}
.rg span{color:var(--muted);font-weight:700}.rg:hover{text-decoration:underline}
.rrow[data-lv=lock]{opacity:.45}.rrow[data-lv=orange]{border-left:4px solid #ff8040}.rrow[data-lv=yellow]{border-left:4px solid #ffd100}.rrow[data-lv=green]{border-left:4px solid #4cd54c}.rrow[data-lv=grey]{border-left:4px solid #666;opacity:.7}
.flash-row{animation:flashrow 2s}@keyframes flashrow{0%,60%{box-shadow:0 0 0 3px #ffd54a}100%{box-shadow:none}}
.itemhead{display:flex;gap:16px;align-items:center}.bigicon{border:3px solid currentColor;border-radius:8px;overflow:hidden;width:70px;height:70px;display:block;flex:0 0 70px}.bigicon .gi{width:100%;height:100%}
.itemhead h1{margin:0}.rglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.rg.lg{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;gap:10px}.rg.lg small{display:block;margin-left:auto;text-align:right}.rg.lg span{color:inherit}
@media (max-width:800px){.prof-hero{grid-template-columns:1fr}.rrow{flex-wrap:wrap}}

/* Buff-Food mit Originalsymbolen */
.card.food .ico{border:2px solid #5c4a24;padding:0;overflow:hidden;background:#000;box-shadow:none}
.card.food .ico .gi{width:100%;height:100%;border-radius:0}
.card.food .body b a{color:inherit}.card.food .body b a:hover{color:var(--lime)}
.fstat .fi .gi,.fpick .fi .gi{border:1px solid var(--gold-d)}.fpick .fi img{border-radius:5px;border:1px solid var(--gold-d)}
.fstat .fi{border:0;background:none;padding:0}

/* ---------- Dungeons & Battlegrounds ---------- */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.dcard .dimg{height:140px;background-size:cover;background-position:center;position:relative}
.dcard .dimg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#000a)}
.dcard .lvl{position:absolute;left:10px;bottom:8px;z-index:1;font:800 1.15rem var(--f-head);color:#fff;text-shadow:0 1px 4px #000}
.dcard .guide{position:absolute;right:8px;top:8px;z-index:1}
.dcard .body{padding:10px 12px;display:flex;flex-direction:column;gap:4px}.dcard .meta{display:flex;gap:6px;flex-wrap:wrap}
.ctable{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px}
.crow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.crow b{flex:1 1 100%}.crow .lvl2{font:800 .95rem var(--f-head);color:var(--gold2)}.crow .fine{flex:1 1 100%}
.tag.side-a{border-color:#3b79d6;color:#8fb8ff}.tag.side-h{border-color:#c0392b;color:#ff8a7a}
.dhero .lead{max-width:80ch;margin:10px 0}.dhead img{border-radius:8px;border:1px solid var(--line2);object-fit:cover}
.tentry{padding:8px 0;border-top:1px solid var(--line)}.tentry:first-of-type{border-top:0}.tentry p{margin:4px 0 0;color:var(--muted)}
.boss{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}.boss:first-of-type{border-top:0}
.boss .bn{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2a1a0a;border:2px solid var(--gold-d);color:var(--gold2);font:800 1.05rem var(--f-head)}
.boss h3{margin:0 0 4px;font-size:1.1rem;color:var(--gold2)}.boss p{margin:0}.boss.secret .bn{background:#2a0a2a;border-color:#a335ee;color:#d9a6ff}
.qtable{display:flex;flex-direction:column;gap:6px}.qrow{display:flex;gap:12px;align-items:center;background:var(--panel2);border-radius:6px;padding:7px 12px}.qrow b{flex:1}
.h3s{margin:14px 0 8px;font-size:1rem;color:var(--muted)}

/* Kalender: Zeitraeume + Jetzt/Als Naechstes */
.cal .ev.span{border-left-width:3px;background:#1b2a16}.cal .ev.c-ingame{border-left-color:#ff8a3c;background:#2a1a0e}.cal .ev.c-pvp{border-left-color:#d24a4a;background:#2a1111}.cal .ev.c-offiziell{border-left-color:#8cd600}
.nowbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}.nowbox h3{margin:0 0 8px}
.nowitem{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line);color:var(--text)}.nowitem:first-of-type{border-top:0}.nowitem small{color:var(--muted);white-space:nowrap}

/* News */
.newsbox{margin-bottom:16px}
.newsgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:auto;gap:12px}
.newscard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.newscard.big{grid-row:span 2;background:linear-gradient(160deg,#17130a,var(--panel));border-color:var(--gold-d)}
.newscard h3{margin:0;font-size:1.02rem;line-height:1.25}.newscard.big h3{font-size:1.3rem}
.newscard p{margin:0;color:var(--muted);font-size:.88rem}.nmeta{display:flex;gap:8px;align-items:center;font-size:.76rem;color:var(--muted)}
.nmore{margin-top:auto;font-weight:700;font-size:.82rem}
.tag.nc-forever{border-color:var(--lime);color:var(--lime)}.tag.nc-event{border-color:#ff8a3c;color:#ff8a3c}.tag.nc-pvp{border-color:#d24a4a;color:#ff8a7a}.tag.nc-video{border-color:#c4302b;color:#ff8a8a}
@media (max-width:1100px){.newsgrid{grid-template-columns:1fr 1fr}.newscard.big{grid-row:auto;grid-column:span 2}}
@media (max-width:640px){.newsgrid{grid-template-columns:1fr}.newscard.big{grid-column:auto}}
.newslist{display:flex;flex-direction:column;gap:10px}
.newsrow{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text)}
.newsrow h3{margin:4px 0;font-size:1.1rem}.newsrow p{margin:0 0 6px;color:var(--muted)}
.newsrow .nthumb{flex:0 0 160px;height:90px;border-radius:8px;background-size:cover;background-position:center;position:relative;display:block}
.newsrow .nthumb .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:#0004;border-radius:8px}

.camp-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px;margin:12px 0}
.camprow{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px}.camprow small{display:block;color:var(--muted)}.camprow .gi{border:1px solid var(--gold-d)}

/* Guides */
.guide h2{margin:22px 0 8px;font-size:1.25rem;color:var(--gold2)}.guide p{margin:0 0 12px;line-height:1.65}.guide ul{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:6px;line-height:1.55}
.guide a{color:var(--lime);text-decoration:underline;text-underline-offset:2px}.prose-wrap .lead{font-size:1.05rem;color:var(--muted);max-width:70ch}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.gcard .body{padding:14px;display:flex;flex-direction:column;gap:8px;height:100%}.gcard b{font-size:1.08rem;line-height:1.3}.gcard small{color:var(--muted)}
.gmeta{display:flex;justify-content:space-between;align-items:center}.gcard:hover{border-color:var(--gold-d)}

/* Live-Buehne */
.stage-panel{padding:14px}
.stage-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.stage-bar .seg{display:flex;background:#0b1118;border:1px solid var(--line);border-radius:8px;padding:3px}
.stage-bar .seg button{background:none;border:0;color:var(--muted);font:700 .85rem var(--f-body);padding:8px 14px;border-radius:6px;cursor:pointer}
.stage-bar .seg button.on{background:var(--panel3);color:#fff;box-shadow:inset 0 0 0 1px var(--lime)}
.stage-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.stage-ctl .slider{display:flex;gap:6px;align-items:center;margin:0}.stage-ctl select{width:auto}
.stage-ctl[hidden],.stage-body [hidden]{display:none!important}
.stage-body{min-height:200px}
.consent{background:radial-gradient(circle at 50% 0,#1c1430,#0b1118);border:1px dashed #6b4fb3;border-radius:10px;padding:28px 20px;text-align:center}
.consent h3{margin:0 0 8px}.consent p{max-width:70ch;margin:0 auto 14px;color:var(--muted)}
.st-single{position:relative}.st-player{aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;max-height:70vh;width:100%}
.st-player iframe{width:100%;height:100%;border:0}
.st-now{margin:8px 0 0;font-weight:700;color:var(--gold2)}
.st-msg{padding:14px;text-align:center;color:var(--muted)}
.st-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.st-tile{background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden}.st-embed{aspect-ratio:16/9}.st-embed iframe{width:100%;height:100%;border:0}
.st-tile.offline{opacity:.55}.st-cap{display:flex;gap:8px;align-items:center;padding:6px 10px;background:var(--panel)}.st-cap b{flex:1}.stt.on{color:#ff4d4d;font-weight:700}.stt.off{color:var(--muted)}
.st-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#0b1118;border:1px solid var(--line2);border-radius:20px;color:var(--text);padding:6px 14px;font:700 .85rem var(--f-body);cursor:pointer}
.chip.sel{border-color:var(--lime);color:#fff;box-shadow:0 0 0 1px var(--lime) inset}.chip.off{opacity:.55}
.chip .dot{width:9px;height:9px;border-radius:50%;background:#555}.chip .dot.on{background:#ff3b3b;box-shadow:0 0 8px #ff3b3b}