/* =====================================================
   Fahrlicht Passage Autoservice – style.css
   Geometric Structured UI • Mobile-first • Flexbox-only
   ===================================================== */

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

/* 2) Theme Variables (with fallbacks) */
:root {
  --c-primary: #0B2B3C;
  --c-secondary: #FF6B00;
  --c-accent: #F2F6F9;
  --c-text: #0A0F12;
  --c-muted: #5B6B75;
  --c-border: #D7E0E7;
  --c-white: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(10,15,18,0.06), 0 2px 8px rgba(10,15,18,0.06);
  --shadow-md: 0 4px 12px rgba(10,15,18,0.10);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-30: 30px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-60: 60px; --sp-72: 72px;
  --tr-fast: 180ms ease;
}

/* 3) Typography */
html { font-size: 16px; }
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* body */
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: "Trebuchet MS", Verdana, Geneva, Tahoma, sans-serif; /* display */ color: var(--c-primary); letter-spacing: 0.2px; }
h1 { font-size: 2rem; line-height: 1.2; margin-bottom: var(--sp-16); }
h2 { font-size: 1.6rem; line-height: 1.3; margin-bottom: var(--sp-16); }
h3 { font-size: 1.125rem; margin-bottom: var(--sp-12); }
p { font-size: 0.95rem; color: var(--c-text); }
.subheadline { color: var(--c-muted); margin-top: var(--sp-8); margin-bottom: var(--sp-20); }

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

/* Mandatory spacing and alignment patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; }
.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; }

/* 5) Header */
header { border-bottom: 4px solid var(--c-primary); background: var(--c-white); position: sticky; top: 0; z-index: 100; }
header .container { align-items: center; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-12) 0; }
.logo { display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }
.main-nav { display: none; align-items: center; gap: var(--sp-20); }
.main-nav a { color: var(--c-primary); padding: 10px 8px; border-bottom: 2px solid transparent; transition: border-color var(--tr-fast), color var(--tr-fast); font-weight: 600; }
.main-nav a:hover, .main-nav a:focus { color: var(--c-secondary); border-color: var(--c-secondary); }
.header-cta { display: none; align-items: center; gap: var(--sp-12); }

/* 6) Buttons (Geometric: chamfered corners) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; position: relative; color: var(--c-white); background: var(--c-primary); transition: transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast), color var(--tr-fast); box-shadow: var(--shadow-sm); clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px); }
.btn.primary { background: var(--c-secondary); color: var(--c-white); }
.btn.secondary { background: var(--c-primary); color: var(--c-white); }
.btn:hover, .btn:focus { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* 7) Hero */
.hero { background: var(--c-accent); border-bottom: 4px solid var(--c-secondary); }
.hero .container { padding-top: var(--sp-32); padding-bottom: var(--sp-32); }
.hero h1 { color: var(--c-primary); font-size: 1.9rem; }
.hero .subheadline { font-size: 1rem; }
.cta-group { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* 8) Lists in content (geometric bullets and structure) */
.content-wrapper > ul, .content-wrapper > ol { display: flex; flex-direction: column; gap: 10px; padding-left: 0; }
.content-wrapper > ul li, .content-wrapper > ol li { position: relative; padding-left: 28px; color: var(--c-text); }
/* Square bullets */
.content-wrapper > ul li::before { content: ""; width: 10px; height: 10px; background: var(--c-secondary); position: absolute; left: 0; top: 9px; }
/* Numbered visual rail for ol */
.content-wrapper > ol { counter-reset: step; }
.content-wrapper > ol li { counter-increment: step; }
.content-wrapper > ol li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid var(--c-primary); color: var(--c-primary); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* 9) Trust badges */
.trust-badges ul { display: flex; flex-wrap: wrap; gap: var(--sp-16); align-items: center; }
.trust-badges li { display: flex; align-items: center; gap: 10px; background: var(--c-white); border: 1px solid var(--c-border); padding: 10px 12px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.trust-badges img { width: 18px; height: 18px; }

/* 10) Inline contact */
.contact-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--c-primary); font-weight: 700; }
.contact-inline img { width: 16px; height: 16px; }

