/* ─── Rechts-Footer fuer eigenstaendige Landingpages ───────────────────────── Impressum und Datenschutz muessen von jeder oeffentlichen Seite aus erreichbar sein. Seiten mit eigenem Footer (marketer, nx*, index, playbooks ...) tragen die Links dort selbst; die Funnel-Seiten mit Inline-CSS (quiz/*, vsl/*, bootcamp, danke-Seiten) hatten gar keinen Footer und binden dieses Band ein. Erzwungen von scripts/check-legal-links.js. Werte aus dem bestehenden Haus-Footer (public/index.html .footer und .footer_link der Marketer-LP): dunkles Band --green-dark, Links in #ffffff7a mit Gewicht 500, Copy in #ffffff52, 0.75rem. Die Schriftfamilie wird bewusst geerbt, damit sich das Band in die jeweilige Seite einfuegt. */ .fs-legal-footer { background: #0f3531; color: #ffffff; padding: 2rem 1.25rem; font-size: 0.75rem; line-height: 1.5; /* Volle Breite auch dann, wenn der Elternteil ein Flex- oder Grid-Container ist: sonst landet das Band als schmales Item neben dem Seiteninhalt. box-sizing explizit, weil nicht jede Seite es global setzt. */ box-sizing: border-box; width: 100%; flex: 0 0 100%; grid-column: 1 / -1; } .fs-legal-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; width: 100%; max-width: 79rem; /* .container-xlarge der Marketer-LP */ margin: 0 auto; } .fs-legal-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; } .fs-legal-footer a { color: #ffffff7a; font-weight: 500; text-decoration: none; transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .fs-legal-footer a:hover, .fs-legal-footer a:focus-visible { color: #ffffff; } .fs-legal-footer-copy { color: #ffffff52; } /* Startseite (marketing-mentoring): die Sektion direkt ueber dem Footer ist .padding-section-medium._5-5 mit linear-gradient(#193f3b 19%, #00211d), endet an ihrer Unterkante also auf #00211d. Das Standardband in #0f3531 setzt dort sichtbar ab und wirkt angeklebt. Diese Variante nimmt den Endton des Verlaufs auf, damit die Naht verschwindet, und faellt flacher aus: 0.875rem statt 2rem Innenabstand, rund 46px statt 82px. */ .fs-legal-footer.is-seamless { background: #00211d; padding-top: 0.875rem; padding-bottom: 0.875rem; } /* Seiten, deren selbst ein zentrierender Flex-Container ist (vsl/index.html, vsl/danke.html), wuerden das Band sonst als zweites Flex-Item NEBEN den Inhalt setzen statt darunter. Beide setzen body{position:relative}, deshalb greift die absolute Positionierung gegen den body und die vertikale Zentrierung des Heros bleibt intakt. */ .fs-legal-footer.is-pinned { position: absolute; left: 0; right: 0; bottom: 0; } /* Seiten, die grundsaetzlich nicht scrollen koennen: 100dvh-Shells mit body{overflow:hidden} (quiz/index, quiz/mittelstand, vsl/danke) oder ein Wrapper, der selbst nicht scrollt (leadgen-masterclass-quiz-danke). Ein Band im normalen Fluss wird dort unter den Viewport geschoben und weggeclippt, die Links waeren nicht erreichbar. Deshalb viewport-fest und bewusst schlank: kein Hintergrund, keine Copy, und Klicks gehen durch das Band hindurch, damit es die Funnel-Bedienung nicht blockiert. */ .fs-legal-footer.is-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: none; padding: 0.625rem 1.25rem; pointer-events: none; } .fs-legal-footer.is-fixed a { pointer-events: auto; } .fs-legal-footer.is-fixed .fs-legal-footer-copy { display: none; } /* Auf hellen Seiten (--milk / weiss) waeren die weissen Links unsichtbar. */ .fs-legal-footer.is-fixed.on-light a { color: #0c161552; } .fs-legal-footer.is-fixed.on-light a:hover, .fs-legal-footer.is-fixed.on-light a:focus-visible { color: #0c1615; } @media (max-width: 479px) { .fs-legal-footer-inner { flex-direction: column; align-items: flex-start; } /* fixiert und mobil: einzeilig lassen, sonst waechst das Overlay */ .fs-legal-footer.is-fixed .fs-legal-footer-inner { flex-direction: row; align-items: center; } } @media print { .fs-legal-footer { background: #fff; color: #000; padding: 1rem 0; } .fs-legal-footer a, .fs-legal-footer-copy { color: #000; } }