/* OG Fahrzeughandel – Startseite, Kontakt, Impressum und Datenschutz. Baut auf site.css auf (gleiche Werte).
   Erkennungszeichen wie überall: der große Bogen aus dem Logo oben links (Schnellsuche-Karte, Kontaktkarte, Piktogramme); alle anderen Ecken klein.
   Im Kopf läuft der Film „Lichtschlag“ (Nacht, Regen, Scheinwerfer, OG-Logo am Schluss). Handy und Tablet: Film als 16:9-Band über dem Text.
   Ab 960 px: Film vollflächig hinter Überschrift und Suche, dunkler Verlauf links für die Schrift. */

/* ---------- Startseite: Kopf mit Film und Schnellsuche ---------- */
.held{position:relative;background:var(--nacht);color:#fff;margin-bottom:84px}
.held__buehne{position:relative;aspect-ratio:16/9;background:var(--nacht);overflow:hidden}
.held__film{display:block;width:100%;height:100%;object-fit:cover}
.held__filmknopf{position:absolute;right:10px;bottom:10px;z-index:3;min-height:36px;padding:0 14px;border:1px solid rgb(255 255 255 / .35);border-radius:99px;background:rgb(13 15 18 / .55);color:#fff;font:600 .82rem/1 var(--schrift);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.held__filmknopf:hover{background:rgb(13 15 18 / .75)}
.held__filmknopf:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}
.held__filmknopf[hidden]{display:none}
.held__innen{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding-top:24px}
.held__text{position:relative;z-index:1;padding-bottom:28px}
.held__zaehler{display:inline-flex;align-items:center;gap:.55em;margin-bottom:16px;padding:.4em .95em;border-radius:99px;background:var(--gruen);color:var(--tinte);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.held__punkt{width:8px;height:8px;border-radius:50%;background:var(--tinte);animation:held-puls 1.8s ease-in-out infinite}
@keyframes held-puls{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.held__punkt{animation:none}}
.held h1{font:700 clamp(2.3rem,1.4rem + 3.7vw,3.9rem)/1.03 var(--schrift-titel);letter-spacing:-.015em;max-width:17ch;text-wrap:balance}
.held__unter{margin-top:14px;max-width:46ch;font-size:1.1rem;line-height:1.45;color:rgb(255 255 255 / .86)}

.schnell{position:relative;z-index:2;margin:0 0 -64px;padding:18px 18px 20px;background:#fff;color:var(--tinte);border-radius:var(--bogen) 10px 10px 10px;box-shadow:0 22px 56px rgb(35 37 41 / .16),0 2px 6px rgb(35 37 41 / .06)}
.schnell__felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.schnell__feld label{display:block;margin-bottom:5px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--stahl)}
.schnell select{width:100%;height:48px;padding:0 38px 0 14px;border:1px solid #c5c7ca;border-radius:var(--radius);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 9.5 7 7 7-7' fill='none' stroke='%23393C40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/18px;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.schnell select:disabled{background-color:var(--flaeche-2);color:var(--nebel);cursor:default}
.schnell select:focus-visible{outline:3px solid var(--gruen-dunkel);outline-offset:1px;border-color:var(--gruen-dunkel)}
.schnell__knopf{width:100%;margin-top:14px;min-height:54px;font-size:1.05rem}
.schnell__knopf[aria-disabled="true"]{background:var(--stahl);color:#fff;cursor:default}

@media (min-width:600px){
  .held__innen{padding-top:32px}
  .held__text{padding-bottom:36px}
  .schnell{grid-column:1/-1;margin:0 0 -58px}
}
/* Erst ab 960 px liegt der Film hinter der Überschrift: darunter wäre das Logo am Filmende unter dem Text (Tablet = Band wie Handy) */
@media (min-width:960px){
  .held__buehne{position:absolute;inset:0;aspect-ratio:auto}
  /* Verlauf: links dunkel für die Überschrift, unten für den Übergang zur Suche, oben leicht für den Knopf */
  .held__buehne::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(13 15 18 / .86) 0%,rgb(13 15 18 / .58) 38%,rgb(13 15 18 / 0) 70%),linear-gradient(0deg,rgb(13 15 18 / .55) 0%,rgb(13 15 18 / 0) 32%),linear-gradient(180deg,rgb(13 15 18 / .35) 0%,rgb(13 15 18 / 0) 18%)}
  .held__filmknopf{top:16px;right:max(16px,var(--rand));bottom:auto}
  .held h1{text-shadow:0 2px 24px rgb(0 0 0 / .35)}
  .held__innen{padding-top:clamp(96px,8vw,140px)}
  .held__text{padding-bottom:clamp(72px,6vw,104px)}
  .schnell{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:0 18px;align-items:end;padding:22px 22px 22px 28px}
  .schnell__felder{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .schnell__knopf{margin-top:0}
}

/* ---------- Abschnitte ---------- */
.abschnitt{margin-top:76px}
.abschnitt h2{font:700 clamp(1.9rem,1.4rem + 1.8vw,2.7rem)/1.06 var(--schrift-titel);letter-spacing:-.01em}
.abschnitt__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-bottom:24px}
.schnellwahl{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.schnellwahl a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--linie);border-radius:99px;color:var(--tinte);font-weight:500;text-decoration:none;transition:border-color .15s,color .15s,background-color .15s}
.schnellwahl a:hover{border-color:var(--gruen-dunkel);color:var(--gruen-dunkel)}
.abschnitt__fuss{margin-top:34px;text-align:center}
.leer-hinweis{max-width:56ch;color:var(--graphit)}
.abschnitt--karten{margin-top:0}

/* Warum bei uns */
.abschnitt--warum{margin-top:84px;padding-block:56px 60px;background:var(--flaeche)}
.warum{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.warum__kopf p{margin-top:14px;max-width:48ch;color:var(--graphit);font-size:1.05rem}
.warum__liste{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:26px 36px}
.warum__liste li{padding-top:16px;border-top:3px solid var(--gruen)}
.warum__liste h3{font:700 1.4rem/1.15 var(--schrift-titel)}
.warum__liste p{margin-top:8px;color:var(--graphit)}
@media (min-width:600px){.warum__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.warum{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}

/* Werkstatt */
.werkstatt{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:26px}
.werkstatt li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start}
.werkstatt__ico{grid-row:1/span 2;width:52px;height:52px;padding:13px;border-radius:24px 8px 8px 8px;background:var(--gruen-hell);color:var(--gruen-tief)}
.werkstatt h3{font:700 1.3rem/1.15 var(--schrift-titel);align-self:center}
.werkstatt p{margin-top:4px;color:var(--graphit);grid-column:2}
@media (min-width:600px){.werkstatt{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 32px}}
@media (min-width:1100px){
  .werkstatt{grid-template-columns:repeat(4,minmax(0,1fr))}
  .werkstatt li{display:block}
  .werkstatt__ico{margin-bottom:16px}
  .werkstatt p{margin-top:8px}
}

/* Besuch: Telefon, Öffnungszeiten, Anfahrt */
.besuch{margin-top:84px;padding-block:52px 56px;background:var(--flaeche)}
.besuch__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.besuch__kopf{margin-bottom:10px;font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--nebel)}
.besuch__telefon{display:inline-flex;align-items:center;gap:10px;font:700 clamp(2.1rem,1.3rem + 3.2vw,3.1rem)/1 var(--schrift-titel);letter-spacing:-.01em;color:var(--tinte);text-decoration:none;white-space:nowrap}
.besuch__telefon .ico{color:var(--gruen-dunkel);width:.8em;height:.8em}
.besuch__telefon:hover{color:var(--gruen-dunkel)}
.besuch__klein{margin-top:10px}
.besuch__klein a{display:inline-flex;align-items:center;gap:8px}
.besuch__adresse{font-style:normal;font-size:1.05rem;line-height:1.5}
.besuch__hinweis{margin-top:6px;font-size:.85rem;color:var(--nebel)}
.zeiten{border-collapse:collapse;width:100%;max-width:360px}
.zeiten th,.zeiten td{padding:7px 0;border-bottom:1px solid var(--linie);text-align:left;font-weight:400}
.zeiten td{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;padding-left:16px}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}
@media (min-width:960px){.besuch__raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}
body.seite-start .fuss{margin-top:0}

