{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "hero-seitenverhaeltnis-fliessend",
 "name": "Hero-Komposition nach Seitenverhältnis",
 "name_en": "Aspect-ratio-driven hero composition (typed arithmetic)",
 "kurz": "Ein Hotel-Hero in einem frei ziehbaren Rahmen: Bildausschnitt und Textlage gleiten stufenlos mit dem Seitenverhältnis, unterhalb von 22rem Höhe steht der Text unter dem Bild.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "F",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "editorial",
  "experimentell"
 ],
 "stimmung_roh": [
  "ruhig",
  "editorial",
  "experimentell"
 ],
 "technik": [
  "css",
  "container-queries"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der Hero kennt kein Quer- und Hochformat-Umschalten. Textblock, Bildausschnitt und Lage der Headline gleiten stufenlos mit dem Seitenverhältnis des Bildschirms. Im Querformat steht der Text links neben dem Motiv, im Hochformat rutscht er Schritt für Schritt nach unten. Der Bildausschnitt wandert mit, sodass das Motiv nie unter dem Text liegt.",
  "warum_es_wirkt": "Foto-Heros brechen sonst an Breakpoints um und schneiden das Motiv falsch an. Hier bleibt die Bildregie in jedem Format erhalten, auch auf Tablets und geteilten Fenstern.",
  "wann_einsetzen": "Foto-Heros mit klarem Motiv: Hotel, Gastro, Mode, Kreativstudio. Wenn ein Bild das Format trägt.",
  "wann_nicht": "Nicht bei Text-Heros ohne Bild. Nicht, wenn das Rezept ohnehin zwei feste Bildschnitte liefert (art direction per picture ist dann einfacher). Nicht als Experiment auf Kundenseiten ohne Test aller Zwischenzustände.",
  "varianten": [
   "objektposition: nur object-position folgt dem Verhältnis",
   "textlage: Textblock wandert zusätzlich"
  ],
  "umsetzung": "1. Hero mit container-type: size und fester Höhe (z. B. 100svh).\n2. --r: calc(100cqw / 100cqh) als Seitenverhältnis. --t: clamp(0, (var(--r) - 0.6) / 1.2, 1) als Grad zwischen Hoch- und Querformat.\n3. object-position des Bildes und inset bzw. Grid-Position des Textblocks über --t interpolieren.\n4. Mindestzustand für sehr kleine Höhen (Zoom): Text unter dem Bild, kein Überlagern.\n5. Fallback: zwei Zustände per @media (orientation).",
  "mobil": "Hochformat ist der Grundzustand. Text unter dem Motiv.",
  "reduzierte_bewegung": "Keine Zeitbewegung.",
  "barrierefreiheit": "Text-Kontrast über dem Bild in jedem Zwischenzustand prüfen (deckende Fläche hinter dem Text). Bei 200 % und 400 % Zoom greift der Mindestzustand. Keine Bewegung über 5 s."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Verhältnis-Spanne 0,6 bis 1,8 als Entwurf",
  "herkunft": "eigene Festlegung",
  "quelle": "eigene Ableitung (Techniken-Recherche 03.11.2026), kein Fremdbeleg"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "MDN: Using typed arithmetic",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Using_typed_arithmetic",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Längen lassen sich teilen, das Ergebnis ist eine Zahl. Grundlage für das Verhältnis aus 100cqw und 100cqh.",
   "art": "artikel"
  },
  {
   "seite": "caniuse: typed division produces unitless number",
   "url": "https://caniuse.com/mdn-css_types_calc_typed_division_produces_unitless_number",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Chrome 140, Safari 26.0, Firefox 158 (13.10.2026). Damit läuft typisierte Arithmetik in allen drei Engines (Nebenbefund 2 der Techniken-Recherche).",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Using typed arithmetic",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Using_typed_arithmetic"
  }
 ],
 "kombinierbar_mit": [
  "fluide-typo-clamp-cqi",
  "schrift-hero-viewportbreit",
  "headline-laufweite-zeilenabstand",
  "zoom-und-textabstand-robust"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Techniken-Recherche 03.11.2026"
  ],
  "pruefnotizen": [
   "Eigene Ableitung aus der Plattform-Funktion, kein Fremdbeleg. Darum F und nur mit Demo-Test aller Zwischenzustände übernehmen.",
   "Abgrenzung zu fluide-typo-clamp-cqi: dort Schrift nach Breite, hier Komposition nach Seitenverhältnis.",
   "Typisierte Arithmetik läuft seit Firefox 158 (13.10.2026) in allen Engines (Nebenbefund 2 der Techniken-Recherche).",
   "Die dritte Variante der Recherche (neigung: Headline-Zeilenlänge passt sich an) ist nicht gebaut; die Demo zeigt objektposition und textlage."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Hotel-Hero in einem frei ziehbaren Rahmen: Bildausschnitt und Textlage gleiten stufenlos mit dem Seitenverhältnis, unterhalb von 22rem Höhe steht der Text unter dem Bild.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "container": ".rahmen { container: held / size } mit fester Breite und Höhe; auf echten Seiten Hero mit Höhe 100svh als Container",
   "verhaeltnis": "--r: calc(100cqw / 100cqh) (Länge durch Länge = Zahl)",
   "grad": "@property --t { syntax: '<number>'; inherits: true; initial-value: 1 }; --t: clamp(0, (var(--r) - 0.6) / 1.2, 1); 0 = Hochformat 0,6, 1 = Querformat 1,8",
   "objektposition": "object-position: calc(80% - 30% * var(--t)) calc(58% - 6% * var(--t)); Haus liegt bei x ≈ 68 % des Bildes",
   "mittelfeld": "scale: calc(1 + 0.25 * sin(var(--t) * 180deg)), transform-origin 72% 100%: fast quadratisch rückt das Haus über den Text",
   "textlage_bild": "height: calc(100% - (1 - var(--t)) * 30%), object-position 78% 50%, scale: calc(1 + 0.18 * (1 - var(--t))) mit transform-origin 72% 100% (Haus rückt im Hochformat über den Text)",
   "textlage_text": "top: calc(t * 50% + (1 - t) * (100% - Rand)); translate: 0 calc(t * -50% + (1 - t) * -100%); width: calc(t * min(30rem, 40%) + (1 - t) * (100% - 2 * Rand)); left: calc(Rand + t * 2cqw)",
   "textflaeche": "deckend #FEF2E3, Text #3E3A37 (11 : 1), Polster clamp(18px, 3cqmin, 32px), Headline Newsreader 350 clamp(2rem, 1rem + 4.2cqmin, 4.25rem), opsz 72; Lead clamp(.9375rem, .8rem + .6cqmin, 1.0625rem)",
   "rand": "clamp(16px, 4cqw, 48px)",
   "navigation": "dunkle Schrift #2b2725 auf hellem Himmel, Verlauf rgba(243, 238, 231, .6) → 0 als Sicherheit",
   "mindestzustand": "@container held (height < 22rem): Spalte mit Navigation, Bild 60cqh, Text darunter; der Bereich scrollt, nichts überlagert",
   "rueckfall": "@container held (orientation: portrait) → --t: 0, sonst 1 (auf Seiten: @media (orientation)); Schalter „Rückfall: zwei Zustände“",
   "browser_live": "Headless Chromium 153 (Arbeitskopie, 03.11.2026): calc(100cqw / 100cqh) ergibt eine Zahl, @property --t wird als Zahl berechnet (Anzeige im Kopf liest getComputedStyle), sin() läuft.",
   "browser_rueckfall": "Zwei Zustände über den Schalter im selben Browser gesehen; ein Browser ohne typisierte Arithmetik (vor Chrome 140, Safari 26, Firefox 158) ist nicht geprüft.",
   "vorfuehrung": "Rahmen gleitet in 10000 ms (Kosinus) von Querformat (volle Breite × Breite/1,9) zu Hochformat (400 × 680) und zurück; reduziert Formate 16:9, 1:1, 9:16, 4:3 alle 2200 ms",
   "ui": "150 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "herkunft": "eigene Ableitung, kein Fremdbeleg"
  },
  "ausloeser": "ziehen",
  "touch": "Startet als Hochformat in Gerätebreite (Höhe 1,6 × Breite, höchstens 640 px). Regler für Breite und Höhe, Formatknöpfe und der runde Eckgriff (28 px, Trefferfläche 48 px) ändern den Rahmen.",
  "reduziert": "Das Muster hat keine Zeitbewegung. Die Vorführung springt zwischen festen Formaten statt zu gleiten.",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Rezept boutique-hotel-gastgeber, erfundenes Gästehaus Uferlicht am Großen Plöner See (Plön), Bild hotel-haus-am-see. Newsreader und Mona Sans. Ehrlich als eigene Ableitung gekennzeichnet: kein Fremdbeleg, nur die MDN-Doku zur typisierten Arithmetik. Frei ziehbarer Rahmen (Breite und Höhe) mit Formatknöpfen und Skala für --t. Zwei Varianten (?v=objektposition|textlage); die dritte Idee der Recherche (neigung) ist nicht gebaut. Live gesehen in Headless Chromium 153: Verhältnis als Zahl, @property, sin(). Fallstricke: absolut positioniertes img mit inset und height: auto nimmt die Bildproportion statt der Fläche, darum height per calc; im Hochformat steht der Text unten verankert, damit er bei kleinen Rahmen nicht abgeschnitten wird; im fast quadratischen Mittelfeld lag das Haus unter dem Text, darum skaliert das Bild dort um bis zu 25 % vom unteren Rand aus. Zugang 03.11.2026: nur info:kontrast-von-hand (Navigation über dem Himmel, dunkle Schrift). Selbsturteil 4.",
  "varianten": [
   {
    "id": "objektposition",
    "name": "Nur der Bildausschnitt",
    "wann": "Foto-Hero mit festem Textblock unten links (Hotel, Gastro): nur der Ausschnitt folgt dem Format, das ist die sicherste Form.",
    "werte": {
     "text": "fest unten links",
     "bild": "object-position und scale nach --t"
    }
   },
   {
    "id": "textlage",
    "name": "Textblock wandert mit",
    "wann": "Großes Motiv mit viel Himmel oder Wand (Hotel, Mode, Kreativstudio): im Querformat steht der Text links neben dem Motiv, im Hochformat unter ihm.",
    "werte": {
     "text": "top, translate, width und left nach --t",
     "bild": "Höhe calc(100% - (1 - t) × 30%)"
    }
   }
  ]
 }
}