/* =============================
   Resilient Voltage — style.css
   Theme: monochrome_sophisticated
   Mobile-first, Flexbox-only
   ============================= */

/* RESET & NORMALIZE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; display: block; height: auto; }
a { text-decoration: none; color: inherit; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #0B2545; outline-offset: 2px; }

/* THEME VARIABLES */
:root {
  --brand-primary: #0B2545; /* Navy */
  --brand-secondary: #C1121F; /* Red accent */
  --brand-accent: #F4F6FA; /* Light UI */
  --mono-0: #FFFFFF;
  --mono-25: #FCFCFC;
  --mono-50: #F7F7F7;
  --mono-100: #F0F0F0;
  --mono-200: #E6E6E6;
  --mono-300: #D6D6D6;
  --mono-400: #BDBDBD;
  --mono-600: #6B6B6B;
  --mono-700: #4A4A4A;
  --mono-800: #2A2A2A;
  --mono-900: #111111;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --shadow-1: 0 4px 18px rgba(0,0,0,0.08);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.14);
  --transition: 200ms ease;
}

/* BASE TYPOGRAPHY */
body { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; line-height: 1.6; color: var(--mono-900); background: var(--mono-0); }
h1, h2, h3, h4 { font-family: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
h2 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; }
h3 { font-size: 18px; line-height: 1.3; margin-bottom: 10px; }
p { font-size: 16px; color: var(--mono-800); }
strong { color: var(--mono-900); font-weight: 700; }

/* LINKS */
a { color: var(--mono-900); text-underline-offset: 2px; }
a:hover { color: var(--brand-primary); }

/* GLOBAL CONTAINERS & SECTIONS (Flexbox-only) */
.container { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; }
section { margin-bottom: 60px; padding: 40px 20px; display: flex; flex-direction: column; }
/* Mandatory spacing pattern class */
.section { margin-bottom: 60px; padding: 40px 20px; display: flex; flex-direction: column; }

/* HERO */
.hero { background: var(--mono-900); color: var(--mono-0); border-bottom: 1px solid #000; }
.hero .content-wrapper > p { color: #EDEDED; }
.hero .trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero .trust-badges span { display: flex; align-items: center; gap: 8px; background: var(--mono-0); color: var(--mono-900); padding: 8px 12px; border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
.hero .trust-badges img { width: 18px; height: 18px; }

/* HEADER */
header { position: sticky; top: 0; background: var(--mono-0); border-bottom: 1px solid var(--mono-200); z-index: 1000; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }
.header-bar > a img { height: 36px; width: auto; }
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { padding: 8px 10px; border-radius: 6px; transition: background-color var(--transition), color var(--transition), transform var(--transition); }
.main-nav a:hover { background: var(--mono-100); transform: translateY(-1px); }
.main-nav .cta-primary { padding: 10px 14px; }
.mobile-menu-toggle { font-size: 22px; width: 44px; height: 44px; border-radius: 8px; background: var(--mono-900); color: var(--mono-0); display: flex; align-items: center; justify-content: center; transition: background var(--transition), transform var(--transition); }
.mobile-menu-toggle:hover { background: #000; transform: scale(1.02); }

/* MOBILE MENU OVERLAY */
.mobile-menu { position: fixed; inset: 0; background: rgba(17,17,17,0.82); display: flex; flex-direction: column; gap: 16px; padding: 20px; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 300ms ease, opacity 300ms ease; z-index: 1200; }
.mobile-menu.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; border-radius: 8px; background: var(--mono-0); color: var(--mono-900); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; background: var(--mono-0); border-radius: var(--radius-m); padding: 20px; box-shadow: var(--shadow-2); }
.mobile-nav a { padding: 12px 10px; border-radius: 8px; color: var(--mono-900); border: 1px solid var(--mono-100); }
.mobile-nav a:hover { background: var(--brand-accent); }

/* BUTTONS */
.cta-primary, .cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); font-weight: 700; }
.cta-primary { background: var(--brand-secondary); color: var(--mono-0); border: 1px solid var(--brand-secondary); }
.cta-primary:hover { background: #A50E19; border-color: #A50E19; transform: translateY(-1px); }
.cta-secondary { background: transparent; color: var(--mono-900); border: 1.5px solid var(--mono-900); }
.cta-secondary:hover { background: var(--mono-900); color: var(--mono-0); transform: translateY(-1px); }

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

/* BADGES, LISTS & FEATURES */
.features-list, .feature-grid, .feature-list { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; }
.features-list li, .feature-grid li, .feature-list li { display: flex; align-items: flex-start; gap: 12px; background: var(--mono-0); border: 1px solid var(--mono-200); border-radius: var(--radius-m); padding: 14px 16px; box-shadow: var(--shadow-1); flex: 1 1 100%; }
.features-list img, .feature-grid img, .feature-list img { width: 24px; height: 24px; }

/* SERVICE CARDS */
.service-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.service-card { flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; background: var(--mono-0); border: 1px solid var(--mono-200); border-radius: var(--radius-m); padding: 20px; box-shadow: var(--shadow-1); transition: transform var(--transition), box-shadow var(--transition); }
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.service-card a { align-self: flex-start; color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* PROCESS STEPS */
.process-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; counter-reset: step; }
.process-steps li { position: relative; flex: 1 1 100%; border: 1px solid var(--mono-200); border-radius: var(--radius-m); padding: 16px 16px 16px 48px; background: var(--mono-0); box-shadow: var(--shadow-1); }
.process-steps li::before { content: counter(step); counter-increment: step; position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--mono-900); color: var(--mono-0); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* TESTIMONIALS */
.testimonial-list { display: flex; flex-wrap: wrap; gap: 20px; }
.testimonial-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; background: var(--mono-0); color: var(--mono-900); border: 1px solid var(--mono-200); border-radius: var(--radius-m); box-shadow: var(--shadow-1); flex: 1 1 100%; }
.testimonial-card p { color: var(--mono-900); font-style: italic; }
.rating-summary { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--mono-200); border-radius: 999px; background: var(--mono-50); color: var(--mono-900); font-weight: 700; margin-bottom: 4px; }
.testimonial-cta { display: flex; }

