/* ── Fahrradwerkstatt Blankenese · Responsive CSS ── */

/* MOBILE CTA (only visible inside open hamburger menu) */
.mobile-cta { display: none !important; }

/* HAMBURGER BUTTON */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px 4px;
  background: none;
  border: none;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #2C3A40;
  border-radius: 2px;
  transition: all 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {

  /* ── NAV ── */
  .nav-inner {
    padding: 0 20px !important;
    height: 60px !important;
  }
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    flex-direction: column !important;
    padding: 20px !important;
    gap: 18px !important;
    border-bottom: 1px solid #D4E2E5 !important;
    z-index: 999 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    align-items: flex-start !important;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a { font-size: 15px !important; }
  .nav-cta { display: none !important; }
  .hamburger { display: flex !important; }
  .mobile-cta { display: block !important; }

  /* ── VACATION BANNER ── */
  #vacation-banner { padding: 12px 20px !important; }

  /* ── HERO ── */
  .hero-content { padding: 56px 20px 48px !important; }
  .hero-btns { flex-direction: column !important; }
  .hero-btns a { text-align: center !important; }

  /* ── TRUST STRIP ── */
  .trust-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 24px 20px !important;
  }
  [data-divider] { display: none !important; }

  /* ── SECTION PADDING ── */
  .section-pad  { padding: 60px 20px !important; }
  .page-hero    { padding: 48px 20px 40px !important; }
  .cta-band     { padding: 60px 20px !important; }

  /* ── GRIDS → 1 COLUMN ── */
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-bikes { grid-template-columns: 1fr !important; }
  .grid-testimonials { grid-template-columns: 1fr !important; }
  .booking-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* ── GALLERY ── */
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .gallery-grid > div { grid-column: 1 !important; height: 200px !important; }
  .gallery-grid > div:first-child { grid-column: span 2 !important; height: 260px !important; }

  /* ── SERVICES (leistungen.html) ── */
  .services-cards { grid-template-columns: 1fr !important; }

  /* ── ABOUT SECTION: flip order on mobile ── */
  .grid-2.about-grid { direction: ltr !important; }
  .grid-2.about-grid > div:first-child { order: 2 !important; }
  .grid-2.about-grid > div:last-child  { order: 1 !important; }

  /* portrait: don't let it take full screen height */
  .portrait-img { aspect-ratio: 3/2 !important; max-height: 320px !important; }

  /* ── CONTACT GRID ── */
  .contact-grid { gap: 48px !important; }

  /* ── CTA BAND BUTTONS ── */
  .cta-band .cta-btns {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ── FOOTER ── */
  .footer-top {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .footer-links {
    flex-direction: row !important;
    gap: 40px !important;
  }
  .site-footer { padding: 48px 20px 28px !important; }

  /* ── USP BAR ── */
  .usp-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  /* ── BOOKING IFRAME ── */
  .booking-iframe { height: 560px !important; }

  /* ── MISC ── */
  .hours-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .footer-links { flex-direction: column !important; gap: 24px !important; }
  .gallery-grid > div:first-child { grid-column: 1 !important; }
  .gallery-grid { grid-template-columns: 1fr !important; }
}