/* ═══════════════════════════════════════
KUON GmbH – Mobile Responsive CSS
═══════════════════════════════════════ */

/* ── HAMBURGER MENU (immer aktiv, unabhängig von Breakpoint) ── */
.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 – immer bereit, wird per JS geöffnet */
.mobile-menu {
display: none;
position: fixed;
left: 0;
right: 0;
top: 100px; /* 40px ticker + 60px nav */
background: white;
border-bottom: 2px solid #D30018;
padding: 8px 16px 16px;
z-index: 99;
flex-direction: column;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.mobile-menu.open { display: flex !important; }
.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; }

/* ── BREAKPOINT 900px ── */
@media (max-width: 900px) {
.hamburger { display: flex !important; }
.nav-links { display: none !important; }
.nav-right > div { display: none !important; }
.nav-right > a { display: none !important; }
}

/* ── BREAKPOINT 768px ── */
@media (max-width: 768px) {
nav { height: 60px !important; top: 40px !important; }
.nav-inner { padding: 0 16px !important; }
.logo img { height: 32px !important; }

/* DIESEL TICKER – kompakt auf Mobile */
#diesel-ticker { height: 40px !important; min-height: 40px !important; flex-wrap: nowrap !important; overflow: hidden !important; }
.ticker-label { font-size: 11px !important; padding: 0 10px !important; gap: 5px !important; }
.ticker-scroll { overflow: hidden !important; }
.ticker-track { white-space: nowrap !important; display: flex !important; align-items: center !important; gap: 16px !important; }
/* Zweites ticker-item (Adresse) auf Mobile verstecken */
.ticker-item:nth-child(2) { display: none !important; }
.ticker-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 8px !important; }
.ticker-price { font-size: 15px !important; }
.ticker-date { font-size: 10px !important; }
/* "Dieselpreis Tankstelle KUON Weitingen" Label kürzen */
.ticker-item span:first-child { display: none !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; }
}