/* =============================
   Autokauf Navigator – Scandinavian Clean UI
   Mobile-first, Flexbox-only, Accessible, Brand-consistent
   ============================= */
/* --- CSS Reset & Base Normalize --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #1A1F24; background-color: #FFFFFF; line-height: 1.6; font-size: 16px; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 16px 24px; padding: 0; }
p { margin: 0 0 16px; }
h1, h2, h3 { margin: 0 0 12px; font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif; color: #0E3A5B; line-height: 1.25; }
h1 { font-size: 32px; letter-spacing: 0.2px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
a { color: #0E3A5B; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; }
a:hover { color: #1E6B3F; }
a:focus-visible, button:focus-visible { outline: 2px solid #1E6B3F; outline-offset: 2px; }
small, .muted { color: #6B7280; }
strong { font-weight: 700; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid #E6EBF1; margin: 24px 0; }

/* --- Theme Tokens (CSS Vars with fallbacks) --- */
:root {
  --color-primary: #0E3A5B;
  --color-secondary: #1E6B3F;
  --color-accent: #F4F7FB;
  --color-ink: #1A1F24;
  --color-muted: #6B7280;
  --color-line: #E6EBF1;
  --color-surface: #FFFFFF;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(14,58,91,0.06), 0 1px 8px rgba(14,58,91,0.04);
  --shadow-md: 0 6px 18px rgba(14,58,91,0.10);
}

/* --- Layout Primitives (Flexbox-only) --- */
.container { display: flex; width: 100%; justify-content: center; padding: 0 20px; }
.content-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; max-width: 1100px; }

/* Mandatory spacing utility (as requested) */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Also ensure native section spacing for provided HTML */
main > section { display: flex; }
main > section > .container { padding-top: 24px; padding-bottom: 24px; }

/* Spacing helpers for lists inside text blocks */
.text-section { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.text-section ul, .text-section ol { margin: 0 0 8px 20px; }
.text-section li { margin: 0 0 6px; }

/* --- Header & Navigation --- */
header { display: flex; width: 100%; background: #FFFFFF; border-bottom: 1px solid var(--color-line); position: relative; z-index: 20; }
header .container { align-items: center; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 36px; width: auto; }

/* Desktop navigation (hidden on mobile by default) */
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--color-ink); padding: 8px 10px; border-radius: var(--radius-sm); font-weight: 500; }
.main-nav a:hover { background: var(--color-accent); color: var(--color-primary); }
.main-nav a[aria-current="page"] { color: var(--color-primary); font-weight: 700; }

/* CTA link in nav */
.main-nav .cta { background: var(--color-primary); color: #FFFFFF; padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.main-nav .cta:hover { background: #124A76; }

/* Mobile burger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-line); background: #FFFFFF; color: var(--color-primary); font-size: 20px; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; }
.mobile-menu-toggle:hover { background: var(--color-accent); transform: translateY(-1px); }

/* Mobile menu overlay/panel */
.mobile-menu { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.25); transform: translateX(100%); transition: transform 0.3s ease; z-index: 60; }
.mobile-menu .mobile-nav { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; width: 84%; max-width: 360px; margin-left: auto; padding: 20px; box-shadow: var(--shadow-md); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; background: none; border: 0; color: var(--color-muted); font-size: 20px; cursor: pointer; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.mobile-menu-close:hover { background: var(--color-accent); color: var(--color-primary); }
.mobile-nav a { display: flex; align-items: center; padding: 12px 10px; border-radius: var(--radius-sm); color: var(--color-ink); font-size: 16px; }
.mobile-nav a:hover { background: var(--color-accent); color: var(--color-primary); }

/* --- Hero --- */
.hero { display: flex; width: 100%; background: var(--color-accent); }
.hero .content-wrapper { padding: 24px 0 8px; }
.hero h1 { font-size: 28px; color: var(--color-primary); }
.hero p { color: #2C3137; max-width: 70ch; }

/* CTA rows */
.cta-row, .micro-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Trust badges */
.trust-badges { display: flex; flex-direction: column; gap: 8px; }
.trust-badges ul { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; list-style: none; margin: 0; }
.trust-badges li { display: flex; align-items: center; gap: 8px; color: #2C3137; padding: 6px 10px; background: #FFFFFF; border: 1px solid var(--color-line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.trust-badges img { width: 18px; height: 18px; }
.city-note { color: var(--color-muted); font-size: 14px; }

/* --- Buttons --- */
.button, .main-nav .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; text-decoration: none; border-radius: 999px; padding: 12px 16px; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button.primary { background: var(--color-secondary); color: #FFFFFF; }
.button.primary:hover { background: #165432; }
.button.secondary { background: #FFFFFF; color: var(--color-primary); border-color: var(--color-primary); }
.button.secondary:hover { background: var(--color-accent); }

/* --- Content blocks --- */
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }

/* Text + Image pattern */
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.text-image-section > * { flex: 1 1 320px; }

/* Features */
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #FFFFFF; box-shadow: var(--shadow-sm); }

/* Testimonials (Readable, high contrast) */
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #FFFFFF; color: #1A1F24; box-shadow: var(--shadow-sm); }
.testimonial-card p { margin: 0; }
.testimonial-card + .testimonial-card { margin-top: 12px; }

/* Breadcrumbs inside hero cta-row or hero */
.hero nav[aria-label="Brotkrumen"], .cta-row nav[aria-label="Brotkrumen"] { display: flex; flex-wrap: wrap; gap: 6px; color: var(--color-muted); font-size: 14px; }
.hero nav[aria-label="Brotkrumen"] span { color: var(--color-muted); }

/* --- Footer --- */
footer { display: flex; width: 100%; background: var(--color-primary); color: #E9EEF4; margin-top: 24px; }
footer a { color: #E9EEF4; }
footer a:hover { color: #FFFFFF; }
footer .content-wrapper { padding: 28px 0; }
footer .text-section h3 { color: #FFFFFF; margin-bottom: 8px; font-size: 18px; }
footer .text-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* --- Forms & Inputs (generic) --- */
input, select, textarea { font-family: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-line); background: #FFFFFF; color: var(--color-ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #B9E3C8; border-color: #8BD0A6; }
label { display: flex; margin-bottom: 6px; color: var(--color-ink); }

/* --- Cookie Consent Banner --- */
.cookie-banner { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; transform: translateY(110%); transition: transform 0.35s ease; }
.cookie-banner.open { transform: translateY(0); }
.cookie-banner .container { padding: 12px 20px; }
.cookie-banner .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; background: #FFFFFF; border-top: 1px solid var(--color-line); box-shadow: 0 -8px 20px rgba(14,58,91,0.08); border-radius: 12px 12px 0 0; padding: 16px; }
.cookie-text { display: flex; flex-direction: column; gap: 6px; color: var(--color-ink); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .accept { background: var(--color-secondary); color: #FFFFFF; border: 1px solid var(--color-secondary); }
.cookie-buttons .accept:hover { background: #165432; }
.cookie-buttons .reject { background: #FFFFFF; color: var(--color-primary); border: 1px solid var(--color-primary); }
.cookie-buttons .reject:hover { background: var(--color-accent); }
.cookie-buttons .settings { background: #FFFFFF; color: var(--color-ink); border: 1px solid var(--color-line); }
.cookie-buttons .settings:hover { background: var(--color-accent); }

/* Cookie Modal */
.cookie-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 80; align-items: center; justify-content: center; }
.cookie-overlay.open { display: flex; }
.cookie-modal { display: flex; flex-direction: column; gap: 16px; background: #FFFFFF; width: 92%; max-width: 720px; border-radius: var(--radius-md); border: 1px solid var(--color-line); box-shadow: var(--shadow-md); padding: 20px; }
.cookie-modal h3 { margin-bottom: 4px; }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #FAFCFE; }
.cookie-note { color: var(--color-muted); font-size: 14px; }

/* Toggle switch (for Analytics/Marketing) */
.switch { position: relative; display: inline-flex; align-items: center; width: 46px; height: 26px; background: #CBD5E1; border-radius: 999px; transition: background-color 0.2s; }
.switch::after { content: ""; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; margin-left: 3px; transition: transform 0.2s; box-shadow: var(--shadow-sm); }
.switch.on { background: #1E6B3F; }
.switch.on::after { transform: translateX(18px); }

.cookie-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* --- Accessibility helpers --- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Responsive --- */
@media (min-width: 480px) {
  h1 { font-size: 36px; }
  .hero h1 { font-size: 32px; }
}

@media (min-width: 768px) {
  body { font-size: 18px; }
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }

  .hero .content-wrapper { padding: 32px 0 12px; }
  .hero h1 { font-size: 40px; }

  /* Show desktop nav, hide burger */
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Align common two-column content if needed */
  .content-grid > * { flex: 1 1 calc(50% - 10px); }
}

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

  .hero h1 { font-size: 48px; }
  .cta-row, .micro-cta-row { gap: 16px; }
}

/* --- Additional spacing & alignment guarantees --- */
/* Ensure minimum gaps between content blocks */
.content-wrapper > * + * { margin-top: 4px; }
main .content-wrapper > .testimonial-card { margin-top: 0; }

/* Ensure no overlaps and clear z-index stacking */
header, .mobile-menu, .cookie-banner, .cookie-overlay { z-index: 50; }
.mobile-menu { z-index: 60; }
.cookie-banner { z-index: 70; }
.cookie-overlay { z-index: 80; }

/* --- Page-specific small touches --- */
/* Contact icons line-up */
.text-section p img { display: inline-block; vertical-align: middle; margin-right: 8px; width: 18px; height: 18px; }
.text-section p a { text-decoration: underline; text-underline-offset: 2px; }

/* Lists inside pricing for clear hierarchy */
.pricing-list li, .text-section li { line-height: 1.5; }

/* Active links across site */
a[aria-current="page"] { font-weight: 700; color: var(--color-primary); }

/* --- Hover & Motion micro-interactions --- */
.button, .main-nav a, .mobile-nav a, .card, .feature-item, .testimonial-card { transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.card:hover, .feature-item:hover, .testimonial-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --- Flexbox Compliance (No CSS Grid used) --- */
/* Re-affirm 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; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* --- Print basics (optional) --- */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-overlay { display: none !important; }
  a { text-decoration: underline; }
  header, footer { border: 0; }
}