/* ============================================================
   Trapp Sonnenschutzsysteme – Responsive CSS
   Breakpoints: Tablet 1024px | Mobile 768px | Small 480px
   ============================================================ */

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  height: 1.5px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ── */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  background: rgba(24,24,15,.98);
  z-index: 99;
  overflow-y: auto;
  padding: 24px 28px 48px;
  flex-direction: column;
  gap: 0;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s;
}
.nav-mobile-menu a:hover { color: var(--gold); }
.nav-mobile-menu .mob-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 20px 0 8px;
}
.nav-mobile-menu .mob-cta {
  margin-top: 24px;
  background: var(--gold);
  color: #fff !important;
  text-align: center;
  padding: 16px !important;
  font-weight: 600 !important;
  border: none !important;
}

/* ════════════════════════════════════════════════════════════
   TABLET (max-width: 1024px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .container { padding: 0 28px; }

  /* NAV */
  .nav-links, .nav-cta-btn, .nav-cta { display: none !important; }
  .nav-hamburger { display: flex; }

  /* HERO – Startseite */
  .hero-content { grid-template-columns: 1fr !important; }
  .hero-card { display: none; } /* Mini-Formular im Hero ausblenden */
  .hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem) !important; }

  /* HERO – Produktseiten */
  .hero-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
  .hero-badge { bottom: -16px !important; left: 16px !important; }

  /* USP GRID */
  .usp-grid { grid-template-columns: 1fr 1fr !important; }
  .usp-top  { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* PRODUKTE GRID */
  .produkte-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .produkt-card.wide { grid-column: span 2 !important; }

  /* SERVICE */
  .service-grid { grid-template-columns: 1fr 1fr !important; }
  .service-top  { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* PORTFOLIO */
  .portfolio-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .pi:first-child { grid-column: span 2 !important; }

  /* FAQ */
  .faq-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .faq-left  { position: static !important; }

  /* REGION */
  .region-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .region-map-placeholder { aspect-ratio: 16/9 !important; }

  /* CTA */
  .cta-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .cta-form  { padding: 32px 28px !important; }

  /* FOOTER */
  .footer-inner,
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }

  /* CONTENT GRIDS (Produktseiten) */
  .content-grid { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* VARIANTS */
  .variants-grid { grid-template-columns: 1fr 1fr !important; }

  /* RELATED */
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* CATALOG (Shop) */
  .catalog-grid { grid-template-columns: 1fr 1fr !important; }

  /* KONFIGURATOR */
  .konf-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* WHY */
  .why-grid { grid-template-columns: 1fr 1fr !important; }

  /* INQUIRY */
  .inquiry-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* KONTAKT */
  .contact-main-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* REPAIR */
  .repair-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* SECTION PADDING */
  section { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE (max-width: 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .container { padding: 0 20px; }

  /* SECTION PADDING */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* TYPOGRAPHY */
  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }

  /* HERO */
  .hero { min-height: 85vh !important; }
  .hero h1 { font-size: clamp(2rem, 7vw, 3rem) !important; max-width: 100% !important; }
  .hero-sub { font-size: 14px !important; margin-bottom: 28px !important; }
  .hero-actions { gap: 10px !important; }
  .hero-actions a { padding: 12px 20px !important; font-size: 13px !important; }
  .hero-metrics { gap: 24px !important; padding-top: 28px !important; margin-top: 36px !important; }
  .hero-metric-val { font-size: 2rem !important; }

  /* GEO STRIP */
  .geo-strip { padding: 12px 0 !important; }

  /* USP */
  .usp-grid  { grid-template-columns: 1fr !important; }
  .usp-card  { padding: 32px 24px !important; }

  /* PRODUKTE GRID */
  .produkte-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .produkt-card.wide { min-height: 220px !important; }
  .produkt-card { aspect-ratio: 4/3 !important; }
  .produkt-card-content h3 { font-size: 1rem !important; }

  /* SERVICE */
  .service-grid { grid-template-columns: 1fr !important; }
  .service-card { padding: 36px 28px !important; }

  /* PORTFOLIO */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .pi:first-child { grid-column: 1 !important; }
  .pi-mehr { min-height: 140px !important; }

  /* PARTNER */
  .partner-inner { flex-direction: column !important; gap: 20px !important; align-items: flex-start !important; }

  /* REGION */
  .region-cities { gap: 6px !important; }
  .city-chip { font-size: 12px !important; padding: 5px 12px !important; }

  /* CTA */
  .cta-checklist li { font-size: 13px !important; }
  .contact-info { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }

  /* FOOTER */
  .footer-inner,
  .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* FORM ROWS */
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* INTRO STRIP */
  .intro-strip-inner { grid-template-columns: 1fr !important; gap: 1px !important; }

  /* VARIANTS */
  .variants-grid { grid-template-columns: 1fr !important; }
  .variant-card  { padding: 28px 22px !important; }

  /* GALERIE */
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 180px 180px 180px !important;
  }
  .gallery-item:first-child { grid-column: span 2 !important; }

  /* CONTROL SECTION */
  .control-inner { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* RELATED */
  .related-grid { grid-template-columns: 1fr 1fr !important; }

  /* CATALOG */
  .catalog-grid { grid-template-columns: 1fr !important; }
  .prod-card-footer { flex-direction: column !important; gap: 14px !important; align-items: flex-start !important; }

  /* KONF STEPS */
  .konf-steps { gap: 1px !important; }
  .konf-step  { padding: 16px 18px !important; }
  .konf-visual { min-height: 200px !important; }

  /* WHY */
  .why-grid { grid-template-columns: 1fr !important; }

  /* INQUIRY */
  .inquiry-form { padding: 28px 22px !important; }

  /* CTA BANNER */
  .cta-banner-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cta-banner-actions { flex-direction: row !important; flex-wrap: wrap !important; }

  /* FAQ */
  .faq-q { font-size: 14px !important; }

  /* HERO STATS (Referenzen) */
  .hero-stats-row { flex-direction: column !important; gap: 12px !important; }

  /* PAGE HERO */
  .page-hero { padding: 36px 0 48px !important; }
  .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }

  /* BREADCRUMB */
  .bc-inner { padding: 12px 0 14px !important; }

  /* FILTER BAR */
  .filter-inner { gap: 6px !important; padding: 12px 0 !important; }
  .filter-btn, .btn-ghost { padding: 6px 12px !important; font-size: 12px !important; }

  /* COOKIE BANNER */
  #trapp-cookie-banner { padding: 20px 20px !important; flex-direction: column !important; gap: 16px !important; }
  #trapp-cookie-banner .tc-actions { width: 100% !important; justify-content: stretch !important; }
  #trapp-cookie-banner .tc-actions .tc-btn { flex: 1 !important; justify-content: center !important; }

  /* IMPRESSUM / DATENSCHUTZ */
  .legal-content { font-size: 14px; }
  .legal-content h2 { font-size: 1.2rem !important; }
}

/* ════════════════════════════════════════════════════════════
   SMALL MOBILE (max-width: 480px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .container { padding: 0 16px; }

  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  .hero-actions { flex-direction: column !important; }
  .hero-actions a { width: 100% !important; justify-content: center !important; }

  .produkte-grid { grid-template-columns: 1fr !important; }
  .produkt-card.wide { min-height: 200px !important; }

  .related-grid { grid-template-columns: 1fr !important; }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .gallery-item:first-child { grid-column: 1 !important; }
  .gallery-item { min-height: 220px !important; }

  .usp-header { grid-template-columns: 1fr !important; }
  .produkte-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .portfolio-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  .btn-primary, .btn-dark, .btn-outline { padding: 12px 20px !important; font-size: 13px !important; }

  .footer-inner,
  .footer-grid { gap: 28px !important; }

  #trapp-cookie-modal-box { margin: 0 !important; border-radius: 0 !important; }
  #trapp-cookie-modal { align-items: flex-end !important; padding: 0 !important; }
}