/* ============================================================================
 * Footer: Block "Projektanfrage" (ganz oben im Footer). Markup: build/footer.js (einzige Quelle), Einblenden: footer.js.
 * Der restliche Footer (Spalten, Kontakt, Social, Copyright) nutzt wie frueher die Tailwind-Klassen und theme.css.
 * Farben: weisse Schrift auf Ink Blue, Hover in Champagner-Gold (--accent-light, wie die uebrigen Footer-Links).
 * Eingeblendet wird wie im Rest der Seite (Versatz 100 px, 2,2 s, gleiche Kurve), gestaffelt; bei reduzierter Bewegung sofort sichtbar.
 * ========================================================================== */

footer .ft-cta-block { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
footer .ft-headline {
    margin: 0;
    font-size: clamp(40px, 6.5vw, 100px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
    text-wrap: balance;
}
footer .ft-line { display: block; }

/* Linie (35 % der Containerbreite, mobil 100 %) und Link "Projektanfrage" mit duennem Pfeil */
footer .ft-cta { display: block; width: 35%; min-width: 18rem; margin-top: clamp(1.75rem, 3.5vw, 3rem); color: #fff; transition: color 0.3s ease; }
footer .ft-cta:hover, footer .ft-cta:focus-visible { color: var(--accent-light, #CDAE63); }
footer .ft-cta-line { position: relative; display: block; height: 1px; background: currentColor; }
footer .ft-cta-line::after { /* Goldlinie faehrt beim Hover von links ein (wie bei den Leistungen) */
    content: ""; position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%;
    background: var(--accent-light, #CDAE63);
    transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease;
}
footer .ft-cta:hover .ft-cta-line::after, footer .ft-cta:focus-visible .ft-cta-line::after { transform: scaleX(1); }
footer .ft-cta-row { display: flex; align-items: center; gap: 1.25rem; margin-top: clamp(0.9rem, 1.6vw, 1.4rem); }
footer .ft-cta-text { font-size: clamp(24px, 2.6vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
footer .ft-cta-arrow { flex: none; width: clamp(32px, 3vw, 44px); height: auto; transition: transform 0.35s ease; }
footer .ft-cta:hover .ft-cta-arrow, footer .ft-cta:focus-visible .ft-cta-arrow { transform: translateX(0.6rem); }

/* Trennlinie ueber die ganze Containerbreite (ca. 22 % Deckkraft), darunter beginnt der bisherige Footer */
footer .ft-rule { height: 0; margin: clamp(3rem, 7vh, 5.5rem) 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }

/* ---------- Einblenden beim Scrollen (footer.js setzt .ft-js und .is-in) ---------- */
footer .ft-cta-block.ft-js .ft-reveal {
    opacity: 0; transform: translateY(100px);
    transition: opacity 2.2s cubic-bezier(0.1, 1, 0.3, 1), transform 2.2s cubic-bezier(0.1, 1, 0.3, 1);
    will-change: transform, opacity;
}
footer .ft-cta-block.ft-js .ft-reveal.is-in { opacity: 1; transform: none; }
footer .ft-cta-block.ft-js .ft-reveal.ft-d1 { transition-delay: 0.2s; }
footer .ft-cta-block.ft-js .ft-reveal.ft-d2 { transition-delay: 0.4s; }

@media (max-width: 767px) {
    footer .ft-cta { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    footer .ft-cta-block.ft-js .ft-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    footer .ft-cta, footer .ft-cta-arrow, footer .ft-cta-line::after { transition: none !important; }
    footer .ft-cta:hover .ft-cta-arrow, footer .ft-cta:focus-visible .ft-cta-arrow { transform: none; }
}