/* KASKADE 3.x: Sektionen. Rhythmus: §1 dunkel · §2 dunkel · §3 hell · §4 dunkel · §5 hell · §6 dunkel · §7 hell · §8 dunkel · §9 hell · §10 dunkel · §11 dunkel · Footer dunkel. */

/* ---------- §1 Hero: Angebots-Karussell (Referenz Scout/Hyundai). Fahrzeug in der Bildmitte, Headline darunter, Fußzeile zentriert ---------- */
/* Hochformat (Handy, Tablet hoch): Foto oben, läuft in Graphit aus, Text darunter. Querformat: Foto füllt den Screen. */
.hero { --hero-dauer: 7s; position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--graphit); color: var(--text-hell); --line: rgba(243, 240, 234, .22); }
.hero__bilder { position: relative; flex: 1 1 auto; min-height: min(100vw, 50svh); overflow: hidden; }
.hero__bild { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__bild.is-aktiv { opacity: 1; }
.hero__bild .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; background: var(--graphit); }
.hero__bild[data-slide="0"] .media img { object-position: 49% 72%; }
.hero__bilder::before, .hero__bilder::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero__bilder::before { top: 0; height: 160px; background: linear-gradient(to bottom, rgba(10, 11, 13, .5), rgba(10, 11, 13, 0)); }
.hero__bilder::after { bottom: -1px; height: 38%; background: linear-gradient(to top, var(--graphit), rgba(22, 23, 26, 0)); }

.hero__inhalt { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: var(--s-4); margin-top: calc(-1 * var(--s-7)); padding-bottom: var(--s-5); text-align: center; }
/* alle Texte liegen in einer Rasterzelle: die Höhe folgt dem längsten, nichts springt beim Wechsel */
.hero__texte { display: grid; }
.hero__text { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); }
.hero__text:not(.is-aktiv) { visibility: hidden; opacity: 0; transform: translateY(8px); }
.hero__text { transition: opacity 450ms var(--ease), transform 450ms var(--ease), visibility 0s linear 0s; }
.hero__text:not(.is-aktiv) { transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s linear 250ms; }

