/* Deisinger Auto, Alex Webdesign
   Schrift: Archivo (SIL OFL 1.1), Symbole: Phosphor (MIT). Alles lokal. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-variable.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Ersatzschrift mit angepassten Maßen: Arial so skaliert, dass Zeilen und Umbrüche
   bis zum Eintreffen von Archivo fast gleich bleiben (weniger Springen beim Laden). */
@font-face { font-family: "Archivo Ersatz"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 99.1%; ascent-override: 88.8%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 95.5%; ascent-override: 92.1%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Ersatz Breit"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 122.6%; ascent-override: 71.8%; descent-override: 17.1%; line-gap-override: 0%; }

:root {
  --weiss: #ffffff;
  --warmgrau: #f4f2ef;
  --linie: #dcd8d3;
  --tinte: #1a181c;
  --grautext: #5e5b61;
  --rot: #e20020;
  --rot-dunkel: #b0001a;
  --logo-grau: #b2b3b5;
  --asphalt: #2b282e;
  --gelb: #efce4a;
  --hell-auf-dunkel: #c9c6cc;
  --ph-grund: #fff3c4;
  --ph-rand: #9a7400;
  --ph-text: #4d3a00;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --breite: 1024px; /* Inhaltsbreite, wächst ab 1088 px Fenster mit (siehe unten) */
  --foto: 1024px;   /* echte Breite der Fotodateien: nie breiter zeigen */
  --rand: 16px;
  --radius: 4px;
  --kopf-h: 64px;
}

@media (min-width: 480px) { :root { --rand: 24px; } }
@media (min-width: 1024px) { :root { --rand: 32px; --kopf-h: 80px; } }
/* Große Bildschirme: Inhalt wächst fließend mit dem Fenster. Unter 1088 px wie bisher.
   Beispiele: Fenster 1280 px = 1120 px Inhalt, 1366 = 1206, 1440 bis 1600 = 1240, ab 1800 = 1320.
   Fließtext behält seine Zeilenlänge (max-width in ch), breiter werden Raster, Karten und Bänder. */
@media (min-width: 1088px) {
  :root { --breite: clamp(1024px, max(min(100vw - 160px, 1240px), 1240px + (100vw - 1600px) * 0.4), 1320px); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (min-width: 1024px) { html { scroll-padding-top: calc(var(--kopf-h) + 16px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: "Archivo", "Archivo Ersatz", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-stretch: 100%;
  font-weight: 400;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: "Archivo", "Archivo Ersatz Breit", "Archivo Ersatz", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-stretch: 125%;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: 34px; line-height: 40px; }
h2 { font-size: 28px; line-height: 34px; }
h3 { font-size: 22px; line-height: 28px; }
@media (min-width: 480px) {
  h1 { font-size: 40px; line-height: 44px; }
  h2 { font-size: 32px; line-height: 38px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; line-height: 52px; }
  h2 { font-size: 36px; line-height: 40px; }
  h3 { font-size: 24px; line-height: 32px; }
}

.ic { width: 24px; height: 24px; fill: currentColor; flex: none; }
.ic-s { width: 20px; height: 20px; }

.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.text { max-width: 62ch; }
.leise { color: var(--grautext); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fokus */
:focus-visible { outline: 3px solid var(--rot-dunkel); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible, .kontakt :focus-visible { outline-color: var(--gelb); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--tinte); color: #fff; padding: 12px 16px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Platzhalter: bewusst auffällig */
.ph {
  display: inline-block;
  background: var(--ph-grund);
  color: var(--ph-text);
  border: 1px dashed var(--ph-rand);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
}
.ph-block { display: block; padding: 12px 14px; }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font: inherit; font-size: 18px; line-height: 24px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-rot { background: var(--rot); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-rot:hover { background: var(--rot-dunkel); } }
.btn-linie { border-color: var(--tinte); color: var(--tinte); background: transparent; }
@media (hover: hover) and (pointer: fine) { .btn-linie:hover { background: var(--tinte); color: #fff; } }
.dunkel .btn-linie, .kontakt .btn-linie { border-color: #fff; color: #fff; }
@media (hover: hover) and (pointer: fine) { .dunkel .btn-linie:hover, .kontakt .btn-linie:hover { background: #fff; color: var(--tinte); } }
.btn .ic { width: 22px; height: 22px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hinweis-fenster { display: block; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--grautext); }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); position: relative; z-index: 40; }
/* Kopf am PC voll deckend weiß: Der Logo-Kasten ist weiß, über dunklen Bändern würde ein durchscheinender Kopf grau wirken */
@media (min-width: 1024px) {
  .kopf { position: sticky; top: 0; background: var(--weiss); }
}
.kopf-innen { display: flex; align-items: center; gap: 16px; min-height: var(--kopf-h); }
.logo { display: block; flex: none; margin-right: auto; padding-block: 9px; margin-block: -9px; }
.logo img { width: 168px; height: auto; }
@media (min-width: 375px) { .logo img { width: 196px; } }
@media (min-width: 1200px) { .logo img { width: 240px; } }
.nav-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px; margin-right: -8px;
  background: none; border: 0; border-radius: var(--radius);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--tinte); cursor: pointer;
}
.nav-knopf .zu { display: none; }
.nav-knopf[aria-expanded="true"] .auf { display: none; }
.nav-knopf[aria-expanded="true"] .zu { display: block; }
.nav { display: none; }
.nav.offen {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--weiss); border-bottom: 1px solid var(--linie);
  box-shadow: 0 12px 24px -12px rgba(26,24,28,.25);
}
.nav ul { list-style: none; margin: 0; padding: 8px var(--rand) 16px; }
.nav a {
  display: flex; align-items: center; min-height: 48px;
  font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--warmgrau);
}
.nav li:last-child a { border-bottom: 0; }
.nav a[aria-current="page"] { color: var(--rot-dunkel); font-weight: 600; }
.kopf-tel { display: none; }

@media (min-width: 1024px) {
  .nav-knopf { display: none; }
  .nav, .nav.offen { display: block; position: static; box-shadow: none; border: 0; background: none; }
  .nav ul { display: flex; gap: 4px; padding: 0; }
  .nav a { min-height: 44px; padding: 0 10px; font-size: 16px; border: 0; border-radius: var(--radius); }
  @media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--rot-dunkel); } }
  .kopf-tel {
    display: inline-flex; min-height: 44px; padding: 8px 16px; font-size: 17px;
    border: 2px solid var(--tinte); color: var(--tinte); margin-left: 8px;
  }
  @media (hover: hover) and (pointer: fine) { .kopf-tel:hover { background: var(--tinte); color: #fff; } }
  .kopf-tel .ic { width: 20px; height: 20px; }
}

/* Start */
.start { padding-top: 24px; }
.start-raster { display: grid; gap: 24px; }
.ort {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rot-dunkel);
}
.ort { align-items: flex-start; }
.ort::before { content: ""; flex: none; width: 24px; height: 2px; margin-top: 9px; background: var(--rot); }
.start h1 { max-width: 11.355em; } /* = 15ch in Archivo, in em, damit die Ersatzschrift gleich umbricht */
.start .lead { margin: 14px 0 20px; max-width: 26.358em; /* = 46ch in Archivo */ color: var(--grautext); }
/* Am Handy übernimmt die feste Leiste das Anrufen */
@media (max-width: 767px) { .start-anruf { display: none; } }
@media (min-width: 1024px) {
  .start { padding-top: 48px; }
  .start-raster { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: end; }
  .start .lead { font-size: 20px; line-height: 30px; }
  .start-raster > div:first-child { padding-bottom: 28px; }
  /* Ortszeile am PC ohne Strich davor, im hellen Rot des Anruf-Knopfs (Wunsch von Deisinger, 10.11.2026); Größe bleibt */
  .ort { color: var(--rot); }
  .ort::before { content: none; }
}

/* Visitenkarte */
.karte {
  position: relative;
  background: var(--weiss);
  border-top: 4px solid var(--rot);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(26,24,28,.06), 0 12px 32px -8px rgba(26,24,28,.18);
  z-index: 2;
}
@media (min-width: 1024px) { .karte { padding: 18px 20px; } }
.karte-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.karte-foto {
  width: 60px; height: 60px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--warmgrau); /* Foto von Klaus, 09.11.2026 */
}
.karte-name { font-size: 20px; line-height: 26px; font-weight: 600; font-stretch: 112%; }
.karte-rolle { font-size: 15px; line-height: 20px; color: var(--grautext); }
.karte ul { list-style: none; margin: 0; padding: 0; }
.karte li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--warmgrau); font-size: 16px; line-height: 24px; }
.karte li .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--rot-dunkel); }
.karte a { display: inline-block; padding: 10px 0; margin: -10px 0; text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .karte a:hover { color: var(--rot-dunkel); text-decoration: underline; } }
.karte .zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; flex: 1; min-width: 0; }
.karte .klein { font-size: 14px; line-height: 20px; color: var(--grautext); font-weight: 400; }
/* Google-Zeile: Sterne stehen im Textfluss, damit es höchstens zwei Zeilen werden */
.karte .karte-google a { display: block; flex: 1; min-width: 0; padding-block: 12px; margin-block: -12px; }
.karte-google .sterne { display: inline-flex; vertical-align: -2px; margin-right: 8px; }
.karte .karte-google .sterne .ic { width: 16px; height: 16px; margin-top: 0; color: var(--rot); }
.karte .karte-google a { font-weight: 500; font-size: 15px; line-height: 20px; text-decoration: underline; text-decoration-color: var(--logo-grau); text-underline-offset: 3px; }
/* Angebotsleiste: kompakte Sprungkacheln */
/* Warmgrau-Band; Abstände so verteilt, dass die Seite insgesamt nicht länger wird (vorher 0 + 24 + 32 px) */
.angebot { padding: 20px 0 24px; background: var(--warmgrau); }
.start { padding-bottom: 12px; }
.angebot h2 { font-size: 15px; line-height: 20px; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; color: var(--grautext); font-weight: 600; margin-bottom: 12px; }
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1024px) { .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } .angebot { padding: 36px 0 40px; } }
.kachel {
  display: flex; align-items: center; gap: 10px;
  height: 100%; min-height: 60px; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  text-decoration: none; background: var(--weiss);
  font-size: 16px; line-height: 20px; font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kachel .ic { width: 24px; height: 24px; color: var(--rot-dunkel); }
/* Schmale Handys: etwas mehr Platz für „Gebrauchte“ und „US-Umrüstung“, Höhe bleibt gleich */
@media (max-width: 399px) { .kachel { font-size: 15px; padding-inline: 10px; gap: 8px; } }
.kachel-text { flex: 1; min-width: 0; }
.kachel .pfeil { width: 16px; height: 16px; color: var(--grautext); transform: rotate(90deg); transition: transform .2s var(--ease-out); }
.kachel-seite .pfeil { transform: none; }
@media (max-width: 374px) { .kachel .pfeil { display: none; } }
@media (min-width: 1024px) {
  .kachel { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 96px; padding: 12px 14px; position: relative; }
  .kachel .pfeil { position: absolute; right: 12px; bottom: 14px; }
  .kachel-text { padding-right: 20px; }
}
@media (hover: hover) and (pointer: fine) {
  .kachel:hover { border-color: var(--tinte); box-shadow: 0 6px 16px -10px rgba(26,24,28,.35); }
  .kachel:hover .pfeil { transform: rotate(90deg) translateX(3px); color: var(--tinte); }
  .kachel-seite:hover .pfeil { transform: translateX(3px); }
}

/* Bänder */
.band { padding: 32px 0; }
@media (min-width: 480px) { .band { padding: 40px 0; } }
@media (min-width: 1024px) { .band { padding: 64px 0; } }
.band-grau { background: var(--warmgrau); }
.dunkel { background: var(--tinte); color: #fff; }
.dunkel .leise { color: var(--hell-auf-dunkel); }
.kopfzeile { margin-bottom: 16px; }
.kopfzeile h2 + p { margin-top: 8px; }
@media (min-width: 1024px) {
  .kopfzeile { display: flex; align-items: baseline; gap: 24px; margin-bottom: 20px; }
  .kopfzeile h2 + p { margin: 0; }
}

/* Fahrzeuge */
.fz-raster { display: grid; gap: 20px; }
.fz-text { margin-top: 12px; max-width: 60ch; }
.fz-schwerpunkte { max-width: 62ch; font-size: 16px; line-height: 24px; }
.fz-schwerpunkte strong { color: var(--tinte); font-weight: 600; }
@media (min-width: 1024px) { .fz-raster { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; } .fz-raster .knoepfe { flex-direction: column; } }

/* US-Umrüstung: ein Teil im dunklen Band, ab 720 px Bild links und Text rechts */
.umr-raster { display: grid; gap: 20px; }
.umr-text { display: flex; flex-direction: column; align-items: flex-start; }
.umr-text h2 { margin-bottom: 10px; font-size: 26px; line-height: 32px; }
.umr-text > .leise { max-width: 52ch; margin-bottom: 20px; }
.umr-bild { margin: 0; width: 100%; max-width: 600px; } /* Acura-Foto von Deisinger, 16:9, auch am Handy (Wunsch Alex 09.11.) */
.umr-bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.umr-bild figcaption { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--hell-auf-dunkel); }
@media (min-width: 720px) {
  .umr-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
}
@media (min-width: 1024px) {
  .umr-raster { gap: 48px; }
  .umr-text h2 { font-size: 30px; line-height: 36px; }
}

/* Über uns mit Kundenstimmen */
.leitsatz {
  margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; font-stretch: 125%; letter-spacing: -0.015em;
  max-width: 24ch; text-wrap: balance;
}
@media (min-width: 640px) { .leitsatz { font-size: 34px; line-height: 40px; } }
@media (min-width: 1024px) { .leitsatz { font-size: 40px; line-height: 46px; max-width: 30ch; } }
.leitsatz .rot { color: var(--rot); }
.leitsatz-quelle { margin-top: 10px; color: var(--grautext); font-size: 16px; }
.js .leitsatz .w { opacity: .14; transition: opacity .5s var(--ease-out); }
.js .leitsatz.da .w { opacity: 1; }
.ueber-text { margin-top: 12px; max-width: 52ch; }

.bew-titel { margin: 24px 0 10px; font-size: 20px; line-height: 26px; font-stretch: 112%; }
.bew-reihe {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 8px;
  scrollbar-width: thin;
}
.bew-reihe:focus-visible { outline-offset: -3px; }
.bew-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.bew-liste > li { flex: 0 0 min(84%, 340px); scroll-snap-align: start; display: flex; }
.bew {
  margin: 0; width: 100%; display: flex; flex-direction: column; gap: 8px;
  background: var(--warmgrau); border-radius: var(--radius); padding: 16px 18px;
}
.bew blockquote { margin: 0; flex: 1; }
.bew blockquote p { font-size: 16px; line-height: 24px; }
.bew figcaption { font-size: 15px; line-height: 20px; font-weight: 600; }
.sterne { display: inline-flex; gap: 2px; color: var(--rot); }
.sterne .ic { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .bew-reihe { overflow: visible; margin-inline: 0; padding: 0; }
  .bew-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
.bew-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--grautext); }
.bew-fuss p { margin: 0; flex: 1 1 320px; max-width: 64ch; }
.bew-fuss a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tinte); font-weight: 600; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .bew-fuss a:hover { color: var(--rot-dunkel); } }
.bew-fuss .ic { width: 16px; height: 16px; }

