{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "preis-section-editorial",
 "name": "Preis-Sektion mit Haltung",
 "name_en": "Editorial pricing section",
 "kurz": "Preise als typografische Tabelle auf Haarlinien statt drei Karten mit Badge: große Ziffern, die beim Wechsel der Zahlweise wie eine Walze rollen, Umfang zum Aufklappen.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "ehrlich",
  "sachlich"
 ],
 "technik": [
  "css",
  "css-grid",
  "subgrid",
  "details-summary",
  "vanilla-js",
  "scroll-state-queries"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Statt drei gleich hoher Karten mit „Beliebt“-Badge stehen die Preise als typografische Tabelle auf Rasterlinien: Paket, Umfang, Preis. Die Ziffern sind groß, die Linien fein. Ein Umschalter (monatlich oder jährlich, Einmalzahlung oder Raten, Lizenztyp) lässt die Ziffern als Walze oder Flip wechseln. Der Leistungsumfang ist aufklappbar statt einer endlosen Häkchenliste. Varianten: eine einzelne große Karte mit einem Preis, ein Lizenzrechner, eine Vergleichstabelle mit klebender Kopfzeile.",
  "warum_es_wirkt": "Klarheit statt Verkaufstrick. Eine typografische Tabelle wirkt hochwertig, ist gut lesbar und lässt sich ehrlich vergleichen.",
  "wann_einsetzen": "Design-Abos, Produkte, Kurse, Schrift-Foundries und Freelancer mit Paketpreisen.",
  "wann_nicht": "Wenn Preise individuell sind (dann ein Ab-Preis mit CTA) oder bei mehr als vier Paketen.",
  "varianten": [
   "Typografische Preistabelle",
   "Ein-Preis-Karte für ein Abo",
   "Lizenz- oder Preisrechner",
   "Vergleichstabelle mit klebender Kopfzeile",
   "Ziffern-Walze oder Flip beim Umschalten"
  ],
  "umsetzung": "Eine echte <table> oder ein Grid mit subgrid, damit die Zeilen über alle Pakete ausgerichtet bleiben. Der Umschalter ist eine radio-Gruppe in fieldset und legend; den Preiswechsel kann CSS allein über :has(input:checked) steuern. Den Umfang in <details>/<summary> packen; neuere Chromes animieren ::details-content. Die klebende Kopfzeile bekommt ihren Schatten über scroll-state(stuck: top).",
  "mobil": "Pakete untereinander oder als waagerechte Scroll-Snap-Leiste. In der Vergleichstabelle bleibt die erste Spalte fest.",
  "reduzierte_bewegung": "Preiswechsel ohne Ziffernanimation.",
  "barrierefreiheit": "Preise als Text mit Währung und Zeitraum, auch wenn die Walze sie optisch zeigt. Umschalter mit sichtbarem Label. Tabellen mit <th scope> und <caption>."
 },
 "messwerte": {
  "easing": "power2.out",
  "dauer_ms": "300–500 Ziffernwechsel",
  "stagger_ms": "30–50 pro Ziffer",
  "distanz": "",
  "sonstiges": "tabular-nums",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.33,
   1,
   0.68,
   1
  ],
  "css": "cubic-bezier(0.33, 1, 0.68, 1)",
  "name": "power2.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Contemporary Type – Font licensing and pricing",
   "url": "https://www.awwwards.com/inspiration/font-licensing-and-pricing-section-contemporary-type",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel Lizenz- und Preissektion einer Foundry.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "UI Flip – Plans & Pricing",
   "url": "https://www.awwwards.com/inspiration/plans-pricing-ui-flip",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel Pläne & Preise.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "WeGrow Design Subscription",
   "url": "https://www.awwwards.com/inspiration/membership-pricing-wegrow-design-subscription",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel Mitgliedschaftspreise eines Design-Abos.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Klub – Pricing table",
   "url": "https://www.awwwards.com/inspiration/pricing-table-klub",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel Preistabelle.",
   "art": "website-ungeprueft"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "blueprint-raster-sichtbar",
  "footer-cta-riesen-wortmarke"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein live geprüfter Produktionsbeleg; bleibt C."
  ],
  "kategorie_alt": "Section-Layout"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Preise als typografische Tabelle auf Haarlinien statt drei Karten mit Badge: große Ziffern, die beim Wechsel der Zahlweise wie eine Walze rollen, Umfang zum Aufklappen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "power2.out = cubic-bezier(0.33, 1, 0.68, 1) für alles (Walze, Schalter, Aufklappen, Schatten)",
   "ziffer_dauer_ms": 400,
   "ziffer_stagger_ms": 40,
   "walze": "je Stelle ein Streifen 0–9 plus Punkt und Leerstelle, translate in Schritten von 1,05em; Leerstellen fallen per width auf 0, Punkt 0,26em, Ziffer = gemessene Breite einer tabular-nums-0",
   "zeitraum_wechsel": "opacity aus, Text nach 160 ms tauschen, opacity ein (300 ms)",
   "ui_ms": 300,
   "schalter": "radio-Gruppe in fieldset/legend, Gleiter per :has(input:nth-of-type(2):checked) translate 100 %",
   "aufklappen": "details::details-content block-size 0 → auto mit interpolate-size: allow-keywords, content-visibility allow-discrete, 300 ms",
   "sticky_kopf": "th position: sticky; top: 0, container-type: scroll-state, @container scroll-state(stuck: top) setzt Weiß und Schatten 0 10px 20px -16px; IntersectionObserver-Wächter als Rückfall",
   "preise": "390 / 870 / 1.470 € einmalig, 3 × 130 / 290 / 490 € in Raten; Abo 29 € monatlich oder 290 € jährlich",
   "typo": "Bricolage Grotesque 700 opsz 96, h2 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem) −0,02em; Preis clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem) −0,03em tabular-nums; Onest 1.0625rem/1.6; Shantell Sans INFM 45 BNCE 0 nur für Randnotizen und Modul-Labels",
   "farben": "#f4f6fa Grund, #ffffff Karte, #141414 Text, #7491ff Markenton (Buttons), #10bf7a Häkchen, #f7c325 Badge und Marker",
   "linien": "Tabellenkopf 2 px #141414, Zeilen 1 px rgba(20,20,20,.13)",
   "vorfuehrung": "Schleife 16,8 s: Raten (0,9 s), Details auf (2,9 s), Einmal (4,6 s), Details zu, Vergleich mit Scroll im Rahmen 260 px, Raten, Ein Preis Monatlich → Jährlich → Monatlich"
  },
  "ausloeser": "klick",
  "touch": "Unter 720 px wird jede Tabellenzeile zum Block: Paket, darunter Preis und Button nebeneinander, dann der Umfang. Der Vergleich scrollt waagerecht mit fester erster Spalte und klebender Kopfzeile. Buttons 48 px hoch, kein Hover-Hintergrund.",
  "reduziert": "Die Ziffern wechseln ohne Walze und ohne Versatz, der Gleiter springt, Details öffnen sofort, Varianten erscheinen ohne Einblendung. Der Inhalt bleibt gleich.",
  "korrekturen": {
   "beschreibung": "Statt drei gleich hoher Karten mit „Beliebt“-Badge stehen die Preise als typografische Tabelle auf Rasterlinien: Paket, Umfang, Preis. Die Ziffern sind groß, die Linien fein. Ein Umschalter (monatlich oder jährlich, Einmalzahlung oder Raten, Lizenztyp) lässt die Ziffern als Walze oder Flip wechseln. Der Leistungsumfang ist aufklappbar statt einer endlosen Häkchenliste. Varianten: eine einzelne große Karte mit einem Preis, ein Lizenzrechner, eine Vergleichstabelle mit klebender Kopfzeile.",
   "warum_es_wirkt": "Klarheit statt Verkaufstrick. Eine typografische Tabelle wirkt hochwertig, ist gut lesbar und lässt sich ehrlich vergleichen.",
   "wann_einsetzen": "Design-Abos, Produkte, Kurse, Schrift-Foundries und Freelancer mit Paketpreisen.",
   "wann_nicht": "Wenn Preise individuell sind (dann ein Ab-Preis mit CTA) oder bei mehr als vier Paketen.",
   "varianten": [
    "Typografische Preistabelle",
    "Ein-Preis-Karte für ein Abo",
    "Lizenz- oder Preisrechner",
    "Vergleichstabelle mit klebender Kopfzeile",
    "Ziffern-Walze oder Flip beim Umschalten"
   ],
   "umsetzung": "Eine echte <table> oder ein Grid mit subgrid, damit die Zeilen über alle Pakete ausgerichtet bleiben. Der Umschalter ist eine radio-Gruppe in fieldset und legend; den Preiswechsel kann CSS allein über :has(input:checked) steuern. Den Umfang in <details>/<summary> packen; neuere Chromes animieren ::details-content. Die klebende Kopfzeile bekommt ihren Schatten über scroll-state(stuck: top).",
   "mobil": "Pakete untereinander oder als waagerechte Scroll-Snap-Leiste. In der Vergleichstabelle bleibt die erste Spalte fest.",
   "reduzierte_bewegung": "Preiswechsel ohne Ziffernanimation.",
   "barrierefreiheit": "Preise als Text mit Währung und Zeitraum, auch wenn die Walze sie optisch zeigt. Umschalter mit sichtbarem Label. Tabellen mit <th scope> und <caption>."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kurs-coaching-lernweg, erfundene Altbauschule aus Freiburg im Breisgau mit Kursleiterin Ruth Messerschmid (Online-Kurs zum eigenen Sanierungsfahrplan). Drei Varianten über die Demo-Leiste: Preistabelle mit Walze und aufklappbarem Umfang, Ein-Preis-Abo-Karte (Monatlich/Jährlich), Vergleich mit klebender Kopfzeile. Statt Beliebt-Badge eine handschriftliche Randnotiz in Shantell Sans. Messwerte des Musters sind typisch, nicht gemessen; genommen wurde power2.out 400 ms und 40 ms je Ziffer. Referenzen: maven.com, brilliant.org, radimpesko.com. AD-Review 01.11.2026: Note 4. Startzeile auf dem Telefon bricht jetzt als Ganzes unter das Etikett statt mitten im Datum."
 }
}