/* VEHICLE LISTING */
.vehicle-actions-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--mono-50); border: 1px solid var(--mono-200); padding: 12px 14px; border-radius: var(--radius-m); }
.stock-list { display: flex; flex-wrap: wrap; gap: 24px; }
.stock-card { flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--mono-200); border-radius: var(--radius-m); padding: 20px; background: var(--mono-0); box-shadow: var(--shadow-1); }
.key-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.key-specs li { padding: 6px 10px; border: 1px solid var(--mono-200); border-radius: 999px; background: var(--mono-50); color: var(--mono-900); font-size: 14px; }
.stock-card a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mono-900); color: var(--mono-900); width: fit-content; transition: background var(--transition), color var(--transition); }
.stock-card a:hover { background: var(--mono-900); color: var(--mono-0); }

/* ADD-ON CARDS */
.addon-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.addon-cards .service-card { flex: 1 1 100%; }

/* CONTACT */
.contact-quick { display: flex; flex-direction: column; gap: 16px; background: var(--brand-accent); border: 1px solid var(--mono-200); border-radius: var(--radius-l); padding: 24px; }
.contact-details { display: flex; flex-direction: column; gap: 10px; }
.contact-details > div { display: flex; align-items: center; gap: 10px; color: var(--mono-800); }
.contact-details img { width: 18px; height: 18px; }
.contact-details a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-buttons a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--mono-900); color: var(--mono-900); transition: background var(--transition), color var(--transition); }
.contact-buttons a:hover { background: var(--mono-900); color: var(--mono-0); }
.contact-cta { display: flex; }

/* CTA SECTIONS */
.cta { background: var(--mono-900); color: var(--mono-0); border-top: 1px solid #000; border-bottom: 1px solid #000; }
.cta p { color: #EDEDED; }
.cta .cta-secondary { border-color: var(--mono-0); color: var(--mono-0); }
.cta .cta-secondary:hover { background: var(--mono-0); color: var(--mono-900); }

/* FOOTER */
footer { background: var(--mono-0); border-top: 1px solid var(--mono-200); }
footer .container { gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--mono-100); }
.footer-nav a:hover { background: var(--mono-50); }
.contact-snippet { display: flex; flex-wrap: wrap; gap: 12px; color: var(--mono-800); }
.contact-snippet span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--mono-100); border-radius: 999px; background: var(--mono-50); }
.contact-snippet img { width: 16px; height: 16px; }
.social-links { display: flex; gap: 10px; }
.social-links a { display: inline-flex; padding: 8px; border: 1px solid var(--mono-200); border-radius: 8px; transition: background var(--transition); }
.social-links a:hover { background: var(--mono-50); }
.footer-branding { display: flex; }
.footer-branding img { height: 28px; width: auto; opacity: 0.8; }

/* TABLES (Price lists) */
.price-table, table.price-table { width: 100%; border-collapse: collapse; }
.price-table table { width: 100%; border-collapse: collapse; }
.price-table table th, .price-table table td, table.price-table th, table.price-table td { border: 1px solid var(--mono-200); padding: 12px; text-align: left; }
.price-table table th, table.price-table th { background: var(--mono-900); color: var(--mono-0); }

/* LISTS & FAQ */
dl, .faq-list { display: flex; flex-direction: column; gap: 8px; }
dt { font-weight: 700; color: var(--mono-900); }
dd { margin-left: 0; color: var(--mono-800); }
.notes-disclaimer ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }

