{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "serif-grotesk-duotone",
 "name": "Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)",
 "name_en": "Serif and grotesque pairing",
 "kurz": "Startseite einer Bremer Kanzlei mit drei klar verteilten Stimmen: Newsreader für Titel und Zitate, Schibsted Grotesk für Text und Bedienung, DM Mono für Daten und Labels; ein Knopf färbt jedes Element nach seiner Schrift.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "editorial",
  "warm",
  "kontrastreich"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Zwei Schriften mit klar getrennten Rollen: eine Serif für Überschriften und Zitate, also für Haltung und Gefühl, eine Grotesk für Fließtext, Navigation und alles Bedienbare. Eine Mono kommt oft als dritte Stimme für Daten, Datum und Labels dazu.",
  "warum_es_wirkt": "Der Kontrast der Formen macht die Hierarchie sofort lesbar, ohne dass Größe oder Fett sie tragen müssen. Die Serif gibt Charakter, die Grotesk hält Interface und Text sachlich. Die Mono trennt Metadaten sichtbar vom Inhalt.",
  "wann_einsetzen": "Kanzleien, Beratungen, Verlage, Kultur, Agenturen und Produkte, die seriös und zugleich zeitgemäß wirken sollen. Gut bei Seiten mit viel Inhalt und vielen Metadaten wie Insights, Studien oder Projektlisten.",
  "wann_nicht": "Wenn die Rollen nicht durchgehalten werden: Eine Serif im Knopf und eine Grotesk im Zitat zerstören das System. Nicht bei sehr kleinen Seiten, auf denen eine Schrift reicht, und nicht mit zwei Schriften, die sich zu ähnlich sind.",
  "varianten": [
   "Drei Stimmen: Serif für Titel, Grotesk für Text und Bedienung, Mono für Labels (Instrument, Resend)",
   "Serif als Bühne: sehr große, leichte Serif-Titel mit Grotesk und Mono (Your Majesty: IvyPresto 100, Messina, DM Mono)",
   "Reines Duotone ohne Mono, Labels in der Grotesk in Versalien"
  ],
  "umsetzung": "Rollen als Custom Properties festlegen (--f-titel, --f-text, --f-label) und nur über Klassen zuweisen, nie Element für Element. Serif nur für h1 bis h3 und Zitate, Grotesk für Text, Navigation, Knöpfe und Formulare, Mono für Datum, Rubrik, Zahlen und Labels (klein, versal, Laufweite um .08em). Am einfachsten mit einer Superfamilie wie Instrument Sans, Serif und Mono.",
  "mobil": "Die Rollen bleiben gleich, nur die Titelgrößen schrumpfen über clamp(). Labels nicht unter 11 px setzen.",
  "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
  "barrierefreiheit": "Hierarchie auch semantisch auszeichnen (h1 bis h3), nicht nur über die Schriftwahl. Versalien per text-transform setzen. Serif-Texte in kleinen Größen auf Kontrast und Strichstärke prüfen, eine Serif mit opsz-Achse hilft dabei."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Serif-Headline + Grotesk-UI + Mono-Labels",
  "herkunft": "beobachtet",
  "quelle": "https://www.instrument.com/ ; https://yourmajesty.co/ ; https://resend.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Instrument",
   "url": "https://www.instrument.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (@font-face): Instrument-Sans, Instrument-Serif, Instrument-Serif-Italic und Instrument-Mono – Serif + Grotesk + Mono als System.",
   "art": "website"
  },
  {
   "seite": "Your Majesty",
   "url": "https://yourmajesty.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CSS): IvyPresto (Serif, Headlines 6.25–8.75rem, weight 100), Messina (Grotesk) und DM Mono für Labels (uppercase, .05rem).",
   "art": "website"
  },
  {
   "seite": "Resend",
   "url": "https://resend.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CSS): Domaine (Serif, .font-domaine), ABC Favorit + Inter (Grotesk), Commit Mono.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "editorial-magazin-layout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriften.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Drei Belege mit Mono als dritter Stimme; weitere Serif+Grotesk-Paare: Unseen (Saol Display + Neue Montreal), Build in Amsterdam (Reckless Neue + Neue Haas Grotesk)."
  ],
  "prioritaet_hinweis": "vorläufig gesetzt (Rohdaten ohne Priorität)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Startseite einer Bremer Kanzlei mit drei klar verteilten Stimmen: Newsreader für Titel und Zitate, Schibsted Grotesk für Text und Bedienung, DM Mono für Daten und Labels; ein Knopf färbt jedes Element nach seiner Schrift.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "serif": "Newsreader, variabel (opsz 6–72, wght 200–800), 400, letter-spacing -0.01em, font-optical-sizing auto; H1 clamp(2rem, 1.3rem + 2.6vw, 3.5rem) / 1.1, H2 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem) / 1.1, H3 clamp(1.25rem, 1.1rem + .5vw, 1.5rem) / 1.2",
   "grotesk": "Schibsted Grotesk, variabel (wght 400–900): Text 400, Lead 1.0625rem / 1.6, max. 38em; Navigation, Knöpfe, Links 500",
   "mono": "DM Mono 400, .75rem / 1.4, letter-spacing .08em, uppercase, tabular-nums",
   "variante_buehne": "Newsreader 200, letter-spacing -0.025em, H1 clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem), H2 clamp(1.875rem, 1.2rem + 2.2vw, 3rem)",
   "variante_ohne_mono": "Labels in Schibsted Grotesk 500, letter-spacing .06em",
   "gegenprobe_nur_grotesk": "Titel Schibsted Grotesk 500, -0.025em; Labels Grotesk 500 .06em",
   "gegenprobe_nur_serif": "Text, Bedienung und Labels in Newsreader (Bedienung und Labels 500, Labels .06em)",
   "token": "Custom Properties am Seitencontainer: --f-titel, --w-titel, --ls-titel, --f-text, --w-ui, --f-label, --w-label, --ls-label, --h1, --h2",
   "wechsel": "View Transition (Crossfade) 250ms cubic-bezier(0.4, 0, 0.22, 1); ohne Unterstützung oder bei reduzierter Bewegung sofort",
   "uebergaenge": "Farbe 125ms, Unterstreichung und Markierung 250ms, Kurve cubic-bezier(0.4, 0, 0.22, 1)",
   "stimmen_zeigen": "Serif rgba(149,148,209,.38) · Grotesk rgba(210,205,199,.62) · Mono rgba(0,190,230,.22), jeweils Hintergrund plus 3px box-shadow; Zuordnung aus getComputedStyle(fontFamily)",
   "vorfuehrung_takt_ms": 2400,
   "farben": "#f9f8f8 Grund · #efebeb Fläche · #d2cdc7 Linien · #212529 Text · #736458 Meta · #2e1a47 Aubergine (Marke, dunkle Sektion) · #50316d Hover · #9594d1 / #dbd9e7 Lavendel auf Dunkel · #00bee6 Fokus"
  },
  "ausloeser": "klick",
  "touch": "Umschalter per Tippen mit 36 px hohen Knöpfen, Unterstreich-Animation der Navigation entfällt. Unter 1180 px ersetzt Menü die Navigation, unter 900 px stehen Einstieg und Studie untereinander, unter 640 px Insights einspaltig und Kopf verdichtet.",
  "reduziert": "Rollen wechseln ohne Crossfade, Markierung und Hover ohne Übergang. Die Technik selbst hat keine Bewegung.",
  "korrekturen": {
   "beschreibung": "Zwei Schriften mit klar getrennten Rollen: eine Serif für Überschriften und Zitate, also für Haltung und Gefühl, eine Grotesk für Fließtext, Navigation und alles Bedienbare. Eine Mono kommt oft als dritte Stimme für Daten, Datum und Labels dazu.",
   "warum_es_wirkt": "Der Kontrast der Formen macht die Hierarchie sofort lesbar, ohne dass Größe oder Fett sie tragen müssen. Die Serif gibt Charakter, die Grotesk hält Interface und Text sachlich. Die Mono trennt Metadaten sichtbar vom Inhalt.",
   "wann_einsetzen": "Kanzleien, Beratungen, Verlage, Kultur, Agenturen und Produkte, die seriös und zugleich zeitgemäß wirken sollen. Gut bei Seiten mit viel Inhalt und vielen Metadaten wie Insights, Studien oder Projektlisten.",
   "wann_nicht": "Wenn die Rollen nicht durchgehalten werden: Eine Serif im Knopf und eine Grotesk im Zitat zerstören das System. Nicht bei sehr kleinen Seiten, auf denen eine Schrift reicht, und nicht mit zwei Schriften, die sich zu ähnlich sind.",
   "varianten": [
    "Drei Stimmen: Serif für Titel, Grotesk für Text und Bedienung, Mono für Labels (Instrument, Resend)",
    "Serif als Bühne: sehr große, leichte Serif-Titel mit Grotesk und Mono (Your Majesty: IvyPresto 100, Messina, DM Mono)",
    "Reines Duotone ohne Mono, Labels in der Grotesk in Versalien"
   ],
   "umsetzung": "Rollen als Custom Properties festlegen (--f-titel, --f-text, --f-label) und nur über Klassen zuweisen, nie Element für Element. Serif nur für h1 bis h3 und Zitate, Grotesk für Text, Navigation, Knöpfe und Formulare, Mono für Datum, Rubrik, Zahlen und Labels (klein, versal, Laufweite um .08em). Am einfachsten mit einer Superfamilie wie Instrument Sans, Serif und Mono.",
   "mobil": "Die Rollen bleiben gleich, nur die Titelgrößen schrumpfen über clamp(). Labels nicht unter 11 px setzen.",
   "reduzierte_bewegung": "Nicht relevant, die Technik hat keine Bewegung.",
   "barrierefreiheit": "Hierarchie auch semantisch auszeichnen (h1 bis h3), nicht nur über die Schriftwahl. Versalien per text-transform setzen. Serif-Texte in kleinen Größen auf Kontrast und Strichstärke prüfen, eine Serif mit opsz-Achse hilft dabei."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kanzlei-beratung-souveraen, erfundene Kanzlei Osterholt Vahl in Bremen (Handel, Schifffahrt, Mittelstand): Positionierungssatz in der Serif, Studie als Einstieg statt Stockfoto, Insights mit Datum und Rubrik in Mono, Rechtsgebiete in Aubergine, Visitenkarte mit Kammer. Aubergine statt Nachtblau, weil Nachtblau schon in sieben Demos steht. Mono-Schnitt DM Mono wie bei Your Majesty, im Rezept nicht festgelegt. Umschalter Drei Stimmen, Serif als Bühne, Ohne Mono, Gegenproben Nur Grotesk und Nur Serif; Stimmen zeigen liest die berechnete Schrift jedes Textelements und zählt die Stimmen in der Leiste. Wechsel als View-Transition-Crossfade. Referenzen: commercialtype.com, radimpesko.com, olivierlarose.com. AD-Review 01.11.2026: Note 4. Studie von Nachfolge auf Lieferketten umgestellt, weil initial-letter-initialen (gleiches Rezept) schon Unternehmensnachfolge zeigt. Zugang 02.11.2026: --meta #8E7C6D auf #736458 (5,6:1 auf Weiß, 4,8:1 auf Fläche), Knopfrahmen im Kontrastmodus."
 }
}