/* ===============================
   ZollaAbbru Fahrzeugfinder – style.css
   Design: monochrome_sophisticated (black/white/gray, dramatic contrast, elegant type)
   Layout: Mobile-first, Flexbox-only
   Fonts: Trebuchet MS (display), Verdana (body)
   =============================== */

/* -------- CSS Reset & Base Normalize -------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding-left: 1.25rem; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; border: none; background: none; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #0B2B44; outline-offset: 2px; }

/* -------- Design Tokens (with fallbacks) -------- */
:root {
  --brand-primary: #0B2B44;
  --brand-secondary: #2E7D6E;
  --brand-accent: #F5F7FA;
  --c-bg: #FFFFFF;
  --c-ink: #0A0A0A;
  --c-text: #141414;
  --c-muted: #6A6A6A;
  --c-soft: #F2F2F3;
  --c-panel: #FAFAFA;
  --c-border: #E6E6E7;
  --c-border-strong: #CFCFD2;
  --c-inverse: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.12);
}

/* -------- Base Typography -------- */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
}
h1, h2, h3 {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  line-height: 1.25;
  color: var(--c-ink);
  letter-spacing: 0.2px;
}
h1 { font-size: 32px; margin-bottom: 12px; }
h2 { font-size: 24px; margin-bottom: 16px; }
h3 { font-size: 18px; margin-bottom: 10px; }
.subheadline { color: #E6E6E7; max-width: 68ch; }
section p, .text-section p { margin-bottom: 12px; }
.small, .note, .disclaimer { font-size: 14px; color: var(--c-muted); }
strong { color: var(--c-ink); }

/* -------- Global Layout Containers (Flexbox only) -------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: #FFFFFF; border: 1px solid var(--c-border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Apply section rhythm to all sections */
main > section { padding: 40px 0; border-bottom: 1px solid var(--c-border); }
main > section:last-of-type { border-bottom: none; }

/* -------- Header & Navigation -------- */
.site-header { position: sticky; top: 0; z-index: 900; background: #FFFFFF; border-bottom: 1px solid var(--c-border); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.site-header .container { padding: 12px 16px; }
.site-header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.logo img { height: 36px; width: auto; }

.main-nav {
  display: none;
  gap: 16px;
}
.main-nav a { color: var(--c-ink); padding: 8px 10px; border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; }
.main-nav a:hover { background: var(--c-soft); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--c-ink); background: #FFFFFF; color: var(--c-ink); text-decoration: none; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: var(--shadow-sm); }
.button:hover { transform: translateY(-1px); background: #F6F6F7; }
.button:active { transform: translateY(0); }
.button.primary { background: #0E0E10; color: #FFFFFF; border-color: #0E0E10; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.button.primary:hover { background: #000000; }
.button.secondary { background: #FFFFFF; color: #0E0E10; border-color: #0E0E10; }
.button.secondary:hover { background: #F4F4F5; }
.button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Hero */
.hero { background: #0B0B0C; color: #FFFFFF; padding: 56px 0; }
.hero h1 { color: #FFFFFF; font-size: 28px; }
.hero .subheadline { color: #DADADB; }
.hero .cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .button.secondary { color: #FFFFFF; border-color: #FFFFFF; background: transparent; }
.hero .button.secondary:hover { background: rgba(255,255,255,0.08); }

/* Trust badges, contact-inline, service-areas */
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; color: #F1F1F1; }
.badge img { width: 18px; height: 18px; filter: invert(1) grayscale(1) brightness(1.2); }

.contact-inline, .service-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #E6E6E7; }
.contact-inline img, .service-areas img { width: 18px; height: 18px; filter: invert(1) grayscale(1) brightness(1.2); }
.service-areas a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* Feature grid / service cards / price cards */
.feature-grid, .service-cards, .service-list, .price-teaser, .price-cards, .testimonial-list, .faq-list, .contact-blocks { display: flex; flex-wrap: wrap; gap: 20px; }
.feature, .service-card { flex: 1 1 280px; background: #FFFFFF; border: 1px solid var(--c-border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.feature:hover, .service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.price-teaser .card, .price-cards .card { flex: 1 1 280px; background: #FFFFFF; border: 1px solid var(--c-border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.price-teaser .card:hover, .price-cards .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.price-cards .card h3 { font-size: 20px; }
.price-cards .card p strong { font-size: 20px; }

/* Lists & Steps */
.usps-list, .inclusions, .city-list { display: flex; flex-direction: column; gap: 8px; }
.steps { display: flex; flex-wrap: wrap; gap: 10px; counter-reset: step; padding-left: 0; list-style: none; }
.steps li { counter-increment: step; flex: 1 1 260px; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 12px 12px 44px; position: relative; }
.steps li::before { content: counter(step); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: #0E0E10; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* Testimonials (light background, dark text for contrast) */
.testimonial-list { align-items: stretch; }
.testimonial-card { flex: 1 1 320px; }
.testimonial-card p { color: var(--c-ink); font-style: italic; }
.testimonial-card .author { color: var(--c-muted); font-size: 14px; }
.rating { color: var(--c-ink); font-weight: 600; }

/* FAQ */
.faq-item { flex: 1 1 320px; background: #FFFFFF; border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.faq-item h3 { font-size: 18px; }

/* Text sections */
.text-section { display: flex; flex-direction: column; gap: 12px; max-width: 72ch; }
.text-section h3 { margin-top: 6px; }
.text-section ul { display: flex; flex-direction: column; gap: 6px; padding-left: 1.1rem; }

/* Utility elements */
.note { color: var(--c-muted); }
.disclaimer { color: var(--c-muted); font-size: 14px; }
.certifications { display: flex; align-items: center; gap: 14px; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: 12px; padding: 12px 14px; }
.certifications img { width: 20px; height: 20px; filter: grayscale(1); }

/* Footer */
.site-footer { background: #0B0B0C; color: #FFFFFF; padding: 40px 0; }
.site-footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-brand, .footer-links, .footer-legal, .footer-contact { flex: 1 1 240px; }
.site-footer h3 { color: #FFFFFF; font-size: 16px; margin-bottom: 10px; }
.site-footer p, .site-footer a { color: #D9D9DA; }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .social { display: flex; gap: 10px; margin-top: 8px; }
.site-footer .social a img { width: 20px; height: 20px; filter: invert(1) grayscale(1); opacity: 0.85; transition: opacity 0.2s ease; }
.site-footer .social a:hover img { opacity: 1; }
.newsletter-note { color: #BEBEBF; font-size: 14px; }

/* Links */
a { color: #0E0E10; text-decoration: underline; text-decoration-color: rgba(14,14,16,0.25); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
a:hover { color: var(--brand-primary); text-decoration-color: var(--brand-primary); }
.hero a { color: #FFFFFF; text-decoration-color: rgba(255,255,255,0.35); }
.hero a:hover { text-decoration-color: #FFFFFF; }

/* Mobile Navigation (Hamburger) */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--c-border); background: #FFFFFF; box-shadow: var(--shadow-sm); }
.mobile-menu-toggle:hover { background: var(--c-soft); }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 86vw; max-width: 420px;
  background: #0B0B0C; color: #FFFFFF; z-index: 1200; padding: 18px; display: flex; flex-direction: column; gap: 16px;
  transform: translateX(100%); transition: transform 0.35s ease; box-shadow: -16px 0 40px rgba(0,0,0,0.26);
}
.mobile-menu.open, body.menu-open .mobile-menu { transform: translateX(0%); }
.mobile-menu-close { align-self: flex-end; width: 42px; height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); color: #FFFFFF; }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav a { padding: 14px 10px; border-radius: 8px; color: #FFFFFF; min-height: 44px; display: flex; align-items: center; border: 1px solid transparent; }
.mobile-nav a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }

/* Hide/show nav based on viewport */
@media (min-width: 900px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* Cookie Consent Banner & Modal */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; background: #FFFFFF; border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.10); transform: translateY(100%); transition: transform 0.35s ease;
}
.cookie-banner.visible { transform: translateY(0%); }
.cookie-banner .inner { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.cookie-banner .content { display: flex; flex-direction: column; gap: 8px; }
.cookie-banner .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .button { border-color: var(--c-ink); }
.cookie-banner .button.accept { background: #0E0E10; color: #FFFFFF; border-color: #0E0E10; }
.cookie-banner .button.reject { background: #FFFFFF; }
.cookie-banner .button.settings { background: var(--brand-accent); border-color: var(--c-border-strong); }

.cookie-modal {
  position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.cookie-modal.open { opacity: 1; pointer-events: auto; }
.cookie-modal-content {
  background: #FFFFFF; color: var(--c-text); width: 92vw; max-width: 720px; border-radius: 14px; border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg); padding: 18px; display: flex; flex-direction: column; gap: 16px;
}
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-panel); }
.cookie-toggle { display: inline-flex; align-items: center; gap: 8px; }
.cookie-toggle input[type="checkbox"] { width: 18px; height: 18px; }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Cards & Micro-interactions */
.card h3 { margin-bottom: 8px; }
.card ul { display: flex; flex-direction: column; gap: 6px; padding-left: 1.1rem; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Inline details rows */
.contact-inline, .service-areas { gap: 8px; }

/* Images within content */
.text-image-section img { border-radius: 12px; box-shadow: var(--shadow-sm); }

/* Accessibility & Focus enhancements */
.main-nav a:focus-visible, .mobile-nav a:focus-visible, .button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Desktop refinements */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .hero { padding: 80px 0; }
  .hero h1 { font-size: 48px; }
  .content-wrapper { gap: 24px; }
  .feature, .service-card { flex: 1 1 calc(50% - 20px); }
  .price-teaser .card, .price-cards .card { flex: 1 1 calc(33.333% - 20px); }
  .testimonial-card { flex: 1 1 calc(50% - 20px); }
  .faq-item { flex: 1 1 calc(50% - 20px); }
}
@media (min-width: 1080px) {
  .feature, .service-card { flex: 1 1 calc(33.333% - 20px); }
  .testimonial-card { flex: 1 1 calc(33.333% - 20px); }
  .faq-item { flex: 1 1 calc(33.333% - 20px); }
}

/* Text-image alignment requirement on mobile */
@media (max-width: 768px) { .text-image-section { flex-direction: column; } }

/* Tables (if any) basic look consistent with monochrome) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--c-border); }

/* Header actions spacing in tight view */
.site-header .button.primary { display: none; }
@media (min-width: 1024px) { .site-header .button.primary { display: inline-flex; } }

/* Hero internal groups */
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* Specific content tweaks per pages */
.note { background: var(--c-panel); padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 8px; display: inline-flex; }

/* Badges on light sections (fallback) */
section:not(.hero) .trust-badges .badge { color: var(--c-ink); border-color: var(--c-border); }
section:not(.hero) .trust-badges .badge img { filter: grayscale(1); }

/* Contact blocks */
.contact-blocks .text-section { flex: 1 1 260px; background: #FFFFFF; border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.contact-blocks .text-section h3 { display: flex; align-items: center; gap: 8px; }
.contact-blocks .text-section h3 img { width: 18px; height: 18px; filter: grayscale(1); }

/* Headers inside sections spacing */
main > section .container > .content-wrapper > h2 + .text-section,
main > section .container > .content-wrapper > h2 + .feature-grid,
main > section .container > .content-wrapper > h2 + .service-cards,
main > section .container > .content-wrapper > h2 + .service-list,
main > section .container > .content-wrapper > h2 + .price-cards,
main > section .container > .content-wrapper > h2 + .price-teaser,
main > section .container > .content-wrapper > h2 + .testimonial-list,
main > section .container > .content-wrapper > h2 + .faq-list { margin-top: 4px; }

/* Visual separators */
.separator { height: 1px; background: var(--c-border); width: 100%; }

/* Monochrome emphasis blocks */
.emphasis-dark { background: #0E0E10; color: #FFFFFF; border-radius: 14px; padding: 20px; }
.emphasis-dark a { color: #FFFFFF; }

/* List item spacing defaults */
ul li, ol li { margin-bottom: 6px; }

/* Z-index sanity */
.site-header { z-index: 900; }
.mobile-menu { z-index: 1200; }
.cookie-banner { z-index: 1300; }
.cookie-modal { z-index: 1400; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero .content-wrapper > * { animation: fadeInUp 0.5s ease both; }
.hero .content-wrapper > *:nth-child(2) { animation-delay: 0.05s; }
.hero .content-wrapper > *:nth-child(3) { animation-delay: 0.1s; }
.hero .content-wrapper > *:nth-child(4) { animation-delay: 0.15s; }

/* Prevent overlapping & maintain gaps */
.feature, .service-card, .card, .faq-item, .testimonial-card { margin-bottom: 20px; }

/* Ensure readable testimonials on any background */
section .testimonial-card { background: #FFFFFF; color: var(--c-text); }

/* Brand personality subtleties (borders and focus accents) while keeping monochrome) */
.border-accent { border-color: var(--brand-primary) !important; }
.text-accent { color: var(--brand-primary) !important; }
.bg-accent { background: var(--brand-accent) !important; }

/* END */