.hero__titel { font-size: clamp(1.5rem, 0.55rem + 2vw, 2.625rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.hero__zeile { display: block; }
.hero__titel [data-hero-variante="2"] { font-size: .82em; line-height: 1.15; }
.hero__zitat-nachsatz { margin: 0; color: color-mix(in srgb, var(--text-hell) 85%, transparent); }
.hero__fuss { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.hero__sub { order: -1; max-width: 72ch; margin: 0 auto; font-size: var(--fs-small); line-height: 1.55; color: color-mix(in srgb, var(--text-hell) 82%, transparent); text-wrap: balance; }
.hero__sub p { margin: 0; }
.hero__hinweis { margin-top: 8px !important; font-size: 11px; line-height: 1.45; color: color-mix(in srgb, var(--text-hell) 55%, transparent); }
.hero__hinweis .ph-flag { margin-left: 4px; vertical-align: middle; }
.hero__meta { margin: 0; color: color-mix(in srgb, var(--text-hell) 72%, transparent); }
.hero__meta > .label { display: block; }
.hero__preis { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--text-hell); }
.hero__sub strong { font-weight: 600; color: var(--text-hell); }
.hero__cta { min-height: 48px; white-space: nowrap; }
@media (max-width: 767px) { .hero__cta { width: 100%; } }

/* Fortschritts-Punkte: graue Linie füllt sich bis zum nächsten Angebot; Hover wächst zur Vorschau-Kachel.
   Kein Flex-Gap: der Abstand steckt im Punkt selbst (Linie 8 px eingerückt), so gibt es zwischen den Punkten keine tote Zone. */
.hero__punkte { display: flex; justify-content: center; }
.hero__punkt { position: relative; flex: none; width: 64px; height: 28px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.hero__linie { position: absolute; left: 8px; right: 8px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(243, 240, 234, .3); overflow: hidden; transition: background-color var(--dur) var(--ease); }
.hero__fortschritt { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; }
.hero__punkt.ist-vorbei .hero__fortschritt { transform: scaleX(1); opacity: .55; }
.hero__punkt[aria-current="true"] .hero__fortschritt { animation: hero-fortschritt var(--hero-dauer) linear forwards; }
.hero.is-pausiert .hero__punkt[aria-current="true"] .hero__fortschritt { animation-play-state: paused; }
.hero.is-statisch .hero__punkt[aria-current="true"] .hero__fortschritt { animation: none; transform: scaleX(1); }
.hero__punkt:hover .hero__linie { background: rgba(243, 240, 234, .5); }
@keyframes hero-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__vorschau {
  position: absolute; left: 50%; bottom: 12px; z-index: 3; width: 48px; height: 3px;
  transform: translateX(-50%); border-radius: 2px; overflow: hidden; opacity: 0; pointer-events: none;
  background: var(--graphit-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: width 300ms var(--ease) 180ms, height 300ms var(--ease) 180ms, border-radius 300ms var(--ease) 180ms, opacity 160ms var(--ease) 260ms;
}
.hero__vorschau-linie { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(243, 240, 234, .3); overflow: hidden; opacity: 0; transition: opacity 200ms var(--ease); }
.hero__vorschau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__vorschau-text {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 22px 10px 18px; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap;
  background: linear-gradient(to top, rgba(10, 11, 13, .85), rgba(10, 11, 13, 0)); opacity: 0; transition: opacity 200ms var(--ease);
}
.hero__vorschau-text .label { font-size: 10px; }
@media (hover: hover) {
  /* Der Punkt selbst wird so breit wie die Kachel (+ Abstand): die Nachbarn rücken zur Seite statt verdeckt zu werden,
     und die Hover-Fläche deckt die ganze Kachel ab. Mitte bleibt stehen (Reihe ist zentriert). Zuklappen erst mit
     kurzer Verzögerung, damit die Kachel beim Verlassen nicht flackert. */
  .hero__punkt { transition: width 300ms var(--ease) 180ms; }
  .hero__punkt:hover, .hero__punkt:focus-visible { width: 200px; transition-delay: 0s; }
  .hero__punkt:hover .hero__vorschau, .hero__punkt:focus-visible .hero__vorschau {
    width: 184px; height: 116px; border-radius: 12px; opacity: 1; pointer-events: auto; cursor: pointer;
    transition-delay: 0s, 0s, 0s, 0s;
  }
  .hero__punkt:hover .hero__vorschau-text, .hero__punkt:hover .hero__vorschau-linie,
  .hero__punkt:focus-visible .hero__vorschau-text, .hero__punkt:focus-visible .hero__vorschau-linie { opacity: 1; transition-delay: 140ms; }
  /* Die eigene Linie liegt deckungsgleich unter der Kachel und blitzt an den runden Ecken durch: solange die Kachel offen ist, ausblenden */
  .hero__linie { transition: background-color var(--dur) var(--ease), opacity 120ms var(--ease) 300ms; }
  .hero__punkt:hover .hero__linie, .hero__punkt:focus-visible .hero__linie { opacity: 0; transition-delay: 0s; }
}
.hero__punkt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

@media (min-width: 768px) and (min-aspect-ratio: 5/4) {
  .hero { display: block; height: 100svh; min-height: 640px; max-height: 1400px; }
  /* Foto endet über dem unteren Rand und läuft in Graphit aus: die Headline steht unter den Rädern, nicht auf ihnen */
  .hero__bilder { position: absolute; top: 0; left: 0; right: 0; bottom: clamp(96px, 13svh, 150px); min-height: 0; overflow: visible; }
  .hero__bild[data-slide="0"] .media img { object-position: 49% 80%; }
  .hero__bilder::after { height: 52%; background: linear-gradient(to top, var(--graphit) 0%, rgba(22, 23, 26, .6) 24%, rgba(22, 23, 26, 0) 100%); }
  .hero__inhalt { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; padding-bottom: var(--s-4); }
  .hero__fuss { display: grid; grid-template-columns: 1fr minmax(0, 44rem) 1fr; align-items: center; gap: var(--s-6); }
  .hero__meta { justify-self: start; text-align: left; }
  .hero__sub { order: 0; font-size: 13px; }
  /* feste Höhen: Headline 2 Zeilen, Text 3 Zeilen, damit jeder Slide identisch steht */
  .hero__titel { min-height: calc(2 * 1.12em); display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__sub > p:first-child { min-height: calc(3 * 1.55em); }
  .hero__cta { justify-self: end; }
}

/* §1b Unter dem Hero: abgerundetes Papier-Panel auf Graphit (Referenz „Clouden Club“). Fakten, Trust, CTAs, dann Fahrzeugliste */
.hero-band { --panel-rand: 8px; --panel-radius: 20px; background: var(--graphit); padding: var(--s-2) var(--panel-rand) var(--panel-rand); }
.hero-band__panel { border-radius: var(--panel-radius); padding: var(--s-6) 0 var(--s-7); }
.hero-band__zeile { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); }
.trust { display: flex; flex-direction: column; gap: 6px; color: color-mix(in srgb, currentColor 75%, transparent); }
.trust li { display: flex; align-items: flex-start; gap: 8px; }
.trust svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--akzent-text); }
@media (min-width: 768px) { .hero-band { --panel-rand: 12px; --panel-radius: 28px; } }
@media (min-width: 1024px) {
  .hero-band { --panel-radius: 36px; padding-top: var(--s-3); }
  .hero-band__panel { padding: var(--s-7) 0 var(--s-8); }
  .hero-band__zeile { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Übersicht: Überschrift + Liste aller Fahrzeuge */
.uebersicht { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.uebersicht__kopf { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.uebersicht__titel { font-weight: 500; font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.025em; text-wrap: pretty; }
.uebersicht__text { margin: 0; max-width: 46ch; }
.uebersicht__fuss { margin: var(--s-5) 0 0; }
@media (min-width: 1024px) {
  .uebersicht { margin-top: var(--s-9); padding-top: var(--s-5); }
  /* Überschrift links, Text rechts auf derselben Unterkante (Raster 8 + 4) */
  .uebersicht__kopf { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5); margin-bottom: var(--s-7); align-items: end; }
  .uebersicht__titel { grid-column: 1 / span 8; }
  .uebersicht__text { grid-column: 9 / span 4; }
}

/* Fahrzeugliste: Haarlinien nur zwischen den Zeilen, nicht über der ersten und unter der letzten */
.fz-zeile + .fz-zeile { border-top: 1px solid var(--line); }
.fz-zeile__link {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "bild name" "bild meta" "bild preis";
  column-gap: var(--s-4); row-gap: 6px; align-items: start; padding: var(--s-4) 0; text-decoration: none;
}
.fz-zeile__bild { grid-area: bild; position: relative; display: block; border-radius: 10px; overflow: hidden; }
.fz-zeile__bild::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(22, 23, 26, .1); pointer-events: none; }
.fz-zeile__bild .media, .fz-zeile__bild .foto-folgt { border-radius: 0; aspect-ratio: 4 / 3; transition: transform 500ms var(--ease); }
.foto-folgt--mini svg { width: 58%; opacity: .26; }
.fz-zeile__name { grid-area: name; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fz-zeile__titel { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, .93rem + .35vw, 1.3125rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; transition: color var(--dur) var(--ease); }
.fz-zeile__name .label { font-size: 11px; }
.fz-zeile__zelle { display: flex; flex-direction: column; gap: 6px; }
.fz-zeile__k { display: none; font-size: 10px; }
.fz-zeile__wert { display: inline-flex; align-items: center; gap: 8px; }
.fz-zeile .swatch { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 1px rgba(22, 23, 26, .2); }
.fz-zeile .swatch--2 { background: linear-gradient(135deg, var(--farbe) 50%, var(--farbe-2) 50%); }
.fz-zeile__betrag { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.fz-zeile__pfeil { display: none; }
.fz-zeile[data-status="reserviert"], .fz-zeile[data-status="verkauft"] { opacity: .5; }

/* mobil: Nr., Farbe und Status als eine Meta-Zeile, Preis darunter */
@media (max-width: 1023px) {
  /* Spalte 2 nur so breit wie „CWT 37“; Preis und Status teilen sich die letzte Zeile (links / rechts) */
  .fz-zeile__link { grid-template-columns: 104px max-content minmax(0, 1fr); grid-template-areas: "bild name name" "bild nr farbe" "bild preis preis"; }
  .fz-zeile__nr { grid-area: nr; padding-right: var(--s-3); }
  .fz-zeile__farbe { grid-area: farbe; color: var(--muted-text); }
  .fz-zeile__wert { min-width: 0; }
  .fz-zeile__preis { grid-area: preis; align-self: end; margin-top: 4px; }
  .fz-zeile__status { grid-area: preis; align-self: end; justify-self: end; }
  .fz-zeile__zelle { flex-direction: row; align-items: center; }
  .fz-zeile__name .label { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fz-zeile__link { grid-template-columns: 168px auto minmax(0, 1fr); column-gap: var(--s-5); padding: var(--s-5) 0; }
  .fz-zeile__name .label { display: block; }
}
@media (min-width: 1024px) {
  .fz-zeile__link {
    grid-template-columns: 168px minmax(0, 2.4fr) minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, .9fr) 48px;
    grid-template-areas: "bild name nr farbe status preis pfeil";
    column-gap: var(--s-5); align-items: center; padding: var(--s-4) 0;
  }
  .fz-zeile__nr { grid-area: nr; } .fz-zeile__farbe { grid-area: farbe; } .fz-zeile__status { grid-area: status; } .fz-zeile__preis { grid-area: preis; text-align: right; align-items: flex-end; }
  .fz-zeile__k { display: block; }
  .fz-zeile__pfeil {
    grid-area: pfeil; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .fz-zeile__pfeil svg { width: 18px; height: 18px; }
  .fz-zeile__link:hover .fz-zeile__pfeil, .fz-zeile__link:focus-visible .fz-zeile__pfeil { background: var(--akzent-fill); border-color: var(--akzent-fill); color: var(--akzent-on); transform: translateX(4px); }
}
.fz-zeile__link:hover .fz-zeile__bild .media, .fz-zeile__link:hover .fz-zeile__bild .foto-folgt { transform: scale(1.05); }
.fz-zeile__link:hover .fz-zeile__titel { color: var(--akzent-text); }
.fz-zeile__link:focus-visible { outline-offset: 4px; border-radius: 12px; }

/* ---------- §2 Knappheit ---------- */
.knapp__text { display: flex; flex-direction: column; gap: var(--s-6); align-items: flex-start; }
.knapp__text .prose { color: color-mix(in srgb, var(--text-hell) 82%, transparent); max-width: 62ch; }
@media (max-width: 1023px) { .knapp__titel { margin-bottom: var(--s-4); } }
@media (min-width: 1024px) { .knapp__text { padding-left: var(--s-6); padding-top: .6em; } }

/* ---------- §3 Fahrzeuge ---------- */
.fahrzeuge__intro { align-self: end; color: var(--muted-text); }
.karten { row-gap: var(--gutter); }
@media (min-width: 768px) and (max-width: 1023px) { .karten > .karte:not(.karte--quer) { grid-column: span 4; } }

/* ---------- §4 Ausstattung ---------- */
.ausstattung { counter-reset: none; }
.block { display: flex; flex-direction: column; gap: var(--s-3); background: var(--block); border-radius: var(--r-2); overflow: hidden; }
.block > .nummer, .block > .stat, .block > h3, .block > p { margin: 0; }
.block--stat, .block--fill { padding: var(--block-pad); }
.block--stat { justify-content: space-between; gap: var(--s-6); }
.block--stat .stat { color: var(--akzent); }
.stat__einheit { font-size: .4em; letter-spacing: 0; }
.block--fill { justify-content: flex-end; min-height: 240px; border: 1px solid var(--line); background: transparent; }
.block .media { border-radius: 0; }
.block__text { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--block-pad); }
.block__text p { margin: 0; }
.block--quer { flex-direction: row; gap: 0; }
.block--quer .media { flex: 0 0 40%; aspect-ratio: auto; min-height: 220px; }
.block--quer .block__text { justify-content: flex-end; }
@media (max-width: 479px) {
  .block--quer { flex-direction: column; }
  .block--quer .media { aspect-ratio: 1 / 1; flex: none; }
}
@media (min-width: 1024px) {
  .block--bild { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .block--bild .media { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .block--bild .block__text { justify-content: flex-end; }
  .block--quer .media { flex-basis: 46%; }
}
#ausstattung .caption { margin-top: var(--s-5); }

/* ---------- §5 Zwei Wege: Vollbild-Bühne mit Seitenkarte (Referenz Audio-Slider) ---------- */
.zwei-wege { padding-bottom: 0; }
.zwei-wege:has(.ist-scrolly) { padding-top: 0; }
.wege__titelzeile .h2 { max-width: 22ch; }
/* Grundlayout (mobil, ohne JS): Foto mit Abdunklung, Karte überlappt unten */
.wege { display: grid; gap: var(--s-7); max-width: var(--container); margin: 0 auto; padding: 0 var(--rand) var(--section-pad); }
.wege__buehne { display: contents; }
.weg { position: relative; display: flex; flex-direction: column; }
.weg__bild { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--graphit); }
.weg__bild .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; }
.weg__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10, 11, 13, .35), rgba(10, 11, 13, 0) 45%); }
.weg__karte {
  position: relative; z-index: 2; margin: calc(-1 * var(--s-7)) var(--s-3) 0; padding: var(--s-5);
  border-radius: 16px; background: #fff; color: var(--text-dunkel); box-shadow: 0 18px 44px rgba(14, 15, 17, .16);
}
.weg__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.weg__label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; }
.weg__label .label { color: var(--muted-dunkel); font-size: 11px; }
.weg__thumb { position: relative; flex: none; width: 128px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--papier-2); }
.weg__thumb .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; }
.weg__titel { margin: var(--s-6) 0 var(--s-3); font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; }
.weg__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted-dunkel); hyphens: auto; }
.weg__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linie-hell); }
.weg__cta { min-height: 46px; padding: 0 16px; gap: 10px; border-radius: 10px; font-size: 15px; }
.weg__wechsel { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.weg__wechsel svg { width: 14px; height: 14px; }
.weg__wechsel-hoch { transform: rotate(180deg); }
.wege__caption { margin: 0; color: var(--muted); }
@media (min-width: 768px) {
  .weg__bild { aspect-ratio: 16 / 9; }
  .weg__karte { width: min(460px, 60%); margin-top: calc(-1 * var(--s-9)); }
  .weg--a .weg__karte { margin-left: auto; margin-right: var(--s-5); }
  .weg--b .weg__karte { margin-left: var(--s-5); }
  .weg__thumb { width: 160px; }
}

/* Desktop mit JS: Bühne bleibt stehen, Scrollen wechselt A → B */
.wege.ist-scrolly { display: block; max-width: none; padding: 0; height: 230svh; }
.wege.ist-scrolly .wege__buehne { --wege-kopf: 160px; display: block; position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--graphit); }
.wege.ist-scrolly .wege__buehne::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 50%; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 11, 13, .6), rgba(10, 11, 13, .25) 45%, rgba(10, 11, 13, 0)); }
.ist-scrolly .wege__titelzeile { position: absolute; z-index: 3; top: calc(var(--header-h) + var(--s-6)); left: var(--rand); right: var(--rand); pointer-events: none; }
.ist-scrolly .wege__titelzeile .h2 { max-width: 25ch; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); color: #fff; }
.ist-scrolly .weg { position: absolute; inset: 0; display: block; }
.ist-scrolly .weg__bild { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.ist-scrolly .weg.is-aktiv .weg__bild { opacity: 1; }
/* Abdunklung zur Kartenseite hin, damit Karte und Foto zusammengehören */
.ist-scrolly .weg--a .weg__bild::after { background: linear-gradient(to left, rgba(10, 11, 13, .38), rgba(10, 11, 13, 0) 50%), linear-gradient(to bottom, rgba(10, 11, 13, .35), rgba(10, 11, 13, 0) 22%); }
.ist-scrolly .weg--b .weg__bild::after { background: linear-gradient(to right, rgba(10, 11, 13, .38), rgba(10, 11, 13, 0) 50%), linear-gradient(to bottom, rgba(10, 11, 13, .35), rgba(10, 11, 13, 0) 22%); }
.ist-scrolly .weg__karte {
  position: absolute; top: calc(var(--header-h) + var(--wege-kopf)); bottom: var(--s-7); height: fit-content; width: min(440px, 34vw); margin: auto 0;
  opacity: 0; visibility: hidden;
  transition: opacity 450ms var(--ease), transform 600ms var(--ease), visibility 0s linear 600ms;
}
.ist-scrolly .weg--a .weg__karte { right: var(--rand); transform: translateX(32px); }
.ist-scrolly .weg--b .weg__karte { left: var(--rand); transform: translateX(-32px); }
.ist-scrolly .weg.is-aktiv .weg__karte { opacity: 1; visibility: visible; transform: none; transition: opacity 450ms var(--ease) 200ms, transform 600ms var(--ease) 200ms, visibility 0s; }
.ist-scrolly .wege__caption { position: absolute; left: var(--rand); bottom: var(--s-4); z-index: 3; color: rgba(243, 240, 234, .75); }
/* niedrige Laptops: Karte kompakter, damit sie unter die Überschrift passt */
@media (max-height: 840px) {
  .ist-scrolly .weg__thumb { display: none; }
  .ist-scrolly .weg__titel { margin-top: var(--s-3); }
  .ist-scrolly .weg__karte { padding: var(--s-4) var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .ist-scrolly .weg__karte { transform: none; }
}

/* ---------- §6 Individualisieren ---------- */
/* §6 TEST Stil Referenz „Mountain Stories“: Kopfzeile, große Bildkarte mit Text auf dem Foto, zwei Icon-Spalten mit Linien */
.indiv__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.indiv__etikett { margin: 0; padding: 4px 10px; border: 1px solid currentColor; border-radius: var(--r-1); font-size: 11px; }
.indiv__mini { display: block; width: 48px; height: 48px; border-radius: var(--r-2); overflow: hidden; }
.indiv__mini .media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.indiv__kurz { flex: 1 1 100%; max-width: 46ch; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-text); }
.indiv__kurz strong { color: var(--text-dunkel); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Bildkarte: Foto füllt, zwei Verläufe sichern Kontrast (oben links Headline, unten Text) */
.indiv__karte {
  position: relative; display: grid; grid-template-rows: 1fr auto auto; min-height: 560px; padding: var(--s-5);
  border-radius: 20px; overflow: hidden; background: var(--graphit); color: var(--text-hell); isolation: isolate;
}
.indiv__karte > .media { position: absolute; inset: 0; z-index: -2; height: 100%; min-height: 0; border-radius: 0; }
.indiv__karte > .media img { object-position: 30% 92%; transition: transform 1200ms cubic-bezier(.4, 0, .2, 1); }
.indiv__karte:hover > .media img { transform: scale(1.03); }
.indiv__karte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 15, 17, .62) 0%, rgba(14, 15, 17, .18) 38%, rgba(14, 15, 17, 0) 55%),
    linear-gradient(to top, rgba(14, 15, 17, .82) 0%, rgba(14, 15, 17, .35) 40%, rgba(14, 15, 17, 0) 62%);
}
.indiv__titel {
  align-self: start; max-width: 15ch; margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 1.3rem + 3vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
}
.indiv__marke { display: flex; flex-direction: column; gap: 2px; margin: var(--s-6) 0 0; font-size: 11px; color: rgba(243, 240, 234, .78); }
.indiv__marke span + span { color: var(--text-hell); }
.indiv__unten { display: flex; align-items: flex-end; gap: var(--s-5); margin-top: var(--s-4); }
.indiv__text { flex: 1; max-width: 40ch; margin: 0; font-size: var(--fs-lead); line-height: 1.4; text-wrap: pretty; }
/* Runder Pfeil-Button wie in der Referenz; Beschriftung für Screenreader */
.indiv__pfeil { display: inline-flex; align-items: center; flex: none; color: var(--text-hell); text-decoration: none; }
.indiv__pfeil-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.indiv__pfeil-rund {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--akzent-fill); color: var(--akzent-on);
  transition: transform 380ms cubic-bezier(.4, 0, .2, 1);
}
.indiv__pfeil-rund svg { width: 22px; height: 22px; transition: transform 380ms cubic-bezier(.4, 0, .2, 1); }
.indiv__pfeil:hover .indiv__pfeil-rund { transform: scale(1.06); }
.indiv__pfeil:hover .indiv__pfeil-rund svg { transform: translateX(3px); }
.indiv__pfeil:focus-visible { outline: none; }
.indiv__pfeil:focus-visible .indiv__pfeil-rund { outline: 2px solid var(--text-hell); outline-offset: 3px; }

