{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "sektionskante-shape",
 "name": "Responsive Sektionskanten mit shape()",
 "name_en": "Responsive section edges with CSS shape()",
 "kurz": "Vier Sektionskanten mit fester Höhe in rem: Bogen, Welle, Schräge und Riss wachsen mit dem ziehbaren Container in die Breite, nie in die Höhe.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "ruhig",
  "verspielt"
 ],
 "technik": [
  "css",
  "clip-path",
  "shape()"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Unterkante einer Sektion ist kein Strich, sondern eine Form: ein flacher Bogen, eine Welle, eine Schräge oder ein gerissener Rand. Die Höhe der Kante bleibt fest, etwa 2rem, ihre Breite folgt stufenlos dem Container. So sieht der Bogen am Telefon und am breiten Bildschirm gleich aus, statt sich wie ein gestrecktes SVG zu verzerren.",
  "warum_es_wirkt": "Eine einzige wiederkehrende Kante aus der Marke (Wasserlinie, Hang, Holzkante, Papierriss) gliedert die Seite ohne Linien und ohne Kicker. Die Starter Haubentaucher und Sievers nutzen genau diese Idee. Als Muster wird sie wiederverwendbar und bleibt an jeder Breite sauber.",
  "wann_einsetzen": "Wenn die Marke eine Form hergibt: Weinberg-Hang, Seeufer, Werkstatt-Schräge, Papierkante. Zwischen Hero und erstem Kapitel oder vor dem Footer.",
  "wann_nicht": "Nicht als Deko ohne Bezug zur Marke. Nicht zwischen jeder Sektion (höchstens zwei Kanten pro Seite). Keine Wellen bei Kanzlei, Praxis oder Bestattung. Nicht animiert als Dauerbewegung. Generik-Gefahr: die Welle aus Landingpage-Baukästen der 2010er.",
  "varianten": [
   "bogen: flacher Bogen mit fester Höhe",
   "welle: zwei bis drei Wellen über die Breite",
   "schraege: gerade Schräge (geht auch mit polygon)",
   "riss: unregelmäßige Kante aus vielen Punkten, wie gerissenes Papier"
  ],
  "umsetzung": "1. Token --kante-hoehe (z. B. 2rem) und --kante-form im Rezept festlegen.\n2. Sektion mit clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - var(--kante-hoehe)), curve to 0 calc(100% - var(--kante-hoehe)) with 50% 100%, close) für den Bogen. Welle und Riss mit mehreren Segmenten.\n3. padding-block-end mindestens so groß wie --kante-hoehe, damit kein Inhalt beschnitten wird. Die nächste Sektion mit margin-block-start: calc(var(--kante-hoehe) * -1) darunterschieben.\n4. @supports (clip-path: shape(from 0 0, line to 0 0)) als Schutz. Sonst Schräge per polygon(), Welle per mask mit radial-gradient, im Zweifel gerade Kante.\n5. Kantenhöhe in rem, damit sie bei Zoom mitwächst.\n6. Nicht animieren. Falls doch, nur bei prefers-reduced-motion: no-preference und einmalig.",
  "mobil": "Gleiche Kantenhöhe, die Form passt sich der Breite an. Der Riss hat weniger Punkte.",
  "reduzierte_bewegung": "Statisch, nichts zu tun.",
  "barrierefreiheit": "Reine Deko, kein Inhalt in der Kante. Innenabstand mindestens so groß wie die Kantenhöhe, damit Text bei 200 % Zoom und erhöhten Textabständen nicht abgeschnitten wird. Kontrast des Textes zur Fläche wie sonst. Im Kontrastmodus (forced-colors) bleibt die Kante unsichtbar, die Sektion trennt dann ein Rahmen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Kantenhöhe 1,5–3rem",
  "sonstiges": "höchstens 2 Kanten pro Seite",
  "herkunft": "eigene Festlegung",
  "quelle": "eigene Festlegung (Techniken-Recherche 03.11.2026)"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Chrome for Developers: CSS shape() for responsive clipping",
   "url": "https://developer.chrome.com/blog/css-shape",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: shape() erlaubt Kurven mit gemischten Einheiten (Prozent, rem, calc), path() nur Pixel. Dadurch werden Ausschnitte responsiv.",
   "art": "artikel"
  },
  {
   "seite": "web-features: shape() function",
   "url": "https://web-platform-dx.github.io/web-features-explorer/features/shape-function",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Baseline seit 24.02.2026 (Chrome 135, Safari 18.4, Firefox 148).",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: CSS shape()",
   "url": "https://developer.chrome.com/blog/css-shape"
  },
  {
   "titel": "MDN: shape()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape"
  },
  {
   "titel": "CSS Tip: Wavy divider (Fallback mit mask)",
   "url": "https://css-tip.com/wavy-divider/"
  }
 ],
 "kombinierbar_mit": [
  "section-overlap-uebergang",
  "theme-farbwechsel-scroll",
  "gebogener-wipe-shape",
  "papier-druck-textur",
  "fluide-typo-clamp-cqi"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Techniken-Recherche 03.11.2026"
  ],
  "pruefnotizen": [
   "Kein Website-Beleg geprüft. Die eigenen Starter (Haubentaucher Wasserlinie, Sievers Uferkante) zeigen die Idee, sind aber keine fremde Referenz.",
   "Das Baseline-Datum liegt vor dem Sechs-Monats-Fenster des Briefs. Die Technik fehlt aber im Bestand als statische Kante; shape() steht bisher nur in gebogener-wipe-shape als Seitenübergang.",
   "Eigene Prüfung beim Bau 03.11.2026 in Headless Chromium 153: shape() mit curve, smooth und calc(100% - 2rem) läuft. Schräge und Riss brauchen keine Kurven; polygon() mit calc() liefert dort dasselbe Bild in jedem Browser. shape() lohnt vor allem für Bogen und Welle.",
   "Im Umsetzungsschritt 2 liegt der Kontrollpunkt bei 50% 100%; dann erreicht die Kurvenmitte nur die halbe Kantenhöhe. Für einen Bogen, der die volle Höhe nutzt, den Kontrollpunkt auf calc(100% + Kantenhöhe) legen (quadratische Kurve: Mitte = Mittelwert aus Endpunkten und doppeltem Kontrollpunkt)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Vier Sektionskanten mit fester Höhe in rem: Bogen, Welle, Schräge und Riss wachsen mit dem ziehbaren Container in die Breite, nie in die Höhe.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "kante_bogen": "--k: 2.5rem; clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - var(--k)), curve to 0 calc(100% - var(--k)) with 32% calc(100% + var(--k)), close)",
   "kontrollpunkt": "calc(100% + Kantenhöhe): die quadratische Kurve erreicht in der Mitte genau die Unterkante; 32 % statt 50 % ergibt einen Hang statt eines Halbmonds",
   "kante_welle": "--k: 2rem; fünf kubische Halbwellen (curve to … with … / …), Stützpunkte 38 % der Halbwelle waagerecht; Wellenzahl fest 2,5, Wellenlänge wächst mit der Breite",
   "kante_schraege": "--k: 3rem; shape(… line to 100% calc(100% - var(--k)), line to 0 100%, close); polygon() liefert dasselbe",
   "kante_riss": "zwei Lagen: Papierkern #fbfaf7 mit --k2: 2.1rem und 0.5rem Versatz, bedruckte Fläche mit --k: 1.5rem; 28 Punkte, unter 40rem Containerbreite 12 Punkte; shape() ergänzt Fasern als quadratische Kurven",
   "kantenzahl": "höchstens 2 je Seite (Hero → Kapitel, Kapitel → Footer)",
   "innenabstand": "padding-block-end: calc(var(--k) + 3–3.5rem); nächste Sektion margin-block-start: calc(var(--k) * -1) und padding-block-start: calc(var(--k) + 3–3.5rem)",
   "token_ort": "--k am Elternteil der Sektionen (.welt), nicht an der Sektion: sonst kennt die folgende Sektion die Kantenhöhe nicht und margin/padding werden ungültig",
   "stapel": "z-index absteigend je Sektion (4, 3, 2, 1); jede Sektion mit Kante braucht einen eigenen Hintergrund",
   "schutz": "@supports (clip-path: shape(from 0 0, line to 0 0)) und :root:not(.rueckfall)",
   "rueckfall_bogen": "border-end-start-radius / border-end-end-radius: 50% var(--k) (symmetrische Halbellipse) + overflow: clip",
   "rueckfall_welle": "mask: radial-gradient(50% 100% at 50% 0, #000 calc(100% - .5px), #0000 100%) bottom left / 7rem var(--k) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--k)) no-repeat (Bogenreihe, feste Wellenlänge 7rem)",
   "rueckfall_schraege_riss": "polygon() mit calc(): gleiches Bild, Riss ohne Fasern",
   "kontrastmodus": "@media (forced-colors: active): clip-path und mask aus, border-block-end 2px CanvasText",
   "browser_live": "Headless Chromium 153 (Arbeitskopie, 03.11.2026): shape() mit curve, calc(100% - 2rem) und calc(100% + var(--k)) läuft, CSS.supports meldet ja. Der Knopf „Rückfall zeigen“ schaltet die Rückfälle (border-radius, mask, polygon) in demselben Browser sichtbar.",
   "browser_rueckfall": "Ohne shape() (Chrome < 135, Safari < 18.4, Firefox < 148) greifen die Rückfälle; nur im Headless-Chromium über den Knopf geprüft, nicht in einem echten alten Browser.",
   "vorfuehrung": "Containerbreite atmet in 8000 ms (Kosinus) zwischen voller Breite und 360 px; reduziert harte Stufen voll / 900 / 600 / 380 px alle 2000 ms",
   "ui": "150 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "schriften": "bogen EB Garamond + DM Mono, welle Fraunces + Commissioner, schraege Special Gothic + Atkinson Hyperlegible Next, riss Schibsted Grotesk + Atkinson + IBM Plex Mono; Werkbank Geist Mono"
  },
  "ausloeser": "ziehen",
  "touch": "Startet 1 : 1 in Gerätebreite. Der Regler im Pult und ein breiterer Griff (14 px) ziehen den Container bis 1240 px; breitere Container werden verkleinert dargestellt, damit nichts waagerecht scrollt. Die Kanten selbst haben kein Touch-Verhalten.",
  "reduziert": "Die Kanten sind statisch. Nur die Vorführung ändert sich: harte Breitenstufen statt Gleiten.",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Vier Welten, je eine Variante: bogen im Rezept weingut-hofladen-herkunft (Weingut Steinrausch, Durbach; Bild huegel-nebel), welle im Rezept gastro-warm-appetitlich (Lotsenstube, Glückstadt; zitronen-tisch), schraege im Rezept handwerk-werkstatt-klartext (Kalkmann Bad, Isny; handwerk-bad), riss im Rezept kultur-programm-haltung (Plakatsaal Gera; typo-plakat). Jede Seite hat genau zwei Kanten. Ziehbarer Container wie in fluide-typo-clamp-cqi, Lineal zeigt Containerbreite und die feste Kantenhöhe in px. Live gesehen in Headless Chromium 153: shape() läuft; die Rückfälle sind über „Rückfall zeigen“ im selben Browser sichtbar, in alten Browsern nicht geprüft. Fallstricke beim Bau: (1) --k an der Sektion lässt margin/padding der Folgesektion ungültig werden, deshalb an .welt; (2) padding-Kurzschreibweise in Sektionsregeln überschreibt den Kanten-Innenabstand; (3) Sektion ohne eigenen Hintergrund zeigt die Kante nicht, weil die Folgesektion durchscheint; (4) im Steckbrief-Entwurf liegt der Bogen-Kontrollpunkt bei 50% 100%, dann nutzt der Bogen nur die halbe Höhe. Kontrast: Schleier aus Kalk hinter dem Hero-Text der Weingut-Welt. Zugang 03.11.2026: nur info:kontrast-von-hand (Text über dem Hügelbild, von Hand geprüft). Selbsturteil 4.",
  "varianten": [
   {
    "id": "bogen",
    "name": "Bogen (Weingut)",
    "wann": "Weingut, Hofladen, Boutique-Hotel: eine Hang- oder Uferlinie aus der Landschaft als wiederkehrende Kante zwischen Hero und Kapitel und vor dem Footer.",
    "werte": {
     "kante": "2.5rem",
     "form": "quadratische Kurve, Kontrollpunkt 32% calc(100% + var(--k))",
     "rueckfall": "Halbellipse per border-radius",
     "rezept": "weingut-hofladen-herkunft"
    }
   },
   {
    "id": "welle",
    "name": "Welle (Gastro am Wasser)",
    "wann": "Gastronomie am Wasser, Fischküche, Verein mit Wasserbezug: zwei bis drei weiche Wellen, nie bei Kanzlei, Praxis oder Bestattung.",
    "werte": {
     "kante": "2rem",
     "form": "5 kubische Halbwellen, Wellenzahl fest",
     "rueckfall": "mask mit radial-gradient, Wellenlänge 7rem",
     "rezept": "gastro-warm-appetitlich"
    }
   },
   {
    "id": "schraege",
    "name": "Schräge (Handwerk)",
    "wann": "Handwerk, Kfz, Bau: eine klare Schräge wie Gefälle oder Dachneigung; läuft mit polygon() überall gleich.",
    "werte": {
     "kante": "3rem",
     "form": "Gerade von links unten nach rechts oben",
     "rueckfall": "polygon() (identisch)",
     "rezept": "handwerk-werkstatt-klartext"
    }
   },
   {
    "id": "riss",
    "name": "Riss (Kultur, Papier)",
    "wann": "Kulturhaus, Druckerei, Papier- und Plakatthemen: unregelmäßige Kante in zwei Lagen mit weißem Papierkern.",
    "werte": {
     "kante": "1.5rem innen, 2.1rem Papierkern, 0.5rem Versatz",
     "punkte": "28, unter 40rem 12",
     "rueckfall": "polygon() ohne Fasern",
     "rezept": "kultur-programm-haltung"
    }
   }
  ]
 }
}