/* Mystical Roads Autohaus & Service - style.css */
/* Reset & Normalize */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 16px 20px; padding: 0; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid #FF7A00; outline-offset: 2px; }

/* Theme Variables */
:root {
  --color-primary: #0D2C3F;
  --color-secondary: #FF7A00;
  --color-accent: #F5F7FA;
  --color-bg: #FFFFFF;
  --color-text: #0D2C3F;
  --color-muted: #6B7C88;
  --color-border: #D8E1E8;
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-s: 0 1px 2px rgba(13,44,63,0.06), 0 2px 6px rgba(13,44,63,0.08);
  --shadow-m: 0 6px 16px rgba(13,44,63,0.12);
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --maxw: 1200px;
}

/* Base Typography */
body {
  font-family: Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  margin: 0 0 12px 0;
}
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; margin-top: 8px; }
h3 { font-size: 18px; line-height: 1.4; }
p { margin: 0 0 12px 0; color: var(--color-text); }
strong { font-weight: 700; }

/* Links */
a { color: var(--color-primary); transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease; }
a:hover { color: var(--color-secondary); }

/* Layout Primitives (Flex-only) */
.container {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* Sections */
section { margin-bottom: var(--space-60); padding: var(--space-40) 20px; background: var(--color-bg); }
/* Mandatory spacing class: keep exact selector as requested */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Geometric accents for sections (structured separators) */
section .container { border-top: 2px solid var(--color-border); padding-top: var(--space-24); }

/* Header & Navigation */
header { position: relative; z-index: 20; background: #fff; border-bottom: 2px solid var(--color-border); }
.main-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 16px;
}
.main-navigation img { width: 140px; height: auto; margin-right: auto; }
.main-navigation a {
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  color: var(--color-primary);
}
.main-navigation a:hover { background: var(--color-accent); }

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 6px;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primary { background: var(--color-secondary); color: #0A0A0A; border-color: var(--color-secondary); box-shadow: var(--shadow-s); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); }
.btn-secondary { background: #fff; color: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-s); }
.btn-secondary:hover { background: var(--color-primary); color: #fff; }

/* Value props inline list */
.value-props-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.value-props-inline li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-accent);
  font-size: 14px;
}

/* CTA Buttons group */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* Badges and small info bars */
.trust-badges, .kpi-bar, .award-badges, .guetesiegel, .badge-probefahrt-hinweis, .price-disclaimer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  background: var(--color-accent);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.trust-badges span, .kpi-bar span, .award-badges span, .guetesiegel span { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary); }
.trust-badges img { width: 20px; height: 20px; }

/* Search filters (Fahrzeuge) */
.search-bar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-s);
}
.search-bar-filters label { font-weight: 700; font-size: 14px; color: var(--color-primary); }
.search-bar-filters input {
  flex: 1 1 120px;
  min-width: 120px;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
}
.search-bar-filters input:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(255,122,0,0.2); }

/* Filter bar (Fahrzeuge list) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 2px solid var(--color-border);
}
.filter-bar .sorting-controls strong { color: var(--color-primary); }

/* Service cards & Feature grid */
.service-cards, .feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.service-card, .feature-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 260px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-s);
}
.feature-grid > div img { width: 36px; height: 36px; }
.feature-grid > div h3 { margin-top: 4px; }

/* KPI bar (high contrast, structured) */
.kpi-bar { font-weight: 700; }

/* Steps list */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin-left: 0;
}
.step-list li {
  list-style: none;
  border-left: 6px solid var(--color-secondary);
  padding: 10px 12px 10px 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-s);
}

/* Rating summary */
.rating-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-primary);
}
.rating-summary img { width: 22px; height: 22px; }

/* Testimonials - high readability on light background */
.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; /* mandatory pattern retained */ }
.testimonial-card {
  flex: 1 1 280px;
  background: var(--color-accent);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-s);
}
.testimonial-card p { margin: 0; color: var(--color-primary); }
.testimonial-card span { color: var(--color-muted); }

/* Review highlights list */
.review-highlights ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0;
  padding: 0;
}
.review-highlights li {
  list-style: none;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 6px;
}

/* Address & Map placeholder */
address { font-style: normal; }
.map-embed-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  color: var(--color-muted);
}
.map-embed-placeholder img { width: 22px; height: 22px; }

/* Fahrzeug cards */
.vehicle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.vehicle-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 300px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-s);
}
.vehicle-card h3 { margin-bottom: 6px; }
.vehicle-card ul { margin: 0 0 8px 18px; }
.vehicle-price { font-family: "Trebuchet MS", Tahoma, sans-serif; font-size: 18px; font-weight: 700; color: var(--color-primary); }

/* Lists of benefits */
.service-benefits, .kpi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
}
.service-benefits li, .kpi-list li {
  list-style: none;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}