/* Zwei Spalten unter der Karte: Icon, fetter Titel, Text; Linie unten, Trennstrich dazwischen */
.indiv__spalten { display: grid; margin-top: var(--s-6); }
.indiv__spalte { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--text-dunkel); }
.indiv__spalte p { margin: 0; color: var(--muted-text); }
.indiv__spalte p + p { margin-top: var(--s-3); }
.indiv__icon { width: 40px; height: 40px; color: var(--text-dunkel); }
.indiv__spalte-titel { margin: 0 0 var(--s-2); font-family: var(--font-text); font-weight: 600; font-size: var(--fs-body); line-height: 1.35; letter-spacing: 0; }

@media (min-width: 640px) {
  .indiv__kopf { flex-wrap: nowrap; gap: var(--s-6); }
  .indiv__kurz { flex: 0 1 auto; }
}
@media (min-width: 768px) {
  .indiv__karte { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; min-height: 600px; padding: var(--s-7); }
  .indiv__titel { grid-column: 1 / -1; }
  .indiv__marke { align-self: end; margin: 0; }
  .indiv__unten { justify-content: flex-end; margin-top: 0; }
  .indiv__pfeil-rund { width: 76px; height: 76px; }
  .indiv__spalten { grid-template-columns: 1fr 1fr; }
  .indiv__spalte:first-child { padding-right: var(--s-7); border-right: 1px solid var(--text-dunkel); }
  .indiv__spalte:last-child { padding-left: var(--s-7); }
}
/* Desktop: Karte nahe am Bildformat (16:10 statt sehr breit), sonst wird das Foto hochskaliert und das Dach ragt in die Headline */
@media (min-width: 1024px) {
  .indiv__karte { min-height: 0; aspect-ratio: 16 / 10; max-height: 860px; padding: var(--s-8); }
  .indiv__karte > .media img { object-position: 30% 100%; }
}
@media (prefers-reduced-motion: reduce) { .indiv__karte > .media img, .indiv__pfeil-rund, .indiv__pfeil-rund svg { transition: none; } }