/* ---------- Kontakt ---------- */
.kontakt{padding-bottom:8px}
.kontakt__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;margin-top:22px}
.kontakt__karte{align-self:start;padding:26px 24px 24px;background:var(--flaeche-2);border:1px solid #e6e6e7;border-radius:var(--bogen) 10px 10px 10px}
.kontakt__karte h2{font:700 1.7rem/1.1 var(--schrift-titel)}
.kontakt__karte h3{margin:24px 0 6px;font:700 1.2rem/1.2 var(--schrift-titel)}
.kontakt__adresse{margin-top:10px;font-style:normal;line-height:1.5}
.kontakt__liste{list-style:none;margin-top:14px}
.kontakt__liste li{display:flex;align-items:center;gap:12px;min-height:44px}
.kontakt__liste .ico{color:var(--gruen-dunkel)}
.kontakt__hinweis{margin-top:4px;font-size:.85rem;color:var(--nebel)}
.kontakt__formular .anfrage{margin-top:0}
.kontakt__formular h2{font:700 1.7rem/1.1 var(--schrift-titel);margin-bottom:16px}
@media (min-width:960px){.kontakt__raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}

/* ---------- Impressum, Datenschutz ---------- */
.recht{max-width:780px;padding-block:28px 0}
.recht h1{font:700 clamp(2rem,1.4rem + 2.6vw,3.2rem)/1.04 var(--schrift-titel);letter-spacing:-.012em}
.recht h2{margin-top:44px;font:700 clamp(1.5rem,1.3rem + .9vw,1.9rem)/1.12 var(--schrift-titel)}
.recht h3{margin-top:28px;font:700 1.2rem/1.25 var(--schrift-titel)}
.recht h4{margin-top:20px;font-size:1rem;font-weight:600}
.recht p,.recht ul{margin-top:12px;max-width:72ch}
.recht ul{padding-left:1.3em}
.recht li+li{margin-top:6px}
.recht h2+p,.recht h3+p,.recht h4+p{margin-top:10px}
.recht__stand{color:var(--nebel);margin-top:8px}
.recht__betont{font-weight:500}
.recht__quelle{margin-top:36px;font-size:.88rem;color:var(--nebel)}