/* ============================================================ Feste Kopfzeile: Logo links, "Jetzt unterstützen" rechts (Button wie in Variante A · Marek). Bleibt beim Scrollen oben stehen; der Text läuft darunter durch. Einbinden:

direkt im , danach die erste Fläche mit class="lila unter-kopf". ============================================================ */ :root { --kopf-hoehe: 92px; } .kopf--fest { position: sticky; top: 0; z-index: 50; padding: 20px 0; background: rgba(233, 237, 254, .95); /* nur falls kein JS läuft */ } /* Mit JS: kein eigener Hintergrund. js/kopf.js legt in .kopf-grund eine genaue Kopie der Flächen darunter (Verlauf, Farbnebel, Weiß) und schiebt sie beim Scrollen mit – die Zeile wirkt durchsichtig, der Text läuft unsichtbar darunter. */ .kopf--fest.hat-grund { background: none; } .kopf-grund { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .kopf-grund > div { position: absolute; left: 0; top: 0; margin: 0; padding: 0; } .kopf-grund > .weiss { background: #fff; } .kopf--fest > .wrap { position: relative; z-index: 1; } .kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .kopf--fest .marke { display: block; width: 220px; } .kopf--fest .marke img { display: block; width: 100%; height: auto; } /* erste Fläche rutscht unter den Kopf, damit der Verlauf bis ganz oben reicht */ .unter-kopf { margin-top: calc(-1 * var(--kopf-hoehe)); padding-top: calc(var(--kopf-hoehe) + 40px); } /* Button voll im DI-Verlauf (wie "Jetzt Freund:in werden"), gleiche Höhe wie das Logo */ .kopf-cta { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 14px; font-family: var(--font-head); font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; color: #fff; background: var(--grad); text-decoration: none; white-space: nowrap; transition: opacity .15s ease, transform .15s ease; } .kopf-cta:hover { color: #fff; opacity: .92; transform: translateY(-1px); } /* Sprungziel unter dem festen Kopf nicht verdecken */ .spenden { scroll-margin-top: 44px; /* Kopf + Luft − Abstand oben in .spenden */ } .hero + .spenden { scroll-margin-top: calc(var(--kopf-hoehe) + 40px); } /* Maske direkt nach dem Intro (kein eigener Abstand oben) */ @media (max-width: 720px) { :root { --kopf-hoehe: 72px; } .kopf--fest { padding: 16px 0; } .kopf--fest .marke { width: 168px; } .unter-kopf { padding-top: calc(var(--kopf-hoehe) + 28px); } .kopf-zeile { gap: 12px; } .kopf-cta { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; } }