/* =========================================================================
   AUTOPOINT GALLINCHEN — Unterseiten
   Verkauf, Ankauf, Werkstatt, Aufbereitung. Baut auf style.css auf.
   ========================================================================= */

/* ---------- KI-Kennzeichnung (EU AI Act Art. 50) ---------- */
.ki{ position: relative; }
.ki::after{
  content: ""; position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 70px; aspect-ratio: 1789.84 / 566.93;
  background: url("../bilder/ki/ki-label.svg") center / contain no-repeat;
  pointer-events: none;
}

/* =========================================================================
   SEITENKOPF
   ========================================================================= */
/* Bild steht als eigenes Element neben dem Text, nicht als Hintergrund.
   Kein overflow:hidden an .ph — die linke Spalte klebt beim Scrollen (position: sticky). */
.ph{ position: relative; background: #fff; color: var(--ink); --ph-top: clamp(104px, 9vw, 128px); }
.ph__in{
  padding-top: var(--ph-top); padding-bottom: clamp(30px, 3.6vw, 56px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 480px); gap: clamp(28px, 5vw, 90px);
}
.ph__txt{ max-width: 640px; }
.ph h1{ font-size: clamp(2.1rem, 4.3vw, 4rem); margin-top: .35em; text-wrap: balance; hyphens: auto; }
.ph__lead{ margin-top: .9em; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.12rem); color: var(--muted); }
.ph__cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ph__bild{ margin: 0; position: relative; overflow: hidden; background: #0a0a0b; }
.ph__bild img{ display: block; width: 100%; height: auto; }

/* Verkauf, Aufbereitung: Text links, Bild rechts */
.ph--split .ph__in{ grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; padding-bottom: clamp(40px, 5vw, 80px); }
.ph--split h1{ font-size: clamp(2rem, 3.6vw, 3.4rem); }
.ph--split .ph__bild img{ aspect-ratio: 4/3; object-fit: cover; }
/* Kontaktseite: Bild und die vier Formular-Buttons in einer Spalte, damit der Text links kürzer bleibt */
.ph__bildspalte{ display: flex; flex-direction: column; gap: 14px; }
.ph__formbtns{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; max-width: 420px; align-self: flex-start; }
.ph__formbtns .btn{ justify-content: center; }
@media (max-width: 560px){ .ph__formbtns{ grid-template-columns: minmax(0,1fr); max-width: none; } }

.ticks{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li{ display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ticks i{
  flex: none; width: 24px; height: 24px; background: var(--red); color: #fff;
  display: grid; place-items: center;
}

.stars{
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  font-size: .86rem; color: var(--muted); text-decoration: none;
}
.stars b{ font-size: 1.05rem; color: var(--ink); }
.stars span{ display: inline-flex; gap: 2px; color: var(--red); }
.stars:hover{ color: var(--ink); }
.dark .stars, .ph--dunkel .stars{ color: rgba(255,255,255,.8); }
.dark .stars b{ color: #fff; }

/* Vorteilsleiste unter dem Seitenkopf */
.perks{ background: var(--ink-2); color: #fff; border-top: 1px solid var(--line-d); }
.perks ul{
  list-style: none; margin: 0 auto; padding-block: clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px;
}
.perks li{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.perks i{ flex: none; width: 42px; height: 42px; border: 1px solid var(--line-d); display: grid; place-items: center; color: var(--red-soft); }
.perks b{ display: block; font-weight: 600; letter-spacing: -.01em; }
.perks small{ display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); margin-top: .2em; }

/* =========================================================================
   SEKTIONSKOPF
   ========================================================================= */
.sh{ display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; }
.sh h2{ margin-top: .4em; max-width: 22ch; }
.sh p.lead{ margin-top: .8em; max-width: 52ch; }

/* =========================================================================
   ABLAUF IN DREI SCHRITTEN
   ========================================================================= */
.flow{
  list-style: none; margin: clamp(30px, 3.4vw, 50px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 40px);
}
.flow li{ position: relative; min-width: 0; }
.flow__top{ display: flex; align-items: center; gap: 14px; }
.flow__ico{
  flex: none; width: 56px; height: 56px; background: var(--red); color: #fff;
  display: grid; place-items: center; position: relative; z-index: 1;
}
.flow__line{ flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.dark .flow__line{ background: repeating-linear-gradient(90deg, var(--line-d) 0 6px, transparent 6px 12px); }
.flow li:last-child .flow__line{ display: none; }
.flow__nr{ display: block; margin-top: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.dark .flow__nr{ color: var(--red-soft); }
.flow h3{ margin-top: .35em; }
.flow p{ margin-top: .5em; color: var(--muted); max-width: 34ch; }
.dark .flow p{ color: rgba(255,255,255,.72); }

/* =========================================================================
   KARTEN MIT AUSWAHL (Ankauf-Wege, Extras)
   ========================================================================= */
.ways{
  margin-top: clamp(28px, 3vw, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px;
}
.way{
  background: #fff; padding: clamp(20px, 2vw, 30px); min-width: 0;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink);
  border-top: 3px solid transparent; transition: border-color .3s ease, background-color .3s ease;
}
.way:hover{ border-color: var(--red); }
.way i{ width: 46px; height: 46px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); margin-bottom: 8px; }
.way p{ color: var(--muted); font-size: .95rem; }
.way__go{ margin-top: auto; padding-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* =========================================================================
   AUFBEREITUNGSPAKETE
   ========================================================================= */
.pk{
  margin-top: clamp(34px, 3.6vw, 54px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 1.2vw, 18px);
  align-items: stretch;
}
.pk__c{
  background: var(--ink-2); border: 1px solid var(--line-d); color: #fff; min-width: 0;
  display: flex; flex-direction: column;
}
/* ragt oben heraus, Unterkanten und Buttons bleiben bündig (kein transform: das nutzt die Einblendung) */
.pk__c--top{ border: 2px solid var(--red); margin-top: -16px; }
.pk__img{ position: relative; aspect-ratio: 16/10; overflow: hidden; background: #000; }
.pk__img img{ width: 100%; height: 100%; object-fit: cover; }
.pk__tag{
  position: absolute; top: 0; left: 0; z-index: 2; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: .62em .9em;
}
.pk__body{ padding: clamp(18px, 1.8vw, 26px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pk__name{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pk__name h3{ font-size: clamp(1.5rem, 2.1vw, 2rem); }
.pk__price{ font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.pk__price small{ font-size: .62em; font-weight: 600; color: var(--muted-d); margin-right: .25em; }
.pk__claim{ color: rgba(255,255,255,.74); font-size: .95rem; }
.pk__list{ list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-d); display: grid; gap: 8px; }
.pk__list li{ display: flex; gap: 10px; font-size: .92rem; }
.pk__list svg{ flex: none; color: var(--red-soft); margin-top: .32em; }
.pk__plus{
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.08); padding: .7em .9em; align-self: flex-start;
}
.pk__c .btn{ margin-top: auto; align-self: flex-start; }
.pk__note{ margin-top: 22px; font-size: .84rem; color: var(--muted-d); max-width: 80ch; }

.xtr{
  margin-top: clamp(22px, 2.4vw, 34px);
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px;
}
.xtr button{
  font: inherit; text-align: left; cursor: pointer; min-width: 0;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.xtr button i{ color: var(--red); display: flex; justify-content: space-between; align-items: center; width: 100%; }
.xtr button i em{ font-style: normal; font-size: 18px; line-height: 1; color: var(--muted); transition: transform .3s ease; }
/* lange Wörter wie „Geruchsneutralisation" dürfen auf schmalen Geräten nicht aus der Kachel laufen */
.xtr button b{ font-weight: 600; font-size: .95rem; letter-spacing: -.01em; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.chip > span{ overflow-wrap: anywhere; }
.xtr button small{ font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.xtr button:hover{ border-color: var(--red); }
.xtr button.is-on{ background: var(--red); border-color: var(--red); color: #fff; }
.xtr button.is-on i, .xtr button.is-on small, .xtr button.is-on i em{ color: #fff; }
.xtr button.is-on i em{ transform: rotate(45deg); }

/* =========================================================================
   ANFRAGE — Abschnitt und Formularkarte
   ========================================================================= */
.anf-sec{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 560px); gap: clamp(28px, 5vw, 96px); align-items: start; }
.anf-sec__txt h2{ margin-top: .4em; max-width: 16ch; }
.anf-sec__txt .lead{ margin-top: .9em; max-width: 42ch; }
.direct{ list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; max-width: 420px; }
.direct li{ border-top: 1px solid var(--line); }
.direct li:last-child{ border-bottom: 1px solid var(--line); }
.direct a{ display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; }
.direct a > span{ display: block; min-width: 0; }
.direct i{ flex: none; width: 38px; height: 38px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); }
.direct b{ display: block; font-weight: 600; overflow-wrap: anywhere; }
.direct small{ display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.direct a:hover b{ color: var(--red); }
/* auf dunklem Grund (Aufbereitung, Kontaktbänder) */
.dark .direct li, .dark .direct li:last-child{ border-color: var(--line-d); }
.dark .direct i{ border-color: var(--line-d); color: var(--red-soft); }
.dark .direct small{ color: var(--muted-d); }
.dark .direct a:hover b{ color: var(--red-soft); }

/* Anfahrtskarte: lädt erst auf Klick, vorher geht nichts an OpenStreetMap raus */
.karte{ position: relative; aspect-ratio: 4/3; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.karte iframe{ display: block; width: 100%; height: 100%; border: 0; }
.karte__btn{
  position: absolute; inset: 0; width: 100%; padding: 24px; cursor: pointer; border: 0; font: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(13,13,14,.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(13,13,14,.07) 0 1px, transparent 1px 48px),
    linear-gradient(140deg, #f7f5f2, #e9e5df);
}
.karte__btn i{ width: 52px; height: 52px; background: var(--red); color: #fff; display: grid; place-items: center; }
.karte__btn b{ font-weight: 600; font-size: 1.05rem; }
.karte__btn small{ font-size: .84rem; color: var(--muted); max-width: 34ch; }
.karte__btn:hover b{ color: var(--red); }
.karte + .anfahrt{ margin-top: 14px; }

.fc{ background: var(--paper); color: var(--ink); box-shadow: 0 20px 50px rgba(13,13,14,.13); min-width: 0; }
.ph .fc{ border: 1px solid var(--line); }
.dark .fc{ box-shadow: 0 30px 80px rgba(0,0,0,.42); }
.fc__head{ padding: clamp(18px, 1.7vw, 24px) clamp(18px, 1.7vw, 26px) 0; }
.fc__head h2{ font-size: clamp(1.3rem, 1.7vw, 1.6rem); letter-spacing: -.025em; }
.fc__head p{ margin-top: .35em; font-size: .9rem; color: var(--muted); }
.fc__steps{ list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 6px; }
.fc__steps li{
  flex: 1 1 auto; min-width: 0; padding-top: 8px; border-top: 3px solid var(--paper-2);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc__steps li.is-done{ border-color: var(--ink); color: var(--ink); }
.fc__steps li.is-on{ border-color: var(--red); color: var(--red); }
.fc__body{ padding: 18px clamp(18px, 1.7vw, 26px) clamp(20px, 1.8vw, 26px); }

.step{ border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.js .step:not(.is-on){ display: none; }
.step + .step{ margin-top: 22px; }
.js .step + .step{ margin-top: 0; }

.fld{ display: grid; gap: 7px; min-width: 0; border: 0; margin: 0; padding: 0; }
.fld__l{ font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding: 0; }
.fld__l em{ font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--muted-d); }
fieldset.fld{ display: block; }
fieldset.fld > legend{ margin-bottom: 8px; }
fieldset.fld > .fld__hint{ display: block; margin-top: 8px; line-height: 1.45; }
.sub{ display: grid; gap: 16px; }
.soft{ background: var(--paper-2); }
.row2{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

.inp{
  width: 100%; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 11px 12px; background: #fff; border: 1px solid var(--line); border-radius: 0;
  transition: border-color .2s ease;
}
.inp::placeholder{ color: #A7A29C; }
.inp:focus{ outline: 2px solid var(--red); outline-offset: -2px; border-color: var(--red); }
textarea.inp{ resize: vertical; min-height: 84px; }
select.inp{ appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230D0D0E' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center no-repeat; padding-right: 34px; }

.chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.chip{ position: relative; display: block; min-width: 0; }
.chip input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip > span{
  display: flex; align-items: center; gap: .55em; min-height: 42px;
  padding: .55em .9em; background: #fff; border: 1px solid var(--line);
  font-size: .9rem; font-weight: 500; line-height: 1.25;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover > span{ border-color: var(--ink); }
.chip input:checked + span{ background: var(--red); border-color: var(--red); color: #fff; }
.chip input:checked + span svg{ color: #fff; }
.chip input:focus-visible + span{ outline: 2px solid var(--ink); outline-offset: 2px; }
.chip svg{ flex: none; color: var(--red); }

.tiles{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.tiles .chip > span{ flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; padding: 11px 10px; gap: 10px; font-size: .86rem; }
.tiles--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.is-bad{ animation: wackeln .5s ease; }
.is-bad .chip > span{ border-color: var(--red); }
@keyframes wackeln{ 20%,60%{ transform: translateX(-5px); } 40%,80%{ transform: translateX(5px); } }

/* Paketwahl im Formular */
.opt .chip > span{ flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; }
.opt .chip b{ font-weight: 600; font-size: .98rem; }
.opt .chip small{ font-size: .8rem; color: var(--muted); }
.opt .chip input:checked + span small{ color: rgba(255,255,255,.85); }

/* Terminleiste: eine Zeile, weitere Tage nach rechts (Mo–Fr, vier Wochen) */
.days-wrap{ position: relative; }
.days{
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; overflow-y: clip;
  scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px;
}
.day{ flex: 0 0 58px; scroll-snap-align: start; }
.day--wo{ margin-left: 8px; }
.day > span{ flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 7px 0; text-align: center; min-height: 0; line-height: 1.15; }
.day small{ font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.day b{ font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.day input:checked + span small{ color: rgba(255,255,255,.85); }
.days__btn{
  position: absolute; top: calc(50% - 3px); z-index: 2; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: background-color .2s ease, color .2s ease;
}
.days__btn:hover{ background: var(--red); border-color: var(--red); color: #fff; }
.days__btn[hidden]{ display: none; }
.days__btn--prev{ left: -8px; }
.days__btn--next{ right: -8px; }
.fld__hint{ font-size: .8rem; color: var(--muted); }

/* Zusatzfragen je Leistung */
.sub--box{ padding: 14px; background: rgba(13,13,14,.035); border: 1px solid var(--line); }
.sub__t{ display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.sub__t i{ flex: none; width: 26px; height: 26px; background: var(--red); color: #fff; display: grid; place-items: center; }
.sub__t em{ margin-left: auto; font-style: normal; font-size: .75rem; font-weight: 500; color: var(--muted-d); }

/* Fototipps */
.tipps{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.tipps li{ display: inline-flex; align-items: center; gap: 6px; padding: .3em .6em; background: rgba(13,13,14,.05); font-size: .78rem; }
.tipps li svg{ flex: none; color: var(--red); }
.tipps .tipps__l{ background: none; padding-left: 0; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }

/* Fotos */
.drop{
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px; background: #fff; border: 1px dashed rgba(13,13,14,.35); cursor: pointer;
  transition: border-color .2s ease;
}
.drop:hover{ border-color: var(--red); }
.drop input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop i{ flex: none; width: 44px; height: 44px; background: var(--red); color: #fff; display: grid; place-items: center; }
.drop b{ display: block; font-weight: 600; }
.drop small{ display: block; font-size: .8rem; color: var(--muted); }
.thumbs{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.thumbs:empty{ display: none; }
.thumb{ position: relative; aspect-ratio: 1; background: var(--paper-2); overflow: hidden; display: grid; place-items: center; }
.thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.thumb.is-img img{ opacity: 1; }
.thumb span{ font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.thumb button{
  position: absolute; top: 3px; right: 3px; z-index: 1; width: 24px; height: 24px; border: 0; padding: 0;
  background: rgba(13,13,14,.78); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}

.consent{ display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.consent input{ flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); }
.consent a{ color: var(--ink); }

.fc__nav{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.fc__nav .btn{ margin-left: auto; }
.fc__back{
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.fc__back:hover{ color: var(--ink); }
.no-js-hide{ display: none; }
.js .no-js-hide{ display: inline-flex; }
.fc__err{ margin: 0; padding: 10px 12px; background: rgba(200,16,46,.08); border: 1px solid rgba(200,16,46,.35); font-size: .88rem; color: var(--red-deep); }
.fc .btn[disabled]{ opacity: .65; cursor: progress; }

.fc__ok{ padding: clamp(28px, 3vw, 40px) clamp(18px, 1.7vw, 26px); }
.fc__ok i{ width: 56px; height: 56px; background: var(--red); color: #fff; display: grid; place-items: center; }
.fc__ok h3{ margin-top: 18px; font-size: clamp(1.5rem, 2vw, 1.9rem); outline: none; }
.fc__ok p{ margin-top: .6em; color: var(--muted); }
.fc__ok .btn{ margin-top: 20px; }

.hp{ position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   INSERATE AUF DER VERKAUFSSEITE — Karte mit zwei Wegen
   ========================================================================= */
.lst--art{ position: relative; }
.lst__link{ text-decoration: none; }
.lst__link::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
.lst__ask{
  position: relative; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--red); padding: .75em 1em; white-space: nowrap;
  transition: background-color .25s ease;
}
.lst__ask:hover{ background: var(--red-deep); }

/* Fahrzeugbestand als Raster (fahrzeuge.html) — die Abschlusskarte läuft über die volle Breite */
.bestand{ margin-top: clamp(26px, 3vw, 42px); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px, 1.2vw, 20px); }
.bestand .lst--all{ grid-column: 1 / -1; gap: 10px; }
.bestand .lst--all__k{ margin-bottom: 0; }
.bestand .lst--all > span:last-child{ display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 24px; align-items: center; }
.bestand .lst--all p{ grid-column: 1; max-width: 60ch; }
.bestand .lst--all__go{ grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
@media (max-width: 1180px){ .bestand{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .bestand{ grid-template-columns: minmax(0,1fr); } }
.lst__ohne{ position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-d); font-size: .86rem; }

/* Fahrzeugseite ohne Seitenkopf: die Bestandsüberschrift steht direkt unter der Menüleiste */
.bestand-kopf{ padding-top: clamp(110px, 9.5vw, 150px); }
.bestand-kopf h1{ font-size: clamp(2rem, 3.6vw, 3.4rem); max-width: 22ch; text-wrap: balance; }

/* Filterleiste über dem Bestand */
.flt{ margin-top: clamp(26px, 3vw, 42px); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 10px; }
.js .flt.no-js-hide{ display: grid; }
.flt__f{ display: grid; gap: 6px; min-width: 0; }
.flt__f > span{ font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.flt__zahl{ margin-top: 14px; font-size: .9rem; color: var(--muted); }
.js .flt__zahl.no-js-hide{ display: block; }
.flt__zahl b{ color: var(--ink); }
.flt + .flt__zahl + .bestand{ margin-top: 14px; }
.flt__leer{ margin-top: 24px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); background: #fff; display: grid; gap: 16px; justify-items: start; }
.flt__leer p{ color: var(--muted); max-width: 52ch; }
@media (max-width: 1000px){ .flt{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Preisspanne: zwei Schieberegler auf einer Spur, roter Balken zwischen den Griffen */
.flt__f--preis{ grid-column: span 2; }
.flt__f--preis > span{ display: flex; justify-content: space-between; gap: 10px; }
.flt__f--preis output{ font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.flt__range{ --a: 0%; --b: 100%; position: relative; height: 47px; border: 1px solid var(--line); background: #fff; }
.flt__range::before, .flt__range::after{ content: ""; position: absolute; top: 50%; height: 3px; margin-top: -1.5px; }
.flt__range::before{ left: 18px; right: 18px; background: var(--line); }
.flt__range::after{ left: calc(18px + (100% - 36px) * var(--a) / 100%); right: calc(18px + (100% - 36px) * (100% - var(--b)) / 100%); background: var(--red); }
.flt__range input{
  position: absolute; top: 0; left: 8px; width: calc(100% - 16px); height: 100%; margin: 0; z-index: 1;
  background: none; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.flt__range input::-webkit-slider-runnable-track{ background: none; height: 100%; }
.flt__range input::-moz-range-track{ background: none; }
.flt__range input::-webkit-slider-thumb{
  -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; margin-top: 12.5px; border-radius: 50%;
  background: #fff; border: 2px solid var(--red); box-shadow: 0 1px 4px rgba(13,13,14,.25); cursor: grab;
}
.flt__range input::-moz-range-thumb{
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--red); box-shadow: 0 1px 4px rgba(13,13,14,.25); cursor: grab;
}
.flt__range input:focus-visible::-webkit-slider-thumb{ outline: 2px solid var(--ink); outline-offset: 2px; }
.flt__range input:focus-visible::-moz-range-thumb{ outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 520px){ .flt{ gap: 8px; } .flt .inp{ padding-block: 9px; } }

/* Startseite: solange der Bestand lädt, steht nur die Karte „Alle Fahrzeuge“ in der Reihe */
.rail[data-bestand-rail]:not(.is-geladen){ grid-auto-columns: minmax(260px, calc((100% - 3.5 * var(--rgap)) / 3.5)); }

/* =========================================================================
   FAHRZEUG-DETAILSEITE (fahrzeug.php)
   ========================================================================= */
.fz{ background: #fff; padding: clamp(96px, 8.5vw, 120px) 0 clamp(40px, 5vw, 80px); }
.fz__pfad{ display: flex; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: clamp(16px, 2vw, 26px); }
.fz__pfad a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.fz__pfad a:hover{ color: var(--red); border-color: var(--red); }
.fz__pfad span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.fz__in{ display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(24px, 3.4vw, 60px); align-items: start; }

.fz__haupt{ position: relative; display: block; aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden; }
.fz__haupt img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.fz__haupt:hover img{ transform: scale(1.02); }
.fz__haupt--leer{ display: grid; place-items: center; color: var(--muted); }
.fz__zahl{
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: .6em .85em; background: rgba(13,13,14,.82); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.fz__thumbs{ margin-top: 8px; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; }
.fz__thumbs a{ position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
.fz__thumbs img{ width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.fz__thumbs a:hover img{ opacity: .8; }
.fz__thumbs .fz__rest{ display: none; }
.fz__mehr{ position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13,13,14,.62); color: #fff; font-weight: 600; font-size: 1.05rem; }

.fz__info{ position: sticky; top: 92px; }
.fz__info h1{ font-size: clamp(1.7rem, 2.6vw, 2.5rem); margin-top: .35em; text-wrap: balance; hyphens: auto; }
.fz__info h1 span{ display: block; font-size: .56em; font-weight: 500; letter-spacing: -.01em; color: var(--muted); margin-top: .35em; line-height: 1.3; }
.fz__preis{ margin-top: 20px; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.fz__preis span{ display: block; margin-top: .55em; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fz__eck{ list-style: none; margin: 24px 0 0; padding: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fz__eck li{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.fz__eck i{ flex: none; width: 38px; height: 38px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); }
.fz__eck small{ display: block; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.fz__eck b{ display: block; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.fz__vorz{ margin-top: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; font-size: .92rem; }
.fz__vorz i{ width: 20px; height: 20px; }
.fz__cta{ margin-top: 24px; display: grid; gap: 8px; }
.fz__cta .btn{ justify-content: center; }
.fz__hinweis{ margin-top: 14px; font-size: .86rem; color: var(--muted); }
.fz__hinweis a{ color: var(--ink); }

.fz-daten{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.fz-daten h2, .fz-text h2{ margin-top: 0; }
.fz__dl{ margin: 26px 0 0; display: grid; }
.fz__dl div{ display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fz__dl dt{ color: var(--muted); font-size: .92rem; }
.fz__dl dd{ margin: 0; font-weight: 500; font-size: .92rem; }
.fz__aus{ list-style: none; margin: 26px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.fz__aus li{ display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: .92rem; break-inside: avoid; }
.fz__aus svg{ flex: none; color: var(--red); margin-top: .35em; }

.fz-text{ display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.fz__text{ max-width: 72ch; color: #3b3835; font-size: .97rem; }
.fz__text p + p, .fz__text ul, .fz__text p + ul, .fz__text ul + p{ margin-top: 1em; }
.fz__text ul{ padding-left: 1.2em; }
.fz__text li{ margin-top: .3em; }
.fz__text strong{ color: var(--ink); }
.fz__text hr{ border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }

.fz-weg{ background: #fff; padding-top: clamp(130px, 12vw, 180px); }
.fz-weg h1{ font-size: clamp(2rem, 3.6vw, 3.2rem); margin-top: .35em; max-width: 20ch; }
.fz-weg .lead{ margin-top: 1em; max-width: 56ch; }

@media (max-width: 1000px){
  .fz__in, .fz-daten, .fz-text{ grid-template-columns: minmax(0,1fr); }
  .fz__info{ position: static; }
  .fz__thumbs{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .fz__thumbs a:nth-child(n+5){ display: none; }
}
@media (max-width: 560px){
  .fz__aus{ columns: 1; }
  .fz__vorz{ grid-template-columns: minmax(0,1fr); }
  .fz__dl div{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* =========================================================================
   VORTEILE (Ankauf) — Raster mit Linien
   ========================================================================= */
.vt{
  list-style: none; margin: clamp(30px, 3.4vw, 50px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.vt li{
  min-width: 0; padding: clamp(18px, 1.8vw, 26px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 16px; align-content: start;
  transition: background-color .25s ease;
}
.vt li:hover{ background: #fff; }
.vt i{ grid-row: 1 / span 2; width: 44px; height: 44px; background: var(--red); color: #fff; display: grid; place-items: center; }
.vt h3{ font-size: clamp(1rem, 1.2vw, 1.14rem); letter-spacing: -.015em; align-self: center; }
.vt p{ margin-top: .35em; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.vt-cta{ margin-top: clamp(22px, 2.4vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* =========================================================================
   BILDPLATZ — echtes Foto oder Platzhalter „Bild folgt“ (Fotos liefert das Autohaus)
   ========================================================================= */
.slot{ position: relative; overflow: hidden; background: rgba(13,13,14,.05); }
.slot > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot--leer{
  border: 1px dashed rgba(13,13,14,.28); color: var(--muted); text-align: center; padding: 16px;
  display: grid; place-items: center; align-content: center; gap: 8px;
}
.slot--leer > span{ font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.slot--leer > small{ font-size: .82rem; max-width: 30ch; }

/* =========================================================================
   ZEITSTRAHL (Ankauf) — Linie in der Mitte, Bild und Text wechseln die Seite
   ========================================================================= */
.tl{ list-style: none; margin: clamp(28px, 3vw, 46px) 0 0; padding: 0; position: relative; display: grid; gap: clamp(24px, 2.6vw, 40px); }
.tl::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(200,16,46,.35); }
/* mit JavaScript: graue Linie, die sich beim Scrollen rot füllt (--tl von 0 bis 1) */
.js .tl::before{ background: rgba(13,13,14,.13); }
.js .tl::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--tl, 0));
}
.tl__i{ position: relative; display: grid; grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr); align-items: center; }
.tl__nr{
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  width: 58px; height: 58px; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 0 0 10px var(--paper-2);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.js .tl__nr{ background: var(--paper); color: var(--muted); border: 2px solid rgba(13,13,14,.16); }
.js .tl__nr.is-on{ background: var(--red); color: #fff; border-color: var(--red); }
/* Bilder dicht an der Linie und kleiner, damit gut anderthalb Schritte auf einen Bildschirm passen */
.tl__img{ grid-column: 1; grid-row: 1; aspect-ratio: 3/2; width: 100%; max-width: 500px; justify-self: end; }
.tl__txt{ grid-column: 3; grid-row: 1; max-width: 48ch; }
.tl__i:nth-child(even) .tl__img{ grid-column: 3; justify-self: start; }
.tl__i:nth-child(even) .tl__txt{ grid-column: 1; justify-self: end; }
.tl__k{ font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.tl__txt h3{ margin-top: .45em; font-size: clamp(1.3rem, 1.9vw, 1.8rem); letter-spacing: -.025em; }
.tl__txt p{ margin-top: .7em; color: var(--muted); }
.tl__txt ul{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tl__txt li{ display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.tl__txt li svg{ flex: none; color: var(--red); margin-top: .38em; }
.tl__txt .btn{ margin-top: 18px; }
.tl-end{ margin-top: clamp(28px, 3vw, 44px); display: flex; justify-content: center; }

/* =========================================================================
   GALERIE „UNSERE AUTOS“ — wie ein Instagram-Feed: drei Spalten, gleich große Kacheln
   ========================================================================= */
.gal{
  margin-top: clamp(28px, 3.2vw, 50px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(3px, .45vw, 6px);
}
.gal__i{ margin: 0; position: relative; overflow: hidden; background: #0a0a0b; aspect-ratio: 1; }
.gal__i a{ display: block; width: 100%; height: 100%; }
.gal__i img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.3,1); }
.gal__i:hover img{ transform: scale(1.045); }
.gal__i figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  padding: 30px 14px 12px; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s ease;
}
/* Bildtext erst beim Darüberfahren, wie im Feed; auf dem Handy steht er in der Großansicht */
.gal__i:hover figcaption, .gal__i a:focus-visible figcaption{ opacity: 1; }
.gal__side{ aspect-ratio: 4/3; }
.haus__bild{ aspect-ratio: 4/3; margin-bottom: clamp(22px, 2.4vw, 34px); }

/* =========================================================================
   EINZUGSGEBIET
   ========================================================================= */
.reg{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.reg h2{ margin-top: .4em; max-width: 20ch; }
.reg p:not(.kicker):not(.reg__l){ margin-top: 1em; color: var(--muted); max-width: 60ch; }
.reg__l{ font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.orte{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.orte li{ display: flex; align-items: center; gap: .45em; padding: .55em .9em; background: #fff; border: 1px solid var(--line); font-size: .92rem; font-weight: 500; }
.orte svg{ color: var(--red); flex: none; }
.anfahrt{ margin-top: clamp(22px, 2.4vw, 34px); padding: clamp(18px, 1.8vw, 26px); background: #fff; border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 24px; align-items: start; }
.anfahrt b{ display: block; font-weight: 600; margin-top: 6px; }
.anfahrt span:not(.reg__l){ display: block; font-size: .9rem; color: var(--muted); }
.anfahrt .reg__l{ display: block; margin: 0; }
.anfahrt .btn{ grid-column: 1 / -1; justify-self: start; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ display: grid; grid-template-columns: minmax(0, clamp(220px, 30%, 420px)) minmax(0,1fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.faq h2{ margin-top: .4em; }
/* Überschrift bleibt stehen, bis alle Fragen durch sind */
@media (min-width: 901px){
  .faq__kopf{ position: sticky; top: 92px; align-self: start; }
}
/* Formularsektionen (z. B. Kontaktseite): Text bleibt stehen, bis das Formular durchgescrollt ist */
@media (min-width: 901px){
  .anf-sec__txt{ position: sticky; top: 92px; align-self: start; }
}
.faq__list{ border-bottom: 1px solid var(--line); }
.faq details{ border-top: 1px solid var(--line); }
.faq summary{
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary i{ flex: none; width: 32px; height: 32px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); transition: transform .3s ease, background-color .25s ease; }
.faq details[open] summary i{ transform: rotate(45deg); background: var(--red); border-color: var(--red); color: #fff; }
.faq details p{ padding: 0 50px 20px 0; color: var(--muted); max-width: 70ch; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1180px){
  .vt{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .perks ul{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xtr{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ph__in{ grid-template-columns: minmax(0,1fr) minmax(0, 430px); gap: 32px; }
}

/* Seitenkopf mit Formular: Text und Bild bleiben stehen, bis das Formular durchgescrollt ist.
   Die Spalte ist so hoch wie der freie Bildschirm, das Bild füllt den Rest unter dem Text. */
@media (min-width: 901px){
  .ph--form .ph__in{ align-items: start; }
  .ph--form .ph__links{
    position: sticky; top: auto; bottom: 24px; display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 30px);
  }
  .ph--form .ph__txt{ max-width: none; }
  .ph--form h1{ font-size: clamp(2rem, 3.4vw, 3.2rem); }
  .ph--form .ph__bild img{ aspect-ratio: 4/3; object-fit: cover; }
}
/* niedrige Bildschirme (Laptops): Kopftext kompakter, damit er ganz unter die Navigation passt */
@media (min-width: 901px) and (max-height: 860px){
  .ph h1{ font-size: clamp(2rem, min(4.3vw, 6.4vh), 3.4rem); }
  .ph__lead{ margin-top: .7em; font-size: 1rem; }
  .ph .ticks{ margin-top: 16px; gap: 7px; }
  .ph .stars{ margin-top: 16px; }
}

@media (max-width: 900px){
  /* Zeitstrahl: Linie links, Text vor dem Bild */
  .tl::before, .js .tl::after{ left: 29px; }
  .tl__i{ grid-template-columns: 58px minmax(0,1fr); column-gap: 20px; align-items: start; }
  .tl__nr{ grid-column: 1; grid-row: 1 / span 2; justify-self: start; align-self: start; box-shadow: 0 0 0 6px var(--paper-2); }
  .tl__txt, .tl__i:nth-child(even) .tl__txt{ grid-column: 2; grid-row: 1; justify-self: start; }
  .tl__img, .tl__i:nth-child(even) .tl__img{ grid-column: 2; grid-row: 2; margin-top: 14px; justify-self: start; aspect-ratio: 16/9; }
  .tl__txt h3{ font-size: 1.2rem; }
  .tl__txt ul{ margin-top: 12px; gap: 6px; }
  .tl-end{ justify-content: flex-start; }
  .reg{ grid-template-columns: minmax(0,1fr); }
  .anfahrt{ grid-template-columns: minmax(0,1fr); }
  /* Seitenkopf: Text, Bild und Formular untereinander */
  .ph{ --ph-top: 92px; }
  .ph__in, .ph--split .ph__in{ grid-template-columns: minmax(0,1fr); gap: 24px; }
  .ph--form .ph__links{ display: grid; gap: 22px; }
  .ph__bild img{ aspect-ratio: 4/3; object-fit: cover; }
  .anf-sec, .faq{ grid-template-columns: minmax(0,1fr); }
  .flow{ grid-template-columns: minmax(0,1fr); gap: 0; }
  .flow li{ display: grid; grid-template-columns: 56px minmax(0,1fr); column-gap: 18px; padding-bottom: 26px; }
  .flow__top{ grid-row: 1 / span 3; flex-direction: column; align-items: center; height: 100%; gap: 0; }
  .flow__line{ width: 1px; height: auto; flex: 1; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px); }
  .dark .flow__line{ background: repeating-linear-gradient(180deg, var(--line-d) 0 6px, transparent 6px 12px); }
  .flow li:last-child .flow__line{ display: none; }
  .flow__nr{ margin-top: 4px; }
  .pk__c--top{ margin-top: 0; }
}

@media (max-width: 760px){
  .vt{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vt li{ grid-template-columns: minmax(0,1fr); row-gap: 10px; padding: 16px 14px; }
  .vt i{ grid-row: auto; width: 38px; height: 38px; }
  .vt h3{ align-self: start; }
  .vt p{ margin-top: 0; font-size: .84rem; }
  .ways, .pk{
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%;
    overflow-x: auto; overflow-y: hidden; overflow-y: clip; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(var(--pad) * -1); padding-right: var(--pad); gap: 8px; align-items: stretch;
  }
  .ways::-webkit-scrollbar, .pk::-webkit-scrollbar{ display: none; }
  .way, .pk__c{ scroll-snap-align: start; }
  .xtr{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xtr button:last-child:nth-child(odd){ grid-column: span 2; }
  .perks ul{ gap: 14px 12px; }
  .perks i{ width: 36px; height: 36px; }
  .faq details p{ padding-right: 0; }
  .ki::after{ width: 62px; right: 6px; top: 6px; }
}

@media (max-width: 520px){
  .row2{ grid-template-columns: minmax(0,1fr); }
  .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .perks ul{ grid-template-columns: minmax(0,1fr); }
  .fc__steps li{ font-size: 9px; letter-spacing: .08em; }
  .thumbs{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 420px){
  .fc__lang{ display: none; }
}

/* =========================================================================
   WERKSTATTLEISTUNGEN — kurze Sektionen mit Bild, Text und Vertrauenspunkten
   ========================================================================= */
.svc-nav{ margin-top: clamp(22px, 2.4vw, 32px); display: flex; flex-wrap: wrap; gap: 6px; }
.svc-nav a{
  display: inline-flex; align-items: center; gap: 8px; padding: .6em .95em;
  border: 1px solid var(--line); background: #fff; text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--ink);
  transition: border-color .2s ease, color .2s ease;
}
.svc-nav a svg{ color: var(--red); flex: none; }
.svc-nav a:hover{ border-color: var(--red); color: var(--red); }

/* Prüfliste Verkauf: vier Spalten, auf Tablets zwei */
@media (max-width: 1180px){ .vt--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================================================================
   ENDLOS-GALERIE (Referenzen, Leistungen im Detail)
   ========================================================================= */
.loop{ position: relative; }
.loop__track{
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--loop-w, 30%); gap: 8px;
  overflow-x: auto; overflow-y: hidden; overflow-y: clip; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.loop__track::-webkit-scrollbar{ display: none; }
.loop__track:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }
.loop__i{ position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: #0a0a0b; color: #fff; scroll-snap-align: start; }
.loop__i img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
a.loop__i{ cursor: zoom-in; }
a.loop__i:hover img{ transform: scale(1.045); }
.loop__cap{
  position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.loop__i.slot--leer{ display: grid; background: rgba(13,13,14,.05); color: var(--muted); }
.loop__btn{
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; padding: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: background-color .2s ease, color .2s ease;
}
.loop__btn:hover{ background: var(--red); color: #fff; }
.loop__btn--prev{ left: 10px; }
.loop__btn--next{ right: 10px; }
.loop--fest .loop__btn{ display: none; }
.loop--refs{ --loop-w: clamp(250px, 24vw, 380px); }
.loop--refs .loop__btn--prev{ left: var(--pad); }
.loop--refs .loop__btn--next{ right: var(--pad); }
/* Streifen innerhalb eines Inhaltsbereichs (Startseite) */
.loop--imwrap{ margin-top: clamp(26px, 3vw, 44px); }
.loop--imwrap .loop__btn--prev{ left: 10px; }
.loop--imwrap .loop__btn--next{ right: 10px; }
.loop--acc{ --loop-w: calc((100% - 8px) / 2); max-width: 560px; }

/* Referenzstreifen direkt unter dem Seitenkopf */
.refs{ background: var(--ink); color: #fff; padding-block: clamp(26px, 3vw, 44px) clamp(30px, 3.4vw, 50px); border-top: 1px solid var(--line-d); }
.refs__head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.refs__head .refs__t{ margin-top: 0; }
.refs__t{ flex: 1 1 auto; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -.02em; }
.refs__hint{ font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }

/* =========================================================================
   LEISTUNGEN IM DETAIL (Aufbereitung) — aufklappbar, mit Galerie
   ========================================================================= */
/* Das Skript hält beim Auf- und Zuklappen die Zeile fest, an der sich die Seite umbaut — deshalb
   overflow-anchor: none, sonst rechnet der Browser zusätzlich nach */
.acc{ margin-top: clamp(28px, 3.2vw, 46px); border-top: 1px solid var(--line); overflow-anchor: none; }
.acc__i{ border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.acc__h{ margin: 0; font: inherit; }
.acc__kopf{
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; padding: clamp(14px, 1.5vw, 20px) 0;
  display: grid; grid-template-columns: 40px 44px minmax(0,1fr) 36px; align-items: center; gap: 14px;
}
.acc__kopf:focus-visible{ outline: 2px solid var(--red); outline-offset: 4px; }
.acc__nr{ font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.acc__ico{ width: 44px; height: 44px; background: var(--red); color: #fff; display: grid; place-items: center; }
.acc__t{ display: block; font-size: clamp(1.05rem, 1.45vw, 1.35rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; transition: color .2s ease; }
.acc__t small{ display: block; margin-top: .25em; font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.acc__kopf:hover .acc__t{ color: var(--red); }
.acc__pm{ width: 36px; height: 36px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.acc__pm svg{ transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.acc__i.is-open .acc__pm{ background: var(--red); border-color: var(--red); color: #fff; }
.acc__i.is-open .acc__pm svg{ transform: rotate(45deg); }
/* Auf- und Zuklappen über die Zeilenhöhe: 0fr → 1fr gleitet weich auf die echte Inhaltshöhe */
.acc__wrap{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.3,.7,.2,1); }
.acc__i.is-open .acc__wrap{ grid-template-rows: 1fr; }
.acc__inner{ min-height: 0; overflow: hidden; }
.acc__body{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(20px, 3vw, 48px);
  padding: 4px 0 clamp(20px, 2.2vw, 30px) 98px; align-items: start;
  opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .5s cubic-bezier(.3,.7,.2,1);
}
.acc__i.is-open .acc__body{ opacity: 1; transform: none; transition-delay: .12s, .05s; }
html:not(.js) .acc__wrap{ grid-template-rows: 1fr; }
html:not(.js) .acc__body{ opacity: 1; transform: none; }
.acc__txt p{ color: #3b3936; }
.acc__txt ul{ list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 7px; }
.acc__txt li{ display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.acc__txt li svg{ flex: none; color: var(--red); margin-top: .38em; }
/* Bilder bewusst kompakt, damit über und unter der offenen Leistung die Nachbarzeilen sichtbar bleiben */
.acc__bild{ display: block; position: relative; width: min(100%, 420px); aspect-ratio: 3/2; overflow: hidden; background: #0a0a0b; }
.acc__bild img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.acc__bild:hover img{ transform: scale(1.03); }
.acc__body--text{ grid-template-columns: minmax(0, 68ch); }
.acc__i.is-sofort .acc__wrap, .acc__i.is-sofort .acc__body{ transition: none; }
@media (prefers-reduced-motion: reduce){
  .acc__wrap, .acc__body, .acc__pm, .acc__pm svg{ transition: none; }
}

/* =========================================================================
   GROSSANSICHT
   ========================================================================= */
.lb{
  position: fixed; inset: 0; z-index: 200; background: rgba(8,8,9,.95);
  display: grid; place-items: center; padding: 64px clamp(12px, 7vw, 100px) 24px; touch-action: none;
}
.lb[hidden]{ display: none; }
.lb__fig{ margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; }
.lb__fig img{
  max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100svh - 150px);
  width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none;
}
.lb figcaption{ display: flex; justify-content: space-between; gap: 18px; width: 100%; font-size: .88rem; color: rgba(255,255,255,.82); }
.lb__zahl{ color: var(--muted-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb__btn{
  position: absolute; z-index: 1; width: 48px; height: 48px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(13,13,14,.55); color: #fff; display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.lb__btn:hover{ background: var(--red); border-color: var(--red); }
.lb__zu{ top: 12px; right: 12px; }
.lb__prev{ left: 12px; top: 50%; transform: translateY(-50%); }
.lb__next{ right: 12px; top: 50%; transform: translateY(-50%); }
html.lb-offen{ overflow: hidden; }

@media (max-width: 900px){
  .acc__kopf{ grid-template-columns: 44px minmax(0,1fr) 32px; gap: 12px; }
  .acc__nr{ display: none; }
  .acc__body{ grid-template-columns: minmax(0,1fr); padding-left: 0; }
  .loop--acc{ --loop-w: 62%; }
  .acc__bild{ width: 100%; aspect-ratio: 2/1; }
}
@media (max-width: 760px){
  .loop--refs{ --loop-w: 72%; }
  .loop__btn{ width: 38px; height: 38px; }
}
@media (max-width: 600px){
  .lb{ padding: 60px 8px 84px; }
  .lb__prev, .lb__next{ top: auto; bottom: 16px; transform: none; }
  .lb__prev{ left: calc(50% - 56px); }
  .lb__next{ right: calc(50% - 56px); }
}

/* Werkstattleistungen als kleine Karten — Klick öffnet die Leistungsseite */
.wl{ margin-top: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px, 1.6vw, 24px); }
.sh + .wl{ margin-top: clamp(24px, 2.8vw, 40px); }
.wl__c{ display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .25s ease; }
.wl__c:hover{ border-color: var(--red); }
.wl__img{ display: block; aspect-ratio: 3/2; overflow: hidden; background: #0a0a0b; }
.wl__img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.3,1); }
.wl__c:hover .wl__img img{ transform: scale(1.05); }
.wl__t{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px); margin-top: auto; }
.wl__t b{ font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.35rem); letter-spacing: -.02em; line-height: 1.25; }
.wl__t .arw{ flex: none; color: var(--red); transition: transform .25s ease; }
.wl__c:hover .wl__t .arw{ transform: translate(2px, -2px); }
.ph .kicker a{ color: inherit; text-decoration: none; }
.ph .kicker a:hover{ text-decoration: underline; }
@media (max-width: 460px){
  .wl{ gap: 10px; }
  .wl__t{ padding: 12px; }
  .wl__t b{ font-size: .92rem; }
}

/* Jobs: Vorteile, Stellen, Sprungziel Formular */
#bewerben{ scroll-margin-top: 90px; }
.usp{ list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px, 1.6vw, 24px); }
.usp li{ background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); padding: clamp(20px, 2vw, 28px); }
.usp i{ display: grid; place-items: center; width: 44px; height: 44px; background: var(--red); color: #fff; }
.usp h3{ margin-top: 18px; font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -.02em; }
.usp p{ margin-top: .6em; color: var(--muted); font-size: .95rem; }
.jobs{ margin-top: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px, 1.6vw, 24px); }
.job{ background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.job__img{ aspect-ratio: 16/9; overflow: hidden; background: #0a0a0b; }
.job__img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.job__body{ padding: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; flex: 1; }
.job__meta{ font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--red); }
.job h3{ margin-top: .5em; font-size: clamp(1.3rem, 1.9vw, 1.75rem); letter-spacing: -.025em; }
.job__listen{ margin-top: 20px; display: grid; gap: 22px; }
.job h4{ font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.job .ticks{ margin-top: 12px; gap: 8px; }
.job .ticks li{ align-items: flex-start; font-weight: 400; }
.job .btn{ margin-top: auto; align-self: flex-start; }
.job__listen + .btn{ margin-top: 26px; }
@media (max-width: 1000px){ .usp{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px){ .jobs{ grid-template-columns: minmax(0,1fr); } }
@media (max-width: 460px){ .usp{ grid-template-columns: minmax(0,1fr); } }
#bewerbung h1{ hyphens: manual; }   /* Trennung nur an „Fahrzeug|aufbereiter" */

/* Sprung zu einem Formular: Schatten kurz rot, dann zurück zum normalen Schatten */
@keyframes fc-hinweis{
  0%, 30%{ box-shadow: 0 0 0 2px var(--red), 0 22px 64px rgba(200,16,46,.5); }
  100%{ box-shadow: 0 0 0 0 rgba(200,16,46,0), 0 20px 50px rgba(13,13,14,.13); }
}
.fc.is-hinweis{ animation: fc-hinweis 2.4s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce){ .fc.is-hinweis{ animation-duration: .01s; } }