/* Spielhalle – Grundgestaltung. Rot #d61919 unveraendert aus der alten Seite. */
:root{--rot:#d61919;--rot-dunkel:#a81212;--dunkel:#1a1a1a;--grau:#f2f2f2;--grau-linie:#dcdcdc;--text:#222}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);line-height:1.65;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:999}

.topbar{background:var(--grau);border-bottom:1px solid var(--grau-linie);font-size:.92rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;flex-wrap:wrap}
.topbar .logo img{height:52px;width:auto;max-width:210px;display:block}
footer .fuss-logo{max-height:46px;width:auto;margin-bottom:14px;opacity:.95}
.topbar .kontakt{display:flex;gap:26px;flex-wrap:wrap;color:#444}
.topbar .kontakt a{color:#444}

nav.haupt{background:var(--rot)}
nav.haupt ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
nav.haupt li{border-left:1px solid rgba(255,255,255,.35)}
nav.haupt li:last-child{border-right:1px solid rgba(255,255,255,.35)}
nav.haupt a{display:block;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:18px 34px;font-size:.9rem}
nav.haupt a:hover,nav.haupt a[aria-current=page]{background:var(--rot-dunkel);text-decoration:none}

.hero{position:relative;background:#000}
.hero img{width:100%;max-height:560px;object-fit:cover;opacity:.95}
.band{background:var(--rot);color:#fff;text-align:center;padding:26px 20px}
.band p{margin:0;font-size:1.05rem;font-weight:600}

main{padding:48px 0}
h1{font-size:2.1rem;line-height:1.25;color:var(--rot);margin:0 0 18px}
h2{font-size:1.55rem;color:var(--rot);margin:38px 0 12px}
h3{font-size:1.15rem;margin:26px 0 8px;color:var(--dunkel)}
.bleib{max-width:820px}
ul.punkte{padding-left:0;list-style:none}
ul.punkte li{padding:7px 0 7px 30px;position:relative;border-bottom:1px solid var(--grau-linie)}
ul.punkte li:before{content:"";position:absolute;left:6px;top:16px;width:9px;height:9px;background:var(--rot);border-radius:50%}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:26px 0}
.galerie img{border-radius:3px;height:200px;object-fit:cover;width:100%}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin:26px 0}
.karte{background:var(--grau);padding:22px;border-top:4px solid var(--rot)}
.karte h3{margin-top:0}

.hinweis{background:var(--grau);border-left:5px solid var(--rot);padding:20px 24px;margin:34px 0}
.hinweis h2{margin-top:0}

form.kontakt{max-width:640px}
form.kontakt label{display:block;margin:16px 0 6px;font-weight:600}
form.kontakt input,form.kontakt textarea{width:100%;padding:11px;border:1px solid #bbb;border-radius:3px;font:inherit}
form.kontakt textarea{min-height:150px}
form.kontakt .hp{position:absolute;left:-9999px}
button{background:var(--rot);color:#fff;border:0;padding:13px 30px;font:inherit;font-weight:700;
  border-radius:3px;cursor:pointer;margin-top:20px}
button:hover{background:var(--rot-dunkel)}
.meldung{padding:14px 18px;border-radius:3px;margin:18px 0}
.meldung.ok{background:#e6f4e6;border:1px solid #9c9}
.meldung.fehler{background:#fbe9e9;border:1px solid #d99}

footer{background:var(--dunkel);color:#cfcfcf;margin-top:50px;padding:44px 0 0}
footer h3{color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px}
footer a{color:#cfcfcf}
footer .spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;padding-bottom:34px}
footer .unten{border-top:1px solid #333;padding:16px 0;font-size:.87rem;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.ab18{display:inline-block;background:var(--rot);color:#fff;font-weight:700;border-radius:50%;
  width:44px;height:44px;line-height:44px;text-align:center;margin-bottom:10px}


/* ---- Slider ---------------------------------------------------------- */
.slider{position:relative;overflow:hidden;background:#000}
.slider .folie{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.slider .folie.aktiv{opacity:1}
.slider .folie img{width:100%;height:100%;object-fit:cover;
  animation:kenburns 9s ease-out both}
.slider .folie:not(.aktiv) img{animation:none}
@keyframes kenburns{from{transform:scale(1.001)}to{transform:scale(1.075)}}
.slider .buehne{position:relative;height:clamp(260px,44vw,540px)}
.slider figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;
  padding:60px 26px 22px;font-size:1.12rem;font-weight:600}
.slider .pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(0,0,0,.42);color:#fff;border:0;width:48px;height:48px;font-size:1.7rem;
  line-height:1;cursor:pointer;border-radius:50%;margin:0}
.slider .pfeil:hover{background:var(--rot)}
.slider .pfeil.zurueck{left:16px}.slider .pfeil.vor{right:16px}
.slider .punkte{position:absolute;bottom:14px;left:0;right:0;z-index:3;
  display:flex;justify-content:center;gap:10px}
.slider .punkte button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;
  background:transparent;padding:0;margin:0;cursor:pointer}
.slider .punkte button[aria-current=true]{background:var(--rot);border-color:var(--rot)}

/* ---- Galerie mit Lightbox -------------------------------------------- */
.galerie figure{margin:0;position:relative;overflow:hidden;border-radius:3px}
.galerie a{display:block;position:relative;line-height:0}
.galerie img{transition:transform .5s ease}
.galerie a:hover img{transform:scale(1.06)}
.galerie figcaption{font-size:.9rem;color:#555;padding:7px 2px 0;line-height:1.4}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:900;
  display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lightbox[open],.lightbox.auf{display:flex}
.lightbox img{max-width:min(1200px,94vw);max-height:80vh;object-fit:contain}
.lightbox .bu{color:#fff;margin-top:14px;text-align:center;max-width:800px}
.lightbox button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;
  width:52px;height:52px;font-size:1.9rem;line-height:1;border-radius:50%;cursor:pointer;margin:0}
.lightbox button:hover{background:var(--rot)}
.lightbox .zu{top:20px;right:20px;font-size:1.5rem}
.lightbox .zurueck{left:20px;top:50%;transform:translateY(-50%)}
.lightbox .vor{right:20px;top:50%;transform:translateY(-50%)}

@media(prefers-reduced-motion:reduce){
  .slider .folie{transition:none}
  .slider .folie img{animation:none}
  .galerie img,.galerie a:hover img{transition:none;transform:none}
}
@media(max-width:700px){
  .slider figcaption{font-size:.95rem;padding:44px 16px 16px}
  .slider .pfeil{width:38px;height:38px;font-size:1.3rem}
  .lightbox .zurueck,.lightbox .vor{width:40px;height:40px;font-size:1.4rem}
}

@media(max-width:700px){
  nav.haupt a{padding:14px 18px;font-size:.82rem}
  h1{font-size:1.6rem}
  .topbar .wrap{justify-content:center;text-align:center}
  .hero img{max-height:300px}
}

/* ====================================================================
   Bewegung. Bewusst zurueckhaltend.
   KEINE Nachahmung von Spielablaeufen (Walzen, Muenzen, Gewinnanzeigen) -
   das waere Anreizwerbung nach GlueStV. Kein Blinken schneller als 3 Hz
   (WCAG 2.3.1, Photosensibilitaet). Alles unter prefers-reduced-motion aus.
   ==================================================================== */

/* Einblenden beim Scrollen */
.zeigt{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.zeigt.da{opacity:1;transform:none}
.zeigt.v1{transition-delay:.08s}.zeigt.v2{transition-delay:.16s}
.zeigt.v3{transition-delay:.24s}.zeigt.v4{transition-delay:.32s}

/* Leuchtakzent unter den Ueberschriften - greift die LED-Streifen der Halle auf */
h1,h2{position:relative}
main h1:after,main h2:after{content:"";position:absolute;left:0;bottom:-8px;height:3px;width:64px;
  background:linear-gradient(90deg,var(--rot),rgba(214,25,25,0));border-radius:2px;
  animation:leuchten 4.5s ease-in-out infinite}
@keyframes leuchten{
  0%,100%{width:64px;box-shadow:0 0 0 rgba(214,25,25,0)}
  50%{width:104px;box-shadow:0 0 14px rgba(214,25,25,.55)}}

/* Karten heben sich beim Darueberfahren */
.karte{transition:transform .35s ease,box-shadow .35s ease,border-top-color .35s ease}
.karte:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.16)}

/* Listenpunkte: Punkt waechst beim Darueberfahren */
ul.punkte li{transition:padding-left .3s ease,background .3s ease}
ul.punkte li:hover{padding-left:38px;background:rgba(214,25,25,.05)}
ul.punkte li:before{transition:transform .3s ease,box-shadow .3s ease}
ul.punkte li:hover:before{transform:scale(1.5);box-shadow:0 0 10px rgba(214,25,25,.7)}

/* Menue: Linie waechst von der Mitte */
nav.haupt a{position:relative}
nav.haupt a:after{content:"";position:absolute;left:50%;right:50%;bottom:8px;height:2px;
  background:#fff;transition:left .28s ease,right .28s ease}
nav.haupt a:hover:after,nav.haupt a[aria-current=page]:after{left:26px;right:26px}

/* Rote Infoleiste: sehr langsamer Lichtlauf, kein Blinken */
.band{position:relative;overflow:hidden}
.band:before{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  animation:lichtlauf 7s linear infinite}
@keyframes lichtlauf{to{left:110%}}

/* 18+ Plakette: ruhiges Pulsieren (2,8 s = weit unter 3 Hz) */
.ab18{animation:puls 2.8s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(214,25,25,.55)}
                70%{box-shadow:0 0 0 12px rgba(214,25,25,0)}}

/* Zurueck nach oben */
.hoch{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;
  background:var(--rot);color:#fff;border:0;font-size:1.5rem;line-height:1;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:500;margin:0}
.hoch.da{opacity:.92;pointer-events:auto}
.hoch:hover{opacity:1;transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  .zeigt{opacity:1;transform:none;transition:none}
  main h1:after,main h2:after,.band:before,.ab18{animation:none}
  .karte,.karte:hover,ul.punkte li,ul.punkte li:hover{transition:none;transform:none}
  nav.haupt a:after{transition:none}
  .hoch{transition:none}
}


/* ---- Burger-Menue fuer schmale Bildschirme ---- */
.menue-schalter{position:absolute;left:-9999px}
.menue-knopf{display:none}
.menue-knopf .striche{display:inline-flex;flex-direction:column;gap:4px}
.menue-knopf .striche span{display:block;width:22px;height:3px;background:#fff;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
@media(max-width:700px){
  nav.haupt .wrap{padding:0}
  .menue-knopf{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;padding:14px 20px;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .menue-schalter:focus-visible + .menue-knopf{outline:2px solid #fff;outline-offset:-4px}
  nav.haupt ul{display:none;flex-direction:column}
  .menue-schalter:checked ~ ul{display:flex}
  .menue-schalter:checked + .menue-knopf .striche span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menue-schalter:checked + .menue-knopf .striche span:nth-child(2){opacity:0}
  .menue-schalter:checked + .menue-knopf .striche span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav.haupt li{border-left:0;border-right:0;border-top:1px solid rgba(255,255,255,.35)}
  nav.haupt li:last-child{border-right:0;border-bottom:1px solid rgba(255,255,255,.35)}
  nav.haupt a{text-align:left;padding:14px 20px}
  nav.haupt a:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .menue-knopf .striche span{transition:none}
}