/* ---------- §7 Manufaktur ---------- */
.manufaktur__text { display: flex; flex-direction: column; gap: var(--s-5); justify-content: flex-end; }
.manufaktur__text p { margin: 0; }
.manufaktur__video { margin-top: var(--s-8); }
.liste { border-top: 1px solid var(--line); }
.liste li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.liste strong { font-weight: 500; }
.zitate { margin-top: var(--s-9); row-gap: var(--s-7); }
@media (max-width: 1023px) { .manufaktur__text { margin-top: var(--s-5); } .liste { margin-top: var(--s-5); } }
@media (min-width: 1024px) { .manufaktur__text { padding-left: var(--s-4); } .liste { align-self: end; } }

/* ---------- §8 So einfach geht's: Schritt-Liste links, Inhalt rechts (Referenz „Community Vibes“) ---------- */
/* Grundlayout (mobil, ohne JS): Überschrift, drei Schritte untereinander, Button am Ende */
.schritte__buehne { display: flex; flex-direction: column; gap: var(--s-6); }
.schritte__links { display: contents; }
.schritte__titel { order: 0; }
.schritte__liste { display: none; }
.schritte__rechts { order: 1; display: grid; gap: var(--s-8); }
.schritte__cta { order: 2; align-self: flex-start; }

.schritt { display: flex; flex-direction: column; gap: var(--s-4); }
.schritt__titel { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
.schritt__medien { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.schritt__foto { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--papier-2); }
.schritt__foto .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; }
/* dunkle Fakt-Kachel mit derselben Abdunklung wie Fahrzeug-Karten und Vorteile */
.schritt__kachel {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 1 / 1; padding: var(--s-4);
  border-radius: 16px; color: var(--text-hell);
  background: radial-gradient(ellipse 90% 70% at 20% 0%, rgba(243, 171, 25, .28), transparent 65%), #0E0F11;
}
.schritt__wert { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 0.75rem + 1.5vw, 2rem); line-height: 1.05; letter-spacing: -0.02em; }
.schritt__einheit { font-size: 12px; line-height: 1.35; color: rgba(243, 240, 234, .65); }
@media (max-width: 479px) { .schritt__kachel { padding: var(--s-3); } .schritt__einheit { font-size: 11px; } }
.schritt__text { margin: 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }
.schritt__fuss { margin: 0; color: var(--muted-dunkel); }

/* Desktop mit JS: Bühne bleibt stehen, Liste links schaltet mit */
.schritte-scroll.ist-scrolly { height: 300svh; }
.ablauf:has(.ist-scrolly) { padding: 0; }
.ist-scrolly .schritte__buehne {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h));
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-9); align-items: center;
}
.ist-scrolly .schritte__links { display: flex; flex-direction: column; gap: var(--s-6); }
.ist-scrolly .schritte__titel { font-size: var(--fs-label); font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-dunkel); }
.ist-scrolly .schritte__liste { display: flex; flex-direction: column; gap: var(--s-2); }
.schritte__name {
  display: flex; align-items: flex-start; gap: 0; padding: 4px 0; border: 0; background: none; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.025em;
  color: #CFCBC2; transition: color 350ms var(--ease);
}
.schritte__name:hover { color: #9E9A92; }
.schritte__name[aria-current="step"] { color: var(--text-dunkel); }
.schritte__linie { flex: none; width: 0; height: 2px; margin: .58em 0 0; /* auf Höhe der ersten Zeile */ background: currentColor; transition: width 450ms var(--ease), margin-right 450ms var(--ease); }
.schritte__name[aria-current="step"] .schritte__linie { width: 56px; margin-right: var(--s-4); }
.ist-scrolly .schritte__cta { order: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 0s linear 400ms; }
.ist-scrolly.ist-ende .schritte__cta { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--ease) 150ms, transform 400ms var(--ease) 150ms, visibility 0s; }

