/* Shared site footer — single source of truth. Edit here, not per page. Generated from index.html footer. */

/* === LAYOUT-TOKENS (12.08.2026) ===============================================
   Eine Inhaltsbreite fuer die ganze Seite. Liegt hier, weil footer.css auf
   24 von 25 Seiten geladen wird und damit global gilt — Nav, Inhalt und Footer
   sitzen so zwangslaeufig auf DERSELBEN linken Kante. Vorher: Nav 60px,
   Inhalt 215px, Footer 80px, also drei Kanten und kein Anker fuers Auge.
   TODO: gehoert eigentlich in ein eigenes styles/layout.css, sobald das
   Container-System auf alle Seiten ausgerollt ist (siehe 06_OPEN_TASKS).   */
:root{--page-max:1280px;--gut:clamp(20px,4vw,56px);--edge:max(var(--gut),(100vw - var(--page-max))/2)}

footer{background:var(--page);padding:88px var(--edge) 36px;border-top:1px solid var(--bo);position:relative}
/* Spalte 2 (Navigation) traegt ein 2x5-Grid mit 22px Innenabstand. Damit
   "Auto verkaufen lassen" (140px) einzeilig bleibt, braucht sie >=302px.
   Deshalb 1.55fr statt 1fr — der Platz kommt aus Brand und Oeffnungszeiten. */
.ft-inner{display:grid;grid-template-columns:1.35fr 1.55fr 1.25fr .95fr;gap:clamp(32px,3.5vw,56px);padding-bottom:48px;border-bottom:1px solid var(--bo)}
.ft-brand .fl img{height:44px;width:auto;margin-bottom:16px;display:block}
.ft-brand p{font-size:13px;font-weight:300;color:var(--tx3);line-height:1.85;margin-bottom:20px;max-width:260px}
.ft-social{display:flex;gap:8px}
.fsoc{width:38px;height:38px;border:1px solid var(--bo);display:flex;align-items:center;justify-content:center;color:var(--tx3);transition:all .3s}
.fsoc:hover{border-color:var(--grn-bd);color:var(--grn)}
.ft-col h4,.ft-col .ft-head{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grn);margin-bottom:22px;display:inline-flex;align-items:center;gap:10px}
.ft-col .ft-head::before{content:'';width:18px;height:1px;background:var(--grn);opacity:.5}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.ft-col li{display:flex;align-items:flex-start;gap:12px}
.ft-col li svg.ft-ico{flex-shrink:0;width:15px;height:15px;color:var(--grn);opacity:.85;margin-top:3px}
.ft-col a{font-size:13.5px;font-weight:500;color:rgba(237,241,245,.7);transition:color .3s;text-decoration:none;line-height:1.45}
.ft-col a:hover{color:var(--grn)}
.fci{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.fci-l{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,241,245,.58)}
.fci-v{font-size:13.5px;font-weight:500;color:rgba(237,241,245,.8);transition:color .3s;line-height:1.4;text-decoration:none}
.ft-status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(201, 168, 106,.08);border:1px solid var(--grn-bd);border-radius:999px;font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grn);margin-top:14px}
.ft-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 10px rgba(201, 168, 106,.6);animation:livepulse 2s ease-in-out infinite}
.ft-bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:14px}
.ft-copy{font-size:12px;font-weight:400;color:rgba(237,241,245,.55)}
.ft-legal{display:flex;gap:22px}
.ft-legal a{font-size:12px;font-weight:500;color:rgba(237,241,245,.5);transition:color .3s;text-decoration:none}
.ft-legal a:hover{color:var(--grn)}
/* Umbruch bei 1260 statt 1100: darunter bleiben der Navigations-Spalte im
   4-Spalten-Raster keine 2x140px mehr, "Auto verkaufen lassen" wuerde
   umbrechen. Im 2x2-Raster hat sie ~220px pro Unterspalte. Gemessen. */
