{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "editorial-magazin-layout", "name": "Editorial-/Magazin-Layout", "name_en": "Editorial / magazine layout", "kurz": "Ein Journalbeitrag in drei Satzspiegeln (Magazin, Zeitung, Kunstbuch) auf einem 12er-Raster, mit Initiale, Pull-Quote, Marginalie, Zeilen-Reveal und leichter Bildparallaxe.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "stimmung_roh": [ "editorial", "kultiviert", "ruhig", "luxuriös" ], "technik": [ "css", "css-grid", "subgrid", "text-wrap-balance", "initial-letter", "lenis", "splittext" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Eine Seite, gesetzt wie ein gedrucktes Magazin. Ein 12er-Raster mit viel Weißraum trägt eine große Serif, oft mit kursivem Akzent, und eine kleine Grotesk für Labels. Bilder wechseln bewusst Format und Größe: mal randabfallend, mal klein mit Nummer und Bildunterschrift. Dazu kommen Elemente aus dem Print: Rubrik und Kicker, ein größerer Lead, Initiale, Pull-Quote, mehrspaltiger Text, Marginalien und Fußnoten. Haarlinien, Kapitelnummern und Datumszeilen gliedern die Abschnitte. Die Bewegung bleibt leise: weiches Scrollen, Zeilen-Reveals, leichte Bildparallaxe.", "warum_es_wirkt": "Die Seite signalisiert Inhalt, Sorgfalt und Kuratierung. Leser kennen die Konventionen aus dem Print und vertrauen ihnen. Größenkontraste und eine klare Lesereihenfolge führen durch den Text. So entsteht ein Gegenentwurf zum austauschbaren SaaS-Look.", "wann_einsetzen": "Für Case Studies, Journale und Blogs, Studios mit Haltung im Text, Kultur, Mode, Architektur und Personal Brands mit echtem Inhalt.", "wann_nicht": "Bei Conversion-Landingpages mit nur einem CTA. Und wenn es keinen redaktionellen Inhalt gibt, denn dann wirkt das Layout leer.", "varianten": [ "Magazin: Serif-Grotesk-Kombination mit Pull-Quotes", "Zeitung: Titelkopf, Rubriken, Spaltensatz mit Linien", "Kunstbuch: wenige große Bilder, kaum Text", "Magazin-Cover als Hero mit Titel, Ausgabe und Datum" ], "umsetzung": "12-Spalten-Grid. Bilder und Textblöcke per grid-column und grid-row bewusst unterschiedlich platzieren. Varianten lassen sich mit demselben HTML über ein Attribut am Wrapper umschalten. Typo-Feinheiten: text-wrap: balance für Headlines, text-wrap: pretty und hyphens: auto für Fließtext, initial-letter für Initialen (Chrome; Safari mit -webkit-; sonst float als Fallback), hängende Anführungszeichen per negativem text-indent oder hanging-punctuation (nur Safari), font-variant-numeric: oldstyle-nums. Mehrspaltigen Satz mit columns nur für kurze Blöcke verwenden, sonst leidet der Lesefluss. Bilder als
mit
. Zeilen-Reveals mit GSAP SplitText (mask: 'lines'), Parallaxe mit ScrollTrigger scrub. Lenis für weiches Scrollen ist optional und standardmäßig aus: Reveals und Parallaxe laufen mit nativem Scroll. Nur in Eigenprojekten einschalten, nie in Rezepten, die smooth-scroll-lenis ausschließen.", "mobil": "Einspaltig, aber Größenkontraste und Bildformatwechsel bleiben. Marginalien stehen unter dem Absatz, Spaltensatz wird einspaltig. Weiches Scrollen auf Touch-Geräten abschalten.", "reduzierte_bewegung": "Keine Parallaxe, kein weiches Scrollen, keine Zeilen-Reveals. Der Text ist sofort sichtbar.", "barrierefreiheit": "Saubere Überschriftenhierarchie trotz Print-Optik: eine H1, Zwischenüberschriften als H2. Pull-Quotes als
; wiederholt ein Pull-Quote nur den Fließtext, bekommt es aria-hidden. Marginalien als