/* ==========================================================
   Fahrradshop24 – Dienstrad-Leasing-Landingpage
   ----------------------------------------------------------
   Gehört zu page-templates/leasing.php und wird ausschließlich auf
   Seiten mit dieser Vorlage geladen (is_page_template()-Prüfung beim
   Enqueue in inc/leasing-page.php).

   GENAU DAS WAR DER FEHLER DES ALTEN SNIPPETS #143: Es hing sein
   Stylesheet ohne jede Bedingung an wp_head und lieferte es auf jeder
   Seite des Shops aus – inklusive einer ".fs24-faq"-Regel, die das
   FAQ-Accordion des Themes beschädigte. Hier gilt deshalb:

     1. Ausgeliefert wird nur auf dieser einen Vorlage.
     2. Jede Regel ist unter ".fs24-leasing" gescoped.
     3. Keine generischen Klassennamen (.container, .btn,
        .section-title, .faq-item, .faq-answer) werden neu definiert
        oder überschrieben.

   AUSNAHME mit Absicht: ".fs24-faq" wird hier NICHT neu definiert,
   sondern die Leasing-Seite lädt zusätzlich nichts dafür – das
   Accordion bringt seine Gestaltung aus dieser Datei mit, unter
   ".fs24-leasing" gescoped, mit denselben Werten wie in
   assets/css/service-pages.css und assets/css/shop.css. Gleiche
   Komponente, gleiche Optik, kein globaler Eingriff.

   TOKENS: Design-Tokens aus frontend.css (:root), jeweils MIT
   Fallback – frontend.css wird inline/optimiert ausgeliefert und
   einzelne Blöcke können im Browser fehlen (siehe Kopf von
   versand-info.css). Aus demselben Grund bringt die Seite ihre
   Buttons selbst mit.

   Die Inhaltsbreite kommt aus der global genutzten ".container"-
   Klasse – dieselbe Flucht wie Shop-, Kategorie- und Serviceseiten.

   BREITENLOGIK (überarbeitet):
   Anfangs lag über allen direkten Kindern von ".fs24-leasing__inner"
   eine Lesespalte von 900px. Der Hero hob sie auf, alle übrigen
   Abschnitte nicht – dadurch endete die Seite ab der zweiten Sektion
   bei 900px und rechts daneben stand bis zu einem Drittel der Seite
   leer. Diese Kappung gibt es nicht mehr.

   Stattdessen gilt jetzt:

     1. Abschnitte, Raster, Karten, Bildstrecken und Rahmen nutzen die
        volle Containerbreite – dieselbe Flucht wie der Hero darüber.
     2. Begrenzt wird nur noch der FLIESSTEXT selbst, und zwar am
        jeweiligen Element in ch (Lesbarkeit), nicht am Abschnitt.
     3. Was in großer Breite nicht funktioniert, bekommt eine eigene
        mehrspaltige Aufteilung (FAQ, Abschlussblock) statt einer
        schmalen linksbündigen Spalte mit Leerraum daneben.
   ========================================================== */

