:root{
  --bg:#070d16;
  --bg-soft:#0d1624;
  --surface:#111c2e;
  --surface-2:#0d1726;
  --text:#eef4ff;
  --muted:#9eaeca;
  --line:rgba(173,196,232,.2);
  --brand:#77a8ff;
  --brand-2:#f2c16b;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(165deg, rgba(6,12,22,.7) 0%, rgba(9,16,28,.92) 42%, rgba(10,18,31,.98) 100%),
    url('https://images.boostpixel.de/api/assets/2c7f64c5-d2f7-480a-a49b-c67636b37e78/thumbnail?size=preview&key=NteLWr08-zM-L1z1kxtLGANunvSAiaD4C9xliWxy2JcNW1IuOwvgcObT9OPNkaRICgw&c=yfcFBIA2h3h0iYdwmZaKn6z5uA%3D%3D');
  background-size:cover, cover;
  background-position:top center, top center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  background-color:var(--bg);
  line-height:1.55;
  min-height:100svh;
}

.container{width:min(1080px,calc(100% - 2rem));margin:0 auto}
a{text-decoration:none;color:inherit}

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,14,24,.84);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:1rem}
.brand img{height:32px;width:auto;display:block}
.nav-links{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{color:var(--muted);font-weight:600;font-size:.94rem}
.nav-links a:hover{color:var(--text)}
.nav-ig-mobile{display:none}
.nav-ig-mobile svg{width:1rem;height:1rem;display:block}
.mobile-top-links{display:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.54rem .9rem;min-height:36px;
  border-radius:11px;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;
  line-height:1.15;
  border:1px solid transparent;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  backdrop-filter:blur(3px);
}
.btn-icon{width:1rem;height:1rem;display:inline-block;flex:0 0 auto;opacity:.92;position:relative;top:.02em}
.btn-primary{
  background:linear-gradient(135deg, rgba(80,120,190,.32), rgba(45,72,122,.36));
  color:#f4f7ff;
  border-color:rgba(130,167,224,.62);
  box-shadow:0 6px 18px rgba(30,52,87,.24);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(30,52,87,.3)}
.nav-cta-group{display:flex;align-items:center;gap:.48rem}
.nav-cta-sep{color:rgba(180,198,228,.65);font-weight:600}
.nav-cta{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:.2rem 0;
  min-height:auto;
  color:var(--muted);
}
.nav-cta:hover{
  color:var(--text);
  transform:none;
  box-shadow:none;
}
.nav-cta-bikes{font-size:.92rem;letter-spacing:.01em}
.btn-ghost{border-color:rgba(161,186,226,.28);background:rgba(143,170,210,.09)}
.btn-ghost:hover{background:rgba(167,194,234,.16);border-color:rgba(190,211,243,.42)}

.btn-instagram{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:.2rem 0;
  min-height:auto;
  color:var(--muted);
  justify-content:center;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.btn-instagram:hover{
  color:var(--text);
  transform:none;
  box-shadow:none;
}

.hero{padding:4.8rem 0 2.4rem}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:.9rem;align-items:stretch}

.hero-grid > .card,
.hero-grid > .preview{
  opacity:0;
  transform:translateY(22px);
  animation:flyInUp .72s cubic-bezier(.22,.61,.36,1) forwards;
  will-change:transform, opacity;
}
.hero-grid > .preview{animation-delay:.14s}

@keyframes flyInUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  .hero-grid > .card,
  .hero-grid > .preview{
    animation:none;
    opacity:1;
    transform:none;
  }

  .gallery-grid.reveal-ready .gallery-item,
  .reveal-grid.reveal-ready > *,
  .timeline-item-reveal{
    opacity:1;
    transform:none;
    transition:none;
    animation:none;
  }
}

@media (max-width: 720px){
  .hero{padding:4rem 0 2rem}
  .hero .card{
    max-width:none;
    padding:1.35rem 1.05rem;
    text-align:left;
  }
  .lead{margin:0 0 1rem;max-width:unset}
  .hero .row{justify-content:flex-start}
}

