/* LS AutoLab Redesign Oktober 2026
   Lädt als letzte Stildatei. Inhalte, Preise und Seitenstruktur bleiben unverändert.
   Prinzipien: nur transform/opacity bewegen, eigene Kurven, Oberflächen unter 300 ms,
   Hover nur mit Maus, Druck-Feedback überall, reduzierte Bewegung respektieren. */

/* ---------- Schrift (lokal, SIL Open Font License, keine Verbindung zu Google) ---------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 140ms;
  --dur-ui: 220ms;
  --dur-reveal: 560ms;
  --font-sans: "Geist", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --focus: #f0d187;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Browser-Oberflächen ---------- */
::selection { background: rgba(240, 209, 135, .3); color: #fff; }
input, textarea, select, [contenteditable="true"] { caret-color: var(--gold2); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html { scrollbar-color: #3b3224 #070707; }
a { text-underline-offset: .22em; }

/* ---------- Typografie ---------- */
.hero h1, .section h2, #home .hero-heading h1 { letter-spacing: -.04em; text-wrap: balance; }
.hero h1 em, .section h2 em { letter-spacing: -.02em; }
.eyebrow, .hero h1 em, .section h2 em { text-shadow: none; }
.eyebrow { letter-spacing: .2em; }
p, li { text-wrap: pretty; }

/* Zahlen, die man vergleicht: gleich breite Ziffern. Große Preise in Geist, kleine Messwerte in Geist Mono */
.service-card .price, .service-card .price b, .wizard-price, .price-total, .price-counter,
.matrix-row b, .matrix-row strong, .extras-price-grid b {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.process-steps article > span, .service-card .number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ---------- Druck-Feedback (scale wirkt zusätzlich zu bestehenden transforms) ---------- */
.button, .text-link, .gallery-more-button, .service-tabs button, .wizard-back, .whatsapp,
.contact-channel, .partner-inquiry, .vehicle-arrow, .menu-btn, .booking-form .select-card,
.site-header .nav-cta, .site-header nav a, summary, .care-plan, .extras-price-grid div,
.lightbox button, .cookie .button, .ba-compare-zoom, .top .cta, .ghost, .cta {
  transition:
    scale var(--dur-press) var(--ease-out),
    translate var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    color 200ms ease, background-color 200ms ease, border-color 200ms ease,
    box-shadow 200ms ease, opacity 200ms ease, filter 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.button:active, .text-link:active, .gallery-more-button:active, .service-tabs button:active,
.wizard-back:active, .whatsapp:active, .contact-channel:active, .partner-inquiry:active,
.vehicle-arrow:active:not(:disabled), .menu-btn:active, .booking-form .select-card:active,
.site-header .nav-cta:active, .site-header nav a:active, summary:active, .care-plan:active,
.extras-price-grid div:active, .lightbox button:active, .cookie .button:active,
.ba-compare-zoom:active, .top .cta:active, .ghost:active, .cta:active {
  scale: .97;
}
summary:active { scale: .99; }

/* Glanzstreifen über goldenen Knöpfen entfernt: ruhige Aufhellung statt Effekt */
.button:after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .button.gold:hover, .site-header .nav-cta:hover, .cta:hover { filter: brightness(1.06) saturate(1.04); }
  .text-link:hover { border-color: var(--gold2); color: #fff; }
}

/* Unterstrich im Menü über transform statt width */
nav a:after { width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { nav a:hover:after { transform: scaleX(1); } }

/* Hover-Anhebungen kürzer und leiser */
@media (hover: hover) and (pointer: fine) {
  .feature:hover, .service-card:hover, .care-plan:hover, .partner-card:hover,
  .fleet-audiences article:hover { transform: translateY(-3px); }
  .contact-channel:hover { transform: translateX(3px); }
  .social-connect-links a:hover { padding-left: 0; translate: 6px 0; }
  .select-card:hover, .booking-wizard .vehicle-slide:hover, .gallery-more-button:hover { transform: translateY(-2px); }
}
.feature, .service-card, .care-plan, .partner-card, .fleet-audiences article, .select-card {
  transition:
    scale var(--dur-press) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

/* ---------- Header: ruhiger Wechsel beim Scrollen (Auslöser jetzt per IntersectionObserver) ---------- */
.site-header { transition: background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; }

/* ---------- Einblenden beim Scrollen: kürzer, dezenter, gestaffelt ---------- */
.js .reveal:not(.visible) { opacity: 0; transform: translateY(12px); }
.reveal {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Hero: kurze, gestaffelte Ankunft statt Ladebildschirm ---------- */
@keyframes ls-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#home .hero-heading .eyebrow, #home .hero-heading h1, #home .lead, #home .hero-actions, #home .hero-assurance, #home .hero-service-line {
  animation: ls-arrive 520ms var(--ease-out) both;
}
#home .hero-heading h1 { animation-delay: 60ms; }
#home .lead { animation-delay: 120ms; }
#home .hero-actions { animation-delay: 180ms; }
#home .hero-assurance { animation-delay: 220ms; }
#home .hero-service-line { animation-delay: 260ms; }

/* ---------- Ruhe statt Dauer-Effekt ---------- */
.booking-wizard .vehicle-carousel:not(.is-transitioning) .vehicle-slide[data-position="active"] .vehicle-photo { animation: none; }
.wizard-step.active { animation-duration: 280ms; animation-timing-function: var(--ease-out); }

/* Fahrzeugwechsel im Formular: 840 ms → 480 ms, Bewegung auf dem Bildschirm = ease-in-out */
.booking-wizard .vehicle-photo { transition-duration: 480ms, 480ms, 320ms; }
.booking-wizard .vehicle-carousel.is-transitioning .vehicle-slide.is-outgoing,
.booking-wizard .vehicle-carousel.is-transitioning .vehicle-slide.is-incoming,
.booking-wizard .vehicle-carousel.is-transitioning .vehicle-slide.is-outgoing .vehicle-photo,
.booking-wizard .vehicle-carousel.is-transitioning .vehicle-slide.is-incoming .vehicle-photo,
.booking-wizard .vehicle-carousel.is-transitioning .vehicle-slide.is-incoming .vehicle-art::after {
  animation-duration: 480ms !important;
  animation-timing-function: var(--ease-in-out) !important;
}

/* Preiswechsel: Rückmeldung in 420 ms statt 1050 ms */
.premium-price .price-total.price-up .price-counter,
.premium-price .price-total.price-down .price-counter,
.premium-price .price-total.price-animating::after { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
.premium-price .price-total.price-up::before,
.premium-price .price-total.price-down::before { animation-duration: 300ms; }
.premium-price .price-total.price-settled::after,
.premium-price .price-total.price-settled > strong { animation-duration: 240ms; }

/* Wizard-Schritt und Lightbox */
.lightbox { transition-duration: 240ms; }

/* ---------- Galerie: Vorher/Nachher-Vergleich ---------- */
.before-after-gallery.has-compare { gap: clamp(14px, 2vw, 24px); }
@media (min-width: 901px) {
  .before-after-gallery.has-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .before-after-gallery.has-compare > .ba-pair:nth-child(3n + 2) { margin-top: 48px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .before-after-gallery.has-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .before-after-gallery.has-compare { grid-template-columns: 1fr; }
}
.ba-pair.ba-compare { display: block; padding: 6px; }
.ba-compare-stage {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 13px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  background: #0b0b0b;
  --pos: 50%;
}
@media (max-width: 560px) { .ba-compare-stage { aspect-ratio: 4 / 5; } }
.ba-compare-stage .ba-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  pointer-events: none;
  transform: none !important;
  filter: none !important;
}
.ba-compare-stage .ba-image::before { display: none; }
.ba-compare-stage .ba-image img { transform: none !important; transition: none; }
.ba-compare-stage .ba-before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-compare-stage .ba-image > span {
  position: absolute;
  top: 12px;
  bottom: auto;
  padding: 5px 9px;
  border-radius: 99px;
  background: rgba(7, 7, 7, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f4f1ea;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}
.ba-compare-stage .ba-before > span { left: 12px; right: auto; }
.ba-compare-stage .ba-after > span { right: 12px; left: auto; }
.ba-compare-stage[data-edge="before"] .ba-after > span,
.ba-compare-stage[data-edge="after"] .ba-before > span { opacity: 0; }
.ba-compare-divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--gold2);
  box-shadow: 0 0 0 1px rgba(7, 7, 7, .35);
  transform: translateX(var(--pos-px, 0px));
  pointer-events: none;
}
.ba-compare-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1px solid rgba(240, 209, 135, .9);
  background:
    linear-gradient(90deg, transparent 13px, #f0d187 13px 15px, transparent 15px 25px, #f0d187 25px 27px, transparent 27px) center / 40px 10px no-repeat,
    rgba(7, 7, 7, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: scale var(--dur-press) var(--ease-out);
}
.ba-compare-stage.is-dragging .ba-compare-divider::after { scale: 1.08; }
.ba-compare-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ba-compare-stage:has(.ba-compare-range:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.ba-compare-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 6px; }
.ba-compare-foot p { margin: 0; color: #a59f93; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ba-compare-zoom {
  border: 1px solid #3a3122;
  border-radius: 99px;
  background: transparent;
  color: #d9d4ca;
  font: inherit;
  font-size: .66rem;
  letter-spacing: .06em;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .ba-compare-zoom:hover { border-color: var(--gold2); color: #fff; } }

/* ---------- Kontrast: kleine graue Schrift auf mindestens 4,5 : 1 ---------- */
.service-card .number { color: #8a8478; }
.ba-pair > p { color: #a59f93; }
.service-card .price small { color: #9a958c; }
.extras-price-grid small { color: #9a958c; }
.vehicle-carousel-status small { color: #9a958c; }
.service-type-options small { color: #9a958c; }

/* ---------- Handy: Datenschutzhinweis kompakt, WhatsApp-Knopf darüber ---------- */
@media (max-width: 700px) {
  body:has(.cookie:not(.hidden)) .floating-whatsapp { bottom: 118px; }
}

/* ---------- Leistungsseiten (landing.css) ---------- */
@media (max-width: 520px) {
  .top { gap: 12px; }
  .top nav .cta { padding: 12px 14px; font-size: .62rem; letter-spacing: .08em; white-space: nowrap; }
  .top .brand { flex-shrink: 0; }
}
.hero-actions .cta, .hero-actions .ghost, .bottom-cta a { min-height: 44px; align-items: center; }

/* ---------- Reduzierte Bewegung: keine Wege, Rückmeldung per Deckkraft bleibt ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.visible) { transform: none; }
  .reveal { transition: opacity 200ms ease; transition-delay: 0ms; }
  #home .hero-heading .eyebrow, #home .hero-heading h1, #home .lead, #home .hero-actions,
  #home .hero-assurance, #home .hero-service-line { animation: none; }
  .button:active, .text-link:active, .gallery-more-button:active, .service-tabs button:active,
  .wizard-back:active, .whatsapp:active, .contact-channel:active, .booking-form .select-card:active,
  .care-plan:active, .ghost:active, .cta:active { scale: 1; opacity: .85; }
  .feature, .service-card, .care-plan, .partner-card, .fleet-audiences article, .select-card { transition: border-color 200ms ease, background-color 200ms ease; }
}

/* Handy: Leiste unten im Hero nicht unter dem WhatsApp-Knopf verstecken (Leiste seit 8.10. entfernt, Regel harmlos) */
@media (max-width: 900px) {
  #home .hero-service-line { margin-right: 84px; }
}

/* ===== Lesbarkeit (8.10.2026, Impeccable-Audit): keine Schrift unter 11 px, Fließtext ab 13 px, Grautöne mit Kontrast ≥ 4.5:1 ===== */
:root { --ink-dim: #a39d92; --ink-label: #9b968c; }

/* Kleine Großbuchstaben-Labels, Nummern, Abzeichen: mindestens 11 px */
body .matrix-row small,
body .quality-tags span,
body .care-badge,
body .process-steps article small, body .process-steps article span,
body .quality-features .feature small, body .quality-features .feature span,
body .matrix-label span,
body .partner-card-copy small, body .partner-inquiry small,
body .contact-hub small, body .contact-channel small,
body .package-extra-note strong,
body .fleet-audiences article span,
body .care-plan > span,
body .ba-image span,
body .service-card .number,
body .local-seo-services article span,
body .gallery-project-head span { font-size: 11px; letter-spacing: .08em; }

/* Erklärtexte und kleine Absätze: mindestens 13 px */
body .process-steps article p,
body .quality-score small,
body .pricing-note, body .combo-saving,
body .fleet-note, body .care-terms, body .placeholder-note, body .partners-footnote,
body .package-extra-note span,
body .service-extras small,
body .ba-compare-foot p,
body .fleet-offer li,
body .gallery-more-button small { font-size: 13px; line-height: 1.55; }
body .price-matrix .matrix-head strong { font-size: 12px; }
body .service-tabs button { font-size: 12px; }

/* Text-Links als Handlungsaufforderung: größer und mit Tippfläche */
body .local-seo-services article a,
body .fleet-actions .text-link,
body .care-plan a,
body .contact-channel b { font-size: 13px; }
body .local-seo-services article a,
body .fleet-actions .text-link,
body .care-plan a { display: inline-block; padding-block: .65rem; }
body .footer div a { display: inline-block; padding-block: .55rem; }

/* Blasse Grautöne anheben */
body .process-steps article span, body .process-steps article small,
body .quality-features .feature span, body .quality-features .feature small,
body .quality-score small,
body .package-extra-note span, body .service-extras small,
body .care-plan > span, body .care-plan li,
body .footer small, body .footer small * { color: var(--ink-label); }
body .matrix-head span, body .matrix-head strong { color: var(--ink-dim); }
body .care-terms, body .placeholder-note, body .partners-footnote, body .fleet-note, body .pricing-note, body .combo-saving { color: var(--ink-dim); }
/* Restliche Kleinst-Texte mit hoher Spezifität im alten CSS */
body .service-card .service-extras .package-extra-note strong { font-size: 11px !important; } /* altes CSS setzt hier !important */
body .extras-price-grid span small { font-size: 12px; color: var(--ink-dim); }
body .partners-list .partner-inquiry span, body .partner-card-copy span { font-size: 12px; }
body .ba-compare-stage .ba-image span { font-size: 11px; }
body .ba-compare-foot .ba-compare-zoom { font-size: 12px; }

/* ===== Startseite entrümpelt (8.10.2026) ===== */
/* Leistungskarten: Aufklapp-Knopf für weitere Leistungen */
.service-more-toggle { align-self: flex-start; margin: 4px 0 18px; padding: 10px 0; min-height: 44px; background: none; border: 0; border-bottom: 1px solid rgba(201,165,90,.45); color: var(--gold2); font: 600 13px/1.2 "Geist", system-ui, sans-serif; cursor: pointer; }
.service-more-toggle:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .service-more-toggle:hover { color: #fff; border-color: var(--gold2); } }
/* Preistabellen aufklappbar */
.price-table-toggle { margin: 34px auto 0; max-width: 1180px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.02); }
.price-table-toggle > summary { list-style: none; cursor: pointer; padding: 18px 22px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 15px/1.3 "Geist", system-ui, sans-serif; color: #f4f1ea; }
.price-table-toggle > summary::-webkit-details-marker { display: none; }
.price-table-toggle > summary::after { content: "+"; color: var(--gold2); font-size: 22px; line-height: 1; transition: rotate 200ms var(--ease-out, ease-out); }
.price-table-toggle[open] > summary::after { rotate: 45deg; }
.price-table-toggle > *:not(summary) { margin-inline: 18px; }
.price-table-toggle > p:first-of-type { color: var(--ink-dim, #a39d92); font-size: 13px; }
.price-table-toggle .price-matrix:last-of-type { margin-bottom: 18px; }
/* Hinweis auf Unterseiten unter den Leistungen */
.service-more { max-width: 1180px; margin: 28px auto 0; color: var(--ink-dim, #a39d92); font-size: 14px; line-height: 1.9; text-align: center; }
.service-more a { color: #f4f1ea; border-bottom: 1px solid rgba(201,165,90,.45); padding-block: 8px; }
@media (hover: hover) and (pointer: fine) { .service-more a:hover { color: var(--gold2); } }
/* Einsatzgebiet: Anfahrtszonen */
#einsatzgebiet .zones article { min-height: 0; }
#einsatzgebiet .zones article p { font-size: 18px; color: var(--gold2); margin-top: 6px; }
#einsatzgebiet .local-seo-area a { color: var(--gold2); border-bottom: 1px solid rgba(240,209,135,.4); padding-block: 8px; display: inline-block; }

/* ===== Logo auf allen Unterseiten exakt wie auf der Startseite (8.10.2026) ===== */
header.top .brand { display: flex; align-items: center; gap: 0; min-height: 48px; padding: 6px 4px 7px 1px; font-family: "Arial Black", Arial, sans-serif; font-style: italic; font-weight: 700; letter-spacing: -.025em; line-height: 1.3; text-decoration: none; }
header.top .brand span { display: block; padding: 3px 2px 5px; background: none; -webkit-text-fill-color: currentColor; font-family: "Arial Black", Arial, sans-serif; font-style: italic; }
header.top .brand .logo-l, header.top .brand .logo-s { font-size: clamp(20px, 1.5vw, 21.6px); font-weight: 850; letter-spacing: -.09em; }
header.top .brand .logo-auto, header.top .brand .logo-lab { font-size: clamp(11.8px, .87vw, 12.5px); font-weight: 750; letter-spacing: -.055em; margin: 0; }
header.top .brand .logo-l, header.top .brand .logo-lab { color: #efb522; text-shadow: 0 0 20px rgba(239,181,34,.24); }
header.top .brand .logo-s, header.top .brand .logo-auto { color: #dadada; text-shadow: 0 0 15px rgba(255,255,255,.1); }
header.top .brand .logo-s { margin-right: 8px; }
/* Einsatzgebiet: Anfahrtszonen kompakt als 2x2 (Handy) bzw. 4 nebeneinander */
#einsatzgebiet .local-seo-services.zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#einsatzgebiet .local-seo-services.zones article { padding: 18px 16px; min-height: 0; }
#einsatzgebiet .local-seo-services.zones article h3 { font-size: clamp(18px, 2vw, 22px); margin: 6px 0 0; }
#einsatzgebiet .local-seo-services.zones article p { margin: 4px 0 0; }
@media (max-width: 760px) { #einsatzgebiet .local-seo-services.zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }