{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "highlight-marker-underline",
 "name": "Gezeichnete Markierung und Unterstreichung",
 "name_en": "Hand-drawn highlight / marker text reveal / animated underline",
 "kurz": "Ein Kernbegriff bekommt eine Markierung, die sich vor den Augen zeichnet: Textmarker, Kreis oder ein zufälliger Handstrich.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "editorial",
  "menschlich",
  "freundlich"
 ],
 "technik": [
  "css",
  "svg",
  "gsap",
  "scroll-driven-css"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Schlüsselwort im Satz bekommt eine Markierung, die sich sichtbar zeichnet. Möglich sind eine Textmarker-Fläche (background mit linear-gradient, background-size 0 → 100 %), eine handgezeichnete SVG-Linie oder ein Kreis (stroke-dashoffset). Die Markierung erscheint beim Eintritt in den Viewport oder bei Hover und läuft von links nach rechts. Auf den geprüften Seiten sind Unterstreichung und SVG-Linie bei Hover belegt; der flächige Textmarker beim Scrollen stammt aus Osmo-Ressourcen.",
  "warum_es_wirkt": "Das Auge springt auf das eine markierte Wort. Weil die Markierung sich zeichnet, wirkt sie wie von Hand gesetzt: menschlich, redaktionell, wie eine Notiz oder Korrektur am Rand.",
  "wann_einsetzen": "Kernbegriffe in Headlines und Teasern, ein Satz in einem Testimonial, Links im Fließtext (dezente Unterstreichung bei Hover). Passt zu Kursen, Coaching, Redaktionen und freundlichen Marken.",
  "wann_nicht": "Mehr als eine Markierung pro Abschnitt, dann verliert sie ihre Wirkung. Sehr formale Marken, Recht, Finanzen. Ganze Absätze markieren.",
  "varianten": [
   "Textmarker-Fläche, die sich beim Scrollen über das Wort legt; mehrzeilig Zeile für Zeile (Osmo „Highlight Marker Text Reveal“)",
   "Zufällige handgezeichnete Unterstreichung bei Hover, jedes Mal ein anderer Strich (Osmo „Draw Random Underline“)",
   "Eingekreistes Wort als SVG-Linie, die sich bei Hover zeichnet und verzögert wieder ausläuft (Resend)",
   "Feine Linie unter Links, die bei Hover von links einläuft und nach rechts ausläuft (Attio, Fantasy)"
  ],
  "umsetzung": "Textmarker: .mark { background: linear-gradient(var(--hl), var(--hl)) 0 88% / 0% 60% no-repeat; box-decoration-break: clone; transition: background-size 750ms cubic-bezier(.66,.06,.36,.96) } .is-in .mark { background-size: 100% 60% }. Für Zeile-für-Zeile jede Zeile in ein eigenes span legen und um 200 ms versetzen. SVG-Linie: stroke-dasharray und stroke-dashoffset auf die Pfadlänge, dann offset → 0 in 360 ms; Rücklauf 240 ms nach 360 ms Verzögerung (Resend). Mit preserveAspectRatio=\"none\" und vector-effect: non-scaling-stroke rechnet pathLength=\"1\" falsch, die Länge dann per Skript in Bildschirm-Pixeln messen. Link-Linie wie bei Attio: background-size 0% .06em → 100% .06em an Position 0 91 %, Hover 300 ms, Rücklauf 400 ms; -webkit-text-stroke .1em in der Grundfarbe mit paint-order: stroke fill spart Unterlängen aus. Die Markierungsfarbe muss den Textkontrast halten.",
  "mobil": "Unverändert. Hover-Varianten spielen einmal, wenn das Element ins Bild kommt; Tippen kann sie neu zeichnen.",
  "reduzierte_bewegung": "Markierung sofort im Endzustand zeigen, ohne Zeichnen.",
  "barrierefreiheit": "Trägt die Markierung Bedeutung, das Wort semantisch mit <mark> oder <strong> auszeichnen. SVG-Linien mit aria-hidden=\"true\" ausblenden. Textkontrast auf der Markerfarbe prüfen (dunkle Schrift auf Gelb)."
 },
 "messwerte": {
  "easing": "cubic-bezier(.66,.06,.36,.96) (Resend-SVG); ease-in-out-cubic (Attio); cubic-bezier(.19,1,.22,1) (Fantasy)",
  "dauer_ms": "360 ein / 240 aus (Resend); 300 ein / 400 aus (Attio); 750 + 200 Versatz (Fantasy)",
  "stagger_ms": "",
  "distanz": "Linie .06em (Attio); SVG stroke-dasharray 338 (Resend)",
  "sonstiges": "Attio: text-stroke .1em gegen Unterlängen-Kollision",
  "herkunft": "beobachtet",
  "quelle": "https://attio.com/ ; https://resend.com/ ; https://fantasy.co/"
 },
 "kurve": {
  "bezier": [
   0.66,
   0.06,
   0.36,
   0.96
  ],
  "css": "cubic-bezier(0.66, 0.06, 0.36, 0.96)",
  "name": "eigene Kurve",
  "dauer_ms": 360
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Highlight Marker Text Reveal / Draw Random Underline",
   "url": "https://www.osmo.supply/resource/highlight-marker-text-reveal",
   "auszeichnung": "",
   "beobachtung": "Zwei Ressourcen zu diesem Muster gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Attio",
   "url": "https://attio.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle 19qdxsiub17as.css): .attio-group-hover-underline zeichnet die Unterstreichung per background-image linear-gradient(currentColor), background-position 0 91 %, background-size 0% .06em → 100% .06em bei Gruppen-Hover; Hover .3s, Rücklauf .4s, :active 50 ms, Easing var(--ease-in-out-cubic); -webkit-text-stroke .1em + paint-order:stroke fill + mix-blend-mode multiply spart die Unterlängen aus.",
   "art": "website"
  },
  {
   "seite": "Resend",
   "url": "https://resend.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle 0ko_mj0v20gq0.css): .hoverword svg – gezeichnete SVG-Linie um ein Wort, stroke-dasharray 338 / stroke-dashoffset 338px → 0 bei :hover in .36s cubic-bezier(.66,.06,.36,.96); Rücklauf .24s mit .36s Verzögerung; stroke-width .4px, linecap round, Breite calc(100% + 20px).",
   "art": "website"
  },
  {
   "seite": "Fantasy",
   "url": "https://fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-CSS index.html): .uline-double mit ::before/::after – bei :hover läuft ::before mit scaleX(0) nach rechts aus (transform-origin right), ::after zeichnet von links ein (scaleX 1, transform-origin left) mit 0,2 s Verzögerung; je .75s cubic-bezier(.19,1,.22,1).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo – Highlight Marker Text Reveal",
   "url": "https://www.osmo.supply/resource/highlight-marker-text-reveal"
  },
  {
   "titel": "Osmo – Draw Random Underline",
   "url": "https://www.osmo.supply/resource/draw-random-underline"
  }
 ],
 "kombinierbar_mit": [
  "split-mask-reveal",
  "scroll-word-highlight"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Belegt sind die Unterstreichungs- und SVG-Zeichen-Varianten (Hover); eine flächige Textmarker-Reveal-Variante beim Scrollen wurde auf den geprüften Seiten nicht gefunden."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Kernbegriff bekommt eine Markierung, die sich vor den Augen zeichnet: Textmarker, Kreis oder ein zufälliger Handstrich.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.66, 0.06, 0.36, 0.96) für alles Gezeichnete (gemessen bei Resend)",
   "kreis_strich_ein_ms": 360,
   "kreis_strich_aus_ms": 240,
   "aus_verzoegerung_ms": 360,
   "svg_weg": "stroke-dasharray = stroke-dashoffset = gemessene Bildschirmlänge (px); ein: offset Länge → 0, aus: 0 → −Länge (läuft nach vorn aus)",
   "kreis_box": "left -.3em, top -.24em, width calc(100% + .6em), height calc(100% + .5em), viewBox 0 0 200 60, preserveAspectRatio none",
   "kreis_strichstaerke": "max(2.5px, .05em), vector-effect non-scaling-stroke, linecap round",
   "strich_box": "left -6px, bottom -.16em, width calc(100% + 12px), height .3em, viewBox 0 0 200 20",
   "strich_strichstaerke": "max(2.5px, .055em)",
   "strich_pfade": "4 Handstriche (Bogen, Welle, Doppelstrich, Schwung mit Haken), zufällig, nie zweimal derselbe hintereinander",
   "marker_dauer_ms": 750,
   "marker_zeilenversatz_ms": 200,
   "marker_flaeche_titel": "background-position 0 86%, background-size 0% 58% → 100% 58%",
   "marker_flaeche_zitat": "background-position 0 88%, background-size 0% 62% → 100% 62%, je Zeile ein eigenes span mit box-decoration-break: clone",
   "marker_ruecklauf": "background-position springt auf 100%, background-size → 0 in 240 ms nach 360 ms (läuft nach rechts aus)",
   "marker_farbe": "#f7c325, als Verlauf linear-gradient(176deg, #f9cf4a, #f7c325 45%, #f1b712); padding 0 .08–.1em, unregelmäßiger border-radius",
   "link_unterstreichung": "background linear-gradient(currentColor) 0 91% / 0% .06em → 100% .06em; ein 300 ms, aus 400 ms, :active 50 ms; -webkit-text-stroke .1em in Grundfarbe + paint-order: stroke fill (spart Unterlängen aus, nach Attio)",
   "modul_unterstreichung": "zufälliger Pfad, stroke-width 2.5px, bottom -.28em, height .4em, width calc(100% + 8px)",
   "vorfuehrung": "Textmarker → Kreis → Strich; je 2400 ms halten, 900 ms bis zur nächsten Art",
   "farben": "Grund #f2f4f6, Tinte #15171c, Rotstift #d2402a, Marker #f7c325, Erfolg #10bf7a"
  },
  "ausloeser": "hover",
  "touch": "Titel: Markierung zeichnet beim Laden, Tippen auf das Wort zeichnet neu. Modultitel im Lernweg zeichnen ihre Unterstreichung einmal, sobald sie ganz im Bild sind; die Links im Fragen-Absatz bekommen ihre Linie beim Eintritt. Zitat-Marker beim Scrollen wie am Desktop.",
  "reduziert": "Alle Markierungen stehen sofort im Endzustand, ohne Zeichnen und ohne Auslaufen. Der Umschalter wechselt nur die Art. Die Werte-Zeile meldet „Markierung sofort sichtbar“.",
  "korrekturen": {
   "beschreibung": "Ein Schlüsselwort im Satz bekommt eine Markierung, die sich sichtbar zeichnet. Möglich sind eine Textmarker-Fläche (background mit linear-gradient, background-size 0 → 100 %), eine handgezeichnete SVG-Linie oder ein Kreis (stroke-dashoffset). Die Markierung erscheint beim Eintritt in den Viewport oder bei Hover und läuft von links nach rechts. Auf den geprüften Seiten sind Unterstreichung und SVG-Linie bei Hover belegt; der flächige Textmarker beim Scrollen stammt aus Osmo-Ressourcen.",
   "warum_es_wirkt": "Das Auge springt auf das eine markierte Wort. Weil die Markierung sich zeichnet, wirkt sie wie von Hand gesetzt: menschlich, redaktionell, wie eine Notiz oder Korrektur am Rand.",
   "wann_einsetzen": "Kernbegriffe in Headlines und Teasern, ein Satz in einem Testimonial, Links im Fließtext (dezente Unterstreichung bei Hover). Passt zu Kursen, Coaching, Redaktionen und freundlichen Marken.",
   "wann_nicht": "Mehr als eine Markierung pro Abschnitt, dann verliert sie ihre Wirkung. Sehr formale Marken, Recht, Finanzen. Ganze Absätze markieren.",
   "varianten": [
    "Textmarker-Fläche, die sich beim Scrollen über das Wort legt; mehrzeilig Zeile für Zeile (Osmo „Highlight Marker Text Reveal“)",
    "Zufällige handgezeichnete Unterstreichung bei Hover, jedes Mal ein anderer Strich (Osmo „Draw Random Underline“)",
    "Eingekreistes Wort als SVG-Linie, die sich bei Hover zeichnet und verzögert wieder ausläuft (Resend)",
    "Feine Linie unter Links, die bei Hover von links einläuft und nach rechts ausläuft (Attio, Fantasy)"
   ],
   "umsetzung": "Textmarker: .mark { background: linear-gradient(var(--hl), var(--hl)) 0 88% / 0% 60% no-repeat; box-decoration-break: clone; transition: background-size 750ms cubic-bezier(.66,.06,.36,.96) } .is-in .mark { background-size: 100% 60% }. Für Zeile-für-Zeile jede Zeile in ein eigenes span legen und um 200 ms versetzen. SVG-Linie: stroke-dasharray und stroke-dashoffset auf die Pfadlänge, dann offset → 0 in 360 ms; Rücklauf 240 ms nach 360 ms Verzögerung (Resend). Mit preserveAspectRatio=\"none\" und vector-effect: non-scaling-stroke rechnet pathLength=\"1\" falsch, die Länge dann per Skript in Bildschirm-Pixeln messen. Link-Linie wie bei Attio: background-size 0% .06em → 100% .06em an Position 0 91 %, Hover 300 ms, Rücklauf 400 ms; -webkit-text-stroke .1em in der Grundfarbe mit paint-order: stroke fill spart Unterlängen aus. Die Markierungsfarbe muss den Textkontrast halten.",
   "mobil": "Unverändert. Hover-Varianten spielen einmal, wenn das Element ins Bild kommt; Tippen kann sie neu zeichnen.",
   "reduzierte_bewegung": "Markierung sofort im Endzustand zeigen, ohne Zeichnen.",
   "barrierefreiheit": "Trägt die Markierung Bedeutung, das Wort semantisch mit <mark> oder <strong> auszeichnen. SVG-Linien mit aria-hidden=\"true\" ausblenden. Textkontrast auf der Markerfarbe prüfen (dunkle Schrift auf Gelb)."
  },
  "geprueft": "01.11.2026",
  "notiz": "Kursseite der erfundenen Sprachschule Silbenhaus aus Augsburg: Deutsch B2 für Pflegekräfte (Rezept kurs-coaching-lernweg: Bricolage Grotesque, Onest, Shantell Sans; Rotstift als Markenton passt zur Korrektur-Anmutung). Im Titel lassen sich Textmarker, Kreis und zufälliger Strich auf „Übergabe“ umschalten, die Vorführung wechselt sie im Kreis. Weiter unten: zufällige Unterstreichung bei Hover im Lernweg, mehrzeiliger Textmarker beim Scrollen im Zitat, Attio-Linkunterstreichung mit Text-Kontur. Eigene Bildwelt: Arbeitsblatt, auf dem ein Übergabesatz gekürzt wird. Reines CSS/SVG/JS, Strichlänge per Skript gemessen. AD-Review 01.11.2026: Note 4 (Welt von Schreibschule auf Sprachschule für Pflegekräfte umgestellt, weil Schreibkurse im Rezept schon zweimal vorkommen). Zugang 02.11.2026: Neue Schrift-Töne --rot-text #c73d28 und --erfolg-text #0b8555 (gleiche Farbtöne, ≥ 4,6:1) für Rotstift- und Häkchen-Text; Striche, Kreise und Marker bleiben in --rot/--erfolg; Kontrastmodus-Rahmen für Knöpfe."
 }
}