/* =====================================================
   Vortex Glanz Autozentrum — style.css
   Minimalist design: clean, generous spacing, subtle shadows
   Brand fonts: Trebuchet MS (display), Verdana (body)
   CRITICAL: Flexbox-only layouts (no grid/columns)
   ===================================================== */

/* -------------------------
   CSS Reset & Base Normalize
   ------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }

/* -------------------------
   Theme Variables & Defaults
   ------------------------- */
:root {
  --color-primary: #0F172A; /* slate-900/navy */
  --color-secondary: #475569; /* slate-600 */
  --color-accent: #FFB703; /* amber */
  --color-bg: #FFFFFF;
  --color-soft: #F8FAFC; /* ultra-light bg */
  --color-muted: #E5E7EB; /* light border */
  --color-muted-2: #CBD5E1;
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container-max: 1200px;
}

/* -------------------------
   Typography
   ------------------------- */
body {
  font-family: Verdana, "Segoe UI", Tahoma, sans-serif;
  color: var(--color-primary);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: 0.2px;
}

h1, h2, h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-weight: 700; line-height: 1.25; }
h1 { font-size: 34px; margin-bottom: 16px; }
h2 { font-size: 24px; margin-bottom: 14px; }
h3 { font-size: 18px; margin-bottom: 8px; }

p { margin-bottom: 14px; color: var(--color-secondary); }
strong { color: var(--color-primary); font-weight: 700; }

/* Accessible focus */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* -------------------------
   Containers & Layout Primitives (Flex-only)
   ------------------------- */
.container {
  display: flex; /* flex-only */
  flex-direction: column; /* mobile-first vertical flow */
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.content-wrapper {
  display: flex; /* flex-only */
  flex-direction: column;
  gap: 18px;
}

/* Mandatory spacing classes per requirements */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: #fff; border: 1px solid var(--color-muted); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Generic section spacing */
main > section { padding: 56px 0; border-top: 1px solid transparent; }
main > section:first-of-type { border-top: none; }

/* -------------------------
   Header & Navigation
   ------------------------- */
header { position: sticky; top: 0; background: #fff; z-index: 1000; border-bottom: 1px solid var(--color-muted); box-shadow: 0 1px 0 rgba(15,23,42,0.04); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
header img { height: 36px; width: auto; }

/* Desktop nav hidden by default (mobile-first) */
header nav { display: none; }
header nav a { color: var(--color-primary); opacity: 0.9; padding: 8px 10px; border-radius: 8px; transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease; }
header nav a:hover { background: var(--color-soft); opacity: 1; }

/* Header CTAs */
header nav a.primary-cta { background: var(--color-accent); color: #1A1A1A; font-weight: 700; box-shadow: var(--shadow-soft); }
header nav a.secondary-cta { border: 1px solid var(--color-muted); }
header nav a.primary-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }

/* Mobile menu toggle */
.mobile-menu-toggle {
  width: 40px; height: 40px; border-radius: 10px; background: var(--color-soft); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s ease, transform .2s ease; }
.mobile-menu-toggle:hover { background: #eef2f7; transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; background: rgba(15,23,42,0.04); z-index: 1100; display: flex; /* center wrapper via flex */
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.mobile-menu .mobile-nav-wrapper { /* optional wrapper if used by JS; safe default */ display: flex; }
.mobile-menu .mobile-nav {
  display: flex; flex-direction: column; gap: 10px; background: #fff; width: 85%; max-width: 360px; height: 100%; margin-left: auto;
  padding: 80px 22px 22px; border-left: 1px solid var(--color-muted); box-shadow: -6px 0 24px rgba(15,23,42,0.08);
  transform: translateX(100%); transition: transform .3s ease;
}
.mobile-menu .mobile-menu-close {
  position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 10px; background: var(--color-soft);
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary);
}
.mobile-menu .mobile-nav a { padding: 12px 10px; border-radius: 10px; color: var(--color-primary); border: 1px solid transparent; }
.mobile-menu .mobile-nav a:hover { background: var(--color-soft); }

/* Open states (for JS to toggle) */
.mobile-menu.open, .mobile-menu[aria-hidden="false"], body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
.mobile-menu.open .mobile-nav, .mobile-menu[aria-hidden="false"] .mobile-nav, body.menu-open .mobile-menu .mobile-nav { transform: translateX(0); }

/* -------------------------
   Hero
   ------------------------- */
.hero { background: var(--color-soft); }
.hero .content-wrapper { gap: 16px; }
.hero p { color: var(--color-secondary); max-width: 60ch; }

.trust-badges, .quick-links, .status-badges, .guarantee-badges, .benefit-badges, .certificate-badges, .benefit-list, .milestone-highlights, .advice-note, .finance-badge, .price-notes, .customer-care-info, .before-after-notes, .legal-note, .availability-disclaimer, .expected-timelines, .support-note, .tagline { color: var(--color-secondary); }

/* -------------------------
   Buttons & CTA Groups
   ------------------------- */
.cta-group, .card-cta-group, .quick-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.cta-button, a.primary-cta, a.secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--color-muted); background: #fff; color: var(--color-primary); transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow-soft); }
.cta-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }

