:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one centred slot machine (gehäuse + walzen + hebel-knopf), Einstellungen als Overlay-Panel */
:root{
  --bg:#ffffff; --bg-dot:#d3e3ee;
  --body:#1f3a68; --body-edge:#142a4f; --body-hi:#2d4f8a;
  --reel:#ffffff; --reel-edge:#c9d6e3; --ink:#1b2333;
  --syl-a:#1d5fd1; --syl-b:#d7263d;
  --go:#f2a900; --go-edge:#b97f00; --go-ink:#2a1e00;
  --panel:#ffffff; --panel-ink:#1b2333; --muted:#5d6b80; --line:#d8e1ea;
  --chip:#eef3f8; --chip-on:#1f3a68; --chip-on-ink:#ffffff;
  --display:"Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  --read:"ABeeZee", "Comic Sans MS", Verdana, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1622; --bg-dot:#162233;
  --body:#24406f; --body-edge:#16294a; --body-hi:#355a96;
  --reel:#f7f4ec; --reel-edge:#8fa0b5; --ink:#1b2333;
  --syl-a:#1d5fd1; --syl-b:#c81f35;
  --go:#f2b21c; --go-edge:#a87400; --go-ink:#2a1e00;
  --panel:#18222f; --panel-ink:#e8eef5; --muted:#9fb0c4; --line:#2b3a4d;
  --chip:#223044; --chip-on:#f2b21c; --chip-on-ink:#2a1e00; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1622; --bg-dot:#162233;
  --body:#24406f; --body-edge:#16294a; --body-hi:#355a96;
  --reel:#f7f4ec; --reel-edge:#8fa0b5; --ink:#1b2333;
  --syl-a:#1d5fd1; --syl-b:#c81f35;
  --go:#f2b21c; --go-edge:#a87400; --go-ink:#2a1e00;
  --panel:#18222f; --panel-ink:#e8eef5; --muted:#9fb0c4; --line:#2b3a4d;
  --chip:#223044; --chip-on:#f2b21c; --chip-on-ink:#2a1e00; color-scheme:dark}


*{box-sizing:border-box}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible+span,.chip:focus-visible{outline:3px solid var(--go);outline-offset:3px}

.topbar{position:relative;top:auto;left:10px;display:flex;gap:8px;z-index:5;padding-bottom:20px}
.iconbtn{border:0;border-radius:12px;background:var(--panel);color:var(--panel-ink);padding:9px 14px;font-family:var(--display);font-weight:600;font-size:15px;box-shadow:0 2px 0 var(--line);display:flex;align-items:center;gap:6px}
.iconbtn svg{width:18px;height:18px}

.machine{width:100%;background:linear-gradient(180deg,var(--body-hi),var(--body) 30%);border:4px solid var(--body-edge);border-radius:34px;
  padding:clamp(14px,3vw,30px);box-shadow:0 14px 0 var(--body-edge),0 26px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:clamp(14px,2.4vw,24px)}
.marquee{display:flex;align-items:center;justify-content:center;gap:12px}
.marquee h1{margin:0;font-family:var(--display);font-weight:800;color:#fff;font-size:clamp(26px,5vw,46px);letter-spacing:.02em;line-height:1;text-align:center}
.bulbs{display:flex;gap:6px}
.bulbs i{width:10px;height:10px;border-radius:50%;background:var(--go);opacity:.35;display:block}
.spinning .bulbs i{animation:blink .5s infinite alternate}
.spinning .bulbs i:nth-child(2){animation-delay:.15s}.spinning .bulbs i:nth-child(3){animation-delay:.3s}
@keyframes blink{to{opacity:1}}

.window{background:var(--body-edge);border-radius:22px;padding:clamp(8px,1.6vw,14px);display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(8px,1.6vw,14px)}
.reel{--h:clamp(110px,22vw,200px);height:var(--h);background:var(--reel);border-radius:16px;overflow:hidden;position:relative;border:3px solid var(--reel-edge);min-width:0}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(var(--reel-edge),transparent)}
.reel::after{bottom:0;background:linear-gradient(transparent,var(--reel-edge))}
.strip{will-change:transform}
.cell{height:var(--h);display:flex;align-items:center;justify-content:center;font-family:var(--read);font-weight:400;-webkit-text-stroke:.035em currentColor;
  font-size:calc(var(--h) * .5);line-height:1;color:var(--ink);white-space:nowrap}
.colored .reel:nth-child(odd) .cell{color:var(--syl-a)}
.colored .reel:nth-child(even) .cell{color:var(--syl-b)}
.reel.done{animation:bump .25s ease-out}
@keyframes bump{50%{transform:translateY(5px)}}
.arc{position:absolute;left:18%;right:18%;bottom:9%;height:14%;border:4px solid currentColor;border-top:0;border-radius:0 0 999px 999px;z-index:3;opacity:0;transition:opacity .25s;color:var(--syl-a)}
.colored .reel:nth-child(even) .arc{color:var(--syl-b)}
.arcs .reel.done .arc,.arcs.idle .arc{opacity:.85}
.colored.arcs .reel .arc{opacity:0}
.colored.arcs .reel.done .arc,.colored.arcs.idle .arc{opacity:.85}
:not(.colored).arcs .arc{color:var(--muted)}

.controls{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.start{border:0;background:var(--go);color:var(--go-ink);font-family:var(--display);font-weight:800;font-size:clamp(26px,4.4vw,40px);
  padding:.25em 1.6em .2em;border-radius:999px;box-shadow:0 8px 0 var(--go-edge);transition:transform .08s,box-shadow .08s;letter-spacing:.04em}
.start:active,.start.pressed{transform:translateY(6px);box-shadow:0 2px 0 var(--go-edge)}
.start:disabled{filter:saturate(.6);cursor:default}
.hint{color:#c9d6ea;font-size:14px;text-align:center;margin:0}
.word{min-height:1.4em;font-family:var(--read);font-weight:700;color:#fff;font-size:clamp(20px,3vw,28px);text-align:center;margin:0;letter-spacing:.02em}
.word span{opacity:.6;font-weight:400;font-size:.7em;margin-right:.4em}

/* Einstellungen */
.overlay{position:fixed;inset:0;background:rgba(10,20,35,.45);z-index:20;display:flex;justify-content:flex-end}
.panel{background:var(--panel);color:var(--panel-ink);width:min(460px,100%);height:100%;overflow-y:auto;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) 20px;
  display:flex;flex-direction:column;gap:22px;box-shadow:-10px 0 30px rgba(0,0,0,.2)}
.panel header{display:flex;justify-content:space-between;align-items:center}
.panel h2{margin:0;font-family:var(--display);font-size:26px}
.panel h3{margin:0 0 4px;font-family:var(--display);font-size:18px}
.panel p.sub{margin:0 0 10px;color:var(--muted);font-size:14px}
.close{border:0;background:var(--chip);color:var(--panel-ink);border-radius:12px;padding:8px 14px;font-family:var(--display);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:2px solid var(--line);background:var(--chip);color:var(--panel-ink);border-radius:12px;min-width:46px;padding:6px 10px;
  font-family:var(--read);font-weight:700;font-size:20px;line-height:1.1}
.chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink);border-color:var(--chip-on)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mini{border:0;background:none;color:var(--muted);text-decoration:underline;padding:2px 4px;font-size:14px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:2px solid var(--line);background:var(--chip);color:var(--panel-ink);border-radius:10px;padding:7px 12px;font-size:15px}
.seg button[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink);border-color:var(--chip-on)}
.toggle{display:flex;align-items:center;gap:10px;font-size:16px;cursor:pointer;padding:4px 0}
.toggle input{width:22px;height:22px;accent-color:var(--body)}
.status{font-size:14px;color:var(--muted);background:var(--chip);border-radius:10px;padding:10px 12px}
.status.warn{color:#fff;background:var(--syl-b)}
.cell svg.gir{height:80%;width:auto}
.reel.gir .arc{display:none}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:15;width:100%;height:100%}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:16;background:var(--go);color:var(--go-ink);font-family:var(--display);font-weight:800;font-size:clamp(28px,6vw,56px);line-height:1.1;padding:.4em .9em;border-radius:28px;box-shadow:0 10px 0 var(--go-edge);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .25s;pointer-events:none;text-align:center;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.machine.win .window{animation:glow .45s 6 alternate}
@keyframes glow{to{box-shadow:0 0 0 8px var(--go)}}
@media (prefers-reduced-motion:reduce){.spinning .bulbs i{animation:none;opacity:1}.reel.done{animation:none}}
:fullscreen body{justify-content:center}



.slickcontentelement .slick-header {
   display:none
}

aside {
	padding-top: 110px !important;
  	position: relative;
  }

@media screen and (max-width:991px) {
aside {
	padding-top: 110px !important;
  	position: relative;
  }
}

@media screen and (max-width:660px) {
  #page-content {
}
}