/* =============================================================================
   FINALE CTA — woertlich aus index.html uebernommen
   -----------------------------------------------------------------------------
   Rene 12.08.2026: "unten bei Bereit zum Verkaufen ... Das haben wir auf jeder
   Seite unten. Die will ich eins zu eins so haben, wie wir es bei Home haben."

   Vorher gab es drei Fassungen: .final-cta (Home), .page-cta-band (3 Seiten),
   .cta-band (6 Seiten). Jetzt eine.

   Selbsttragend: alle var() mit Rueckfallwert, definiert nichts im :root neu.
   Markup: <section class="final-cta"> mit <picture class>/.final-cta-bg-img,
   .final-cta-inner, .final-cta-h, .final-cta-sub, .final-cta-btns, .cta-trust
   ============================================================================= */

/* === FINALE CTA — Variante B "Bestand" (12.08.2026) =======================
   Renes Kritik: "so dick, so unuebersichtlich" und "da muss auf jeden Fall
   ein neues Bild rein". Ein Bild lag schon da — halle-hero-2026.webp — aber
   unter brightness(.4) plus 78-94% dunklem Verlauf war es unsichtbar. Das
   Problem war also nicht das fehlende, sondern das erdrueckte Bild.
   Jetzt eine Reihe Fahrzeuge in der Halle (0,208 mittlere Leuchtdichte, nur
   10% helle Pixel — passt tonal zur Seite), sichtbar, ohne Helligkeitsfilter.
   Headline von 96px auf 64px: sie war die groesste der Seite.
   Weg: der animierte Gold-Schleier ueber dem Bild und der Eyebrow. */
.final-cta{position:relative;min-height:min(62svh,600px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;border-top:1px solid var(--bo,rgba(255,255,255,.13))}
.final-cta picture{display:contents}
.final-cta-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.final-cta::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,8,9,.86) 0%,rgba(7,8,9,.7) 45%,rgba(7,8,9,.92) 100%)}
.final-cta-inner{position:relative;z-index:2;padding:clamp(56px,6vw,88px) var(--edge,clamp(20px,4vw,56px));max-width:calc(var(--page-max,1280px) + 2 * var(--edge,clamp(20px,4vw,56px)))}
/* === TYPOGRAFIE-RHYTHMUS (13.08.2026) =====================================
   Rene: "Die Schrift kommt mir komisch vor. Teilweise sind Schriften dick,
   dann wieder duenn, dann dick."

   Gemessen war es kein Eindruck, sondern zwei echte Bruecke IN EINER ZEILE:
   1. Die Ueberschrift war 800, ihre goldene zweite Haelfte (em) aber 700.
      Eine Ueberschrift, zwei Staerken — der Sprung sitzt mitten im Satz.
   2. Die zwei Buttons nebeneinander waren 800 (voll) und 700 (Umriss).

   Regel jetzt: die Farbe traegt den Akzent, nicht die Strichstaerke —
   genau wie .ankx-h em auf der Startseite, das nur die Farbe wechselt.
   Die Leiter von oben nach unten ist damit 800 / 400 / 800 / 600:
   Ueberschrift, Fliesstext, Buttons, Kleingedrucktes. Jede Stufe hat einen
   Grund, keine zwei benachbarten Dinge unterscheiden sich grundlos.

   Plus Jakarta Sans liegt in 300-800 wirklich vor (fonts.css), 800 wird
   also nicht vom Browser gefaelscht. */
.final-cta-h{font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:clamp(36px,4.6vw,64px);font-weight:800;line-height:1.02;letter-spacing:-.028em;color:var(--tx,#EDF1F5);margin-bottom:20px}
.final-cta-h em{font-style:normal;font-weight:inherit;color:var(--grn,#c9a86a)}
.final-cta-sub{font-size:16px;font-weight:400;color:rgba(237,241,245,.85);line-height:1.7;margin:0 auto 32px;max-width:52ch}
/* display:flex, nicht inline-flex: als Inline-Box lief die Buttonreihe mit
   der Trust-Zeile auf eine Zeile, sobald der Container breit genug war
   (frueher verhinderte das nur die 920px-Deckelung des Containers). */
.final-cta-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0 0 26px}
.fcta-prime{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--grn,#c9a86a);color:#070809;font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--grn,#c9a86a);text-decoration:none;transition:background .35s var(--ease,cubic-bezier(.22,1,.36,1)),color .35s}
.fcta-prime:hover{background:transparent;color:var(--grn,#c9a86a)}
.fcta-prime svg{transition:transform .35s}
.fcta-prime:hover svg{transform:translateX(4px)}
/* 700 -> 800: stand direkt neben dem 800er-Button. Zwei gleich grosse
   Buttons nebeneinander duerfen sich in Farbe und Rahmen unterscheiden,
   nicht in der Strichstaerke. */
.fcta-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:transparent;color:var(--tx2,rgba(237,241,245,.72));font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--bo2,rgba(255,255,255,.18));text-decoration:none;transition:border-color .35s var(--ease,cubic-bezier(.22,1,.36,1)),color .35s}
.fcta-ghost:hover{border-color:var(--grn,#c9a86a);color:var(--tx,#EDF1F5)}
.cta-trust{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;font-family:var(--fh,"Plus Jakarta Sans",sans-serif);font-size:12px;font-weight:600;letter-spacing:.06em;color:rgba(237,241,245,.6)}
.cta-trust-item{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
a.cta-trust-tel{transition:color .3s}a.cta-trust-tel:hover{color:var(--grn,#c9a86a)}
.cta-trust-item svg{width:14px;height:14px;color:var(--grn,#c9a86a);flex-shrink:0}
.cta-trust-divider{width:1px;height:14px;background:rgba(237,241,245,.18)}
@media(max-width:768px){.final-cta{min-height:min(72svh,540px)}
.final-cta-h{font-size:clamp(30px,7.4vw,40px);letter-spacing:-.022em}
.final-cta-sub{font-size:15px;margin-bottom:26px}
.final-cta-btns{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto;margin-bottom:22px}
.fcta-prime,.fcta-ghost{width:100%;justify-content:center;font-size:12px}
.cta-trust{gap:10px;font-size:11px}.cta-trust-divider{display:none}
/* Die Telefonnummer war 14px hoch. Auf dem Handy ist das der kuerzeste Weg
   zum Gespraech - sie braucht ein Tippziel, keine Textzeile. */
.cta-trust-item{min-height:44px;-webkit-tap-highlight-color:transparent}}

/* Renés Handy-Review 14.08. nachts: "Bereit fürs nächste Fahrzeug feiere
   ich auf Desktop mega, auf Mobile kommt es nicht annähernd so clean rüber
   ... vollgeschmissen. Telefonnummer, Geprüft und Google-Bewertungen
   rauslassen. Auf Mobile alles, was man braucht, aber nicht überladen."
   Gilt sitewide - die Sektion steht auf jeder Seite. Desktop unverändert. */
@media(max-width:768px){
  .cta-trust{display:none}
  .final-cta{min-height:min(58svh,460px)}
  /* Das 16:9-Foto trägt hochkant nicht (Renés "einfach so abgeschnitten") -
     stärker abgedunkelt wird es Atmosphäre statt angeschnittenes Bild. */
  .final-cta::after{background:linear-gradient(180deg,rgba(7,8,9,.9) 0%,rgba(7,8,9,.82) 45%,rgba(7,8,9,.95) 100%)}
}