@media(max-width:1260px){footer{padding-left:32px;padding-right:32px}
.ft-inner{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:768px){footer{padding:64px 20px 28px}
.ft-inner{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.ft-inner{grid-template-columns:1fr}}
.ft-tag{font-size:13px;font-weight:400;color:rgba(237,241,245,.62);line-height:1.65;max-width:280px;margin:14px 0 18px}
.ft-social{display:flex;gap:10px}
.fsoc{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(237,241,245,.04);border:1px solid var(--bo);color:rgba(237,241,245,.7);text-decoration:none;transition:all .35s var(--ease)}
.fsoc:hover{background:rgba(201, 168, 106,.1);border-color:var(--grn-bd);color:var(--grn);transform:translateY(-2px)}
.fsoc.soon{cursor:default;opacity:.4;pointer-events:none}
.fsoc.soon::after{content:'BALD';position:absolute;font-family:var(--fh);font-size:7.5px;font-weight:800;letter-spacing:.1em;color:var(--grn);bottom:-8px;background:rgba(201, 168, 106,.12);border:1px solid var(--grn-bd);border-radius:999px;padding:1px 5px}
.fsoc{position:relative}
footer{position:relative}
footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:2px;background:linear-gradient(90deg,transparent 0%,var(--grn) 50%,transparent 100%);opacity:.5}
.ft-inner .fsoc{transition:color .3s,border-color .3s,background .3s}
.ft-inner .fsoc:hover{color:var(--grn);border-color:var(--grn-bd);background:rgba(201, 168, 106,.05)}
.ft-regions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:22px 0;border-bottom:1px solid var(--bo);margin-top:24px}
.ft-regions-head{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grn);display:inline-flex;align-items:center;gap:10px}
.ft-regions-head::before{content:'';width:18px;height:1px;background:var(--grn);opacity:.5}
.ft-regions-links{display:inline-flex;flex-wrap:wrap;gap:0}
.ft-regions-links a{font-family:var(--fb);font-size:13.5px;font-weight:500;color:var(--tx2);transition:color .25s;padding:4px 0;position:relative;text-decoration:none}
.ft-regions-links a:hover{color:var(--grn)}
.ft-regions-links a + a::before{content:' · ';color:var(--tx4);margin:0 10px;pointer-events:none}
@media(max-width:768px){.ft-regions{gap:8px 12px;padding:18px 0}
.ft-regions-links a + a::before{margin:0 6px}}
/* 2x5 statt einspaltig: einspaltig wurde zu lang. Der Umbruch von
   "Auto verkaufen lassen" (braucht 140px) ist stattdessen ueber die
   breitere Navigations-Spalte in .ft-inner geloest, siehe dort. */
.ft-col ul.ft-nav-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:12px 22px}
@media(max-width:768px){.ft-col ul.ft-nav-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);gap:10px 14px}}
@media(max-width:768px){.ft-col ul{gap:14px}
.ft-col ul.ft-nav-grid{gap:14px 20px}
.ft-col ul.ft-nav-grid a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;font-size:14.5px;-webkit-tap-highlight-color:transparent}
/* Telefon und E-Mail im Footer waren 36px hoch - das sind die beiden
   Links, wegen denen jemand auf dem Handy ueberhaupt hier runterscrollt. */
.fci-v{display:inline-flex;align-items:center;min-height:44px;-webkit-tap-highlight-color:transparent}
.ft-col li{align-items:center}
.ft-col li svg.ft-ico{margin-top:0}
.ft-col a{font-size:14.5px}
.fsoc{width:44px;height:44px;-webkit-tap-highlight-color:transparent}
.ft-social{gap:12px}
.ft-bot{flex-direction:column;align-items:flex-start;gap:18px;padding-top:32px}
.ft-legal{gap:0 24px;flex-wrap:wrap;row-gap:6px}
.ft-legal a{padding:10px 0;font-size:13px;min-height:44px;display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent}
.ft-regions-links a{padding:8px 14px 8px 0;-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;min-height:44px}}

/* ---------------------------------------------------------------------------
   Tippziele Mobile (13.08.2026)
   Rene: Mobile ist "noch nicht auf einem pro level". Gemessen bei 390px:
   die Button-Klassen kamen durch padding:13px 28px bei 11px Schrift auf
   exakt 42px - zwei Pixel unter dem 44er-Minimum (Apple HIG, WCAG 2.5.5).
   Betrifft "Zum Sofort-Ankauf", "WhatsApp", die Telefon-Buttons.
   Diese Datei wird NACH den Inline-<style>-Bloecken geladen, deshalb
   greift die Regel trotz gleicher Spezifitaet.
   Der Skip-Link lag bei 41px - der wird zwar nur per Tastatur sichtbar,
   kostet hier aber nichts.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  .btn-d,.btn-g,.hxbtn,.fcta-prime,.fcta-ghost{min-height:44px}
  .skip-link{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------------------------------------------------------------------------
   Mobile-Typo-Kampagne (Renés Auftrag: "Mobile muss absolut Premium-Niveau").
   Bei 390px gemessen: 34 Textklassen unter 12px, Footer-Labels bei 9px,
   Schritte-Labels bei 9.5px, CTA-Beschriftungen bei 11px. 12px ist die
   Untergrenze aus der Eyebrow-Lehre vom 14.08. (10.5px trug nicht, Kontrast
   allein macht kleine Schrift nicht lesbar). Desktop bleibt unangetastet.
   Diese Datei laedt auf allen Seiten NACH den Inline-Styles - gleiche
   Spezifitaet reicht, damit die Regeln gewinnen. Cookie-Buttons brauchen
   den Eltern-Selektor, weil cookie-consent.css asynchron NACH dieser Datei
   laden kann. --------------------------------------------------------------- */
