/* blizzi1337.de - gleicher Stil wie bot.blizzi1337.de (Glas, Gold, Glut) */
:root{
  --bg:#0b0a0d; --text:#f1eadf; --leise:#aba190; --matt:#7c7365;
  --gold:#e3ad4f; --gold2:#f8d690; --glut:#f07a34; --gruen:#7ee2b0; --twitch:#9146ff;
  --glas:rgba(20,18,24,.5); --rand:rgba(255,236,210,.10); --rand2:rgba(255,236,210,.18);
  --breite:1160px;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:90px}
html,body{overflow-x:clip}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold2);text-underline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.15}
.huelle{width:100%;max-width:var(--breite);margin:0 auto;padding:0 22px}
.weg{display:none!important}

/* ---------- Hintergrund: Bild, Lichtwolken, Glut, Korn ---------- */
.welt{position:fixed;inset:0;z-index:-3;background:url(/assets/hintergrund.jpg) center 30%/cover no-repeat;transform:scale(1.08)}
.welt::after{content:"";position:absolute;inset:0;background:radial-gradient(85% 65% at 50% 0,rgba(11,10,13,.25),rgba(11,10,13,.82) 62%,var(--bg)),linear-gradient(180deg,transparent 35%,var(--bg))}
.nebel{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.nebel i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.nebel i:nth-child(1){left:-18vmax;top:-6vmax;background:radial-gradient(circle,rgba(240,122,52,.28),transparent 62%);animation:treibenA 42s ease-in-out infinite alternate}
.nebel i:nth-child(2){right:-22vmax;top:30vh;background:radial-gradient(circle,rgba(227,173,79,.2),transparent 62%);animation:treibenB 55s ease-in-out infinite alternate}
.nebel i:nth-child(3){left:25vw;bottom:-34vmax;background:radial-gradient(circle,rgba(150,70,40,.26),transparent 62%);animation:treibenA 64s ease-in-out infinite alternate-reverse}
@keyframes treibenA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,6vh) scale(1.12)}100%{transform:translate(-4vw,12vh) scale(.94)}}
@keyframes treibenB{0%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-10vw,-5vh) scale(.92)}100%{transform:translate(-3vw,8vh) scale(1.1)}}
#glut{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- Glas ---------- */
.glas{background:linear-gradient(160deg,rgba(255,240,220,.07),rgba(255,240,220,.015) 45%),var(--glas);border:1px solid var(--rand);border-radius:22px;
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 1px 0 rgba(255,248,235,.06) inset,0 30px 70px -30px #000}
.licht{position:relative}
.licht::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(246,211,142,.10),transparent 45%)}
@media (hover:hover){.licht:hover::after{opacity:1}}