/* Kontakt */
.kontakt { background: var(--tinte); color: #fff; }
.kontakt-raster { display: grid; gap: 32px; }
@media (min-width: 1024px) { .kontakt-raster { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } } /* E-Mail-Block mittig neben den Kontaktdaten (Wunsch von Alex) */
.kontakt .leise { color: var(--hell-auf-dunkel); }
.kontakt-satz { margin-top: 10px; }
.tel-gross {
  display: inline-flex; flex-direction: column; margin: 16px 0 4px;
  text-decoration: none; color: #fff;
}
.tel-gross small { font-size: 14px; line-height: 20px; color: var(--hell-auf-dunkel); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.tel-gross span {
  font-size: 32px; line-height: 40px; font-weight: 600; font-stretch: 112%; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 3px; text-underline-offset: 8px;
}
@media (min-width: 480px) { .tel-gross span { font-size: 38px; line-height: 46px; } }
@media (hover: hover) and (pointer: fine) { .tel-gross:hover span { text-decoration-color: #fff; } }
.wege { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 360px) { .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wege .weg-breit { grid-column: 1 / -1; } }
.wege li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 16px; line-height: 24px; }
.wege .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--hell-auf-dunkel); }
.wege b { display: block; font-size: 14px; line-height: 18px; color: var(--hell-auf-dunkel); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wege a { display: inline-block; padding: 10px 0; margin: -10px 0; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .wege a:hover { text-decoration-color: #fff; } }
.wege .adresse + a { margin-top: -6px; }
.anliegen-titel { font-size: 20px; line-height: 28px; font-stretch: 112%; margin: 0 0 6px; }
.anliegen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.anliegen .btn { justify-content: flex-start; width: 100%; padding-inline: 14px; font-size: 17px; text-align: left; }
@media (max-width: 559px) { .anliegen .btn .ic { display: none; } }
.adresse { font-style: normal; }

/* Fuß */
.fuss { background: var(--weiss); padding: 28px 0 20px; font-size: 16px; line-height: 24px; }
.fuss-raster { display: grid; gap: 8px; }
@media (min-width: 768px) { .fuss-raster { grid-template-columns: 1fr auto; align-items: end; } }
.fuss img { width: 160px; margin-bottom: 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: var(--rot-dunkel); } }
.fuss-klein { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); font-size: 14px; line-height: 20px; color: var(--grautext); }
.fuss-klein a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 2px; } /* Link zu Alex Webdesign im Fließtext, nicht als 44-px-Zeile */

/* Feste Leiste am Handy */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom));
  background: var(--weiss); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 18px -10px rgba(26,24,28,.3);
}
.leiste .btn { font-size: 17px; padding-inline: 12px; }
/* Offenes Menü (vor allem Handy quer): Leiste weg, damit sie keine Menüpunkte verdeckt */
.menue-offen .leiste { display: none !important; }
body.mit-leiste { padding-bottom: 72px; }
@media (min-width: 768px) { .leiste { display: none; } body.mit-leiste { padding-bottom: 0; } }
/* Handy quer: Leiste bleibt, weil der Kopf erst ab 1024 px eine Telefonnummer zeigt */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 500px) and (pointer: coarse) {
  .leiste { display: grid; } body.mit-leiste { padding-bottom: 72px; }
}
/* Fokus nie hinter der Leiste (WCAG 2.4.11) */
@media (max-width: 767px) { html { scroll-padding-bottom: 88px; } }
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 500px) and (pointer: coarse) { html { scroll-padding-bottom: 88px; } }

