{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "vergleichstabelle-sticky",
 "name": "Vergleichstabelle mit fester Kopfzeile",
 "name_en": "Comparison table with sticky header and first column",
 "kurz": "Echte Tabelle mit fester Kopfzeile und erster Spalte, Monats- und Jahrespreis, hervorgehobenem Paket, „Nur Unterschiede“ und Paket-Umschalter auf dem Telefon.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "technisch",
  "ruhig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "intl"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Pakete oder Angebote als echte Tabelle. Beim Scrollen bleibt die Kopfzeile mit Paketname, Preis und Knopf stehen, beim seitlichen Scrollen die erste Spalte mit den Merkmalen. Ein Umschalter wechselt zwischen Monats- und Jahrespreis, ein Paket ist hervorgehoben. Merkmale sind in Gruppen geordnet, ein Schalter blendet gleiche Zeilen aus. Auf dem Telefon zeigt die Tabelle ein Paket zur Zeit, gewählt über einen Paket-Umschalter statt einer breiten Tabelle.",
  "warum_es_wirkt": "Wer vergleicht, verliert in langen Tabellen schnell den Bezug: Welche Spalte war das? Die feste Kopfzeile beantwortet das immer. „Nur Unterschiede“ macht die Entscheidung kürzer. Auf dem Telefon bleibt alles lesbar, ohne dass man waagerecht wischen muss.",
  "wann_einsetzen": "Preisseiten von Software, Kurs- und Fahrschul-Pakete, Fotografen-Pakete, Tarife, Vergleich mit Alternativen („wir gegen Excel“).",
  "wann_nicht": "Bei zwei Paketen mit wenigen Unterschieden: dann zwei Karten. Bei mehr als fünf Spalten: dann Auswahl von zwei bis drei zum Vergleich. Nicht für Fließtext-Inhalte, die keine Tabelle sind.",
  "varianten": [
   "Paketvergleich mit Monats- und Jahrespreis",
   "Vergleich mit Alternativen (eigenes Produkt gegen Tabellenkalkulation und Papier)",
   "Gruppen zum Ein- und Ausklappen",
   "„Nur Unterschiede zeigen“",
   "Telefon: Paket-Umschalter oder Auswahl von zwei Paketen nebeneinander"
  ],
  "umsetzung": "Eine <table> mit <caption>, <thead> (Pakete als <th scope=\"col\">) und einem <tbody> je Gruppe mit <th scope=\"colgroup\">; Merkmale als <th scope=\"row\">. Häkchen mit Text für Screenreader („enthalten“, „nicht enthalten“). Rahmen mit role=\"region\" und aria-labelledby auf die caption; tabindex=\"0\" nur, solange er scrollt. Breit (Tabelle passt): Rahmen ohne overflow, die Kopfzeile klebt am Fenster, kein Scrollen im Scrollen. Mittel: Rahmen scrollt in beiden Achsen, Kopfzeile oben und erste Spalte links bleiben stehen. Telefon: Paket-Umschalter blendet die anderen Spalten per Klasse aus, die Tabelle behält display: table. Abrechnung als Radiogruppe mit gleitender Pille; neue Preise per aria-live ansagen. Preise netto zzgl. USt. nur bei Angeboten für Unternehmen; sonst Gesamtpreise (vom Kunden prüfen lassen).",
  "mobil": "Unter 640 px ein Paket zur Zeit: Segment-Umschalter oben fest, darunter Kopfzeile des Pakets mit Preis und Knopf, Tabelle zweispaltig (Merkmal, Wert). Kein waagerechtes Wischen, kein Dropdown.",
  "reduzierte_bewegung": "Preise und Spalten wechseln ohne Versatz und ohne Überblendung.",
  "barrierefreiheit": "Echte Tabellen-Semantik (caption, th mit scope). Scroll-Container per Tastatur erreichbar (tabindex=\"0\", role=\"region\", Name aus der caption), Fokus sichtbar. Häkchen mit Text für Screenreader. Umschalter als Radiogruppe mit sichtbarer Beschriftung; Preiswechsel wird über aria-live angesagt. Das hervorgehobene Paket nicht nur über Farbe kennzeichnen, sondern mit Text („Empfohlen“)."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
  "dauer_ms": "160 (Farbe, Hover), 180 (Umschalter, Preiswechsel)",
  "stagger_ms": "",
  "distanz": "Preis wechselt mit 6 px Versatz",
  "sonstiges": "Tempo aus dem Rezept saas-produkt-praezise (Linear ease-out-quad, .16s)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept saas-produkt-praezise"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.46,
   0.45,
   0.94
  ],
  "css": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
  "name": "eigene Kurve",
  "dauer_ms": 160
 },
 "gesehen_bei": [
  {
   "seite": "Smashing Magazine: Designing Effective Pricing Plans UX (Vitaly Friedman, 06.07.2022)",
   "url": "https://smashingmagazine.com/2022/07/designing-better-pricing-page",
   "auszeichnung": "",
   "beobachtung": "Monat/Jahr-Umschalter oben an der Tabelle. Feste Kopfzeile mit Paket, Preis und Knopf beim Scrollen (Beispiele Contentful, Intercom, Dropbox, Figma). Funktionen in Gruppen, Schalter „nur Unterschiede“. Mobil kein waagerechtes Scrollen, sondern schwebende Paket-Tabs; keine Dropdowns zum Paketwechsel. Beliebtes Paket in die Mitte.",
   "art": "artikel"
  },
  {
   "seite": "Baymard Institute: 4 Ways to Optimize the Comparison Feature for Scanning (19.10.2022)",
   "url": "https://baymard.com/research-articles/user-friendly-comparison-tools",
   "auszeichnung": "",
   "beobachtung": "Feste Spaltenköpfe mit Name, Bild und Preis; ohne sie scrollen Nutzer zurück nach oben. „Nur Unterschiede zeigen“ wurde dem bloßen Einfärben von Unterschieden vorgezogen.",
   "art": "artikel"
  },
  {
   "seite": "Adrian Roselli: Under-Engineered Responsive Tables",
   "url": "https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html",
   "auszeichnung": "",
   "beobachtung": "Tabelle in einem scrollbaren Container mit role=\"region\", aria-labelledby auf die caption und tabindex=\"0\", damit Tastaturnutzer scrollen können. Kein display: block auf der Tabelle, sonst gehen die Tabellen-Semantiken verloren.",
   "art": "artikel"
  },
  {
   "seite": "NN/g: 3 Rules for Better Comparison Tables (Kate Moran, 11.05.2018)",
   "url": "https://www.nngroup.com/videos/ux-rules-comparison-tables/",
   "auszeichnung": "",
   "beobachtung": "Gute Vergleichstabellen sind einfach, einheitlich und informativ.",
   "art": "video"
  }
 ],
 "tutorials": [
  {
   "titel": "Adrian Roselli: Under-Engineered Responsive Tables",
   "url": "https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html"
  },
  {
   "titel": "Smashing Magazine: Designing Effective Pricing Plans UX",
   "url": "https://smashingmagazine.com/2022/07/designing-better-pricing-page"
  },
  {
   "titel": "MDN: position (sticky)",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/position"
  }
 ],
 "kombinierbar_mit": [
  "preis-section-editorial",
  "gleitender-indikator",
  "zahlen-odometer",
  "tabellenziffern",
  "toggle-switch",
  "akkordeon-hoehe-auto"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Belege sind Artikel und Studien; Produktionsseiten (Contentful, Intercom, Dropbox, Figma) nur über Smashing Magazine genannt, nicht selbst geprüft. Bewegungswerte eigene Festlegung nach Rezept.",
   "Preise: Für Geschäftskunden netto zzgl. USt. üblich; richtet sich ein Angebot auch an Verbraucher, gelten Gesamtpreise nach Preisangabenverordnung. Vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Echte Tabelle mit fester Kopfzeile und erster Spalte, Monats- und Jahrespreis, hervorgehobenem Paket, „Nur Unterschiede“ und Paket-Umschalter auf dem Telefon.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 0.46, 0.45, 0.94) (ease-out-quad, Linear laut Rezept)",
   "dauer_ui_ms": 160,
   "dauer_umschalter_ms": 180,
   "preiswechsel": "alter Preis 90 ms nach oben raus (translateY -6px, opacity 0), neuer 180 ms von +6px rein, Fenster 38 px hoch mit overflow hidden",
   "sticky": "thead th { position: sticky; top: 0; z-index: 2 } · tbody th[scope=row] { position: sticky; left: 0; z-index: 1 } · Eckzelle z-index 3",
   "modi": "ab 1100 px Rahmen overflow visible (Kopfzeile klebt am Fenster); 641 bis 1099 px Rahmen overflow auto, max-height min(100svh - 96px, 860px), beide Achsen fest; bis 640 px Paket-Umschalter sticky top 0, thead top = Höhe des Umschalters",
   "schatten": "an festen Kanten erst nach Scrollen: 0 8px 16px -10px rgba(0,0,0,.18) unten, 8px 0 14px -10px rgba(0,0,0,.2) rechts",
   "spalte1": "248 px (≤ 960 px: 210 px, Telefon 52 %)",
   "tabelle_min_breite": "880 px",
   "hervorgehoben": "Spalte #FFFCFA, Kopf inset 0 3px 0 #C8430F, Häkchen in Markenton, Etikett „Empfohlen“",
   "nur_unterschiede": "Zeilen mit gleichen Werten in allen Spalten ausblenden, Gruppen ohne Unterschied ganz; beim Zurückschalten 600 ms Markierung #FBEFE8",
   "zahlformat": "Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }) → 12 €",
   "schrift": "Geist 580 h1 clamp(32px, 1.6rem + 2.6vw, 52px) -0.022em, Tabelle 14 px, Preis 30 px 560 tabular-nums; Geist Mono 11 px Versal +0.08em für Gruppen",
   "farben": "#FAFAFA Grund, #FFFFFF Tabelle, #161616 Text, #6B6F76 Meta, #E6E6E8 Linien, #C8430F einziger Markenton"
  },
  "ausloeser": "scroll",
  "touch": "Unter 640 px ein Paket zur Zeit: Segment-Umschalter (Radiogruppe, kein Dropdown) klebt oben, darunter die Kopfzeile des gewählten Pakets; Tabelle zweispaltig mit display: none an den übrigen Zellen, Gruppenzeilen mit colspan 2. Knöpfe 44 px hoch, kein Zeilen-Hover.",
  "reduziert": "Preise wechseln ohne Versatz, Pille und Schalter springen, keine Markierung beim Wiedereinblenden; die Vorführung scrollt ohne Gleiten.",
  "korrekturen": {
   "umsetzung": "Eine <table> mit <caption>, <thead> (Pakete als <th scope=\"col\">) und einem <tbody> je Gruppe mit <th scope=\"colgroup\">; Merkmale als <th scope=\"row\">. Häkchen mit Text für Screenreader („enthalten“, „nicht enthalten“). Rahmen mit role=\"region\" und aria-labelledby auf die caption; tabindex=\"0\" nur, solange er scrollt. Breit (Tabelle passt): Rahmen ohne overflow, die Kopfzeile klebt am Fenster, kein Scrollen im Scrollen. Mittel: Rahmen scrollt in beiden Achsen, Kopfzeile oben und erste Spalte links bleiben stehen. Telefon: Paket-Umschalter blendet die anderen Spalten per Klasse aus, die Tabelle behält display: table. Abrechnung als Radiogruppe mit gleitender Pille; neue Preise per aria-live ansagen. Preise netto zzgl. USt. nur bei Angeboten für Unternehmen; sonst Gesamtpreise (vom Kunden prüfen lassen).",
   "mobil": "Unter 640 px ein Paket zur Zeit: Segment-Umschalter oben fest, darunter Kopfzeile des Pakets mit Preis und Knopf, Tabelle zweispaltig (Merkmal, Wert). Kein waagerechtes Wischen, kein Dropdown."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept saas-produkt-praezise (helle KMU-Variante), erfundene Software Kernlog aus Ingolstadt für Prüfpläne und Wartungsprotokolle, Signalorange #C8430F als einziger Markenton, Geist und Geist Mono. Pakete Start 0 €, Team 12/10 €, Werk 24/20 €, Konzern individuell; Jahrespreis = 2 Monate gratis. Variante „Alternativen“ vergleicht mit Tabellenkalkulation und Papier (Zeitwerte als Beispielwerte gekennzeichnet). Vorführung: Tabelle scrollt, Jahrespreis, Nur Unterschiede, in der Vorschau zusätzlich quer (erste Spalte bleibt), auf dem Telefon Paketwechsel. Quellen: smashingmagazine.com, baymard.com, adrianroselli.com, nngroup.com. AD-Review 02.11.2026: Note 4. Zugang 02.11.2026: Unter 360 px Paketspalte ohne min-width 150 px, Knopftext darf umbrechen (320 px ohne Querscrollen, 390 px unverändert); Kontrastmodus-Rahmen für Knöpfe.",
  "varianten": [
   {
    "id": "pakete",
    "name": "Paketvergleich mit Abrechnungs-Umschalter",
    "wann": "SaaS, Kurse, Fahrschule, Fotografen-Pakete: drei bis vier Pakete mit Preis, ein empfohlenes in der Mitte.",
    "werte": {
     "spalten": "4 Pakete, Team hervorgehoben",
     "umschalter": "Monatlich / Jährlich (2 Monate gratis), Preiswechsel 180 ms, 6 px",
     "nur_unterschiede": "an"
    }
   },
   {
    "id": "alternativen",
    "name": "Vergleich mit Alternativen",
    "wann": "Produktseite, die gegen den Ist-Zustand des Kunden argumentiert (Excel, Papier, Telefon): Textwerte statt Häkchen, ohne Preise.",
    "werte": {
     "spalten": "eigenes Produkt + 2 Alternativen, eigenes hervorgehoben ohne Etikett",
     "umschalter": "keiner",
     "zellen": "Text links bündig 13,5 px, „nicht möglich“ mit Strich"
    }
   }
  ]
 }
}