.ist-scrolly .schritte__rechts { display: grid; }
.ist-scrolly .schritt { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 400ms var(--ease), transform 500ms var(--ease), visibility 0s linear 500ms; }
.ist-scrolly .schritt.is-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity 450ms var(--ease) 120ms, transform 500ms var(--ease) 120ms, visibility 0s; }
.ist-scrolly .schritt__titel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-height: 760px) {
  .ist-scrolly .schritt__foto, .ist-scrolly .schritt__kachel { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ist-scrolly .schritt, .ist-scrolly .schritte__cta { transform: none !important; }
}

/* ---------- §9 Anfrage: links Foto + dunkle Kontaktleiste (Desktop gemeinsam sticky), rechts Zeilen „Bezeichnung | Inhalt“ ---------- */
.anfrage { display: grid; }
.anfrage__links { display: flex; flex-direction: column; min-width: 0; }
.anfrage__bild { position: relative; height: clamp(220px, 58vw, 420px); background: var(--graphit); overflow: hidden; }
.anfrage__bild .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; }
.anfrage__bild .media img { transition: opacity 180ms var(--ease); }
.anfrage__bild.is-wechsel .media img { opacity: 0; }
.anfrage__marke, .anfrage__plakette { position: absolute; z-index: 2; margin: 0; background: rgba(22, 23, 26, .85); color: var(--text-hell); }
.anfrage__marke { top: var(--s-4); left: var(--s-4); padding: 6px 10px; border-radius: var(--r-1); font-size: 11px; }
.anfrage__plakette { left: var(--s-4); bottom: var(--s-4); max-width: calc(100% - 2 * var(--s-4)); padding: 8px 12px; border-radius: var(--r-2); }
.anfrage__plakette p { margin: 0; }
.anfrage__plakette .label { font-size: 11px; }

/* Kontaktleiste: kleine Schrift, Telefon · Erreichbar (+ Live-Status) · Adresse mit Google-Maps-Link (nur Link, kein Embed → keine Einwilligung nötig) */
.anfrage__kontakt { padding: var(--s-5) var(--rand); border-top: 1px solid var(--line); }
.anfrage__kontakt p { margin: 0; }
.anfrage__kontakt-titel { margin: 0 0 var(--s-4); font-size: 11px; color: var(--akzent-text); }
.anfrage__kontakt-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 480px) { .anfrage__kontakt-spalten { gap: var(--s-5); } }
.anfrage__kontakt-spalten > div { display: flex; flex-direction: column; gap: var(--s-4); }
.anfrage__kontakt-spalten .label { margin-bottom: 6px; font-size: 11px; }
.anfrage__tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.anfrage__tel svg { width: 16px; height: 16px; flex: none; color: var(--akzent-text); }
.anfrage__tel:hover { color: var(--akzent-text); }
/* Adresse selbst ist der Link zu Google Maps: dezente Unterstreichung + Extern-Pfeil, Hover in Akzent */
.anfrage__karte { display: block; width: fit-content; color: inherit; text-decoration: underline; text-decoration-color: rgba(243, 240, 234, .35); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
.anfrage__karte .nowrap { white-space: nowrap; }
.anfrage__karte svg { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; color: var(--akzent-text); }
.anfrage__karte:hover { color: var(--akzent-text); text-decoration-color: currentColor; }
.anfrage__status { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px !important; color: rgba(243, 240, 234, .78); font-variant-numeric: tabular-nums; }
.anfrage__punkt { width: 8px; height: 8px; margin-top: .45em; flex: none; border-radius: var(--r-1); background: var(--muted); }
.anfrage__status.is-offen .anfrage__punkt { background: #4FBF7E; }

.anfrage__inhalt { min-width: 0; padding: var(--s-8) var(--rand); }
.anfrage__titel { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
.flow__zeile { display: grid; gap: var(--s-5); padding-top: var(--s-7); }
@media (min-width: 768px) {
  .anfrage__inhalt { padding: var(--s-9) var(--rand); }
}
/* Zeile „Anfrage | Flow“ nur, wo die Inhaltsspalte breit genug ist (1024–1279: rechte Spalte zu schmal → untereinander) */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) {
  .flow__zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .anfrage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .anfrage__links { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
  .anfrage__bild { flex: 1 1 auto; height: auto; min-height: 0; }
  .anfrage__kontakt { flex: none; padding: var(--s-5); }
  .anfrage__marke { top: var(--s-5); left: var(--s-5); }
  .anfrage__plakette { left: var(--s-5); bottom: var(--s-5); }
  .anfrage__inhalt { padding: var(--s-9) var(--s-8); max-width: 920px; }
}

.direkt__tel { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.direkt__tel svg { width: 24px; height: 24px; color: var(--akzent-text); }
.direkt__tel:hover { color: var(--akzent-text); }

/* ---------- §10 FAQ ---------- */
.faq__kopf { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-6); }
.faq__kopf p { margin: 0; }

/* ---------- §11 Abschluss: Szene im Himmel, Wiese läuft in den Footer aus ----------
   Foto 118 (3:2): Dach-Oberkante bei 43,5 % der Bildhöhe, Räder unten bei 92 %, Wiese ab ca. 86 %.
   --szene-h = Höhe der Bildbühne. Das Bild ist unten verankert (object-position y 100 %), daher liegt die
   sichtbare Himmelfläche über dem Dach bei min(0,435 · h, h − 0,377 · Breite). Um diese Fläche (minus Luft)
   schiebt sich die Bühne unter den Text, so stehen Überschrift und Buttons immer im Himmel, nie auf dem Bus. */
.abschluss {
  --himmel: #C3D5ED;          /* Mittelwert der oberen Bildkante */
  --szene-h: 125vw;
  --luft: var(--s-7);         /* Abstand Überschrift → Dachkante */
  position: relative; overflow: hidden;
  padding-top: var(--section-pad);
  background: linear-gradient(to bottom, #DCE6F3, var(--himmel) 85%);
  color: var(--text-dunkel); --line: rgba(22, 23, 26, .2); --akzent-text: var(--akzent-strong); --muted-text: #3B4350;
}
.abschluss__kopf { position: relative; z-index: 1; }
.abschluss__titel { margin: 0; }
.abschluss__panel { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-5); }
.abschluss__panel p { margin: 0; }
.abschluss__panel .lead { color: #2A303A; }
.abschluss .btn--secondary { color: var(--text-dunkel); border-color: rgba(22, 23, 26, .45); }
.abschluss .btn--secondary:hover { background: rgba(255, 255, 255, .35); }

.abschluss__szene {
  position: relative; height: var(--szene-h);
  margin-top: calc(var(--luft) - min(0.435 * var(--szene-h), var(--szene-h) - 37.7vw));
}
/* Maske am <img>, nicht an der <figure>: sonst bildet die Figure einen eigenen Stapelkontext und der Wiesen-Verlauf deckt die Bildunterschrift zu. */
.abschluss__szene .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; background: none; }
.abschluss__szene .media img {
  object-position: 44% 100%; transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%); mask-image: linear-gradient(to bottom, transparent, #000 28%);
}
/* Übergang Wiese → Footer: erst kaum Schatten unter den Rädern, dann satt in Graphit. */
.abschluss__szene::after {
  content: ""; position: absolute; inset: auto 0 0; height: 18%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 23, 26, 0), rgba(22, 23, 26, .35) 35%, rgba(22, 23, 26, .82) 70%, var(--graphit));
}
.abschluss__szene .caption--ecke { left: auto; right: var(--rand); bottom: var(--s-3); z-index: 2; border-radius: var(--r-1); white-space: nowrap; }
@media (max-width: 767px) { .abschluss__szene .caption--ecke { font-size: 10px; padding: 4px 8px; } }

@media (min-width: 768px) {
  .abschluss { --szene-h: min(66.667vw, 112vh); }
  .abschluss__szene::after { height: 16%; }
}
@media (min-width: 1024px) {
  .abschluss__kopf .grid { align-items: end; }
  .abschluss__panel { margin-top: 0; padding-left: var(--s-6); }
}
/* Ab 1280: Überschrift sitzt tiefer, knapp über dem Dach. Lead + Buttons hängen rechts in den freien Himmel
   neben Dach und Front (Bildbereich x > 66 %, über dem Horizont), damit die rechte Bildhälfte beim Runterscrollen nicht leer bleibt.
   Darunter (1024–1279) wäre die 4er-Spalte zu schmal, der Block liefe bis in die Wiese, daher dort weiter neben dem Titel. */
@media (min-width: 1280px) {
  .abschluss { --luft: var(--s-5); padding-top: calc(var(--section-pad) + var(--s-8)); }
  .abschluss__kopf .grid { position: relative; }
  .abschluss__panel {
    /* Unterkante an die Motorhaube gebunden: Front ab x 67 % beginnt bei ca. 68 % Bildhöhe, also (0,68 − 0,435) / 1,5 = 16,3 % der
       Breite unter der Dachkante (= Titelunterkante + --luft). Der Block wächst nach oben, egal wie lang Lead/Platzhalter werden. */
    position: absolute; right: 0; bottom: calc(var(--s-5) - var(--luft) - 16.3vw); margin: 0; padding: 0;
    /* Bezug = ganze Zeile 1 / -1: Firefox/Safari nehmen bei absolut positionierten Grid-Kindern die Grid-Fläche (sonst c-5)
       als Bezugsrahmen, dann wären 100 % nur 5 Spalten und der Block schrumpft auf ~200 px. */
    grid-column: 1 / -1 !important;
    width: calc((100% - 11 * var(--gutter)) / 3 + 3 * var(--gutter));   /* 4 von 12 Spalten */
  }
  .abschluss .btn-row .btn { flex-basis: 100%; }
}
/* Beim Einscrollen fährt die Kamera leicht zurück (nur wo Scroll-Timelines laufen; sonst statisch). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .abschluss__szene .media img { animation: abschluss-kamera linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes abschluss-kamera { from { transform: scale(1.12); } to { transform: none; } }
  }
}

/* ---------- Footer ----------
   Oben: Marke | Navigation | Kontakt | Rechtliches. Unten: „Nach oben“ | Anruf-Aufforderung mit Pille | Abschlusszeile.
   Mobil gestapelt, Tablet 8 Spalten, Desktop auf dem 12er-Raster (4 | 2 | 3 | 3). */
.site-footer { padding: var(--s-9) 0 calc(var(--s-6) + 76px); border-top: 1px solid var(--linie-dunkel); }
.site-footer--wiese { border-top: 0; padding-top: var(--s-7); }
.site-footer p { margin: 0; }
.footer {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7);
  grid-template-areas: "marke marke marke marke" "nav nav recht recht" "kontakt kontakt kontakt kontakt" "ruf ruf ruf ruf" "unten unten unten unten" "hoch hoch hoch hoch";
}
.footer__marke { grid-area: marke; }
.footer__nav { grid-area: nav; }
.footer__kontakt { grid-area: kontakt; display: flex; flex-direction: column; gap: var(--s-4); }
.footer__recht { grid-area: recht; }
.footer__hoch { grid-area: hoch; }
.footer__ruf { grid-area: ruf; }
.footer__unten { grid-area: unten; display: flex; flex-direction: column; gap: var(--s-4); }

