/* ═══════════════════════════════════════
   KUON GmbH – Mobile Responsive CSS
   Eingebunden in alle HTML-Seiten
═══════════════════════════════════════ */

@media (max-width: 768px) {
  nav { height: 60px !important; }
  .nav-inner { padding: 0 16px !important; }
  .nav-links { display: none !important; }
  .nav-right > div:first-child { display: none !important; }
  .logo img { height: 32px !important; }

  /* HAMBURGER */
  .hamburger { display: flex !important; }
  .mobile-menu.open { display: flex !important; }

  /* DIESEL TICKER */
  #diesel-ticker { height: auto !important; min-height: 36px !important; padding: 4px 8px !important; flex-wrap: wrap !important; }
  .ticker-scroll { overflow: hidden !important; }
  .ticker-track { white-space: normal !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; justify-content: center !important; }
  .ticker-item { font-size: 10px !important; padding: 2px 6px !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; border: none !important; }
  .ticker-price { font-size: 12px !important; }
  .ticker-label { font-size: 9px !important; padding: 2px 6px !important; }
  .ticker-date { font-size: 9px !important; }

  /* HERO */
  .hero { min-height: auto !important; padding-top: 100px !important; }
  .hero-inner { grid-template-columns: 1fr !important; padding: 32px 16px 48px !important; gap: 24px !important; }
  .hero h1 { font-size: clamp(30px, 9vw, 50px) !important; }
  .hero-desc { font-size: 14px !important; }
  .hero-actions { flex-direction: column !important; gap: 10px !important; }
  .hero-actions a, .hero-actions button { width: 100% !important; justify-content: center !important; text-align: center !important; }
  .price-card { width: 100% !important; min-width: unset !important; position: static !important; }

  /* PAGE HERO */
  .page-hero { padding: 88px 16px 40px !important; }
  .page-hero h1 { font-size: clamp(28px, 9vw, 48px) !important; }
  .page-hero p { font-size: 14px !important; }

  /* TRUST BAR */
  .trust-inner { gap: 8px !important; flex-wrap: wrap !important; justify-content: center !important; padding: 10px 16px !important; }
  .trust-divider { display: none !important; }
  .trust-item { font-size: 11px !important; }
  .trust-item img { height: 18px !important; }

  /* SECTIONS */
  section { padding: 40px 16px !important; }
  .section-inner { padding: 0 !important; }
  .section-title { font-size: clamp(24px, 7vw, 36px) !important; }
  .section-desc { font-size: 14px !important; }

  /* GRIDS */
  .hero-inner,
  .why-grid,
  .partner-grid,
  .werte-grid,
  .kontakt-grid,
  .lg-grid,
  .pr-grid,
  .types-grid,
  .oeffnung-grid,
  .container-grid,
  .notdienst-inner,
  .faq-grid,
  .news-grid,
  .reviews-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  .products-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .abfall-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .ablauf-steps { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .ablauf-steps::before { display: none !important; }
  .stats-inner { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .cf-row, .af-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .why-features { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* ACCORDION */
  .acc-header { padding: 14px 16px !important; gap: 10px !important; }
  .acc-icon-wrap { width: 36px !important; height: 36px !important; font-size: 16px !important; flex-shrink: 0 !important; }
  .acc-title { font-size: 15px !important; }
  .acc-body { padding: 0 16px !important; }
  .acc-item.open .acc-body { padding: 0 16px 20px !important; }

  /* ABFALL CARDS */
  .abfall-card { padding: 14px !important; }
  .abfall-icon { font-size: 26px !important; margin-bottom: 8px !important; }
  .abfall-title { font-size: 12px !important; }
  .abfall-desc { font-size: 11px !important; }

  /* FORMS */
  .container-form, .anfrage-form { padding: 20px 16px !important; border-radius: 16px !important; }

  /* TIMELINE */
  .tl-station { grid-template-columns: 1fr !important; gap: 12px !important; padding-left: 32px !important; }
  .tl-empty { display: none !important; }
  .tl-stations::before { left: 12px !important; }
  .tl-center { flex-direction: row !important; justify-content: flex-start !important; gap: 8px !important; }

  /* GOOGLE REVIEWS */
  .google-header { flex-direction: column !important; gap: 12px !important; }

  /* CTA */
  .cta-inner { flex-direction: column !important; text-align: center !important; gap: 20px !important; }
  .cta-buttons { flex-direction: column !important; align-items: center !important; }
  .cta-buttons a { width: 100% !important; justify-content: center !important; }

  /* FOOTER */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .footer-legal { justify-content: center !important; flex-wrap: wrap !important; }

  /* SOCIAL FLOAT */
  #social-float { bottom: 16px !important; right: 16px !important; gap: 8px !important; }
  .sf-btn { width: 44px !important; height: 44px !important; }

  /* LEGAL */
  .legal-content { padding: 40px 16px !important; }
}

@media (max-width: 480px) {
  .abfall-grid { grid-template-columns: 1fr !important; }
  .ablauf-steps { grid-template-columns: 1fr !important; }
  .stats-inner { grid-template-columns: 1fr !important; }
  .why-features { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: clamp(26px, 8vw, 38px) !important; }
}

/* ═══════════════════════════════════════
   HAMBURGER MENU
═══════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  margin-left: 8px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1A1F2E;
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 2px solid #D30018;
  padding: 8px 16px 16px;
  z-index: 98;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid #F2F2F2;
  display: block;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover, .mobile-menu a.active { color: #D30018; }