.cta-button.primary { background: var(--color-accent); border-color: #E6A700; color: #1A1A1A; font-weight: 700; }
.cta-button.secondary { background: #fff; border-color: var(--color-muted); }
.cta-button.tertiary { background: #fff; border-style: dashed; }

/* -------------------------
   Feature / Content Lists & Chips
   ------------------------- */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div { flex: 1 1 260px; min-width: 240px; padding: 16px; border: 1px solid var(--color-muted); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease; }
.feature-grid > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.metrics { display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--color-secondary); }
.metrics li::before { content: "• "; color: var(--color-muted-2); }

.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--color-muted); background: #fff; color: var(--color-primary); }
.finance-badge, .advice-note, .status-badges, .guarantee-badges, .benefit-badges, .certificate-badges { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.finance-badge { padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--color-muted); box-shadow: var(--shadow-soft); width: fit-content; }

/* -------------------------
   Testimonials
   ------------------------- */
.testimonials .testimonial-list { display: flex; flex-wrap: wrap; gap: 20px; }
.testimonial-card { background: #fff; border: 1px solid var(--color-muted); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); flex: 1 1 280px; min-width: 260px; }
.testimonial-card blockquote { color: var(--color-primary); font-style: normal; }
.testimonial-card footer { color: var(--color-secondary); font-size: 14px; }
.rating-summary, .review-platform-badges { margin-top: 14px; color: var(--color-primary); }
.review-platform-badges span { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--color-muted); margin-right: 8px; }

/* -------------------------
   Contact Blocks & Info Rows
   ------------------------- */
.text-section { display: flex; flex-direction: column; gap: 10px; }
.contact-info { display: flex; flex-direction: column; gap: 8px; color: var(--color-primary); }
.contact-info img { width: 18px; height: 18px; display: inline-block; margin-right: 8px; vertical-align: middle; filter: grayscale(100%); opacity: 0.9; }
.contact-info a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

.contact-snippet, .quick-links, .trust-badges { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--color-secondary); }
.contact-snippet img { width: 16px; height: 16px; margin-right: 6px; }