/* ---------- Kopfleiste (laeuft mit) ---------- */
.kopf{position:sticky;top:12px;z-index:50;margin-top:12px}
.kopf .leiste{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:999px;transition:background .3s,border-color .3s,box-shadow .3s}
.kopf.fest .leiste{background:linear-gradient(160deg,rgba(255,240,220,.06),rgba(255,240,220,0) 50%),rgba(16,14,19,.86);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 1px 0 rgba(255,248,235,.07) inset,0 18px 40px -18px #000}
.kopf:not(.fest) .leiste{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.marke-name{display:flex;align-items:center;gap:10px;font-family:Cinzel,serif;font-weight:700;font-size:19px;color:var(--text);text-decoration:none;white-space:nowrap}
.marke-name svg{width:28px;height:28px;flex:none}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{color:var(--leise);text-decoration:none;font-size:14px;font-weight:500;padding:8px 13px;border-radius:999px;transition:color .2s,background .2s;white-space:nowrap}
.nav a:hover{color:var(--text);background:#ffffff0c}
.nav a.aktiv{color:var(--gold2);background:#e3ad4f14}
.menuknopf{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--rand2);background:#ffffff0d;color:var(--text);cursor:pointer;place-items:center;padding:0;margin-left:auto}
.menuknopf svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
@media (max-width:860px){
  .nav{display:none}
  .menuknopf{display:grid}
  .kopf .leiste{background:linear-gradient(160deg,rgba(255,240,220,.06),rgba(255,240,220,0) 50%),rgba(16,14,19,.86)!important;-webkit-backdrop-filter:blur(28px) saturate(170%)!important;backdrop-filter:blur(28px) saturate(170%)!important;border-color:var(--rand)!important}
  .kopf.offen .nav{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:8px;border-radius:20px;gap:2px;
    background:rgba(20,18,24,.92);border:1px solid var(--rand2);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 30px 60px -20px #000}
  .kopf.offen .nav a{padding:12px 16px;font-size:16px;border-radius:12px}
  .kopf .knopf.twitch{display:none}
}

/* ---------- Konto oben rechts ---------- */
.konto-knopf{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px;border:1px solid var(--rand2);background:#ffffff0a;color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}
.konto-knopf:hover{background:#ffffff14;border-color:#e3ad4f55}
.konto-knopf img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid #e3ad4f66;background:#1c1712}
.konto-knopf.abgemeldet{padding:8px 15px}
.konto-knopf.abgemeldet svg{width:16px;height:16px}
@media (max-width:860px){.konto-knopf{margin-left:auto}.konto-knopf span{display:none}.konto-knopf{padding:4px}.konto-knopf.abgemeldet{padding:8px 12px}.konto-knopf.abgemeldet span{display:inline}.kopf .menuknopf{margin-left:8px}}

/* Rolle im Kanal am Konto-Knopf */
.rolleMarke{font:700 10px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid;font-style:normal}
.rolleMarke.mod{color:#7ee2b0;border-color:#7ee2b066;background:#7ee2b014}
.rolleMarke.vip{color:#f59bdc;border-color:#f59bdc66;background:#f59bdc14}
.rolleMarke.kanal{color:#f8d690;border-color:#e3ad4f77;background:#e3ad4f18}
.rolle-mod img{box-shadow:0 0 0 2px #7ee2b0}
.rolle-vip img{box-shadow:0 0 0 2px #f59bdc}
.rolle-kanal img{box-shadow:0 0 0 2px #e3ad4f}
@media (max-width:860px){.rolleMarke{display:none}}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font:600 14.5px Inter,sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.knopf svg{width:17px;height:17px;flex:none}
.knopf:hover{transform:translateY(-1px)}
.knopf.haupt{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#21160a;box-shadow:0 10px 30px -10px #e3ad4f99,inset 0 1px 0 #fff6}
.knopf.glasig{background:#ffffff0c;border-color:var(--rand2);color:var(--text)}
.knopf.glasig:hover{background:#ffffff16}
.knopf.twitch{background:var(--twitch);color:#fff;box-shadow:0 10px 26px -10px #9146ffaa}
.knopf.klein{padding:8px 15px;font-size:13.5px}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Abschnitte ---------- */
main{flex:1}
.abschnitt{padding:84px 0 0}
.marke{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.marke::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.titel{font-family:Cinzel,serif;font-size:clamp(28px,3.4vw,40px);margin:12px 0 0}
.einleitung{color:var(--leise);max-width:640px;margin:12px 0 0}
.seitenkopf{padding:70px 0 0}
.seitenkopf h1{font-family:Cinzel,serif;font-size:clamp(36px,6vw,62px);line-height:1.05;margin:14px 0 0;
  background:linear-gradient(180deg,#fff4dc 20%,var(--gold2) 60%,#c98a34);-webkit-background-clip:text;background-clip:text;color:transparent}
.seitenkopf p{color:var(--leise);font-size:17.5px;max-width:640px;margin:16px 0 0}

/* ---------- Suche ---------- */
.suche{position:relative;max-width:520px}
.suche input{width:100%;padding:13px 16px 13px 44px;border-radius:14px;border:1px solid var(--rand2);background:rgba(10,8,6,.55);color:var(--text);font:inherit;font-size:15px;outline:none;transition:border-color .2s}
.suche input:focus{border-color:var(--gold)}
.suche svg{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);stroke:var(--matt);fill:none;stroke-width:2;pointer-events:none}

/* ---------- Klappkarten (Commands, Leaderboards) ---------- */
.klappe{margin-top:14px;overflow:hidden}
.klappe>button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:20px 24px;cursor:pointer}
.klappe>button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:22px}
.klappe>button h2{font-family:Cinzel,serif;font-size:clamp(19px,2.2vw,23px)}
.klappe>button .zahl{font:600 12.5px Inter,sans-serif;color:var(--gold2);border:1px solid var(--rand2);border-radius:999px;padding:2px 10px}
.klappe>button .pfeil{margin-left:auto;width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .35s}
.klappe.offen>button .pfeil{transform:rotate(180deg)}
.klappe .inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.klappe.offen .inhalt{grid-template-rows:1fr}
.klappe .inhalt>div{min-height:0;overflow:hidden}
.klappe .innen{border-top:1px solid var(--rand);padding:6px 0 10px}

/* ---------- Tabellen ---------- */
.tabelle-huelle{overflow-x:auto}
table.tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.tabelle th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--matt);padding:12px 18px;white-space:nowrap}
.tabelle td{padding:12px 18px;border-top:1px solid var(--rand);vertical-align:top}
.tabelle tbody tr{transition:background .2s}
.tabelle tbody tr:hover{background:#ffffff06}

/* ---------- Fuss ---------- */
footer{margin-top:90px;padding:26px 0 34px;border-top:1px solid var(--rand);font-size:13.5px;color:var(--matt)}
footer .huelle{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
footer a{color:var(--leise);text-decoration:none}
footer a:hover{color:var(--text)}
footer .rechts{margin-left:auto}

/* ---------- Nach oben ---------- */
.nachOben{position:fixed;right:20px;bottom:20px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--rand2);background:rgba(20,18,24,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s}
.nachOben.da{opacity:1;transform:none;pointer-events:auto}
.nachOben svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Einblenden ---------- */
.einblenden{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.einblenden.da{opacity:1;transform:none}

@media (max-width:600px){.abschnitt{padding-top:64px}footer .rechts{margin-left:0}}
/* ---------- Feinschliff ---------- */
/* Ueberschriften ohne einzelnes Wort in der letzten Zeile */
h1,h2,h3,.titel{text-wrap:balance}
p{text-wrap:pretty}
/* Zahlen gleich breit, damit Spalten und Zaehler nicht springen */
.tabelle,.zahl,.wert,.liste,.ruhm,.platz,.meta,.zeit,.rangzahl{font-variant-numeric:tabular-nums}
/* Weicher Seitenwechsel innerhalb der Seite; die Kopfleiste bleibt stehen */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
/* Platzhalter, solange Daten laden */
.skelett{position:relative;overflow:hidden;background:#ffffff08;border-radius:14px}
.skelett::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,236,210,.07),transparent);animation:schimmer 1.4s infinite}
@keyframes schimmer{to{transform:translateX(100%)}}
.skelett-zeile{height:14px;border-radius:7px;margin:8px 0}
/* Auf Touch-Geraeten groessere Trefferflaechen */
@media (pointer:coarse){.knopf.klein,.reiter a,.umschalter button,.nav a{min-height:42px}.knopf.klein{padding-top:10px;padding-bottom:10px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.einblenden{opacity:1;transform:none}@view-transition{navigation:none}}

/* ---------- Suche (Strg+K) ---------- */
.suchknopf{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 12px;margin-left:auto;margin-right:8px;border-radius:999px;border:1px solid var(--rand);background:#ffffff08;color:var(--leise);font-size:13px;transition:border-color .2s,color .2s}
.suchknopf:hover{border-color:var(--rand2);color:var(--text)}
.suchknopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.suchknopf + .konto-knopf{margin-left:0}
kbd{font:600 11px Inter,sans-serif;padding:2px 6px;border-radius:6px;border:1px solid var(--rand2);background:#ffffff0a;color:var(--matt)}
@media (max-width:860px){.suchknopf kbd{display:none}.suchknopf{padding:0 11px;margin-right:6px}}
.palette{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:12vh 14px 14px;background:rgba(6,5,4,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.palette.an{opacity:1;visibility:visible}
.palette-innen{width:min(620px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--rand2);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,240,220,.07),rgba(255,240,220,0) 45%),rgba(18,15,12,.94);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 40px 100px -30px #000;transform:translateY(-10px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.palette.an .palette-innen{transform:none}
.palette-feld{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rand)}
.palette-feld svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;flex:none}
.palette-feld input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:inherit;font-size:16px}
.palette-feld input::-webkit-search-cancel-button{display:none}
.palette-liste{overflow:auto;padding:6px}
.palette-eintrag{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;color:var(--text);text-decoration:none}
.palette-eintrag em{flex:none;width:92px;font:600 10.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--matt)}
.palette-eintrag span{min-width:0}
.palette-eintrag b{display:block;font-weight:600;font-size:14.5px}
.palette-eintrag small{display:block;font-size:12.5px;color:var(--matt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-eintrag.aktiv,.palette-eintrag:hover{background:#e3ad4f1a}
.palette-eintrag.aktiv b{color:var(--gold2)}
.palette-leer{color:var(--matt);text-align:center;padding:26px 0;margin:0}
.palette-fuss{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--rand);font-size:12px;color:var(--matt)}
.palette-fuss kbd{margin-right:3px}
@media (max-width:640px){.palette{padding-top:70px}.palette-fuss{display:none}.palette-eintrag em{width:70px}}


/* ---------- Dialog (bbFrage) ---------- */
.dlg{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,5,4,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.dlg.an{opacity:1;visibility:visible}
.dlg-box{width:min(430px,100%);padding:24px 24px 20px;border-radius:20px;border:1px solid var(--rand2);
  background:linear-gradient(160deg,rgba(255,240,220,.08),rgba(255,240,220,0) 45%),rgba(18,15,12,.95);box-shadow:0 40px 100px -30px #000;
  transform:translateY(8px) scale(.97);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.dlg.an .dlg-box{transform:none}
.dlg-box h3{font:700 19px Cinzel,serif;margin:0 0 8px}
.dlg-box p{margin:0;color:var(--leise);font-size:14.5px;line-height:1.5}
.dlg-box .feldx{margin-top:14px}
.dlg-fehler{min-height:18px;margin-top:6px;font-size:12.5px;color:#ff9a8f}
.dlg-box .aktionen{margin-top:14px}
.dlg.gefahr h3{color:#ffb3ab}
.dlg-box p{white-space:pre-line}
.dlg-box input{width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--rand2);background:rgba(10,8,6,.6);color:var(--text);font:inherit;font-size:14.5px;outline:none}
.dlg-box input:focus{border-color:var(--gold)}
.dlg-box .knopf.gefahr{background:#ff6b6b18;border-color:#ff9a8f66;color:#ffb3ab}
.dlg-box .weg{display:none}

/* ---------- Reiter zwischen Steuerung und Chat ---------- */
.seitenreiter{display:inline-flex;gap:4px;margin-top:22px;padding:4px;border-radius:999px;border:1px solid var(--rand);background:#ffffff06}
.seitenreiter a{font-size:13.5px;font-weight:600;color:var(--leise);text-decoration:none;padding:7px 16px;border-radius:999px;transition:color .2s,background .2s}
.seitenreiter a:hover{color:var(--text)}
.seitenreiter a.aktiv{color:#21160a;background:linear-gradient(180deg,var(--gold2),var(--gold))}

/* Zahlenfelder ohne die Browser-Pfeile */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Textfelder: kein Ziehgriff - sie wachsen mit dem Text (field-sizing; aeltere Browser: seite.js),
   bis zu einer Hoehe, danach schmaler Rollbalken im Stil der Seite */
textarea{resize:none;field-sizing:content;max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rand2) transparent}
textarea::-webkit-scrollbar{width:8px}
textarea::-webkit-scrollbar-thumb{background:var(--rand2);border-radius:8px}
textarea::-webkit-scrollbar-button{display:none}

/* Gleiche, klar getrennte Aktionen in allen Bestaetigungsdialogen. */
.dlg-box .aktionen{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px}
.dlg-box .aktionen .knopf{min-height:40px;justify-content:center;text-align:center;white-space:normal}
.dlg-box .aktionen .knopf:last-child{margin-left:auto}
@media(max-width:480px){.dlg-box .aktionen{flex-direction:column;align-items:stretch;gap:10px}.dlg-box .aktionen .knopf{width:100%}.dlg-box .aktionen .knopf:last-child{margin-left:0}}