/* Text blocks */
.text-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Footer */
footer { background: #0F3348; color: #E7EEF4; border-top: 4px solid var(--color-secondary); }
footer .container { padding-top: 24px; padding-bottom: 24px; }
.footer-navigation, .legal-links, .contact-info, .social-links, .newsletter-form-optin {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}
.footer-navigation a, .legal-links a, .contact-info a { color: #E7EEF4; }
.footer-navigation a:hover, .legal-links a:hover { color: var(--color-secondary); }
.social-links img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: 0.9; }
.newsletter-form-optin p { margin: 0; color: #E7EEF4; }

/* Contact snippets */
.contact-snippet { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--color-primary); }
.contact-snippet img { width: 18px; height: 18px; }

/* Mobile Navigation */
.mobile-menu-toggle {
  position: relative;
  z-index: 21;
  width: 44px; height: 44px;
  margin: 8px 16px 8px auto;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  color: var(--color-primary);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  transform: translateX(100%);
  transition: transform 300ms ease;
  z-index: 30;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end;
  margin: 12px 16px 0 0;
  width: 44px; height: 44px;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}
.mobile-nav a {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
}
.mobile-nav a:hover { background: rgba(255,255,255,0.1); }

/* Show/Hide desktop nav based on viewport */
@media (max-width: 992px) {
  .main-navigation a { display: none; }
  .main-navigation img { margin-right: 0; }
  .mobile-menu-toggle { display: flex; }
}
@media (min-width: 993px) {
  .mobile-menu-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* Cookie Consent Banner */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border-top: 3px solid var(--color-secondary);
  box-shadow: 0 -10px 24px rgba(13,44,63,0.15);
  padding: 16px;
  transform: translateY(110%);
  transition: transform 280ms ease;
  z-index: 40;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; color: var(--color-primary); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn-accept { background: var(--color-secondary); color: #111; border: 2px solid var(--color-secondary); border-radius: 6px; padding: 10px 14px; }
.cookie-actions .btn-reject { background: #fff; color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 6px; padding: 10px 14px; }
.cookie-actions .btn-settings { background: var(--color-accent); color: var(--color-primary); border: 2px solid var(--color-border); border-radius: 6px; padding: 10px 14px; }
.cookie-actions button:hover { transform: translateY(-1px); box-shadow: var(--shadow-s); }

/* Cookie Preferences Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(13,44,63,0.6);
  z-index: 50;
}
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content {
  display: flex; flex-direction: column; gap: 14px;
  width: min(92%, 640px);
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-m);
  padding: 18px;
}
.cookie-modal .cookie-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.cookie-modal .cookie-row:last-child { border-bottom: none; }
/* Toggle switch */
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
}
.toggle input { appearance: none; width: 44px; height: 24px; background: var(--color-border); border-radius: 20px; position: relative; transition: background 200ms ease; }
.toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-s); transition: transform 200ms ease; }
.toggle input:checked { background: var(--color-secondary); }
.toggle input:checked::after { transform: translateX(20px); }
.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.cookie-modal .actions .btn-save { background: var(--color-secondary); border: 2px solid var(--color-secondary); color: #111; padding: 10px 14px; border-radius: 6px; }
.cookie-modal .actions .btn-cancel { background: #fff; border: 2px solid var(--color-primary); color: var(--color-primary); padding: 10px 14px; border-radius: 6px; }

/* Utility cards and containers (mandatory patterns) */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Buttons within content cards */
.service-card .btn-secondary, .vehicle-card .btn-secondary { align-self: flex-start; }

/* Angular/geometric visual touches */
.service-card, .vehicle-card, .testimonial-card, .feature-grid > div {
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 0% 100%);
}

/* Lists inside cards - spacing */
.service-card ul, .vehicle-card ul { padding-left: 18px; }

/* Accessibility and micro-interactions */
.btn-primary:active, .btn-secondary:active { transform: translateY(0); }

/* Responsive rules */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
  .content-wrapper { gap: var(--space-16); }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}
@media (min-width: 1025px) {
  h1 { font-size: 42px; }
  h2 { font-size: 28px; }
  .container { gap: var(--space-32); }
}

/* High-contrast info bars */
.badge-probefahrt-hinweis { color: var(--color-primary); }

/* Legal text pages tweaks */
section .container .content-wrapper > h2 + ul,
section .container .content-wrapper > h2 + p { margin-top: 4px; }

/* Make sure all interactive elements have visible hover */
a.btn-primary:hover, a.btn-secondary:hover { text-decoration: none; }

/* Ensure spacing between content blocks */
.content-wrapper > * + * { margin-top: 0; }

/* Ensure no overlap in dense areas */
.service-cards > *, .feature-grid > *, .vehicle-list > *, .testimonial-list > * { min-width: 260px; }

/* Header alignment improvement on desktop */
@media (min-width: 993px) {
  .main-navigation { gap: 10px; }
  .main-navigation a.btn-primary, .main-navigation a.btn-secondary { margin-left: 6px; }
}

/* Price disclaimer emphasis */
.price-disclaimer p { margin: 0; font-size: 14px; color: var(--color-muted); }

/* Footer layout stacks */
footer .footer-navigation, footer .legal-links { border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 12px; }

/* Icons inside inline contact rows */
section img[alt^="Karte"], section img[alt^="Telefon"], section img[alt^="E-Mail"], section img[alt="Karte"], section img[alt="Bewertung"] { display: inline-block; }

/* Ensuring testimonials have dark text on light bg for readability */
.testimonial-card, .rating-summary { color: var(--color-primary); }

/* End of stylesheet */