.map-placeholder { display: flex; align-items: center; justify-content: center; height: 220px; border: 1px dashed var(--color-muted); border-radius: var(--radius-md); color: var(--color-secondary); background: #fff; }

/* -------------------------
   Lists in content sections
   ------------------------- */
main ul li, main ol li { color: var(--color-secondary); margin-bottom: 8px; }
main ol { counter-reset: item; }
main ol li { position: relative; padding-left: 28px; }
main ol li::before { counter-increment: item; content: counter(item) "."; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 700; }

/* -------------------------
   Page-specific small accents
   ------------------------- */
.results-overview { color: var(--color-secondary); }
.price-notes, .legal-note, .before-after-notes, .customer-care-info, .availability-disclaimer, .expected-timelines, .support-note { font-size: 14px; }
.tagline { font-style: italic; }
.milestone-highlights { color: var(--color-secondary); }

/* -------------------------
   Footer
   ------------------------- */
footer { border-top: 1px solid var(--color-muted); background: #fff; }
footer .container { gap: 12px; padding-top: 24px; padding-bottom: 24px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: var(--color-secondary); padding: 6px 8px; border-radius: 8px; }
.footer-nav a:hover { background: var(--color-soft); color: var(--color-primary); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--color-secondary); }
.footer-contact a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------
   Cookie Consent Banner & Modal
   ------------------------- */
.cookie-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: calc(100% - 32px); max-width: var(--container-max);
  background: #fff; border: 1px solid var(--color-muted); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 16px; z-index: 1200; display: none; /* hidden by default */ }
.cookie-banner.show { display: flex; }
.cookie-banner { flex-direction: column; gap: 12px; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--color-muted); box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cookie-banner .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.cookie-banner .btn-accept { background: var(--color-accent); border-color: #E6A700; color: #1A1A1A; font-weight: 700; }
.cookie-banner .btn-reject { background: #fff; }
.cookie-banner .btn-settings { background: #fff; }

.cookie-modal { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1300; display: none; align-items: center; justify-content: center; padding: 16px; }
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content { width: 100%; max-width: 720px; background: #fff; border: 1px solid var(--color-muted); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.cookie-modal .cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-muted); }
.cookie-modal .cookie-category:last-child { border-bottom: none; }
/* Simple toggle style (for inputs if present) */
.toggle { position: relative; width: 44px; height: 26px; background: var(--color-muted); border-radius: 999px; transition: background-color .2s ease; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-soft); transition: left .2s ease; }
.toggle.on { background: var(--color-accent); }
.toggle.on::after { left: 21px; }
.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* -------------------------
   Utilities & Micro-interactions
   ------------------------- */
.muted { color: var(--color-secondary); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.rounded { border-radius: var(--radius-md); }

/* Smooth fade/slide helpers */
.fade-in { animation: fadeIn .3s ease both; }
.slide-up { animation: slideUp .3s ease both; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* -------------------------
   Responsive Flex Behavior
   ------------------------- */
/* Text-image sections should stack on mobile and center vertically */
.text-image-section { align-items: center; }

/* Ensure all layout containers have gaps to prevent overlapping */
.content-wrapper, .feature-grid, .testimonial-list, .cta-group, .card-cta-group, .footer-nav, .footer-contact, .contact-info, .metrics { gap: 20px; }

/* -------------------------
   Page-specific section accents (light dividers)
   ------------------------- */
.services-overview, .services-offer, .services-areas, .services-finance, .services-tradein, .services-certificates, .services-emergency { background: #fff; }
.features, .features-process, .features-benefits, .features-competence, .features-prices, .features-compare, .features-transparency, .features-calculator, .features-documents, .features-history, .features-team, .features-route, .features-next-actions { background: #fff; }
.contact-quick, .contact-briefing, .contact-workshop, .contact-finance, .contact-wishlist, .contact-info, .contact-form-desc, .contact-jobs, .contact-direct, .contact-legal, .contact-cookies, .contact-data-protection, .contact-dsgvo { background: #fff; }
.legal-details, .legal-processing, .legal-basis, .legal-recipients, .legal-rights, .legal-cookies, .legal-forms, .legal-changes, .legal-obligation, .legal-rights-summary, .legal-tom, .legal-activity-reg, .legal-third-country, .legal-consent, .legal-consent-cookies, .legal-definition, .legal-types, .legal-third-party, .legal-cookie-list, .legal-services-content, .legal-booking, .legal-prices-liability, .legal-payment-rights, .legal-ip-rights, .legal-law-dispute, .legal-scope { background: #fff; }

/* -------------------------
   Desktop Enhancements
   ------------------------- */
@media (min-width: 768px) {
  h1 { font-size: 42px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }

  /* Stack-to-row behavior */
  .text-image-section { flex-direction: row; }

  .testimonial-card { flex-direction: row; }
}

@media (min-width: 992px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }

  /* Show desktop nav, hide burger */
  header nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mobile-menu-toggle { display: none; }

  /* Multi-column-like layouts via flex-basis */
  .feature-grid > div { flex: 1 1 calc(50% - 20px); }
  .testimonial-card { flex: 1 1 calc(33.33% - 20px); }
}

/* -------------------------
   Additional helper components present in HTML
   ------------------------- */
/* Results and badges rows */
.results-overview, .rating-summary, .review-platform-badges, .finance-badge { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Card CTA group spacing in vehicle list */
.card-cta-group .cta-button { flex: 1 1 180px; }

/* About & Legal pages spacing */
.about-mission .values-list { display: flex; flex-wrap: wrap; gap: 10px; }
.about-mission .values-list li { padding: 6px 10px; border: 1px solid var(--color-muted); border-radius: 999px; background: #fff; color: var(--color-primary); }

/* Map + travel info rows */
.parking-info, .public-transport-info, .accessibility-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--color-secondary); }

/* Quick actions (thanks page) */
.quick-actions .cta-button { flex: 1 1 200px; }

/* -------------------------
   Links & States
   ------------------------- */
a { transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--color-primary); opacity: 0.9; }

/* -------------------------
   Safety: Ensure spacing between sections & cards
   ------------------------- */
main > section + section { margin-top: 0; border-top: 1px solid rgba(15,23,42,0.04); }

/* Ensure no overlap: always have gaps in flex containers */
.content-wrapper > * + * { margin-top: 0; }

/* -------------------------
   Print adjustments (minimal)
   ------------------------- */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal, footer { display: none !important; }
  body { color: #000; }
}