.footer__logo { display: inline-block; }
.footer__logo img { height: 56px; width: auto; }
.footer__claim { margin-top: var(--s-3) !important; font-size: var(--fs-small); }

.footer__spalte li + li { margin-top: var(--s-4); }
.footer__nav a, .footer__recht a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.footer__nav a { font-weight: 500; }
.footer__recht a { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.footer__nav a:hover, .footer__recht a:hover { color: var(--akzent); }
.footer__kontakt { line-height: 1.6; }

/* Kontakt: Route als Textlink mit Extern-Pfeil (wie .anfrage__karte) */
.footer__karte { width: fit-content; margin-top: calc(var(--s-2) * -1); color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-size: var(--fs-small); }
.footer__karte svg { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }
.footer__karte:hover { color: var(--text-hell); }

/* Buttons: die normalen .btn-Varianten der Seite (Radius --r-2), nur Lage und Größe hier */
.footer__hoch { justify-self: start; align-self: end; }
.footer__hoch .pfeil-icon { transform: rotate(180deg); }
.footer__hoch:hover .pfeil-icon { transform: rotate(180deg) translateY(3px); }

.footer__ruf-titel { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; margin-bottom: var(--s-5) !important; }
.footer__tel { width: 100%; max-width: 420px; font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .footer__tel { min-height: 64px; } }

@media (min-width: 768px) {
  .site-footer { padding-bottom: var(--s-7); }
  .footer {
    row-gap: var(--s-8);
    grid-template-areas: "marke marke marke marke marke marke marke marke" "nav nav kontakt kontakt kontakt recht recht recht" "ruf ruf ruf ruf ruf unten unten unten" "hoch hoch hoch hoch hoch hoch hoch hoch";
  }
  .footer__unten { align-self: end; }
}
@media (min-width: 1024px) {
  .site-footer--wiese { padding-top: var(--s-6); }
  .footer {
    row-gap: var(--s-8);
    grid-template-areas: "marke marke marke marke nav nav kontakt kontakt kontakt recht recht recht" "hoch hoch hoch hoch ruf ruf ruf ruf ruf unten unten unten";
  }
  .footer__logo img { height: 92px; }
  .footer__ruf-titel { font-size: clamp(1.875rem, 1.2rem + 1.2vw, 2.5rem); }
}

/* ---------- Rechtliche Unterseiten ---------- */
.rechtlich { padding-block: var(--s-9); }
.rechtlich h1 { font-size: var(--fs-h2); line-height: 1.05; margin-bottom: var(--s-6); }
.rechtlich h2 { font-size: var(--fs-h3); margin: var(--s-7) 0 var(--s-3); }

/* ---------- §4 Was alle sieben gemeinsam haben: 3 Karten · Fokus-Block · 3 Karten (Referenz Coinflect), gleiche Abdunklung wie die Fahrzeug-Karten ---------- */
.vorteile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
.vorteil, .vorteil-fokus { --v-bg: #0E0F11; border-radius: 20px; border: 1px solid rgba(243, 240, 234, .08); background: var(--v-bg); overflow: hidden; }

.vorteil { order: 1; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 360px; padding: var(--s-5); }
.vorteil--unten { order: 3; }
.vorteil .media { position: absolute; inset: 0; z-index: -1; height: 100%; min-height: 0; border-radius: 0; background: none; -webkit-mask-image: linear-gradient(to bottom, #000 22%, transparent 76%); mask-image: linear-gradient(to bottom, #000 22%, transparent 76%); }
.vorteil .media img { transition: transform 700ms var(--ease); }
.vorteil:hover .media img { transform: scale(1.04); }
.vorteil__titel { font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.12; letter-spacing: -0.015em; }
.vorteil p { margin: 0; max-width: 40ch; font-size: 14px; line-height: 1.5; color: rgba(243, 240, 234, .66); }
/* ohne Foto (Zuheizer nicht als „Standheizung“ bebildern): warmes Licht statt Bild */
.vorteil--warm {
  background:
    radial-gradient(ellipse 85% 60% at 25% 12%, rgba(243, 171, 25, .34), transparent 65%),
    radial-gradient(ellipse 120% 80% at 110% -10%, rgba(243, 240, 234, .12), transparent 60%),
    var(--v-bg);
}

/* Fokus-Block: Kilometerstand wie ein Tacho, 000 als Schatten, 250 in CI-Gelb */
.vorteil-fokus {
  order: 2; display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5);
  background: radial-gradient(ellipse 55% 95% at 22% 55%, rgba(243, 240, 234, .07), transparent 70%), var(--v-bg);
}
.vorteil-fokus__zahlen { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: clamp(5.5rem, 2.5rem + 13vw, 15rem); line-height: .8; letter-spacing: -0.05em; }
.vorteil-fokus__geist { margin-bottom: -.2em; background: linear-gradient(to bottom, rgba(243, 240, 234, .02), rgba(243, 240, 234, .32) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vorteil-fokus__zahl { position: relative; color: var(--akzent); }
.vorteil-fokus__text { display: flex; flex-direction: column; gap: var(--s-3); }
.vorteil-fokus__titel { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.vorteil-fokus__beschreibung { margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); line-height: 1.35; color: rgba(243, 240, 234, .5); }
.vorteil-fokus__einheit { margin: var(--s-4) 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); color: var(--akzent); }

@media (min-width: 768px) {
  .vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vorteil-fokus { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); padding: var(--s-7); }
  .vorteil p { font-size: 13px; }
}
@media (min-width: 1024px) {
  .vorteil { min-height: 460px; padding: var(--s-6); }
  .vorteil p { font-size: 14px; }
  .vorteil-fokus { min-height: 460px; padding: var(--s-8); }
  .vorteil-fokus__zahlen { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .vorteil:hover .media img { transform: none; } }

/* ---------- §1c PROTOTYP „Sofort da“ (Referenz Lidia & Amato): Wortbild + echtes Fahrzeug als Aufkleber davor ---------- */
.sofort { padding: var(--s-8) 0 var(--s-9); text-align: center; overflow: hidden; }
.sofort__marke { margin: 0 0 var(--s-4); color: var(--muted-text); }
.sofort__buehne { --wort: clamp(4.5rem, 21.5vw, 19.5rem); position: relative; display: grid; justify-items: center; align-items: start; }
/* Wortbild füllt die Containerbreite; das Fahrzeug parkt davor und überdeckt die untere Hälfte der Buchstaben */
.sofort__wort {
  grid-area: 1 / 1; margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--wort); line-height: .8; letter-spacing: -0.045em; color: var(--papier);
  user-select: none;
}
.sofort__sticker {
  grid-area: 1 / 1; position: relative; z-index: 1; display: block; width: min(64%, 560px); margin-top: calc(var(--wort) * .36);
  transform: rotate(var(--dreh, -4deg)); transition: transform 380ms cubic-bezier(.3, 1.4, .5, 1); text-decoration: none;
}
.sofort__sticker img { width: 100%; height: auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sofort__sticker:hover, .sofort__sticker:focus-visible { transform: rotate(0deg) translateY(-8px) scale(1.03); }
.sofort__sticker:focus-visible { outline: none; }
.sofort__sticker:focus-visible img { filter: drop-shadow(0 0 0 2px var(--akzent)) drop-shadow(0 22px 22px rgba(0, 0, 0, .5)); }
/* Info-Etikett: erscheint beim Hover, auf Touch immer sichtbar */
.sofort__info {
  position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 6px) rotate(calc(-1 * var(--dreh, -4deg))); display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 999px; background: var(--akzent-fill); color: var(--akzent-on); font-size: 13px; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sofort__sticker:hover .sofort__info, .sofort__sticker:focus-visible .sofort__info { opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
@media (hover: none) { .sofort__info { opacity: 1; transform: translate(-50%, 0) rotate(calc(-1 * var(--dreh, -4deg))); } }

/* Headline im Mix wie die Referenz: Serif, Schlüsselwörter in Montserrat-Versalien */
.sofort__unterzeile { margin: var(--s-7) 0 var(--s-4); color: var(--muted-text); }
.sofort__titel {
  max-width: 21ch; margin: 0 auto; font-family: "Source Serif 4", Georgia, serif; font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance;
}
.sofort__titel b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .86em; letter-spacing: -0.02em; color: var(--akzent); }
.sofort__cta { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .sofort { padding: var(--s-9) 0 var(--s-10); }
  .sofort__titel { max-width: 30ch; }
  .sofort__sticker { width: min(42%, 580px); margin-top: calc(var(--wort) * .3); }
}
@media (prefers-reduced-motion: reduce) { .sofort__sticker:hover, .sofort__sticker:focus-visible { transform: rotate(0deg); } }

/* ---------- §7 Szene „Gebaut in Weida“ (Referenz FIT FLEET „Focus“): Fernaufnahme + Erkennungsrahmen + Beschreibung + Zitat ---------- */
/* Die Szene ist immer so groß wie das Foto (3:2) und deckt das Fenster ab wie object-fit: cover; Rahmen-Koordinaten = % des Fotos. */
.weida { --fx: .78; --fy: 1; position: relative; margin-bottom: var(--s-8); }
.weida__buehne { position: relative; border-radius: 20px; overflow: hidden; background: #0E0F11; color: var(--text-hell); }
.weida__fenster { position: relative; height: min(150vw, 680px); container-type: size; overflow: hidden; }
.weida__szene {
  position: absolute; width: max(100cqw, 150cqh); height: max(100cqh, 66.667cqw);
  left: calc((100cqw - max(100cqw, 150cqh)) * var(--fx)); top: calc((100cqh - max(100cqh, 66.667cqw)) * var(--fy));
}
.weida__szene .media { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; }
.weida__szene .media img { object-position: 50% 50%; }
/* feines Messraster wie im Sucher */
.weida__szene::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .13) 0 1px, transparent 1px 16.6667%),
              repeating-linear-gradient(to bottom, rgba(255, 255, 255, .13) 0 1px, transparent 1px 25%);
}
/* Abdunklung: unten (mobil in den dunklen Zitatbereich), Desktop zusätzlich diagonal nach links unten */
.weida__fenster::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, #0E0F11 0%, rgba(14, 15, 17, 0) 28%); }

/* Erkennungsrahmen um das Fahrzeug (Foto 34: x 58,5–81 %, y 61,5–82 %, Rahmen mit Luft) */
.weida__rahmen { position: absolute; z-index: 2; left: 56%; top: 57%; width: 27.5%; height: 28.5%; border: 3px solid var(--akzent); transform-origin: 50% 50%; }
.weida__ecke { position: absolute; width: 16px; height: 16px; border: 0 solid #fff; }
.weida__ecke--lo { left: 10px; top: 10px; border-left-width: 2px; border-top-width: 2px; }
.weida__ecke--ro { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
.weida__ecke--lu { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; }
.weida__ecke--ru { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
.weida__tab {
  position: absolute; left: -3px; bottom: calc(100% + 3px); display: block; padding: 7px 12px;
  background: var(--akzent-fill); color: var(--akzent-on); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.25; white-space: nowrap;
}
.weida__hinweis { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 5px 8px; border-radius: 6px; background: rgba(14, 15, 17, .6); color: rgba(243, 240, 234, .8); font-size: 10px; }

/* Zitat: mobil unter dem Foto im dunklen Bereich, Desktop unten links über der Abdunklung */
.weida__zitat { position: relative; z-index: 2; margin: 0; padding: var(--s-3) var(--s-5) var(--s-6); }
.weida__zitat blockquote { margin: 0 0 var(--s-3); font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: pretty; }
.weida__zitat figcaption { color: rgba(243, 240, 234, .65); }

/* Beschreibung: mobil unter der Szene, Desktop als Karte links neben dem Rahmen mit Verbindungslinie */
.weida__info { position: relative; margin-top: var(--s-5); padding: var(--s-5); border: 3px solid var(--akzent); background: #fff; color: var(--text-dunkel); }
.weida__info p { margin: 0; }
.weida__marke { margin-bottom: var(--s-3) !important; color: var(--akzent-strong); }

/* Einrasten beim Einscrollen (weida.js) */
.weida.is-bereit .weida__rahmen { opacity: 0; transform: scale(1.7); }
.weida.is-bereit .weida__tab { opacity: 0; transform: translateY(6px); }
.weida.is-erkannt .weida__rahmen { opacity: 1; transform: none; transition: transform 900ms cubic-bezier(.2, .8, .2, 1), opacity 300ms var(--ease); }
.weida.is-erkannt .weida__tab { opacity: 1; transform: none; transition: opacity 300ms var(--ease) 800ms, transform 300ms var(--ease) 800ms; }
.weida.is-erkannt .weida__ecke { animation: weida-fokus 1.1s var(--ease) 650ms 2; }
@keyframes weida-fokus { 50% { opacity: .2; } }

/* Volle Komposition (Beschreibung links neben dem Rahmen, Linie verbindet beide) erst ab 1280 px; darunter steht die Beschreibung unter dem Foto.
   Geometrie: Bühne 3:2, Rahmen links bei 56 %, oben 57 %, unten 85,5 %. Karte endet 28 px vor dem Rahmen, Unterkante bei 67 % → Linie trifft den Rahmen. */
@media (min-width: 1280px) {
  .weida { --fx: .5; }
  .weida__buehne { border-radius: 28px; }
  .weida__fenster { height: auto; aspect-ratio: 3 / 2; }
  .weida__fenster::after { background: linear-gradient(to top right, rgba(14, 15, 17, .92) 0%, rgba(14, 15, 17, .5) 30%, rgba(14, 15, 17, 0) 56%); }
  .weida__zitat { position: absolute; left: 0; bottom: 0; max-width: min(50%, 640px); margin: 0; padding: var(--s-6); }
  .weida__info {
    position: absolute; z-index: 3; right: calc(44% + 28px); bottom: 33%; width: min(340px, 30%); max-width: none; margin: 0;
    padding: var(--s-5); font-size: var(--fs-small); line-height: 1.5; box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  }
  /* Verbindungslinie Karte → Rahmen: vom Außenrand der Karte (+3 px Rahmen) genau 28 px bis zur Rahmenkante */
  .weida__info::after { content: ""; position: absolute; left: calc(100% + 3px); bottom: 28px; width: 28px; height: 3px; background: var(--akzent); }
  .weida.is-bereit .weida__info { opacity: 0; transform: scale(1.35); }
  .weida.is-erkannt .weida__info { opacity: 1; transform: none; transition: transform 900ms cubic-bezier(.2, .8, .2, 1) 550ms, opacity 300ms var(--ease) 550ms; }
}
@media (min-width: 768px) and (max-width: 1279px) { .weida__fenster { height: 560px; } .weida__zitat { padding-inline: var(--s-6); } }

/* §7 v2: Headline im Foto (oben leicht abgedunkelt), Ecken auch an der Beschreibung */
.weida__fenster::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14, 15, 17, .62) 0%, rgba(14, 15, 17, 0) 34%); }
.weida__titel {
  position: absolute; z-index: 2; left: var(--s-5); right: var(--s-5); top: var(--s-5); max-width: 18ch; margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--papier);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.weida__info .weida__marke { margin-bottom: var(--s-3) !important; }
.weida__info p { position: relative; }
@media (min-width: 1280px) {
  .weida__titel { left: var(--s-7); top: var(--s-7); max-width: 17ch; }
}

/* ---------- §7 Werkstatt: Video (Rundung + Play wie die Szene) + nummerierte Belege + Kundenstimme ---------- */
.werkstatt { row-gap: var(--s-6); align-items: center; }
.werkstatt__video .video-wrap { position: relative; }
.werkstatt__video .video-facade { border-radius: 20px; }
.werkstatt__video .video-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 15, 17, .8) 0%, rgba(14, 15, 17, 0) 45%), rgba(14, 15, 17, .12); }
.werkstatt__video .video-facade__play { inset: 0; left: 0; bottom: 0; z-index: 2; display: block; }
.werkstatt__video .video-facade__play span:first-child {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--akzent) 25%, transparent);
}
.werkstatt__video .video-facade:hover .video-facade__play span:first-child { transform: scale(1.08); }
.werkstatt__video .video-facade__play .label { position: absolute; left: 36px; bottom: 34px; padding: 0; background: none; color: var(--papier); font-size: 12px; }
.werkstatt__video video.video-facade { border-radius: 20px; }

