{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "anker-landung-markieren", "name": "Anker-Landung markieren", "name_en": "Anchor landing: highlight and focus the jump target", "kurz": "Sprung aus Inhaltsverzeichnis, FAQ-Link oder „Termin anfragen“ landet unter dem festen Kopf, eine Petrol-Linie läuft am Ziel herunter, die Fläche glimmt kurz apricot, der Fokus sitzt danach auf der Überschrift.", "kategorie": "Mikroanimationen", "kategorie_slug": "mikroanimationen", "kategorie_nr": 9, "bau_chat": "C4", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "ruhig", "präzise", "warm" ], "stimmung_roh": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "vanilla-js", "details-summary", "history-api" ], "technik_gruppen": [ "css", "js" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Wer auf einen Sprunglink tippt (Inhaltsverzeichnis, geteilter FAQ-Link, „Zur Anfrage“), landet genau unter dem festen Kopf, und das Ziel zeigt sich kurz: eine Markenlinie läuft am Rand herunter, die Fläche ist einen Moment getönt und klingt dann ab. Der Tastaturfokus liegt danach auf dem Ziel, ohne zweiten Scroll-Sprung. Ein geteilter Link auf eine Frage öffnet die Antwort gleich mit.", "warum_es_wirkt": "Nach einem Sprung fehlt die Orientierung: Die Seite steht plötzlich woanders, und gerade auf dem Telefon sieht man nicht, welcher Absatz gemeint ist. Die kurze Markierung beantwortet „hier bist du“, der Fokus sorgt dafür, dass die nächste Tab-Taste dort weitergeht und Screenreader das Ziel vorlesen. Ohne scroll-margin verschwindet die Überschrift unter dem festen Kopf.", "wann_einsetzen": "Lange Seiten mit Inhaltsverzeichnis (Leistungsseite, Ratgeber, Rechtstexte), FAQ mit Direktlinks, „Zur Anfrage“- oder „Termin“-Knöpfe, die auf ein Formular weiter unten springen. Praxis, Kanzlei, Handwerk, Apotheke.", "wann_nicht": "Nicht für Navigation zwischen Seiten und nicht für Scrollspy-Leisten, die den aktiven Abschnitt laufend zeigen (dafür scrollspy-kapitelnavigation). Keine Dauer-Markierung: nach rund 2 Sekunden muss sie weg sein, sonst sieht es nach Fehler aus.", "varianten": [ "Inhaltsverzeichnis: Abschnitt bekommt Randlinie und kurze Tönung, Fokus auf die Überschrift", "FAQ-Direktlink: Frage per Hash öffnen (details open), Frage markieren, Link der Frage kopierbar", "Zur Anfrage: Formular wird markiert, Fokus auf die Überschrift des Formulars statt aufs erste Feld" ], "umsetzung": "1. scroll-margin-top auf alle möglichen Ziele: :target, [id] und [tabindex=\"-1\"] mit calc(Kopfhöhe + Luft). Die Kopfhöhe misst ein ResizeObserver und schreibt sie als --kopf an :root. 2. Ziele bekommen tabindex=\"-1\", damit sie fokussierbar sind, ohne in der Tab-Reihenfolge zu stehen. 3. Ein Klick-Handler für a[href^=\"#\"] lässt den Browser springen (scroll-behavior: smooth nur ohne reduzierte Bewegung) und ruft danach ziel.focus({ preventScroll: true }). Damit gibt es keinen zweiten Sprung. Beim Laden mit Hash und bei hashchange passiert dasselbe. 4. Die Markierung hängt an :target und an einer Klasse .gelandet, die per JS neu gesetzt wird (Klasse entfernen, ein Frame warten, wieder setzen). So spielt sie auch beim zweiten Klick auf denselben Link. 5. Animation: Randlinie per transform: scaleY(0 → 1), Tönung per background-color, beide klingen nach 1400 ms ab. :focus-visible am Ziel bleibt als Rahmen sichtbar, solange der Fokus dort ist. 6. FAQ: Ist das Ziel ein
oder liegt darin, wird es vor dem Fokus geöffnet. 7. Formular: Fokus auf die Formular-Überschrift (h2 tabindex=-1), nicht auf das erste Feld, damit Telefon-Tastaturen nicht aufspringen.", "mobil": "Gleiches Verhalten. Der feste Kopf ist auf dem Telefon oft niedriger, deshalb misst ein ResizeObserver die echte Höhe. Inhaltsverzeichnis als aufklappbares details oben; nach dem Sprung klappt es zu.", "reduzierte_bewegung": "Kein Gleiten beim Sprung (scroll-behavior: auto). Die Randlinie steht sofort, die Tönung blendet ohne Bewegung aus.", "barrierefreiheit": "Ziele mit tabindex=\"-1\" und sichtbarem Fokusrahmen; der Fokus landet auf der Überschrift, damit Screenreader sie vorlesen. Die Markierung ist nur Zusatz: kein Text wird angesagt. scroll-margin sorgt dafür, dass der Fokus nicht unter dem festen Kopf liegt (WCAG 2.4.11). :root:has(:focus-visible) setzt scroll-behavior auf auto, damit Tab-Fokus nicht aus dem Bild gleitet." }, "messwerte": { "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (Rezept praxis-gesundheit-ruhig, token-tech-praezise)", "dauer_ms": "Linie 400 rein, Tönung hält 900 und klingt in 500 ab, gesamt 1400; Smooth-Scroll vom Browser", "stagger_ms": "", "distanz": "scroll-margin-top = Kopfhöhe + 24 px; Linie 3 px", "sonstiges": "Fokus mit preventScroll: true nach dem Sprung", "herkunft": "eigene Festlegung", "quelle": "Rezept praxis-gesundheit-ruhig" }, "kurve": { "bezier": [ 0.0, 0.0, 0.38, 0.9 ], "css": "cubic-bezier(0, 0, 0.38, 0.9)", "name": "eigene Kurve", "dauer_ms": 400 }, "gesehen_bei": [ { "seite": "Bram.us: Prevent content from being hidden underneath a fixed header by using scroll-margin-top", "url": "https://www.bram.us/?p=22784", "auszeichnung": "", "beobachtung": "Abgerufen 05.11.2026 (Artikel 01.03.2020, aktualisiert 22.01.2021): scroll-margin-top auf dem Ziel oder global per :target, damit das Sprungziel nicht unter dem festen Kopf liegt.", "art": "artikel" }, { "seite": "W3C: WCAG 2.2, 2.4.11 Focus Not Obscured (Minimum)", "url": "https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum", "auszeichnung": "", "beobachtung": "Erfolgskriterium aus WCAG 2.2: Ein fokussiertes Element darf nicht ganz von Inhalten des Autors (etwa einem festen Kopf) verdeckt sein. Aus dem Wissensstand übernommen, in dieser Runde nicht neu abgerufen.", "art": "artikel" } ], "tutorials": [ { "titel": "MDN: scroll-margin-top", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top" }, { "titel": "MDN: :target", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:target" }, { "titel": "MDN: HTMLElement.focus() mit preventScroll", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus" } ], "kombinierbar_mit": [ "sprunglinks-landmarken", "scrollspy-kapitelnavigation", "akkordeon-hoehe-auto", "faq-seite-suche", "leistungsseite-antwort-zuerst", "rechtstext-layout", "kontakt-anfrage-formular", "kopieren-feedback", "hide-on-scroll-header" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/anker-landung-markieren/", "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/anker-landung-markieren/meta.json", "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/anker-landung-markieren/demo" }, "herkunft": { "quelldateien": [ "Recherche Runde 4, 04.11.2026" ], "pruefnotizen": [ "Recherche Runde 4: 37 Treffer für scroll-margin im Fundus, aber kein Muster für die Markierung nach dem Sprung samt Fokus. Kein Award-Beleg.", "Abgrenzung: sprunglinks-landmarken (Sprunglinks zum Hauptinhalt), artikel-seite (Inhaltsverzeichnis mit Unterstreichung), scrollspy-kapitelnavigation (laufende Anzeige). Dieses Muster ist der wiederverwendbare Baustein für jede Landung.", "Werte eigene Festlegung aus dem Rezept praxis-gesundheit-ruhig." ] }, "bau": { "status": "fertig", "kurz": "Sprung aus Inhaltsverzeichnis, FAQ-Link oder „Termin anfragen“ landet unter dem festen Kopf, eine Petrol-Linie läuft am Ziel herunter, die Fläche glimmt kurz apricot, der Fokus sitzt danach auf der Überschrift.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "cubic-bezier(0, 0, 0.38, 0.9) für die Linie (token-tech-praezise, ein); Tönung linear", "linie": "3 px #005450, scaleY 0 → 1 in 400 ms, transform-origin top; :target hält sie, solange der Hash steht", "toenung": "rgba(255, 199, 118, .42), 1400 ms linear: 0 → 1 bis 14 %, hält bis 64 %, aus bis 100 %", "formular": "statt Fläche Ring box-shadow 0 0 0 8px in derselben Tönung, gleicher Ablauf", "scroll_margin": "calc(var(--kopf) + 24px) auf :target, .ziel und [id][tabindex=-1]; --kopf misst ein ResizeObserver am festen Kopf", "fokus": "focus({ preventScroll: true }) auf h2 (tabindex=-1) bzw. summary der FAQ-Frage, Formular: Überschrift statt erstes Feld", "neu_abspielen": "Klasse .gelandet entfernen, offsetWidth lesen, wieder setzen; gleicher Hash ohne hashchange → eigener Klick-Handler", "scroll": "Browser-Sprung mit scroll-behavior: smooth, reduziert und bei :focus-visible auto", "telefon": "Inhaltsverzeichnis als details, klappt VOR dem Sprung zu (sonst rutscht das Ziel unter den Kopf)", "schrift": "Hedvig Letters Serif 400 h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem), Google Sans Flex ROND 40, Geist Mono 11 px Labels", "farben": "#F5F7F7 Grund, #005450 Marke, #363B3B Text, #566262 leise, #FFC776 Apricot nur für die Landung" }, "ausloeser": "klick", "touch": "Gleiches Verhalten; Inhaltsverzeichnis ist auf dem Telefon ein aufklappbares details und schließt sich vor dem Sprung. Knopf im Kopf heißt dort nur „Termin“. Trefferflächen 44 px.", "reduziert": "Kein Gleiten beim Sprung, die Linie steht sofort, die Tönung blendet nur aus (gleiche 1400 ms, ohne Bewegung).", "korrekturen": {}, "geprueft": "05.11.2026", "notiz": "Welt: Rezept praxis-gesundheit-ruhig, erfundene Physiotherapie Weidenkamp in Ravensburg. Hedvig Letters Serif und Google Sans Flex, Petrol #005450, Apricot #FFC776 nur als Landungs-Tönung. Varianten: Inhaltsverzeichnis einer Leistungsseite, FAQ mit Direktlink je Frage (Hash öffnet details, Link kopierbar), „Zur Anfrage“ mit Ring ums Formular. Vorführung: tippt nacheinander zwei bis drei Links und zeigt die Landung. Abgrenzung: sprunglinks-landmarken (Sprung zum Hauptinhalt), scrollspy-kapitelnavigation (laufende Anzeige). Selbsturteil 4.", "varianten": [ { "id": "inhalt", "name": "Inhaltsverzeichnis", "wann": "Lange Leistungs-, Ratgeber- oder Rechtsseiten mit Inhaltsverzeichnis oben oder als Seitenleiste (Praxis, Kanzlei, Handwerk).", "werte": { "ziel": "section mit h2 tabindex=-1", "markierung": "Linie + Tönung" } }, { "id": "faq", "name": "FAQ-Direktlink", "wann": "FAQ-Seiten, deren Fragen per Link geteilt werden (Praxis, Apotheke, Kurs): Hash öffnet die Antwort.", "werte": { "ziel": "details name=faq, Fokus auf summary", "extra": "Link je Frage kopieren mit Toast 2200 ms" } }, { "id": "anfrage", "name": "Zur Anfrage", "wann": "Knöpfe „Termin anfragen“ oder „Zur Anfrage“, die auf ein Formular weiter unten springen.", "werte": { "ziel": "Formular-Überschrift h2 tabindex=-1", "markierung": "Linie + Ring 8 px um die Formularkarte statt Fläche" } } ] } }