.card{
  background:linear-gradient(180deg,rgba(16,28,46,.62) 0%,rgba(13,22,36,.5) 100%);
  border:1px solid rgba(170,196,232,.24);
  border-radius:var(--radius);
  padding:1.3rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(205,222,246,.05);
}
.hero .card{
  max-width:760px;
  margin:0 auto;
  padding:1.7rem 1.6rem;
  text-align:center;
}
.badge{
  display:inline-flex;align-items:center;
  padding:.3rem .6rem;
  border:1px solid rgba(242,193,107,.38);
  background:rgba(242,193,107,.08);
  border-radius:999px;
  font-size:.78rem;
  color:#d5e1f7;
}
h1{font-size:clamp(2.2rem,4.8vw,3.45rem);line-height:1.08;margin:.8rem 0 .55rem;letter-spacing:-.02em}
.grad{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);margin:0 auto 1rem;max-width:46ch}
.next-event{
  margin:0 0 1rem;
  color:#d4e4ff;
  font-size:.95rem;
  min-height:1.35em;
  opacity:1;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease;
}
.next-event.is-updating{
  opacity:.45;
  transform:translateY(2px);
}
@media (prefers-reduced-motion: reduce){
  .next-event,
  .next-event.is-updating{
    transition:none;
    transform:none;
    opacity:1;
  }
}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.hero .row{justify-content:center}
.hero .row .btn{
  min-width:156px;
  justify-content:center;
  border-radius:10px;
  padding:.58rem .95rem;
}
.hero .row .btn-icon{width:1.02rem;height:1.02rem;top:.01em}

.preview{
  display:grid;
  gap:.75rem;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  align-self:stretch;
}
.stat{
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem 1.05rem;
  background:rgba(132,157,193,.08);
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:92px;
  gap:.3rem;
  transition:background-color .18s ease, border-color .18s ease;
}
.stat:hover,
.stat:focus-within{
  background:rgba(92,114,145,.12);
  border-color:rgba(173,196,232,.26);
}
.stat strong{display:block;font-size:1.01rem;line-height:1.25}
.stat span{color:var(--muted);font-size:.92rem;line-height:1.45;max-width:34ch}
.stat-brands,
.stat-community,
.stat-photographers{position:relative;padding-right:6rem}
.stat-brands .stat-float-icon,
.stat-community .stat-float-icon,
.stat-photographers .stat-float-icon{
  position:absolute;
  right:2.15rem;
  top:50%;
  transform:translateY(-50%);
  width:3rem;
  height:3rem;
  opacity:.9;
  color:#dce9ff;
  pointer-events:none;
}