/* UTILITY FLEX PATTERNS (Mandated) */
.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; }

/* COOKIES: Banner & Modal */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--mono-0); color: var(--mono-900); border-top: 1px solid var(--mono-200); box-shadow: 0 -8px 24px rgba(0,0,0,0.08); padding: 14px 16px; transform: translateY(110%); transition: transform 300ms ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { flex: 1 1 240px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .accept-all { background: var(--brand-secondary); color: var(--mono-0); border: 1px solid var(--brand-secondary); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-actions .accept-all:hover { background: #A50E19; border-color: #A50E19; }
.cookie-actions .reject-all { background: var(--mono-900); color: var(--mono-0); border: 1px solid var(--mono-900); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-actions .reject-all:hover { background: #000; }
.cookie-actions .settings { background: transparent; color: var(--mono-900); border: 1px solid var(--mono-900); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-actions .settings:hover { background: var(--mono-900); color: var(--mono-0); }

.cookie-modal { position: fixed; inset: 0; background: rgba(17,17,17,0.82); display: none; align-items: center; justify-content: center; z-index: 1500; padding: 20px; }
.cookie-modal.show { display: flex; }
.cookie-modal-content { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 700px; background: var(--mono-0); color: var(--mono-900); border-radius: var(--radius-l); border: 1px solid var(--mono-200); box-shadow: var(--shadow-2); padding: 20px; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-options { display: flex; flex-direction: column; gap: 10px; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--mono-200); border-radius: 10px; background: var(--mono-50); }
.cookie-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--mono-300); transition: background var(--transition); display: flex; align-items: center; padding: 3px; }
.cookie-switch .knob { width: 20px; height: 20px; border-radius: 50%; background: var(--mono-0); transition: transform var(--transition); }
.cookie-switch.active { background: var(--brand-primary); }
.cookie-switch.active .knob { transform: translateX(20px); }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-modal-actions .save { background: var(--brand-secondary); color: var(--mono-0); border: 1px solid var(--brand-secondary); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-modal-actions .save:hover { background: #A50E19; }
.cookie-modal-actions .cancel { background: transparent; color: var(--mono-900); border: 1px solid var(--mono-900); padding: 10px 14px; border-radius: 8px; }
.cookie-modal-actions .cancel:hover { background: var(--mono-900); color: var(--mono-0); }

/* MISC */
hr { border: 0; border-top: 1px solid var(--mono-200); margin: 20px 0; }
blockquote { border-left: 4px solid var(--mono-900); padding-left: 12px; color: var(--mono-800); }

/* RESPONSIVE TYPOGRAPHY & LAYOUT */
@media (min-width: 576px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .features-list li, .feature-grid li, .feature-list li { flex: 1 1 calc(50% - 12px); }
  .service-card { flex: 1 1 calc(50% - 12px); }
  .addon-cards .service-card { flex: 1 1 calc(50% - 12px); }
  .stock-card { flex: 1 1 calc(50% - 12px); }
  .testimonial-card { flex: 1 1 calc(50% - 10px); }
  .contact-details { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

@media (min-width: 768px) {
  h1 { font-size: 42px; }
  h2 { font-size: 28px; }
  .content-wrapper { gap: 20px; }
  .cta-row { gap: 14px; }
  .process-steps li { flex: 1 1 calc(50% - 8px); }
}

@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  .service-card { flex: 1 1 calc(25% - 18px); }
  .addon-cards .service-card { flex: 1 1 calc(25% - 18px); }
  .stock-card { flex: 1 1 calc(33.333% - 16px); }
  .testimonial-card { flex: 1 1 calc(33.333% - 14px); }
  .features-list li, .feature-grid li, .feature-list li { flex: 1 1 calc(33.333% - 12px); }
}

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

/* ACCESSIBILITY & MOTION */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* PRINT (basic) */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}

/* FINAL TOUCHES: visual hierarchy */
section > .container > .content-wrapper > h2 { border-left: 4px solid var(--mono-900); padding-left: 10px; }

/* Ensure adequate spacing between stacked cards/sections */
.service-card + .service-card,
.stock-card + .stock-card,
.testimonial-card + .testimonial-card { margin-top: 0; }

/* Ensure images inside icon-only links don't overflow */
.social-links img { width: 18px; height: 18px; }

/* Table in diagnose-und-reparatur.html uses class on table directly */
.price-table tr:nth-child(even) td, table.price-table tr:nth-child(even) td { background: var(--mono-50); }

/* Ensure no overlap by spacing */
.container > * + * { margin-top: 0; }

/* Brand personality accents with monochrome sophistication */
.main-nav a:focus-visible, .mobile-nav a:focus-visible, .cta-primary:focus-visible, .cta-secondary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }