/* Performance Rentals, Design D (aus dem Entwurf stil.css, für die Website ergänzt)
   Schwarz und Weiß im Wechsel, eine Schrift (Inter), Marken-Rot nur als Akzent.
   Raster: alle Abstände in 8er-Schritten. Rundung: Bedienelemente 8 px, Bediengruppen 16 px (innen 8 px plus Abstand),
   Fotos und Inhaltsflächen scharfkantig. */

/* Schrift: Inter als variable Datei, direkt hier statt in einer zweiten CSS-Datei */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/Inter-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/Inter-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root, .hell { --bg: #fff; --text: #000; --text-2: #595959; --linie: #d4d4d4; --flaeche: #f2f2f2; }
.dunkel, .auto { --bg: #000; --text: #fff; --text-2: #b8b8b8; --linie: #363636; --flaeche: #1a1a1a; }
:root {
  --rot: #c8102e; --rot-dunkel: #a30d25; --feld: #8a8a8a;
  --r: 8px; --r-gross: 16px; --rand: 16px;
  --weich: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) { :root { --rand: 24px; } }
@media (min-width: 1100px) { :root { --rand: 32px; } }
.hell, .dunkel, .auto { background: var(--bg); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0; padding-bottom: 65px;
  background: #fff; color: var(--text);
  font: 400 16px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2 { font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: 30px; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.einleitung, .auto__daten, .flotte-rat p, .zeitleiste p, .maske__hinweis, .kauf__hilfe, .schluss p, .fakten dd { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 8px; top: -64px; z-index: 30; padding: 12px 16px; background: #fff; color: #000; border: 1px solid #000; border-radius: var(--r); }
.sprung:focus { top: 8px; }
.wrap { max-width: 1264px; margin: 0 auto; padding: 0 var(--rand); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Knöpfe: Rot ist der Hauptknopf mit Pfeil, alles andere ist umrandet und kehrt sich beim Überfahren um */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 24px;
  border: 1.5px solid var(--rot); border-radius: var(--r);
  background: var(--rot); color: #fff;
  font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf:active { transform: scale(.98); background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf:not(.knopf--zweit):not(.knopf--klein)::after {
  content: ""; flex: none; width: 18px; height: 12px; margin-left: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .22s var(--weich);
}
.knopf:hover::after, .knopf:focus-visible::after { transform: translateX(5px); }
.knopf--zweit { background: transparent; border-color: var(--text); color: var(--text); font-weight: 600; }
.knopf--zweit:hover, .knopf--zweit:active { background: var(--text); border-color: var(--text); color: var(--bg); }
.knopf--klein { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* Kopf */
.kopf { z-index: 20; transition: box-shadow .2s ease; }
.kopf--scroll { box-shadow: 0 1px 0 var(--linie); }
.kopf__in { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 56px; }
.marke { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.marke img { flex: none; width: 32px; height: 32px; }
.marke span { overflow: hidden; text-overflow: ellipsis; }
.kopf .knopf { display: none; }
.menue-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: var(--r); background: none; color: #fff; cursor: pointer; }
.nav { display: none; order: 5; flex: 0 0 100%; padding: 0 0 16px; border-top: 1px solid var(--linie); }
.nav.offen { display: block; }
.nav a { display: flex; align-items: center; min-height: 48px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linie); }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 1180px) {
  html { scroll-padding-top: 88px; }
  body { padding-bottom: 0; }
  .kopf { position: sticky; top: 0; }
  .kopf__in { flex-wrap: nowrap; column-gap: 24px; min-height: 72px; }
  .marke { flex: 0 0 auto; margin-right: 8px; font-size: 16px; }
  .kopf .knopf { display: inline-flex; }
  .menue-knopf { display: none; }
  .nav { display: block; order: 0; flex: 1 1 auto; padding: 0; border: 0; }
  .nav ul { display: flex; gap: 24px; }
  .nav a { min-height: 44px; border: 0; font-size: 15px; font-weight: 500; text-underline-offset: 8px; }
  .nav .nur-handy { display: none; }
}

/* Feste Buchen-Leiste am Handy */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
}
.leiste p { font-size: 13px; line-height: 1.3; color: var(--text-2); }
.leiste b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.leiste .knopf { min-height: 48px; padding: 0 16px; font-size: 15px; }
.leiste .knopf::after { display: none; }
.leiste__wa { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; border: 1.5px solid var(--text); border-radius: var(--r); }
.leiste__wa .ic, .wa-fest .ic { width: 22px; height: 22px; }
.wa-fest { display: none; }
@media (min-width: 1180px) {
  .leiste { display: none; }
  .wa-fest { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1.5px solid #fff; border-radius: var(--r); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
  .wa-fest:hover { background: #fff; color: #000; }
}

/* Einstieg: große Zeile, Buchungsmaske als Bedienelement, Foto randlos */
.start { padding-top: 16px; }
.start h1, .gs-start h1 { font-size: clamp(34px, 9.7vw, 44px); line-height: 1.02; letter-spacing: -0.04em; }
.start__text { margin-top: 12px; max-width: 60ch; font-size: 16px; color: var(--text-2); text-wrap: pretty; }
.maske { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px 0; margin-top: 16px; padding: 12px; border-radius: var(--r-gross); }
.maske > .feld--auto, .maske > .knopf, .maske__hinweis { grid-column: 1 / -1; }
.maske > .knopf { min-height: 56px; font-size: 17px; }
.maske__hinweis { padding: 4px 4px 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.maske__hinweis a { color: var(--text); font-weight: 600; }
.feld { position: relative; display: block; }
.feld:hover { z-index: 1; }
.feld:focus-within { z-index: 2; }
.feld > span { position: absolute; z-index: 1; left: 14px; top: 9px; font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--text-2); pointer-events: none; transition: color .15s ease; }
.feld:focus-within > span { color: #000; }
.feld select, .feld input {
  display: block; width: 100%; min-width: 0; height: 56px; padding: 25px 13px 7px;
  border: 1px solid var(--feld); border-radius: var(--r);
  background-color: #fff; color: #000;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: left;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input::-webkit-date-and-time-value { text-align: left; }
.feld select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.feld select:required:invalid { color: #595959; }
.feld select:hover, .feld input:hover { border-color: #000; }
.feld select:focus, .feld input:focus { outline: 0; border-color: #000; box-shadow: inset 0 0 0 2px #000; }
.feld select:user-invalid, .feld input:user-invalid { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
/* Datum und Uhrzeit hängen als ein Feldpaar zusammen */
.maske .feld:nth-of-type(2n) input { border-radius: var(--r) 0 0 var(--r); }
.maske .feld:nth-of-type(2n+3) { margin-left: -1px; }
.maske .feld:nth-of-type(2n+3) input { border-radius: 0 var(--r) var(--r) 0; }
/* Am Handy liegt die Maske tief über dem Himmel des Fotos, damit das Auto früher ins Bild kommt */
.start__bild { margin-top: -112px; overflow: hidden; }
.start__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fakten { border-bottom: 1px solid var(--linie); }
.fakten dl { display: grid; font-size: 15px; line-height: 1.35; }
.fakten dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; padding: 12px 0; }
.fakten dl > div + div { border-top: 1px solid var(--linie); }
.fakten dt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.fakten dt::before, .inkl__ja li::before { content: ""; flex: none; width: 14px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.500l4 4L13 1.500' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center; }
.fakten dd { color: var(--text-2); }
@media (min-width: 700px) {
  .maske { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, .7fr); padding: 16px; }
  .maske .feld:nth-of-type(4) { margin-left: 8px; }
  .maske { margin-top: 24px; }
  .maske > .knopf, .kauf__eigen .knopf { min-height: 60px; }
  .feld select, .feld input { height: 60px; padding: 28px 13px 8px; }
  .feld > span { top: 10px; }
  .start__bild { margin-top: -64px; }
  .start__bild img { aspect-ratio: 16 / 9; }
  .fakten dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .fakten dl > div { display: block; padding: 24px 0; }
  .fakten dl > div + div { border-top: 0; }
  .fakten dt { font-size: 18px; letter-spacing: -0.01em; }
}
@media (min-width: 1000px) {
  .start { padding-top: 48px; }
  .start h1, .gs-start h1 { font-size: clamp(60px, 6.2vw, 96px); line-height: .98; }
  .start__text { margin-top: 20px; font-size: 20px; line-height: 1.45; }
  .start__bild { margin-top: -64px; }
  .start__bild img { aspect-ratio: auto; height: clamp(440px, 70vh, 780px); object-position: 50% 64%; }
}
@media (min-width: 1100px) {
  .maske { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, .7fr) auto; margin-top: 40px; }
  .maske > .feld--auto, .maske > .knopf { grid-column: auto; }
  .maske .feld:nth-of-type(2n) { margin-left: 8px; }
  .maske > .knopf { margin-left: 16px; padding: 0 28px; }
}

/* Abschnitte */
.abschnitt { padding: 48px 0; }
.abschnitt--linie { border-top: 1px solid var(--linie); }
.abschnitt > .wrap > h2, .spalte > h2 { margin-bottom: 12px; }
.einleitung { max-width: 60ch; margin-bottom: 24px; font-size: 17px; color: var(--text-2); }
.mehr { margin-top: 16px; }
.mehr a:not(.knopf), .ort__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.text { max-width: 68ch; }
.text p + p, .text p + ul, .text ul + p { margin-top: 16px; }
.text h3 { margin: 32px 0 8px; }
.raster { display: grid; gap: 48px; }
.liste li { position: relative; padding: 4px 0 4px 20px; }
.liste li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 2px; background: var(--text); }
@media (min-width: 1000px) {
  .abschnitt { padding: 104px 0; }
  h2 { font-size: 48px; }
  h3 { font-size: 21px; }
  .abschnitt > .wrap > h2, .spalte > h2 { margin-bottom: 16px; }
  .einleitung { margin-bottom: 48px; font-size: 19px; }
  .raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
  .raster--breit { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 80px; }
}

/* Flotte: am Handy ein Wisch-Karussell, breit eine Bühne mit Reitern (Reiter und Punkte baut seite.js).
   Ohne JavaScript: Karussell am Handy, Raster am Desktop. */
.flotte {
  position: relative; display: flex; gap: 12px;
  margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--rand);
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.flotte::-webkit-scrollbar { display: none; }
.auto { display: flex; flex: 0 0 calc(100% - 28px); flex-direction: column; max-width: 360px; overflow: hidden; scroll-snap-align: start; }
.auto > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.auto { position: relative; }
/* Eine Marke je Foto, oben links: „Online buchbar" weiß mit grünem Punkt, „Auf Anfrage" schwarz ohne Punkt */
.auto__status { position: absolute; left: 12px; top: 12px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: #fff; color: #000; font-size: 13px; font-weight: 600; line-height: 1.2; }
.auto__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #188a42; }
.auto__status--anfrage { background: #000; color: #fff; }
.auto__status--anfrage::before { display: none; }
@media (min-width: 900px) { .auto__status { left: 16px; top: 16px; } }
.auto__frage { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: -8px 0; font-size: 15px; font-weight: 600; }
.auto__text { display: flex; flex: 1; flex-direction: column; padding: 20px 16px 16px; }
.auto h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.auto h3 a { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; text-decoration: none; }
.auto h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.auto__daten { margin-top: 4px; font-size: 15px; color: var(--text-2); }
.werte { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px; margin-top: 24px; }
.werte li { display: grid; gap: 4px; }
.werte b { display: flex; align-items: baseline; gap: 4px; font-weight: 800; white-space: nowrap; }
.zahl { font-size: 32px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.werte small { font-size: 13px; font-weight: 600; }
.werte li > span { font-size: 13px; line-height: 1.3; color: var(--text-2); }
.balken { height: 3px; margin-top: 16px; background: var(--linie); }
.balken i { display: block; height: 100%; background: var(--text); transform-origin: left center; }
.auto__kauf { display: grid; gap: 16px; margin-top: auto; padding-top: 24px; }
.auto__preis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.auto__preis b { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.auto__preis span { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.auto__preis strong { font-weight: 600; color: var(--text); }
.reiter { display: none; }
.punkte { display: flex; justify-content: center; margin-top: 8px; }
.punkte button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.punkte button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #767676; transition: width .25s var(--weich), background-color .2s ease; }
.punkte button[aria-current]::before { width: 28px; background: var(--text); }
.flotte-rat { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linie); }
.flotte-rat h3 { margin-bottom: 8px; }
.flotte-rat p { max-width: 62ch; color: var(--text-2); }
.flotte-rat ul { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 8px; }
.flotte-rat li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 900px) {
  .flotte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; }
  .auto { max-width: none; }
  .punkte { display: none; }
  .flotte-rat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 0 48px; margin-top: 48px; padding-top: 32px; }
  .flotte-rat h3 { grid-column: 1 / -1; }
  .flotte-rat ul { justify-content: flex-end; margin: 0 0 -10px; }

  .reiter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; }
  .reiter__knopf {
    min-height: 64px; padding: 0 20px;
    border: 0; border-top: 3px solid transparent; border-radius: 0;
    background: var(--flaeche); color: var(--text-2);
    font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: left;
    cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  .reiter__knopf:hover { background: #e4e4e4; color: var(--text); }
  .reiter__knopf[aria-selected="true"] { background: #000; border-top-color: var(--rot); color: #fff; }
  .reiter__knopf:focus-visible { outline-offset: -6px; }
  .reiter__knopf[aria-selected="true"]:focus-visible { outline-color: #fff; }
  .flotte--buehne { display: block; }
  .flotte--buehne .auto { display: none; }
  .flotte--buehne .auto.aktiv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); aspect-ratio: 16 / 7; }
  .flotte--buehne .auto > img { align-self: stretch; height: auto; min-height: 100%; aspect-ratio: 4 / 3; }
  .flotte--buehne .auto__text { padding: clamp(32px, 3.6vw, 48px); }
  .flotte--buehne .auto h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.04em; }
  .flotte--buehne .auto__daten { margin-top: 12px; font-size: 18px; }
  .flotte--buehne .werte { margin-top: 40px; gap: 24px; }
  .flotte--buehne .zahl { font-size: clamp(36px, 3.7vw, 52px); }
  .flotte--buehne .werte small { font-size: 15px; }
  .flotte--buehne .balken { margin-top: 24px; }
  .flotte--buehne .auto__kauf { gap: 24px; padding-top: 40px; }
  .flotte--buehne .auto__preis b { font-size: clamp(40px, 4.2vw, 56px); }
  .flotte--buehne .auto__preis span { font-size: 15px; }
  .flotte--buehne .auto .knopf { min-height: 60px; font-size: 17px; }
}

/* Video-Block */
.film-block { display: grid; gap: 12px; max-width: 380px; margin: 0 auto; }
.film-block h2 { margin-bottom: 12px; }
.film-block h3 { margin-top: 12px; }
.film-block p { margin: -8px 0 4px; color: var(--text-2); }
/* Hochkant-Videokarte: hier ausnahmsweise 24 px Rundung, wie am Handy gewohnt */
.reel { position: relative; aspect-ratio: 9 / 16; margin-bottom: 12px; overflow: hidden; background: #000; border: 1px solid var(--linie); border-radius: 24px; }
.film { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__play { position: absolute; inset: 0; width: 80px; height: 80px; margin: auto; padding: 0 0 0 4px; border: 0; border-radius: 50%; background: #fff; color: #000; cursor: pointer; transition: transform .2s var(--weich), background-color .18s ease, color .18s ease; }
.reel__play[hidden] { display: none; }
.reel__play svg { display: block; margin: auto; }
.reel__play:active { transform: scale(.94); }
.reel__profil { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: #000; border-radius: var(--r); pointer-events: none; }
.js .reel:not(.laeuft) .reel__profil { top: auto; bottom: 16px; }
.reel__profil img { width: 32px; height: 32px; border-radius: 50%; }
.film-block .reel__profil p { margin: 0; font-size: 12px; line-height: 1.3; color: #fff; }
.reel__profil b { display: block; font-size: 13px; }
.reel__netz { position: absolute; right: 12px; bottom: 88px; display: grid; gap: 8px; }
.reel__netz a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #fff; border-radius: 50%; background: #000; color: #fff; transition: background-color .18s ease, color .18s ease; }
.reel__netz .ic { width: 22px; height: 22px; }
@media (hover: hover) {
  .reel:hover .reel__play { transform: scale(1.08); }
  .reel__netz a:hover { background: #fff; color: #000; }
}
@media (min-width: 900px) {
  .film-block { grid-template-columns: 340px minmax(0, 460px); grid-template-rows: 1fr repeat(6, auto) 1fr; justify-content: center; gap: 12px 96px; max-width: none; }
  .film-block > * { grid-column: 2; }
  .film-block .reel { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .film-block h2 { grid-row: 2; margin-bottom: 20px; }
  .film-block h3 { grid-row: 3; }
  .film-block > p { grid-row: 4; margin: -8px 0 12px; }
  .film-block > a:nth-of-type(1) { grid-row: 5; }
  .film-block > a:nth-of-type(2) { grid-row: 6; }
  .film-block > a:nth-of-type(3) { grid-row: 7; }
}

/* Preise. Ohne JavaScript: alle Werte je Auto als Karten (Handy: seitlich wischen).
   Mit JavaScript (.tarife--wahl): Umschalter, darunter je Auto eine Zeile mit dem gewählten Preis. */
.tarife { display: flex; gap: 12px; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--rand); -webkit-overflow-scrolling: touch; }
.tarif { flex: 0 0 78%; max-width: 300px; padding: 8px 16px 16px; border: 1px solid var(--linie); scroll-snap-align: start; }
.tarif h3 a { display: flex; align-items: center; min-height: 48px; text-decoration: none; }
.tarif h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tarif dl > div { padding: 8px 0 12px; border-top: 1px solid var(--linie); }
.tarif dt { font-size: 13px; color: var(--text-2); }
.tarif dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.tarif dd b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tarif dd small { font-size: 13px; color: var(--text-2); }
.tarif .anfrage b { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.strich { flex: 0 0 100%; height: 3px; margin-top: 8px; background: var(--linie); }
.strich i { display: block; height: 100%; background: var(--text); }
.strich--leer { background: none; border-top: 1px dashed var(--text-2); }
.tarif__kaution { padding-top: 12px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--text-2); }
.inkl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; margin-top: 32px; }
.inkl h3 { margin-bottom: 8px; font-size: 17px; }
.inkl li { position: relative; padding: 4px 0 4px 24px; line-height: 1.4; }
.inkl li::before { content: ""; position: absolute; left: 0; top: 10px; }
.inkl__ja li::before { filter: invert(1); }
.inkl__plus li::before { width: 12px; height: 2px; top: 14px; background: var(--text); box-shadow: none; }
.inkl__plus li::after { content: ""; position: absolute; left: 5px; top: 9px; width: 2px; height: 12px; background: var(--text); }
.inkl > p { grid-column: 1 / -1; max-width: 68ch; color: var(--text-2); }
@media (min-width: 900px) { .inkl { grid-template-columns: minmax(0, 320px) minmax(0, 320px); gap: 24px 96px; margin-top: 48px; } .inkl h3 { font-size: 19px; } }
@media (min-width: 1000px) {
  .tarife { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .tarif { max-width: none; }
}
.schalter { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; margin-bottom: 16px; padding: 4px; border: 1.5px solid var(--text); border-radius: 10px; }
.schalter::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 3); border-radius: 6px; background: var(--text); transition: transform .3s var(--weich); }
.schalter[data-zeit="1"]::before { transform: translateX(100%); }
.schalter[data-zeit="2"]::before { transform: translateX(200%); }
.schalter button { position: relative; min-height: 44px; padding: 0 4px; font-size: 15px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: color .2s ease; }
.schalter button[aria-pressed="true"] { color: var(--bg); }
.schalter button:focus-visible { outline-offset: 5px; }
.tarife--wahl { display: block; margin: 0; padding: 0; overflow: visible; border-top: 2px solid var(--text); }
.tarife--wahl .tarif { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; max-width: none; min-height: 96px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--linie); }
.tarife--wahl .tarif h3 { grid-column: 1; align-self: end; }
.tarife--wahl .tarif h3 a { min-height: 44px; margin: -8px 0; }
.tarife--wahl .tarif__kaution { grid-column: 1; grid-row: 2; align-self: start; padding: 0; border: 0; }
.tarife--wahl .tarif dl { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.tarife--wahl .tarif dl > div { display: none; padding: 0; border: 0; }
.tarife--wahl[data-zeit="0"] dl > div:nth-child(1),
.tarife--wahl[data-zeit="1"] dl > div:nth-child(2),
.tarife--wahl[data-zeit="2"] dl > div:nth-child(3) { display: block; }
.tarife--wahl .tarif dd { display: block; }
.tarife--wahl .tarif dt, .tarife--wahl .tarif dd small { display: block; font-size: 12px; line-height: 1.4; }
.tarife--wahl .tarif dd b { display: block; font-size: 28px; line-height: 1.15; letter-spacing: -0.04em; }
.tarife--wahl .tarif .anfrage b { padding: 6px 0; font-size: 19px; letter-spacing: -0.01em; }
.tarife--wahl .strich { display: none; }
@media (min-width: 900px) {
  .schalter { margin-bottom: 32px; }
  .tarife--wahl .tarif { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 520px; gap: 0 32px; padding: 20px 0; transition: background-color .18s ease; }
  .tarife--wahl .tarif { align-items: baseline; }
  .schalter button { font-size: 16px; }
  .tarife--wahl .tarif h3 { align-self: baseline; font-size: 24px; letter-spacing: -0.02em; }
  .tarife--wahl .tarif__kaution { grid-column: 2; grid-row: 1; align-self: baseline; font-size: 16px; }
  .tarife--wahl .tarif dl { grid-column: 3; grid-row: 1; }
  .tarife--wahl .tarif dl > div { align-items: baseline; justify-content: space-between; gap: 24px; }
  .tarife--wahl[data-zeit="0"] dl > div:nth-child(1),
  .tarife--wahl[data-zeit="1"] dl > div:nth-child(2),
  .tarife--wahl[data-zeit="2"] dl > div:nth-child(3) { display: flex; }
  .tarife--wahl .tarif dt { font-size: 16px; text-align: left; }
  .tarife--wahl .tarif dd { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 24px; }
  .tarife--wahl .tarif dd b { min-width: 208px; font-size: 44px; line-height: 1; }
  .tarife--wahl .tarif dd small { font-size: 16px; white-space: nowrap; }
  .tarife--wahl .tarif .anfrage b { padding: 0; font-size: 22px; line-height: 44px; }
}

/* Ablauf: Zeitleiste. Graue Spur, darüber die gezeichnete Linie (Fortschritt --s je Station aus seite.js). */
.zeitleiste { counter-reset: station; margin: 24px 0 48px; }
.zeitleiste li { --s: 1; counter-increment: station; position: relative; padding: 0 0 24px 48px; }
.zeitleiste li::before { content: counter(station); position: absolute; z-index: 1; left: 0; top: 0; width: 32px; height: 32px; border: 1.5px solid var(--text); border-radius: 50%; background: var(--text); color: var(--bg); font-size: 15px; font-weight: 700; line-height: 29px; text-align: center; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.zeitleiste li::after, .zeitleiste h3::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--linie); }
.zeitleiste h3::before { background: var(--text); transform: scaleY(var(--s)); transform-origin: top center; }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li:last-child::after, .zeitleiste li:last-child h3::before { display: none; }
.zeitleiste h3 { padding-top: 3px; margin-bottom: 4px; }
.zeitleiste p { max-width: 52ch; color: var(--text-2); }
.zeitleiste--zeichnet li:not(.an)::before { border-color: var(--linie); background: var(--bg); color: var(--text-2); }
@media (min-width: 860px) {
  .zeitleiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 56px 0 104px; }
  .zeitleiste li { padding: 56px 32px 0 0; }
  .zeitleiste li::after, .zeitleiste h3::before { left: 32px; right: 0; top: 15px; bottom: auto; width: auto; height: 2px; }
  .zeitleiste h3::before { transform: scaleX(var(--s)); transform-origin: left center; }
}

/* Abholung und Anfahrtsskizze */
.ort address { margin: 8px 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.ort__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.ort h3 { margin: 24px 0 8px; }
.karte { max-width: 520px; }
.karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.karte__linien line { stroke: #6e6e6e; stroke-width: 1.5; transition: stroke .15s ease, stroke-width .15s ease; }
.karte__flaeche { fill: transparent; }
.karte__punkt { fill: var(--text); transform-box: fill-box; transform-origin: center; transition: transform .2s var(--weich), fill .15s ease; }
.karte__weiden { fill: var(--rot); stroke: var(--bg); stroke-width: 3; }
.karte__ort { font-size: 16px; font-weight: 700; fill: var(--text); }
.karte__zeit { font-size: 14px; fill: var(--text-2); }
.karte a { transition: opacity .2s ease; }
.karte a:hover .karte__ort, .karte a:focus-visible .karte__ort { text-decoration: underline; }
.karte a:hover .karte__punkt, .karte a:focus-visible .karte__punkt { fill: var(--rot); transform: scale(1.7); }
.karte svg:has(a:hover) a:not(:hover) { opacity: .4; }
.karte svg:has(a:nth-of-type(1):is(:hover, :focus-visible)) .karte__linien line:nth-child(1),
.karte svg:has(a:nth-of-type(2):is(:hover, :focus-visible)) .karte__linien line:nth-child(2),
.karte svg:has(a:nth-of-type(3):is(:hover, :focus-visible)) .karte__linien line:nth-child(3),
.karte svg:has(a:nth-of-type(4):is(:hover, :focus-visible)) .karte__linien line:nth-child(4),
.karte svg:has(a:nth-of-type(5):is(:hover, :focus-visible)) .karte__linien line:nth-child(5),
.karte svg:has(a:nth-of-type(6):is(:hover, :focus-visible)) .karte__linien line:nth-child(6),
.karte svg:has(a:nth-of-type(7):is(:hover, :focus-visible)) .karte__linien line:nth-child(7),
.karte svg:has(a:nth-of-type(8):is(:hover, :focus-visible)) .karte__linien line:nth-child(8) { stroke: var(--text); stroke-width: 3; }
.karte figcaption { margin-top: 16px; font-size: 14px; color: var(--text-2); }
.karte figcaption a { display: flex; align-items: center; width: fit-content; min-height: 44px; font-weight: 600; color: var(--text); }
@media (min-width: 1000px) { .anfahrt { align-items: center; } }

/* Aufklapp-Fragen, Kästen, Bewertung */
.fragen { max-width: 860px; margin-top: 24px; border-top: 2px solid var(--text); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 17px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: -4px 8px 0; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); transition: transform .3s var(--weich); }
.fragen details[open]:not(.zu) summary::after { transform: translateY(4px) rotate(-135deg); }
.fragen summary:focus-visible { outline-offset: -3px; }
.fragen summary h3 { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; }
.fragen details p { max-width: 68ch; padding-bottom: 20px; }
.dunkel .fragen details p { color: var(--text-2); }
@media (hover: hover) { .fragen summary:hover::after { transform: translateY(3px) rotate(45deg); } .fragen details[open]:not(.zu) summary:hover::after { transform: translateY(1px) rotate(-135deg); } }
.kasten { align-self: start; padding: 24px; border: 1.5px solid var(--text); }
.kasten h2 { margin-bottom: 12px; font-size: 26px; letter-spacing: -0.03em; }
.kasten .liste { margin-top: 8px; }
.kasten .mehr { margin-top: 16px; }
.kasten .mehr .knopf { width: 100%; }
.wertung h2 { margin-bottom: 8px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.wertung__zahl { display: block; margin-bottom: 4px; font-size: 88px; font-weight: 800; line-height: .9; letter-spacing: -0.05em; }
.sterne { display: block; margin-bottom: 16px; fill: var(--text); }
.wertung .mehr a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1000px) {
  .fragen { margin-top: 32px; }
  .fragen summary { min-height: 72px; padding: 16px 0; font-size: 19px; }
  .kasten { padding: 32px; }
  .kasten h2 { font-size: 30px; }
  .wertung h2 { font-size: 21px; }
}

/* Abschluss und Fuß */
.schluss { padding: 48px 0; border-bottom: 1px solid var(--linie); }
.schluss h2 { margin-bottom: 12px; }
.schluss p { max-width: 56ch; font-size: 17px; color: var(--text-2); }
.schluss__knoepfe { display: grid; gap: 8px; margin: 24px 0 0; }
@media (min-width: 560px) { .schluss__knoepfe { display: flex; flex-wrap: wrap; gap: 16px; } }
@media (min-width: 1000px) { .schluss { padding: 104px 0; } .schluss h2 { font-size: 64px; } .schluss p { font-size: 19px; } .schluss__knoepfe { margin-top: 32px; } }
.fuss { padding: 48px 0 24px; font-size: 15px; }
.fuss__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.fuss__firma { grid-column: 1 / -1; max-width: 46ch; color: var(--text-2); }
.fuss__firma p + p { margin-top: 8px; }
.fuss__name, .fuss__titel { margin-bottom: 8px; font-weight: 700; color: var(--text); }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__netz { display: flex; gap: 24px; }
.fuss__netz a, .fuss__unten a { text-decoration: underline; }
.fuss__unten { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: 14px; }
@media (min-width: 900px) {
  .fuss { padding-top: 64px; }
  .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .fuss__firma { grid-column: auto; }
  .fuss a { min-height: 36px; }
}

/* Gutscheinseite */
.pfad { padding: 8px 0; font-size: 14px; color: var(--text-2); }
.pfad a { display: inline-flex; align-items: center; min-height: 44px; }
.gs-start { padding: 0 0 40px; }
.gs-start__text { margin-top: 12px; max-width: 46ch; font-size: 16px; color: var(--text-2); }
.gs-start__raster { display: grid; gap: 24px; }
.gs-start__bild { margin: 0 calc(var(--rand) * -1) -40px; }
.gs-start__bild img { width: 100%; }
.kauf { margin-top: 24px; padding: 16px; border-radius: var(--r-gross); }
.kauf h2 { margin-bottom: 4px; font-size: 22px; letter-spacing: -0.025em; }
.kauf__hilfe { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.kauf__form { display: grid; gap: 8px; margin-top: 16px; }
.kauf__betraege { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Betragswahl: vier gleiche Flächen, der gewählte Betrag ist als ganze Fläche schwarz */
.betrag { position: relative; display: block; cursor: pointer; }
.betrag input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.betrag span { display: flex; align-items: center; justify-content: center; height: 64px; border: 1px solid var(--feld); border-radius: var(--r); background: #fff; color: #000; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.betrag:hover span { border-color: #000; }
.betrag:active span { transform: scale(.98); }
.betrag input:checked + span { background: #000; border-color: #000; color: #fff; }
.betrag input:focus-visible + span { outline: 3px solid #000; outline-offset: 3px; }
.feld--euro > span { left: 16px; top: 11px; }
.feld--euro input { height: 64px; padding: 30px 48px 8px 15px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.feld--euro input::-webkit-inner-spin-button, .feld--euro input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.feld--euro input::placeholder { color: #767676; font-size: 17px; font-weight: 600; letter-spacing: 0; opacity: 1; }
.feld--euro input:not(:placeholder-shown) { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.feld--euro::after { content: "\20AC"; position: absolute; z-index: 1; right: 16px; bottom: 9px; font-size: 22px; font-weight: 800; line-height: 1.2; color: #000; pointer-events: none; }
.kauf__form > .knopf { min-height: 56px; margin-top: 8px; }
.kauf__form > .kauf__hilfe { margin-top: 8px; }
.schritte { counter-reset: schritt; margin-top: 24px; }
.schritte li { counter-increment: schritt; position: relative; padding: 0 0 24px 48px; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -4px; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.schritte h3 { margin-bottom: 4px; }
.schritte p { color: var(--text-2); }
.anlass { border-bottom: 1px solid var(--linie); }
.anlass > div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--linie); }
.anlass dt { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.anlass dd { color: var(--text-2); }
@media (min-width: 560px) { .kauf__betraege { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .anlass > div { grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 20px 0; } }
@media (min-width: 1000px) {
  .gs-start { padding: 8px 0 104px; }
  .gs-start .gs-start__raster h1 { font-size: clamp(48px, 4.6vw, 68px); }
  .gs-start__text { margin-top: 20px; font-size: 19px; }
  .gs-start__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .gs-start__bild { margin: 0; }
  .kauf { margin-top: 40px; padding: 24px; }
}


/* ===================================================================================================
   Ab hier: Ergänzungen für die Website (nicht im Entwurf D enthalten).
   =================================================================================================== */

/* Sprungziele mit alten Namen (/#fleet, /#pricing), damit bestehende Links weiter treffen */
.anker { display: block; height: 0; }

/* Feste Leiste: Text darf umbrechen, auf schmalen Handys nur die Hauptzeile */
.leiste p { flex: 1 1 0; min-width: 0; }
.leiste__wa { margin-left: 0; }
.seite .leiste b { font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; }
.seite .leiste p span { display: none; }
@media (min-width: 560px) { .seite .leiste b { font-size: 16px; } .seite .leiste p span { display: block; } }

/* Zahlungsarten: Marken in Originalfarben, jede auf einer kleinen weißen Karte */
.zahlung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.zahlung p { max-width: none; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
.zahlung ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zahlung li { display: flex; }
.zk { display: flex; align-items: center; justify-content: center; width: 38px; height: 24px; border: 1px solid #d4d4d4; border-radius: 4px; background: #fff; }
.zk svg { display: block; }
.zk--klarna { border-color: #ffa8cd; background: #ffa8cd; }
.schluss .zahlung { margin-top: 32px; }
.fuss .zahlung { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); }
.fuss .zahlung + .fuss__unten { margin-top: 16px; }
.start__zahlung { padding-top: 12px; padding-bottom: 4px; }
.kauf > .zahlung { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
@media (prefers-reduced-motion: no-preference) {
  /* Wippen nur, solange die Zeile zu sehen ist (Klasse setzt seite.js), und nach drei Durchläufen ist Schluss */
  .zahlung.wippt li { animation: wippen 6.5s ease-in-out 3; }
  .zahlung.wippt li:nth-child(2) { animation-delay: .15s; }
  .zahlung.wippt li:nth-child(3) { animation-delay: .3s; }
  .zahlung.wippt li:nth-child(4) { animation-delay: .45s; }
  .zahlung.wippt li:nth-child(5) { animation-delay: .6s; }
  .zahlung.wippt li:nth-child(6) { animation-delay: .75s; }
  .zahlung.wippt li:nth-child(7) { animation-delay: .9s; }
  .zahlung li:hover .zk, .zahlung li:active .zk { animation: wackeln .6s ease-in-out 1; }
}

/* Buchungsmaske kompakt: Hinweise klappen auf, am Handy etwas niedrigere Felder (nie unter 44 px) */
.maske__mehr { grid-column: 1 / -1; }
.maske__mehr summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px; font-size: 13px; line-height: 1.4; color: var(--text-2); cursor: pointer; list-style: none; }
.maske__mehr summary::-webkit-details-marker { display: none; }
.maske__mehr summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 6px 0; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
.maske__mehr[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.maske__mehr .maske__hinweis { padding: 0 4px 8px; }
@media (max-width: 699px) {
  .start { padding-top: 8px; }
  .start__text { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .maske { gap: 6px 0; margin-top: 12px; padding: 10px 10px 4px; }
  .maske .feld select, .maske .feld input { height: 50px; padding: 22px 13px 5px; }
  .maske .feld > span { top: 7px; }
  .maske > .knopf { min-height: 52px; margin-top: 2px; }
  .start__bild { margin-top: -72px; }
}

/* Gutschein: fester Betrag und eigener Betrag sind zwei Formulare, damit nie zwei Beträge gesendet werden */
.kauf__form + .kauf__form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.kauf__eigen .knopf { margin-top: 0; }
@media (min-width: 560px) {
  .kauf__eigen { grid-template-columns: minmax(0, 1fr) auto; }
  .kauf__eigen .knopf { min-height: 64px; }
  .kauf__eigen .kauf__hilfe { grid-column: 1 / -1; }
}
.gs-mehr { margin-top: 16px; }

/* Tablet: Brüche zwischen 700 und 1100 px */
@media (min-width: 700px) and (max-width: 999px) {
  .abschnitt, .schluss { padding: 72px 0; }
  h2 { font-size: 38px; }
  .start h1, .gs-start h1, .einstieg h1 { font-size: 56px; }
  .start__text { font-size: 18px; }
  .raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .gs-start__bild { margin-bottom: -72px; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .flotte { margin: 0 calc(var(--rand) * -1); }
  .auto { flex-basis: 340px; }
  .film-block { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: 1fr repeat(6, auto) 1fr; gap: 12px 48px; max-width: none; }
  .film-block > * { grid-column: 2; }
  .film-block .reel { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .film-block h2 { grid-row: 2; }
  .film-block h3 { grid-row: 3; }
  .film-block > p { grid-row: 4; }
  .film-block > a:nth-of-type(1) { grid-row: 5; }
  .film-block > a:nth-of-type(2) { grid-row: 6; }
  .film-block > a:nth-of-type(3) { grid-row: 7; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .tarife--wahl .tarif { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 400px; gap: 0 24px; }
  .tarife--wahl .tarif dd b { min-width: 150px; font-size: 36px; }
  .tarife--wahl .tarif dd { gap: 16px; }
  .reiter__knopf { padding: 0 12px; font-size: 15px; }
}

/* ===================================================================================================
   Unterseiten, die tools/optik.mjs aus dem alten Aufbau umstellt (body.seite).
   Fließtext bekommt seine Abstände über :where(), damit jede Baustein-Klasse sie überschreiben kann.
   =================================================================================================== */
.seite main :where(p, li, dd, blockquote) { max-width: 72ch; }
.seite main :where(.wrap, .wrap div, .wrap aside, .wrap section, .wrap article, .wrap li, .wrap blockquote, .wrap figure, .wrap a) > :where(* + *) { margin-top: 16px; }
.seite main :where(* + h2) { margin-top: 56px; }
.seite main :where(* + h3) { margin-top: 32px; }
.seite main :where(h2 + *, h3 + *) { margin-top: 12px; }
.seite main :where(ul:not([class]), ol:not([class]), .nummern) { padding-left: 20px; }
.seite main :where(ul:not([class])) { list-style: disc; }
.seite main :where(ol:not([class]), .nummern) { list-style: decimal; }
.seite main :where(li + li) { margin-top: 8px; }
.seite main :where(small) { font-size: 13px; color: var(--text-2); }
.seite main :where(blockquote) { padding-left: 16px; border-left: 3px solid var(--text); font-size: 19px; font-weight: 600; line-height: 1.4; }
.seite main :where(picture) { display: block; }
.seite main :where(span, strong, b, em, small, br, a:not([class])) { margin-top: 0; }
.seite main :is(.karten, .reihe, .raster, .werte-raster, .galerie, .verweise, .knoepfe, .schluss__knoepfe, .einstieg__in, .einstieg__marken, .fakten-liste > div) > * { margin-top: 0; }
.seite main a:not([class]) { font-weight: 600; }
.seite .schluss .wrap > * + * { margin-top: 12px; }
.seite .schluss .wrap > .schluss__knoepfe { margin-top: 24px; }
.dunkel + .schluss.dunkel, .dunkel + .abschnitt.dunkel, .hell + .abschnitt.hell { border-top: 1px solid var(--linie); }

.label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.hinweis { font-size: 14px; color: var(--text-2); }
.unterzeile { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.abschnitt__kopf { margin-bottom: 24px; }
.abschnitt__kopf .einleitung { margin-bottom: 0; }
.knoepfe { display: grid; gap: 8px; }
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (min-width: 560px) { .knoepfe { display: flex; flex-wrap: wrap; gap: 16px; } }
@media (min-width: 1000px) { .abschnitt__kopf { margin-bottom: 40px; } }

/* Einstieg einer Unterseite: Text, Knöpfe, Foto randlos */
.einstieg { overflow: hidden; }
.einstieg__in { display: grid; gap: 24px; }
.einstieg h1 { font-size: clamp(32px, 9.2vw, 44px); line-height: 1.04; letter-spacing: -0.04em; }
.einstieg__ort { font-size: 14px; font-weight: 600; color: var(--text-2); }
.einstieg__text { font-size: 16px; color: var(--text-2); }
.einstieg__text strong { color: var(--text); }
.einstieg__marken { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-weight: 600; }
.einstieg__bild { margin: 0 calc(var(--rand) * -1); }
.einstieg__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.einstieg:not(:has(.einstieg__bild)) { padding-bottom: 40px; }
@media (min-width: 1000px) {
  .einstieg { padding: 16px 0 72px; }
  .einstieg__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .einstieg__in:not(:has(.einstieg__bild)) { grid-template-columns: minmax(0, 860px); }
  .einstieg h1 { font-size: clamp(48px, 4.6vw, 68px); }
  .einstieg__text { font-size: 19px; }
  .einstieg__bild { margin: 0; }
}

/* Kennwerte, Faktenliste, Karten, Kästen */
.fakten-liste > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--linie); }
.fakten-liste > div:last-child { border-bottom: 1px solid var(--linie); }
.fakten-liste dt { font-weight: 700; }
.werte-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--linie); background: var(--linie); }
.wert { padding: 16px; background: var(--bg); }
.wert > :first-child { font-size: 13px; font-weight: 600; color: var(--text-2); }
.seite main .wert > :last-child { margin-top: 4px; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.wert small { margin-left: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.karte { min-width: 0; padding: 24px; border: 1px solid var(--linie); }
.karte--betont { border: 2px solid var(--text); }
a.karte { display: block; text-decoration: none; transition: border-color .18s ease; }
a.karte:hover { border-color: var(--text); }
.karte--bild { padding: 0; }
.karte--bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seite main .karte--bild > * + * { margin-top: 0; }
.karte__text { display: block; padding: 12px 16px 16px; }
.karte__text strong { display: block; font-weight: 700; }
.karte__text span { display: block; font-size: 14px; color: var(--text-2); }
.karte__titel { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.karte__zeile { font-size: 14px; color: var(--text-2); }
.seite main .karte__zeile { margin-top: 4px; }
.karte__preis { font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
.karte__preis--text { font-size: 24px; letter-spacing: -0.02em; }
.karte__preis small { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.karte .knopf { width: 100%; }
.kasten__zeile { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.verweise { display: flex; flex-wrap: wrap; gap: 8px; }
.verweise a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linie); border-radius: var(--r); font-weight: 600; text-decoration: none; transition: border-color .18s ease; }
.verweise a:hover { border-color: var(--text); }
@media (min-width: 900px) { .werte-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wert { padding: 24px; } .seite main .wert > :last-child { font-size: 30px; } .karten--bild { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.galerie__bild { position: relative; overflow: hidden; }
.galerie__bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie__bild--breit { grid-column: span 2; }
.galerie__bild--breit img { aspect-ratio: 16 / 9; }
.galerie__text { position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: #000; color: #fff; font-size: 13px; font-weight: 600; }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* Tabellen: am Handy seitlich wischen statt quetschen */
.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.tabelle th, .tabelle td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle th { font-weight: 700; }
.tabelle thead th { border-bottom: 2px solid var(--text); white-space: nowrap; }
.tabelle tr > :last-child { padding-right: 0; }

/* Fragen auf Unterseiten: Antwort kann aus mehreren Absätzen bestehen */
.seite .fragen details > * { margin-top: 0; }
.fragen .antwort { max-width: 68ch; padding-bottom: 20px; }
.fragen .antwort > * + * { margin-top: 12px; }
.dunkel .fragen .antwort { color: var(--text-2); }
.fragen summary a { pointer-events: none; text-decoration: none; }

/* Blogartikel */
.beitrag > .wrap { max-width: 808px; }
.beitrag h1 { font-size: clamp(32px, 8vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.beitrag h2 { font-size: 26px; }
@media (min-width: 1000px) { .beitrag h2 { font-size: 34px; } }


/* Fuß der Website: mehr Linklisten als im Entwurf, am Handy als Aufklapp-Gruppen */
.fuss__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fuss__firma { margin-bottom: 24px; }
.fuss__gruppe { border-top: 1px solid var(--linie); }
.fuss nav:last-of-type .fuss__gruppe { border-bottom: 1px solid var(--linie); }
.fuss__gruppe summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; cursor: pointer; list-style: none; }
.fuss__gruppe summary::-webkit-details-marker { display: none; }
.fuss__gruppe summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 6px 0; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
.fuss__gruppe[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fuss__gruppe ul { padding-bottom: 12px; }
.fuss li a { min-width: 44px; padding: 4px 0; line-height: 1.3; }
@media (min-width: 900px) {
  .fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .fuss__firma { grid-column: 1 / -1; max-width: 64ch; margin: 0; }
  .fuss__gruppe, .fuss nav:last-of-type .fuss__gruppe { border: 0; }
  .fuss__gruppe summary { min-height: 0; margin-bottom: 8px; pointer-events: none; }
  .fuss__gruppe summary::after { display: none; }
  .fuss__gruppe ul { padding-bottom: 0; }
}
@media (min-width: 900px) and (hover: none) { .fuss a { min-height: 44px; } }
@media (min-width: 1100px) { .fuss__raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Kleinigkeiten auf Unterseiten */
.seite main .label + h2 { margin-top: 8px; }
.fakten-liste { max-width: 860px; }
.plakette { display: inline-block; padding: 4px 8px; border: 1px solid var(--text); border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.pfad a { min-width: 44px; }
.seite main .einstieg__marken > div > * + * { margin-top: 2px; }
.einstieg__marken > div { font-size: 13px; color: var(--text-2); }
.einstieg__marken > div > :first-child { font-size: 16px; font-weight: 700; color: var(--text); }
@media (max-width: 479px) { .seite .leiste__wa { display: none; } .seite .leiste .knopf { padding: 0 12px; } }

/* Nachbesserungen aus der Sichtprüfung */
@media (min-width: 900px) and (max-width: 1179px) {
  .flotte--buehne .auto.aktiv { aspect-ratio: auto; min-height: 540px; }
  .flotte--buehne .auto__text { padding: 32px; }
  .flotte--buehne .werte { margin-top: 24px; }
  .flotte--buehne .balken { margin-top: 16px; }
  .flotte--buehne .auto__kauf { gap: 16px; padding-top: 24px; }
  .fuss a { min-height: 44px; }
}
/* Bühne: Höhe richtet sich nach dem Inhalt, damit unten nichts abgeschnitten wird */
@media (min-width: 1180px) { .flotte--buehne .auto.aktiv { aspect-ratio: auto; min-height: 560px; } }
@media (max-width: 899px) { .karten--bild { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .karten--bild .karte__text, .seite main .karte--bild > .karte__titel, .seite main .karte--bild > .karte__zeile { padding-left: 12px; padding-right: 12px; } .karten--bild .karte__titel { font-size: 16px; } }
.tabelle .tabelle__stark, .tabelle .hinweis, .tabelle small { display: block; }
.seite main .label > span { display: block; }
.verweise a:has(> *) { flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 16px; }
.seite main .verweise a > * { margin-top: 0; }
.verweise a > * + * { font-size: 14px; font-weight: 400; color: var(--text-2); }
.beitrag section { margin-top: 56px; }

/* Karten mit Nummer, Tabellen-Hervorhebung, Bild im Blogartikel */
.karte__nr { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.tabelle__stark { font-weight: 700; white-space: nowrap; }
.beitrag__bild img { width: 100%; }
.seite main .karte--bild > .karte__titel, .seite main .karte--bild > .karte__zeile { display: block; padding: 0 16px; }
.seite main .karte--bild > .karte__titel { padding-top: 12px; }
.seite main .karte--bild > :last-child:not(picture):not(img) { padding-bottom: 16px; }

@media print { .kopf { position: static; } .leiste, .wa-fest { display: none; } }

/* Bewegung. Jede Bewegung hängt an „keine Einschränkung gewünscht"; sonst steht alles sofort fertig da. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @keyframes heran { to { transform: scale(1.07); } }
  @keyframes ein { from { opacity: 0; } }
  @keyframes hoch { from { opacity: 0; transform: translateY(12px); } }
  @keyframes bild { from { opacity: 0; transform: scale(1.03); } }
  @keyframes strich { from { transform: scaleX(0); } }
  @keyframes linie { from { stroke-dashoffset: 1; } }
  .start__bild img { animation: heran 18s ease-out both; }
  @keyframes wippen { 0%, 38%, 100% { transform: none; } 7% { transform: translateY(-2px) rotate(-4deg); } 15% { transform: translateY(1px) rotate(3deg); } 23% { transform: translateY(-1px) rotate(-2deg); } 31% { transform: rotate(1deg); } }
  @keyframes wackeln { 0%, 100% { transform: none; } 20% { transform: rotate(-9deg) scale(1.1); } 45% { transform: rotate(7deg) scale(1.1); } 70% { transform: rotate(-3deg); } }
  .tarife--wahl .tarif dl > div { animation: hoch .32s var(--weich); }
  .karte--zeichnet .karte__linien line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .karte--zeichnet a { opacity: 0; }
  .karte--zeichnet.da .karte__linien line { stroke-dashoffset: 0; animation: linie .8s var(--weich) backwards; }
  .karte--zeichnet.da .karte__linien line:nth-child(2n) { animation-delay: .12s; }
  .karte--zeichnet.da .karte__linien line:nth-child(3n) { animation-delay: .24s; }
  .karte--zeichnet.da a { opacity: 1; animation: ein .4s ease .6s backwards; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .flotte--buehne .auto.aktiv > img { animation: bild .55s var(--weich); }
  .flotte--buehne .auto.aktiv .auto__text > * { animation: hoch .45s var(--weich) backwards; }
  .flotte--buehne .auto.aktiv .auto__text > :nth-child(2) { animation-delay: .04s; }
  .flotte--buehne .auto.aktiv .auto__text > :nth-child(3) { animation-delay: .08s; }
  .flotte--buehne .auto.aktiv .auto__text > :nth-child(4) { animation-delay: .12s; }
  .flotte--buehne .auto.aktiv .auto__text > :nth-child(5) { animation-delay: .16s; }
  .flotte--buehne .auto.aktiv .balken i { animation: strich .9s var(--weich) .2s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Bausteine der Unterseiten, zweite Runde: Hakenliste, Gutschein-Hinweis, Zusatzschutz, Video, Rechtstexte, Ortsgruppen, Kundenstimmen */
.haken { display: grid; gap: 8px 24px; }
.seite main .haken > * { display: flex; gap: 10px; margin-top: 0; }
.haken > * > span:first-child { flex: none; font-weight: 800; }
@media (min-width: 560px) { .haken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teaser { display: grid; gap: 20px; align-items: center; padding: 24px; border: 1.5px solid var(--text); }
.teaser__text { display: flex; align-items: center; gap: 16px; }
.seite main .teaser__text > *, .seite main .teaser > * { margin-top: 0; }
.teaser__betrag { flex: none; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.teaser__text > div > :first-child { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.seite main .teaser__text > div > * + * { margin-top: 4px; font-size: 14px; color: var(--text-2); }
@media (min-width: 760px) { .teaser { grid-template-columns: minmax(0, 1fr) auto; padding: 32px; } }
.preiszeile { display: flex; align-items: baseline; gap: 8px; }
.seite main .preiszeile > * { margin-top: 0; }
.zusatz { max-width: 808px; border: 1.5px solid var(--text); }
@media (min-width: 900px) { .zusatz { padding: 32px; } }
.video-rahmen { max-width: 400px; margin-inline: auto; }
.seite main video { display: block; width: 100%; height: auto; }
.recht > .wrap { max-width: 808px; }
.recht h1 { font-size: clamp(32px, 8vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.seite main .recht h2 { margin-top: 48px; font-size: 24px; }
.seite main .recht h3 { margin-top: 32px; font-size: 19px; }
.recht p, .recht li, .recht a, .recht h1, .recht h2 { overflow-wrap: anywhere; }
.recht p, .recht li { max-width: 68ch; }
.seite main .gruppe + .gruppe { margin-top: 48px; }
.gruppe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.seite main .gruppe__kopf > * { margin-top: 0; }
.gruppe__kopf span { font-size: 14px; color: var(--text-2); }
.seite main .karte > .hinweis { display: block; margin-top: 12px; }
.stimme__kopf { display: flex; align-items: center; gap: 12px; }
.seite main .stimme__kopf > * { margin-top: 0; }
.stimme__kuerzel { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--text); border-radius: 50%; font-size: 14px; font-weight: 700; }
.galerie > img, .galerie > picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Karten: Überschriften und Bildkarten, lange Wörter brechen statt auszulaufen */
.seite main :is(h1, h2, h3, h4) { overflow-wrap: break-word; }
.einstieg h1, .beitrag h1 { hyphens: auto; hyphenate-limit-chars: 14 6 6; }
.seite main .karte :is(h2, h3) { font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; hyphens: auto; }
.seite main div.karte > h2:first-child { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; }
.karte__bild { display: block; }
.seite main .karte--bild > :not(picture, img, .karte__text, .karte__bild, :has(img)) { display: block; padding-left: 16px; padding-right: 16px; }
.seite main .karte--bild > :is(picture, img, .karte__bild, :has(img)) + :not(.karte__text) { padding-top: 12px; }
.seite main .karte--bild > :is(picture, img, .karte__bild, :has(img)) ~ :not(.karte__text, h2, h3, .karte__titel) { font-size: 14px; color: var(--text-2); }
.seite main .karte--bild > :is(picture, img, .karte__bild, :has(img)) + :is(div, span, strong):not(.karte__text) { font-size: 16px; font-weight: 700; color: var(--text); }
.seite main .karte--bild > * + :not(picture, img, .karte__text, .karte__bild, :has(img)) { margin-top: 4px; }
@media (max-width: 899px) { .seite main .karten--bild .karte :is(h2, h3) { font-size: 16px; } .seite main .karten--bild .karte--bild > :not(picture, img, .karte__text, .karte__bild, :has(img)) { padding-left: 12px; padding-right: 12px; } }
.seite main .karte, .seite main .kasten { overflow-wrap: break-word; }
.tabelle :is(td, th).tabelle__stark, .tabelle :is(td, th).hinweis { display: table-cell; }
.schluss .wrap > div:first-child:not([class]) { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }

/* Reels von Instagram: waagrecht wischen. Ohne Skript führt jede Karte zum Reel auf Instagram. */
.clips-rahmen { position: relative; }
.clips { display: flex; gap: 12px; margin: 0 calc(var(--rand) * -1); padding: 4px var(--rand) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.clips::-webkit-scrollbar { display: none; }
.clip { position: relative; flex: none; width: min(64vw, 264px); aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-gross); background: var(--flaeche); scroll-snap-align: start; }
.clip__film { display: block; width: 100%; height: 100%; color: #fff; }
.clip img, .clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip video { position: absolute; inset: 0; }
.clip__titel, .clip__zahl { position: absolute; left: 8px; z-index: 1; background: #000; color: #fff; font-weight: 700; line-height: 1.2; pointer-events: none; }
.clip__titel { top: 8px; padding: 5px 9px; border-radius: 6px; font-size: 12px; }
.clip__zahl { bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; }
.clip__zahl svg { width: 12px; height: 12px; }
.clip__start { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #fff; color: #000; pointer-events: none; }
.clip__start svg { width: 24px; height: 24px; margin-left: 3px; }
.clip__insta { position: absolute; right: 4px; top: 4px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; }
.clip__insta span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #000; }
.clip__insta .ic { width: 18px; height: 18px; }
.clips__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.clips__fuss small { font-size: 13px; color: var(--text-2); }
.clips__pfeil { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -30px; border: 0; border-radius: 50%; background: #fff; color: #000; cursor: pointer; }
.clips__pfeil[hidden] { display: none; }
.clips__pfeil svg { width: 20px; height: 20px; }
.clips__pfeil--zurueck { left: -8px; }
.clips__pfeil--vor { right: -8px; }
@media (min-width: 700px) { .clip { width: 264px; } .clips { gap: 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .clip__start { transition: opacity .25s, transform .35s var(--weich); }
  .clip--laeuft .clip__start { opacity: 0; transform: scale(.6); }
  .js .clips .clip { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--weich), transform .5s var(--weich); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .clips--da .clip { opacity: 1; transform: none; }
  .clip img { transition: transform .6s var(--weich); }
  .clip:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .clip--laeuft .clip__start { opacity: 0; } }

/* Kennwerte im Kopf der Fahrzeugseiten: erst die große Zahl, darunter die Bezeichnung */
.wert > strong:first-child { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); }
.seite main .wert > strong:first-child + span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--text-2); }
@media (min-width: 900px) { .wert > strong:first-child { font-size: 32px; } }
.einstieg__marken { gap: 8px 16px; }

/* Unterseiten: Blöcke blenden beim Scrollen weich ein (nur mit Skript, nur ohne „weniger Bewegung") */
@media (prefers-reduced-motion: no-preference) {
  .ein { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--weich), transform .6s var(--weich); }
  .galerie__bild.ein { transform: scale(.96); }
  .galerie__bild.ein:nth-child(2n) { transition-delay: .08s; }
  .galerie__bild.ein:nth-child(3n) { transition-delay: .16s; }
  .ein.ein--da { opacity: 1; transform: none; }
}

/* Galerie am großen Bildschirm: das breite Bild ist so hoch wie die Kachel daneben, damit keine Lücke entsteht */
@media (min-width: 900px) {
  .galerie { grid-auto-flow: dense; }
  .galerie__bild--breit img { aspect-ratio: 8 / 3; }
}