.stat span a{color:#c9dcff;text-decoration:underline;text-underline-offset:2px}
.stat span a:hover{color:#e4efff}

.section{padding:1.2rem 0}
#about,#benefits,#community-fotografen{scroll-margin-top:92px}
.section h2{margin:0 0 .35rem;font-size:clamp(1.35rem,2.5vw,1.85rem);letter-spacing:-.01em}
.section p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-top:.85rem}
.photographer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{border:1px solid var(--line);border-radius:12px;background:rgba(131,156,192,.07);padding:1rem}
#benefits .tile{transition:background-color .18s ease,border-color .18s ease}
#benefits .tile:hover,
#benefits .tile:focus-within{background:rgba(92,114,145,.12);border-color:rgba(173,196,232,.26)}
.tile h3{margin:.05rem 0 .28rem;font-size:1rem}
.tile p{margin:0;color:var(--muted);font-size:.93rem}
.tile .btn{margin-top:.65rem}
.photographer-tile{
  background:transparent;
  border:none;
  padding:.2rem 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.photographer-tile .btn{margin-top:.3rem}
.photographer-tile h3{
  font-size:1.14rem;
  margin:.12rem 0 .4rem;
}

.photographer-link{
  display:inline-block;
  border-radius:12px;
  outline:none;
}
.photographer-logo{
  display:block;
  width:100%;
  max-width:170px;
  height:auto;
  margin:0 auto .4rem;
  border-radius:10px;
  border:none;
  background:transparent;
  object-fit:contain;
  transition:transform .2s ease, filter .2s ease;
}
.photographer-link:hover .photographer-logo,
.photographer-link:focus-visible .photographer-logo{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.06);
}
.photographer-avatar{
  width:132px;
  height:132px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(122,162,255,.65);
  box-shadow:0 10px 24px rgba(8,12,22,.35), 0 0 0 4px rgba(122,162,255,.14);
}

.gallery-section{padding-top:1rem}
.gallery-grid{
  margin-top:.9rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}
.gallery-item{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.gallery-grid.reveal-ready .gallery-item,
.reveal-grid.reveal-ready > *{
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--delay,0ms);
  will-change:transform, opacity;
}
.gallery-grid.reveal-ready .gallery-item.is-visible,
.reveal-grid.reveal-ready > *.is-visible{
  opacity:1;
  transform:none;
}
@keyframes benefitTileIn{
  from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

.benefits-reveal > .tile{
  opacity:0;
  transform:translateY(26px) scale(.985);
  filter:blur(2px);
}
.benefits-reveal.reveal-ready > .tile{
  transition:opacity .62s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .62s ease;
}
.benefits-reveal.reveal-ready > .tile.is-visible{
  opacity:1;
  transform:none;
  filter:none;
  animation:benefitTileIn .68s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--delay,0ms);
}
.gallery-item .gallery-link{
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
}
.gallery-item .gallery-link::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(4,10,18,.72);
  opacity:0;
  transition:opacity .26s ease;
  z-index:1;
}
.gallery-item .gallery-link::after{
  content:attr(data-hover-label);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:clamp(1.2rem,2.8vw,1.95rem);
  letter-spacing:.03em;
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.72);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .26s ease, transform .26s ease;
  z-index:2;
}
.gallery-item img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:saturate(.86) contrast(.97) brightness(.9);
  transform:scale(1.001);
  transition:transform .32s ease, filter .32s ease;
}
.gallery-item:hover img,
.gallery-item:focus-within img{
  transform:scale(1.03);
  filter:saturate(.84) contrast(.98) brightness(.68);
}
.gallery-item:hover .gallery-link::before,
.gallery-item:focus-within .gallery-link::before{
  opacity:1;
}
.gallery-item:hover .gallery-link::after,
.gallery-item:focus-within .gallery-link::after{
  opacity:1;
  transform:translateY(0);
}

@media (hover: none){
  .gallery-item .gallery-link::before{
    opacity:0;
  }
  .gallery-item .gallery-link::after{
    display:none;
  }
}

.footer{margin-top:1.4rem;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem 0 1.7rem;color:var(--muted);font-size:.9rem}
.footer-links{display:flex;gap:.8rem;flex-wrap:wrap}
.footer-links a:hover{color:var(--text)}

