:root{
  --primary:#f69346;
  --bg:#121212;
  --text:#f1f1f1;
  --btn:#2c2c2c;
  --btn-hover:#3a3a3a;
  --muted:#9aa0ab;
}

html, body { height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;

  /* kein freies Seiten-Scrollen */
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}

/* === Slider (wir bewegen die Seite via transform) === */
.page{
  height:100svh;
  width:100%;
  will-change: transform;
  transition: transform 1000ms cubic-bezier(.2,.8,.2,1);
}

/* Jede Slide füllt den Viewport */
.slide{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:16px 0;
}

.container{ max-width:880px; width:100%; padding:0 18px; text-align:center }

/* Intro */
.logo{ width:min(80vw,360px); height:auto; margin:10px auto 12px; display:block }
.intro-title{ font-size:1.6rem; margin:.2em 0 .4em; color:#fff }
.intro-text{ font-size:1.05rem; line-height:1.6; color:#ddd }

/* Pfeil-Button */
.scroll-down{
  margin:18px auto 0;
  display:inline-flex; align-items:center; gap:.6em;
  padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  animation: floaty 2.2s ease-in-out infinite;
}
.scroll-down:hover{ transform:translateY(1px); background:rgba(255,255,255,.1) }
.scroll-down__icon{ font-size:1.1rem; line-height:1 }
.scroll-down__text{ font-weight:700; letter-spacing:.2px }
.scroll-down.ghost{ opacity:.85 }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }

/* BeerBike Überschrift */
.bb-title{
  color:var(--primary);
  font-size:1.6rem;
  margin:.2em 0 .6em;
}

/* Texte */
.lead{ font-size:1.1rem; line-height:1.6; margin:.35em 0 }
.lead.sub{ opacity:.95 }

/* Galerie (wischbar) */
.gallery{
  display:flex; gap:14px; overflow-x:auto;
  padding:8px; margin:12px 0;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.gallery figure{ flex:0 0 82%; margin:0; cursor:pointer }
.gallery img{ width:100%; border-radius:14px; display:block; box-shadow:0 2px 10px rgba(0,0,0,.45) }
.gallery figcaption{ text-align:center; margin-top:6px; opacity:.9 }

/* Kontakt */
.contact .contact-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:8px 0 14px
}
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:124px; border-radius:20px; text-decoration:none; color:#fff;
  font-weight:800; gap:10px; box-shadow:0 6px 20px rgba(0,0,0,.35)
}
.tile i{ font-size:2.2rem }
.tile span{ font-size:1.05rem }
.tile.email,.tile.phone{ background:var(--primary) }
.tile.whatsapp{ background:#25D366 }
.tile.instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%) }

.legal{ display:flex; gap:18px; justify-content:center; margin:8px 0 4px }
.legal a{ color:#cfd6ff; text-decoration:none }
.legal a:hover{ text-decoration:underline }
.copyright{ opacity:.8 }

/* Pager Dots */
.pager{
  position:fixed; left:0; right:0; bottom:14px;
  display:flex; gap:10px; justify-content:center; pointer-events:auto; z-index:50
}
.pager .dot{
  width:10px; height:10px; border-radius:50%;
  background:#666; border:0; padding:0; cursor:pointer;
  box-shadow:0 0 0 2px rgba(0,0,0,.25); transition:transform .12s ease;
}
.pager .dot:hover{ transform:scale(1.1) }
.pager .dot.active{ background:var(--primary) }

/* Modal (BikeTab – falls genutzt) */
.modal{ position:fixed; inset:0; display:none }
.modal.show{ display:block }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6) }
.modal__dialog{
  position:relative; z-index:2; max-width:560px; margin:10vh auto; padding:22px;
  background:#1a1a1a; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.6); text-align:left
}
.modal__close{ position:absolute; top:8px; right:12px; background:none; border:0; color:#fff; font-size:2rem; cursor:pointer }
.modal__list{ margin:.5em 0 1em 1.1em }
.modal__actions{ display:flex; gap:10px; flex-wrap:wrap }

/* Lightbox Popup */
.lightbox{
  position:fixed; inset:0; display:none; z-index:100;
}
.lightbox.show{ display:block; }
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter: blur(2px);
}
.lightbox__content{
  position:relative; z-index:1;
  max-width:min(92vw, 1100px);
  margin:6vh auto; padding:0 0 12px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.lightbox__img{
  max-width:100%; max-height:72vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  background:#000;
}
.lightbox__caption{
  color:#ddd; font-size:.95rem; text-align:center; margin-top:6px; padding:0 6px;
}
.lightbox__close{
  position:absolute; top:-8px; right:-8px;
  width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(0,0,0,.6); color:#fff; font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.2rem;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.lightbox__prev{ left:-6px; }
.lightbox__next{ right:-6px; }

/* Desktop Tweaks */
@media (min-width: 900px){
  .gallery figure{ flex:1 }
  .contact .contact-grid{ grid-template-columns:repeat(4,1fr) }
  .tile{ height:140px }
  .logo{ width:380px }
  .bb-title{ font-size:1.8rem }
  .lightbox__img{ max-height:78vh; }
}

/* a11y helper */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0
}