/* ==========================================================================
   GWZK – neues Design (Oktober 2026)
   Wird als letzte Datei geladen und überschreibt die Gestaltung der Seiten.
   Funktionen (Formulare, Fahrzeuge, Verwaltung, Öffnungsstatus) bleiben unberührt.
   ========================================================================== */

/* ── Schriften (lokal, keine Verbindung zu Google) ── */
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-display: swap; }

/* ── Farben ── */
:root {
  --navy: #16336F; --navy-mid: #16336F; --navy-soft: #4A4D57;
  --bg: #EEECE7; --bg-dark: #F7F6F2; --card: #FFFFFF; --border: #C9C6BE;
  --text: #12141A; --muted: #4A4D57; --accent: #16336F; --accent-lt: #16336F; --white: #FFFFFF;
  --gw-blau: #16336F; --gw-tief: #16336F; --gw-logo: #16336F; --gw-tinte: #12141A;
  --gw-grund: #EEECE7; --gw-papier: #F7F6F2; --gw-linie: #C9C6BE; --gw-text: #33363F;
  --gw-hell: #DCE2F2; --gw-hell2: #C9D3EE;
  --gw-display: 'Archivo', 'Arial Narrow', sans-serif;
  --gw-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body { font-family: 'Archivo', -apple-system, 'Segoe UI', sans-serif !important; background: var(--gw-grund) !important; color: var(--gw-tinte) !important; }
::selection { background: var(--gw-blau); color: #fff; }

/* ── Typografie ── */
h1, h2, .section-title, .page-header h1 {
  font-family: var(--gw-display) !important; font-weight: 800 !important; font-stretch: 72%;
  text-transform: uppercase; letter-spacing: -0.005em !important; line-height: 1 !important;
  color: var(--gw-tinte);
}
.section-title { font-size: clamp(2.2rem, 4vw, 3.25rem) !important; }
.page-header h1 { font-size: clamp(2.4rem, 5vw, 4rem) !important; color: var(--gw-tinte) !important; }
h3, h4 { font-family: var(--gw-display); }
.section-label, .label, .page-header .label {
  font-family: var(--gw-mono) !important; font-size: 0.75rem !important; font-weight: 500 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  color: var(--gw-blau) !important; background: none !important; padding: 0 !important; border: 0 !important;
}
.section-label::before, .label::before { display: none !important; }
.section-sub, .page-header .intro { color: var(--gw-text) !important; font-size: 1.05rem !important; }

/* ── Ecken: kantig statt abgerundet ── */
.btn-primary, .btn-secondary, .knopf-hell, .knopf-rand, .form-submit, .weiter-link,
.service-card, .car-card, .fahrzeug, .karte, .block, .preisbox, .galerie-gross, .galerie-streifen button,
.review-card, .contact-form, .cta-banner, .map-placeholder, .partner-logo, .leistung-bild, .leistung-bild img,
.abschluss-karte, .standort-block, .partner-zeile, .grundsatz, .impressum-block, .ds-block, .gruppe, .antwort,
input, select, textarea, .filter-feld select, .filter-feld input, .video, .why-float-card, .datei-feld, .schritt,
.hinweis, .sprungliste a, .schnellkontakt a, .cc-banner, .cc-banner button, .cc-platzhalter button, .fahrzeug-bild img, .car-card-img {
  border-radius: 0 !important;
}

/* ── Knöpfe ── */
.btn-primary, .knopf-hell, .form-submit {
  background: var(--gw-blau) !important; color: #fff !important; border: 1px solid var(--gw-blau) !important;
  font-family: var(--gw-display) !important; font-weight: 700 !important; letter-spacing: 0.01em !important;
  box-shadow: none !important; min-height: 48px; transition: background .2s, border-color .2s !important;
}
.btn-primary:hover, .knopf-hell:hover, .form-submit:hover { background: #0F2552 !important; border-color: #0F2552 !important; transform: none !important; filter: none !important; }
.btn-secondary, .knopf-rand {
  background: transparent !important; color: var(--gw-tinte) !important; border: 1px solid var(--gw-tinte) !important;
  font-family: var(--gw-display) !important; font-weight: 500 !important; min-height: 48px; box-shadow: none !important;
}
.btn-secondary:hover, .knopf-rand:hover { background: var(--gw-tinte) !important; color: #fff !important; }
.weiter-link { color: var(--gw-blau) !important; font-weight: 600 !important; text-underline-offset: 4px; }

/* ── Navigation ── */
nav { background: rgba(238,236,231,0.97) !important; border-bottom: 1px solid var(--gw-linie) !important; }
.nav-marke img { height: 38px !important; width: auto; }
.nav-links a { color: var(--gw-logo) !important; font-family: var(--gw-display) !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: 1.05rem !important; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gw-blau) !important; text-decoration: underline; text-underline-offset: 6px; }
.nav-menue span { background: var(--gw-logo) !important; }
@media (max-width: 1000px) {
  .nav-links { background: var(--gw-papier) !important; }
  .nav-marke img { height: 34px !important; }
}
@media (max-width: 780px) { .nav-marke img { height: 28px !important; } }

/* ── Unterseiten-Kopf ── */
.page-header { background: var(--gw-grund) !important; border-bottom: 2px solid var(--gw-tief); }
.page-header::before, .page-header::after { display: none !important; }

/* ── Karten / Flächen ── */
.service-card, .car-card, .fahrzeug, .karte, .block, .preisbox, .abschluss-karte, .standort-block,
.grundsatz, .impressum-block, .ds-block, .gruppe, .contact-form, .schritt {
  box-shadow: none !important; border-color: var(--gw-linie) !important;
}
.car-card:hover, .fahrzeug:hover, .service-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--gw-blau) !important; }
.fahrzeug-preis strong, .car-price, .preis { color: var(--gw-tief) !important; font-family: var(--gw-display) !important; font-weight: 800 !important; font-stretch: 75%; }
.fahrzeug-marke, .fahrzeug-siegel, .car-tag, .fahrzeug-merkmal { border-radius: 0 !important; }
.fahrzeug-marke { background: var(--gw-tief) !important; color: #fff !important; }
.fahrzeug-merkmal, .car-tag { background: var(--gw-grund) !important; color: var(--gw-tief) !important; }
.fahrzeug-intern, .car-intern, .interne-nr { font-family: var(--gw-mono) !important; color: var(--gw-muted, #4A4D57) !important; opacity: 1 !important; }

/* Eingabefelder */
input, select, textarea { border: 1px solid var(--gw-linie) !important; background: #fff !important; font-family: inherit !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gw-blau) !important; outline-offset: 0; border-color: var(--gw-blau) !important; }

/* ── Schnellkontakt (Handy) ── */
.sk-telefon { background: var(--gw-blau) !important; }

/* ── Fußzeile ── */
footer { background: var(--gw-tinte) !important; color: #B8BCD9 !important; border-top: 0 !important; }
footer a, .footer-links a { color: #D6D4CE !important; }
footer a:hover { color: #fff !important; }
.footer-logo { color: #fff !important; font-family: var(--gw-display) !important; }
.footer-copy { color: #8E92A3 !important; }

/* ── Öffnungsstatus: offen grün, geschlossen rot blinkend ── */
.hours-badge { border-radius: 0 !important; background: #fff !important; border: 1px solid var(--gw-linie) !important;
  color: #1B6B3A !important; font-family: var(--gw-mono) !important; font-size: 0.8rem !important; letter-spacing: 0.04em; }
.hours-badge .hours-dot { background: #1F9D55 !important; }
.hours-badge.ist-geschlossen { color: #B3121F !important; border-color: #E9B7BB !important; }
.hours-badge.ist-geschlossen .hours-dot { background: #D3172A !important; animation: gw-blinken 1s steps(2, start) infinite !important; }
@keyframes gw-blinken { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .hours-badge.ist-geschlossen .hours-dot { animation: none !important; } }

/* ── Cookie-Hinweis ── */
.cc-banner { background: var(--gw-papier) !important; border-top: 2px solid var(--gw-tief) !important; }
.cc-banner button { font-family: var(--gw-display) !important; font-weight: 700 !important; }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
.start { position: relative; padding: 0 !important; margin: 0; }
.start-bild { height: clamp(320px, 42vw, 560px); overflow: hidden; background: #D9D6CE; }
.start-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 88%; }
.start-rahmen { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.start-panel { position: relative; margin-top: -140px; max-width: 760px; background: var(--gw-tief); color: #F7F6F2;
  padding: 44px 48px 40px; display: flex; flex-direction: column; gap: 22px; }
.start-panel .start-badge { font-family: var(--gw-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gw-hell2); margin: 0; }
.start-panel h1 { margin: 0; color: #F7F6F2 !important; font-size: clamp(2.6rem, 6vw, 4.5rem) !important; line-height: 0.95 !important; }
.start-panel p { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--gw-hell); max-width: 560px; }
.start-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.start-knoepfe .btn-primary { background: #F7F6F2 !important; color: var(--gw-tief) !important; border-color: #F7F6F2 !important; }
.start-knoepfe .btn-primary:hover { background: #fff !important; }
.start-knoepfe .btn-secondary { color: #F7F6F2 !important; border-color: #7F93C9 !important; }
.start-knoepfe .btn-secondary:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
@media (max-width: 640px) {
  .start-rahmen { padding: 0 16px; }
  .start-panel { margin-top: -60px; padding: 28px 24px; }
}

/* Kennzahlen */
.kennzahlen { max-width: 1320px; margin: 0 auto; padding: 72px 32px 24px; }
.kennzahlen dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 2px solid var(--gw-tief); }
.kennzahlen dl > div { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--gw-linie); }
.kennzahlen dt { order: 2; font-weight: 600; }
.kennzahlen dd { order: 1; margin: 0; font-family: var(--gw-display); font-weight: 800; font-stretch: 70%; font-size: 4rem; line-height: 1; color: var(--gw-blau); }
@media (max-width: 640px) { .kennzahlen { padding: 48px 16px 16px; } .kennzahlen dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzahlen dd { font-size: 2.6rem; } .cta-banner .btn-primary { align-self: flex-start; } }

/* Willkommen */
.willkommen { background: transparent !important; }
.willkommen-inhalt { max-width: 1320px !important; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 72px; align-items: start; text-align: left !important; }
.willkommen-kopf { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
.willkommen-inhalt .section-title { color: var(--gw-tinte) !important; text-align: left !important; }
.willkommen-inhalt p { grid-column: 2; margin: 0 0 1rem !important; color: var(--gw-text) !important; font-size: 1.12rem !important; text-align: left !important; max-width: 720px; }
@media (max-width: 860px) { .willkommen-inhalt { display: block; } }

/* Fahrzeuge auf der Startseite */
.bestand-kopf { max-width: 1320px; margin: 0 auto 40px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; text-align: left !important; }
.bestand-kopf .section-header { margin: 0 !important; text-align: left !important; max-width: 640px; }
.knopf-gross { display: inline-flex; align-items: center; gap: 14px; min-height: 64px !important; padding: 0 32px !important; font-size: 1.2rem !important; }
.bestand { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; }
.bestand-gross { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: var(--gw-tinte); }
.bestand-gross img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #D9D6CE; }
.bestand-gross .zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.bestand-gross h3 { margin: 0; font-size: 1.6rem; line-height: 1.2; font-weight: 700; }
.bestand-gross .preis-gross { margin: 0; font-family: var(--gw-display); font-weight: 800; font-stretch: 75%; font-size: 2.25rem; line-height: 1; color: var(--gw-tief); }
.bestand-gross dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 20px; border-top: 1px solid var(--gw-linie); padding-top: 14px; }
.bestand-gross dt, .mono { font-family: var(--gw-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #4A4D57; }
.bestand-gross dd { margin: 0; font-weight: 600; }
.bestand-liste-wrap { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; }
.bestand-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gw-tief); }
.bestand-liste li { border-bottom: 1px solid var(--gw-linie); }
.bestand-liste a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 18px 0; text-decoration: none; color: var(--gw-tinte); }
.bestand-liste a:hover h3 { color: var(--gw-blau); }
.bestand-liste img { flex: 0 0 auto; width: 128px; height: 96px; object-fit: cover; display: block; background: #D9D6CE; }
.bestand-liste .mitte { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bestand-liste h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.bestand-liste .rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bestand-liste .preis-klein { font-family: var(--gw-display); font-weight: 800; font-stretch: 75%; font-size: 1.5rem; line-height: 1.1; color: var(--gw-tief); }
.knopf-breit { margin-top: 28px; display: flex !important; align-items: center; justify-content: space-between; min-height: 72px !important; padding: 0 28px !important;
  background: var(--gw-tief) !important; border-color: var(--gw-tief) !important; font-size: 1.35rem !important; }
@media (max-width: 640px) { .bestand-liste img { width: 96px; height: 72px; } .knopf-gross { width: 100%; justify-content: space-between; } }

/* Leistungen als nummerierte Liste */
#services { background: var(--gw-papier) !important; border-top: 1px solid var(--gw-linie); border-bottom: 1px solid var(--gw-linie); }
.leistungen-start { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px 72px; }
.leistungen-start .section-header { flex: 1 1 340px; min-width: 0; text-align: left !important; margin: 0 !important; }
.leistungen-liste { flex: 2 1 560px; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 40px; border-top: 2px solid var(--gw-tief); }
.leistungen-liste li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--gw-linie); }
.leistungen-liste .nr { font-family: var(--gw-mono); font-size: 0.8rem; color: var(--gw-blau); padding-top: 4px; }
.leistungen-liste h3 { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.leistungen-liste p { margin: 0; font-size: 0.95rem; color: #4A4D57; }

/* Finanzierung / Inzahlungnahme */
.zwei-wege { max-width: 1320px; margin: 0 auto; padding: 96px 32px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.zwei-wege article { padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; }
.zwei-wege .weg-blau { background: var(--gw-tief); color: #F7F6F2; }
.zwei-wege .weg-blau h2 { color: #F7F6F2 !important; }
.zwei-wege .weg-blau .section-label { color: var(--gw-hell2) !important; }
.zwei-wege .weg-blau p { color: var(--gw-hell); }
.zwei-wege .weg-hell { background: var(--gw-papier); border: 1px solid var(--gw-linie); }
.zwei-wege .weg-hell p { color: var(--gw-text); }
.zwei-wege h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 2.75rem) !important; }
.zwei-wege p { margin: 0; font-size: 1.05rem; }
.zwei-wege .btn-primary { align-self: flex-start; margin-top: 8px; }
.weg-blau .btn-primary { background: #F7F6F2 !important; color: var(--gw-tief) !important; border-color: #F7F6F2 !important; }
@media (max-width: 640px) { .zwei-wege { padding: 64px 16px 8px; } .zwei-wege article { padding: 32px 24px; } }

/* Warum wir */
.why-section { background: transparent !important; color: var(--gw-tinte) !important; }
.why-section .section-title { color: var(--gw-tinte) !important; }
.why-section .section-sub { color: var(--gw-text) !important; }
.why-grid { display: block !important; max-width: 1320px; margin: 0 auto; }
.why-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 40px !important; border-top: 2px solid var(--gw-tief); margin-bottom: 24px; }
.why-item { display: block !important; padding: 24px 0 !important; border-bottom: 1px solid var(--gw-linie); background: none !important; }
.why-icon { display: none !important; }
.why-item h4 { font-size: 1.35rem !important; font-weight: 700 !important; color: var(--gw-tinte) !important; margin: 0 0 8px !important; }
.why-item p { color: var(--gw-text) !important; }
.why-image-wrap { display: none !important; }

/* Kundenstimmen */
.stimmen { background: var(--gw-papier) !important; border-top: 1px solid var(--gw-linie); border-bottom: 1px solid var(--gw-linie); }
.review-card { background: #fff !important; border: 1px solid var(--gw-linie) !important; border-top: 3px solid var(--gw-blau) !important; box-shadow: none !important; text-align: left !important; }
.review-text { font-size: 1.2rem !important; font-weight: 500 !important; color: var(--gw-tinte) !important; font-style: normal !important; }
.review-stars { color: var(--gw-blau) !important; }
.reviewer-avatar { background: var(--gw-tief) !important; color: #fff !important; }
.reviewer-name { font-weight: 700 !important; }
.reviewer-location { font-family: var(--gw-mono); font-size: 0.75rem !important; }
.reviews-pfeil { border-radius: 0 !important; background: #fff !important; border: 1px solid var(--gw-linie) !important; color: var(--gw-tief) !important; box-shadow: none !important; }
.bewertungen-leiste { max-width: 1320px; margin: 32px auto 0; padding: 0 32px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.bewertung-kachel { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border: 1px solid var(--gw-linie); }
.bewertung-kachel .score { font-family: var(--gw-display); font-weight: 800; font-stretch: 70%; font-size: 1.9rem; line-height: 1; color: var(--gw-tief); }
.bewertung-kachel .sterne { color: var(--gw-blau); font-size: 0.8rem; letter-spacing: 1px; }
.bewertung-kachel .text { font-size: 0.8rem; color: var(--gw-text); line-height: 1.3; }
.bewertung-kachel .halb { opacity: 0.45; }

/* Kontakt: blauer Abschluss */
.cta-banner { background: var(--gw-tief) !important; color: #F7F6F2 !important; margin: 0 !important; max-width: none !important; width: auto !important;
  padding: 80px max(32px, calc((100% - 1320px) / 2 + 32px)) 0 !important; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cta-banner::before, .cta-banner::after { display: none !important; }
.cta-banner { flex-direction: row !important; align-items: flex-end !important; text-align: left !important; min-height: 0 !important; }
.cta-text { flex: 1 1 480px; text-align: left !important; align-items: flex-start !important; }
.cta-text h2 { color: #F7F6F2 !important; font-size: clamp(2rem, 3.6vw, 2.75rem) !important; }
.cta-text p { color: var(--gw-hell) !important; }
.cta-banner .btn-primary { background: #F7F6F2 !important; color: var(--gw-tief) !important; border-color: #F7F6F2 !important; }
.contact-section { background: var(--gw-tief) !important; color: #F7F6F2 !important; }
.contact-section .section-label { color: var(--gw-hell2) !important; }
.contact-section .section-title { color: #F7F6F2 !important; }
.contact-item h4 { font-family: var(--gw-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--gw-hell2) !important; font-weight: 500 !important; }
.contact-item p, .contact-item a { color: #F7F6F2 !important; font-size: 1.05rem !important; }
.contact-item-icon { background: rgba(255,255,255,0.08) !important; border-radius: 0 !important; color: #fff !important; }
.contact-item-icon svg { stroke: #fff !important; }
.contact-form { background: #F7F6F2 !important; color: var(--gw-tinte) !important; border: 0 !important; }
.contact-form h3 { font-family: var(--gw-display) !important; font-weight: 800 !important; font-stretch: 75%; text-transform: uppercase; font-size: 1.6rem !important; color: var(--gw-tinte) !important; }
.contact-form label, .einwilligung label, .pflicht-hinweis { color: var(--gw-text) !important; }
.contact-form a { color: var(--gw-blau) !important; }
.map-placeholder { border-radius: 0 !important; overflow: hidden; background: #1F3F82 url('bilder/karte-osm.jpg') center / cover no-repeat !important; position: relative; }
.map-placeholder .cc-platzhalter { background: rgba(247,246,242,0.92) !important; border-radius: 0 !important; color: var(--gw-tinte) !important; max-width: 520px; margin: 0 auto; }
.map-placeholder .cc-platzhalter button { background: var(--gw-blau) !important; color: #fff !important; }
.karte-quelle { max-width: 1320px; margin: 8px auto 0; padding: 0 32px 0; font-size: 0.75rem; color: var(--gw-hell2); }
.contact-section .karte-hinweis { border-radius: 0 !important; }

/* Partner */
.partners-section { background: var(--gw-grund) !important; border-top: 0 !important; text-align: left !important; max-width: 1320px; margin: 0 auto; }
.partners-label { font-family: var(--gw-mono) !important; color: var(--gw-blau) !important; letter-spacing: 0.2em !important; }
.partners-logos { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 !important; border-top: 1px solid var(--gw-linie); border-left: 1px solid var(--gw-linie); }
.partner-logo { justify-content: center; height: 120px; background: #fff !important; border: 0 !important; border-right: 1px solid var(--gw-linie) !important; border-bottom: 1px solid var(--gw-linie) !important; }
.partner-logo img { max-height: 56px !important; max-width: 100%; width: auto; height: auto !important; }

/* Weitere Startseiten-Teile im neuen Stil */
#fahrzeuge { background: transparent !important; }
.stats { display: none !important; }

/* ── Kundenstimmen: feste Zitate statt Karussell ── */
.zitate { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.zitat { margin: 0; display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--gw-blau); padding-top: 20px; }
.zitat blockquote { margin: 0; font-size: 1.25rem; line-height: 1.45; font-weight: 500; color: var(--gw-tinte); }
.zitat figcaption { font-family: var(--gw-mono); font-size: 0.75rem; color: #4A4D57; }
.stimmen .section-header { max-width: 1320px; margin: 0 auto 40px !important; padding: 0 32px; text-align: left !important; }
@media (max-width: 640px) { .zitate, .stimmen .section-header, .bewertungen-leiste { padding: 0 16px; } }

/* ==========================================================================
   UNTERSEITEN im Stil der Startseite
   ========================================================================== */
.page-header { background: var(--gw-tief) !important; border-bottom: 0 !important; color: #F7F6F2 !important; }
.page-header h1 { color: #F7F6F2 !important; }
.page-header .label { color: var(--gw-hell2) !important; }
.page-header .intro, .page-header p { color: var(--gw-hell) !important; }
.page-header a:not(.btn-primary):not(.knopf-hell) { color: #fff !important; }
.page-header .knopf-hell, .page-header .btn-primary { background: #F7F6F2 !important; color: var(--gw-tief) !important; border-color: #F7F6F2 !important; }
.page-header .knopf-rand, .page-header .btn-secondary { color: #F7F6F2 !important; border-color: #7F93C9 !important; }
/* Inhaltsblöcke: weiße Fläche mit blauer Oberkante */
.karte, .block, .abschluss-karte, .standort-block, .grundsatz, .impressum-block, .ds-block, .gruppe, .schritt, .preisbox, .partner-zeile {
  background: #fff !important; border: 1px solid var(--gw-linie) !important; border-top: 2px solid var(--gw-blau) !important;
}
.block h2, .karte h2, .karte h3, .abschluss-karte h2, .gruppe h2, .standort h2, .partner h2 { font-family: var(--gw-display) !important; font-weight: 800 !important; font-stretch: 72%; text-transform: uppercase; color: var(--gw-tinte) !important; }
.leistung-nr, .grundsatz-nr, .schritt .nr, .nr { font-family: var(--gw-mono) !important; color: var(--gw-blau) !important; background: none !important; border-radius: 0 !important; }
.sprungliste { background: var(--gw-papier) !important; border-bottom: 1px solid var(--gw-linie) !important; }
.sprungliste a { border: 1px solid var(--gw-linie) !important; background: #fff !important; color: var(--gw-tief) !important; }
.sprungliste a:hover { background: var(--gw-tief) !important; color: #fff !important; }
.filterleiste { background: var(--gw-papier) !important; border-bottom: 1px solid var(--gw-linie) !important; }
.filterleiste button[aria-pressed="true"] { background: var(--gw-tief) !important; color: #fff !important; border-color: var(--gw-tief) !important; }
.filterleiste button { border-radius: 0 !important; }
.page-header h1 { -webkit-text-fill-color: #F7F6F2 !important; background: none !important; }
@media (min-width: 901px) { .zitate { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zahl, .zahlen > * { border-radius: 0 !important; box-shadow: none !important; border-top: 2px solid var(--gw-blau) !important; }
.zahl strong, .zahl b, .zahl span:first-child { font-family: var(--gw-display); font-stretch: 70%; }
@media (max-width: 780px) { .page-header { padding-top: 110px !important; } }

/* ── Einstieg passt beim Öffnen komplett in den Bildschirm ── */
:root { --gw-z: 1; --gw-nav: 112px; }
@media (min-width: 1380px) and (max-width: 1559px) { :root { --gw-z: 1.15; } }
@media (min-width: 1560px) { :root { --gw-z: 1.3; } }
@media (max-width: 780px) { :root { --gw-nav: 70px; } }
@media (min-width: 641px) {
  .start { height: calc(100vh / var(--gw-z) - var(--gw-nav)); min-height: 520px; display: flex; flex-direction: column; overflow: hidden; }
  .start-bild { flex: 1 1 0; height: auto; min-height: 140px; }
  .start-rahmen { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
  .start-panel { margin-top: -110px; padding: 32px 40px 30px; gap: 16px; }
  .start-panel h1 { font-size: clamp(2.2rem, calc(6.5vh / var(--gw-z)), 4.25rem) !important; }
  .start-panel p { font-size: 1.05rem; }
}
@media (max-width: 640px) { .start-bild { height: 30svh; } }

/* ── Finanzierung / Inzahlungnahme: Abschnitte im Startseiten-Stil ── */
.inhalt > .block, .content-wrap > .block { padding: 48px 56px !important; margin-bottom: 32px !important; }
.inhalt > .block > h2, .content-wrap > .block > h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem) !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; color: var(--gw-tinte) !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; }
.inhalt > .block > .vor { max-width: 62ch; margin-bottom: 28px !important; }
.ablauf, .schritte { counter-reset: gw-schritt; border: 0 !important; margin: 0 !important; }
.ablauf { display: grid !important; gap: 0 !important; }
.ablauf .schritt { background: none !important; border: 0 !important; border-top: 1px solid var(--gw-linie) !important; padding: 22px 0 !important; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; }
.ablauf .schritt:last-child { border-bottom: 1px solid var(--gw-linie) !important; }
.ablauf .schritt > * { grid-column: 2; }
.ablauf .schritt::before, .schritte .schritt::before { counter-increment: gw-schritt; content: counter(gw-schritt, decimal-leading-zero); position: static !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important; border-radius: 0 !important; font-family: var(--gw-mono); font-size: 0.8rem; color: var(--gw-blau); padding-top: 5px; }
.ablauf .schritt::before { grid-column: 1; grid-row: 1 / span 2; }
.ablauf .schritt h3, .schritte .schritt h3 { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--gw-tinte) !important; margin: 0 0 4px !important; }
.ablauf .schritt p, .schritte .schritt p { font-size: 0.95rem !important; color: #4A4D57 !important; margin: 0 !important; }
.schritte { gap: 32px !important; }
.schritte .schritt { background: none !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; padding: 18px 0 0 !important; }
.schritte .schritt .nr { display: none !important; }
.schritte .schritt::before { display: block; margin-bottom: 14px; padding-top: 0; }
.inhalt .karten { gap: 20px !important; }
.inhalt .karte { background: var(--gw-papier) !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; padding: 26px 28px !important; }
.inhalt .karte h3 { font-size: 1.1rem !important; margin-bottom: 12px !important; }
.inhalt .karte li::before { border-radius: 0 !important; background: var(--gw-blau) !important; }
@media (max-width: 640px) {
  .inhalt > .block, .content-wrap > .block { padding: 30px 20px !important; }
  .ablauf .schritt { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
}

/* ── Hero: Infokarte mit Öffnungsstatus rechts neben dem Panel ── */
.start-info { display: none; }
@media (min-width: 1000px) {
  .start-rahmen { display: flex; align-items: stretch; gap: 24px; }
  .start-panel { flex: 1 1 auto; }
  .start-info { display: flex; flex-direction: column; gap: 18px; flex: 0 0 340px; position: relative; margin-top: -110px;
    background: #fff; border: 1px solid var(--gw-linie); border-top: 2px solid var(--gw-blau); padding: 28px 30px; box-sizing: border-box; }
  .start-info .hours-badge { align-self: flex-start; margin: 0 !important; }
  .start-info dl { margin: 0; display: grid; }
  .start-info dl > div { padding: 12px 0; border-top: 1px solid var(--gw-linie); }
  .start-info dt { font-family: var(--gw-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gw-blau); margin-bottom: 4px; }
  .start-info dd { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--gw-tinte); }
  .start-info dd a { color: var(--gw-tief); font-weight: 700; text-decoration: none; }
  .start-info dd a:hover { text-decoration: underline; }
}

/* ── Hero kompakter: Panel + Infokarte kleiner, mehr Bild ── */
@media (min-width: 641px) {
  .start-panel { margin-top: -90px; max-width: 640px; padding: 24px 30px 24px; gap: 10px; }
  .start-panel .start-badge { font-size: 0.68rem; }
  .start-panel h1 { font-size: clamp(1.8rem, calc(5vh / var(--gw-z)), 3rem) !important; }
  .start-panel p { font-size: 0.95rem; line-height: 1.5; }
  .start-knoepfe a { padding: 11px 20px !important; font-size: 0.88rem !important; }
}
@media (min-width: 1000px) {
  .start-rahmen { gap: 18px; }
  .start-panel { flex: 0 1 640px; }
  .start-info { flex: 0 0 280px; margin-top: -90px; padding: 18px 20px; gap: 10px; }
  .start-info .hours-badge { font-size: 0.66rem !important; padding: 0.25rem 0.6rem !important; }
  .start-info dl > div { padding: 7px 0; }
  .start-info dt { font-size: 0.64rem; margin-bottom: 2px; }
  .start-info dd { font-size: 0.86rem; line-height: 1.4; }
}
@media (min-width: 1000px) {
  .start-rahmen { align-items: flex-start; }
  .start-info { flex: 0 0 320px; }
  .start-info dl > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 6px 0; }
  .start-info dt { margin: 0; }
}

/* ── Hero: Bewertungs-Kachel neben der Infokarte ── */
.start-bewertung { display: none; }
@media (min-width: 1280px) {
  .start-bewertung { display: flex; flex-direction: column; gap: 10px; flex: 0 0 260px; position: relative; margin-top: -90px;
    background: #fff; border: 1px solid var(--gw-linie); border-top: 2px solid var(--gw-blau); padding: 18px 20px; box-sizing: border-box; }
  .start-bewertung .sb-titel { margin: 0 0 2px; font-family: var(--gw-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gw-blau); }
  .start-bewertung .bewertung-kachel { padding: 8px 0 0; border: 0; border-top: 1px solid var(--gw-linie); background: none; }
}

/* ── Kontakt-Banner: Text und Anruf-Knopf auf einer Linie ── */
.cta-banner { align-items: center !important; }
@media (min-width: 1280px) { .start-bewertung .bewertung-kachel .text { white-space: nowrap; } }

/* ── Hero-Kacheln gleich hoch ── */
@media (min-width: 1000px) { .start-rahmen { align-items: stretch !important; } }

/* ── Inhalte etwas nach links, damit der YouTube-Knopf rechts frei steht ── */
@media (min-width: 861px) and (max-width: 1861px) {
  body > *:not(nav):not(.start):not(.schnellkontakt):not(.cc-banner):not(.lupe):not(script) { padding-right: 80px !important; box-sizing: border-box; }
  .start-rahmen { padding-right: 80px !important; }
}

/* ── Anruf-Knopf rechts bündig mit dem Kontaktformular (gleiches Raster wie .contact-grid) ── */
@media (min-width: 861px) {
  .cta-banner { display: grid !important; grid-template-columns: 1fr minmax(0, 1200px) 1fr; align-items: center !important;
    padding-left: 5% !important; padding-right: 5% !important; box-sizing: border-box; gap: 0 !important; }
  .cta-banner > .cta-text { grid-area: 1 / 2; justify-self: start; max-width: calc(100% - 240px); }
  .cta-banner > .btn-primary { grid-area: 1 / 2; justify-self: end; }
}

/* ── Weiße Hero-Kacheln unter dem Bild statt darüber ── */
@media (min-width: 1000px) {
  .start { height: auto !important; overflow: visible !important; }
  .start-bild { flex: none !important; height: clamp(320px, calc(100vh / var(--gw-z) - var(--gw-nav) - 290px), 660px) !important; }
  .start-bild img { object-position: center 62% !important; }
  .start-info, .start-bewertung { margin-top: 16px !important; }
  .start-panel { margin-top: -90px !important; justify-content: center; }
}

/* ── Hero: blaue Fläche als Hintergrund hinter den weißen Kacheln ── */
@media (min-width: 1000px) {
  .start-rahmen { --rand-r: 32px; position: relative; padding-right: var(--rand-r) !important; padding-bottom: 24px !important; align-items: center !important; }
  .start-rahmen::before { content: ""; position: absolute; z-index: 0; top: -50px; bottom: 0; left: 32px; right: calc(var(--rand-r) - 18px); background: var(--gw-tief); }
  .start-panel { position: relative; z-index: 1; margin-top: -50px !important; background: transparent !important; align-self: stretch; }
  .start-info, .start-bewertung { position: relative; z-index: 1; margin-top: 16px !important; align-self: stretch; }
}
@media (min-width: 1000px) and (max-width: 1861px) { .start-rahmen { --rand-r: 80px; } }
/* Blaue Fläche exakt unter dem Bild */
@media (min-width: 1000px) {
  .start-rahmen { padding-top: 24px !important; }
  .start-rahmen::before { top: 0 !important; }
  .start-panel { margin-top: 0 !important; }
  .start-info, .start-bewertung { margin-top: 0 !important; }
}
/* Blaue Fläche exakt unter dem Bild */
@media (min-width: 1000px) {
  .start-rahmen::before { top: 0; }
  .start-panel { margin-top: 0 !important; }
  .start-info, .start-bewertung { margin-top: 24px !important; }
}
@media (min-width: 1000px) {
  .start-rahmen { padding-top: 24px !important; }
  .start-info, .start-bewertung { margin-top: 0 !important; }
}

/* ── Fahrzeug-Detailseite: offene Abschnitte statt weißer Kästen, kantige Kacheln ── */
.seite .block { background: transparent !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; padding: 28px 0 0 !important; margin-top: 72px !important; }
.seite .block > h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important; line-height: 1.05; color: var(--gw-tinte) !important; margin: 0 0 10px !important; }
.seite .block > .vor { color: #4A4D57 !important; opacity: 1 !important; font-size: 0.95rem !important; margin-bottom: 24px !important; }
.seite .datentafel { border-radius: 0 !important; background: var(--gw-linie) !important; border: 1px solid var(--gw-linie) !important; }
.seite .datentafel div { background: var(--gw-papier) !important; padding: 18px 20px !important; }
.seite .datentafel dt { font-family: var(--gw-mono); font-weight: 400 !important; letter-spacing: 0.14em !important; color: var(--gw-blau) !important; opacity: 1 !important; }
.seite .datentafel dd { color: var(--gw-tinte) !important; }
.seite .datentafel dd a { color: var(--gw-tief) !important; text-decoration: none; }
.seite .aehnliche { gap: 24px !important; }
.seite .aehnlich { border-radius: 0 !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; background: var(--gw-papier) !important; box-shadow: none !important; }
.seite .aehnlich:hover { transform: none !important; box-shadow: none !important; background: #fff !important; }
.seite .aehnlich-koerper { padding: 18px 20px 20px !important; gap: 6px !important; }
.seite .aehnlich h3 { font-size: 1rem !important; color: var(--gw-tinte) !important; }
.seite .aehnlich .zeile { font-family: var(--gw-mono); font-size: 0.72rem !important; opacity: 1 !important; color: #4A4D57 !important; }
.seite .aehnlich .preis-klein { font-family: var(--gw-display); font-stretch: 75%; font-size: 1.5rem !important; color: var(--gw-tief) !important; }
.seite .anfrage, .seite .video, .seite .feld input, .seite .feld textarea { border-radius: 0 !important; }
.seite .anfrage { background: var(--gw-papier) !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; }

/* ── Unterseiten: offene Abschnitte statt weißer Kästen (wie Fahrzeug-Detailseite) ── */
.inhalt > .block, .content-wrap > .block { background: transparent !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; padding: 28px 0 0 !important; margin: 72px 0 0 !important; }
.inhalt > .block:first-child, .content-wrap > .block:first-child { margin-top: 0 !important; }
.karte, .abschluss-karte, .standort-block, .grundsatz, .impressum-block, .ds-block, .gruppe, .preisbox, .partner-zeile {
  background: var(--gw-papier) !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; box-shadow: none !important; }
.fahrzeug { border-radius: 0 !important; border: 0 !important; border-top: 2px solid var(--gw-blau) !important; background: var(--gw-papier) !important; box-shadow: none !important; }
.fahrzeug:hover { transform: none !important; box-shadow: none !important; background: #fff !important; }
@media (max-width: 640px) { .inhalt > .block, .content-wrap > .block { padding: 24px 0 0 !important; margin-top: 56px !important; } }

/* Datentafel: leere Restfelder nicht grau, Linien direkt an den Zellen */
.seite .datentafel { gap: 0 !important; background: var(--gw-papier) !important; border: 0 !important; border-top: 1px solid var(--gw-linie) !important; border-left: 1px solid var(--gw-linie) !important; }
.seite .datentafel div { border-right: 1px solid var(--gw-linie); border-bottom: 1px solid var(--gw-linie); }

/* Startseite Kontakt: Öffnungsstatus im selben Blau wie der Bereich */
.contact-section .hours-badge { background: transparent !important; border: 1px solid rgba(247,246,242,0.35) !important; color: #F7F6F2 !important; }
.contact-section .hours-badge.ist-geschlossen { color: #F7F6F2 !important; border-color: rgba(247,246,242,0.35) !important; }
.geschichte-bild, .geschichte-bild img { border-radius: 0 !important; }