/* 11) Text sections as geometric cards */
.text-section { display: flex; flex-direction: column; gap: var(--sp-12); background: var(--c-white); border: 2px solid var(--c-primary); border-radius: 0; padding: var(--sp-20); box-shadow: var(--shadow-sm); position: relative; }
.text-section::after { content: ""; position: absolute; right: -2px; top: -2px; width: 26px; height: 26px; background: var(--c-secondary); clip-path: polygon(100% 0, 0 0, 100% 100%); opacity: 0.8; }
.text-section ul { display: flex; flex-direction: column; gap: 8px; }

/* 12) Testimonials (light background, dark text, high contrast) */
.testimonial-card { background: var(--c-accent); border: 2px solid var(--c-primary); border-radius: 0; box-shadow: var(--shadow-sm); }
.testimonial-card p { color: var(--c-text); }
.testimonial-card strong { color: var(--c-primary); }

/* 13) Notes */
.note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-left: 6px solid var(--c-secondary); background: #FFF7F0; color: #5A2D00; font-size: 0.92rem; }

/* 14) Footer */
footer { background: var(--c-primary); color: var(--c-white); margin-top: var(--sp-40); border-top: 6px solid var(--c-secondary); }
footer .container { padding-top: var(--sp-32); padding-bottom: var(--sp-32); }
footer .content-wrapper { gap: var(--sp-24); }
.brand-block { display: flex; flex-direction: column; gap: var(--sp-12); }
.brand-block img { height: 32px; filter: brightness(0) invert(1); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-24); width: 100%; }
.footer-links > div { display: flex; flex-direction: column; gap: 8px; min-width: 220px; flex: 1 1 220px; }
.footer-links h3 { color: var(--c-accent); font-size: 1rem; margin-bottom: 4px; }
.footer-links a { color: var(--c-accent); opacity: 0.95; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color var(--tr-fast), opacity var(--tr-fast); }
.footer-links a:hover { color: var(--c-secondary); opacity: 1; }
footer p { color: var(--c-accent); }

/* 15) Mobile Navigation (Hamburger) */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--c-primary); border: 2px solid var(--c-primary); border-radius: 0; background: var(--c-white); transition: background var(--tr-fast), color var(--tr-fast); }
.mobile-menu-toggle:hover { background: var(--c-primary); color: var(--c-white); }
.mobile-menu { position: fixed; top: 0; right: 0; height: 100vh; width: 85%; max-width: 360px; background: var(--c-white); border-left: 6px solid var(--c-secondary); box-shadow: var(--shadow-md); transform: translateX(100%); transition: transform 240ms ease; z-index: 999; display: flex; flex-direction: column; padding: var(--sp-20); gap: var(--sp-20); }
.mobile-menu.open, .mobile-menu.active { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); border: 2px solid var(--c-primary); }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav a { padding: 12px 10px; border: 2px solid var(--c-primary); color: var(--c-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px); }
.mobile-nav a:hover { background: var(--c-accent); }

/* 16) Desktop Navigation visibility */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* 17) General sections spacing */
main section { padding: var(--sp-32) 0; }
main section .container { padding-top: 0; padding-bottom: 0; }

/* 18) Flexible content wrapper behavior across pages */
/* On wider screens, allow content-wrapper to layout blocks in structured rows */
@media (min-width: 992px) {
  .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .content-wrapper > h1,
  .content-wrapper > h2,
  .content-wrapper > .subheadline,
  .content-wrapper > p,
  .content-wrapper > ul,
  .content-wrapper > ol,
  .content-wrapper > .cta-group,
  .content-wrapper > .note,
  .content-wrapper > a.btn { flex: 1 1 100%; }
  .content-wrapper > .text-section { flex: 1 1 320px; }
  /* Ensure testimonial cards wrap nicely */
  .content-wrapper > .testimonial-card { flex: 1 1 320px; }
}

/* 19) Alignment helpers for text-image sections */
.text-image-section { align-items: center; }
@media (max-width: 768px) { .text-image-section { flex-direction: column; } }

/* 20) Cards (generic) */
.card { background: var(--c-white); border: 2px solid var(--c-primary); border-radius: 0; padding: var(--sp-20); box-shadow: var(--shadow-sm); }

/* 21) Links and focus states */
a:focus, button:focus { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

/* 22) Forms (basic, if any appear) */
input, select, textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--c-primary); border-radius: 0; background: var(--c-white); color: var(--c-text); }
input:focus, select:focus, textarea:focus { border-color: var(--c-secondary); outline: none; }

/* 23) Tables (legal pages might add later) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--c-border); }
th { color: var(--c-primary); }

/* 24) Cookie Consent Banner & Modal */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--c-white); border-top: 6px solid var(--c-secondary); box-shadow: 0 -6px 20px rgba(0,0,0,0.08); padding: var(--sp-16) var(--sp-20); z-index: 998; transform: translateY(100%); transition: transform 260ms ease; display: flex; }
.cookie-banner.show, .cookie-banner.open { transform: translateY(0); }
.cookie-banner .inner { display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; max-width: 1200px; margin: 0 auto; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { padding: 10px 14px; border: 2px solid var(--c-primary); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.cookie-accept { background: var(--c-secondary); color: var(--c-white); border-color: var(--c-secondary); }
.cookie-reject { background: var(--c-white); color: var(--c-primary); }
.cookie-settings { background: var(--c-primary); color: var(--c-white); }

/* Cookie Preferences Modal */
.cookie-backdrop { position: fixed; inset: 0; background: rgba(11,43,60,0.5); z-index: 1000; display: none; }
.cookie-backdrop.open { display: flex; }
.cookie-modal { margin: auto; width: 94%; max-width: 640px; background: var(--c-white); border: 6px solid var(--c-primary); padding: var(--sp-20); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--sp-16); transform: translateY(20px); transition: transform 220ms ease; }
.cookie-backdrop.open .cookie-modal { transform: translateY(0); }
.cookie-cats { display: flex; flex-direction: column; gap: 10px; }
.cookie-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 2px solid var(--c-border); }
.cookie-cat .label { display: flex; flex-direction: column; gap: 4px; }
.toggle { width: 52px; height: 28px; border: 2px solid var(--c-primary); background: var(--c-accent); position: relative; border-radius: 20px; }
.toggle::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--c-primary); left: 4px; top: 3px; transition: left var(--tr-fast), background var(--tr-fast); border-radius: 50%; }
.toggle.on { background: #FFE2CC; border-color: var(--c-secondary); }
.toggle.on::after { left: 28px; background: var(--c-secondary); }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* 25) Utility spacing */
.mt-20 { margin-top: 20px; } .mb-20 { margin-bottom: 20px; }

/* 26) Page-specific subtle accents */
/* Hero headings emphasize geometric underline on desktop */
@media (min-width: 992px) {
  .hero h1 { position: relative; padding-bottom: 10px; }
  .hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 6px; background: var(--c-secondary); }
}

/* 27) Accessibility: ensure visible skip if added later */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 10px; top: 10px; background: var(--c-secondary); color: var(--c-white); padding: 8px 12px; z-index: 1001; }

/* 28) Responsive Typography scale */
@media (min-width: 768px) { h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } }
@media (min-width: 1200px) { h1 { font-size: 2.6rem; } h2 { font-size: 2rem; } }

/* 29) Ensure gaps between all content blocks */
.content-wrapper > * + * { margin-top: 0; }
.content-wrapper { gap: var(--sp-20); }

/* 30) Prevent overlapping and ensure spacing around cards */
.text-section, .testimonial-card, .card { margin-bottom: var(--sp-20); }

/* 31) Desktop refinements for structured grids using flex-wrap */
@media (min-width: 992px) {
  /* In sections where there are multiple text-section cards along with lists, keep lists full width */
  .content-wrapper > ul, .content-wrapper > ol, .content-wrapper > p.note { flex: 1 1 100%; }
}

/* 32) Header bottom bar subtle shadow */
header { box-shadow: 0 2px 12px rgba(0,0,0,0.05); }

/* 33) Make sure testimonials are readable (dark on light) across site */
section .testimonial-card p, section .testimonial-card strong { color: var(--c-text); }

/* 34) Desktop alignment for footer bottom copyright row */
footer .container:last-of-type .content-wrapper { flex-direction: row; justify-content: center; align-items: center; }

/* 35) Image alignment in lists */
li img { display: inline-block; vertical-align: middle; }

/* 36) Ensure minimum 20px margin between content cards/sections */
main section + section { margin-top: var(--sp-24); }

/* 37) Header link hit area and spacing */
.main-nav a { padding: 12px 10px; }

/* 38) Visibility rules for small screens */
@media (max-width: 991px) {
  .main-nav, .header-cta { display: none; }
}

/* 39) Large screen layout spacing harmony */
@media (min-width: 1200px) {
  .hero .container { padding-top: var(--sp-48); padding-bottom: var(--sp-48); }
}

/* 40) Compliance: no grid/columns used, flex everywhere required is satisfied. */