.legal-wrap{padding-top:1.1rem}
.legal-impressum{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.legal-impressum .legal-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:1.1rem;
  padding-bottom:1.1rem;
}
.legal-impressum .legal-card{
  width:min(760px,100%);
}
.legal-card h1{margin:.45rem 0 1rem;font-size:clamp(1.5rem,2.4vw,2rem)}
.legal-content{color:var(--text);line-height:1.65}
.legal-content a{color:#b8d3ff;text-decoration:underline;text-underline-offset:2px}
.legal-content-long{font-size:.96rem}

.kalender-page{padding-top:1.35rem;padding-bottom:1.35rem}
.kalender-card{max-width:700px;margin:0 auto;padding:1rem .95rem}
.kalender-card h1{margin:.35rem 0 .5rem;font-size:clamp(1.35rem,2.2vw,1.85rem)}
.kalender-card .lead{margin:0 0 .75rem;font-size:.95rem}
.termine-list{display:grid;gap:.55rem;margin:.8rem 0 .8rem}
.timeline{
  position:relative;
  display:grid;
  gap:.55rem;
}
.timeline::before{
  content:"";
  position:absolute;
  left:9px;
  top:.95rem;
  bottom:.95rem;
  width:2px;
  background:linear-gradient(180deg, rgba(151,186,245,.95), rgba(120,156,216,.35));
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:118px 1fr;
  gap:.65rem;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(131,156,192,.06);
  padding:.62rem .72rem;
  margin-left:1.45rem;
}
.timeline-item-reveal{
  opacity:0;
  transform:translateY(14px) scale(.99);
  animation:timelineItemIn .56s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--delay,0ms);
}
@keyframes timelineItemIn{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:none}
}
.timeline-marker{
  position:absolute;
  left:-1.45rem;
  top:0;
  bottom:0;
  width:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.timeline-dot{
  width:.72rem;
  height:.72rem;
  border-radius:50%;
  background:#8cb3ff;
  border:2px solid rgba(7,13,22,.92);
  box-shadow:0 0 0 3px rgba(130,167,224,.18);
  position:relative;
  z-index:2;
}
.timeline-line{display:none}
.timeline-item:last-child .timeline-line{display:none}
.timeline-date{
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.01em;
  color:#e5efff;
  align-self:center;
}
.timeline-content{align-self:center}
.timeline-content h2{margin:0 0 .16rem;font-size:.98rem;line-height:1.25}
.timeline-content p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.35}
.termin-next{
  border-color:rgba(130,167,224,.58);
  background:linear-gradient(135deg, rgba(80,120,190,.18), rgba(45,72,122,.18));
}
.termin-next .timeline-dot{
  background:#b5ceff;
  box-shadow:0 0 0 3px rgba(130,167,224,.28);
}

@media (max-width:920px){
  .kalender-card{padding:.92rem .85rem}
  .timeline{gap:.5rem}
  .timeline::before{left:8px;top:.9rem;bottom:.9rem}
  .timeline-item{grid-template-columns:1fr;gap:.2rem;padding:.62rem .68rem;margin-left:1.25rem}
  .timeline-marker{left:-1.25rem;width:16px}
  .timeline-date{font-size:.92rem;grid-column:auto}
  .timeline-content{grid-column:auto}
}

@media (max-width:920px){
  .hero{padding:2.2rem 0 1.8rem}
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .photographer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row .btn{flex:1 1 100%}
  .hero h1{font-size:clamp(2.35rem,9vw,3rem)}
  .hero .row .btn{font-size:1rem;min-height:42px}

  .nav-inner{
    padding:.7rem 0;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:.6rem;
  }
  .brand img{height:28px}
  .nav-cta-group{display:none}
  .nav-cta{display:none}

  .nav-links{
    margin-left:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.72rem;
    min-width:0;
    white-space:nowrap;
  }
  .nav-links a{
    flex:0 0 auto;
    padding:.2rem 0;
    font-size:.92rem;
    color:var(--muted);
  }
  .nav-links a:hover{color:var(--text)}
  .nav-desktop-only{display:none}
  .nav-termine{display:inline-flex}
  .nav-links a[href="#benefits"],
  .nav-links a[href="/#benefits"]{display:none}
  .nav-home-desktop{display:none}
  .nav-ig-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:.25rem;
    position:relative;
    top:1px;
  }
  .nav-ig-mobile svg{width:1.14rem;height:1.14rem}
  .mobile-top-links{display:none}
  #about,#benefits,#community-fotografen{scroll-margin-top:92px}
}

@media (max-width:620px){
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.55rem;
  }
  .gallery-item img{aspect-ratio:4/3}
}