/* Einblenden beim Scrollen */
.js .auf-scroll { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .auf-scroll.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .auf-scroll { transform: none; transition: opacity .3s ease; }
  .btn:active { transform: none; }
}

/* Unterseiten (Impressum, Datenschutz, 404) */
.seite { padding: 48px 0 80px; }
.seite h1 { margin-bottom: 24px; }
.seite h2 { font-size: 22px; line-height: 28px; margin: 36px 0 10px; }
.seite p, .seite address { max-width: 56ch; }
.seite address { font-style: normal; margin-bottom: 16px; }
.markierung {
  background: var(--ph-grund); border: 2px dashed var(--ph-rand); color: var(--ph-text);
  border-radius: var(--radius); padding: 16px 18px; margin: 0 0 32px; max-width: 56ch;
  font-size: 16px; line-height: 24px;
}
.markierung strong { display: block; font-size: 18px; margin-bottom: 4px; }
.notiz {
  border-left: 4px solid var(--ph-rand); background: var(--ph-grund); color: var(--ph-text);
  padding: 10px 14px; margin: 8px 0 16px; max-width: 56ch; font-size: 15px; line-height: 22px;
}
.seite a { overflow-wrap: anywhere; }
.zurueck { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; font-weight: 600; text-decoration: none; min-height: 44px; }
.zurueck .ic { transform: rotate(180deg); width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .zurueck:hover { color: var(--rot-dunkel); } }
.seite .liste { max-width: 56ch; padding-left: 22px; margin: 0 0 16px; }
.seite .liste li { margin-bottom: 8px; }
/* Rechtstexte aus dem Generator (h3, h4 und Listen ohne Klasse) */
.seite h3 { font-size: 19px; line-height: 26px; font-stretch: 112%; margin: 26px 0 8px; }
.seite h4 { font-size: 17px; line-height: 24px; font-weight: 600; margin: 18px 0 6px; }
.seite ul:not([class]) { max-width: 56ch; padding-left: 22px; margin: 0 0 16px; }
.seite ul:not([class]) li { margin-bottom: 6px; }
@media (min-width: 1024px) {
  .nav a, .kopf-tel { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .kopf-innen { gap: 8px; }
  .logo img { width: 196px; }
  .nav ul { gap: 0; }
  .nav a { padding: 0 8px; }
  .kopf-tel { padding: 8px 12px; font-size: 16px; margin-left: 4px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .karte { max-width: 520px; } }
@media (max-width: 374px) { .leitsatz { font-size: 24px; line-height: 30px; } h1 { font-size: 32px; line-height: 38px; } }


/* Aktuelle Fahrzeuge: die fünf neuesten von mobile.de (VW zuerst), live stündlich über _live/fahrzeuge/reihe.php.
   Am Handy und Tablet eine Wisch-Reihe, ab 1024 px fünf nebeneinander. Daten in zwei Zeilen (EZ · km, Kraftstoff · Getriebe). */
.start { padding-bottom: 24px; }
.fz-aktuell { margin-top: 28px; }
.fz-aktuell h2 { font-size: 15px; line-height: 20px; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; color: var(--grautext); font-weight: 600; margin-bottom: 12px; }
.fz-reihe {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 8px;
  scrollbar-width: thin;
}
.fz-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.fz-liste > li { flex: 0 0 min(72%, 280px); scroll-snap-align: start; display: flex; }
.fz-karte {
  position: relative; /* hält den unsichtbaren Linktext in der Wisch-Reihe, sonst wird die Seite breiter */
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fz-karte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fz-karte-text { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.fz-name { font-size: 16px; line-height: 22px; font-weight: 600; }
.fz-daten { font-size: 14px; line-height: 20px; color: var(--grautext); }
.fz-preis { margin-top: auto; padding-top: 6px; font-size: 18px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .fz-karte:hover { border-color: var(--tinte); box-shadow: 0 6px 16px -10px rgba(26,24,28,.35); } }
.fz-hinweis { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
@media (min-width: 1024px) {
  .start { padding-bottom: 40px; }
  .fz-aktuell { margin-top: 40px; }
  .fz-reihe { overflow: visible; margin-inline: 0; padding: 0; }
  .fz-liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

/* Kontaktformular im dunklen Kontaktbereich (ersetzt die vier Mail-Knöpfe, Versand über kontakt.php) */
/* Anfrage hinter einem Knopf, damit die Seite am Handy nicht länger wird: main.js klappt sie unter 1024 px zu,
   am PC bleibt sie offen (ohne JavaScript überall offen). Offen sieht der Knopf aus wie eine Zwischenüberschrift. */
.anfrage > summary { list-style: none; }
.anfrage > summary::-webkit-details-marker { display: none; }
.anfrage:not([open]) > summary { width: 100%; }
.anfrage[open] > summary {
  display: block; width: auto; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; color: inherit;
  font-size: 20px; line-height: 28px; font-stretch: 112%; font-weight: 600;
  pointer-events: none; transform: none; transition: none;
}
.anfrage[open] > summary .ic { display: none; }
.formular { display: grid; gap: 12px; margin-top: 14px; }
.feld { display: grid; gap: 4px; text-align: left; }
.feld label { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hell-auf-dunkel); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
  background: var(--weiss); color: var(--tinte); font: inherit; font-size: 17px; line-height: 24px;
}
.feld textarea { min-height: 112px; resize: vertical; }
.feld [aria-invalid="true"] { border-color: var(--gelb); box-shadow: 0 0 0 2px var(--gelb); }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular-hinweis { margin: 0; font-size: 14px; line-height: 20px; color: var(--hell-auf-dunkel); }
.formular-hinweis a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.formular .btn { justify-self: start; }
.formular-status { margin: 0; font-weight: 600; color: var(--gelb); }
.formular-status.ok { color: #fff; }
.formular-status:empty { display: none; }
.formular .ph { justify-self: start; }
/* Am PC Name und E-Mail/Telefon nebeneinander, damit die Seite nicht länger wird als mit den alten Mail-Knöpfen */
@media (min-width: 1024px) {
  .formular { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .formular > :not(.feld-halb) { grid-column: 1 / -1; }
}

/* Handy und Tablet bis 1023 px: Inhalte mittig (Wunsch von Alex, 08.11.2026, Tablet seit 09.11.). Die Kopfzeile bleibt (Logo links, Menü rechts).
   Impressum und Datenschutz bleiben linksbündig, dort stehen lange Rechtstexte.
   Listen ohne Symbole, damit jede Zeile sauber mittig steht; Bezeichnungen wie „Telefon“ bleiben. */
@media (max-width: 1023px) {
  .nav a { justify-content: center; text-align: center; }
  .karte { margin-inline: auto; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }

  .start .ort, .seite-404 .ort { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .start .ort::before, .seite-404 .ort::before { margin-top: 0; }
  .start-raster > div:first-child { text-align: center; }
  .start h1, .start .lead { margin-inline: auto; }
  main:not(.seite) .knoepfe, .seite-404 .knoepfe { justify-content: center; }
  .fz-aktuell h2, .fz-hinweis { text-align: center; }
  .fz-karte-text { align-items: center; text-align: center; }

  .karte-kopf { justify-content: center; }
  .karte li { justify-content: center; text-align: center; }
  .karte li > .ic { display: none; }
  .karte .zeile { flex: 0 1 auto; justify-content: center; }
  .karte .karte-google a { text-align: center; }

  .angebot h2 { text-align: center; }
  .kachel { justify-content: center; text-align: center; }
  .kachel-text { flex: 0 1 auto; }
  .kachel .pfeil { display: none; }

  .fz-raster { text-align: center; }
  .fz-text, .fz-schwerpunkte { margin-inline: auto; }

  .umr-text { align-items: center; text-align: center; }
  .umr-bild figcaption { text-align: center; }

  .leitsatz, .ueber-text { margin-inline: auto; text-align: center; }
  .leitsatz-quelle, .bew-titel { text-align: center; }
  .bew { align-items: center; text-align: center; }
  .bew-fuss { justify-content: center; text-align: center; }

  .kontakt-raster { text-align: center; }
  .wege li { grid-template-columns: minmax(0, 1fr); }
  .wege li > .ic { display: none; }
  .anliegen .btn { justify-content: center; text-align: center; }
  .feld { text-align: center; }
  .formular .btn, .formular .ph { justify-self: center; }
  .formular-hinweis, .formular-status { text-align: center; }
  .formular { max-width: 560px; margin-inline: auto; }
  .anfrage:not([open]) > summary { display: flex; max-width: 420px; margin-inline: auto; }

  .fuss-raster { justify-items: center; text-align: center; }
  .fuss img { display: block; margin-inline: auto; }
  .fuss ul { justify-content: center; }
  .fuss-klein { text-align: center; }

  .seite-404 .wrap { text-align: center; }
  .seite-404 .wrap > p { margin-inline: auto; }
}