.werkstatt__liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; font-size: var(--fs-small); line-height: 1.5; }
.werkstatt__liste li + li { border-top: 1px solid var(--line); }
.werkstatt__liste p { margin: 0; }
.werkstatt__liste strong { font-weight: 600; }
.werkstatt__nr { padding-top: 3px; color: var(--akzent-text); }

.werkstatt__zitat { position: relative; max-width: 980px; margin: var(--s-9) 0 0; padding-top: var(--s-5); }
.werkstatt__zitat::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 3px; background: var(--akzent); }
.werkstatt__zitat blockquote { margin: 0 0 var(--s-4); font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.01em; text-wrap: pretty; }
.werkstatt__zitat figcaption { color: var(--muted-text); }
@media (min-width: 768px) { .werkstatt__video .video-facade, .werkstatt__video video.video-facade { border-radius: 28px; } }
@media (min-width: 1024px) {
  .werkstatt { margin-top: var(--s-9); }
  .werkstatt__liste { padding-left: var(--s-4); }
  .werkstatt__zitat { margin-left: calc((100% + var(--gutter)) * 2 / 12); }
}
@media (max-width: 767px) { .werkstatt__video .video-facade__play span:first-child { width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--akzent) 25%, transparent); } .werkstatt__video .video-facade__play .label { left: 28px; bottom: 26px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .weida__info { bottom: 35%; } .weida__zitat blockquote { font-size: 1.5rem; } }

/* §7 Rundungen wie im restlichen Auftritt: Rahmen + Beschreibung 20 px (Fahrzeugkarten), Etikett 8 px (CWT-Badges) */
.weida__rahmen, .weida__info { border-radius: 20px; }
.weida__tab { left: 0; bottom: calc(100% + 8px); border-radius: 8px; }
.weida__ecke--lo { border-top-left-radius: 6px; }
.weida__ecke--ro { border-top-right-radius: 6px; }
.weida__ecke--lu { border-bottom-left-radius: 6px; }
.weida__ecke--ru { border-bottom-right-radius: 6px; }
.weida__info::after { border-radius: 2px; }