@media(max-width:768px){
  .hxeye,.fzx-eye,.team-eye,.ankx-eye,.rev-eye,.uspx-eye,.leist-eye,
  .komm-eye,.stx-eye,.stx-block-eye,.ankx-p-eye,.page-eye,.sold-eye,
  .ft-head,.ft-col .ft-head,.ft-regions-head,.hero-vk-eye,.hero-list-eye{font-size:12px}
  .fzx-note,.tphoto-tag,.ankx-st-tag,.revx-cap-src,.uspx-tag,.bb-soon,
  .brand-live-pill,.svcx-index,.svcx-tag,.stx-lab,.svk-tag,.form-sub,
  .step-lbl,.prog-label,.ank-card-time,.map-ov-n,.map-ov-a,.vc-cta,.ft-status,
  .fci-l{font-size:12px}
  .btn-g,.btn-d,.fcta-prime,.fcta-ghost,.cta-trust-item,.team-cta,
  .leist-cta-new,.btn-next,.btn-prev,.btn-mail,.btn-wapp,.fb2,
  .vgc-btn,.hero-list-btns .bd,.hero-list-btns .bg2,.wunsch-row .bd,
  .wunsch-row .bg2{font-size:12px}
  .vgc-price small{font-size:12px}
  /* Seiten-Spezifika der zweiten Messrunde (uber-uns, auto-verkaufen-lassen,
     finanzierung, faq) + die 0-2-0-Varianten, die die Klassenliste oben
     per Spezifitaet schlagen wuerden. */
  .utc-tag,.utc-skill,.story-img-tag,.wa-key,.svc-tag,.komm-card-tag,
  .bsp-eye,.komm-fit-head,.feat-num,.faq-meta{font-size:12px}
  .story-txt .page-eye,.page-cta-band .page-eye,.steps-vk-head .page-eye,
  .vk-wrap-left .page-eye,.faq-head .page-eye,.ank-band-head .page-eye,
  .komm-table .row-label,.komm-table td.row-label{font-size:12px}
  /* Local-SEO-Template (autoankauf-*, gebrauchtwagen-neumarkt) und Blog */
  .dc-head,.dc-l,.dc-s,.rating-link,.blog-card-meta,.blog-card-meta .read,
  .blog-card-foot{font-size:12px}
  .cookie-banner .cookie-btn,.cookie-modal .cookie-btn{font-size:12px}
  .map-ph{font-size:12px}
  .scroll-top{width:44px;height:44px}
  /* Social-Links im Brand-Band waren 21px hoch */
  .bb-soc a{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px}
  /* ---- Renés Handy-Review 14.08. nachts: "weniger ist mehr" ---- */
  /* Eyebrow-Zusätze, die auf 390px in die nächste Zeile rutschen würden
     ("alles, was unnötig umbricht, macht es unclean") */
  .eye-x{display:none}
  /* Katalog-Karten: Highlights-Zeile weg — "da würde ich darauf beruhen,
     dass wir die Highlights weglassen" */
  .vgc-hl{display:none}
  /* Hamburger-Menü: "richtig clean, aber Agency-Vibes statt Autohaus" —
     Nummern-Index und Chevrons raus, Typo eine Stufe ruhiger */
  .mm-link .mm-i,.mm-link .mm-c{display:none}
  .mm-link .mm-t{font-size:clamp(21px,5.8vw,25px);font-weight:600}
  .mm-link{padding:19px 2px;gap:0}
  /* ---- REVEAL-KILL MOBIL (14.08. tief nachts) ----
     Renés Home-Hero war "komplett gefickt": kein Schriftzug, nur Bild.
     Ursache: die .sr/.reveal-Einblendungen halten Inhalt auf opacity:0,
     bis ein IntersectionObserver feuert - und der feuert auf seinem Geraet
     (und in der Automatisierung) nicht zuverlaessig. Ein Effekt, der
     Inhalt verschwinden lassen kann, hat auf dem Handy nichts verloren.
     !important, weil die Seiten-Stylesheets teils NACH dieser Datei laden.
     Desktop behaelt die Animationen. */
  .sr,.sr-left,.sr-right,.sr-scale,[data-reveal],.reveal,.mm-anim{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   SEITENWECHSEL (Rene 02.10.2026: "Keine Animation beim Seite oeffnen oder
   Ladevorgang oder Seite zurueck"). Weiche Ueberblendung zwischen zwei Seiten,
   auch bei "Zurueck". Reines CSS (View Transitions) - Browser ohne
   Unterstuetzung (Firefox) wechseln hart wie bisher. Der Inhalt ist dabei nie
   versteckt: faellt der Effekt aus, steht die Seite einfach da (Lehre aus dem
   Reveal-Kill mobil, 14.08.).
   Die alte Seite geht schneller, als die neue kommt.
   ============================================================ */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.16s;animation-timing-function:ease-out}
::view-transition-new(root){animation-duration:.34s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
/* Das Autobild waechst aus der Karte in die Fahrzeugseite (Renes Wahl: B). Die Karte
   bekommt den Namen beim Klick (v2-shared.js), die Fahrzeugseite nur, wenn sie
   aus so einem Klick kommt (html.morph, gesetzt im <head> der Detailseite). */
html.morph .hg-main{view-transition-name:fz-bild}
::view-transition-group(fz-bild){animation-duration:.46s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
/* Karte ist 3:2, der Kasten der Fahrzeugseite breiter - ohne cover wuerde das
   Bild unterwegs gestaucht. */
::view-transition-old(fz-bild),::view-transition-new(fz-bild){width:100%;height:100%;object-fit:cover;overflow:clip}
@media (prefers-reduced-motion:reduce){
  /* weniger Bewegung: nur ein kurzes Ueberblenden, kein wanderndes Bild */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
  html.morph .hg-main{view-transition-name:none}
}