/* Gemeinsame Kopfleiste fuer blizzi1337.de und bot.blizzi1337.de (assets/kopf.js).











   Eigene Namen (bbk-) und eigene Farben - so sieht sie auf jeder Seite gleich aus,











   egal welches Stylesheet die Seite sonst hat. */











.bbk{--bbk-gold:#e3ad4f;--bbk-gold2:#f8d690;--bbk-text:#f3ece2;--bbk-leise:#b9ae9f;--bbk-matt:#8a8072;--bbk-rand:rgba(255,236,210,.10);--bbk-rand2:rgba(255,236,210,.18);











  position:sticky;top:12px;z-index:90;width:min(1180px,calc(100% - 32px));margin:12px auto 0;min-height:60px;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--bbk-text)}











.bbk *{box-sizing:border-box}











.bbk-leiste{display:flex;align-items:center;gap:6px;min-height:60px;padding:8px 10px 8px 18px;border-radius:999px;border:1px solid var(--bbk-rand);











  background:linear-gradient(160deg,rgba(255,240,220,.06),rgba(255,240,220,0) 50%),rgba(16,14,19,.88);











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











.bbk a{color:inherit;text-decoration:none}











.bbk button{font:inherit;color:inherit}























/* Marke */











.bbk-marke{display:flex;align-items:center;gap:10px;margin-right:14px;font:700 18px Cinzel,Georgia,serif;letter-spacing:.02em;white-space:nowrap}











.bbk-marke svg,.bbk-marke .bbk-logo{width:28px;height:28px;flex:none}























/* Hauptmenue mit Aufklappern */











.bbk-nav{display:flex;align-items:center;gap:2px}











.bbk-gruppe{position:relative}











.bbk-ober{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;font-size:14px;font-weight:500;color:var(--bbk-leise);transition:color .2s,background .2s}











.bbk-ober svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .25s}











.bbk-gruppe:hover .bbk-ober,.bbk-gruppe.offen .bbk-ober,.bbk-ober:focus-visible{color:var(--bbk-text);background:#ffffff0c}











.bbk-gruppe.offen .bbk-ober svg{transform:rotate(180deg)}











.bbk-gruppe.aktiv .bbk-ober{color:var(--bbk-gold2)}











.bbk-gruppe.aktiv .bbk-ober::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--bbk-gold);box-shadow:0 0 8px #e3ad4f33}











.bbk-menue{position:absolute;top:calc(100% + 10px);left:-8px;min-width:310px;padding:8px;border-radius:18px;border:1px solid var(--bbk-rand2);











  background:linear-gradient(160deg,rgba(255,240,220,.07),rgba(255,240,220,0) 45%),rgba(18,15,12,.96);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);











  box-shadow:0 30px 70px -24px #000;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}











/* Bruecke ueber die Luecke, damit das Menue beim Hinbewegen offen bleibt */











.bbk-menue::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}











.bbk-gruppe.offen .bbk-menue{opacity:1;visibility:visible;transform:none}











.bbk-menue.rechts{left:auto;right:-8px}











.bbk-punkt{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;transition:background .15s}











.bbk-punkt:focus-visible{background:#e3ad4f14;outline:none}











.bbk-punkt.hier{background:#e3ad4f10}











.bbk-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--bbk-rand2);background:#ffffff06;color:var(--bbk-gold)}











.bbk-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}











.bbk-punkt b{display:block;font-size:14px;font-weight:600;color:var(--bbk-text)}











.bbk-punkt.hier b{color:var(--bbk-gold2)}











.bbk-punkt small{display:block;margin-top:1px;font-size:12.5px;line-height:1.35;color:var(--bbk-matt)}











.bbk-punkt .raus{margin-left:4px;font-size:11px;color:var(--bbk-matt)}











.bbk-trenn{height:1px;margin:6px 10px;background:var(--bbk-rand)}























/* Rechte Seite: Suche, Konto, Menue */











.bbk-rechts{display:flex;align-items:center;gap:8px;margin-left:auto}











.bbk-suche{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 13px;border-radius:999px;border:1px solid var(--bbk-rand);background:#ffffff08;color:var(--bbk-leise);font-size:13px;transition:border-color .2s,color .2s}











.bbk-suche:hover{border-color:var(--bbk-rand2);color:var(--bbk-text)}











.bbk-suche svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}











