{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "karte-ganzflaechig-klickbar",
 "name": "Ganze Karte klickbar",
 "name_en": "Block link card with hover choreography",
 "kurz": "Fachbeiträge eines Pumpenbauers: die ganze Karte ist ein einziger Link, Datenblatt und Rubrik bleiben eigene Ziele, Bild, Code-Etikett, Unterstreichung, Pfeil und Eckmarken antworten gestaffelt.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "klar",
  "aufgeräumt"
 ],
 "technik": [
  "css",
  "has",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Karte (Beitrag, Leistung, Projekt, Stelle) ist auf ganzer Fläche klickbar, enthält aber nur einen Link: den Titel. Sein Pseudo-Element ::after spannt sich über die Karte. Zweitlinks wie „Datenblatt“ oder eine Rubrik liegen mit position: relative und z-index darüber und bleiben einzeln klickbar. Hover und Fokus spielen dieselbe Choreografie: Bild, Titel-Unterstreichung und Pfeil reagieren gestaffelt, der Fokusring liegt um die ganze Karte. Zeigt der Zeiger auf einen Zweitlink, ruht die Karte.",
  "warum_es_wirkt": "Besucher klicken auf das Bild oder irgendwo in die Karte, nicht nur auf den Titel. Eine ganze Karte als Ziel ist nach Fitts schneller zu treffen. Ein einzelner Link hält die Linkliste für Screenreader kurz und lesbar, statt Bild, Titel, Text und Datum als einen langen Linktext vorzulesen. Die gestaffelte Reaktion von Bild, Titel und Pfeil sagt „das ist ein Ziel“, ohne dass die Karte wackelt.",
  "wann_einsetzen": "Beitragslisten, Leistungen, Referenzen, Stellen, Veranstaltungen, Produkte. Fast jedes Rezept braucht es; Pflicht für News, Leistungen, Projekte und Stellen.",
  "wann_nicht": "Wenn die Karte mehrere gleichwertige Ziele hat (zwei Hauptlinks): dann zwei sichtbare Links ohne Überzug. Keine Knöpfe, Formulare oder Auswahl in einer Überzug-Karte, wenn kein Abstand zu ihnen bleibt (Fehltipps). Nicht den ganzen Karteninhalt in <a> packen.",
  "varianten": [
   "Raster mit Überzug: ::after des Titel-Links über die Karte, Zweitlinks per z-index darüber, reines CSS",
   "Liste mit Klick-Weiterleitung: kein Überzug, Klick auf die Zeile löst den Titel-Link aus, Text bleibt markierbar, Strg/Cmd und Mittelklick öffnen einen neuen Tab"
  ],
  "umsetzung": "Karte als <article> mit position: relative. Darin <h3><a class=\"haupt\" href>Titel</a></h3>; .haupt::after { content: ''; position: absolute; inset: 0; z-index: 1 }. Zweitlinks bekommen position: relative; z-index: 2 und mindestens 8 px Abstand zu anderen Zielen. Bild mit leerem alt, wenn der Titel es benennt; Datum als <time>. Choreografie über :is(:hover, :focus-within) bzw. :has(.haupt:hover, .haupt:focus-visible) an der Karte, Zweitlinks heben sie über :has(.neben:hover) wieder auf. Fokusring nicht am Titel, sondern als outline der Karte über :has(.haupt:focus-visible). Klick-Variante: kein Überzug, ein Listener auf der Karte ruft haupt.click() auf, außer bei markiertem Text, Klick auf einen anderen Link oder Knopf, Mittelklick und Strg/Cmd (dann window.open). Auf Touch zeigt :active denselben Zustand kurz an.",
  "mobil": "Eine Spalte, die ganze Karte ist ein Tippziel. Pfeil und Unterstreichung stehen auf Touch dauerhaft da; beim Tippen zeigt :active den Hover-Zustand kurz. Zweitlinks mindestens 44 px hoch und mit Abstand zum Kartenrand.",
  "reduzierte_bewegung": "Keine Wege: Bild, Pfeil und Eckmarken bewegen sich nicht. Unterstreichung und Farbwechsel erscheinen sofort.",
  "barrierefreiheit": "Ein Link je Karte mit kurzem Namen (Titel). Fokusring um die ganze Karte, mindestens 2 px und 3 : 1. Zweitlinks bleiben einzeln erreichbar und haben eigenen Fokus. Bild alt=\"\", wenn es nur schmückt. In der Überzug-Variante ist Text nicht markierbar; wenn das wichtig ist, Klick-Variante nehmen."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt",
  "dauer_ms": "200 Pfeil und Unterstreichung, 350 Bild, Austritt 70 %",
  "stagger_ms": "40",
  "distanz": "Pfeil 8 px, Bild 12 px senkrecht, Eckmarken 4 px",
  "sonstiges": "Keine Skalierung über 1.0, nur x- oder y-Wege (Rezept industrie)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept industrie-b2b-mittelstand (token-swiss-knackig)"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Heydon Pickering: Inclusive Components, Cards",
   "url": "https://inclusive-components.design/cards/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (Artikel vom 04.06.2018): Der Titel-Link bekommt ein ::after mit position: absolute und inset 0 auf der Karte (position: relative). Ein Zweitlink danach braucht nur position: relative, weil er im Quelltext später kommt. Fokus über :focus-within auf der Karte, nicht in derselben Regel wie :hover. Als Alternative ein „redundantes“ Klick-Ereignis, damit Text markierbar bleibt.",
   "art": "artikel"
  },
  {
   "seite": "Kitty Giraudel: Accessible cards",
   "url": "https://kittygiraudel.com/2022/04/02/accessible-cards/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (02.04.2022, bearbeitet 24.04.2026): Nur die Hauptinformation verlinken, ein Pseudo-Element über die Karte legen, Zweitelemente mit position: relative und höherem z-index. Hinweis von Adrian Roselli: Abstand um Zweitknöpfe gegen Fehltipps.",
   "art": "artikel"
  },
  {
   "seite": "Adrian Roselli: Block Links, Cards, Clickable Regions, Etc.",
   "url": "https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html",
   "auszeichnung": "",
   "beobachtung": "Suchtreffer 04.11.2026, nicht geöffnet.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Inclusive Components: Cards",
   "url": "https://inclusive-components.design/cards/"
  },
  {
   "titel": "Kitty Giraudel: Accessible cards",
   "url": "https://kittygiraudel.com/2022/04/02/accessible-cards/"
  },
  {
   "titel": "MDN: :has()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
  }
 ],
 "kombinierbar_mit": [
  "bild-zoom-in-maske",
  "unterstreichung-varianten",
  "pfeil-icon-button",
  "fokus-stil-system",
  "nachbarn-reagieren-hover",
  "graustufen-zu-farbe",
  "facettenfilter-ergebnisliste",
  "stellen-karriere"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/",
  "meta": "https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4 (04.11.2026): Karten-Muster im Bestand zeigen den Effekt, aber nicht den robusten Block-Link.",
   "Belege 04.11.2026: zwei Fachartikel geöffnet (Pickering, Giraudel). Website-Belege fehlen: die Technik ist im HTML nicht über WebFetch erkennbar, im Browser prüfen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Fachbeiträge eines Pumpenbauers: die ganze Karte ist ein einziger Link, Datenblatt und Rubrik bleiben eigene Ziele, Bild, Code-Etikett, Unterstreichung, Pfeil und Eckmarken antworten gestaffelt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt (token-swiss-knackig)",
   "dauer_ms": {
    "pfeil_unterstreichung_etikett_ecken": 200,
    "bild": 350,
    "austritt_klein": 140,
    "austritt_bild": 245
   },
   "stagger_ms": "40 (Titel 40, Pfeil 80 nach dem Bild)",
   "distanz": "Bild translateY −12 px im Rahmen (Bild 12 px höher als der Rahmen), Pfeil tauscht um 28 px, Eckmarken 4 px nach außen, keine Skalierung",
   "ueberzug": ".haupt::after { position: absolute; inset: 0; z-index: 1 }, Zweitlinks position: relative; z-index: 2, mindestens 44 px bzw. 32 px hoch",
   "aktiv_selektor": ".karte:is(:hover:not(:has(.neben:hover)), :has(.haupt:focus-visible))",
   "fokus": "outline 2px #0E518D, offset 5px um die ganze Karte über :has(.haupt:focus-visible); am Titel selbst kein Ring",
   "klick_variante": "Listener auf der Zeile: kein Auslösen bei Klick auf a/button, bei markiertem Text in der Zeile, Strg/Cmd/Umschalt und Mittelklick öffnen einen neuen Tab",
   "farben": "Grund #F3F3F0, Karte #FBFBF9, Text #111417, leise #4E555B, Raster rgba(17,20,23,.13), Signal Verkehrsblau #0E518D, Stahlblau #16202A",
   "schrift": "Strichpunkt Sans 600 (wdth 110) für h1, Archivo für Titel und Text, Codes Archivo 600 wdth 75 versal +0.08em"
  },
  "ausloeser": "hover",
  "touch": "Pfeil steht dauerhaft gefüllt da; beim Tippen zeigt :active Bildversatz und Unterstreichung. Zweitlinks mindestens 44 px hoch, eine Spalte unter 640 px.",
  "reduziert": "Bild, Eckmarken und Pfeil bewegen sich nicht; Farbe, Unterstreichung und Fokusring wechseln sofort.",
  "korrekturen": {
   "varianten": [
    "Raster mit Überzug: ::after des Titel-Links über die Karte, Zweitlinks per z-index darüber, reines CSS",
    "Liste mit Klick-Weiterleitung: kein Überzug, Klick auf die Zeile löst den Titel-Link aus, Text bleibt markierbar, Strg/Cmd und Mittelklick öffnen einen neuen Tab"
   ]
  },
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept industrie-b2b-mittelstand, erfundener Pumpenhersteller Wellbrock Pumpenbau in Plettenberg, Rubrik „Anwendungen und Fachbeiträge“ auf dem sichtbaren Konstruktionsraster. Bilder bild-hotspots-pumpe.webp, handwerk-heizraum-hoch.webp, handwerk-waermepumpe.webp. Pult: Variante (Raster mit Überzug, Liste mit Klick) und „Klickflächen zeigen“ (schraffiert der eine Link, orange die Zweitlinks). Eine Rückmeldung unten rechts sagt, welches Ziel ein Klick getroffen hat. Vorführung: Zeiger über Karte 1, weiter auf ihr Datenblatt (Karte ruht), Klick auf Karte 2, Tastaturfokus auf Karte 3, Klickflächen; in der Liste zusätzlich markierter Text, der nichts öffnet. Abgrenzung: bild-zoom-in-maske, karten-spotlight-glow und kippen-3d-karten zeigen den Effekt, dieses Muster den robusten Block-Link. Selbsturteil 4.",
  "varianten": [
   {
    "id": "raster",
    "name": "Raster: Überzug-Karte",
    "wann": "Beitrags-, Leistungs-, Projekt- und Stellenkarten mit Bild und höchstens zwei Zweitlinks (fast alle Rezepte).",
    "werte": {
     "raster": "3 Spalten, unter 1000 px 2, unter 640 px 1",
     "bild": "3:2",
     "technik": "::after-Überzug, reines CSS"
    }
   },
   {
    "id": "liste",
    "name": "Liste: Klick-Weiterleitung",
    "wann": "Textlastige Listen wie News, Fachbeiträge, Downloads oder Termine, in denen Besucher Text kopieren (industrie, kanzlei, kultur, verein).",
    "werte": {
     "zeile": "Datum 7.5rem, Text, Seite 11rem, Pfeil 44 px",
     "hover": "Fläche #FBFBF9 wächst von links scaleX 0 → 1 in 350 ms",
     "technik": "JS-Klick auf die Zeile, Text markierbar"
    }
   }
  ]
 }
}