{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "fluide-typo-clamp-cqi",
 "name": "Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten",
 "name_en": "Fluid type with clamp() and container query units",
 "kurz": "Eine Studio-Seite in einem ziehbaren Rahmen: Headline, Lead, Kartentitel und Wortmarke wachsen stufenlos mit, Karten richten ihre Titel nach der eigenen Breite.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "modern",
  "funktional",
  "typografisch"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Jede Stufe der Typo-Skala wächst stufenlos zwischen einer Mindest- und einer Höchstgröße, statt an Breakpoints zu springen: font-size: clamp(min, rem + vi, max). Die Skala entsteht meist mit einem Rechner wie Utopia aus zwei Basisgrößen und zwei Verhältnissen. Sie liegt als Custom Properties vor (--step-0 bis --step-9), Abstände folgen derselben Logik. Container-Query-Einheiten (cqi, cqw: 1 % der Containerbreite) koppeln Größen an die Komponente statt an den Viewport. Dieselbe Karte hat im schmalen Seitenslot einen kleineren Titel als im Hauptbereich.",
  "warum_es_wirkt": "Typografie wirkt auf jeder Breite wie gesetzt. Es gibt keine plötzlichen Sprünge, große Headlines nutzen die Desktop-Fläche und sprengen trotzdem kein Telefon. Mit cqi werden Komponenten wirklich wiederverwendbar, ideal für Template-Baukästen.",
  "wann_einsetzen": "Für jede Typo-Skala und jedes Abstandssystem. Für Komponenten-Bibliotheken und Templates mit unterschiedlich breiten Slots. Für Wortmarken, die die Containerbreite füllen sollen.",
  "wann_nicht": "Fließtext mit einem Minimum unter etwa 16 px oder zu steiler Steigung (Zoom, WCAG 1.4.4). Reine vw-Werte ohne rem-Anteil. Container-Einheiten ohne gesetzten container-type: Sie fallen dann auf den Viewport zurück.",
  "varianten": [
   "Utopia-Skala als Tokens (--step-0 bis --step-9)",
   "Abstands-Paare wie --space-s-l: clamp(…) für fließende Abstände",
   "Komponenten-Titel in cqi, z. B. clamp(14px, 14px + 3cqw, 20px)",
   "Komponentenbreiten in cqi, z. B. Karussell-Karte 26.27cqi",
   "Wortmarke über 100cqi, die genau die Breite füllt (siehe schrift-hero-viewportbreit)",
   "Zoom-sicherer Mittelterm: rem + vi statt nur vw",
   "Fließende Zustände: Radius, Abstand, color-mix()-Anteil und Schatten aus --p: progress(100cqi, 20rem, 60rem), Rückfall ein fester Zwischenwert"
  ],
  "umsetzung": "Skala mit Utopia erzeugen, z. B. 18 px bei 320 px bis 20 px bei 1240 px, Verhältnis 1.2 bis 1.333. Ablegen als :root { --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem); … }. Komponenten: .karte { container-type: inline-size } und .karte h3 { font-size: clamp(1.125rem, 0.5rem + 5cqi, 2.25rem) }. Achtung: cqi bezieht sich auf die Inhaltsbreite des nächsten Containers; ein Element mit container-type misst sich an seinem Vorfahren. Immer rem im Mittelterm, Minimum für Fließtext mindestens 1rem, Steigung bei Fließtext flach halten (höchstens etwa 0.5vi). Zoom-Test: Bei 200 % muss Text sichtbar wachsen. Faustregel: Maximum höchstens 2,5 × Minimum.",
  "mobil": "Kern des Musters: Die Mindestwerte bestimmen die Größe auf dem Telefon. Das Headline-Minimum so wählen, dass lange deutsche Komposita nicht aus der Zeile ragen, notfalls hyphens: auto.",
  "reduzierte_bewegung": "Nicht relevant, das Muster bewegt nichts.",
  "barrierefreiheit": "Reine vw- oder cqi-Werte ignorieren den Browser-Zoom. Deshalb immer einen rem-Anteil einbauen und das Verhältnis von Maximum zu Minimum begrenzen, damit 200 % Zoom wirkt (WCAG 1.4.4). Container-Einheiten im Fließtext vorsichtig einsetzen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Piccalilli Step 9: 42 → 244 px (clamp(2.625rem, -0.7643rem + 16.9463vi, 15.25rem)); Shadeed Kartentitel 14 → 20 px über 3cqw",
  "sonstiges": "Container-Einheiten: Chrome 105, Safari 16, Firefox 110 (caniuse css-container-query-units)",
  "herkunft": "beobachtet",
  "quelle": "https://piccalil.li/dist/global.css; https://ishadeed.com/ (Inline-CSS)"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Piccalilli",
   "url": "https://piccalil.li/",
   "auszeichnung": "",
   "beobachtung": "Utopia-artige Skala als Tokens: --size-step-9: clamp(2.625rem, -0.7643rem + 16.9463vi, 15.25rem), --size-step-8: clamp(2.3125rem, 0.1313rem + 10.906vi, 10.4375rem), --size-step-6: clamp(1.8125rem, 1.0742rem + 3.6913vi, 4.5625rem); Spacing --space-l-3xl: clamp(1.5rem, 0.5604rem + 4.6779vi, 5rem) (dist/global.css).",
   "art": "website"
  },
  {
   "seite": "Ahmad Shadeed (ishadeed.com)",
   "url": "https://ishadeed.com/",
   "auszeichnung": "",
   "beobachtung": "Artikel-Kartentitel mit Container-Einheit: font-size: clamp(14px, 14px + 3cqw, 20px); Hero-Headline clamp(1.5rem, 1.25rem + 1.25vw, 2.375rem) (Inline-CSS, _astro/index.C2H5FnqN.css).",
   "art": "website"
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Case-Study-Karussell mit --case-study-carousel-card-fluid-width: 26.27cqi und --carousel-hover-scale-target: 1.036 (Inline-Style im HTML).",
   "art": "website"
  },
  {
   "seite": "Vercel",
   "url": "https://vercel.com/",
   "auszeichnung": "",
   "beobachtung": "Illustrationen/Visuals in Container-Einheiten skaliert: size-[calc(80/872*100cqi)] → 9.17431cqi, h-[12.5cqi], h-[11.01cqw]; Headings mit --font-size: clamp(12px, var(--computed-font-size), 32px) (Tailwind-CSS-Chunks).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Utopia – Fluid Responsive Design (Rechner und Erklärung)",
   "url": "https://utopia.fyi/"
  },
  {
   "titel": "caniuse – CSS Container Query Units",
   "url": "https://caniuse.com/css-container-query-units"
  },
  {
   "titel": "MDN – clamp()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/clamp"
  }
 ],
 "kombinierbar_mit": [
  "schrift-hero-viewportbreit",
  "text-box-trim",
  "lesesatz-text-wrap",
  "eine-familie-wenig-gewichte",
  "bento-grid-interaktiv"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Studio-Seite in einem ziehbaren Rahmen: Headline, Lead, Kartentitel und Wortmarke wachsen stufenlos mit, Karten richten ihre Titel nach der eigenen Breite.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "skala": "Utopia, 18 px @ 320 px → 20 px @ 1240 px, Verhältnis 1.2 → 1.333",
   "step_0": "clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem)",
   "step_1": "clamp(1.35rem, 1.24rem + 0.55vi, 1.6663rem)",
   "step_6": "clamp(3.3592rem, 2.0884rem + 6.354vi, 7.0128rem)",
   "step_minus_1": "0.9375rem (fest)",
   "space_xs_s": "clamp(0.5625rem, 0.4973rem + 0.3261vi, 0.75rem)",
   "space_s_l": "clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem)",
   "space_m_xl": "clamp(1.6875rem, 0.9701rem + 3.587vi, 3.75rem)",
   "kartentitel": ".karte { container-type: inline-size } h3 { font-size: clamp(1.125rem, 0.5rem + 5cqi, 2.25rem) }",
   "kartentitel_ohne_cqi": "clamp(1.3125rem, 1.1168rem + 0.9783vi, 1.875rem) (Vergleichsvariante)",
   "wortmarke": "font-size: calc((100cqi - 2 * var(--space-s-l)) / 6.9); letter-spacing -0.045em; line-height 0.8",
   "breakpoints_vergleich": "h1 44 / 64 / 88 / 112 px, Lead 21 / 26 px, Kartentitel 20 px, Wortmarke 41 / 72 / 108 / 144 px bei 560 / 800 / 1040 px",
   "h1": "font-weight 500, line-height 0.96, letter-spacing -0.035em, max-width 13ch, text-wrap balance",
   "container_bereich_px": "320 bis 1240",
   "demo_hinweis": "In der Demo steht cqi statt vi, weil ein Rahmen (container: seite / inline-size) den Viewport spielt.",
   "vorfuehrung_ms": 9000,
   "vorfuehrung_breite": "Kosinus zwischen voller Breite und 340 px",
   "ui": "150 ms cubic-bezier(0.16, 1, 0.3, 1)"
  },
  "ausloeser": "ziehen",
  "touch": "Startet 1 : 1 in Gerätebreite (340 px). Regler und breiterer Griff ändern die Breite bis 1240 px; breitere Rahmen werden verkleinert dargestellt, damit nichts waagerecht scrollt.",
  "reduziert": "Das Muster selbst hat keine Bewegung. Die Vorführung wechselt hart zwischen festen Breiten (voll, 768, 480, 360 px) statt fließend zu ziehen.",
  "korrekturen": {
   "beschreibung": "Jede Stufe der Typo-Skala wächst stufenlos zwischen einer Mindest- und einer Höchstgröße, statt an Breakpoints zu springen: font-size: clamp(min, rem + vi, max). Die Skala entsteht meist mit einem Rechner wie Utopia aus zwei Basisgrößen und zwei Verhältnissen. Sie liegt als Custom Properties vor (--step-0 bis --step-9), Abstände folgen derselben Logik. Container-Query-Einheiten (cqi, cqw: 1 % der Containerbreite) koppeln Größen an die Komponente statt an den Viewport. Dieselbe Karte hat im schmalen Seitenslot einen kleineren Titel als im Hauptbereich.",
   "warum_es_wirkt": "Typografie wirkt auf jeder Breite wie gesetzt. Es gibt keine plötzlichen Sprünge, große Headlines nutzen die Desktop-Fläche und sprengen trotzdem kein Telefon. Mit cqi werden Komponenten wirklich wiederverwendbar, ideal für Template-Baukästen.",
   "wann_einsetzen": "Für jede Typo-Skala und jedes Abstandssystem. Für Komponenten-Bibliotheken und Templates mit unterschiedlich breiten Slots. Für Wortmarken, die die Containerbreite füllen sollen.",
   "wann_nicht": "Fließtext mit einem Minimum unter etwa 16 px oder zu steiler Steigung (Zoom, WCAG 1.4.4). Reine vw-Werte ohne rem-Anteil. Container-Einheiten ohne gesetzten container-type: Sie fallen dann auf den Viewport zurück.",
   "varianten": [
    "Utopia-Skala als Tokens (--step-0 bis --step-9)",
    "Abstands-Paare wie --space-s-l: clamp(…) für fließende Abstände",
    "Komponenten-Titel in cqi, z. B. clamp(14px, 14px + 3cqw, 20px)",
    "Komponentenbreiten in cqi, z. B. Karussell-Karte 26.27cqi",
    "Wortmarke über 100cqi, die genau die Breite füllt (siehe schrift-hero-viewportbreit)",
    "Zoom-sicherer Mittelterm: rem + vi statt nur vw",
    "Fließende Zustände: Radius, Abstand, color-mix()-Anteil und Schatten aus --p: progress(100cqi, 20rem, 60rem), Rückfall ein fester Zwischenwert"
   ],
   "umsetzung": "Skala mit Utopia erzeugen, z. B. 18 px bei 320 px bis 20 px bei 1240 px, Verhältnis 1.2 bis 1.333. Ablegen als :root { --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem); … }. Komponenten: .karte { container-type: inline-size } und .karte h3 { font-size: clamp(1.125rem, 0.5rem + 5cqi, 2.25rem) }. Achtung: cqi bezieht sich auf die Inhaltsbreite des nächsten Containers; ein Element mit container-type misst sich an seinem Vorfahren. Immer rem im Mittelterm, Minimum für Fließtext mindestens 1rem, Steigung bei Fließtext flach halten (höchstens etwa 0.5vi). Zoom-Test: Bei 200 % muss Text sichtbar wachsen. Faustregel: Maximum höchstens 2,5 × Minimum.",
   "mobil": "Kern des Musters: Die Mindestwerte bestimmen die Größe auf dem Telefon. Das Headline-Minimum so wählen, dass lange deutsche Komposita nicht aus der Zeile ragen, notfalls hyphens: auto.",
   "reduzierte_bewegung": "Nicht relevant, das Muster bewegt nichts.",
   "barrierefreiheit": "Reine vw- oder cqi-Werte ignorieren den Browser-Zoom. Deshalb immer einen rem-Anteil einbauen und das Verhältnis von Maximum zu Minimum begrenzen, damit 200 % Zoom wirkt (WCAG 1.4.4). Container-Einheiten im Fließtext vorsichtig einsetzen."
  },
  "geprueft": "03.11.2026",
  "notiz": "Ein ziehbarer Rahmen spielt den Viewport (container: seite / inline-size), daher steht in der Demo cqi, wo auf echten Seiten vi steht. Live-Messmarken zeigen die berechneten px. Umschalter: clamp + cqi, ohne cqi (alle Kartentitel gleich groß, egal wie breit die Karte) und Breakpoints (sichtbare Sprünge). Polster liegt auf dem inneren Element, damit 100cqi der vollen Rahmenbreite entspricht. Vorführung: Rahmen atmet in 9 s zwischen voller Breite und 340 px. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --tinte-leise Alpha .56 → .66 (5,3:1); Akzent als Schrift auf Papier #a8441f (neues Token --akzent-text), Lineal-Zahl auf Dunkel #d4643a; Wortmarke ohne white-space: nowrap (passt weiter auf eine Zeile, bricht bei Textabständen 1.4.12 um statt abgeschnitten zu werden); Kontrastmodus-Rahmen für Knöpfe. Varianten 03.11.2026: Umschalter um „progress()“ ergänzt (?v=basis|zustaende-progress), die drei Typo-Ansichten bleiben die Grundvariante basis. --p als registrierte Zahl am Seiteninhalt, Karten gleiten zwischen schlichter Fläche (2 px Radius, 10 px Polster, 3 % Akzent, fast kein Schatten) und weicher Karte (24 px, 28 px, 15 %, Schatten). Kontrast an beiden Enden gerechnet. Selbsturteil 4.",
  "varianten": [
   {
    "id": "basis",
    "name": "Fließende Schrift mit clamp() und cqi",
    "wann": "Jede Seite mit Typo-Skala: Headline, Lead, Kartentitel und Wortmarke wachsen stufenlos; Vergleich mit „ohne cqi“ und Breakpoints im selben Rahmen.",
    "werte": {
     "skala": "Utopia 18 → 20 px, 1.2 → 1.333",
     "kartentitel": "clamp(1.125rem, 0.5rem + 5cqi, 2.25rem)",
     "rezept": "kreativstudio-buehne (Studio Halde, Leipzig)",
     "details": "siehe bau.werte"
    }
   },
   {
    "id": "zustaende-progress",
    "name": "Fließende Zustände mit progress()",
    "wann": "Wenn außer der Schrift auch Radius, Abstand, Farbton und Schatten mit der Breite mitgehen sollen, etwa bei Karten in SaaS, D2C und Kreativstudio.",
    "werte": {
     "p": "@property --p { syntax: <number>; inherits: true; initial-value: 0.5 } und am Seiteninhalt --p: progress(100cqi, 20rem, 60rem), also 0 bei 320 px und 1 ab 960 px; registriert, damit 100cqi einmal gegen den Seitenrahmen auflöst und nicht in jeder Karte",
     "rueckfall": "--p: 0.5 (fester Zwischenwert), progress() nur in @supports (width: calc(progress(1px, 0px, 2px) * 1px))",
     "radius": "Karte calc(2px + var(--p) * 22px), Bild calc(1px + var(--p) * 13px)",
     "abstand": "Polster calc(10px + var(--p) * 18px), Spalt im Raster calc(12px + var(--p) * 20px)",
     "farbanteil": "background: color-mix(in oklab, #c4542b calc(3% + var(--p) * 12%), #fffdf8)",
     "schatten": "0 calc(1px + p × 17px) calc(2px + p × 38px) calc(p × −14px) rgb(26 25 23 / calc(.06 + p × .22))",
     "kontrast": "Text #1a1917 auf 3 % 16,4 : 1, auf 15 % 14,0 : 1; leiser Text (Alpha .66) 5,5 bzw. 5,1 : 1; Akzent-Schrift #a8441f 5,6 bzw. 4,8 : 1",
     "anzeige": "Messmarke „p 0,77 · r 19 px“ mit Balken in der ersten Karte",
     "baseline": "progress() seit September 2026 Baseline (Chrome 138, Safari 26, Firefox 155)",
     "vorfuehrung": "wie basis: Rahmen atmet in 9 s zwischen voller Breite und 340 px; in der Vorschau stehen die Karten oben"
    }
   }
  ]
 }
}