.bbk kbd,.bbk-palette kbd{font:600 11px Inter,system-ui,sans-serif;padding:2px 6px;border-radius:6px;border:1px solid var(--bbk-rand2);background:#ffffff0a;color:var(--bbk-matt)}











.bbk-konto{position:relative}











.bbk-kontoknopf{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 14px 0 5px;border-radius:999px;border:1px solid var(--bbk-rand2);background:#ffffff0a;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}











.bbk-kontoknopf:hover,.bbk-konto.offen .bbk-kontoknopf{background:#ffffff14;border-color:#e3ad4f55}











.bbk-kontoknopf img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid #e3ad4f66;background:#1c1712}











.bbk-kontoknopf.bbk-gast{padding:0 16px}











.bbk-kontoknopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}











.bbk-rolle{font:700 9.5px Inter,system-ui,sans-serif;letter-spacing:.06em;border-radius:6px;padding:1px 5px;border:1px solid}











.bbk-rolle.mod{color:#7ee2b0;border-color:#7ee2b055}











.bbk-rolle.vip{color:#f0a3ff;border-color:#f0a3ff55}











.bbk-rolle.kanal{color:var(--bbk-gold2);border-color:#e3ad4f66}











.bbk-konto .bbk-menue{min-width:270px}











.bbk-konto.offen .bbk-menue{opacity:1;visibility:visible;transform:none}











.bbk-menuknopf{all:unset;box-sizing:border-box;cursor:pointer;display:none;width:42px;height:42px;border-radius:50%;place-items:center;border:1px solid var(--bbk-rand2);background:#ffffff08}











.bbk-menuknopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}























/* Zweite Zeile: Abschnitte der aktuellen Seite (z. B. beim Quiz) */











.bbk-unter{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;width:max-content;max-width:100%;margin:8px auto 0;padding:4px;border-radius:999px;border:1px solid var(--bbk-rand);











  background:rgba(16,14,19,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}











.bbk-unter a{padding:6px 13px;border-radius:999px;font-size:13px;font-weight:500;color:var(--bbk-leise);transition:color .2s,background .2s}











.bbk-unter a:hover{color:var(--bbk-text);background:#ffffff0c}











.bbk-unter a.hier{color:#21160a;background:linear-gradient(180deg,var(--bbk-gold2),var(--bbk-gold))}























/* Handy/Tablet: Menue als Klapptafel */











.bbk-tafel{display:none}











@media (max-width:980px){











  .bbk-nav{display:none}











  .bbk-menuknopf{display:grid}











  .bbk-suche kbd{display:none}











  .bbk-suche{padding:0 12px}











  .bbk-kontoknopf span{display:none}











  .bbk-kontoknopf{padding:0 5px}











  .bbk-kontoknopf.bbk-gast span{display:inline}











  .bbk-kontoknopf.bbk-gast{padding:0 14px}











  .bbk-tafel{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:calc(100vh - 100px);overflow:auto;padding:10px;border-radius:22px;border:1px solid var(--bbk-rand2);











    background:rgba(18,15,12,.97);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);box-shadow:0 30px 70px -24px #000}











  .bbk.tafel .bbk-tafel{display:block}











  .bbk-tafel h4{margin:12px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bbk-matt)}











  .bbk-tafel h4:first-child{margin-top:4px}











  .bbk-unter{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;width:auto}











  .bbk-unter a{white-space:nowrap}











}











@media (max-width:520px){











  .bbk{width:calc(100% - 20px);top:8px;margin-top:8px}











  .bbk-leiste{padding:6px 6px 6px 14px}











  .bbk-marke{font-size:16px;margin-right:4px}











  .bbk-marke svg,.bbk-marke .bbk-logo{width:24px;height:24px}











  .bbk-konto .bbk-menue{right:-48px}











}











@media (pointer:coarse){.bbk-punkt{padding:12px}}























/* Suche (Strg+K) */











.bbk-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;font-family:Inter,system-ui,sans-serif;color:#f3ece2}











.bbk-palette.an{opacity:1;visibility:visible}











.bbk-palette-innen{width:min(620px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:20px;border:1px solid rgba(255,236,210,.18);overflow:hidden;











  background:linear-gradient(160deg,rgba(255,240,220,.07),rgba(255,240,220,0) 45%),rgba(18,15,12,.95);box-shadow:0 40px 100px -30px #000;transform:translateY(-10px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)}











.bbk-palette.an .bbk-palette-innen{transform:none}











.bbk-palette-feld{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,236,210,.10)}











.bbk-palette-feld svg{width:18px;height:18px;fill:none;stroke:#e3ad4f;stroke-width:2;stroke-linecap:round;flex:none}











.bbk-palette-feld input{flex:1;min-width:0;background:none;border:0;outline:none;color:#f3ece2;font:inherit;font-size:16px}











.bbk-palette-feld input::-webkit-search-cancel-button{display:none}











.bbk-palette-liste{overflow:auto;padding:6px}











.bbk-palette-eintrag{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;color:#f3ece2;text-decoration:none}











.bbk-palette-eintrag em{flex:none;width:92px;font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#8a8072}











.bbk-palette-eintrag span{min-width:0}











.bbk-palette-eintrag b{display:block;font-weight:600;font-size:14.5px}











.bbk-palette-eintrag small{display:block;font-size:12.5px;color:#8a8072;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}











.bbk-palette-eintrag.aktiv,.bbk-palette-eintrag:hover{background:#e3ad4f1a}











.bbk-palette-eintrag.aktiv b{color:#f8d690}











.bbk-palette-leer{color:#8a8072;text-align:center;padding:26px 0;margin:0}











.bbk-palette-fuss{display:flex;gap:18px;padding:10px 18px;border-top:1px solid rgba(255,236,210,.10);font-size:12px;color:#8a8072}











.bbk-palette-fuss kbd{margin-right:3px}











@media (max-width:640px){.bbk-palette{padding-top:70px}.bbk-palette-fuss{display:none}.bbk-palette-eintrag em{width:70px}}























/* Schutz gegen allgemeine Regeln der Seiten (nav{…}, a{…}, header{…}) */











.bbk,.bbk .bbk-nav,.bbk .bbk-unter{transform:none;left:auto;right:auto}











.bbk .bbk-nav{position:static;width:auto;padding:0;margin:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}











.bbk .bbk-unter{position:relative;top:auto;z-index:1}











.bbk a,.bbk a:hover{color:inherit;text-decoration:none}











.bbk .bbk-punkt b{color:var(--bbk-text)}











.bbk .bbk-punkt.hier b{color:var(--bbk-gold2)}











.bbk .bbk-unter a.hier{color:#21160a}











.bbk .bbk-gruppe.aktiv .bbk-ober{color:var(--bbk-gold2)}











.bbk-palette a,.bbk-palette a:hover{color:#f3ece2;text-decoration:none}























/* Schmale Handys: nur Symbole rechts, damit alles in eine Zeile passt */











@media (max-width:520px){











  .bbk-rechts{gap:6px}











  .bbk .bbk-kontoknopf.bbk-gast span{display:none}











  .bbk .bbk-kontoknopf.bbk-gast{width:40px;height:40px;padding:0;justify-content:center}











  .bbk-kontoknopf{height:40px}











  .bbk-kontoknopf img{width:30px;height:30px}











  .bbk-kontoknopf .bbk-rolle{display:none}











  .bbk-suche{width:40px;height:40px;padding:0;justify-content:center}











  .bbk-menuknopf{width:40px;height:40px}











}











@media (max-width:360px){.bbk-marke{font-size:0;gap:0}.bbk-marke svg,.bbk-marke .bbk-logo{width:28px;height:28px}}























/* Aufgeklappte Menues liegen immer ueber der Abschnittszeile darunter */











.bbk .bbk-leiste{position:relative;z-index:2}



































/* ---------- Uebergaenge ----------











   Innerhalb einer Domain: Seiten blenden ineinander, die Leiste bleibt stehen (View Transitions).











   Zwischen blizzi1337.de und bot.blizzi1337.de geht das technisch nicht - dort blendet











   der Inhalt kurz aus und auf der neuen Seite wieder ein, die Leiste bleibt gleich. */











@view-transition{navigation:auto}











.bbk{view-transition-name:bbk-kopf}











::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}











html.bbk-geht body>*:not(.bbk):not(.welt):not(.bbk-szene):not(.nebel):not(canvas):not(.korn){opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}











html.bbk-rein body>*:not(.bbk):not(.welt):not(.bbk-szene):not(.nebel):not(canvas):not(.korn):not(.bbk-palette):not(.dlg){animation:bbkRein .5s cubic-bezier(.2,.8,.2,1) both}











@keyframes bbkRein{from{opacity:0;transform:translateY(10px)}}











@media (prefers-reduced-motion:reduce){html.bbk-geht body>*,html.bbk-rein body>*{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}@view-transition{navigation:none}}



































/* ---------- Ein Hintergrund fuer alle Seiten (beide Domains) ----------











   Gleiches Bild, gleicher Ausschnitt, gleiche Abdunklung - beim Wechsel bleibt er











   einfach stehen. Bei Uebergaengen innerhalb einer Domain wird er nicht mit ueberblendet. */











/* Lage und Zoom fuer alle Seiten gleich (sonst springt das Bild beim Domainwechsel).











   Szene beim Scrollen: kopf.js setzt --bbk-p (0 = oben, 1 = unten, mit etwas Traegheit).











   Ueber die GANZE Seite geht es tiefer in den Wald: das Bild (hoeher als der Bildschirm)











   wandert nach oben und zoomt langsam heran, das Licht von oben verblasst, Nebel zieht











   auf, es wird kuehler und dunkler, und ganz unten glimmt Glut. Nur transform/opacity -











   der Browser muss nichts neu zeichnen. */











.welt{position:fixed!important;inset:-4vh 0 -28vh 0!important;z-index:-3!important;background:#0b0a0d url(https://blizzi1337.de/assets/hintergrund.jpg) center 30%/cover no-repeat!important;filter:none!important;











  transform:translate3d(0,calc(var(--bbk-p,0) * -24vh),0) scale(calc(1.06 + var(--bbk-p,0) * .12))!important;transform-origin:50% 30%;will-change:transform;view-transition-name:bbk-welt}











.welt::after{content:none!important}











.nebel{display:none!important}   /* alte Nebel der Seiten - steckt jetzt in .bbk-szene */











.bbk-szene{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;view-transition-name:bbk-szene}











.bbk-szene i{position:absolute;display:block;will-change:transform,opacity}











/* Abdunklung, damit Text lesbar bleibt (vorher .welt::after) */











.bbk-rand{inset:0;background:radial-gradient(90% 75% at 50% 0,rgba(11,10,13,.2),rgba(11,10,13,.7) 65%,rgba(11,10,13,.9)),linear-gradient(180deg,transparent 45%,rgba(11,10,13,.75))}











/* tiefer = kuehler und dunkler */











.bbk-kalt{inset:0;background:linear-gradient(180deg,rgba(8,16,26,.35),rgba(6,10,18,.75));opacity:calc(var(--bbk-p,0) * .9)}











/* Nebelbaenke, ziehen unterschiedlich schnell (Tiefe) */











.bbk-nebel1{width:95vmax;height:55vmax;left:-30vmax;top:40vh;border-radius:50%;background:radial-gradient(closest-side,rgba(90,160,175,.3),transparent);filter:blur(30px);mix-blend-mode:screen;











  opacity:calc(.25 + var(--bbk-p,0) * .75);transform:translate3d(calc(var(--bbk-p,0) * 28vw),calc(var(--bbk-p,0) * -45vh),0)}











.bbk-nebel2{width:85vmax;height:50vmax;right:-35vmax;top:75vh;border-radius:50%;background:radial-gradient(closest-side,rgba(70,130,160,.28),transparent);filter:blur(30px);mix-blend-mode:screen;











  opacity:calc(var(--bbk-p,0) * 1.2);transform:translate3d(calc(var(--bbk-p,0) * -26vw),calc(var(--bbk-p,0) * -75vh),0)}











/* warmes Licht von oben links - verblasst beim Abstieg */











.bbk-strahlen{left:-15vw;top:-25vh;width:90vw;height:120vh;transform-origin:20% 0;











  background:conic-gradient(from 145deg at 20% 0,transparent 0deg,rgba(255,206,140,.26) 8deg,transparent 15deg,rgba(255,206,140,.18) 22deg,transparent 30deg,rgba(255,214,150,.24) 38deg,transparent 47deg,rgba(255,206,140,.14) 55deg,transparent 64deg);











  -webkit-mask-image:radial-gradient(75% 85% at 20% 0,#000 20%,transparent 75%);mask-image:radial-gradient(75% 85% at 20% 0,#000 20%,transparent 75%);filter:blur(8px);mix-blend-mode:screen;











  opacity:calc(1 - var(--bbk-p,0) * 1.6);transform:rotate(calc(var(--bbk-p,0) * 8deg)) translate3d(0,calc(var(--bbk-p,0) * -12vh),0)}











/* Glut steigt von unten auf */











.bbk-glutlicht{left:-20vw;right:-20vw;bottom:-8vh;height:70vh;background:radial-gradient(60% 65% at 50% 100%,rgba(255,130,55,.55),rgba(170,65,30,.22) 50%,transparent 78%);mix-blend-mode:screen;











  opacity:calc(var(--bbk-p,0) * var(--bbk-p,0));transform:translate3d(0,calc((1 - var(--bbk-p,0)) * 30vh),0)}











@media (prefers-reduced-motion:reduce){.welt,.bbk-szene i{transition:none!important}}











::view-transition-group(bbk-welt),::view-transition-group(bbk-szene){animation-duration:.28s}























@media(min-width:981px) and (max-width:1150px){.bbk-ober{padding-left:8px;padding-right:8px}.bbk-suche kbd{display:none}.bbk-marke{margin-right:4px}.bbk-kontoknopf span{display:none}.bbk-kontoknopf{padding-right:5px}}











@media(max-width:620px){.bbk-leiste{flex-wrap:wrap;border-radius:24px}}























.bbk-marke .bbk-logo{object-fit:contain}























/* Profilkarte: klare Identitaet und direkte Kontozugaenge. */











.bbk-konto .bbk-charakter{width:350px;min-width:0;max-width:calc(100vw - 32px);padding:0;overflow:hidden;border-radius:20px;transform-origin:top right;background:radial-gradient(ellipse at 0 20%,#27464e66,transparent 70%),#121217fa;transition:opacity .22s,transform .22s,visibility .22s}











.bbk-charakter-kopf{display:flex;justify-content:space-between;padding:12px 17px;border-bottom:1px solid #ffffff0a;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--bbk-matt)}











.bbk-charakter-kopf b{color:var(--bbk-gold2)}











.bbk-charakter-person{display:flex;align-items:center;gap:13px;padding:20px 17px 16px;min-width:0}











.bbk-charakter-person>img{width:64px;height:64px;object-fit:cover;border:1px solid #e3ad4f33;border-radius:17px;background:#ffffff05}











.bbk-charakter-person>div{min-width:0;flex:1}.bbk-charakter-person strong{display:block;font:700 21px Cinzel,Georgia,serif;overflow-wrap:anywhere;line-height:1.2;color:var(--bbk-text)}











.bbk-charakter-person small{display:block;margin-top:7px;font-size:11px;color:var(--bbk-leise)}











.bbk-charakter-person .bbk-charakter-siegel{width:36px;height:36px;object-fit:contain;border:0;border-radius:0;background:none}











.bbk-charakter-info{display:grid;grid-template-columns:1fr 1fr;margin:0 17px 14px;background:#ffffff04;border-radius:12px}











.bbk-charakter-info>div{padding:11px 13px}.bbk-charakter-info>div+div{border-left:1px solid #ffffff08}











.bbk-charakter-info small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--bbk-matt);margin-bottom:5px}.bbk-charakter-info b{font-size:12px;font-weight:600;color:var(--bbk-gold2)}











.bbk-charakter-aktionen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:0 17px 17px}











.bbk-charakter-aktionen>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 4px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff03;transition:transform .18s,background .18s,border-color .18s}











.bbk-charakter-aktionen .bbk-ico{border:0;background:none;width:22px;height:22px}.bbk-charakter-aktionen b{font-size:11px;font-weight:500;white-space:nowrap}











.bbk-charakter-aktionen>a:focus-visible{transform:none;background:#e3ad4f0d;border-color:#e3ad4f55;outline:none}











.bbk-charakter-abmelden .bbk-ico{color:#e89c8e}











.bbk-kontoknopf{transition:background .2s,border-color .2s,box-shadow .2s}.bbk-konto.offen .bbk-kontoknopf{box-shadow:0 0 0 3px #e3ad4f0c}











.bbk-gruppe .bbk-punkt{transition:background .18s,transform .18s}











@media(max-width:620px){.bbk-konto{position:static}.bbk-konto .bbk-charakter{right:6px;top:calc(100% + 8px);max-width:calc(100vw - 32px);max-height:calc(100dvh - 170px);overflow:auto}.bbk-charakter-person{padding-top:16px}}











@media(prefers-reduced-motion:reduce){.bbk .bbk-menue,.bbk .bbk-punkt,.bbk .bbk-kontoknopf,.bbk-charakter-aktionen>a{transition:none!important}.bbk-charakter-aktionen>a:hover,.bbk-gruppe .bbk-punkt:hover{transform:none}}























/* Aktuell gehaltene Wanderpokale in der Kontokarte. */











.bbk .bbk-pokallink{display:block;padding:12px 16px;color:var(--bbk-gold2);font-size:12px;border-top:1px solid var(--bbk-rand)}











.bbk-pokale-icons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}











.bbk-pokale-icons img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 5px #e3ad4f33)}























/* Gemeinsame Kopfkomponente, auf breiten Fenstern im rechten Browserrand. */


































/* Scrollleiste der globalen Suche */











.bbk-palette-liste{scrollbar-width:thin;scrollbar-color:#8e7044 #171310;scrollbar-gutter:stable}











.bbk-palette-liste::-webkit-scrollbar{width:8px;height:8px}











.bbk-palette-liste::-webkit-scrollbar-track{background:#171310;border-radius:10px}











.bbk-palette-liste::-webkit-scrollbar-thumb{background:#8e7044;border:2px solid #171310;border-radius:999px}











.bbk-palette-liste::-webkit-scrollbar-thumb:hover{background:#c79b58}











.bbk-palette-liste::-webkit-scrollbar-button{display:none;width:0;height:0}











.bbk-palette-liste::-webkit-scrollbar-corner{background:#171310}























/* Gemeinsamer Footer fuer Hauptseite, Tools und Bot-Seiten. */











footer.bbk-fuss{box-sizing:border-box;width:100%;max-width:none;margin:70px 0 0;padding:26px 0;border:0;border-top:1px solid var(--rand,rgba(255,236,210,.1));background:none;color:var(--matt,#7c7365);font:12.5px/1.7 Inter,system-ui,sans-serif}











.bbk-fuss .bbk-fuss-innen{box-sizing:border-box;width:100%;max-width:1160px;margin:0 auto;padding:0 22px;display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}











.bbk-fuss nav{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}











.bbk-fuss a{color:var(--leise,#aba190);font-size:inherit;font-weight:400;text-decoration:none;overflow-wrap:anywhere}











.bbk-fuss a:hover{color:var(--gold2,#f8d690);text-decoration:underline}











.bbk-fuss .bbk-fuss-recht{margin-left:auto;flex:1 1 280px;max-width:460px;color:var(--matt,#7c7365)}











@media(max-width:640px){.bbk-fuss .bbk-fuss-innen{gap:12px}.bbk-fuss nav{width:100%;gap:8px 16px}.bbk-fuss .bbk-fuss-recht{flex-basis:100%;max-width:none;margin-left:0}}























/* Aktuelle Position bleibt gold; Tastaturfokus bleibt klar sichtbar. */











.bbk .bbk-punkt{position:relative;box-shadow:inset 0 0 0 1px transparent;transition:background .2s,box-shadow .2s,transform .2s}











.bbk .bbk-punkt::before{content:"";position:absolute;left:3px;top:12px;bottom:12px;width:3px;border-radius:4px;background:var(--bbk-gold);opacity:0;transform:scaleY(.3);transition:opacity .2s,transform .25s}











.bbk .bbk-punkt.hier{background:linear-gradient(90deg,#e3ad4f1c,#e3ad4f06);box-shadow:inset 0 0 0 1px #e3ad4f33}











.bbk .bbk-punkt.hier::before{opacity:1;transform:scaleY(1);box-shadow:0 0 10px #e3ad4f44}











.bbk .bbk-punkt.hier .bbk-ico{background:#e3ad4f22;border-color:#e3ad4f88;color:#ffe0a8}











.bbk .bbk-punkt:focus-visible{background:#ffffff10;box-shadow:inset 0 0 0 1px #ffffff32;transform:none;outline:none}











.bbk .bbk-punkt.hier:focus-visible{background:linear-gradient(90deg,#e3ad4f2b,#ffffff08);box-shadow:inset 0 0 0 1px #e3ad4f88}











.bbk .bbk-punkt .bbk-ico{transition:background .2s,border-color .2s,transform .2s}























.bbk .bbk-punkt.hier b{color:var(--bbk-gold2)}











.bbk .bbk-ober::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--bbk-gold);opacity:0;transform:scaleX(.2);transition:transform .25s,opacity .2s}











.bbk .bbk-gruppe.aktiv .bbk-ober::after{opacity:1;transform:scaleX(1)}











.bbk .bbk-gruppe:not(.aktiv):hover .bbk-ober::after{opacity:.35;transform:scaleX(.55);background:#fff}











@media(prefers-reduced-motion:reduce){.bbk .bbk-punkt,.bbk .bbk-punkt::before,.bbk .bbk-ico,.bbk .bbk-ober::after{transition:none!important}.bbk .bbk-punkt:focus-visible,.bbk .bbk-punkt:hover .bbk-ico,.bbk .bbk-punkt:focus-visible .bbk-ico{transform:none!important}}























/* Skalierbare Bereichsmenues: fester Kopf, Kartenraster und eigener Scrollbereich. */











@media(min-width:981px){











 .bbk-nav .bbk-panel{display:flex;flex-direction:column;width:min(520px,calc(100vw - 32px));min-width:0;max-height:calc(100dvh - 110px);padding:0;top:calc(100% + 12px);border-radius:14px;overflow:hidden;background:#111216;border-color:#e7d0a62b;box-shadow:0 24px 65px -15px #000b,0 1px 0 #fff1 inset;transform-origin:top left;transition:opacity .18s,visibility .18s,transform .22s cubic-bezier(.2,.8,.2,1)}











 .bbk-gruppe.offen::after{content:"";position:absolute;top:100%;left:var(--bbk-panel-links,-8px);width:var(--bbk-panel-breite,660px);height:14px}











 .bbk-panelraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:6px;overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#847251 #ffffff06}











 .bbk-panelraster::-webkit-scrollbar{width:7px}.bbk-panelraster::-webkit-scrollbar-track{background:#ffffff04}.bbk-panelraster::-webkit-scrollbar-thumb{background:#847251;border:2px solid #17181d;border-radius:8px}











 .bbk .bbk-panel .bbk-punkt{min-width:0;gap:9px;padding:9px 10px;border-radius:8px;align-items:center;min-height:40px;background:transparent}











 .bbk-panel .bbk-punkt>span:last-child{min-width:0}.bbk-panel .bbk-punkt b{font-size:13px;line-height:1.45;overflow-wrap:anywhere}











 .bbk-panel .bbk-punkt small{margin-top:4px;font-size:11.5px;line-height:1.5;color:#a49b90;overflow-wrap:anywhere}











 .bbk-panel .bbk-ico{width:22px;height:22px;border:0;border-radius:0;background:none}











 .bbk .bbk-panel .bbk-punkt:focus-visible{transform:none;background:#ffffff09;box-shadow:inset 0 0 0 1px #ffffff26}











 .bbk .bbk-panel .bbk-punkt.hier{background:linear-gradient(110deg,#e3ad4f16,#e3ad4f05);box-shadow:inset 0 0 0 1px #e3ad4f40}











 .bbk .bbk-panel .bbk-punkt.hier:focus-visible{background:linear-gradient(110deg,#e3ad4f24,#ffffff09);box-shadow:inset 0 0 0 1px #e3ad4f85}











}











/* Auf kleinen Displays bleiben weitere Kategorien zusammengefaltet erreichbar. */











.bbk-mobilgruppe{border-bottom:1px solid var(--bbk-rand)}.bbk-mobilgruppe:last-child{border-bottom:0}











.bbk-mobilgruppe>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 12px;cursor:pointer;color:var(--bbk-leise);font-size:13px;font-weight:600;user-select:none;border-radius:12px;outline:none}











.bbk-mobilgruppe>summary::-webkit-details-marker{display:none}.bbk-mobilgruppe>summary small{margin-left:auto;font-size:10px;color:var(--bbk-matt);border:1px solid var(--bbk-rand);border-radius:6px;padding:2px 6px}











.bbk-mobilgruppe>summary svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}











.bbk-mobilgruppe[open]>summary{color:var(--bbk-gold2);background:#e3ad4f09}.bbk-mobilgruppe[open]>summary svg{transform:rotate(180deg)}











.bbk-mobilgruppe>summary:focus-visible{box-shadow:inset 0 0 0 2px var(--bbk-gold)}











.bbk-mobilpunkte{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:3px 0 12px}.bbk-mobilpunkte .bbk-punkt>span:last-child{min-width:0;overflow-wrap:anywhere}











@media(min-width:621px)and(max-width:980px){.bbk-mobilpunkte{grid-template-columns:repeat(2,minmax(0,1fr))}}











@media(max-width:980px){.bbk-tafel{padding:8px;scrollbar-width:thin;scrollbar-color:#847251 #ffffff06;overscroll-behavior:contain;scrollbar-gutter:stable;max-height:calc(100dvh - 115px)}.bbk-tafel::-webkit-scrollbar{width:7px}.bbk-tafel::-webkit-scrollbar-thumb{background:#847251;border-radius:8px}.bbk-tafel .bbk-punkt b{font-size:13px}.bbk-tafel .bbk-punkt small{font-size:12px;line-height:1.5}}











@media(prefers-reduced-motion:reduce){.bbk-nav .bbk-panel,.bbk-mobilgruppe>summary svg{transition:none!important}.bbk .bbk-panel .bbk-punkt:focus-visible{transform:none!important}}























.bbk-konto .bbk-charakter{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#847251 #ffffff06}























/* Minimalistische Navigation: Titel statt Infokarten, keinerlei Hoverbewegung. */











.bbk .bbk-menue,.bbk .bbk-menue .bbk-punkt,.bbk .bbk-menue .bbk-ico,.bbk .bbk-menue .bbk-punkt::before,.bbk .bbk-charakter-aktionen>a{transition:none!important;animation:none!important;transform:none!important}











.bbk .bbk-menue .bbk-punkt small,.bbk-mobilpunkte .bbk-punkt small{display:none}











.bbk .bbk-menue .bbk-ico,.bbk .bbk-mobilpunkte .bbk-ico{transition:none!important;animation:none!important;transform:none!important}











.bbk .bbk-ober svg{transition:none!important;transform:none!important}











.bbk .bbk-menue .bbk-punkt:focus-visible,.bbk .bbk-mobilpunkte .bbk-punkt:focus-visible{outline:2px solid var(--bbk-gold);outline-offset:-2px}











@media(min-width:981px){.bbk .bbk-panel .bbk-punkt b{font-size:12.5px;line-height:1.4}.bbk .bbk-panel .bbk-punkt.hier .bbk-ico{background:none;border:0}.bbk .bbk-panel .bbk-punkt::before{top:9px;bottom:9px;left:2px}}











@media(max-width:980px){.bbk-mobilgruppe>summary{padding:11px 10px}.bbk-mobilpunkte{gap:2px;padding:2px 0 7px}.bbk .bbk-mobilpunkte .bbk-punkt{padding:10px;gap:10px;align-items:center}.bbk-mobilpunkte .bbk-ico{width:22px;height:22px;border:0;background:none;border-radius:0}.bbk .bbk-mobilpunkte .bbk-punkt.hier .bbk-ico{background:none;border:0}}























/* Dezente Cursor-Markierung; Abmessungen und Symbole bleiben statisch. */











@media(hover:hover){











 .bbk .bbk-panel .bbk-punkt:hover,.bbk .bbk-mobilpunkte .bbk-punkt:hover{background:#ffffff0e;box-shadow:inset 0 0 0 1px #ffffff14}











 .bbk .bbk-panel .bbk-punkt.hier:hover,.bbk .bbk-mobilpunkte .bbk-punkt.hier:hover{background:linear-gradient(110deg,#e3ad4f24,#e3ad4f0c);box-shadow:inset 0 0 0 1px #e3ad4f60}











 .bbk .bbk-charakter-aktionen>a:hover{background:#ffffff0c;border-color:#ffffff28}











}























/* Seitenaufbau und eigenes Flammenlogo. Menue-Icons bleiben weiterhin statisch. */











@keyframes bbAufbau{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}











html.bbk-aufbau body>main{animation:bbAufbau .5s cubic-bezier(.2,.7,.2,1) both}











.bbk-logo-flamme{overflow:visible;isolation:isolate;filter:drop-shadow(0 0 3px #e3ad4f26)}











@keyframes bbFlammenlicht{0%,100%{opacity:.4;filter:brightness(1.02)}19%{opacity:.8;filter:brightness(1.22)}43%{opacity:.5;filter:brightness(1.07)}67%{opacity:.9;filter:brightness(1.3)}82%{opacity:.55;filter:brightness(1.12)}}











.bb-flammenlicht{animation:bbFlammenlicht 1.7s linear infinite}











#bbSeitenLader[hidden]{display:none!important}#bbSeitenLader{position:fixed;inset:0;z-index:260;display:grid;place-items:center;background:#0b1017f5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:Inter,sans-serif;view-transition-name:bb-lader}











.bb-ladeinhalt{display:flex;flex-direction:column;align-items:center;gap:13px;padding:24px;color:#f3ece2;text-align:center}.bb-ladebrand{position:relative;width:110px;height:110px;display:grid;place-items:center}.bb-ladebrand::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#e3ad4f18,transparent 70%);border-radius:50%;filter:blur(8px)}.bb-ladelogo{width:96px;height:96px;overflow:visible;filter:drop-shadow(0 0 12px #f4ba3c40)}.bb-ladeinhalt strong{font:600 18px Cinzel,Georgia,serif;letter-spacing:.02em}.bb-ladetext{font-size:12px;color:#b9ae9f}.bb-ladespur{display:block;width:110px;height:2px;overflow:hidden;background:#ffffff0a}.bb-ladespur::after{content:"";display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,#e3ad4f,#70d8ec,transparent);animation:bbLadespur 1.5s ease-in-out infinite}.bb-ladeabbruch{font:12px Inter,sans-serif;color:#f8d690;border:0;border-bottom:1px solid #e3ad4f66;padding:7px 0;background:none;cursor:pointer}.bb-ladeabbruch:focus-visible{outline:2px solid #f8d690;outline-offset:4px}











@keyframes bbLadespur{from{transform:translateX(-120%)}to{transform:translateX(350%)}}











html.bbk-geht body>#bbSeitenLader{opacity:1;transform:none;transition:none}











@media(prefers-reduced-motion:reduce){html.bbk-aufbau body>main{animation:none!important}.bb-flammenlicht,.bb-ladespur::after{animation:none!important}.bbk-logo-flamme,.bb-ladelogo{filter:none}}























/* Seiten und ihre Abschnitte: ein verbundener Kopf statt zweier schwebender Leisten. */











.bbk:has(.bbk-unter) .bbk-leiste{border-radius:27px 27px 0 0;border-bottom:0;box-shadow:none}











.bbk .bbk-unter{margin:0;width:100%;max-width:none;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;gap:4px;padding:6px 16px;border-radius:0 0 20px 20px;border-top:1px solid #ffffff09;background:rgba(16,14,19,.94);box-shadow:0 18px 40px -22px #000;min-height:40px}











/* Scrollbalken der unteren Leiste: schmal, ohne Pfeile, bleibt innerhalb der runden Ecken */
.bbk .bbk-unter::-webkit-scrollbar{height:4px}
.bbk .bbk-unter::-webkit-scrollbar-button{display:none;width:0;height:0}
.bbk .bbk-unter::-webkit-scrollbar-track{background:transparent;margin:0 22px}
.bbk .bbk-unter::-webkit-scrollbar-thumb{background:#73634299;border-radius:4px}
.bbk .bbk-unter::-webkit-scrollbar-thumb:hover{background:#8a7650}
.bbk .bbk-unter a{white-space:nowrap;flex:none;padding:5px 12px;font-size:12px;line-height:1.5;border-radius:7px}











.bbk .bbk-unter a:focus-visible{outline:2px solid var(--bbk-gold);outline-offset:-1px}











.bbk-in-kopf{display:none!important}











@media(max-width:620px){.bbk:has(.bbk-unter) .bbk-leiste{border-radius:22px 22px 0 0}.bbk .bbk-unter{padding:6px 9px;border-radius:0 0 18px 18px}.bbk .bbk-unter a{padding:5px 10px;font-size:11px}}























/* Offene Inhaltsbereiche auf allen Seiten; Player, Formulare und Pokalregale behalten ihre Funktion. */











body.bb-offen :is(main,.huelle) .glas:not(.demo,.vorschau,.gw-karte,.skelett):not([role="dialog"] *):not(dialog *){











 background:transparent;border:0;border-top:1px solid rgba(232,209,166,.2);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;











}











body.bb-offen :is(main,.huelle) :is(.karte,.gruppe,.kontakt-karte,.kontakt-info,.projekt,.tool,.notiz,.held,.cdm-regeln,.pk-rangliste){padding:24px 0}











body.bb-offen :is(main,.huelle) :is(.karte,.gruppe,.kontakt-karte,.kontakt-info,.projekt,.tool,.notiz,.held,.addon,.pk-karte)::before{display:none}











body.bb-offen :is(main,.huelle) .licht::after{display:none}











body.bb-offen .seitenkopf{position:relative;padding-left:24px!important;border-left:2px solid #e3ad4f7a;margin-top:38px;padding-top:0!important;padding-bottom:12px!important;margin-bottom:30px}











body.bb-offen .seitenkopf h1{letter-spacing:-.03em;font-size:clamp(34px,5vw,60px);overflow-wrap:anywhere}











body.bb-offen .seitenkopf p{max-width:760px;font-size:15px;line-height:1.85}











body.bb-offen :is(main,.huelle) .klappe{margin-top:16px;border-radius:0;box-shadow:none}











body.bb-offen :is(main,.huelle) .klappe>button{padding-left:0;padding-right:0}











body.bb-offen .podest{padding-left:0;padding-right:0;gap:20px}











body.bb-offen .podest .platz{border:0;border-bottom:1px solid var(--rand2);border-radius:0;background:none;box-shadow:none}











body.bb-offen .podest .platz.p1{border-bottom:2px solid var(--gold);background:linear-gradient(180deg,transparent,#e3ad4f08);box-shadow:none}











body.bb-offen .werkzeug{padding-left:0;padding-right:0}











body.bb-offen .pk-karte{border:0;border-top:1px solid #e3ad4f55;border-radius:0;background:transparent;box-shadow:none;padding:24px 18px}











body.bb-offen .pk-steuerung,body.bb-offen .cdm-werkzeug{padding:16px 0;border-bottom:1px solid var(--rand)!important}











body.bb-offen .pk-regeln{padding:18px 0}











body.bb-offen .pk-rangliste{margin-top:28px}











body.bb-offen .zahl.glas,body.bb-offen .zahlkarte{padding:20px 0}











/* Nur ohne Kachel: als glas-Kachel hat .held schon die goldene Oberkante */
body.bb-offen .held:not(.glas){border-left:2px solid #e3ad4f7a!important;padding:20px 0 20px 24px!important}











body.bb-offen .addon{padding:24px 0;border-radius:0;transform:none!important}











body.bb-offen .gw-karte{border:0;border-top:1px solid #e3ad4f55;border-radius:0;background:#0b0a0d22;box-shadow:none;padding:24px 18px}











body.bb-offen .gw-karte::before{display:none}











body.bb-offen .gw-editor,body.bb-offen .gw-verwaltung{padding:24px 0}











body.bb-offen[data-bbk-seite="tools"] .einstieg{border-left:2px solid #e3ad4f7a;padding:0 0 0 24px;margin:44px 0 32px}











body.bb-offen[data-bbk-seite="tools"] .projekt{border-bottom:1px solid var(--rand)}











body.bb-offen[data-bbk-seite="tools/quiz"] :is(.nutzen,.funktion,.schritt){border:0;border-radius:0;box-shadow:none;background:transparent;border-top:1px solid var(--rand);padding-top:20px}











/* Schnellstart nutzt dieselben 24/18px Innenabstaende wie alle Inhaltsflaechen. */











body.bb-offen[data-bbk-seite="impressum"] main>section.glas,body.bb-offen[data-bbk-seite="datenschutz"] main>section.glas,body.bb-offen[data-bbk-seite="nutzungsbedingungen"] main>section.glas{padding:24px 0}











@media(max-width:760px){body.bb-offen .seitenkopf{padding-left:17px!important;margin-top:28px;margin-bottom:24px}body.bb-offen .seitenkopf h1{font-size:clamp(29px,8.5vw,42px)}body.bb-offen .podest{gap:8px}body.bb-offen .pk-karte{padding:20px 8px}body.bb-offen .gw-karte{padding:20px 10px}body.bb-offen .held{padding-left:17px!important}body.bb-offen :is(main,.huelle) :is(.karte,.gruppe,.kontakt-karte,.kontakt-info,.projekt,.tool,.notiz){padding-top:20px;padding-bottom:20px}}























/* Den bewegten Bildausschnitt im selben Sichtfenster wie seine Abdunklung halten. */











.welt{inset:0!important;overflow:hidden;background:none!important;transform:none!important;will-change:auto;pointer-events:none}











.welt::before{content:"";position:absolute;inset:-4vh 0 -28vh;background:#0b0a0d url(https://blizzi1337.de/assets/hintergrund.jpg) center 30%/cover no-repeat;transform:translate3d(0,calc(var(--bbk-p,0) * -24vh),0) scale(calc(1.06 + var(--bbk-p,0) * .12));transform-origin:50% 30%;will-change:transform}











body.bb-offen[data-bbk-seite="addons"] .werte div{border:0;border-left:1px solid var(--rand2);border-radius:0;background:none;padding:8px 14px}











body.bb-offen[data-bbk-seite="addons"] .mehr details{border:0;border-top:1px solid var(--rand2);border-radius:0;background:none}











body.bb-offen[data-bbk-seite="tools/quiz"] .thema{border:0;border-radius:0;background:transparent;box-shadow:none}











body.bb-offen[data-bbk-seite="tools/quiz"] .thema .text{padding:14px 0 16px}



























/* Eckige dezente Milchglas-Unterlage fuer offene Inhalte. */







body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *){position:relative;isolation:isolate;padding:24px!important}







body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)::after{







 content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:0;border:1px solid rgba(224,230,229,.13);border-top-color:rgba(227,173,79,.8);box-sizing:border-box;







 background:linear-gradient(150deg,rgba(213,229,233,.055),rgba(15,22,29,.12) 70%),rgba(12,19,25,.48);







 -webkit-backdrop-filter:blur(12px) saturate(80%);backdrop-filter:blur(12px) saturate(80%);







 opacity:1;transition:none;







}







body.bb-offen .pk-karte:focus-within,body.bb-offen .pk-karte:has(.pk-info-wrap:hover){z-index:5}







@media(max-width:760px){







body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)::after{inset:0;-webkit-backdrop-filter:blur(8px) saturate(80%);backdrop-filter:blur(8px) saturate(80%)}







}











body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)>:first-child{margin-top:0}



body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)>:last-child{margin-bottom:0}



body.bb-offen :is(main,.huelle) .klappe>button{padding:0}



@media(max-width:760px){body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *){padding:18px!important}}







/* Teilnehmerzahl als ruhige Metainformation statt schmaler Zahlenkapsel. */



.bb-start .tage-kompakt{align-items:start}



body.bb-offen .klappe>button .teilnehmerzahl{font:500 12px/1.5 Inter,system-ui,sans-serif;color:var(--leise);padding:0;border:0;border-radius:0;background:none;white-space:nowrap;flex:none}



@media(max-width:600px){body.bb-offen .klappe>button{flex-wrap:wrap;row-gap:5px}body.bb-offen .klappe>button .stand{font-size:11px}}







/* Hall of Fame: kleine Rangmarken und klare Zeilen statt Podestflaechen. */



body.bb-offen .ruhm{display:grid;gap:0}



body.bb-offen .ruhm>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rand);font-size:13px}



body.bb-offen .ruhm>div>span:first-child{display:flex;align-items:center;gap:9px;min-width:0}



body.bb-offen .ruhm>div>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;color:var(--gold2)}



body.bb-offen .ruhm .platz{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;margin:0;padding:0;border:0;border-radius:3px;font:600 11px Inter,system-ui,sans-serif;color:#21160a}



body.bb-offen .ruhm .p1{background:#e3ad4f}body.bb-offen .ruhm .p2{background:#c1c7cb}body.bb-offen .ruhm .p3{background:#bd8c63}



.bb-start .livekarte{border:0!important}



.bb-start .livekarte .livekopf{border:0!important;padding:0!important;margin:0 0 12px!important}







/* Lesefortschritt: dezenter Goldakzent direkt am gemeinsamen Kopf. */



.bbk::after{content:none}







/* Glas bleibt in derselben Hintergrundebene; nur die Unterlage selbst blendet ein. */

body.bb-offen .einblenden:is(.glas,.pk-karte,.tag,.kachel,.zahlkarte),

body.bb-offen .einblenden:has(:is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.thema .text)){

 opacity:1!important;transform:none!important;animation:none!important;transition:none!important;

}

html.bbk-aufbau body>main:has(.glas),html.bbk-rein body>*:has(:is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.thema .text)){animation:none!important;opacity:1!important;transform:none!important}

body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)::after{transition:opacity .48s ease-out;opacity:1}

body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *).einblenden:not(.da)::after{opacity:0}

@starting-style{

body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)::after{opacity:0}

}

@media(prefers-reduced-motion:reduce){

body.bb-offen :is(main,.huelle) :is(.glas,.pk-karte,.tag,.kachel,.zahlkarte,.podest .platz,.thema .text):not(.demo,.vorschau,.livekarte,.skelett):not([role="dialog"] *):not(dialog *)::after{opacity:1!important;transition:none!important}

}



/* Fortschritt vom linken Rand ueber die obere Rundung bis zum rechten Rand. */

.bbk>.bbk-leserand{position:absolute;left:0;top:0;width:100%;z-index:4;overflow:visible;pointer-events:none;fill:none}

.bbk>.bbk-leserand path{fill:none;stroke:#e3ad4f;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc((1 - var(--bbk-lesefortschritt,0)) * 1px);opacity:clamp(0,calc(var(--bbk-lesefortschritt,0)*1000),1)}


.bbk .bbk-rolle.admin,body .rolle.admin{color:#f8d690;border-color:#e3ad4f66}

/* Hintergrundwechsel innerhalb des bestehenden beschnittenen Bildfensters. */
.welt::before{background-image:var(--bbk-hg-bild,url(https://blizzi1337.de/assets/hintergrund.jpg))!important}
.welt .bbk-hintergrund-neu{position:absolute;inset:-4vh 0 -28vh;z-index:1;background-position:center 30%;background-size:cover;background-repeat:no-repeat;opacity:0;pointer-events:none;transform:translate3d(0,calc(var(--bbk-p,0) * -24vh),0) scale(calc(1.06 + var(--bbk-p,0) * .12));transform-origin:50% 30%;will-change:opacity,transform}

/* Live: roter Punkt am Reiter Socials und am Twitch-Eintrag (Klasse bbk-live am Kopf, gesetzt in kopf.js). */
/* Aufklappmenues der Reiter: schmal, Eintraege untereinander (Konto-Menue ausgenommen) */
.bbk-nav .bbk-gruppe .bbk-menue{min-width:0;width:260px}
.bbk-nav .bbk-gruppe .bbk-panelraster{grid-template-columns:minmax(0,1fr)}
.bbk-livepunkt{display:none}
.bbk.bbk-live .bbk-livepunkt,.bbk.bbk-live .bbk-punkt[href^="https://www.twitch.tv/"] b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:#ff5a5a;vertical-align:middle;box-shadow:0 0 0 0 #ff5a5a99;animation:bbkLivePuls 1.8s infinite}
@keyframes bbkLivePuls{70%{box-shadow:0 0 0 6px #ff5a5a00}100%{box-shadow:0 0 0 0 #ff5a5a00}}
@media(prefers-reduced-motion:reduce){.bbk.bbk-live .bbk-livepunkt,.bbk.bbk-live .bbk-punkt b::after{animation:none}}

/* Ein einziger Hintergrunddecoder; Poster bleibt stets unter dem Film. */
.welt .bbk-hintergrund-video{position:absolute;inset:-4vh 0 -28vh;z-index:1;width:100%;height:calc(100% + 32vh);object-fit:cover;object-position:center 30%;opacity:0;pointer-events:none;transform:translate3d(0,calc(var(--bbk-p,0) * -24vh),0) scale(calc(1.06 + var(--bbk-p,0) * .12));transform-origin:50% 30%}
.welt .bbk-hintergrund-video[src]{will-change:transform}
.welt .bbk-hintergrund-neu{z-index:2}

/* Gut lesbare Clip-Metadaten auch ueber wechselnden Hintergruenden. */
body .film .meta,body .cdm-film p{color:#d5cfc4;text-shadow:0 1px 3px #000}
/* Text direkt auf dem Hintergrundbild (ohne Glaskasten): gleiche helle Farbe + Schatten wie „geclippt von“.
   Gilt nur fuer Einleitungen/Hinweise ausserhalb von Karten; fette/weisse Hervorhebungen behalten ihre Farbe. */
body .seitenkopf p,body .einstieg p,body .einl,body .einleitung,body p.lead,body .zugangHinweis,
body .livekopf .liveinfo,body .wochenkopf .zeitraum,body .film-uebersicht,body .cdm-home-kopf p,body .cdm-kopf p,
body p.quelle,body .gw-fussnote,body .pk-status,body .sv-klein,body .sv-fuss,body .mq-status,body .mq-status b,
body:is([data-bbk-seite="tools/quiz"],[data-bbk-seite="tools/steamquiz"]) .thema .text p,body:is([data-bbk-seite="tools/quiz"],[data-bbk-seite="tools/steamquiz"]) .ablauf .stufe p,
body:is([data-bbk-seite="tools/quiz"],[data-bbk-seite="tools/steamquiz"]) .quiz-details .eintrag p,body:is([data-bbk-seite="tools/quiz"],[data-bbk-seite="tools/steamquiz"]) .faq details>p,
body .einstieg p.text,body .einstieg p.klein,body .uebersicht .einl,body .ds-gruppe span,
body:is([data-bbk-seite="tools/quiz"],[data-bbk-seite="tools/steamquiz"]) .einblenden:not(.glas)>p{color:#d5cfc4!important;text-shadow:0 1px 3px #000}
body .marke{text-shadow:0 1px 3px #000}
/* Kacheln (Glas): Nebenschrift heller + gleicher Schatten wie auf dem Hintergrundbild. Die beiden gedaempften
   Farben werden nur innerhalb der Kacheln umdefiniert, die Abstufung (leise > matt) bleibt erhalten. */
body .glas{--leise:#d5cfc4;--matt:#b4ac9e;text-shadow:0 1px 3px #000}
body .glas :is(input,textarea,select,option,.knopf.haupt,.platz,.rang,.ini,.wert,[aria-pressed="true"],button.an,a.aktiv,.hier,.stufe){text-shadow:none}
body .glas :is([aria-pressed="true"],button.an,a.aktiv,.hier) *{text-shadow:none}
/* Verlaufsschrift (Goldverlauf mit durchsichtiger Fuellung): ein Schatten wuerde dunkel durchscheinen */
body :is(.seitenkopf,.profilkopf,.einstieg) h1,body .konto-stand>b,body .zahlkarte .wert{text-shadow:none!important}
/* OFFLINE-/Status-Pille auf der Startseite: lesbar auf hellem Hintergrund */
body .zustand:not(.live){color:#e4ddd0;border-color:#ffffff38;background:rgba(10,8,6,.55);text-shadow:0 1px 3px #000}
footer.bbk-fuss{color:#c9c2b6}
footer.bbk-fuss a,footer.bbk-fuss .bs-einstellungen{color:#d5cfc4}
footer.bbk-fuss a:hover,footer.bbk-fuss .bs-einstellungen:hover{color:#f8d690}

/* Statusanzeige unter der Titelleiste: fuer alle Rueckmeldungen der Website (window.bbStatus).
   Der Rahmen schneidet oben ab, so schiebt sich die Lasche unter der Leiste hervor statt durch sie hindurch. */
.bbk-status-rahmen{position:absolute;top:100%;left:0;right:0;height:72px;overflow:hidden;pointer-events:none;z-index:-1}
.bbk-status{position:absolute;top:0;left:50%;display:flex;align-items:center;gap:9px;max-width:min(560px,calc(100% - 40px));padding:9px 20px 10px;
  border:1px solid var(--bbk-rand);border-top:0;border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,rgba(255,240,220,.03),rgba(255,240,220,0) 60%),rgba(16,14,19,.94);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 14px 30px -16px #000;
  font-size:13.5px;font-weight:500;line-height:1.35;color:var(--bbk-text);transform:translate(-50%,-105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);pointer-events:auto}
.bbk-status.da{transform:translate(-50%,0)}
.bbk-status span{min-width:0;overflow-wrap:anywhere}
.bbk-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bbk-gold);box-shadow:0 0 10px var(--bbk-gold)}
.bbk-status.gut::before{background:#8fd49a;box-shadow:0 0 10px #8fd49a99}
.bbk-status.fehler::before{background:#ff8f84;box-shadow:0 0 10px #ff8f8499}
.bbk-status.fehler{color:#ffd0ca}
@media (prefers-reduced-motion:reduce){.bbk-status{transition:none}}

/* Einheitliche Scrollleiste fuer alle Scrollflaechen der Website: Klasse "bb-scroll" vergeben, kein eigenes CSS mehr.
   Schmal, goldener Griff, ohne Pfeile. Chromium/Edge ueber ::-webkit-scrollbar (scrollbar-width wuerde dort die Pfeile
   zurueckbringen), Firefox ueber scrollbar-width/-color. */
.bb-scroll{overscroll-behavior:contain}
.bb-scroll::-webkit-scrollbar{width:6px;height:6px}
.bb-scroll::-webkit-scrollbar-button{display:none;width:0;height:0}
.bb-scroll::-webkit-scrollbar-track{background:transparent}
.bb-scroll::-webkit-scrollbar-thumb{background:#8e7044;border-radius:6px}
.bb-scroll::-webkit-scrollbar-thumb:hover{background:#c79b58}
.bb-scroll::-webkit-scrollbar-corner{background:transparent}
@supports (-moz-appearance:none){.bb-scroll{scrollbar-width:thin;scrollbar-color:#8e7044 transparent}}

/* Einheitlicher An/Aus-Schalter: <label class="bb-schalter"><input type="checkbox"><span></span></label> */
.bb-schalter{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.bb-schalter input{opacity:0;width:0;height:0;position:absolute}
.bb-schalter span{position:absolute;inset:0;border-radius:999px;background:rgba(255,240,220,.12);border:1px solid rgba(255,236,210,.12);transition:background .15s;cursor:pointer}
.bb-schalter span::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#f2ece3;transition:transform .15s}
.bb-schalter input:checked+span{background:#e3ad4f;border-color:#e3ad4f}
.bb-schalter input:checked+span::after{transform:translateX(16px);background:#21160a}
.bb-schalter input:focus-visible+span{box-shadow:0 0 0 3px rgba(231,176,82,.35)}
.bb-schalter input:disabled+span{opacity:.5;cursor:not-allowed}

/* Slider-Bausteine (Optik wie der Freunde-Slider der Startseite) - fuer alle kuenftigen Slider:
   Pfeile: <span class="bb-pfeile"><button aria-label="Zurück"><svg viewBox="0 0 24 24"><path d="m15 6-6 6 6 6"/></svg></button>…</span>
   Laufbalken bis zum naechsten Wechsel: <div class="bb-balken" style="--dauer:5s"><i class="laeuft"></i></div> (animationend = weiter) */
.bb-pfeile{display:flex;gap:6px;flex:none}
.bb-pfeile[hidden]{display:none}
.bb-pfeile button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,236,210,.18);background:#ffffff0a;color:#f3ece2;transition:background .2s,border-color .2s}
.bb-pfeile button:hover{background:#ffffff18;border-color:#e3ad4f66}
.bb-pfeile button:focus-visible{outline:2px solid #e3ad4f;outline-offset:2px}
.bb-pfeile svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bb-balken{height:3px;margin-top:12px;border-radius:3px;background:#ffffff14;overflow:hidden}
.bb-balken[hidden]{display:none}
.bb-balken i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#e3ad4f,#f8d690)}
.bb-balken i.laeuft{animation:bbBalkenFuellen var(--dauer,10s) linear forwards}
@keyframes bbBalkenFuellen{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Steam-Toolseite: dieselbe helle Nebenschrift wie auf den übrigen öffentlichen Seiten. */
body[data-bbk-seite="tools/steamquiz"]{--leise:#d5cfc4;--matt:#b4ac9e}
body[data-bbk-seite="tools/steamquiz"] :is(.eckdaten span,.vorschau .leiste,#themen>.huelle>p){text-shadow:0 1px 3px #000}

/* Haupt- und Abschnittsleiste: echtes Kachelglas direkt auf beiden Flaechen.
   Seitenwechsel-Snapshots liegen auf den gefilterten Flaechen, nicht ihrem Vorfahren. */
.bbk{view-transition-name:none}
.bbk .bbk-leiste{view-transition-name:bbk-kopf}
.bbk .bbk-unter{view-transition-name:bbk-unter}
.bbk::before{content:none}
.bbk .bbk-leiste,.bbk .bbk-unter{
 background:linear-gradient(150deg,rgba(213,229,233,.055),rgba(15,22,29,.12) 70%),rgba(12,19,25,.48);
 -webkit-backdrop-filter:blur(12px) saturate(80%);backdrop-filter:blur(12px) saturate(80%)}
@media(max-width:760px){.bbk .bbk-leiste,.bbk .bbk-unter{-webkit-backdrop-filter:blur(8px) saturate(80%);backdrop-filter:blur(8px) saturate(80%)}}

/* Hauptleiste und Hover-Menues etwas dunkler als die Abschnittsleiste. */
.bbk .bbk-leiste{--bbk-hauptglas:linear-gradient(150deg,rgba(213,229,233,.055),rgba(15,22,29,.12) 70%),rgba(12,19,25,.66);background:var(--bbk-hauptglas)}
.bbk .bbk-nav .bbk-panel{background:var(--bbk-hauptglas);-webkit-backdrop-filter:blur(12px) saturate(80%);backdrop-filter:blur(12px) saturate(80%)}
/* Offene Menues muessen hinter die Hauptleiste sehen koennen: Glas dann auf einer
   Geschwister-Unterlage statt auf dem filternden/snapshotenden Vorfahren. */
.bbk .bbk-leiste:has(.bbk-gruppe.offen){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;view-transition-name:none}
.bbk .bbk-leiste:has(.bbk-gruppe.offen)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--bbk-hauptglas);-webkit-backdrop-filter:blur(12px) saturate(80%);backdrop-filter:blur(12px) saturate(80%)}
@media(max-width:760px){.bbk .bbk-nav .bbk-panel,.bbk .bbk-leiste:has(.bbk-gruppe.offen)::before{-webkit-backdrop-filter:blur(8px) saturate(80%);backdrop-filter:blur(8px) saturate(80%)}}

/* Reiter und Hover-Menue bilden eine gemeinsame Glas-Silhouette. */
@media(min-width:981px){
 .bbk .bbk-gruppe.bbk-verbunden.offen{z-index:3;isolation:isolate}
 .bbk .bbk-gruppe.bbk-verbunden.offen::before{content:"";position:absolute;left:var(--bbk-panel-links,0px);top:0;width:var(--bbk-panel-breite,260px);height:var(--bbk-verbund-hoehe);z-index:-1;pointer-events:none;clip-path:var(--bbk-verbund-form);background:var(--bbk-hauptglas);-webkit-backdrop-filter:blur(12px) saturate(80%);backdrop-filter:blur(12px) saturate(80%)}
 .bbk .bbk-gruppe.bbk-verbunden.offen>.bbk-ober{background:transparent;border-radius:14px 14px 0 0}
 .bbk .bbk-gruppe.bbk-verbunden.offen>.bbk-panel{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 .bbk-menue-kontur{display:none;position:absolute;left:var(--bbk-panel-links,0px);top:0;width:var(--bbk-panel-breite,260px);height:var(--bbk-verbund-hoehe);z-index:2;pointer-events:none;overflow:visible}
 .bbk-gruppe.bbk-verbunden.offen>.bbk-menue-kontur{display:block}
 .bbk-menue-kontur path{fill:none;stroke:rgba(255,236,210,.18);stroke-width:1}
}
@media(max-width:980px){.bbk-menue-kontur{display:none}}

/* Kompakter Abstand vom Reiter zum ersten Menueeintrag. Dynamische Kontur folgt offsetTop. */
@media(min-width:981px){.bbk .bbk-nav .bbk-panel{top:calc(100% + 4px)}.bbk .bbk-nav .bbk-panelraster{padding-top:4px}.bbk .bbk-gruppe.offen::after{height:4px}}

/* Gemessen ueber alle 5 Gruppen inklusive Inhaber: 129.85px Text + 75px Icon/Abstaende + 8px Reserve. */
@media(min-width:981px){.bbk .bbk-nav .bbk-gruppe .bbk-panel{width:213px}}

/* Goldener Akzent zwischen Haupt- und Abschnittsleiste. */
.bbk .bbk-unter{border-top-color:rgba(227,173,79,.8)}

/* Kein leerer Scrollbar-Platz rechts: Hoverflaechen haben gleiche Seitenraender. */
.bbk .bbk-nav .bbk-panelraster{scrollbar-gutter:auto}



/* Seitensperre (video-morph.js) blendet die Scrollleiste aus: Die fest stehenden Hintergrundebenen
   behalten rechts denselben Rand (--bb-sperre-rand = Scrollleistenbreite), damit nichts verrutscht. */
html .welt,html .bbk-szene{right:var(--bb-sperre-rand,0px)!important}
html #glut{width:calc(100% - var(--bb-sperre-rand,0px))!important}