.fs24-leasing {
  /* Nur noch für die Textspalte des Heros ohne Bild. */
  --fs24-leasing-measure: 900px;

  padding: 30px 0 92px;
  background: #fff;
  color: var(--ink, #111315);
}

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

/* ==========================================================
   Breadcrumb – gleiche Klassen und Optik wie überall sonst
   (.fs24-breadcrumb in product.css / shop.css / legal.css /
   service-pages.css).
   ========================================================== */

.fs24-leasing .fs24-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 26px;
  font-size: .82rem;
  color: var(--muted, #656b70);
}

.fs24-leasing .fs24-breadcrumb a {
  color: var(--muted, #656b70);
  text-decoration: none;
}

.fs24-leasing .fs24-breadcrumb a:hover {
  color: var(--ink, #111315);
  text-decoration: underline;
}

.fs24-leasing .fs24-breadcrumb__sep {
  color: var(--soft-2, #dfe2e4);
}

.fs24-leasing .fs24-breadcrumb__current {
  color: var(--ink, #111315);
}

/* ==========================================================
   Symbole
   ========================================================== */

.fs24-leasing__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke: var(--accent, #d24614);
}

/* ==========================================================
   Hero
   ----------------------------------------------------------
   Gibt die Flucht für die ganze Seite vor: volle Containerbreite,
   Text links, Bild rechts. Alle folgenden Abschnitte richten sich
   daran aus. Ohne Bild fällt er auf den ruhigen, flachen Kopfbereich
   der übrigen Seiten zurück – dann greift die Lesespalte
   (--fs24-leasing-measure) für die Textelemente.
   ========================================================== */

.fs24-leasing__hero {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-leasing__hero.has-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
}

.fs24-leasing__hero-body > * {
  max-width: var(--fs24-leasing-measure);
}

.fs24-leasing__hero-media {
  border-radius: var(--radius, 24px);
  overflow: hidden;
  background: var(--metal-1, #f1f2f2);
}

.fs24-leasing__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
}

@media (min-width: 900px) {
  .fs24-leasing__hero.has-image {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  }
}

.fs24-leasing__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 999px;
  background: var(--metal-0, #f7f7f6);
  color: var(--ink, #111315);
  font-size: .82rem;
  font-weight: 640;
  letter-spacing: .01em;
}

.fs24-leasing__kicker .fs24-leasing__icon {
  width: 19px;
  height: 19px;
}

/* Farbe ausdrücklich setzen: Blocksy färbt h1–h6 global über eine
   eigene Regel ein (dunkles Marineblau), die die Vererbung vom
   Container schlägt. Gleiche Notwendigkeit wie in shop.css,
   legal.css, versand-info.css und service-pages.css. */
.fs24-leasing__title {
  margin: 0 0 14px;
  color: var(--ink, #111315);
  font-size: clamp(1.95rem, 1.25rem + 2.2vw, 2.9rem);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -.02em;
}

.fs24-leasing__lead {
  max-width: 68ch;
  margin: 0;
  color: #3d4348;
  font-size: 1.02rem;
  line-height: 1.6;
}

.fs24-leasing__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted, #656b70);
  font-size: .88rem;
}

.fs24-leasing__proof li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Häkchen als CSS-Inhalt statt als Zeichen im Markup – so bleibt es
   aus dem Vorlesefluss von Screenreadern heraus. */
.fs24-leasing__proof li::before {
  content: "";
  width: 7px;
  height: 12px;
  border-right: 2px solid var(--accent, #d24614);
  border-bottom: 2px solid var(--accent, #d24614);
  transform: rotate(45deg);
  margin-right: 2px;
}

/* ==========================================================
   Abschnitte
   ========================================================== */

.fs24-leasing__section {
  margin-top: clamp(38px, 3.8vw, 58px);
  scroll-margin-top: 110px;   /* Sprungmarken unter dem Sticky-Header */
}

.fs24-leasing__heading {
  margin: 0 0 14px;
  color: var(--ink, #111315);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.fs24-leasing__section-lead {
  max-width: 74ch;
  margin: 0 0 20px;
  color: var(--muted, #656b70);
  font-size: .95rem;
  line-height: 1.62;
}

.fs24-leasing a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: var(--soft-2, #dfe2e4);
  transition: text-decoration-color .16s ease, color .16s ease;
}

.fs24-leasing a:hover {
  color: var(--accent-dark, #b93800);
  text-decoration-color: currentColor;
}

.fs24-leasing__inline-link {
  margin: 18px 0 0;
  font-size: .9rem;
  font-weight: 640;
}

.fs24-leasing__inline-link a {
  color: var(--accent-dark, #b93800);
  text-decoration: none;
}

.fs24-leasing__inline-link a:hover {
  text-decoration: underline;
}

/* ==========================================================
   Hinweiszeile
   ========================================================== */

.fs24-leasing__note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 20px 0 0;
  padding: 14px 17px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 14px;
  background: var(--metal-0, #f7f7f6);
  color: var(--muted, #656b70);
  font-size: .87rem;
  line-height: 1.58;
}

.fs24-leasing__note .fs24-leasing__icon {
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

/* ==========================================================
   Voraussetzungen
   ========================================================== */

/* Fünf Punkte, deshalb ausdrückliche Spaltenzahlen statt auto-fit:
   Auf breiten Schirmen stehen sie als eine Reihe zu fünft, darunter
   als 3+2 und 2+2+1. Mit auto-fit hinge die Aufteilung an der
   Fensterbreite und ergäbe je nach Gerät auch mal 4+1. */
.fs24-leasing__requirements {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 560px) {
  .fs24-leasing__requirements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .fs24-leasing__requirements {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1260px) {
  .fs24-leasing__requirements {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.fs24-leasing__requirement {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 16px;
  background: #fff;
}

.fs24-leasing__requirement-num {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink, #111315);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fs24-leasing__requirement-title {
  margin: 0 0 5px;
  color: var(--ink, #111315);
  font-size: .96rem;
  font-weight: 660;
  line-height: 1.32;
}

.fs24-leasing__requirement-text {
  margin: 0;
  color: #3d4348;
  font-size: .89rem;
  line-height: 1.58;
}

/* ==========================================================
   Ablauf in drei Schritten
   ========================================================== */

.fs24-leasing__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
}

.fs24-leasing__step {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 16px;
  background: #fff;
}

.fs24-leasing__step-num {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--soft-2, #dfe2e4);
  font-size: 2.1rem;
  font-weight: 780;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fs24-leasing__step-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 13px;
}

.fs24-leasing__step-title {
  margin: 0 0 7px;
  padding-right: 34px;
  color: var(--ink, #111315);
  font-size: 1rem;
  font-weight: 680;
  line-height: 1.3;
}

.fs24-leasing__step-text {
  margin: 0;
  color: #3d4348;
  font-size: .9rem;
  line-height: 1.6;
}

/* ==========================================================
   Anbieter
   ----------------------------------------------------------
   Gestaltete Wortzeichen statt Logos – dieselbe Lösung wie bei den
   Zahlungsarten im Footer (siehe inc/payment-info.php): die
   Logodateien fehlen auf dieser Installation, und Markenlogos ohne
   Freigabe der jeweiligen Markenrichtlinien einzusetzen wäre ohnehin
   heikel.
   ========================================================== */

.fs24-leasing__providers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs24-leasing__provider {
  padding: 11px 18px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 12px;
  background: var(--metal-0, #f7f7f6);
  color: var(--ink, #111315);
  font-size: .92rem;
  font-weight: 640;
  letter-spacing: -.005em;
}

/* ==========================================================
   Produkte
   ----------------------------------------------------------
   Die Karten selbst kommen aus woocommerce/content-product.php und
   bringen ihre Gestaltung aus frontend.css mit. Hier steht nur der
   Rahmen – bewusst NICHT ".products" oder ".product" umdefiniert
   (das ist die global genutzte WooCommerce-Klasse, siehe die
   Kollisionsnotiz in shop.css).
   ========================================================== */

.fs24-leasing__products {
  margin-bottom: 22px;
}

/* Das Raster selbst fehlte hier bisher: ".fs24-shop ul.products" ist
   auf die Archivseiten gescoped, und die Startseiten-Sektionsklasse
   ".products" trifft das WooCommerce-Markup zwar (Polsterung und
   Hintergrund, siehe Kollisionsnotiz in shop.css), stellt aber keine
   Spalten. Ohne eigene Regel stünden die Karten hier also
   untereinander in voller Breite. Auf Staging fällt das nicht auf,
   weil das Raster erst ab drei lieferbaren Rädern erscheint und
   derzeit nur eines vorrätig ist (fs24_leasing_products()).

   Dieselben Werte wie im Archiv, aber "auto-fit" statt "auto-fill":
   Es sind höchstens vier Karten, und leere Spuren am rechten Rand
   wären genau der Leerraum, den diese Überarbeitung beseitigt.
   Weiterhin bewusst NICHT global, sondern unter ".fs24-leasing". */
.fs24-leasing ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
}

.fs24-leasing ul.products::before,
.fs24-leasing ul.products::after {
  content: none;
}

.fs24-leasing ul.products li.product {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}

/* ==========================================================
   Kategorieeinstiege
   ========================================================== */

.fs24-leasing__entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
}

.fs24-leasing__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Motiv NEBEN dem Text erst ab hier – und zwar aus einem konkreten
   Grund: Die beiden Karten stehen schon ab rund 570px Fensterbreite
   nebeneinander. Eine Karte ist dann nur etwa 350–420px breit; neben
   einer 208px-Fläche blieben für den Text keine 150px. Darunter steht
   das Motiv deshalb über dem Text – dasselbe Bild, nur gestapelt.
   Dieselbe Schwelle wie beim FAQ und bei den Bildstrecken. */
@media (min-width: 1100px) {
  .fs24-leasing__entry.has-motif {
    grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
  }

  .fs24-leasing__entry-media {
    height: 148px;
  }

  .fs24-leasing__entry-img {
    --fs24-icon-h: 72px;
  }
}

.fs24-leasing__entry:hover {
  border-color: var(--soft-2, #dfe2e4);
  box-shadow: var(--shadow-soft, 0 14px 40px rgba(10, 12, 13, .10));
  color: inherit;
}

/* Die Karte ist als Ganzes ein Link. Die allgemeine Regel
   ".fs24-leasing a" ist spezifischer als ".fs24-leasing__entry" und
   zog deshalb bisher eine (hellgraue, aber sichtbare) Unterstreichung
   quer durch Titel, Beschreibung und CTA der Karte. Auf einer Fläche,
   die ohnehin als Ganzes klickbar ist, ist die Linie überflüssig –
   also hier gezielt mit gleicher Spezifität wieder abgeschaltet. Die
   Unterstreichung echter Fließtextlinks bleibt unberührt. */
.fs24-leasing a.fs24-leasing__entry,
.fs24-leasing a.fs24-leasing__entry:hover {
  text-decoration: none;
}

.fs24-leasing__entry-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ----------------------------------------------------------
   Motivfläche der beiden Einstiegskarten

   Die Motive sind dieselben vorbereiteten Kategorie-Icons, die im
   Shop an den Unterkategorie-Karten hängen (E-Mountainbike und
   Mountainbike Hardtail). Sie tragen Rahmen und Bezeichnung mit im
   Bild; PHP gibt deshalb dieselbe gemessene Geometrie mit, die auch
   die Kategorieseiten verwenden (fs24_shop_icon_style):

     --fs24-icon-gh    Motivhöhe als Anteil der Bildkante
     --fs24-icon-gc    Mitte des Motivs
     --fs24-icon-clip  Beschnitt außerhalb von Motiv und Rahmen

   Rechenweg und Standardwerte sind identisch zu
   ".fs24-subcat__img--icon" in shop.css – nur die Zielhöhe ist
   größer, weil die Fläche hier größer ist. Über --fs24-icon-h lässt
   sich die Motivgröße an einer Stelle einstellen.
   ---------------------------------------------------------- */

.fs24-leasing__entry-media {
  position: relative;
  display: grid;
  place-items: center;
  /* Gestapelt: flacher und mit größerem Motiv, weil die Fläche dann
     so breit ist wie die ganze Karte. Nebeneinander (ab 1100px) wird
     beides wieder zurückgenommen. */
  height: 134px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 13px;
  /* FLACHE Fläche im Ton des Bildhintergrunds der Icondateien
     (gemessen #fdfdfc/#fefefe), nicht der Metallverlauf der
     Kategoriekarten.

     Grund: Vom Icon bleibt nach dem Beschnitt ein Rechteck aus
     Motiv UND Bildhintergrund stehen. Auf den 50px hohen Flächen der
     Kategoriekarten fällt dessen Kante nicht auf, auf dieser
     wesentlich größeren Fläche schon – dort zeichnete sich ein
     hellerer Kasten hinter dem Fahrrad ab. Mit gleichem Ton
     verschwindet die Kante; die Fläche selbst grenzt sich über die
     Rahmenlinie vom Kartenweiß ab.

     Der Wert liegt zwischen den beiden gemessenen Dateien
     (E-Mountainbike #fefefe, Hardtail #fdfcfb), damit keine der
     beiden Karten eine sichtbare Kante bekommt. */
  background: #fdfdfc;
  overflow: hidden;
}

.fs24-leasing__entry-img {
  --fs24-icon-h: 82px;

  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--fs24-icon-h) / var(--fs24-icon-gh, .35));
  height: auto;
  max-width: none;
  object-fit: fill;
  transform: translate(-50%, calc(var(--fs24-icon-gc, 45%) * -1));
  clip-path: inset(var(--fs24-icon-clip, 21% 6% 34% 6%));

  /* Gleiche Farbangleichung wie auf den Kategorieseiten, siehe
     fs24_shop_icon_tone(). */
  filter: var(--fs24-icon-filter, none);
}

/* Rückfall, wenn die Icondatei fehlt: das Strichsymbol, aber auf
   derselben Fläche. */
.fs24-leasing__entry-glyph {
  width: 34px;
  height: 34px;
}

.fs24-leasing__entry-title {
  color: var(--ink, #111315);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.fs24-leasing__entry-text {
  margin-top: 5px;
  color: #3d4348;
  font-size: .9rem;
  line-height: 1.55;
}

.fs24-leasing__entry-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--accent-dark, #b93800);
  font-size: .88rem;
  font-weight: 640;
}

.fs24-leasing__entry:hover .fs24-leasing__entry-cta span {
  transform: translateX(3px);
}

.fs24-leasing__entry-cta span {
  transition: transform .16s ease;
}

/* ==========================================================
   Zweispaltige Abschnitte mit Bild
   ========================================================== */

.fs24-leasing__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: center;
}

.fs24-leasing__split-body > * {
  max-width: 68ch;
}

.fs24-leasing__split-media {
  border-radius: var(--radius, 24px);
  overflow: hidden;
  background: var(--metal-1, #f1f2f2);
}

/* Feste Bildfläche statt freier Eigenhöhe.

   Die drei Motive haben sehr unterschiedliche Seitenverhältnisse: Hero
   und Werkstatt sind 16:9 (1672x941), das Zubehörmotiv ist ein
   ausgesprochen flacher Banner (1629x543, also 3:1). Ohne Vorgabe
   stünde neben der Textspalte einmal ein ordentliches Panel und einmal
   ein schmaler Streifen. 16:10 liegt nah genug an 16:9, dass dort kaum
   beschnitten wird, und macht aus dem Banner eine ruhige Fläche.

   Die Quelldateien sind mit 1536px Breite reichlich groß dafür – der
   Beschnitt kostet keine sichtbare Schärfe. */
.fs24-leasing__split-media {
  aspect-ratio: 16 / 10;
}

.fs24-leasing__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .fs24-leasing__split.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  }

  /* Bild links, Text rechts – nur für den Werkstattabschnitt, damit
     die Seite nicht dreimal dasselbe Muster wiederholt. */
  .fs24-leasing__split--media-first.has-image {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  }
}

/* Auf der vollen Containerbreite kehrt sich das Verhältnis um: Die
   Textspalte bekommt das kleinere Gewicht, weil sie sonst deutlich
   über eine angenehme Lesebreite hinauswüchse, das Bild das größere.
   Die Spaltenbreite ist damit selbst die Lesebreite – die 68ch am
   Kind werden hier überflüssig und aufgehoben, sonst bliebe innen
   wieder ein Rand frei. */
@media (min-width: 1100px) {
  .fs24-leasing__split.has-image {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  }

  .fs24-leasing__split--media-first.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  }

  .fs24-leasing__split-body > * {
    max-width: none;
  }

  /* Das Bild ist jetzt gut ein Drittel breiter als vorher. Bei 16:10
     würde es dadurch sehr hoch; 16:9 entspricht ohnehin dem nativen
     Verhältnis von Hero- und Werkstattmotiv und schneidet dort gar
     nichts weg. */
  .fs24-leasing__split-media {
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================
   Zubehörliste
   ========================================================== */

.fs24-leasing__scope {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-leasing__scope-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-leasing__scope-item strong {
  color: var(--ink, #111315);
  font-size: .95rem;
  font-weight: 660;
}

.fs24-leasing__scope-item span {
  color: #3d4348;
  font-size: .89rem;
  line-height: 1.58;
}

/* ==========================================================
   Werkstattpunkte
   ========================================================== */

.fs24-leasing__points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fs24-leasing__point {
  display: flex;
  gap: 13px;
}

.fs24-leasing__point .fs24-leasing__icon {
  width: 21px;
  height: 21px;
  margin-top: 2px;
}

.fs24-leasing__point-title {
  margin: 0 0 4px;
  color: var(--ink, #111315);
  font-size: .96rem;
  font-weight: 660;
  line-height: 1.32;
}

.fs24-leasing__point-text {
  margin: 0;
  color: #3d4348;
  font-size: .89rem;
  line-height: 1.58;
}

/* ==========================================================
   FAQ-Accordion
   ----------------------------------------------------------
   Dieselbe Komponente und dieselben Werte wie in service-pages.css
   und shop.css – natives <details>/<summary>, kein JavaScript.
   Bewusst unter ".fs24-leasing" gescoped: Diese Datei definiert
   ".fs24-faq" NICHT global. Genau daran ist Snippet #143
   gescheitert.
   ========================================================== */

.fs24-leasing .fs24-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 46px;
  border-top: 1px solid var(--line, rgba(17, 19, 21, .12));
}

/* Neun Fragen in einer einzigen Spalte über die volle Seitenbreite
   wären unruhig zu lesen – der Pfeil stünde am rechten Seitenrand,
   weit weg von der Frage. Eine schmale linksbündige Spalte hätte
   dagegen genau den leeren Streifen rechts hinterlassen, um den es
   bei dieser Überarbeitung geht. Deshalb ab hier zwei Spalten.

   Das Raster füllt zeilenweise (Frage 1 links, Frage 2 rechts, …).
   Weil die Zellen einer Rasterzeile gleich hoch sind, liegen die
   Trennlinien beider Spalten trotz unterschiedlich langer Fragen auf
   einer Höhe – auch dann, wenn eine Antwort aufgeklappt ist. */
@media (min-width: 1100px) {
  .fs24-leasing .fs24-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fs24-leasing .fs24-faq__item {
  border-bottom: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-leasing .fs24-faq__q {
  position: relative;
  padding: 14px 34px 14px 0;
  cursor: pointer;
  list-style: none;
}

.fs24-leasing .fs24-faq__q::-webkit-details-marker {
  display: none;
}

.fs24-leasing .fs24-faq__q-text {
  display: inline;
  margin: 0;
  color: var(--ink, #111315);
  font-size: .95rem;
  font-weight: 620;
  line-height: 1.45;
  letter-spacing: 0;
}

.fs24-leasing .fs24-faq__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--muted, #656b70);
  border-bottom: 2px solid var(--muted, #656b70);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.fs24-leasing .fs24-faq__item[open] .fs24-faq__q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.fs24-leasing .fs24-faq__q:hover .fs24-faq__q-text {
  color: var(--accent-dark, #b93800);
}

.fs24-leasing .fs24-faq__q:focus-visible {
  outline: 2px solid var(--accent, #d24614);
  outline-offset: 3px;
  border-radius: 4px;
}

.fs24-leasing .fs24-faq__a {
  padding: 0 0 16px;
  max-width: 70ch;
  color: #3d4348;
  font-size: .92rem;
  line-height: 1.65;
}

.fs24-leasing .fs24-faq__a p {
  margin: 0 0 .7em;
}

.fs24-leasing .fs24-faq__a p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   Abschluss und Buttons
   ----------------------------------------------------------
   Eigene Buttons statt der globalen ".btn"-Klassen – Begründung im
   Dateikopf. Optik und Maße folgen den Buttons der Service- und
   Versandseiten, damit der Shop eine Sprache spricht.
   ========================================================== */

.fs24-leasing__closing {
  margin-top: clamp(42px, 4vw, 62px);
  padding: 28px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 18px;
  background: var(--metal-0, #f7f7f6);
}

.fs24-leasing__closing .fs24-leasing__heading {
  margin-bottom: 8px;
}

/* Bestellweg links, Rückfrage rechts. Untereinander in einer schmalen
   Spalte blieb rechts im Rahmen fast die halbe Fläche leer. */
.fs24-leasing__closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 900px) {
  .fs24-leasing__closing-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 54px);
    /* Bewusst gedehnt statt oben ausgerichtet: So läuft die
       Trennlinie über die volle Höhe des Rahmens und nicht nur
       neben der kürzeren rechten Hälfte. */
    align-items: stretch;
  }
}

.fs24-leasing__closing-text {
  max-width: 70ch;
  margin: 0;
  color: #3d4348;
  font-size: .95rem;
  line-height: 1.62;
}

/* Trennlinie zwischen den beiden Hälften: untereinander liegt sie
   oben, nebeneinander links. */
.fs24-leasing__closing-text--sub {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line, rgba(17, 19, 21, .12));
}

@media (min-width: 900px) {
  .fs24-leasing__closing-aside {
    padding-left: clamp(28px, 3.5vw, 54px);
    border-left: 1px solid var(--line, rgba(17, 19, 21, .12));
  }

  .fs24-leasing__closing-text--sub {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

.fs24-leasing__closing-note {
  margin: 16px 0 0;
  color: var(--muted, #656b70);
  font-size: .86rem;
}

.fs24-leasing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.fs24-leasing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 21px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: var(--fs24-btn-radius, 10px);
  background: #fff;
  color: var(--ink, #111315);
  font-size: .92rem;
  font-weight: 640;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

/* Dieselbe Spezifitätsfalle wie bei den Einstiegskarten: Die Regel
   oben sagt zwar "text-decoration: none", ".fs24-leasing a" ist mit
   der zusätzlichen Elementauswahl aber spezifischer und zog eine
   Unterstreichung quer durch jede Schaltfläche – auf dem orangen
   Knopf weiß, auf den hellen grau. Hier gezielt aufgehoben; an der
   Unterstreichung echter Fließtextlinks ändert sich nichts. */
.fs24-leasing a.fs24-leasing__btn,
.fs24-leasing a.fs24-leasing__btn:hover {
  text-decoration: none;
}

.fs24-leasing__btn:hover {
  background: var(--metal-1, #f1f2f2);
  border-color: var(--soft-2, #dfe2e4);
  color: var(--ink, #111315);
}

.fs24-leasing__btn--primary {
  background: var(--accent, #d24614);
  border-color: var(--accent, #d24614);
  color: #fff;
}

.fs24-leasing__btn--primary:hover {
  background: var(--accent-dark, #b93800);
  border-color: var(--accent-dark, #b93800);
}

/* Schriftfarbe des orangen Knopfes – mit Elementauswahl, sonst
   wirkungslos.

   Die beiden Regeln direkt darüber sagen zwar "color: #fff", waren
   aber tote Buchstaben: ".fs24-leasing a" (0,1,1) und
   ".fs24-leasing a:hover" (0,2,1) weiter oben in dieser Datei sind
   spezifischer als ".fs24-leasing__btn--primary" (0,1,0) bzw.
   ".fs24-leasing__btn--primary:hover" (0,2,0). Gemessen im Browser
   stand deshalb dunkles #111315 auf Orange, und im Hover war die
   Schrift mit rgb(217,71,0) auf rgb(217,71,0) buchstäblich unsichtbar.

   Zielzustand (Auftrag 2026-09-02): in JEDEM Zustand weiße Schrift,
   nur der Hintergrund wird beim Hover dunkler (--accent-dark). Kein
   Wechsel zu Blau – das gilt nur noch für Text- und Pfeillinks, deren
   Regeln oben unverändert bleiben.

   REIHENFOLGE BEACHTEN: Die Hover-Variante hat mit (0,2,1) exakt
   dieselbe Spezifität wie ".fs24-leasing a:hover" und gewinnt nur,
   weil sie weiter unten steht. Sie darf nicht vor jenen Block wandern.

   ":focus-visible" und nicht ":focus" – die Tastaturbedienung behält
   ihre Outline (Regel weiter unten) auf lesbarem Grund, während ein
   Fingertipp auf dem Telefon keinen dauerhaften Zustand hinterlässt. */
.fs24-leasing a.fs24-leasing__btn--primary,
.fs24-leasing a.fs24-leasing__btn--primary:hover,
.fs24-leasing a.fs24-leasing__btn--primary:focus-visible {
  color: #fff;
}

.fs24-leasing__btn:focus-visible,
.fs24-leasing__entry:focus-visible {
  outline: 2px solid var(--accent, #d24614);
  outline-offset: 3px;
}

/* ==========================================================
   Mobil
   ========================================================== */

@media (max-width: 767px) {
  .fs24-leasing {
    padding-bottom: 64px;
  }

  .fs24-leasing__closing {
    padding: 20px;
  }

  .fs24-leasing__step,
  .fs24-leasing__entry,
  .fs24-leasing__requirement {
    padding: 18px;
  }

  /* Auf schmalen Geräten volle Breite, statt in einer Zeile zu
     zerbröseln. */
  .fs24-leasing__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fs24-leasing__hero-img {
    max-height: 240px;
  }

  /* Auf dem Telefon steht das Bild über dem Text und darf flacher
     sein, damit der Text nicht erst nach einem halben Bildschirm
     beginnt. */
  .fs24-leasing__split-media {
    aspect-ratio: 16 / 9;
  }

  .fs24-leasing__step-num {
    font-size: 1.7rem;
  }
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
  .fs24-leasing *,
  .fs24-leasing *::before,
  .fs24-leasing *::after {
    transition-duration: .01ms !important;
  }
}