{ "schema": "fundus-entwurf/1", "stand": "02.11.2026", "basis_url": "https://cecodesign.de/lab/fundus/", "anleitung": "Daten für lab/fundus/entwurf/ (assets/js/entwurf.js): Briefing → Rezept → drei Richtungen (wort, bild, raster). Für Claude ist rezepte-uebersicht.json der Einstieg, nicht diese Datei.", "ziele": { "anfrage": "Anfragen", "termin": "Termine", "buchung": "Buchungen", "kauf": "Verkaufen", "mitglied": "Mitglieder und Spenden", "bewerbung": "Bewerbungen", "zeigen": "Arbeiten zeigen", "info": "Informieren" }, "handlung": { "anfrage": "Anfrage senden", "termin": "Termin vereinbaren", "buchung": "Jetzt buchen", "kauf": "In den Warenkorb", "mitglied": "Mitglied werden", "bewerbung": "Jetzt bewerben", "zeigen": "Arbeiten ansehen", "info": "Mehr erfahren" }, "stimmungen": [ "ruhig", "editorial", "präzise", "luxuriös", "filmisch", "verspielt", "laut", "warm", "experimentell" ], "heros": { "schrift-hero-viewportbreit": "wort", "typo-maske-medien": "wort", "echo-stacked-type": "wort", "meta-labels-hud-typografie": "wort", "fluessig-marmor-hintergrund": "wort", "testimonials-neu-gedacht": "wort", "zahlen-fakten-section": "wort", "prompt-hero-eingabefeld": "wort", "ascii-dither-pixel-stil": "wort", "cinematic-video-hero": "bild", "bild-scheiben-tiefe": "bild", "bildsequenz-video-scrub": "bild", "collage-scrapbook": "bild", "broken-grid-asymmetrisch": "bild", "elastisches-raster-lag": "bild", "split-screen-sticky-seiten": "raster", "bento-grid-interaktiv": "raster", "blueprint-raster-sichtbar": "raster", "editorial-magazin-layout": "raster", "produkt-ui-hero-perspektiv-tilt": "raster", "gap-decorations-raster": "raster", "projektindex-hover-vorschau": "raster", "case-study-geruest": "raster", "foto-hero": "bild", "foto-hero-mit-leiste": "bild", "foto-hero-wortmarke": "wort", "editorial-magazin-layout?v=cover": "bild", "split-screen-sticky-seiten?v=bild": "bild", "split-screen-sticky-seiten?v=titel": "wort", "schrift-hero-viewportbreit?v=textfit": "wort", "foto-hero-wortmarke?v=im-bild": "bild" }, "basis": [ "vt-cross-document-mpa", "css-view-reveal-nativ", "unterstreichung-varianten", "button-zustaende", "validierung-nach-interaktion", "consent-banner-gestaltet", "fokus-stil-system", "sprunglinks-landmarken", "bewegung-pausieren-schalter", "fehlerseite-leerzustand", "dialog-modal-nativ", "zoom-und-textabstand-robust", "kontrastmodus-forced-colors", "firmendaten-strukturiert", "sofort-navigation-vorladen" ], "rezepte": [ { "id": "architektur-ruhiges-raster", "name": "Architektur: ruhiges Raster", "branche": "Architekturbüro / Planungsbüro / Innenarchitektur", "kurz": "Die Arbeit steht im Vordergrund, die Website tritt zurück: eine Schriftfamilie in einem Schnitt, weiße und hellgraue Flächen, Projektlisten statt Effekte. Bewegung ist kurz und ohne Show, Seitenwechsel laufen über native View Transitions. So arbeiten David Chipperfield, KAAN und Sauerbruch Hutton – kein Award-Feuerwerk.", "stimmung": [ "ruhig", "präzise", "zurückhaltend", "sachlich" ], "stimmung_tags": [ "ruhig", "präzise" ], "begriffe": [ "Architekt", "Architektin", "Architekturbüro", "Planungsbüro", "Innenarchitektur", "Landschaftsarchitektur", "Ingenieurbüro", "Stadtplanung", "Bauplanung" ], "ziele": [ "zeigen", "anfrage" ], "varianten": [], "schrift": { "headline": "hanken-grotesk", "text": "hanken-grotesk", "akzent": "", "groessen": "Stufen mit Faktor 1,25 wie bei Chipperfield (1 / 1.25 / 1.563 / 1.953 / 2.441 / 3.052rem). h1 clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500 (kein Bold), Laufweite -0.02em; Fließtext 1.0625–1.125rem, wght 400, Laufweite -0.012em, Zeilenhöhe 1.45, max-width 50ch; Bildunterschriften/Meta 0.8rem. Kursiv statt fett für Hervorhebungen (KAAN: Book + Book Italic).", "techniken": [ "eine-familie-wenig-gewichte", "fluide-typo-clamp-cqi", "lesesatz-text-wrap", "text-box-trim" ], "alternative": "Paarung schweizer-editorial (switzer + fragment-mono, ITF) – kommt Suisse Intl am nächsten, aber nicht für IONOS-Templates." }, "farben": [ { "token": "grund", "hex": "#FFFFFF", "label": "Grund" }, { "token": "flaeche", "hex": "#E1E3E3", "label": "Fläche/Filter (KAAN bg-dim)" }, { "token": "text", "hex": "#231F20", "label": "Text (Chipperfield)" }, { "token": "text-2", "hex": "#76767A", "label": "Sekundärtext/Meta" }, { "token": "dunkle", "hex": "#1F2323", "label": "dunkle Sektion/Footer (KAAN bg-dark)" }, { "token": "fokus", "hex": "#0022FF", "label": "Fokus/Interaktion (steht in beiden CSS-Dateien)" } ], "signal": "fokus", "farbprinzip": "Achromatisch, die Projektfotos liefern die Farbe. Weiß als Grund, ein kühles Hellgrau für Flächenwechsel, warmes Fast-Schwarz statt #000. Höchstens ein Interaktionston (Fokus/Links).", "stil": "token-swiss-knackig", "stil_ui": "", "ease": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer": { "xs": 200, "s": 350, "m": 500, "l": 700 }, "bewegung_regel": "Eine Kurve für alles aus den Stil-Tokens: Öffnen und Einblenden mit der Eintrittskurve, Schließen mit der Austrittskurve in etwa 70 % der Dauer. Nur Deckkraft und Transform, keine Federn, keine Diagonalen. Unter prefers-reduced-motion: View Transitions aus.", "hero": [ "editorial-magazin-layout", "meta-labels-hud-typografie" ], "hero_variante": [], "hero_varianten": { "editorial-magazin-layout": "cover" }, "hero_beschreibung": "Ein Projektbild randlos mit Bürokopf und Titelzeile wie eine Ausgabe (editorial-magazin-layout, Variante cover), Bildunterschrift „Titel • Ort • Jahr“ und Meta-Labels in Textgröße (meta-labels-hud-typografie). Kein Video, kein Slider, aus der Demo kein Lenis. Template: ein starkes Projektfoto mit Büroname und Leistung.", "hero_aufbau": { "raster": "Bürokopf als Zeile oben wie der Titel einer Ausgabe, darunter ein Bild randlos über die volle Breite (editorial-magazin-layout, Variante cover).", "bild": "Ein Projektfoto, randlos, 3:2 oder Originalformat; kein Slider, kein Video.", "h1": "clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500, unten links über Spalte 1 bis 6, unter dem Bild statt darauf.", "handlung": "Kein CTA-Paar. „Projekte“ als Textlink mit Pfeil unter der Titelzeile, „Kontakt“ im Kopf.", "zusatz": "Bildunterschrift „Titel • Ort • Jahr“ in 0.8rem, Meta-Labels in Textgröße (meta-labels-hud-typografie)." }, "sektionen": [ { "zweck": "Projekte / Werkverzeichnis", "muster": [ "projektindex-hover-vorschau", "flip-zustandswechsel" ], "varianten": { "flip-zustandswechsel": "nativ" } }, { "zweck": "Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …)", "muster": [ "akkordeon-hoehe-auto", "listen-hover-bildvorschau" ], "varianten": { "akkordeon-hoehe-auto": "leistungen" } }, { "zweck": "Projekt-Detailseite", "muster": [ "case-study-geruest", "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Büro / Team", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "raster" } }, { "zweck": "Aktuelles / Auszeichnungen", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "zeitung" } }, { "zweck": "Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)", "muster": [ "kontakt-anfrage-formular", "karte-zwei-klick", "oeffnungszeiten-status" ], "varianten": { "oeffnungszeiten-status": "termin", "karte-zwei-klick": "bild" } } ], "bereiche": { "seitenuebergang": [ "vt-shared-element-morph" ], "navigation": [ "hide-on-scroll-header", "menue-icon-und-label-morph" ], "hover": [ "listen-hover-bildvorschau", "hover-absicht-timing" ], "mikro": [ "einblenden-starting-style", "akkordeon-hoehe-auto" ], "galerie": [ "galerie-shared-element-vollbild", "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer", "kolophon-footer" ], "button": [ "pfeil-icon-button", "kontur-button-zeichnen" ] }, "varianten_demo": { "css-native-karussell": "buehne", "galerie-shared-element-vollbild": "basis", "studio-visitenkarte-footer": "basis", "pfeil-icon-button": "linie", "kontur-button-zeichnen": "ecken", "akkordeon-hoehe-auto": "leistungen" }, "signatur": [ "meta-labels-hud-typografie" ], "button": [ "pfeil-icon-button", "kontur-button-zeichnen" ], "optional": [], "nicht_verwenden": [ { "ids": [ "smooth-scroll-lenis" ], "grund": "Projekttexte und Pläne werden gelesen, Trägheit stört" }, { "ids": [ "crosshair-coordinates-cursor" ], "grund": "Architektur-Klischee, keine der Referenzen nutzt einen eigenen Cursor" }, { "ids": [ "bildstapel-intro", "prozent-zaehler" ], "grund": "keine Referenz hat einen Preloader, Ladezeit geht vor" }, { "ids": [ "webgl-bildverzerrung" ], "grund": "verfälscht Architekturfotografie" }, { "ids": [ "marquee-laufband" ], "grund": "zu laut für die Haltung" }, { "ids": [ "blueprint-raster-sichtbar" ], "grund": "als Deko – nur, wenn das Raster wirklich das Layout trägt" } ], "ton": { "anrede": "Sie", "saetze": "Kurz und sachlich, Substantive tragen. Projekte als „Titel • Ort • Jahr“, Beschreibungen in drei bis fünf Sätzen.", "haltung": "Die Arbeit spricht, die Website tritt zurück. Keine Superlative, keine Selbstbeschreibung.", "beispiele": [ "Wohnen am Kanal. Umbau eines Speichers, 2024.", "Wir planen Schulen, Wohnhäuser und Räume für Kultur." ], "nicht": "„Wir leben Architektur“, „innovative Lösungen“, „visionär“, „ganzheitlich“, Ausrufezeichen." }, "bildsprache": { "licht": "Natürliches Tageslicht, Architekturfotografie in Originalfarbe, stürzende Linien korrigiert.", "ausschnitt": "Unbeschnitten im Original-Seitenverhältnis (Regel); Totale des Baus, dazu Details von Material und Fuge.", "personen": "Selten, höchstens klein als Maßstab im Raum, nie als Motiv.", "formate": [ "3:2", "4:5", "Original" ], "nicht": "Keine Renderings mit Lichtreflexen, keine Stockbilder, kein Zuschnitt auf ein einheitliches Kachelformat, keine Filter oder Duotone." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 80, 128, 200 ], "sektion": "clamp(96px, 12vw, 200px)", "dichte": "luftig", "hinweis": "Weißraum statt Trennlinien (Regel). Große Sprünge zwischen Sektionen, kleine Abstände innerhalb einer Projektzeile: Titel, Ort und Jahr stehen 4 bis 8 px auseinander." }, "raster": { "spalten": 12, "rand": "clamp(20px, 4vw, 64px)", "spalt": "clamp(16px, 2vw, 32px)", "max_breite": "none", "hinweis": "Bilder randlos oder über 8 Spalten, Text in Spalte 1 bis 5 und höchstens 50ch. Projektliste als Liste oder Raster umschaltbar (3 Spalten Desktop, 1 mobil)." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "1px #E1E3E3, nur in Projektlisten und Filtern", "schatten": "keiner", "hinweis": "Keine Pille: Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Nebenaktion als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken)." }, "template": true, "template_variante": false, "starter": false }, { "id": "handwerk-werkstatt-klartext", "name": "Handwerk: Werkstatt und Klartext", "branche": "Handwerksbetrieb (Tischlerei/Schreinerei, Elektro, Sanitär/Heizung, Maler)", "kurz": "Echte Fotos aus Werkstatt und Baustelle, erdige Materialfarben und ein einziger Signalton für 'Anfragen' oder 'Anrufen'. Leistungen, Referenzen und Ablauf stehen klar gegliedert, Telefon und Anfrage sind auf jeder Seite zu erreichen. Bewegung ist knapp und funktional wie in einer Produkt-UI, nicht inszeniert.", "stimmung": [ "bodenständig", "vertrauenswürdig", "materialnah", "direkt" ], "stimmung_tags": [ "warm", "präzise" ], "begriffe": [ "Handwerk", "Tischlerei", "Schreinerei", "Elektriker", "Elektro", "Sanitär", "Heizung", "SHK", "Maler", "Dachdecker", "Zimmerei", "Fliesenleger", "Schlosser", "Metallbau", "Garten- und Landschaftsbau", "GaLaBau", "Bodenleger", "Raumausstatter", "Glaser", "Stuckateur", "Solar", "Wärmepumpe", "Energieberatung" ], "ziele": [ "anfrage", "termin" ], "varianten": [ { "name": "Solar, Wärmepumpe, Energieberatung", "hinweis": "Schrift, Farbe, Stil und Signatur bleiben; vorher-nachher-vergleichsregler zeigt Heizungsraum oder Dach vor und nach der Montage mit deckungsgleichen Fotos." } ], "schrift": { "headline": "special-gothic", "text": "atkinson-hyperlegible-next", "akzent": "", "groessen": "h1 clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic wght 700, wdth 100, Laufweite -0.01em, Zeilenhöhe 1.05 (Holzrausch lg: 3rem / -0.01em / 1); h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); Gewerk-Labels und Zahlenleiste in Special Gothic Condensed One (bzw. wdth 75), 0.8125rem Versal, +0.04em; Fließtext Atkinson Hyperlegible Next mind. 1.0625rem (17px), Zeilenhöhe 1.55; Meta 0.8125rem.", "techniken": [ "fluide-typo-clamp-cqi", "tabellenziffern", "lesesatz-text-wrap" ], "alternative": "Premium-Tischlerei als Eigenprojekt: Headline zodiak oder erode, Text satoshi (ITF) – näher an Holzrausch/deVOL, aber nicht für Templates. Tischlerei-Variante (template-tauglich): eb-garamond als dritte Stimme nur für Projekt-Titel und Kundenzitate, wie bei deVOL." }, "farben": [ { "token": "grund", "hex": "#EFEDEA", "label": "Grund (Holzrausch hellblau)" }, { "token": "flaeche", "hex": "#D3CDC2", "label": "Karten/Flächen (cement)" }, { "token": "flaeche-2", "hex": "#C3B4A5", "label": "Holzton für Akzentflächen (braun)" }, { "token": "flaeche-3", "hex": "#BDC1A9", "label": "Sekundärfläche (grün)" }, { "token": "text", "hex": "#1A1A1A", "label": "Text" }, { "token": "signal", "hex": "#FB6100", "label": "Signal: Anfrage/Anruf (Holzrausch orange; bei SHK z. B. Rot wie thermondo #F60439)" } ], "signal": "signal", "farbprinzip": "Materialfarben als Flächen (Zement, Holz, Salbei), dunkle Schrift, und genau ein kräftiger Signalton, der nur für Anfrage- und Anruf-Buttons gilt. Kein Firmenblau-Verlauf.", "stil": "token-tech-praezise", "stil_ui": "", "ease": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer": { "xs": 70, "s": 110, "m": 150, "l": 240, "xl": 400, "xxl": 700 }, "bewegung_regel": "Bewegung erklärt nur Zustände: Menü auf, Akkordeon auf, Formular gesendet. Einblendungen beim Scrollen höchstens 8 px Versatz plus Deckkraft. Schließen schneller als Öffnen (Austrittskurve des Stils).", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Echtes Foto (Team, Werkstatt, fertiges Projekt) + ein Satz Leistung + Region + zwei CTAs (Anfrage, Telefon). Kein Effekt-Muster; die Zahlen stehen in einer eigenen Sektion direkt darunter.", "hero_aufbau": { "raster": "12 Spalten, Text über Spalte 1 bis 5, Foto über 6 bis 12 bis an den rechten Rand; mobil Foto oben, Text darunter.", "bild": "Echtes Foto (Team, Werkstatt oder fertiges Projekt), 3:2 Desktop, 4:5 mobil.", "h1": "clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic 700, oben im Textblock links.", "handlung": "„Anfrage stellen“ (gefüllt, #FB6100) und „Anrufen“ als tel:-Link mit sichtbarer Nummer, nebeneinander unter dem Leistungssatz.", "zusatz": "Region als eigene Zeile unter der H1; die Zahlenleiste ist eine eigene Sektion direkt darunter; mobil untere Leiste Anrufen / Anfrage / WhatsApp." }, "sektionen": [ { "zweck": "Zahlen & Fakten (seit 19xx, Projekte, Mitarbeitende – nur echte Werte)", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "typo" } }, { "zweck": "Leistungen (bei mehr als 5 Leistungen je Leistung eine Unterseite, Antwort zuerst)", "muster": [ "bild-zoom-in-maske", "akkordeon-hoehe-auto", "leistungsseite-antwort-zuerst" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "bild-zoom-in-maske": "basis", "leistungsseite-antwort-zuerst": "handwerk" } }, { "zweck": "Referenzen / Projekte", "muster": [ "masonry-grid-lanes-galerie", "vorher-nachher-vergleichsregler" ], "varianten": {} }, { "zweck": "So läuft ein Auftrag ab", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Kundenstimmen (eigene Stimmen mit Ort und Gewerk; Google-Bewertungen nur mit Echtheitshinweis)", "muster": [ "testimonials-neu-gedacht", "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "testimonials-neu-gedacht": "zitat", "bewertungsprofil-mit-echtheitshinweis": "pille" } }, { "zweck": "Zertifikate / Innung / Herstellerpartner", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "siegel-nachweis" } }, { "zweck": "Team / Ausbildung / Karriere", "muster": [ "team-ueber-mich-layout", "stellen-karriere" ], "varianten": { "team-ueber-mich-layout": "raster", "stellen-karriere": "wenige" } }, { "zweck": "Was kostet das? (Kostenrechner mit Spanne, Übergabe an die Anfrage)", "muster": [ "kostenrechner-konfigurator", "finanzierung-pflichtangaben" ], "varianten": { "kostenrechner-konfigurator": "bad", "finanzierung-pflichtangaben": "rechner" } }, { "zweck": "FAQ (Kosten, Förderung, Termine)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Anfrage (Leistung, PLZ, Wunschzeitraum, Foto-Upload)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion", "datei-upload-ablage" ], "varianten": { "mehrschritt-anfrage": "plz", "formular-fehlerzusammenfassung": "liste", "datei-upload-ablage": "foto" } }, { "zweck": "Kontakt / Anfahrt / Öffnungszeiten (Werkstatt oder Ausstellung, Adresse als Text, Karte per 2-Klick, Einzugsgebiet, Notdienst)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "karte", "karte-zwei-klick": "bild" } } ], "bereiche": { "navigation": [ "native-popover-dropdowns", "mobile-bottom-navigation" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "druck-feedback" ], "galerie": [ "masonry-grid-lanes-galerie", "galerie-shared-element-vollbild" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ] }, "varianten_demo": { "agentenformular-webmcp": "projekt", "galerie-shared-element-vollbild": "basis", "studio-visitenkarte-footer": "praxis", "fuellung-vom-eintrittspunkt": "basis", "mobile-bottom-navigation": "kontakt", "bild-zoom-in-maske": "basis", "kontur-button-zeichnen": "ecken" }, "signatur": [ "vorher-nachher-vergleichsregler" ], "button": [ "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ], "optional": [ "agentenformular-webmcp" ], "nicht_verwenden": [ { "ids": [ "hide-on-scroll-header" ], "grund": "Telefon und Anfrage müssen immer sichtbar bleiben" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "verzögert, bringt hier nichts" }, { "ids": [ "kreistext-siegel-rotierend" ], "grund": "'Meisterbetrieb'-Siegel ist Template-Klischee; Meisterbrief lieber als echtes Foto oder Logo" }, { "ids": [ "papier-druck-textur" ], "grund": "Holz- oder Papier-Fake-Texturen wirken billig, echte Fotos zeigen das Material" }, { "ids": [ "magnetische-elemente", "cursor-follower-lerp" ], "grund": "Agentur-Gesten, die zu einem Betrieb nicht passen" }, { "ids": [ "scramble-decode" ], "grund": "technisch-kalt, gegen die Branche" } ], "ton": { "anrede": "Sie", "saetze": "Kurz und konkret: Leistung, Ort, Zahl, nächster Schritt. Ein Satz pro Leistung, Ab-Preise offen.", "haltung": "Direkt wie am Telefon, bodenständig, ohne Werbesprech.", "beispiele": [ "Küchen und Einbaumöbel aus eigener Werkstatt in [Ort].", "Rufen Sie an. Wir kommen zum Aufmaß." ], "nicht": "„Ihr kompetenter Partner rund ums Haus“, „Qualität, die überzeugt“, „Wir sind Ihr Partner für …“, „klimaneutral“ ohne Nachweis." }, "bildsprache": { "licht": "Echtes Licht in Werkstatt und auf der Baustelle, auch Arbeitslicht; nicht nachgeschärft, nicht gefiltert.", "ausschnitt": "Hände am Werkstück, Material im Anschnitt, fertiger Raum in der Totale. Vorher und Nachher deckungsgleich aus derselben Position.", "personen": "Ja: das eigene Team bei der Arbeit, mit Einwilligung, Gesicht erlaubt.", "formate": [ "3:2", "4:5", "1:1" ], "nicht": "Keine Stock-Handwerker mit Helm und Daumen hoch, keine Holz- oder Papier-Fake-Texturen, keine Renderings statt echter Projekte, kein „Meisterbetrieb“-Siegel als Deko." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 40, 56, 80, 120 ], "sektion": "clamp(64px, 8vw, 120px)", "dichte": "mittel", "hinweis": "Klar gegliedert, nicht gedrängt: Leistungen als Liste mit 24 px zwischen den Punkten, Zahlenleiste mit 32 px Innenabstand. Mobil eine Leiste unten, darüber 80 px Freiraum am Seitenende." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(16px, 2.4vw, 32px)", "max_breite": "1280px", "hinweis": "Hero asymmetrisch 5/7 (Text links, Foto rechts). Leistungen als Liste mit kurzer Beschreibung, keine Icon-Kacheln. Referenzen als Masonry mit 3 Spalten, mobil 1." }, "form": { "radius_klein": "4px", "radius_gross": "8px", "pille": false, "linie": "1px #D3CDC2 (Zement) zwischen Leistungen und um Formularfelder", "schatten": "keiner", "hinweis": "Flächen trennen sich über die Materialtöne (Zement, Holz, Salbei), nicht über Schatten. Der Signalton #FB6100 ist nur Fläche der Anfrage- und Anruf-Knöpfe." }, "template": true, "template_variante": false, "starter": true }, { "id": "fahrschule-freundlich-buchbar", "name": "Fahrschule: freundlich und buchbar", "branche": "Fahrschule / lokaler Dienstleister mit Online-Buchung (auch Nachhilfe, Kurse)", "kurz": "Nimmt die Angst und führt direkt zur Anmeldung: große, freundliche Headline, eine Klassen- oder Kurswahl als Einstieg, transparente Preise und ein klarer Ablauf in Schritten. Etwas Federung bei Buttons und eine gezeichnete Straße bringen Leben rein, Formulare bleiben aber nüchtern und zugänglich.", "stimmung": [ "freundlich", "ermutigend", "klar", "lokal" ], "stimmung_tags": [ "verspielt", "warm" ], "begriffe": [ "Fahrschule", "Führerschein", "Motorradschule", "Nachhilfe", "Kursanbieter", "Erste-Hilfe-Kurs", "Bootsführerschein" ], "ziele": [ "termin", "buchung" ], "varianten": [], "schrift": { "headline": "bricolage-grotesque", "text": "atkinson-hyperlegible-next", "akzent": "", "groessen": "h1 clamp(2.5rem, 1rem + 6.5vw, 6rem), wght 700, opsz 96, Laufweite -0.02em, Zeilenhöhe 0.98, hyphens:auto (deutsche Komposita wie 'Führerscheinausbildung' sind länger als TOFUs englische Zeilen, deshalb Obergrenze 6rem statt 8.5rem); h2 clamp(2rem, 1rem + 4vw, 4rem); Fließtext 1.125rem, Zeilenhöhe 1.6; Preise mit tabellarischen Ziffern.", "techniken": [ "fluide-typo-clamp-cqi", "tabellenziffern", "headline-laufweite-zeilenabstand" ], "alternative": "Nicht nötig – alles frei. Variante näher an TOFU: Paarung soft-serif-warm (fraunces + hanken-grotesk), ebenfalls template-tauglich." }, "farben": [ { "token": "grund", "hex": "#F8F8EC", "label": "Grund (TOFU cream)" }, { "token": "sektionswechsel", "hex": "#EEF0D8", "label": "Sektionswechsel" }, { "token": "text", "hex": "#142B50", "label": "Text/Navy, Footer" }, { "token": "dunkel", "hex": "#3FBADF", "label": "Sekundär, Links auf Dunkel" }, { "token": "flaeche", "hex": "#FFD60A", "label": "Hervorhebung als Fläche (Kennzeichen-Gelb)" }, { "token": "text-2", "hex": "#566175", "label": "gedämpfter Text" } ], "signal": "text", "farbprinzip": "Helle, warme Grundfläche, dunkles Navy für Vertrauen und Text, ein Himmelblau als Sekundärton und Kennzeichen-Gelb als Fläche für Hervorhebungen (nie Gelb als Textfarbe auf Hell).", "stil": "token-federnd-verspielt", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.34, 1.56, 0.64, 1)", "dauer": { "s": 400, "m": 500, "l": 800 }, "bewegung_regel": "Federung nur für Transform kleiner Elemente (Buttons, Karten, Badges), nie auf Deckkraft oder großen Flächen. Einblendungen mit der Expo-Out-Kurve des UI-Stils ohne Überschwingen. Formulare und Buchungsschritte ohne Federung (150–200 ms, animationsstil_ui token-toggle-asymmetrisch).", "hero": [ "animiertes-select" ], "hero_variante": [], "hero_varianten": {}, "hero_beschreibung": "Klassenwahl statt Prompt: ein Satz Ort + Angebot + nächster Schritt, darunter eine echte Auswahl (Klasse B/B197/A/BE + Standort, animiertes-select), die zu Preis und freien Terminen führt. Kein Fake-Eingabefeld.", "hero_aufbau": { "raster": "12 Spalten: H1 oben über Spalte 1 bis 10, darunter die Auswahl über 1 bis 6; rechts 4 bis 5 Spalten Foto oder der Anfang der gezeichneten Straße.", "bild": "Optional ein Foto 4:5 rechts; die Straße (svg-pfad-zeichnen-scroll) beginnt im Hero und zeichnet sich beim Scrollen.", "h1": "clamp(2.5rem, 1rem + 6.5vw, 6rem), Bricolage 700, oben links, hyphens: auto.", "handlung": "Auswahl Klasse + Standort (animiertes-select) mit Knopf „Preise und Termine“ als Tiefen-Taste; daneben „Anrufen“ als Textlink.", "zusatz": "Zeile „Nächster Theoriestart: [Datum]“ unter der Auswahl; mobil feste untere Leiste Anmelden / Anrufen / WhatsApp." }, "sektionen": [ { "zweck": "Führerscheinklassen & Preise (je Klasse eine Unterseite, Antwort zuerst)", "muster": [ "vergleichstabelle-sticky", "preis-section-editorial", "leistungsseite-antwort-zuerst" ], "varianten": { "vergleichstabelle-sticky": "pakete", "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Anmeldung in 3 Schritten (Klasse & Standort → Daten → Bestätigung)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion" ], "varianten": { "mehrschritt-anfrage": "leiste", "formular-fehlerzusammenfassung": "liste" } }, { "zweck": "In 5 Schritten zum Führerschein (die Straße zeichnet sich als einzige Linie; prozess-timeline-wachsende-linie liefert nur das Raster, ohne eigene Linie)", "muster": [ "prozess-timeline-wachsende-linie", "svg-pfad-zeichnen-scroll" ], "varianten": { "svg-pfad-zeichnen-scroll": "strasse" } }, { "zweck": "Bestanden! / Stimmen (statische Karten mit Vorname, Klasse, Monat; Google-Bewertungen nur mit Echtheitshinweis)", "muster": [ "testimonials-neu-gedacht", "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "testimonials-neu-gedacht": "wand", "bewertungsprofil-mit-echtheitshinweis": "pille" } }, { "zweck": "Fahrlehrer:innen & Fahrzeuge", "muster": [ "team-ueber-mich-layout", "css-native-karussell" ], "varianten": { "team-ueber-mich-layout": "statement", "css-native-karussell": "peek" } }, { "zweck": "Theorie-Termine (Wochenplan; bei weniger als etwa acht Terminen pro Woche eine Tabelle) & Sonderkurse (Erste Hilfe, Intensivkurs als Einzeltermine)", "muster": [ "wochen-kursplan", "programm-kalender", "akkordeon-hoehe-auto" ], "varianten": { "wochen-kursplan": "studio", "programm-kalender": "programm", "akkordeon-hoehe-auto": "basis" } }, { "zweck": "FAQ (Kosten, Dauer, Sprachen, Intensivkurs)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Kontakt & Anfahrt (Bürozeiten, Adresse als Text, Karte per 2-Klick, kurze Frage; Standortliste nur ab zwei Filialen)", "muster": [ "kontakt-anfrage-formular", "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "kompakt", "karte-zwei-klick": "bild" } }, { "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Anmeldung mit Vertragsschluss)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "navigation": [ "native-popover-dropdowns", "mobile-bottom-navigation" ], "scroll": [ "svg-pfad-zeichnen-scroll" ], "schrift_animation": [ "highlight-marker-underline", "marquee-laufband" ], "mikro": [ "fortschrittsring", "animiertes-select" ], "galerie": [ "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "tiefen-taste-3d", "button-zustaende" ] }, "varianten_demo": { "tiefen-taste-3d": "stapel", "mobile-bottom-navigation": "fab", "svg-pfad-zeichnen-scroll": "strasse", "css-native-karussell": "peek", "studio-visitenkarte-footer": "praxis" }, "signatur": [ "svg-pfad-zeichnen-scroll" ], "button": [ "tiefen-taste-3d", "button-zustaende" ], "optional": [], "nicht_verwenden": [ { "ids": [ "interaktives-3d-hero" ], "grund": "ein 3D-Auto ist Deko ohne Nutzen und teuer auf Handys der Zielgruppe" }, { "ids": [ "smooth-scroll-lenis", "fullpage-snap-slides" ], "grund": "Jugendliche und Eltern scannen Preise, Scroll-Kapern nervt" }, { "ids": [ "kinetische-typo-intro", "logo-aufbau-intro" ], "grund": "Anmeldung geht vor" }, { "ids": [ "hold-to-confirm" ], "grund": "Hürde bei der Anmeldung" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach der Anmeldung reicht eine klare Bestätigung mit nächsten Schritten" }, { "ids": [], "grund": "Federkurven auf Formularfeldern oder Deckkraft – flackert" } ], "ton": { "anrede": "du", "saetze": "Kurz, ermutigend, ein Schritt pro Satz. Preise und Fristen als Zahl, nicht als Umschreibung.", "haltung": "Nimmt die Angst, erklärt den Weg. Abschnitte für Eltern (Kosten, Anmeldung Minderjähriger) im gleichen Ton, ohne Jugendsprache.", "beispiele": [ "Dein Führerschein in [Ort]. Starte mit Klasse B.", "Theorie beginnt jeden Montag. Du kannst jederzeit einsteigen." ], "nicht": "„Mit uns sicher ans Ziel!“, Jugendsprache, Emojis, Angstmache vor der Prüfung, Fake-Eingabefeld." }, "bildsprache": { "licht": "Helles Tageslicht draußen, freundlich, eher Vormittag.", "ausschnitt": "Fahrlehrer:in und Fahrschüler:in im oder am Auto, Halbtotale, Blick nach vorn.", "personen": "Ja: echte Fahrlehrer:innen mit Namen und Sprachen; Fahrschüler:innen nur mit Einwilligung, bei Minderjährigen der Eltern.", "formate": [ "4:5", "3:2", "1:1" ], "nicht": "Keine Stock-Teenager mit Schlüssel in der Hand, kein 3D-Auto, keine Verkehrszeichen-Clipart, kein Konfetti." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sektion": "clamp(72px, 9vw, 136px)", "dichte": "mittel", "hinweis": "Großzügig um die Headline, kompakt in Preisen und Formular: Tabellenzeilen 12 px, Formularfelder 16 px Abstand, Schritte des Ablaufs 48 px." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 56px)", "spalt": "clamp(16px, 2vw, 28px)", "max_breite": "1240px", "hinweis": "Headline über 10 Spalten, Auswahl darunter über 6. Preise als Tabs über volle Breite, Ablauf als nummerierte Schritte, die gezeichnete Straße läuft durch den Rand." }, "form": { "radius_klein": "12px", "radius_gross": "20px", "pille": true, "linie": "1px #566175 um Felder, Karten ohne Linie auf #EEF0D8", "schatten": "nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten und Felder ohne Schatten", "hinweis": "Freundlich rund, aber nicht weich: Pillen für Knöpfe und Klassen-Chips, 20 px für Preis- und Stimmenkarten. Gelb #FFD60A nur als Fläche hinter dunklem Text." }, "template": true, "template_variante": false, "starter": false }, { "id": "immobilien-diskret-hochwertig", "name": "Immobilien: diskret und hochwertig", "branche": "Immobilienmakler / Projektentwickler / Hausverwaltung mit Verkauf", "kurz": "Eine klassische Antiqua für Headlines, eine neutrale Grotesk für Fakten, warme helle Flächen und viel Platz für Objektfotos. Für Eigentümer zählt die Bewertung (Lead), für Käufer die Suche – beides ist ab dem ersten Bildschirm erreichbar. Bewegung ist leise: Bilder kommen mit langer Ausklang-Kurve, die UI reagiert in 400 ms.", "stimmung": [ "seriös", "hochwertig", "ruhig", "vertrauensvoll" ], "stimmung_tags": [ "ruhig", "luxuriös" ], "begriffe": [ "Immobilien", "Makler", "Maklerin", "Projektentwickler", "Bauträger", "Hausverwaltung", "Wertermittlung", "Gutachter", "Neubauprojekt" ], "ziele": [ "anfrage" ], "varianten": [], "schrift": { "headline": "libre-caslon-display", "text": "hanken-grotesk", "akzent": "", "groessen": "h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, Laufweite -0.005em, Zeilenhöhe 1.08 – nur ab 2rem einsetzen (Display-Schnitt). Zwischentitel und Fließtext in Hanken Grotesk 400/500, 1.0625rem, Zeilenhöhe 1.55. Labels Versal 0.75rem mit 0.09em (~1.5px wie Inigo). Objektdaten (m², Zimmer, Preis) mit tabellarischen Ziffern.", "techniken": [ "serif-grotesk-duotone", "tabellenziffern", "optische-groessen-opsz" ], "alternative": "Eigenprojekt mit ITF: Headline sentient oder zodiak, Text switzer – näher an Tiempos/Söhne der Referenzen. Template-Alternative mit moderner Serif: newsreader statt libre-caslon-display." }, "farben": [ { "token": "grund", "hex": "#FCFAF5", "label": "Grund (E&V white-linen)" }, { "token": "flaeche", "hex": "#EFE8DF", "label": "Sandfläche/Karten (E&V brown-light, ähnlich Dahler #E8E2DB)" }, { "token": "marke", "hex": "#02385C", "label": "Markenton für Headlines, Footer (Dahler)" }, { "token": "text", "hex": "#313131", "label": "Fließtext" }, { "token": "linie", "hex": "#B5B2AF", "label": "Linien/Meta (Inigo beige)" }, { "token": "signal", "hex": "#ED7F1A", "label": "CTA-Akzent (Dahler) – nur Buttons" }, { "token": "text-2", "hex": "#716F6D", "label": "Meta-Text barrierefrei (4.8 : 1 auf #FCFAF5; #B5B2AF nur für Linien oder Schrift ab 24 px)" } ], "signal": "signal", "farbprinzip": "Warme, fast weiße Flächen und ein Sandton als Bühne für Fotos, ein tiefer Markenton für Headlines und Footer, ein sparsamer Akzent ausschließlich für den Haupt-CTA (Bewertung anfragen).", "stil": "token-editorial-langsam", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "m": 1000, "l": 1200, "xl": 1600 }, "bewegung_regel": "UI (Menü, Filter, Drawer, Formulare) über animationsstil_ui token-toggle-asymmetrisch: Öffnen mit der Expo-Kurve in etwa 400 ms, Schließen schneller mit cubic-bezier(0.7, 0, 0.84, 0). Nur Bilder dürfen die lange Landephase des Editorial-Stils nutzen (clip-path-Aufdeckung plus scale 1.06 → 1).", "hero": [ "foto-hero" ], "hero_variante": [ "prompt-hero-eingabefeld" ], "hero_varianten": { "foto-hero": "randlos-unten-links" }, "hero_beschreibung": "Foto-Hero als Standard: ein echtes Objekt- oder Regionsfoto, ein Satz Positionierung und zwei Wege als Knöpfe: „Angebote ansehen“ (Kaufen/Mieten, Ort) und „Was ist meine Immobilie wert?“. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Objektsuche (Portal-Feed mit Filter) oder ein funktionierendes Bewertungsformular läuft; mit KI-Assistent dahinter direkt am Feld kennzeichnen (Art. 50 KI-VO). Kein Fake-Eingabefeld.", "hero_aufbau": { "raster": "Foto randlos über die volle Breite, Textblock unten links über Spalte 1 bis 6 auf einer ruhigen Bildzone.", "bild": "Ein echtes Objekt- oder Regionsfoto, 16:9 Desktop, 4:5 mobil.", "h1": "clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, unten links.", "handlung": "„Angebote ansehen“ (dunkle Pille) und „Was ist meine Immobilie wert?“ (#ED7F1A), nebeneinander unter der H1. Prompt-Feld nur als hero_variante mit echter Suche.", "zusatz": "Kein Versal-Label über der H1 (C13): Region oder Leistung steht in der H1 oder als ruhige Zeile darunter in der Grundschrift. Suchauftrag erst im Footer. Umsetzung: foto-hero/randlos-unten-links." }, "sektionen": [ { "zweck": "Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)", "muster": [ "css-native-karussell", "facettenfilter-ergebnisliste", "objekt-steckbrief-expose", "karussell-steuerung" ], "varianten": { "objekt-steckbrief-expose": "anzeige", "css-native-karussell": "peek", "facettenfilter-ergebnisliste": "leiste", "karussell-steuerung": "daumen" } }, { "zweck": "Für Eigentümer: Verkaufen / Bewerten / Vermieten (je eine Leistungsseite, Antwort zuerst; auf der Startseite drei Stapelkarten nur mit je einem echten Foto und kurzem, gleich langem Text, sonst drei ruhige Spalten)", "muster": [ "stapelkarten", "leistungsseite-antwort-zuerst" ], "varianten": { "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Marktzahlen der Region", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "diagramm" } }, { "zweck": "Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)", "muster": [ "objekt-steckbrief-expose", "split-screen-sticky-seiten", "galerie-shared-element-vollbild", "richtungsbewusste-uebergaenge" ], "varianten": { "objekt-steckbrief-expose": "kauf", "split-screen-sticky-seiten": "titel", "galerie-shared-element-vollbild": "produkt" } }, { "zweck": "Referenzen / verkaufte Objekte", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "peek" } }, { "zweck": "Team / Standort", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "statement" } }, { "zweck": "Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick)", "muster": [ "kontakt-anfrage-formular", "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "termin", "karte-zwei-klick": "bild" } }, { "zweck": "Ratgeber / Magazin", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "zeitung" } }, { "zweck": "Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)", "muster": [ "testimonials-neu-gedacht", "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "testimonials-neu-gedacht": "zitat", "bewertungsprofil-mit-echtheitshinweis": "pille" } } ], "bereiche": { "seitenuebergang": [ "vt-shared-element-morph" ], "navigation": [ "native-popover-dropdowns", "hide-on-scroll-header" ], "scroll": [ "clip-path-bild-reveal" ], "schrift_animation": [ "split-mask-reveal" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "einblenden-starting-style", "animiertes-select", "toggle-switch" ], "galerie": [ "galerie-shared-element-vollbild", "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer", "footer-newsletter-mit-persoenlichkeit" ], "button": [ "pfeil-icon-button", "button-zustaende" ] }, "varianten_demo": { "bild-zoom-in-maske": "gegen", "pfeil-icon-button": "tausch", "galerie-shared-element-vollbild": "produkt", "css-native-karussell": "peek", "studio-visitenkarte-footer": "basis", "footer-newsletter-mit-persoenlichkeit": "kultur" }, "signatur": [ "richtungsbewusste-uebergaenge" ], "button": [ "pfeil-icon-button", "button-zustaende" ], "optional": [], "nicht_verwenden": [ { "ids": [ "gaussian-splats", "scroll-3d-kamerafahrt" ], "grund": "10–100 MB pro Objekt, Rundgang lieber als verlinkter 360°-Dienst im Exposé" }, { "ids": [ "webgl-bildverzerrung", "zoom-parallax" ], "grund": "Objektfotos müssen unverfälscht wirken" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "Exposé-Daten werden gelesen und verglichen" }, { "ids": [ "kreistext-siegel-rotierend" ], "grund": "Template-Deko" }, { "ids": [ "marquee-laufband" ], "grund": "mit Objekten – Angebote müssen vollständig lesbar sein" }, { "ids": [ "token-luxus-weich" ], "grund": "in voller Länge (1,2–2,4 s) für UI – zu träge beim Durchklicken von Angeboten" } ], "ton": { "anrede": "Sie", "saetze": "Ruhig und vollständig, Fakten mit Einheit. Lagebeschreibung in zwei bis drei Sätzen, keine Aufzählung von Adjektiven.", "haltung": "Diskret und beratend, nie drängend. Eigentümer:innen und Käufer:innen werden getrennt angesprochen.", "beispiele": [ "Häuser mit Geschichte zwischen Fluss und Altstadt.", "Was ist Ihre Immobilie wert? Wir schätzen sie vor Ort ein." ], "nicht": "„Traumimmobilie“, „exklusiv“ in jedem Satz, „Jetzt zuschlagen“, „provisionsfrei“ ohne Prüfung." }, "bildsprache": { "licht": "Tageslicht oder blaue Stunde, ruhig und unverfälscht; keine übertriebene HDR-Bearbeitung.", "ausschnitt": "Objekt in der Totale, Innenräume auf Augenhöhe mit geraden Linien, Details wie Parkett, Fenster, Treppe.", "personen": "Nein in Objektfotos; Makler:innen als einheitliche Porträts im Team.", "formate": [ "4:3", "3:2", "16:9" ], "nicht": "Keine Weitwinkelverzerrung, kein Himmeltausch, keine Handschlag- oder Schlüsselübergabe-Stockfotos, keine Zoom- oder WebGL-Effekte auf Objektfotos." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 72, 112, 160 ], "sektion": "clamp(88px, 10vw, 152px)", "dichte": "luftig", "hinweis": "Viel Platz um Objektfotos; Objektdaten dagegen dicht in einer Zeile (Zimmer, m², Preis mit 16 px Abstand), damit man vergleichen kann." }, "raster": { "spalten": 12, "rand": "clamp(20px, 4vw, 64px)", "spalt": "clamp(16px, 2vw, 32px)", "max_breite": "1440px", "hinweis": "Objektkarten 3 Spalten, Foto 4:3. Exposé 7/5: Bilder links scrollen, Eckdaten und Formular rechts sticky; mobil Eckdaten oben." }, "form": { "radius_klein": "2px", "radius_gross": "0", "pille": true, "linie": "1px #B5B2AF für Linien und Meta-Trenner", "schatten": "keiner", "hinweis": "Bilder und Karten eckig, nur die Haupthandlung ist eine dunkle Pille (pfeil-icon-button, Variante tausch). Der Akzent #ED7F1A bleibt dem einen CTA vorbehalten." }, "template": true, "template_variante": false, "starter": false }, { "id": "gastro-warm-appetitlich", "name": "Gastronomie: warm und einladend", "branche": "Restaurant / Café / Bar / Rösterei mit Café", "kurz": "Fühlt sich an wie das Lokal selbst: warmes Papier-Weiß, eine weiche Serif mit Charakter, Hausfarben aus Einrichtung oder Logo, große Food- und Raumfotos. Karte, Reservierung und Öffnungszeiten sind nie mehr als einen Tipp entfernt. Bilder blenden sanft ein, alles andere bleibt ruhig.", "stimmung": [ "warm", "einladend", "persönlich", "sinnlich" ], "stimmung_tags": [ "warm", "editorial" ], "begriffe": [ "Restaurant", "Café", "Bar", "Bistro", "Bäckerei", "Konditorei", "Rösterei", "Kaffee", "Weinbar", "Eisdiele", "Catering", "Imbiss", "Brauhaus" ], "ziele": [ "buchung", "info", "kauf" ], "varianten": [ { "name": "Rösterei / Café mit Online-Shop", "hinweis": "Shop-Regeln und nicht_verwenden aus d2c-produkt-zuerst gelten zusätzlich; Schrift, Farbe, Stil und Signatur (live-uhr-und-standort mit Öffnungsstatus) bleiben aus gastro." } ], "schrift": { "headline": "fraunces", "text": "commissioner", "akzent": "", "groessen": "h1 clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces wght 450–600, opsz automatisch, SOFT 50–100, Laufweite -0.01em, Zeilenhöhe 1.02; Fließtext Commissioner FLAR 0, wght 400, 1.0625rem, Zeilenhöhe 1.55; Versal-Labels und Karten-Rubriken (Öffnungszeiten, Kategorien) Commissioner FLAR 60–100 als Brücke zur Serif, 0.75rem mit 0.15em (Dishoom); Speisekarte: Gericht 1.125rem/500, Beschreibung 0.9375rem, Preis rechtsbündig mit tabellarischen Ziffern. DM Mono aus der Paarung weglassen – Preise in Mono wirken nach Tech.", "techniken": [ "serif-grotesk-duotone", "optische-groessen-opsz", "tabellenziffern" ], "alternative": "Fine Dining: Paarung garamond-wein (eb-garamond, template-tauglich) oder als Eigenprojekt gambarino/erode (ITF). Für Bars mit Plakatcharakter: young-serif als Headline." }, "farben": [ { "token": "grund", "hex": "#F0ECE0", "label": "Grund (Dishoom)" }, { "token": "text", "hex": "#353839", "label": "Text" }, { "token": "flaeche", "hex": "#7F937A", "label": "Hausfarbe Salbei für Flächen" }, { "token": "dunkle", "hex": "#293E3A", "label": "dunkle Sektion/Footer (Bonanza)" }, { "token": "akzent", "hex": "#EAC16E", "label": "Akzent Senf für Navigation/Badges (Dishoom nav-bg)" }, { "token": "akzent-2", "hex": "#E1A894", "label": "Zweitakzent Rosé, sparsam" }, { "token": "signal", "hex": "#293E3A", "label": "Signal: Haupthandlung als dunkle Pille (Senf nur als Kreis oder Akzent; Salbei trägt keine Schrift: 2,8 : 1 mit Weiß)" } ], "signal": "signal", "farbprinzip": "Warmes Papier-Weiß statt Reinweiß, warme dunkle Schrift, eine bis zwei Hausfarben aus Interieur, Geschirr oder Logo. Food-Fotos immer in voller Farbe; Flächenfarben eher gedeckt, damit das Essen leuchtet.", "stil": "token-editorial-langsam", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "m": 1000, "l": 1200, "xl": 1600 }, "bewegung_regel": "Nur Bilder bekommen eine eigene Einblendung (Aufhellen oder scale 0.96 → 1 mit Deckkraft, ~700 ms wie Dishoom). Text erscheint ohne Effekt oder mit einem einzigen Masken-Reveal für die h1. Karten-Tabs, Reservierung, Warenkorb und Kaufbox kurz und funktional über animationsstil_ui token-toggle-asymmetrisch.", "hero": [ "foto-hero-mit-leiste" ], "hero_variante": [ "cinematic-video-hero" ], "hero_varianten": { "foto-hero-mit-leiste": "karte" }, "hero_beschreibung": "Foto-Hero als Standard: echtes Foto von Raum, Team oder Gericht, dazu Öffnungszeiten, Adresse und „Reservieren“. Video nur als Variante, wenn eigenes, hochwertiges Material vorhanden ist (stumm, Poster, Pause-Knopf).", "hero_aufbau": { "raster": "12 Spalten, Foto über Spalte 1 bis 7 (oder randlos), Textblock über 8 bis 12; mobil Foto oben.", "bild": "Echtes Foto von Raum, Team oder Gericht, 4:5 oder 3:2. Video nur als hero_variante mit eigenem Material.", "h1": "clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces 450–600, links im Textblock.", "handlung": "„Reservieren“ (gefüllt, Hausfarbe) und „Karte ansehen“ (Kontur), darunter Adresse mit Route.", "zusatz": "Statuszeile aus live-uhr-und-standort und oeffnungszeiten-status („18.42 · Küche bis 22 Uhr“); mobil feste Leiste Reservieren / Karte / Route / Anrufen." }, "sektionen": [ { "zweck": "Karte (Mittag / Abend / Getränke)", "muster": [ "speisekarte-editorial", "tabs-pfeiltasten-focusgroup" ], "varianten": { "speisekarte-editorial": "bistro", "tabs-pfeiltasten-focusgroup": "auto" } }, { "zweck": "Haltung / Geschichte des Hauses", "muster": [ "scroll-word-highlight", "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage)", "muster": [ "termin-buchung-zwei-klick", "kontakt-anfrage-formular", "split-screen-sticky-seiten" ], "varianten": { "termin-buchung-zwei-klick": "platzhalter", "split-screen-sticky-seiten": "bild" } }, { "zweck": "Raum & Speisen (Bilder)", "muster": [ "masonry-grid-lanes-galerie" ], "varianten": {} }, { "zweck": "Bewertungen (Google o. a. als Band unter dem Hero oder vor der Anfahrt; nur gepflegt und mit Echtheitshinweis)", "muster": [ "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungsprofil-mit-echtheitshinweis": "band" } }, { "zweck": "Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)", "muster": [ "css-native-karussell", "produkt-kaufbox-varianten", "warenkorb-drawer", "gutschein-konfigurator", "eu-gewaehrleistungshinweis" ], "varianten": { "css-native-karussell": "produktreihe", "produkt-kaufbox-varianten": "kompakt", "warenkorb-drawer": "drawer", "eu-gewaehrleistungshinweis": "kaufbox" } }, { "zweck": "Presse & Auszeichnungen (nur mit echten Erwähnungen und Erlaubnis)", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "auszeichnungen" } }, { "zweck": "Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "kompakt", "karte-zwei-klick": "bild" } }, { "zweck": "Standorte (nur bei mehreren Häusern)", "muster": [ "standortfinder-liste", "oeffnungszeiten-status" ], "varianten": { "standortfinder-liste": "kompakt", "oeffnungszeiten-status": "kompakt" } }, { "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "navigation": [ "mobile-bottom-navigation", "live-uhr-und-standort", "native-popover-dropdowns" ], "scroll": [ "clip-path-bild-reveal" ], "schrift_animation": [ "scroll-word-highlight", "split-mask-reveal" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "einblenden-starting-style", "druck-feedback", "icon-squash-stretch" ], "material": [ "papier-druck-textur" ], "galerie": [ "masonry-grid-lanes-galerie", "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer", "footer-newsletter-mit-persoenlichkeit" ], "button": [ "pfeil-icon-button", "druck-feedback" ] }, "varianten_demo": { "footer-newsletter-mit-persoenlichkeit": "saison", "bild-zoom-in-maske": "gegen", "mobile-bottom-navigation": "basis", "css-native-karussell": "produktreihe", "studio-visitenkarte-footer": "praxis", "pfeil-icon-button": "tausch" }, "signatur": [ "live-uhr-und-standort" ], "button": [ "pfeil-icon-button", "druck-feedback" ], "optional": [], "nicht_verwenden": [ { "ids": [ "graustufen-zu-farbe" ], "grund": "Essen braucht Farbe" }, { "ids": [ "halbton-raster" ], "grund": "frisst Food-Details" }, { "ids": [ "bild-trail-cursor" ], "grund": "Gimmick, lenkt von Karte und Reservierung ab" }, { "ids": [ "smooth-scroll-lenis", "fullpage-snap-slides" ], "grund": "Gäste suchen schnell Öffnungszeiten" }, { "ids": [ "prozent-zaehler", "logo-aufbau-intro" ], "grund": "preloader jeder Art (prozent-zaehler, logo-aufbau-intro) – mobil unterwegs zählt jede Sekunde" }, { "ids": [], "grund": "Speisekarte nur als PDF – nicht lesbar, nicht indexierbar" } ], "ton": { "anrede": "Sie", "saetze": "Kurz und sinnlich, Zutaten statt Adjektive. Öffnungszeiten und Adresse als nüchterne Zeile.", "haltung": "Persönlich wie die Gastgeber:in an der Tür. Ein Café oder eine Bar darf duzen, dann auf der ganzen Seite.", "beispiele": [ "Heute ab 18 Uhr, Küche bis 22 Uhr.", "Wir kochen mit dem, was die Höfe rund um [Ort] liefern." ], "nicht": "„kulinarische Reise“, „Gaumenfreuden“, „mit Liebe gemacht“ ohne Beleg, „nachhaltig“ ohne Nachweis." }, "bildsprache": { "licht": "Warmes Fenster- oder Abendlicht, gerichtete Schatten, Essen in voller Farbe.", "ausschnitt": "Teller von oben oder in 45°, Raum mit Gästen in Unschärfe, Hände beim Anrichten.", "personen": "Ja: Team und Gastgeber:in; Gäste nur unscharf oder mit Einwilligung.", "formate": [ "4:5", "1:1", "3:2" ], "nicht": "Keine eingefärbten oder überlagerten Food-Fotos, kein Graustufen- oder Halbton-Effekt, keine Stockfotos, kein Text auf dem Teller." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 144 ], "sektion": "clamp(72px, 9vw, 128px)", "dichte": "mittel", "hinweis": "Speisekarte dicht und gut scanbar (Gericht und Beschreibung 4 px, Gerichte 20 px auseinander), Bilder mit viel Luft. Öffnungszeiten immer im ersten Bildschirm." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(12px, 2vw, 24px)", "max_breite": "1360px", "hinweis": "Hero asymmetrisch 7/5 (Foto/Text) oder Foto randlos. Karte in 2 Spalten, Preis rechtsbündig. Bildstrecken dürfen randlos laufen." }, "form": { "radius_klein": "6px", "radius_gross": "12px", "pille": true, "linie": "1px #353839 mit 20 % Deckkraft zwischen Gerichten", "schatten": "keiner", "hinweis": "Weich, aber nicht verspielt: 12 px an Fotos und Karten, Pillen nur für Reiter (Mittag, Abend, Getränke) und Badges in #EAC16E." }, "template": true, "template_variante": false, "starter": true }, { "id": "boutique-hotel-gastgeber", "name": "Boutique-Hotel: Gastgeber mit Haltung", "branche": "Hotel / Boutique-Unterkunft / Pension / Ferienapartments", "kurz": "Die Website ist das Foyer: großes Bild oder kurzer Film vom Haus, direkt darunter die Buchungsleiste mit Datum und Gästen. Eine leichte Serif für Stimmung, eine breite Grotesk für Labels, sandige Töne. Weiche, langsame Bildwechsel (clip-path-Reveal, Slideshow mit innerer Gegenbewegung), aber eine schnelle Buchungsstrecke mit eigenem, asymmetrischem UI-Tempo.", "stimmung": [ "gastfreundlich", "entspannt", "hochwertig", "ortsverbunden" ], "stimmung_tags": [ "warm", "luxuriös", "ruhig" ], "begriffe": [ "Hotel", "Boutique-Hotel", "Pension", "Gasthof", "Ferienwohnung", "Ferienhaus", "Apartment", "Bed and Breakfast", "Landhotel", "Gästehaus" ], "ziele": [ "buchung" ], "varianten": [ { "name": "Ferienwohnung / Pension (wenige Einheiten)", "hinweis": "Für Ferienwohnungen, Ferienhäuser und kleine Pensionen mit etwa einer bis acht Einheiten." } ], "schrift": { "headline": "newsreader", "text": "mona-sans", "akzent": "", "groessen": "h1 clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader opsz 72, wght 300–400, Laufweite -0.015em, Zeilenhöhe 1.05; Kursiv für Ortsnamen/Akzente (wie Tiempos Fine Italic bei Hoxton). Labels und Buttons Mona Sans wdth 112–125 (breit wie GT America Extended), 0.75rem Versal, Laufweite 0.06em; Fließtext Mona Sans wdth 100, 1.0625rem, Zeilenhöhe 1.6.", "techniken": [ "serif-grotesk-duotone", "optische-groessen-opsz", "fluide-typo-clamp-cqi" ], "alternative": "Eigenprojekt: Paarung hairline-hero (zodiak + instrument-sans) oder sentient als Headline (ITF). Michelberger-Variante (eine Grotesk, ein Gewicht) template-tauglich mit hanken-grotesk." }, "farben": [ { "token": "grund", "hex": "#F3EEE7", "label": "Grund (Aman Sand)" }, { "token": "flaeche", "hex": "#FEF2E3", "label": "Creme für Buchungsleiste/Karten (Hoxton)" }, { "token": "text", "hex": "#3E3A37", "label": "Text/Footer (Hoxton)" }, { "token": "linie", "hex": "#D5D1C8", "label": "Linien, Rahmen" }, { "token": "text-2", "hex": "#82847F", "label": "Sekundärtext, Meta (Aman)" }, { "token": "hauston", "hex": "#6E5A47", "label": "Hauston für Buttons (frei gewählt aus dem Interieur, hier Beispiel Holz)" }, { "token": "text-3", "hex": "#6A6C67", "label": "Meta-Text barrierefrei (4.6 : 1 auf #F3EEE7; #82847F nur für Linien oder Schrift ab 24 px)" } ], "signal": "hauston", "farbprinzip": "Sand und Creme als Grund, warmes Dunkelbraun-Grau statt Schwarz, ein gedämpfter Naturton aus dem Haus (Holz, Stein, Pflanzen). Kein Gold, keine Verläufe – die Fotos tragen die Stimmung.", "stil": "token-luxus-weich", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer": { "s": 500, "m": 1200, "l": 1400, "xl": 2200 }, "bewegung_regel": "Lange, sanfte Kurven nur für Bilder und Hero-Wechsel; Buchungsleiste, Datumsauswahl und Formulare reagieren in 150–250 ms über animationsstil_ui token-toggle-asymmetrisch. Keine Federn, kein Überschwingen, kein Dauer-Ken-Burns – höchstens einmaliges Zurückskalieren 1.06 → 1.", "hero": [ "foto-hero-mit-leiste" ], "hero_variante": [ "cinematic-video-hero" ], "hero_varianten": { "foto-hero-mit-leiste": "leiste" }, "hero_beschreibung": "Foto-Hero als Standard: ein starkes, echtes Foto von Haus, Zimmer oder Lage, Name und ein Satz zur Lage; die Buchungsleiste liegt halb darüber. cinematic-video-hero nur als Variante mit eigenem, hochwertigem Footage (stumm, Poster, Pause-Knopf, mobil Standbild); Pensionen und Ferienwohnungen bleiben beim Foto.", "hero_aufbau": { "raster": "Foto randlos über die volle Breite bis knapp über die Bildschirmunterkante; Text unten links über Spalte 1 bis 6.", "bild": "Ein starkes, echtes Foto, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Footage, mobil Standbild.", "h1": "clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader 300–400, unten links, Ortsname kursiv.", "handlung": "Buchungsleiste (Anreise, Abreise, Gäste, „Verfügbarkeit prüfen“) liegt halb über der Bildunterkante, über 10 Spalten; mobil als feste untere Leiste.", "zusatz": "Kein Versal-Label über der H1 (C13), der Ort steht kursiv in der H1. Sprachwahl DE/EN im Kopf. Umsetzung: foto-hero-mit-leiste/leiste." }, "sektionen": [ { "zweck": "Buchungsleiste (Datum, Gäste) direkt unter dem Hero", "muster": [ "buchungsleiste-datumsbereich" ], "varianten": { "buchungsleiste-datumsbereich": "leiste" } }, { "zweck": "Zimmer & Suiten", "muster": [ "akkordeon-panels", "galerie-shared-element-vollbild", "karussell-steuerung" ], "varianten": { "galerie-shared-element-vollbild": "produkt", "karussell-steuerung": "zaehler" } }, { "zweck": "Restaurant / Bar / Spa", "muster": [ "split-screen-sticky-seiten", "speisekarte-editorial" ], "varianten": { "split-screen-sticky-seiten": "bild", "speisekarte-editorial": "menue" } }, { "zweck": "Erlebnisse & Umgebung / Was ist los", "muster": [ "editorial-magazin-layout", "programm-kalender" ], "varianten": { "editorial-magazin-layout": "zeitung", "programm-kalender": "programm" } }, { "zweck": "Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)", "muster": [ "css-native-karussell", "gutschein-konfigurator" ], "varianten": { "css-native-karussell": "peek" } }, { "zweck": "Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)", "muster": [ "bewertungsprofil-mit-echtheitshinweis", "bewertungen-verteilung", "testimonials-neu-gedacht" ], "varianten": { "bewertungen-verteilung": "seitlich", "testimonials-neu-gedacht": "zitat", "bewertungsprofil-mit-echtheitshinweis": "mehrere" } }, { "zweck": "Tagungen & Feiern", "muster": [ "split-screen-sticky-seiten" ], "varianten": { "split-screen-sticky-seiten": "bild" } }, { "zweck": "Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)", "muster": [ "karte-zwei-klick", "kontakt-anfrage-formular" ], "varianten": { "karte-zwei-klick": "bild" } }, { "zweck": "Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)", "muster": [ "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg" } } ], "bereiche": { "navigation": [ "vollbild-overlay-menue-bildvorschau", "native-popover-dropdowns", "mobile-bottom-navigation" ], "scroll": [ "clip-path-bild-reveal" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "animiertes-select", "einblenden-starting-style" ], "galerie": [ "galerie-shared-element-vollbild", "slideshow-innere-gegenparallaxe", "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer", "footer-newsletter-mit-persoenlichkeit" ], "button": [ "pfeil-icon-button", "glas-button" ], "recht": [ "widerruf-und-kuendigung-schaltflaeche" ] }, "varianten_demo": { "footer-newsletter-mit-persoenlichkeit": "saison", "bild-zoom-in-maske": "gegen", "glas-button": "frost", "pfeil-icon-button": "tausch", "mobile-bottom-navigation": "basis", "galerie-shared-element-vollbild": "produkt", "css-native-karussell": "peek", "studio-visitenkarte-footer": "gastgeber", "slideshow-innere-gegenparallaxe": "hero" }, "signatur": [ "slideshow-innere-gegenparallaxe" ], "button": [ "pfeil-icon-button", "glas-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "gaussian-splats" ], "grund": "Dateigrößen sprengen die mobile Ladezeit, Zimmerfotos verkaufen besser" }, { "ids": [ "3d-karussell-zylinder" ], "grund": "Zimmerfotos seitlich verzerrt" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "verträgt sich schlecht mit Datums-Popovern und Buchungs-iFrames" }, { "ids": [ "logo-aufbau-intro", "prozent-zaehler" ], "grund": "Gäste wollen sofort Verfügbarkeit sehen" }, { "ids": [ "magnetische-elemente" ], "grund": "Agentur-Geste, passt nicht zum Gastgeber-Ton" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach der Buchung – eine ruhige Bestätigung mit Anreise-Infos ist hochwertiger" } ], "ton": { "anrede": "Sie", "saetze": "Ruhig und gastlich, kurze Sätze mit Ort und Zahl. Preise immer mit „ab“ und Zeitraum.", "haltung": "Gastgeber:in, nicht Buchungsportal. Direktbuchungs-Vorteile klar und ohne Druck.", "beispiele": [ "Zwölf Zimmer am See, zehn Minuten zu Fuß zum Wasser.", "Direkt bei uns gebucht: Frühstück und späte Abreise inklusive." ], "nicht": "„Ihre Auszeit vom Alltag“, „Wohlfühloase“, „einzigartiges Erlebnis“, Countdown oder „Nur noch 1 Zimmer“ ohne echte Zahl." }, "bildsprache": { "licht": "Weiches Tageslicht am Morgen oder Abend, warme Töne, Schatten erlaubt; nichts aufgehellt.", "ausschnitt": "Haus in der Landschaft, Zimmer mit Blick aus dem Fenster, Details wie Bettwäsche, Frühstück, Material.", "personen": "Selten: Gäste von hinten oder klein im Bild, Gastgeber:innen mit Namen; Gästefotos nur mit Einwilligung.", "formate": [ "3:2", "4:5", "16:9" ], "nicht": "Keine Weitwinkel-Zimmer, keine Pool- und Spa-Stockfotos, kein Gold, keine Verläufe, keine 3D-Rundgänge im Hero." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 168 ], "sektion": "clamp(88px, 11vw, 168px)", "dichte": "luftig", "hinweis": "Werte wie im Starter (starter/boutique-hotel-gastgeber/tokens.css: --s-1 bis --s-8, --sektion). Bilder und Kapitel mit viel Luft, die Buchungsleiste dagegen kompakt mit 56 px Höhe." }, "raster": { "spalten": 12, "rand": "clamp(18px, 3.6vw, 56px)", "spalt": "clamp(16px, 2.4vw, 32px)", "max_breite": "1320px", "hinweis": "Hero und Zimmerbilder randlos, Text auf 62ch. Zimmer als 2er-Raster mit 3:2-Bildern, Lage und Anreise 6/6." }, "form": { "radius_klein": "6px", "radius_gross": "6px", "pille": true, "linie": "1px #D5D1C8 für Linien und Rahmen (nur Deko); Feldrahmen #8f877c", "schatten": "keiner; der einzige Material-Effekt ist der Glas-Knopf über dem Hero-Foto (glas-button, Variante frost)", "hinweis": "Knöpfe als Pille (Starter --knopf-radius 999px), Karten und Popover 6 px (Starter --radius)." }, "template": true, "template_variante": false, "starter": true }, { "id": "kreativstudio-buehne", "name": "Kreativstudio: Studio-Bühne", "branche": "Kreativstudio, Digitalagentur, Agentur-Portfolio", "kurz": "Viel Lautstärke durch riesige Typo, Showreel-Video und harten Schwarz-Weiß-Kontrast, aber eine einzige, konsequente Bewegungskurve. Die drei Referenzen setzen alle auf eine neutrale Schweizer Grotesk (Suisse Intl, Lausanne). Den Charakter tragen Größe, Schnitt und Video, Deko-Effekte braucht es nicht. Award-nah, aber gebaut wie ein Produkt: Lenis, GSAP, View Transitions, kein Fake-Loader.", "stimmung": [ "laut", "selbstbewusst", "kinematisch", "präzise" ], "stimmung_tags": [ "laut", "filmisch", "präzise" ], "begriffe": [ "Agentur", "Designstudio", "Kreativstudio", "Digitalagentur", "Werbeagentur", "Motion Design", "Branding", "Webdesign" ], "ziele": [ "zeigen", "anfrage" ], "varianten": [], "schrift": { "headline": "tiktok-sans", "text": "tiktok-sans", "akzent": "dm-mono", "groessen": "h1 clamp(3.5rem, 10vw, 11rem) (K72 setzt 9–11vw), TikTok Sans wdth 75, wght 800, letter-spacing -0.03em, line-height 0.9 (Fantasy .9/.95). h2 clamp(2rem, 4.5vw, 4.5rem), wdth 100, wght 600, -0.02em. Fließtext 1.125rem/1.4, wght 400. Labels DM Mono 0.75rem, Versal, +0.04em. Zwei Breiten derselben Familie ersetzen den Schnittwechsel Suisse/Suisse Condensed bei Fantasy.", "techniken": [ "headline-laufweite-zeilenabstand", "fluide-typo-clamp-cqi", "versal-kondensiert-fit-to-width", "mono-labels-versal" ], "alternative": "cabinet-laut (Cabinet Grotesk 800 + Supreme) oder Switzer als Suisse-Ersatz (ITF-FFL, nicht für Templates)" }, "farben": [ { "token": "grund", "hex": "#0b0b0b", "label": "Grund dunkel / Text" }, { "token": "grund-2", "hex": "#f2f2f2", "label": "Grund hell (Fantasy-Grau)" }, { "token": "text", "hex": "#ffffff", "label": "Text auf Dunkel" }, { "token": "leise", "hex": "#8a8a8a", "label": "Meta und Labels" }, { "token": "signal", "hex": "#ff5a1f", "label": "Signalfarbe, nur CTA, Hover-Fläche, Übergangs-Panel" }, { "token": "grund-3", "hex": "#6B6B6B", "label": "Meta-Text barrierefrei auf hellem Grund (4,8 : 1 auf #f2f2f2; #8a8a8a nur auf dunklem Grund oder für Linien)" } ], "signal": "signal", "farbprinzip": "Schwarz und Weiß tragen 90 % der Fläche, dazu genau eine Signalfarbe für CTA, Hover-Flächen und Seitenübergang (K72: #d3fd50 als einzige Farbe). Sektionen dürfen invertieren (Cuberto: -inverse). Kein Verlauf.", "stil": "token-editorial-langsam", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "m": 1000, "l": 1200, "xl": 1600 }, "bewegung_regel": "Eine Out-Kurve für alles Sichtbare, wie bei allen drei Referenzen. Laut wird es über Größe und Schnitt, nicht über wildere Kurven. Menü-Overlay, FAQ und Formular über animationsstil_ui token-toggle-asymmetrisch (gleiche Öffnen-Kurve, Schließen schneller). Überschwingen höchstens auf kleinen Icons. prefers-reduced-motion: Reveals auf reine Opazität 200 ms.", "hero": [ "schrift-hero-viewportbreit", "cinematic-video-hero" ], "hero_variante": [], "hero_varianten": { "schrift-hero-viewportbreit": "basis" }, "hero_beschreibung": "Schrift-Hero als Standard: Studio-Name bzw. ein kurzes Wort über die volle Breite (schrift-hero-viewportbreit, Variante basis), darunter ein Satz Haltung. cinematic-video-hero nur mit eigenem Showreel-Material in hoher Qualität (stumm, Poster, Pause-Knopf); sonst startet das Showreel als stumme Vorschau in der Sektion direkt danach. Kein Stockvideo.", "hero_aufbau": { "raster": "Wie im Starter: 12 Spalten über die volle Breite; oben eine Label-Zeile (Spalte 1–4, 5–7, 8–9, 10–12), unten rechts ein Satz Haltung, ganz unten die Wortmarke randbündig (schrift-hero-viewportbreit, Variante basis).", "bild": "Kein Bild im Hero; das Showreel 16:9 folgt direkt danach als stumme Vorschau. cinematic-video-hero nur mit eigenem Showreel.", "h1": "clamp(3.5rem, 10vw, 11rem), mindestens 9vw, TikTok Sans wdth 75 / 800, über die volle Breite, Grundlinie an der Unterkante.", "handlung": "Kein CTA-Paar im Hero; „Kontakt“ im Kopf, der große Kontakt-Satz und die Riesen-Wortmarke am Seitenende (footer-cta-riesen-wortmarke).", "zusatz": "Label-Zeile in DM Mono 0.75rem Versal (Studio, Disziplin, Ort, Status); Haltungssatz höchstens 22ch." }, "sektionen": [ { "zweck": "Showreel direkt nach dem Hero", "muster": [ "medien-expansion-scroll", "eigener-videoplayer" ], "varianten": { "eigener-videoplayer": "showreel" } }, { "zweck": "Leistungen (3–4 Felder)", "muster": [ "section-overlap-uebergang" ], "varianten": {} }, { "zweck": "Kunden-Logos (nur mit Freigabe und mindestens etwa 5 bekannten Kunden; Band mit Pause-Knopf)", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "laufband" } }, { "zweck": "Ausgewählte Arbeiten", "muster": [ "projektindex-hover-vorschau", "case-study-geruest", "reading-flow-reihenfolge" ], "varianten": { "reading-flow-reihenfolge": "zeilen" } }, { "zweck": "Haltung / Warum wir", "muster": [ "scroll-word-highlight" ], "varianten": {} }, { "zweck": "FAQ", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "basis" } }, { "zweck": "Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)", "muster": [ "footer-cta-riesen-wortmarke", "kontakt-anfrage-formular", "karte-zwei-klick" ], "varianten": { "karte-zwei-klick": "bild" } } ], "bereiche": { "seitenuebergang": [ "clip-path-reveal-seite", "vt-shared-element-morph" ], "preloader": [ "intro-ohne-wartezeit", "einmal-intro-session" ], "navigation": [ "vollbild-overlay-menue-bildvorschau", "menue-icon-und-label-morph", "hide-on-scroll-header" ], "scroll": [ "smooth-scroll-lenis", "clip-path-bild-reveal", "section-overlap-uebergang" ], "schrift_animation": [ "split-mask-reveal", "text-roll-hover", "marquee-laufband" ], "hover": [ "magnetische-elemente", "bild-zoom-in-maske" ], "cursor": [ "kontextueller-cursor" ], "mikro": [ "druck-feedback", "icon-squash-stretch" ], "galerie": [ "video-vorschau-hover-viewport", "drag-slider-traegheit-loop" ], "footer": [ "footer-cta-riesen-wortmarke", "studio-visitenkarte-footer", "kolophon-footer" ], "button": [ "pfeil-icon-button", "text-roll-hover" ] }, "varianten_demo": { "schrift-hero-viewportbreit": "basis", "studio-visitenkarte-footer": "buehne", "pfeil-icon-button": "kreis-expand", "bild-zoom-in-maske": "basis" }, "signatur": [ "footer-cta-riesen-wortmarke", "text-roll-hover" ], "button": [ "pfeil-icon-button", "text-roll-hover" ], "optional": [], "nicht_verwenden": [ { "ids": [ "cursor-follower-lerp" ], "grund": "Cuberto nutzt einen kontextuellen Cursor mit Icons, keinen nachziehenden Punkt; der Lerp-Follower gilt im Katalog als 2020er-Award-Look" }, { "ids": [ "prozent-zaehler" ], "grund": "Fake-Ladezeit vor dem Showreel verschlechtert LCP; keine der drei Seiten hat einen" }, { "ids": [], "grund": "Aurora-/Glow-Hintergrund (Anti-Muster) – liest sich als KI-Template, passt nicht zum Schwarz-Weiß-Kontrast" }, { "ids": [ "velocity-skew-verzerrung" ], "grund": "und webgl-bildverzerrung auf Case-Bildern – verfälscht Kundenarbeit, die verkauft werden soll" }, { "ids": [], "grund": "Manrope als Textschrift – Cuberto nutzt sie zwar, sie steht aber auf der Claude-Verbotsliste (SaaS-Standard)" }, { "ids": [], "grund": "Mehr als eine Signalfarbe oder mehrere Easing-Kurven parallel – bricht die Konsequenz, die alle drei Referenzen auszeichnet" } ], "ton": { "anrede": "du", "saetze": "Sehr kurz, oft ein Satz pro Zeile, drei bis vier Wörter in der Headline. Cases mit Aufgabe, Idee, Ergebnis.", "haltung": "Selbstbewusst und präzise, Haltung statt Leistungskatalog.", "beispiele": [ "Wir machen Marken laut.", "Hast du etwas, das wir bauen sollen?" ], "nicht": "„Wir sind Ihr Partner für digitale Lösungen“, „360°“, „ganzheitlich“, „Full-Service“, Buzzword-Ketten." }, "bildsprache": { "licht": "Hart und kontrastreich, Kundenarbeit in Originalfarbe; Showreel-Stills scharf.", "ausschnitt": "Case-Bilder formatfüllend, Details der Arbeit, Plakate und Screens im Anschnitt.", "personen": "Team als Porträtreihe im gleichen Licht; kein Teamfoto mit Laptops.", "formate": [ "16:9", "4:5", "3:2" ], "nicht": "Keine Mockup-Laptops mit Stock-UI, keine Aurora- oder Glow-Hintergründe, keine verzerrten oder gewellten Case-Bilder, kein Stockvideo." }, "raum": { "basis_px": 8, "skala_px": [ 4, 6, 8, 12, 16, 24, 40, 56, 112, 176 ], "sektion": "clamp(88px, 12vw, 176px)", "dichte": "mittel", "hinweis": "Werte wie im Starter (starter/kreativstudio-buehne/tokens.css: --abschnitt, --rand, --spalte). Große Sektionssprünge, aber enge Spalten und Label-Zeilen mit 6 px Zeilenabstand." }, "raster": { "spalten": 12, "rand": "clamp(16px, 2.6vw, 40px)", "spalt": "clamp(12px, 1.6vw, 24px)", "max_breite": "none", "hinweis": "Volle Breite mit Rand, kein zentrierter Container. Leistungen als eigene Vollbild-Sektionen, Arbeiten als Index; Anfrage 6/6." }, "form": { "radius_klein": "4px", "radius_gross": "12px", "pille": true, "linie": "1px Linienfarbe auf Schwarz, als Oberkante von Datenzeilen", "schatten": "nur die Hover-Vorschau im Index (Starter: 0 24px 60px -20px rgb(0 0 0 / .6)), sonst keiner", "hinweis": "Bilder und Showreel 4 px, Anfrage-Panel 12 px, Knöpfe als Pille (Starter --knopf-radius 999px; pfeil-icon-button, Variante kreis-expand)." }, "template": false, "template_variante": true, "starter": true }, { "id": "freelancer-stille-visitenkarte", "name": "Freelancer: Stille Visitenkarte", "branche": "Freelance-Designer, Interaction-Designer, Einzelberater mit Portfolio", "kurz": "Eine schmale Lesespalte, ein einleitender Satz statt Hero und Bewegung im 100-ms-Bereich. Die Qualität zeigt sich in Details wie Laufweite, Ziffern, Fokus und Kopier-Feedback, nicht in Effekten. Gebaut wie die Seiten von Paco Coursey, Emil Kowalski und Rauno Freiberg: Grotesk für alles, eine Serif-Kursive als Stimme, Mono für Metadaten.", "stimmung": [ "ruhig", "präzise", "persönlich", "handwerklich" ], "stimmung_tags": [ "ruhig", "präzise" ], "begriffe": [ "Freelancer", "Freiberufler", "Designer", "Designerin", "Illustratorin", "Texter", "Berater", "Portfolio", "Einzelunternehmer", "UX" ], "ziele": [ "zeigen", "anfrage" ], "varianten": [], "schrift": { "headline": "host-grotesk", "text": "host-grotesk", "akzent": "newsreader", "groessen": "Kein Riesen-Hero: h1 als Satz clamp(1.25rem, 2vw, 1.5rem), wght 500, line-height 1.4. h2 1rem, wght 500, Farbe Sekundärgrau. Fließtext 1rem/1.6 (Paco 16px, Leading 20–32px), Klein 0.875rem. Spalte max-width 640px (Paco --content-width), Seite 1072px. Newsreader Italic nur für einzelne Wörter im Satz, 1.05em, opsz auto. Laufweite 0 bis -0.01em. Host Grotesk nur in 400 und 500.", "techniken": [ "eine-familie-wenig-gewichte", "gemischte-schnitte-zeile", "lesesatz-text-wrap", "text-box-trim", "tabellenziffern" ], "alternative": "Switzer oder Satoshi statt Host Grotesk (ITF-FFL); näher an Söhne/Paco ist Switzer" }, "farben": [ { "token": "grund", "hex": "#fcfcfc", "label": "Grund" }, { "token": "text", "hex": "#0b0b09", "label": "Text" }, { "token": "text-2", "hex": "#646464", "label": "Sekundärtext, h2" }, { "token": "linie", "hex": "#e8e8e8", "label": "Linien, Trenner" }, { "token": "flaeche", "hex": "#f0f0f0", "label": "Hover-Fläche" }, { "token": "fokusring", "hex": "#2f5bea", "label": "Fokus-Ring und Link-Hover (einzige Farbe)" } ], "signal": "fokusring", "farbprinzip": "Fast nur Graustufen in 8–10 Stufen (Paco #fcfcfc bis #646464, Emil #0b0b09 bis #f8f8f8), Kontrast über Grauwert statt über Farbe. Höchstens eine Farbe für Fokus- und Link-Zustände. Dark Mode als gleichwertige Variante.", "stil": "token-tech-praezise", "stil_ui": "", "ease": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer": { "xs": 70, "s": 110, "m": 150, "l": 240, "xl": 400, "xxl": 700 }, "bewegung_regel": "Kurze Dauern aus den Tokens, nichts federt, nichts dreht sich. Exits schneller als Entrances (Austrittskurve). Einziges Inszenierungsmoment ist das gestaffelte Einblenden der Intro-Zeilen beim ersten Laden.", "hero": [], "hero_variante": [], "hero_varianten": {}, "hero_beschreibung": "Kein Hero-Muster: ein Intro-Satz in Textgröße (Name, Rolle, Kunden, Ort, 1–2 Wörter kursiv in Newsreader), der beim ersten Laden zeilenweise gestaffelt erscheint (Sektion „Intro-Satz“).", "hero_aufbau": { "raster": "Eine Spalte, 640px, linksbündig; kein eigener Hero-Block.", "bild": "Kein Bild.", "h1": "clamp(1.25rem, 2vw, 1.5rem), Host Grotesk 500, Zeilenhöhe 1.4, als ganzer Satz oben links.", "handlung": "Kein CTA-Paar: E-Mail-Adresse mit Kopier-Feedback (kopieren-feedback) und ein Textlink zu den Arbeiten.", "zusatz": "Der Satz erscheint zeilenweise gestaffelt (gestaffelte-einblendung); 1 bis 2 Wörter in Newsreader Italic; Ort und Rolle in #646464." }, "sektionen": [ { "zweck": "Intro-Satz (ersetzt den Hero)", "muster": [ "gestaffelte-einblendung" ], "varianten": {} }, { "zweck": "Projekte / Arbeiten", "muster": [ "projektindex-hover-vorschau" ], "varianten": {} }, { "zweck": "Angebot / Leistungen (was ich mache, für wen, wie man anfragt)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "basis" } }, { "zweck": "Schreiben / Notizen", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Über mich / Jetzt", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "statement" } }, { "zweck": "Stimmen von Kunden", "muster": [ "testimonials-neu-gedacht" ], "varianten": { "testimonials-neu-gedacht": "zitat" } }, { "zweck": "Kontakt (E-Mail mit Kopier-Feedback, Verfügbarkeit)", "muster": [ "kopieren-feedback", "kontakt-anfrage-formular" ], "varianten": { "kontakt-anfrage-formular": "satz" } } ], "bereiche": { "navigation": [ "theme-umschalter-view-transition" ], "hover": [ "listen-hover-bildvorschau", "hover-absicht-timing" ], "mikro": [ "kopieren-feedback", "gestaffelte-einblendung", "einblenden-starting-style", "druck-feedback" ], "galerie": [ "galerie-shared-element-vollbild" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "pfeil-icon-button", "kopieren-feedback" ] }, "varianten_demo": { "galerie-shared-element-vollbild": "basis", "studio-visitenkarte-footer": "basis", "theme-umschalter-view-transition": "tokens", "pfeil-icon-button": "seitenwechsel" }, "signatur": [ "gestaffelte-einblendung" ], "button": [ "pfeil-icon-button", "kopieren-feedback" ], "optional": [], "nicht_verwenden": [ { "ids": [ "smooth-scroll-lenis" ], "grund": "die Seite wird gelesen; Trägheit stört beim Lesen und ist bei keiner der drei Seiten im Einsatz" }, { "ids": [ "schrift-hero-viewportbreit" ], "grund": "widerspricht der leisen Haltung; die Referenzen beginnen mit Namen oder Satz in Textgröße" }, { "ids": [ "kontextueller-cursor" ], "grund": ", cursor-follower-lerp, magnetische-elemente – Inszenierung statt Präzision" }, { "ids": [ "prozent-zaehler" ], "grund": "und jede Art Preloader – die Seite ist klein und soll sofort stehen" }, { "ids": [ "marquee-laufband" ], "grund": "laut und repetitiv, bricht die Lesespalte" }, { "ids": [], "grund": "Inter als Hauptschrift – Paco nutzt sie, sie steht aber auf der Verbotsliste (KI-Standardlook); Host Grotesk stattdessen" } ], "ton": { "anrede": "du", "saetze": "Ich-Form, ganze Sätze in Textgröße, ein bis zwei kursive Wörter als Stimme. Listen knapp mit Jahr.", "haltung": "Leise und genau. Die Leser:in wird selten angesprochen; bei Beratung für Firmen Sie verwenden.", "beispiele": [ "Ich gestalte Oberflächen für Werkzeuge, die man jeden Tag benutzt.", "Schreib mir, wenn du an etwas Ähnlichem arbeitest." ], "nicht": "„Passionate Designer“, Skill-Balken in Prozent, „Ich brenne für …“, Logo-Wände ohne Kontext." }, "bildsprache": { "licht": "Neutral, Screenshots und Prototyp-Videos scharf auf neutralem Grund; Dark Mode mitgedacht.", "ausschnitt": "Ausschnitt einer echten Oberfläche, auf die Interaktion gezoomt.", "personen": "Höchstens ein Porträt auf der Info-Seite.", "formate": [ "16:10", "4:3", "1:1" ], "nicht": "Keine Bilder auf der Startseite außer als Hover-Vorschau, keine Device-Mockups, keine Stock-Arbeitsplätze." }, "raum": { "basis_px": 4, "skala_px": [ 4, 8, 12, 16, 20, 24, 32, 48, 64, 96 ], "sektion": "clamp(48px, 6vw, 80px)", "dichte": "dicht", "hinweis": "Dichter Rhythmus in einer schmalen Spalte: Zeilen 20 bis 32 px (Paco), Listeneinträge 12 px, Abschnitte 48 bis 80 px. Ruhe entsteht durch den breiten Rand, nicht durch große Sprünge." }, "raster": { "spalten": 1, "rand": "clamp(20px, 5vw, 48px)", "spalt": "24px", "max_breite": "640px (Spalte), Seite 1072px", "hinweis": "Eine Spalte, linksbündig. Jahreszahlen in Listen rechtsbündig in Tabellenziffern. Projektseiten dürfen Bilder bis 1072px zeigen." }, "form": { "radius_klein": "6px", "radius_gross": "8px", "pille": true, "linie": "1px #e8e8e8 als Trenner", "schatten": "keiner; Hover nur über Fläche #f0f0f0", "hinweis": "Konturpille für den Kontakt (pfeil-icon-button, Variante seitenwechsel), 6 px für Hover-Flächen und Kopier-Feedback, 8 px für Vorschaubilder." }, "template": true, "template_variante": false, "starter": false }, { "id": "fotograf-film-bild-zuerst", "name": "Fotografie und Film: Bild zuerst", "branche": "Fotografie, Bewegtbild, Regie, Produktionsfirma", "kurz": "Die Oberfläche tritt fast vollständig zurück: kleine Typo, neutrale Fläche, Bildwechsel per Crossfade, Zähler und Bildunterschrift. Fotografen wie Nadav Kander und Tim Walker animieren praktisch nur die Opazität. Produktionsfirmen wie Partizan setzen auf Video-Vorschau beim Hover und ein 24-Spalten-Raster. Bewegung gibt es nur beim Wechsel zwischen Bildern, nie auf dem Bild selbst.", "stimmung": [ "zurückhaltend", "filmisch", "kuratiert", "ruhig" ], "stimmung_tags": [ "filmisch", "ruhig" ], "begriffe": [ "Fotograf", "Fotografin", "Hochzeitsfotograf", "Videograf", "Filmproduktion", "Regie", "Kamera", "Produktionsfirma" ], "ziele": [ "zeigen", "anfrage" ], "varianten": [], "schrift": { "headline": "instrument-serif", "text": "instrument-sans", "akzent": "fragment-mono", "groessen": "Typo bleibt klein und dient dem Bild. Name/Logo 1.25–1.5rem Instrument Serif, Projekttitel clamp(1.5rem, 3vw, 2.75rem) Instrument Serif 400, line-height 1.1, -0.01em. UI und Text Instrument Sans 0.875–1rem/1.5, wdth 90–100. Bildunterschrift und Zähler („12 / 44“) Fragment Mono 0.75rem, tabular-nums, +0.02em. Kein Text über dem Bild außer im Film-Hero.", "techniken": [ "mono-labels-versal", "tabellenziffern", "text-box-trim", "eine-familie-wenig-gewichte" ], "alternative": "editorial-boska (Boska + Satoshi); für Film-Produktionen Switzer als GT-America-Ersatz" }, "farben": [ { "token": "grund", "hex": "#f4f4f2", "label": "Grund Fotografie" }, { "token": "text", "hex": "#141414", "label": "Text" }, { "token": "bildplatzhalter", "hex": "#e6e6e6", "label": "Bild-Platzhalter vor dem Laden" }, { "token": "text-2", "hex": "#8a8a8a", "label": "Bildunterschrift, Zähler" }, { "token": "grund-2", "hex": "#0e0e0e", "label": "Grund Film-Variante" }, { "token": "grund-3", "hex": "#f2f2f2", "label": "Text auf Film-Grund" }, { "token": "text-3", "hex": "#6D6D6D", "label": "Meta-Text barrierefrei (4.7 : 1 auf #f4f4f2; #8a8a8a nur für Linien oder Schrift ab 24 px)" } ], "signal": "text", "farbprinzip": "Neutrale Fläche, die keine Farbe ins Bild wirft. Hell für Fotografie (warmes Hellgrau wie Nadav #e6e6e6 als Platzhalter), dunkel für Film. Text in einem Ton, Akzentfarbe nur, wenn die Marke sie verlangt.", "stil": "token-kinetisch-inout", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.83, 0, 0.17, 1)", "dauer": { "m": 900, "l": 1200, "xl": 1500 }, "bewegung_regel": "Weiche inOut-Kurve des Stils für Bildwechsel (Crossfade). Bewegt wird die Opazität, nie Position oder Maßstab des Werks. Ausnahme Film-Karten: Video skaliert beim Einblenden einmal von 1.05 auf 1 (0,6 s). Menü, Anfrage und Pakete über animationsstil_ui token-toggle-asymmetrisch.", "hero": [ "cinematic-video-hero" ], "hero_variante": [], "hero_varianten": {}, "hero_beschreibung": "Bild zuerst: ein Werk randlos (Foto oder Standbild), Name und Disziplin in den Ecken (seitenrand-und-ecken-navigation). cinematic-video-hero nur bei Bewegtbild mit eigenem Showreel (stumm, Poster, Pause-Knopf); Fotograf:innen starten mit einem Foto bzw. der kuratierten Auswahl.", "hero_aufbau": { "raster": "Bild randlos über die volle Fläche (100svh), UI in den vier Ecken.", "bild": "Ein Werk oder Standbild; Foto im Originalformat auf neutraler Fläche, Film-Standbild 16:9 formatfüllend. cinematic-video-hero nur mit eigenem Showreel.", "h1": "Name 1.25–1.5rem Instrument Serif oben links; Projekttitel clamp(1.5rem, 3vw, 2.75rem) unten links.", "handlung": "Kein CTA-Paar; Ecken: Index oben rechts, Info und Kontakt unten rechts; Pfeiltasten blättern.", "zusatz": "Zähler „12 / 44“ und Bildunterschrift in Fragment Mono 0.75rem in der unteren Ecke." }, "sektionen": [ { "zweck": "Kuratierte Auswahl (Startseite Fotograf)", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "variable-breiten" } }, { "zweck": "Arbeiten / Regie-Roster (Film)", "muster": [ "video-vorschau-hover-viewport", "projektindex-hover-vorschau", "eigener-videoplayer" ], "varianten": { "eigener-videoplayer": "showreel" } }, { "zweck": "Serien / Projekte", "muster": [ "masonry-grid-lanes-galerie", "galerie-shared-element-vollbild", "skeleton-shimmer" ], "varianten": { "galerie-shared-element-vollbild": "serie", "skeleton-shimmer": "bild-platzhalter" } }, { "zweck": "Archiv / alle Serien (endlose Scroll-Galerie, Footer fest erreichbar)", "muster": [ "endlos-scroll-galerie" ], "varianten": {} }, { "zweck": "Bio", "muster": [ "split-screen-sticky-seiten" ], "varianten": { "split-screen-sticky-seiten": "bild" } }, { "zweck": "Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)", "muster": [ "kontakt-anfrage-formular", "akkordeon-hoehe-auto", "vergleichstabelle-sticky", "karte-zwei-klick" ], "varianten": { "vergleichstabelle-sticky": "pakete", "akkordeon-hoehe-auto": "basis", "karte-zwei-klick": "bild" } } ], "bereiche": { "seitenuebergang": [ "vt-shared-element-morph" ], "preloader": [ "intro-ohne-wartezeit" ], "navigation": [ "seitenrand-und-ecken-navigation", "hide-on-scroll-header" ], "hover": [ "bild-zoom-in-maske", "hover-absicht-timing" ], "mikro": [ "einblenden-starting-style" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild", "video-vorschau-hover-viewport", "masonry-grid-lanes-galerie" ], "footer": [ "studio-visitenkarte-footer", "kolophon-footer" ], "button": [ "kontur-button-zeichnen", "pfeil-icon-button" ] }, "varianten_demo": { "studio-visitenkarte-footer": "buehne", "kontur-button-zeichnen": "zeichnen", "pfeil-icon-button": "linie", "bild-zoom-in-maske": "basis", "css-native-karussell": "buehne", "galerie-shared-element-vollbild": "serie" }, "signatur": [ "endlos-scroll-galerie", "seitenrand-und-ecken-navigation" ], "button": [ "kontur-button-zeichnen", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "graustufen-zu-farbe" ], "grund": "Farbe ist Teil des Werks; Bilder nie entsättigen" }, { "ids": [ "webgl-bildverzerrung" ], "grund": "und svg-filter-verzerrung – verändern das Foto, das der Kunde verkauft" }, { "ids": [ "bild-trail-cursor" ], "grund": "macht Werke zu Konfetti" }, { "ids": [ "grain-noise-overlay" ], "grund": "und halbton-raster – legen eine fremde Textur über fertige Bilder" }, { "ids": [ "split-mask-reveal" ], "grund": ", scroll-char-choreo, marquee-laufband – Typo-Inszenierung lenkt vom Bild ab" }, { "ids": [ "mehrschicht-parallax" ], "grund": "und zoom-parallax auf Werkbildern – verschiebt den Bildausschnitt, den der Fotograf gewählt hat" } ], "ton": { "anrede": "Sie", "saetze": "Fast keine Sätze: Titel, Kunde, Jahr. Bio in drei Sätzen, Kontakt als Zeile.", "haltung": "Kuratiert und zurückhaltend; das Werk spricht.", "beispiele": [ "Küste im Winter, 2025. 24 Bilder.", "Anfragen für Aufträge und Lizenzen per E-Mail." ], "nicht": "„Momente für die Ewigkeit“, „Emotionen einfangen“, „Leidenschaft für Fotografie“, Preispakete auf der Startseite." }, "bildsprache": { "licht": "Wie im Werk, nie korrigiert oder getönt.", "ausschnitt": "Das Werk unbeschnitten im Original-Seitenverhältnis; nie für Kacheln gecroppt.", "personen": "Wie im Werk; keine Making-of-Selfies auf der Startseite.", "formate": [ "3:2", "2:3", "16:9", "Original" ], "nicht": "Kein Zoom, keine Parallaxe, kein Tönen, kein Verschieben des Werks, kein Text über dem Bild außer im Film-Hero." }, "raum": { "basis_px": 4, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sektion": "clamp(48px, 8vw, 128px)", "dichte": "dicht", "hinweis": "Die Oberfläche ist dicht und klein, das Bild bekommt alles andere. Abstände zwischen Bildern einer Serie klein (8 bis 16 px), zwischen Serien groß." }, "raster": { "spalten": 24, "rand": "clamp(12px, 2vw, 24px)", "spalt": "clamp(8px, 1vw, 16px)", "max_breite": "none", "hinweis": "24-Spalten-Raster wie Partizan; UI in Ränder und Ecken (seitenrand-und-ecken-navigation). Platzhalter in Bildgröße per aspect-ratio." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "keine; Platzhalter-Grau #e6e6e6 statt Rahmen", "schatten": "keiner", "hinweis": "Nichts konkurriert mit dem Bild. Knöpfe als gezeichnete Kontur (kontur-button-zeichnen, Variante zeichnen) oder Textlink (pfeil-icon-button, Variante linie)." }, "template": true, "template_variante": false, "starter": false }, { "id": "mode-beauty-kollektion", "name": "Mode und Beauty: Kollektion und Ritual", "branche": "Mode-Label, Concept Store, Kosmetik und Hautpflege", "kurz": "Kampagnenbild in voller Breite, warmes Off-White, eine Grotesk für fast alles und Bewegung nur als weiche Bildüberblendung. Toteme und Lemaire verkaufen mit Weißraum und Fotografie. Typology zeigt bei Beauty die Formel direkt in der Überschrift (Wirkstoff + Prozent + Preis) und setzt dafür eine Mono-Schrift. Der Shop muss schnell bedienbar bleiben, deshalb wird die UI knapp animiert.", "stimmung": [ "kuratiert", "ruhig", "warm", "modisch" ], "stimmung_tags": [ "editorial", "ruhig", "warm" ], "begriffe": [ "Mode", "Label", "Boutique", "Concept Store", "Kosmetik", "Hautpflege", "Parfum", "Naturkosmetik", "Schuhe", "Accessoires" ], "ziele": [ "kauf" ], "varianten": [], "schrift": { "headline": "zalando-sans", "text": "zalando-sans", "akzent": "fragment-mono", "groessen": "Kampagnen-Headline clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, wght 400–500 (nicht fett), -0.01em, line-height 1.05. Produktname 0.9375rem wght 500, Preis tabular-nums. Fließtext 0.9375–1rem/1.5. Rubriken und Wirkstoffe in Fragment Mono 0.75rem Versal, +0.06em (Lemaire .06–.1rem). Editorial-Zitat optional EB Garamond Italic 1.5rem (Lemaire nutzt Garamond als zweite Stimme).", "techniken": [ "eine-familie-wenig-gewichte", "mono-labels-versal", "tabellenziffern", "lesesatz-text-wrap" ], "alternative": "luxus-didone (Bodoni Moda + Switzer) für Beauty-Luxus oder Satoshi als Hausschrift-Ersatz (ITF-FFL)" }, "farben": [ { "token": "grund", "hex": "#f6f3ee", "label": "Grund" }, { "token": "text", "hex": "#121010", "label": "Text" }, { "token": "grund-2", "hex": "#ebe7e0", "label": "Kartenfläche, Produkt-Hintergrund" }, { "token": "linie", "hex": "#cecdc6", "label": "Linien" }, { "token": "leise", "hex": "#8c857b", "label": "Meta, Wirkstoff-Labels" }, { "token": "fehler", "hex": "#a3402a", "label": "Sale/Fehler (sparsam)" }, { "token": "text-2", "hex": "#726D63", "label": "Meta-Text barrierefrei (4.6 : 1 auf #f6f3ee; #8c857b nur für Linien oder Schrift ab 24 px)" } ], "signal": "text", "farbprinzip": "Warmes Off-White statt Reinweiß (Toteme #f6f5f3, Lemaire #fdfbf9, Typology #f3efe9), Fast-Schwarz mit Rotstich für Text. Farbe kommt aus Produkt und Kampagnenbild; die UI bleibt zweifarbig. Sale und Fehler sind die einzigen Signalfarben.", "stil": "token-luxus-weich", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer": { "s": 500, "m": 1200, "l": 1400, "xl": 2200 }, "bewegung_regel": "Zwei Tempi: Bilder überblenden langsam mit Opazität (1 s, Kurve des Stils), Shop-UI (Menü, Filter, Drawer, Kaufbox) reagiert über animationsstil_ui token-toggle-asymmetrisch in 200–300 ms. Keine Bewegung auf Produktbildern beim Scrollen, kein Überschwingen.", "hero": [ "foto-hero" ], "hero_variante": [ "cinematic-video-hero" ], "hero_varianten": { "foto-hero": "randlos-unten-links" }, "hero_beschreibung": "Foto-Hero als Standard: ein Kampagnenbild in voller Breite, Text klein in einer Ecke. Video nur als Variante mit eigenem Kampagnenmaterial (Poster, mobil Hochformat oder Standbild).", "hero_aufbau": { "raster": "Kampagnenbild randlos, volle Bildschirmhöhe; Text klein in der unteren linken Ecke über 4 Spalten.", "bild": "Ein Kampagnenbild, 16:9 Desktop, 3:4 oder 4:5 mobil; Video nur als hero_variante mit eigenem Material.", "h1": "clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, 400–500, unten links.", "handlung": "Ein Weg: „Kollektion ansehen“ als Textlink oder getönter Glas-Knopf; kein zweiter CTA im Bild.", "zusatz": "Rubrik in Fragment Mono 0.75rem Versal (Saison, „Neu“) über der Headline." }, "sektionen": [ { "zweck": "Kampagne / Editorial", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "kunstbuch" } }, { "zweck": "Lookbook (Kapitel scrollen ins nächste)", "muster": [ "scroll-naechstes-projekt", "bild-hotspots" ], "varianten": { "bild-hotspots": "shop" } }, { "zweck": "Produktreihe / Neuheiten", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "produktreihe" } }, { "zweck": "Kategorie mit Filter", "muster": [ "facettenfilter-ergebnisliste" ], "varianten": { "facettenfilter-ergebnisliste": "schublade" } }, { "zweck": "Produktdetail (Bilder links, Kaufbox rechts sticky)", "muster": [ "produkt-kaufbox-varianten", "galerie-shared-element-vollbild", "akkordeon-hoehe-auto", "warenkorb-drawer", "eu-gewaehrleistungshinweis" ], "varianten": { "produkt-kaufbox-varianten": "seite", "galerie-shared-element-vollbild": "zoom", "warenkorb-drawer": "hinweis", "akkordeon-hoehe-auto": "basis", "eu-gewaehrleistungshinweis": "kaufbox" } }, { "zweck": "Anwendung / Ritual (Beauty)", "muster": [ "split-screen-sticky-seiten" ], "varianten": { "split-screen-sticky-seiten": "bild" } }, { "zweck": "Welche Pflege passt? (Finder in wenigen Fragen)", "muster": [ "produktfinder-quiz" ], "varianten": { "produktfinder-quiz": "schritte" } }, { "zweck": "Wirkstoffe, Pflege, Service", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Bewertungen", "muster": [ "bewertungen-verteilung" ], "varianten": { "bewertungen-verteilung": "band" } }, { "zweck": "Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)", "muster": [ "kontakt-anfrage-formular", "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "kompakt", "karte-zwei-klick": "bild" } }, { "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "navigation": [ "mega-menue-morphing-viewport", "gestapelte-drawer-navigation", "hide-on-scroll-header" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "animiertes-select", "toast-stapel" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "footer": [ "mega-footer-sitemap", "footer-newsletter-mit-persoenlichkeit" ], "button": [ "glas-button", "text-roll-hover" ] }, "varianten_demo": { "footer-newsletter-mit-persoenlichkeit": "basis", "bild-zoom-in-maske": "gegen", "glas-button": "getoent", "css-native-karussell": "produktreihe", "galerie-shared-element-vollbild": "produkt" }, "signatur": [ "scroll-naechstes-projekt" ], "button": [ "glas-button", "text-roll-hover" ], "optional": [ "karten-faecher-container" ], "nicht_verwenden": [ { "ids": [ "in-den-warenkorb-flug" ], "grund": "und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig" }, { "ids": [ "kippen-3d-karten" ], "grund": "und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "Shop mit Filtern, Drawer und verschachtelten Scrollbereichen" }, { "ids": [ "graustufen-zu-farbe" ], "grund": "die Farbe des Produkts ist die Kaufinformation" }, { "ids": [], "grund": "Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular" }, { "ids": [], "grund": "Playfair Display als „Eleganz“-Reflex – Verbotsliste" } ], "ton": { "anrede": "du", "saetze": "Knapp und sachlich: Material, Schnitt, Wirkstoff mit Prozent, Preis.", "haltung": "Kuratiert, ruhig, selbstverständlich. Beauty nennt die Formel statt eines Versprechens.", "beispiele": [ "Mantel aus Wolle, gerader Schnitt. Ab 389 €.", "Serum mit 15 % Vitamin C. Für jeden Hauttyp." ], "nicht": "„Must-have“, „Gönn dir“, „Shop the look!“ ohne Look, Wirkversprechen ohne Beleg, Emojis." }, "bildsprache": { "licht": "Weiches Studio- oder Tageslicht, warme Hauttöne, Produkt in echter Farbe.", "ausschnitt": "Kampagne: Ganzkörper oder Anschnitt; Produkt: Freisteller auf #ebe7e0 mit gleichem Rand.", "personen": "Ja in der Kampagne (Models mit Rechten); Produktbilder ohne Person.", "formate": [ "3:4", "4:5", "16:9" ], "nicht": "Keine wechselnden Seitenverhältnisse im Produktraster, keine Stock-Models, kein Rot außer für Sale und Fehler, kein Glanz-Filter auf Haut." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 160 ], "sektion": "clamp(64px, 8vw, 128px)", "dichte": "luftig", "hinweis": "Weißraum um Kampagnenbilder, aber ein enges Produktraster (8 bis 16 px Spalt). Produktname, Preis und Wirkstoff stehen 4 px auseinander." }, "raster": { "spalten": 12, "rand": "clamp(12px, 2vw, 32px)", "spalt": "clamp(8px, 1vw, 16px)", "max_breite": "none", "hinweis": "Kampagnenbild randlos. Produktraster 4 Spalten Desktop, 2 mobil, alle Bilder im selben Format. Footer darf die volle Bildschirmhöhe nehmen." }, "form": { "radius_klein": "2px", "radius_gross": "0", "pille": false, "linie": "1px #cecdc6", "schatten": "keiner", "hinweis": "Eckig wie ein Lookbook. Der getönte Glas-Knopf (glas-button, Variante getoent) steht nur über dem Kampagnenbild und bekommt hier 2 px statt der Pille aus der Demo." }, "template": true, "template_variante": false, "starter": false }, { "id": "kultur-programm-haltung", "name": "Kultur: Programm und Haltung", "branche": "Museum, Kunsthalle, Kulturzentrum, Festival, Veranstaltungshaus", "kurz": "Eine starke Hausschrift, Schwarz auf Off-White und ein Farbsystem für Sparten oder Blöcke. Im Mittelpunkt stehen Programm, Termine und Tickets. Bewegung ist kurz und sachlich, Barrierefreiheit gehört fest dazu: Stedelijk respektiert reduzierte Bewegung an zehn Stellen und bietet Vorlesen an. Für Festivals kann die Headline lauter werden, die Struktur bleibt gleich.", "stimmung": [ "sachlich", "grafisch", "zugänglich", "selbstbewusst" ], "stimmung_tags": [ "editorial", "präzise", "laut" ], "begriffe": [ "Museum", "Kunsthalle", "Galerie", "Theater", "Kulturzentrum", "Festival", "Konzerthaus", "Kino", "Bibliothek", "Veranstaltungshaus", "Literaturhaus" ], "ziele": [ "info", "buchung" ], "varianten": [], "schrift": { "headline": "schibsted-grotesk", "text": "atkinson-hyperlegible-next", "akzent": "ibm-plex-mono", "groessen": "Ausstellungs-/Festival-Titel clamp(2.75rem, 7vw, 7rem), Schibsted 800–900 (Festival auch Italic), -0.02em, line-height 1.0. Teaser-Titel clamp(1.375rem, 2.2vw, 2rem), 700. Fließtext Atkinson 1.125rem/1.6, max. 68ch (Stedelijk liegt bei ≈18–22px). Daten, Uhrzeiten, Räume in IBM Plex Mono 0.8125rem, tabular-nums. Für Festivals statt Schibsted die Paarung plakat-condensed (Big Shoulders 900).", "techniken": [ "fluide-typo-clamp-cqi", "tabellenziffern", "mono-labels-versal", "lesesatz-text-wrap", "headline-laufweite-zeilenabstand" ], "alternative": "Cabinet Grotesk oder Supreme (Fontshare, ITF-FFL) für den Barbican-nahen Black-Italic-Look; Supreme LL von Lineto ist eine andere, kommerzielle Schrift" }, "farben": [ { "token": "text", "hex": "#0b0b0b", "label": "Text, Linien" }, { "token": "grund", "hex": "#efede9", "label": "Grund" }, { "token": "sparte", "hex": "#c4421a", "label": "Sparte Musik" }, { "token": "sparte-2", "hex": "#3d5f9a", "label": "Sparte Theater/Tanz" }, { "token": "sparte-3", "hex": "#2f7d4a", "label": "Sparte Kunst" }, { "token": "sparte-4", "hex": "#b0186b", "label": "Sparte Film" } ], "signal": "text", "farbprinzip": "Schwarz auf warmem Off-White als Grund (Stedelijk #0a0a0a/#ebeae8). Dazu ein Farbsystem mit 4–6 Tönen, je einer pro Sparte oder Programmreihe (Barbican), oder Blöcke, die im Rhythmus Fläche und Schrift tauschen (HKW .color-switch). Jede Spartenfarbe muss auf Off-White und als Fläche mit weißer Schrift WCAG AA erfüllen.", "stil": "token-swiss-knackig", "stil_ui": "", "ease": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer": { "xs": 200, "s": 350, "m": 500, "l": 700 }, "bewegung_regel": "Kurze, klare Out-Kurve des Stils ohne Überschwingen, Abgang mit der Austrittskurve. Bewegung entlang des Rasters (nur x oder y). prefers-reduced-motion ist Pflicht: Smooth-Scroll, Reveals und Karussell-Autoplay entfallen dann ganz (Stedelijk koppelt scroll-behavior an no-preference).", "hero": [ "schrift-hero-viewportbreit", "editorial-magazin-layout" ], "hero_variante": [], "hero_varianten": { "schrift-hero-viewportbreit": "textfit", "editorial-magazin-layout": "cover" }, "hero_beschreibung": "Programm vor Image: aktuelle Ausstellung oder Saisontitel als Plakat-Satz (schrift-hero-viewportbreit, Variante textfit) über bzw. neben einem echten Motiv (editorial-magazin-layout, Variante cover), darunter sofort Öffnungsstatus heute, nächste Termine und Tickets. Kein Video, keine Slideshow, aus der Demo kein Lenis.", "hero_aufbau": { "raster": "12 Spalten: Plakat-Satz über die volle Breite (schrift-hero-viewportbreit, Variante textfit), echtes Motiv über 7 Spalten daneben oder darunter (editorial-magazin-layout, Variante cover).", "bild": "Echtes Ausstellungs- oder Saisonmotiv, 4:5 oder 3:2; kein Video, keine Slideshow.", "h1": "clamp(2.75rem, 7vw, 7rem), Schibsted 800–900, oben links, per textfit auf Breite.", "handlung": "„Tickets“ (gefüllt, Pixel-Füllung) und „Programm“ (Kontur mit Ecken) direkt unter dem Titel.", "zusatz": "Öffnungsstatus heute und die nächsten drei Termine in IBM Plex Mono 0.8125rem; Spartenlabel mit Farbe und Wort." }, "sektionen": [ { "zweck": "Aktuelle Ausstellungen / Highlights", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "zeitung" } }, { "zweck": "Programm-Kalender mit Filtern", "muster": [ "programm-kalender", "facettenfilter-ergebnisliste" ], "varianten": { "programm-kalender": "programm", "facettenfilter-ergebnisliste": "leiste" } }, { "zweck": "Rubriken-Reihen (Musik, Film, Kunst …)", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "peek" } }, { "zweck": "Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick", "akkordeon-hoehe-auto", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "erklaerung", "oeffnungszeiten-status": "karte", "karte-zwei-klick": "bild", "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Magazin / Hintergrund", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Kontakt (Kasse, Führungen und Gruppen, Vermietung, Presse)", "muster": [ "kontakt-anfrage-formular" ], "varianten": {} }, { "zweck": "Newsletter", "muster": [ "footer-newsletter-mit-persoenlichkeit" ], "varianten": { "footer-newsletter-mit-persoenlichkeit": "kultur" } } ], "bereiche": { "navigation": [ "sticky-shrink-header", "mega-menue-morphing-viewport", "scrollspy-kapitelnavigation" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "checkbox-radio-animiert", "toast-stapel", "druck-feedback" ], "galerie": [ "css-native-karussell", "flip-zustandswechsel" ], "footer": [ "mega-footer-sitemap", "footer-newsletter-mit-persoenlichkeit" ], "button": [ "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ] }, "varianten_demo": { "text-um-form": "css", "schrift-hero-viewportbreit": "textfit", "bild-zoom-in-maske": "richtung", "fuellung-vom-eintrittspunkt": "pixel", "kontur-button-zeichnen": "ecken", "css-native-karussell": "peek", "flip-zustandswechsel": "nativ", "footer-newsletter-mit-persoenlichkeit": "kultur" }, "signatur": [ "scrollspy-kapitelnavigation" ], "button": [ "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ], "optional": [ "text-um-form" ], "nicht_verwenden": [ { "ids": [ "smooth-scroll-lenis" ], "grund": "Programmlisten, Ticket-Widgets und iframes (Spektrix, Enviso) vertragen keine Scroll-Übernahme" }, { "ids": [], "grund": "Jede Art von Cursor-Effekt – öffentliche Häuser haben ein breites Publikum, auch mit Screenreader und Tastatur" }, { "ids": [ "prozent-zaehler" ], "grund": "und webgl-ladeszene-fortschritt – Besucher wollen Öffnungszeiten, keine Ladeshow" }, { "ids": [ "fullpage-snap-slides" ], "grund": "blockiert das schnelle Überfliegen des Programms" }, { "ids": [], "grund": "Überschwing-Kurven im eigenen Design – bei Barbican stammen sie nur aus einer Tooltip-Bibliothek" }, { "ids": [], "grund": "Farbe als einzige Unterscheidung der Sparten – immer zusätzlich ein Text-Label" } ], "ton": { "anrede": "Sie", "saetze": "Kurz und klar; Leichte Sprache als eigene Fassung. Termine immer als Datum · Uhrzeit · Ort.", "haltung": "Einladend und selbstbewusst, ohne Kunstjargon. Ein Festival darf duzen, dann auf der ganzen Seite.", "beispiele": [ "Heute geöffnet bis 18 Uhr. Unter 18 Jahren frei.", "Die Ausstellung zeigt 40 Arbeiten aus fünf Jahrzehnten." ], "nicht": "„Spannungsfeld“, „verhandelt“, „Diskurs“ als Füllwörter, „Ein Muss für jeden Kunstliebhaber“." }, "bildsprache": { "licht": "Dokumentarisch: Ausstellungsansichten in neutralem Licht, Künstlerfotos wie geliefert.", "ausschnitt": "Werk oder Raumansicht, Plakatmotiv; Bühnenfotos im Moment der Handlung.", "personen": "Künstler:innen und Publikum, nur mit Rechten und Bildnachweis.", "formate": [ "4:5", "3:2", "1:1" ], "nicht": "Keine Stock-Konzertmengen, keine Bilder ohne Bildnachweis, keine Duotone oder Filter über Kunstwerken, keine Slideshow im Hero." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sektion": "clamp(56px, 7vw, 112px)", "dichte": "dicht", "hinweis": "Programm geht vor: Teaser dicht, Datum, Ort und Ticket mit 8 px Abstand. Laut werden darf nur der Titel, nicht der Weißraum." }, "raster": { "spalten": 12, "rand": "clamp(16px, 3vw, 40px)", "spalt": "clamp(16px, 2vw, 24px)", "max_breite": "1600px", "hinweis": "Teaser 3 bis 4 Spalten, jeder dritte Block tauscht Fläche und Schrift (HKW). Sticky Navigation mit 1px Unterkante." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "1px #0b0b0b als Unterkante der Navigation und zwischen Programmzeilen", "schatten": "keiner", "hinweis": "Grafisch und eckig. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Tickets füllen sich in Pixeln (fuellung-vom-eintrittspunkt, Variante pixel)." }, "template": true, "template_variante": false, "starter": false }, { "id": "luxus-manufaktur-stille", "name": "Luxus und Manufaktur: Stille", "branche": "Uhren, Schmuck, Juwelier, Luxus-Manufaktur", "kurz": "Viel Weißraum, Anthrazit und Weiß im Wechsel, eine feine Kontrast-Serif für Titel und gesperrte Versalien für Labels. Überraschend ist die Messung: A. Lange & Söhne und NOMOS animieren nicht langsam und schwebend, sondern kurz (0,15–0,5 s) und asymmetrisch. Menüs öffnen langsamer, als sie schließen. Ruhe entsteht durch Raum und Bildqualität, nicht durch Zeitlupe.", "stimmung": [ "luxuriös", "präzise", "ruhig", "seriös" ], "stimmung_tags": [ "luxuriös", "präzise", "ruhig" ], "begriffe": [ "Juwelier", "Schmuck", "Uhren", "Goldschmied", "Manufaktur", "Luxus", "Maßschneider", "Möbelmanufaktur" ], "ziele": [ "kauf", "termin" ], "varianten": [], "schrift": { "headline": "bodoni-moda", "text": "instrument-sans", "akzent": "", "groessen": "Titel clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, opsz an Größe gekoppelt (font-optical-sizing auto), -0.01em, line-height 1.05. Labels und Navigation Instrument Sans 0.75rem Versal, letter-spacing +0.08em (NOMOS .08em, Lange bis 2px). Fließtext 0.9375rem/1.47 (Lange line-height-base 1.4706), wght 400. Kaliber- und Preisangaben tabular-nums. Script (imperial-script) höchstens für ein Monogramm, wie Messikas KunstlerScript.", "techniken": [ "optische-groessen-opsz", "tabellenziffern", "text-box-trim", "lesesatz-text-wrap" ], "alternative": "luxus-didone (Bodoni Moda + Switzer) oder hairline-hero (Zodiak Thin + Instrument Sans), beide mit ITF-FFL-Schrift" }, "farben": [ { "token": "text", "hex": "#23282f", "label": "Anthrazit, dunkle Sektionen und Text" }, { "token": "grund", "hex": "#ffffff", "label": "Grund" }, { "token": "flaeche", "hex": "#f4f4f2", "label": "Produktfläche" }, { "token": "leise", "hex": "#8b9097", "label": "Meta, Referenznummern" }, { "token": "linie", "hex": "#d9dadb", "label": "Linien" }, { "token": "linie-2", "hex": "#a88a5a", "label": "Messing, nur Linien und Fokus" }, { "token": "text-2", "hex": "#71757B", "label": "Meta-Text barrierefrei (4.6 : 1 auf #ffffff; #8b9097 nur für Linien oder Schrift ab 24 px)" } ], "signal": "linie-2", "farbprinzip": "Anthrazit statt Schwarz (Lange #23282f) und Weiß, sektionsweise im Wechsel. Edelmetall nur als feine Linie oder Detailfarbe, nie als Fläche oder Verlauf. Produktfotos auf neutralem Hellgrau.", "stil": "token-toggle-asymmetrisch", "stil_ui": "", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "xs": 150, "s": 220, "m": 300, "l": 450 }, "bewegung_regel": "Öffnen mit der Ausklang-Kurve des Stils (0,3 s), Schließen schneller mit der Anlauf-Kurve (0,2 s); Abdunklung 0,8/0,6 s. Alles andere bleibt bei 0,15–0,5 s. Langsam ist nur die native Parallaxe (scroll-gekoppelt, 4vh Weg). Kein Überschwingen, kein Schimmer.", "hero": [ "foto-hero" ], "hero_variante": [ "cinematic-video-hero" ], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Produkt zuerst: ein Freisteller oder Kampagnenfoto der Neuheit in ruhigem Licht, Name und ein Satz, „Termin in der Boutique“ als CTA. cinematic-video-hero nur mit eigenem Manufaktur- oder Kampagnenfilm (stumm, Poster, Pause-Knopf, mobil Standbild); kleine Juweliere bleiben beim Foto.", "hero_aufbau": { "raster": "12 Spalten asymmetrisch: Bild über Spalte 6 bis 12, Text über 1 bis 4 unten, 1 Spalte Luft dazwischen.", "bild": "Freisteller oder Kampagnenfoto der Neuheit, 4:5; Film nur als hero_variante mit eigenem Material, mobil Standbild.", "h1": "clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, links unten.", "handlung": "„Termin in der Boutique“ (dunkle Pille) und „Kollektion“ (Messing-Doppelkontur) untereinander.", "zusatz": "Referenznummer und Kaliber in Instrument Sans 0.75rem Versal +0.08em über der H1." }, "sektionen": [ { "zweck": "Neuheit / Kampagne", "muster": [ "split-screen-sticky-seiten" ], "varianten": { "split-screen-sticky-seiten": "bild" } }, { "zweck": "Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)", "muster": [ "broken-grid-asymmetrisch", "css-native-karussell", "produkt-kaufbox-varianten", "finanzierung-pflichtangaben", "eu-gewaehrleistungshinweis" ], "varianten": { "produkt-kaufbox-varianten": "kompakt", "css-native-karussell": "buehne", "finanzierung-pflichtangaben": "kaufbox", "eu-gewaehrleistungshinweis": "kaufbox" } }, { "zweck": "Manufaktur / Handwerk", "muster": [ "mehrschicht-parallax", "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "kunstbuch" } }, { "zweck": "Technik / Kaliber", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "tabelle" } }, { "zweck": "Service, Pflege, Garantie", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "basis" } }, { "zweck": "Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)", "muster": [ "oeffnungszeiten-status", "standortfinder-liste", "karte-zwei-klick", "termin-buchung-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "kompakt", "standortfinder-liste": "kompakt", "karte-zwei-klick": "bild", "termin-buchung-zwei-klick": "platzhalter" } }, { "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "navigation": [ "mega-menue-morphing-viewport", "native-popover-dropdowns", "hide-on-scroll-header" ], "scroll": [ "mehrschicht-parallax" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "einblenden-starting-style", "animiertes-select" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "footer": [ "mega-footer-sitemap", "studio-visitenkarte-footer" ], "button": [ "kontur-button-zeichnen", "pfeil-icon-button" ] }, "varianten_demo": { "kontur-button-zeichnen": "doppel", "pfeil-icon-button": "tausch", "bild-zoom-in-maske": "basis", "css-native-karussell": "buehne", "galerie-shared-element-vollbild": "produkt", "studio-visitenkarte-footer": "praxis" }, "signatur": [ "broken-grid-asymmetrisch" ], "button": [ "kontur-button-zeichnen", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "shimmer-gradient-text" ], "grund": "und fluessigmetall-chrom – Gold-Schimmer ist das Klischee schlechthin; keine der Referenzen nutzt ihn" }, { "ids": [ "interaktives-3d-hero" ], "grund": "und glas-transmission-3d für Uhren oder Steine – kostet LCP, wirkt schnell wie ein Spielzeug gegenüber echter Fotografie" }, { "ids": [ "token-luxus-weich" ], "grund": "als Gesamtsprache (1,2–2,4 s) – die gemessenen Manufaktur-Seiten bleiben bei 0,15–0,5 s" }, { "ids": [ "cursor-follower-lerp" ], "grund": ", magnetische-elemente – verspielt" }, { "ids": [], "grund": "Playfair Display und Cinzel – Verbotsliste, Claude-Reflex für „Luxus“" }, { "ids": [], "grund": "Script-Schrift für Überschriften – Messika nutzt die Script nur als Akzent" } ], "ton": { "anrede": "Sie", "saetze": "Kurz, mit Pausen; Zahlen technisch exakt (Kaliber, Gangreserve, Durchmesser).", "haltung": "Leise und präzise. Qualität wird gezeigt, nicht behauptet.", "beispiele": [ "Handaufzug, 72 Stunden Gangreserve.", "Wir zeigen Ihnen die Uhr gern in der Boutique." ], "nicht": "„Luxus pur“, „zeitlose Eleganz“ als Floskel, „exklusiv für Sie“, Countdowns, Ausrufezeichen." }, "bildsprache": { "licht": "Ruhiges, gerichtetes Studiolicht, für alle Ansichten derselbe Lichtwinkel und Maßstab.", "ausschnitt": "Freisteller auf #f4f4f2, Makro auf Zifferblatt, Fassung oder Gravur, Uhr am Handgelenk.", "personen": "Selten: Uhrmacher:in am Werktisch oder ein Handgelenk; keine Gesichter in Kampagnenpose.", "formate": [ "4:5", "1:1", "3:2" ], "nicht": "Keine Glitzer-Spiegelungen, keine Gold-Verläufe, keine Rabatt-Badges, keine Stock-Paare, keine Parallaxe über 4vh." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 16, 24, 40, 64, 96, 144, 200, 240 ], "sektion": "clamp(112px, 14vw, 240px)", "dichte": "luftig", "hinweis": "Ruhe durch Raum (kurz): die größten Sektionsabstände aller Rezepte. Technische Daten dagegen eng in Tabellenziffern." }, "raster": { "spalten": 12, "rand": "clamp(24px, 6vw, 96px)", "spalt": "clamp(16px, 2vw, 32px)", "max_breite": "1440px", "hinweis": "Asymmetrisch (broken-grid-asymmetrisch): Bild 7 Spalten, Text 4 Spalten versetzt. Freisteller zentriert mit viel Rand. Sektionen wechseln Anthrazit und Weiß." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": true, "linie": "1px #d9dadb; Messing #a88a5a nur als feine Linie und Fokus", "schatten": "keiner", "hinweis": "Bilder und Flächen eckig. Einzige runde Form ist die dunkle Pille der Haupthandlung (pfeil-icon-button, Variante tausch); Nebenweg mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel)." }, "template": true, "template_variante": false, "starter": false }, { "id": "saas-produkt-praezise", "name": "SaaS & KI: das Produkt zeigt sich selbst", "branche": "Tech-Startup / SaaS / KI-Produkt / Software-Tool", "kurz": "Das echte Produkt-Interface ist der Hero, nicht ein Stockbild oder ein Glow-Verlauf. Eine Groteskfamilie in wenigen Gewichten, Mono nur für Labels und Daten, Graustufen plus genau ein Markenton. Bewegung ist schnell wie in der App selbst (100–200 ms), Inhalte gliedern sich in Funktions-Kapitel, Preise und eine große Sitemap im Footer.", "stimmung": [ "präzise", "technisch", "ruhig", "kompetent" ], "stimmung_tags": [ "präzise", "ruhig" ], "begriffe": [ "SaaS", "Software", "App", "Startup", "KI", "Tool", "Plattform", "IT-Dienstleister", "Tech" ], "ziele": [ "kauf", "anfrage" ], "varianten": [], "schrift": { "headline": "geist", "text": "geist", "akzent": "geist-mono", "groessen": "Stufen wie Linear: 1.0625 / 1.25 / 1.5 / 2 / 2.5 / 3 / 3.5 / 4 / 4.5rem. h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 560–600, Laufweite -0.022em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.4rem + 2vw, 3rem), -0.018em, 1.1; Fließtext 1rem–1.0625rem, wght 400, -0.006em, Zeilenhöhe 1.6; Geist Mono 0.75–0.8125rem für Labels, Code, Kennzahlen. Gewichte maximal 400 / 500 / 600 (Linear arbeitet mit 510 / 590).", "techniken": [ "eine-familie-wenig-gewichte", "headline-laufweite-zeilenabstand", "mono-labels-versal", "tabellenziffern" ], "alternative": "Paarung sanft-kontrast (satoshi + rowan als Serif-Akzent + geist-mono, ITF) für ein freundlicheres KI-Produkt – nicht für IONOS-Templates." }, "farben": [ { "token": "grund", "hex": "#08090A", "label": "Grund dunkel (Linear bg-primary) bzw. #FAFAFA hell (n8n grey-50)" }, { "token": "flaeche", "hex": "#161718", "label": "Panel/Karte (Linear)" }, { "token": "text", "hex": "#F7F8F8", "label": "Text auf dunkel" }, { "token": "text-2", "hex": "#8A8F98", "label": "Sekundärtext/Meta (Linear tertiary)" }, { "token": "linie", "hex": "#242728", "label": "Linien/Ränder (Raycast border)" }, { "token": "marke", "hex": "#7170FF", "label": "Markenton für Aktion/Fokus (Linear accent; im Template austauschbar)" } ], "signal": "marke", "farbprinzip": "Graustufen tragen alles, ein einziger Markenton für Primär-Button, Fokus und aktive Zustände. Dark Mode ist bei Dev-Tools Standard (Linear, Raycast), für KMU-Software eher heller Grund wie n8n (#fafafa) mit dunkler Variante. Statusfarben nur in UI-Ausschnitten, nie als Deko-Verlauf.", "stil": "token-tech-praezise", "stil_ui": "", "ease": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer": { "xs": 70, "s": 110, "m": 150, "l": 240, "xl": 400, "xxl": 700 }, "bewegung_regel": "UI reagiert so schnell wie die App: die productive-Kurve des Stils für fast alles, Drawer und Sheets mit der expressive-Kurve. Einblendungen nur Deckkraft + 4–8 px y, ohne Federn. Überschwinger höchstens für einen einzelnen Bestätigungs-Moment. Alle Animationen hinter prefers-reduced-motion.", "hero": [ "produkt-ui-hero-perspektiv-tilt" ], "hero_variante": [ "prompt-hero-eingabefeld" ], "hero_varianten": {}, "hero_beschreibung": "Ein Satz Nutzen (höchstens 8 Wörter), Unterzeile, zwei CTAs (Kostenlos testen, Demo) und das echte Produkt-UI als HTML oder scharfer Screenshot (produkt-ui-hero-perspektiv-tilt), kein Mockup-Laptop. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Funktion des Produkts läuft; KI-Funktionen direkt am Feld kennzeichnen (Art. 50 KI-VO).", "hero_aufbau": { "raster": "Text über 8 Spalten linksbündig oder zentriert, darunter das Produkt-UI über alle 12 Spalten bis 1200px.", "bild": "Echtes Produkt-UI 16:10 als HTML oder scharfer Screenshot, perspektivisch geneigt (produkt-ui-hero-perspektiv-tilt); kein Mockup-Laptop.", "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Geist 560–600, über dem UI.", "handlung": "„Kostenlos testen“ (Markenton gefüllt) und „Demo ansehen“ (Kontur), nebeneinander unter der Unterzeile. Prompt-Feld nur als hero_variante mit echter Funktion.", "zusatz": "Zeile in Geist Mono über der H1 (Version oder Changelog), Kundenlogos als ruhige Reihe unter dem UI." }, "sektionen": [ { "zweck": "Funktionen in Kapiteln (Workflow von Anfang bis Ende)", "muster": [ "lokale-produktnavigation", "split-screen-sticky-seiten", "gleitender-indikator", "tabs-pfeiltasten-focusgroup" ], "varianten": { "split-screen-sticky-seiten": "titel", "tabs-pfeiltasten-focusgroup": "auto", "lokale-produktnavigation": "unterseiten" } }, { "zweck": "Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)", "muster": [ "bento-grid-interaktiv", "karten-spotlight-glow" ], "varianten": {} }, { "zweck": "Kunden / Integrationen", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "laufband" } }, { "zweck": "Use Cases / Kundenstimmen", "muster": [ "testimonials-neu-gedacht", "css-native-karussell" ], "varianten": { "testimonials-neu-gedacht": "liste", "css-native-karussell": "peek" } }, { "zweck": "Preise", "muster": [ "vergleichstabelle-sticky", "preis-section-editorial", "gleitender-indikator" ], "varianten": { "vergleichstabelle-sticky": "pakete" } }, { "zweck": "Was spart ihr? (Rechner mit Live-Ergebnis)", "muster": [ "kostenrechner-konfigurator" ], "varianten": { "kostenrechner-konfigurator": "bad" } }, { "zweck": "FAQ / Sicherheit / DSGVO", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Demo / Kontakt (Demo-Anfrage, Enterprise, Support)", "muster": [ "kontakt-anfrage-formular" ], "varianten": {} }, { "zweck": "Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "navigation": [ "mega-menue-morphing-viewport", "command-palette-und-ki-suche", "theme-umschalter-view-transition" ], "schrift_animation": [ "zahlen-odometer" ], "hover": [ "hover-absicht-timing" ], "mikro": [ "kopieren-feedback", "ki-streaming-text-denkindikator", "toast-stapel", "skeleton-shimmer", "toggle-switch" ], "material": [ "verlaufs-rahmen" ], "galerie": [ "css-native-karussell" ], "footer": [ "mega-footer-sitemap" ], "button": [ "button-gruppe-expressiv", "kopieren-feedback" ] }, "varianten_demo": { "verlaufs-rahmen": "saas", "theme-umschalter-view-transition": "light-dark", "button-gruppe-expressiv": "split", "ki-streaming-text-denkindikator": "archiv", "css-native-karussell": "peek" }, "signatur": [ "command-palette-und-ki-suche", "produkt-ui-hero-perspektiv-tilt" ], "button": [ "button-gruppe-expressiv", "kopieren-feedback" ], "optional": [ "rive-datenbindung" ], "nicht_verwenden": [ { "ids": [ "mesh-gradient-shader" ], "grund": "der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn" }, { "ids": [ "shimmer-gradient-text" ], "grund": "glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "Produktseiten müssen sich wie die App anfühlen, nicht schwimmen" }, { "ids": [ "cursor-follower-lerp", "magnetische-elemente" ], "grund": "Agentur-Gesten ohne Nutzen für Software-Käufer" }, { "ids": [ "interaktives-3d-hero" ], "grund": "lenkt vom echten Interface ab und kostet Ladezeit" }, { "ids": [ "prozent-zaehler" ], "grund": "künstliche Wartezeit vor einem Produkt, das schnell wirken soll" }, { "ids": [ "scramble-decode" ], "grund": "Hacker-Optik passt nur zu Security-/Dev-Nischen, sonst Klischee" } ], "ton": { "anrede": "du", "saetze": "Kurz, Verb vorn, Nutzen in höchstens 8 Wörtern. Funktionen als Ergebnis, nicht als Feature-Name.", "haltung": "Präzise und ruhig, wie gute Software. Bei Software für KMU und Behörden Sie verwenden, dann durchgehend.", "beispiele": [ "Rechnungen in zwei Minuten verschickt.", "Verbinde dein Postfach und starte mit einer Vorlage." ], "nicht": "„revolutionär“, „KI-gestützt“ als Selbstzweck, „Die All-in-One-Lösung für Ihr Business“, Fantasiepreise." }, "bildsprache": { "licht": "Keine Fotos; echte UI-Ausschnitte als HTML oder scharfer Screenshot in doppelter Auflösung.", "ausschnitt": "Ausschnitt einer echten Ansicht, auf die Funktion gezoomt, mit echten Beispieldaten.", "personen": "Nein; höchstens Kundenporträts bei Stimmen.", "formate": [ "16:10", "4:3", "1:1" ], "nicht": "Keine Mockup-Laptops, keine Stock-Teams am Whiteboard, kein Glow- oder Aurora-Hintergrund, keine 3D-Icons." }, "raum": { "basis_px": 4, "skala_px": [ 4, 8, 12, 16, 20, 24, 32, 48, 64, 96 ], "sektion": "clamp(64px, 8vw, 128px)", "dichte": "dicht", "hinweis": "App-Rhythmus auf 4 px: Panels 16 bis 24 px Innenabstand, Kapitel 64 bis 128 px. Feature-Texte auf 60ch." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 32px)", "spalt": "clamp(16px, 2vw, 24px)", "max_breite": "1200px", "hinweis": "Inhalt 1024 bis 1200px (Regel). Kapitel in der Reihenfolge des Arbeitsablaufs, jedes mit einem UI-Ausschnitt; Bento nur in der Dark-Variante." }, "form": { "radius_klein": "6px", "radius_gross": "10px", "pille": false, "linie": "1px #242728 auf Dunkel; auf Hell dieselbe Linie aus Graustufen", "schatten": "nur das Produkt-UI im Hero bekommt einen tiefen, farblosen Schatten; sonst keiner", "hinweis": "Radien aus der App: 6 px für Knöpfe, Felder und Tags, 10 px für Panels. Kein Linien- oder Punktraster als Hintergrund; verlaufs-rahmen nur am Prompt-Feld im Fokus." }, "template": true, "template_variante": false, "starter": false }, { "id": "kanzlei-beratung-souveraen", "name": "Kanzlei & Beratung: Haltung und Klarheit", "branche": "Kanzlei / Steuerberatung / Wirtschaftsprüfung / Unternehmensberatung", "kurz": "Eine ruhige Text-Serif für Überschriften, eine sachliche Grotesk für alles andere, ein tiefer Markenton (Nachtblau oder Aubergine) auf warmen Grautönen. Inhalte statt Bildwelten: Rechtsgebiete, Köpfe, Mandate, Insights. Bewegung bleibt kurz und funktional (125–330 ms), nichts zählt hoch, nichts schwebt.", "stimmung": [ "seriös", "souverän", "klar", "zurückhaltend" ], "stimmung_tags": [ "ruhig", "präzise", "editorial" ], "begriffe": [ "Kanzlei", "Rechtsanwalt", "Anwältin", "Steuerberater", "Steuerberatung", "Wirtschaftsprüfer", "Notar", "Unternehmensberatung", "Finanzberater", "Versicherungsmakler" ], "ziele": [ "anfrage", "termin" ], "varianten": [ { "name": "Kleine Kanzlei / Steuerberatung (3–10 Personen) – Standard für Templates", "hinweis": "" } ], "schrift": { "headline": "newsreader", "text": "schibsted-grotesk", "akzent": "", "groessen": "Wie Oppenhoff: Serif nur für Überschriften und Zitate, Grotesk für Text, Navigation, Labels. h1 clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader wght 400 (opsz automatisch), Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); Fließtext Schibsted Grotesk 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Navigation/Labels wght 500 (Graphik-Prinzip 400/500), Meta 0.8125rem. Kein Bold über 600.", "techniken": [ "serif-grotesk-duotone", "optische-groessen-opsz", "lesesatz-text-wrap", "tabellenziffern", "initial-letter-initialen" ], "alternative": "Headline zodiak oder sentient, Text switzer (ITF) – kommt Berlingske Serif + Graphik am nächsten, aber nicht für IONOS-Templates. Für kleine Steuerkanzleien als Template-Variante auch source-serif-4 statt Newsreader." }, "farben": [ { "token": "grund", "hex": "#F9F8F8", "label": "Grund (Oppenhoff)" }, { "token": "flaeche", "hex": "#EFEBEB", "label": "Flächenwechsel/Karten (Oppenhoff; Linien #D2CDC7)" }, { "token": "text", "hex": "#1E1E50", "label": "Marke, Überschriften, dunkle Sektion (Oppenhoff; Alternative Aubergine #2E1A47 wie Slaughter and May)" }, { "token": "text-2", "hex": "#212529", "label": "Fließtext" }, { "token": "leise", "hex": "#8E7C6D", "label": "Meta/Datum" }, { "token": "akzent", "hex": "#00BEE6", "label": "Akzent für Links/Fokus (sparsam, Oppenhoff)" }, { "token": "text-3", "hex": "#7C6C5E", "label": "Meta-Text barrierefrei (4.8 : 1 auf #F9F8F8; #8E7C6D nur für Linien oder Schrift ab 24 px)" } ], "signal": "text", "farbprinzip": "Ein tiefer, gesättigter Markenton (Nachtblau, Aubergine) für Überschriften, Header und dunkle Sektionen; warme Grautöne statt reinem Weiß für Flächen; ein heller Akzent nur für Links, Fokus und aktive Filter. Keine Verläufe, keine Stockfoto-Blautöne.", "stil": "token-swiss-knackig", "stil_ui": "", "ease": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer": { "xs": 200, "s": 350, "m": 500, "l": 700 }, "bewegung_regel": "Eine Ausklang-Kurve für alles, kurze Dauern wie Oppenhoff und Noerr. Bewegung nur entlang des Rasters (y oder x), keine Masken-Reveals an Text, kein Hochzählen von Zahlen. Schließen etwas schneller als Öffnen. View Transitions zwischen Seiten als ruhiger Crossfade.", "hero": [ "editorial-magazin-layout" ], "hero_variante": [], "hero_varianten": { "editorial-magazin-layout": "cover" }, "hero_beschreibung": "Ohne Stockfoto: ein Satz Positionierung in der Serif und als Einstieg die aktuelle Insight oder Studie (editorial-magazin-layout, Variante cover, ohne den Lenis-Teil der Demo), alternativ ein echtes Teamfoto. Kein Video, keine Skyline, kein Handschlag. Kleine Kanzlei: Satz + Teamfoto + „Erstgespräch“ und Telefon.", "hero_aufbau": { "raster": "12 Spalten: Positionierungssatz in der Serif über Spalte 1 bis 7, aktuelle Insight als Cover über 8 bis 12 (editorial-magazin-layout, Variante cover).", "bild": "Kein Stockfoto; Cover der aktuellen Insight 4:5 oder echtes Teamfoto 3:2.", "h1": "clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader 400, oben links.", "handlung": "„Erstgespräch vereinbaren“ (Markenton, eckig) und Telefon als Textlink.", "zusatz": "Rubrik und Datum der Insight in Tabellenziffern über dem Cover; bei Steuerberatung Mandantenportal im Kopf." }, "sektionen": [ { "zweck": "Rechtsgebiete / Leistungen / Branchen (je Leistung eine Unterseite, Antwort zuerst)", "muster": [ "akkordeon-hoehe-auto", "leistungsseite-antwort-zuerst" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Köpfe / Team (filterbar nach Fachgebiet, Standort)", "muster": [ "team-ueber-mich-layout", "facettenfilter-ergebnisliste" ], "varianten": { "team-ueber-mich-layout": "raster", "facettenfilter-ergebnisliste": "leiste" } }, { "zweck": "Ausgewählte Mandate / Recent work", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "zeitung" } }, { "zweck": "Insights / News / Studien (Long-Reads mit einer echten Initiale)", "muster": [ "editorial-magazin-layout", "initial-letter-initialen" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Zahlen & Fakten (Standorte, Berufsträger, Gründung)", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "tabelle" } }, { "zweck": "Auszeichnungen / Rankings", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "auszeichnungen" } }, { "zweck": "Karriere", "muster": [ "stellen-karriere" ], "varianten": { "stellen-karriere": "liste" } }, { "zweck": "Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link)", "muster": [ "kontakt-anfrage-formular", "formular-fehlerzusammenfassung", "validierung-nach-interaktion" ], "varianten": { "formular-fehlerzusammenfassung": "kompakt" } }, { "zweck": "Standorte / Anfahrt (Adresse als Text, Karte per 2-Klick, „Termin nach Vereinbarung · Telefon erreichbar“; Standortliste nur ab zwei Büros)", "muster": [ "karte-zwei-klick", "oeffnungszeiten-status" ], "varianten": { "oeffnungszeiten-status": "termin", "karte-zwei-klick": "bild" } } ], "bereiche": { "navigation": [ "mega-menue-morphing-viewport", "sticky-shrink-header", "gestapelte-drawer-navigation" ], "hover": [ "hover-absicht-timing" ], "mikro": [ "akkordeon-hoehe-auto", "einblenden-starting-style" ], "galerie": [ "css-native-karussell" ], "footer": [ "mega-footer-sitemap", "studio-visitenkarte-footer" ], "button": [ "pfeil-icon-button", "button-zustaende" ] }, "varianten_demo": { "css-native-karussell": "buehne", "pfeil-icon-button": "linie", "akkordeon-hoehe-auto": "faq", "studio-visitenkarte-footer": "basis" }, "signatur": [ "initial-letter-initialen" ], "button": [ "pfeil-icon-button", "button-zustaende" ], "optional": [], "nicht_verwenden": [ { "ids": [ "zahlen-odometer" ], "grund": "hochzählende Kennzahlen wirken verkäuferisch; Zahlen stehen einfach da" }, { "ids": [ "highlight-marker-underline" ], "grund": "laut Katalog nicht für sehr formale Marken" }, { "ids": [ "marquee-laufband" ], "grund": "Mandanten- oder Ranking-Logos im Laufband wirken nach Startup" }, { "ids": [ "cinematic-video-hero" ], "grund": "Handschlag- und Skyline-Stockvideos sind das Kanzlei-Klischee" }, { "ids": [ "smooth-scroll-lenis", "magnetische-elemente" ], "grund": "smooth-scroll-lenis / magnetische-elemente / jeder Custom-Cursor – Show statt Seriosität" }, { "ids": [ "kreistext-siegel-rotierend" ], "grund": "'Seit 1950'-Siegel wirken wie Werbung" }, { "ids": [ "mesh-gradient-shader" ], "grund": "kein Bezug zur Branche" } ], "ton": { "anrede": "Sie", "saetze": "Präzise und vollständig, Fachbegriff erklärt, keine Floskeln. Insights mit Datum und Rubrik.", "haltung": "Souverän und sachlich, auf Augenhöhe mit der Mandantin.", "beispiele": [ "Wir beraten Familienunternehmen bei Nachfolge und Verkauf.", "Neue Regeln zur Grundsteuer: was Eigentümer jetzt prüfen sollten." ], "nicht": "„Ihr kompetenter Partner in allen Rechtsfragen“, „maßgeschneiderte Lösungen“, „Wir kämpfen für Ihr Recht!“." }, "bildsprache": { "licht": "Porträts in einheitlichem, weichem Licht vor demselben Hintergrund.", "ausschnitt": "Brustbild auf Augenhöhe; Räume der Kanzlei nur als ruhige Totale.", "personen": "Ja: nur echte Partner:innen und Team, mit Funktion und Sprachen.", "formate": [ "4:5", "3:2" ], "nicht": "Keine Skyline, kein Handschlag, keine Justitia, keine Paragraphen- oder Waagen-Symbole, keine Stock-Meetings." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sektion": "clamp(72px, 9vw, 136px)", "dichte": "mittel", "hinweis": "Geordnet und ruhig: Insights und Köpfe in festen Rastern mit 32 px Abstand, Fließtext auf 65ch." }, "raster": { "spalten": 12, "rand": "clamp(20px, 4vw, 56px)", "spalt": "clamp(16px, 2vw, 32px)", "max_breite": "1280px", "hinweis": "Hero 7/5 (Satz links, Insight rechts). Köpfe als 4er-Raster mit einheitlichem Porträt 4:5, Insights als Liste mit Datum und Rubrik." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "1px #D2CDC7 zwischen Listeneinträgen und um Felder", "schatten": "keiner", "hinweis": "Keine Rundung, keine Schatten, kein Glas. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Formularknöpfe eckig im Markenton." }, "template": true, "template_variante": false, "starter": false }, { "id": "praxis-gesundheit-ruhig", "name": "Praxis & Therapie: ruhig und zugewandt", "branche": "Arztpraxis / Zahnarzt / Psychotherapie / Physiotherapie / Gesundheitsangebot", "kurz": "Kein klinisches Weiß-Blau: gedecktes Grün oder Petrol, warme Off-Whites und eine weiche Serif für Überschriften. Der Weg zum Termin ist auf jeder Seite einen Klick entfernt, Behandlungen und Ablauf sind in einfacher Sprache erklärt. Bewegung ist kurz, ruhig und selten; nur Bilder dürfen langsam überblenden.", "stimmung": [ "ruhig", "vertrauensvoll", "warm", "zugänglich" ], "stimmung_tags": [ "ruhig", "warm" ], "begriffe": [ "Arztpraxis", "Arzt", "Ärztin", "Zahnarzt", "Kieferorthopädie", "Psychotherapie", "Physiotherapie", "Ergotherapie", "Logopädie", "Heilpraktiker", "Hebamme", "Osteopathie", "Tierarzt", "Podologie" ], "ziele": [ "termin" ], "varianten": [ { "name": "Zahnarztpraxis", "hinweis": "Notfall zuerst: Wer mit Schmerzen sucht, braucht sofort die eine Zeile im Kopf und mobil in der unteren Leiste (mobile-bottom-navigation: Anrufen / Notfall / Termin): Notfallzeit der Praxis heute, außerhalb der zahnärztliche Notdienst der …" }, { "name": "Tierarztpraxis", "hinweis": "Wer anruft, hat meist ein krankes Tier: Notdienst-Zeile im Kopf und mobil in der unteren Leiste (Anrufen / Notdienst / Termin), mit eigenen Notdienstzeiten oder dem Verweis auf den tierärztlichen Notdienst der Region." } ], "schrift": { "headline": "hedvig-letters-serif", "text": "google-sans-flex", "akzent": "", "groessen": "Alle drei Referenzen kombinieren eine weiche Serif-Headline (Corda, GT Super, Nantes) mit einer freundlichen Grotesk. h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Hedvig Letters Serif 400, opsz 24, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem), opsz 24; Fließtext Google Sans Flex wght 400, ROND 30–50 (weich, aber klar), opsz automatisch, mindestens 1.0625rem (17px), Zeilenhöhe 1.6, max. 62ch; Buttons/Labels 1rem wght 500. Für maximale Lesbarkeit (ältere Patienten) Text auf atkinson-hyperlegible-next wechseln.", "techniken": [ "optische-groessen-opsz", "lesesatz-text-wrap", "fluide-typo-clamp-cqi" ], "alternative": "Headline gambarino oder erode, Text general-sans (ITF) – näher an GT Super/Corda + Ginto, aber nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F5F7F7", "label": "Grund (HelloBetter)" }, { "token": "flaeche", "hex": "#E2E0DE", "label": "warme Fläche/Karten (One Medical)" }, { "token": "marke", "hex": "#005450", "label": "Marke, Buttons, Footer (One Medical)" }, { "token": "text", "hex": "#363B3B", "label": "Text (HelloBetter)" }, { "token": "text-2", "hex": "#596666", "label": "Sekundärtext" }, { "token": "akzent", "hex": "#FFC776", "label": "warmer Akzent für Hinweise/Badges (One Medical)" } ], "signal": "marke", "farbprinzip": "Gedecktes Grün/Petrol als Vertrauenston (statt Krankenhausblau), warme Off-Whites und Greige als Flächen, dunkles Grüngrau statt Schwarz für Text, ein warmer Akzent (Apricot/Gelb) nur für Hervorhebungen. Kontrast für Text mind. 4.5:1.", "stil": "token-tech-praezise", "stil_ui": "", "ease": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer": { "xs": 70, "s": 110, "m": 150, "l": 240, "xl": 400, "xxl": 700 }, "bewegung_regel": "UI-Feedback schnell und ruhig wie in einem Formular-Werkzeug: kurze Dauern, kein Federn, kein Springen. Langsam darf nur ein Bild überblenden. Keine automatisch bewegten Inhalte (kein Wortwechsel, kein Autoplay-Karussell). Bei prefers-reduced-motion alles sofort.", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Foto + Satz in einfacher Sprache + Button „Termin vereinbaren“ (Online-Termin per termin-buchung-zwei-klick oder Telefon als tel:-Link). Keine Stock-Ärzt:innen, keine wechselnden Wörter.", "hero_aufbau": { "raster": "12 Spalten: Text über Spalte 1 bis 6, Foto über 7 bis 12; mobil Foto unter der H1.", "bild": "Echtes Praxis- oder Teamfoto, 4:5, mit 16 px Radius.", "h1": "clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Hedvig Letters Serif 400, links.", "handlung": "„Termin vereinbaren“ (#005450 gefüllt, Pille) und Telefon als tel:-Link mit sichtbarer Nummer.", "zusatz": "Sprechzeiten heute als Zeile; mobil untere Leiste Anrufen / Termin / Anfahrt." }, "sektionen": [ { "zweck": "Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)", "muster": [ "akkordeon-hoehe-auto", "hovercard-interest-invoker", "leistungsseite-antwort-zuerst", "raster-zu-wischreihe" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "leistungsseite-antwort-zuerst": "praxis", "raster-zu-wischreihe": "einreihig" } }, { "zweck": "Termin online (Buchungs-Widget erst nach Consent bzw. Klick, sonst Telefon)", "muster": [ "termin-buchung-zwei-klick" ], "varianten": { "termin-buchung-zwei-klick": "platzhalter" } }, { "zweck": "Ihr erster Termin – so läuft es ab", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Team / Therapeut:innen", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "raster" } }, { "zweck": "Praxisräume", "muster": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "varianten": { "css-native-karussell": "buehne", "galerie-shared-element-vollbild": "basis" } }, { "zweck": "Patientenstimmen / Bewertungen (nur echt, sachlich, mit Einwilligung und vom Kunden freigegeben; HWG und Berufsrecht; Google-Bewertungen nur mit Echtheitshinweis)", "muster": [ "testimonials-neu-gedacht", "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "testimonials-neu-gedacht": "stimmen-reihe", "bewertungsprofil-mit-echtheitshinweis": "pille" } }, { "zweck": "Kurse (Rückenschule, Prävention, Reha-Sport; nur bei regelmäßigen Kursen, sonst Liste)", "muster": [ "wochen-kursplan" ], "varianten": { "wochen-kursplan": "studio" } }, { "zweck": "Kosten, Kassen, Rezept – FAQ", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)", "muster": [ "kontakt-anfrage-formular", "standortfinder-liste", "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "standortfinder-liste": "kompakt", "oeffnungszeiten-status": "karte", "karte-zwei-klick": "bild" } }, { "zweck": "Erklärung zur Barrierefreiheit (eigene Seite)", "muster": [ "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "erklaerung" } } ], "bereiche": { "navigation": [ "native-popover-dropdowns", "mobile-bottom-navigation" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "checkbox-radio-animiert", "fortschrittsring", "einblenden-starting-style" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "button-zustaende", "pfeil-icon-button" ] }, "varianten_demo": { "studio-visitenkarte-footer": "praxis", "pfeil-icon-button": "linie", "mobile-bottom-navigation": "kontakt", "bild-zoom-in-maske": "basis", "css-native-karussell": "buehne", "galerie-shared-element-vollbild": "basis" }, "signatur": [ "hovercard-interest-invoker" ], "button": [ "button-zustaende", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "konfetti-erfolg" ], "grund": "laut Katalog nicht im Gesundheitskontext; Terminbestätigung ruhig und klar" }, { "ids": [ "zahlen-odometer" ], "grund": "hochgezählte Patientenzahlen wirken unseriös" }, { "ids": [ "marquee-laufband" ], "grund": "Unruhe neben Texten, die Sicherheit geben sollen" }, { "ids": [ "smooth-scroll-lenis", "magnetische-elemente" ], "grund": "smooth-scroll-lenis / jeder Custom-Cursor / magnetische-elemente – stört Menschen mit Einschränkungen und wirkt verspielt" }, { "ids": [ "cinematic-video-hero" ], "grund": "Stock-Ärzt:innen mit Stethoskop sind das Klischee; echte Fotos der Praxis" }, { "ids": [ "scramble-decode", "typewriter-natural" ], "grund": "technisch-kalt, gegen die Stimmung" }, { "ids": [ "mesh-gradient-shader", "grain-noise-overlay" ], "grund": "Effekt statt Ruhe" } ], "ton": { "anrede": "Sie", "saetze": "Einfache Sprache, höchstens 15 Wörter je Satz, Alltagswort zuerst, Fachwort in Klammern.", "haltung": "Ruhig und beruhigend, offen zu Kosten und Kassenfragen.", "beispiele": [ "Sie haben Schmerzen? Rufen Sie an, wir suchen mit Ihnen einen Termin.", "Schlafprobleme (Insomnie): So läuft die Behandlung." ], "nicht": "„Ihre Gesundheit liegt uns am Herzen“, „schmerzfrei“, Angstmache über Folgen, wechselnde Wörter in der Headline." }, "bildsprache": { "licht": "Helles, weiches Tageslicht, warme Töne statt Kaltweiß.", "ausschnitt": "Praxisräume, Empfang, Team im Gespräch mit Blickkontakt.", "personen": "Ja: das echte Team, freundlich; keine Patient:innen in Behandlung.", "formate": [ "4:5", "3:2", "1:1" ], "nicht": "Keine Stock-Ärzt:innen mit Stethoskop, kein Klinikblau, keine Zahnlächeln-Nahaufnahmen, keine Spritzen oder Instrumente." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 88, 128 ], "sektion": "clamp(64px, 8vw, 120px)", "dichte": "mittel", "hinweis": "Ruhig und übersichtlich: Behandlungen als Liste mit 24 px Abstand, Formulare mit 20 px zwischen Feldern, Fließtext auf 62ch." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(16px, 2.4vw, 32px)", "max_breite": "1200px", "hinweis": "Hero 6/6 (Text links, Foto rechts). Team als 3er-Raster, Behandlungen in einer Spalte mit Unterzeile." }, "form": { "radius_klein": "12px", "radius_gross": "16px", "pille": true, "linie": "1px #E2E0DE", "schatten": "nur Hovercard und Popover: weich und flach in Grüngrau, sonst keiner", "hinweis": "Weich, aber klar: Pillen für Termin und Telefon, 16 px für Fotos und Karten (Demo hovercard-interest-invoker zeigt 12 und 16 px)." }, "template": true, "template_variante": false, "starter": true }, { "id": "kurs-coaching-lernweg", "name": "Online-Kurs & Coaching: klarer Lernweg", "branche": "Online-Kurs / Coaching / Akademie / Weiterbildung / Bildungsangebot", "kurz": "Die Seite verkauft ein Ergebnis und einen Weg dorthin: Für wen, was man danach kann, Module, wer unterrichtet, was es kostet. Freundliche, gut lesbare Typo, ein heller Grund, ein Markenton und eine Erfolgsfarbe für Fortschritt. Bewegung ist schnell und ermutigend – kleine Federn nur dort, wo etwas geschafft ist.", "stimmung": [ "klar", "ermutigend", "persönlich", "strukturiert" ], "stimmung_tags": [ "warm", "verspielt", "präzise" ], "begriffe": [ "Coaching", "Coach", "Online-Kurs", "Akademie", "Weiterbildung", "Seminar", "Trainer", "Musikschule", "Sprachschule", "Nachhilfe", "Mentoring" ], "ziele": [ "kauf", "termin" ], "varianten": [ { "name": "Musikschule / Nachhilfe", "hinweis": "Abgrenzung: fahrschule-freundlich-buchbar nennt Nachhilfe ebenfalls." } ], "schrift": { "headline": "bricolage-grotesque", "text": "onest", "akzent": "shantell-sans", "groessen": "h1 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage wght 700, opsz 72–96, Laufweite -0.02em, Zeilenhöhe 1.05; h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wght 650; Fließtext Onest 1.0625–1.125rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Shantell Sans (INFM 30–60, BNCE 0) sparsam für Randnotizen und Modul-Labels („Modul 03 · 45 min“), 0.875–0.9375rem, nie für Fließtext, Buttons oder Preise. Für Kurse mit viel Lesetext reicht Bricolage im Text nicht – deshalb eine eigene Textschrift. Barrierearme Variante: Text atkinson-hyperlegible-next.", "techniken": [ "optische-groessen-opsz", "fluide-typo-clamp-cqi", "lesesatz-text-wrap", "tabellenziffern" ], "alternative": "Für persönliches Coaching mit Buch-Anmutung Paarung warmer-text (young-serif + sentient, ITF) – nah an Maven (Sentient) und Ness Labs (Lora), aber nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F4F6FA", "label": "Grund (Maven)" }, { "token": "flaeche", "hex": "#FFFFFF", "label": "Karten" }, { "token": "text", "hex": "#141414", "label": "Text (Brilliant)" }, { "token": "marke", "hex": "#7491FF", "label": "Markenton/Buttons (Brilliant; austauschbar)" }, { "token": "erfolg", "hex": "#10BF7A", "label": "Erfolg/Fortschritt (Ness Labs)" }, { "token": "hervorhebung", "hex": "#F7C325", "label": "Hervorhebung/Badge 'Nächster Start' (Brilliant)" } ], "signal": "marke", "farbprinzip": "Heller, leicht kühler oder warmer Grund, fast schwarze Tinte, ein Markenton für Aktionen und ein eigener Erfolgston für Fortschritt/Häkchen. Kategorie-Farben nur bei echten Kurskatalogen (Maven, Brilliant), sonst eine Akzentfarbe für Hervorhebungen.", "stil": "token-federnd-verspielt", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.34, 1.56, 0.64, 1)", "dauer": { "s": 400, "m": 500, "l": 800 }, "bewegung_regel": "Basis für Navigation, Formulare, Akkordeon und Einblendungen ist animationsstil_ui token-toggle-asymmetrisch (steile Expo-Ausklang-Kurve) mit kurzen Dauern. Federnd (Kurve des Stils) nur, wenn etwas geschafft ist: Modul abgehakt, Quiz richtig, Kurs gebucht. Nie an Navigation oder Fließtext.", "hero": [], "hero_variante": [ "prompt-hero-eingabefeld", "split-screen-sticky-seiten" ], "hero_varianten": { "split-screen-sticky-seiten": "bild" }, "hero_beschreibung": "Standard (Einzelkurs): Ergebnis-Satz + Zielgruppe + Startdatum/Format + Preis bzw. ab-Preis + ein CTA, ohne Muster oder als split-screen-sticky-seiten mit Foto der Trainerin. prompt-hero-eingabefeld nur bei einem Kurskatalog mit funktionierender Suche (sonst laut Katalog „Fake-Input“).", "hero_aufbau": { "raster": "12 Spalten: Text über Spalte 1 bis 7, Foto der Trainerin über 8 bis 12; alternativ split-screen-sticky-seiten.", "bild": "Porträt 4:5. Prompt-Feld nur bei einem Kurskatalog mit funktionierender Suche.", "h1": "clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage 700, links.", "handlung": "Ein Haupt-CTA „Platz sichern“ als Tiefen-Taste, dazu der Textlink „Module ansehen“.", "zusatz": "Zeile mit Zielgruppe, Startdatum, Format und ab-Preis; Badge „Nächster Start“ in #F7C325." }, "sektionen": [ { "zweck": "Für wen / Was du danach kannst (Bento nur mit echten, ungleichen Inhalten wie Ergebnis-Beispielen; sonst eine ruhige Liste)", "muster": [ "bento-grid-interaktiv" ], "varianten": {} }, { "zweck": "Lernweg / Module / Kurswochen", "muster": [ "prozess-timeline-wachsende-linie", "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "leistungen" } }, { "zweck": "Über die Trainerin / den Coach", "muster": [ "team-ueber-mich-layout", "eigener-videoplayer" ], "varianten": { "team-ueber-mich-layout": "statement", "eigener-videoplayer": "kapitel" } }, { "zweck": "Ergebnisse / Teilnehmerstimmen", "muster": [ "testimonials-neu-gedacht" ], "varianten": { "testimonials-neu-gedacht": "wand" } }, { "zweck": "Kurskatalog (bei mehreren Kursen)", "muster": [ "facettenfilter-ergebnisliste", "produktfinder-quiz" ], "varianten": { "produktfinder-quiz": "schritte", "facettenfilter-ergebnisliste": "leiste" } }, { "zweck": "Live-Termine (Wochenplan nur bei wiederkehrenden Live-Terminen)", "muster": [ "wochen-kursplan" ], "varianten": { "wochen-kursplan": "studio" } }, { "zweck": "Preise / Pakete / Ratenzahlung", "muster": [ "vergleichstabelle-sticky", "kostenrechner-konfigurator" ], "varianten": { "vergleichstabelle-sticky": "pakete", "kostenrechner-konfigurator": "bad" } }, { "zweck": "Anmeldung (mehrere Schritte, Fehlerliste)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung" ], "varianten": { "mehrschritt-anfrage": "leiste", "formular-fehlerzusammenfassung": "liste" } }, { "zweck": "FAQ (Zeitaufwand, Zertifikat, Rückgabe, Förderung)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)", "muster": [ "kontakt-anfrage-formular", "termin-buchung-zwei-klick", "karte-zwei-klick" ], "varianten": { "termin-buchung-zwei-klick": "platzhalter", "karte-zwei-klick": "bild" } }, { "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "navigation": [ "sticky-shrink-header", "native-popover-dropdowns" ], "scroll": [ "scroll-fortschritt" ], "schrift_animation": [ "highlight-marker-underline" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "fortschrittsring", "checkbox-radio-animiert", "druck-feedback", "konfetti-erfolg" ], "galerie": [ "css-native-karussell" ], "footer": [ "footer-newsletter-mit-persoenlichkeit" ], "button": [ "tiefen-taste-3d", "verlaufs-rahmen" ] }, "varianten_demo": { "css-native-karussell": "peek", "verlaufs-rahmen": "button", "tiefen-taste-3d": "stapel", "bild-zoom-in-maske": "richtung", "footer-newsletter-mit-persoenlichkeit": "basis" }, "signatur": [ "scroll-fortschritt" ], "button": [ "tiefen-taste-3d", "verlaufs-rahmen" ], "optional": [], "nicht_verwenden": [ { "ids": [ "zahlen-odometer" ], "grund": "als Countdown – künstliche Verknappung ('Nur noch 02:59:13') zerstört Vertrauen" }, { "ids": [ "marquee-laufband" ], "grund": "mit 'Bekannt aus'-Logos – nur echte Erwähnungen, dann als ruhige logo-wand-social-proof" }, { "ids": [ "typewriter-natural", "ki-streaming-text-denkindikator" ], "grund": "wirkt nach generiertem Inhalt, solange kein echter KI-Tutor existiert" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "/ Custom-Cursor – stört auf langen Verkaufsseiten das Lesen" }, { "ids": [ "interaktives-3d-hero", "mesh-gradient-shader" ], "grund": "Effekt statt Lernversprechen" }, { "ids": [ "einmal-intro-session" ], "grund": "/ Preloader aller Art – Interessenten wollen sofort Titel, Termin, Preis sehen" } ], "ton": { "anrede": "du", "saetze": "Kurz, das Ergebnis vorn, konkrete Zeitangaben (Wochen, Minuten).", "haltung": "Ermutigend und ehrlich zum Aufwand.", "beispiele": [ "In acht Wochen sicher präsentieren.", "Modul 02 · 40 min: Du baust deine erste Folie." ], "nicht": "„Dein Weg zur finanziellen Freiheit“, Countdown-Druck, „Nur heute!“, anonyme Fünf-Sterne-Sätze." }, "bildsprache": { "licht": "Helles, offenes Tageslicht.", "ausschnitt": "Trainer:in im Gespräch oder beim Erklären, Bildschirm mit echtem Kursinhalt, Notizen.", "personen": "Ja: die Person hinter dem Kurs; Teilnehmende nur mit Einwilligung.", "formate": [ "4:5", "16:9", "1:1" ], "nicht": "Keine Stock-Laptops mit Kaffee, keine Erfolgsbilder mit Sportwagen, keine Diplomhut-Icons." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 40, 56, 80, 120 ], "sektion": "clamp(64px, 8vw, 112px)", "dichte": "mittel", "hinweis": "Strukturiert: Module mit 16 px zwischen Label, Titel und Ergebnis, 24 px zwischen Modulen. Preisvergleich mit gleich hohen Karten." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(16px, 2vw, 28px)", "max_breite": "1200px", "hinweis": "Hero 7/5 (Text/Foto) oder split-screen-sticky-seiten. Module in einer Spalte, Pakete als 3er-Raster." }, "form": { "radius_klein": "10px", "radius_gross": "20px", "pille": true, "linie": "1px #141414 mit 12 % Deckkraft", "schatten": "nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten flach in #FFFFFF auf #F4F6FA", "hinweis": "Freundlich rund: Pillen für Knöpfe und Badges, 20 px für Karten. verlaufs-rahmen nur am Button (Variante button)." }, "template": true, "template_variante": false, "starter": false }, { "id": "d2c-produkt-zuerst", "name": "Onlineshop & Produktmarke: Produkt zuerst", "branche": "Onlineshop / D2C-Produktmarke / Manufaktur mit Shop", "kurz": "Produktfotos auf warmen Neutraltönen, eine klare Grotesk für Navigation, Preise und Produktnamen und eine charaktervolle Serif nur für Marken-Claims – so arbeiten Allbirds, ooia und KoRo. Kategorien, Bestseller und Vertrauen (Bewertungen, Versand, Rückgabe) kommen vor jeder Inszenierung. Bewegung ist schnell und dient Warenkorb, Filtern und Drawern.", "stimmung": [ "sympathisch", "direkt", "hochwertig", "zugänglich" ], "stimmung_tags": [ "warm", "verspielt" ], "begriffe": [ "Onlineshop", "Shop", "Produktmarke", "D2C", "Manufaktur", "Lebensmittel", "Getränke", "Wein", "Hofladen", "Möbel", "Fahrrad" ], "ziele": [ "kauf" ], "varianten": [], "schrift": { "headline": "young-serif", "text": "instrument-sans", "akzent": "", "groessen": "Prinzip aller drei Referenzen: Grotesk für UI/Preise/Produktnamen, eigene Serif nur für Marken-Claims. h1 (Claim) clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, Laufweite -0.01em, Zeilenhöhe 1.05; Sektions-Titel Instrument Sans 600, clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem), -0.015em; Produktname 1rem–1.125rem wght 500–600; Preis gleiche Größe mit tabellarischen Ziffern; Fließtext/Beschreibung 1rem, Zeilenhöhe 1.55; Labels/Badges 0.75rem Versal +0.06em.", "techniken": [ "serif-grotesk-duotone", "tabellenziffern", "fluide-typo-clamp-cqi" ], "alternative": "Claims in gambarino (weiche Serif wie Feijoa/Self Modern), UI in general-sans oder satoshi (ITF) – nicht für Templates. Ruhigere Marke (Kosmetik): fraunces mit SOFT 100 statt young-serif." }, "farben": [ { "token": "grund", "hex": "#F5F4F1", "label": "Grund (Allbirds natural-white-25)" }, { "token": "grund-2", "hex": "#ECE9E2", "label": "Produktkachel-Hintergrund (Allbirds natural-white-60)" }, { "token": "text", "hex": "#212121", "label": "Text und Primär-Button (Allbirds black)" }, { "token": "grund-3", "hex": "#6B6B6B", "label": "Sekundärtext/Grundpreis" }, { "token": "nachhaltigkeit", "hex": "#10714E", "label": "Nachhaltigkeit/Verfügbar (Allbirds green)" }, { "token": "akzent", "hex": "#EB5C9D", "label": "Marken-Akzent/Sale-Badge (ooia; austauschbar)" } ], "signal": "text", "farbprinzip": "Warme Neutraltöne als Bühne für Produktfotos, fast schwarze Tinte und ein schwarzer (oder sehr dunkler) Primär-Button für 'In den Warenkorb'. Markenfarben als Akzent für Badges, Sale, Themenwelten; Produktfarben kommen aus den Varianten (Farb-Swatches als Tokens).", "stil": "token-toggle-asymmetrisch", "stil_ui": "", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "xs": 150, "s": 220, "m": 300, "l": 450 }, "bewegung_regel": "Öffnen mit der Ausklang-Kurve des Stils, Schließen schneller mit dessen Anlauf-Kurve (das Prinzip steht so bei Allbirds und KoRo im CSS, Werte unter beobachtet). Keine Scroll-Inszenierung zwischen Kunde und Produkt; Bewegung bestätigt Handlungen (hinzugefügt, gefiltert, gemerkt).", "hero": [ "bento-grid-interaktiv" ], "hero_variante": [], "hero_varianten": {}, "hero_beschreibung": "Claim plus 2–4 Kategorie-Einstiege mit echten Produktfotos; bento-grid-interaktiv nur mit echten, ungleich gewichteten Inhalten (eine große Kachel für Bestseller oder Neuheit, kleinere für Kategorien), sonst 2–4 große Kacheln. Darunter sofort Bestseller mit Preis. Kein Slider, kein Video.", "hero_aufbau": { "raster": "Claim über 8 Spalten oben, darunter Bento: eine große Kachel über 6 Spalten und 2 Reihen, 2 bis 3 kleinere daneben (bento-grid-interaktiv).", "bild": "Echte Produkt- und Kategoriefotos, 4:5 und 1:1; kein Slider, kein Video.", "h1": "clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, oben links.", "handlung": "„Bestseller ansehen“ (#212121 gefüllt); die Kategorie-Kacheln sind selbst die Wege, kein zweiter Knopf.", "zusatz": "Schmale Ankündigungsleiste oben (Gratisversand ab …), Vertrauenszeile Versand / Rückgabe / Bewertungen unter dem Bento." }, "sektionen": [ { "zweck": "Bestseller / Neuheiten", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "produktreihe" } }, { "zweck": "Kategorien / Themenwelten (Bento höchstens einmal pro Seite: steht es im Hero, hier große Bildkacheln ohne Bento)", "muster": [ "bento-grid-interaktiv", "bild-hotspots" ], "varianten": { "bild-hotspots": "shop" } }, { "zweck": "Kategorie mit Filter", "muster": [ "facettenfilter-ergebnisliste" ], "varianten": { "facettenfilter-ergebnisliste": "leiste" } }, { "zweck": "Warum wir – Vertrauen (Material, Prüfsiegel, Versand, Rückgabe)", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "typo" } }, { "zweck": "Produktdetailseite", "muster": [ "produkt-kaufbox-varianten", "galerie-shared-element-vollbild", "akkordeon-hoehe-auto", "warenkorb-drawer", "eu-gewaehrleistungshinweis" ], "varianten": { "produkt-kaufbox-varianten": "seite", "galerie-shared-element-vollbild": "zoom", "warenkorb-drawer": "drawer", "akkordeon-hoehe-auto": "basis", "eu-gewaehrleistungshinweis": "kaufbox" } }, { "zweck": "Produktvergleich / Finder", "muster": [ "produktfinder-quiz", "vergleichstabelle-sticky" ], "varianten": { "produktfinder-quiz": "schritte", "vergleichstabelle-sticky": "pakete" } }, { "zweck": "Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis)", "muster": [ "bewertungen-verteilung", "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungen-verteilung": "band", "bewertungsprofil-mit-echtheitshinweis": "pille" } }, { "zweck": "Community / Rezepte / Journal", "muster": [ "masonry-grid-lanes-galerie", "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)", "muster": [ "kontakt-anfrage-formular", "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "oeffnungszeiten-status": "kompakt", "karte-zwei-klick": "bild" } }, { "zweck": "Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg", "widerruf-und-kuendigung-schaltflaeche": "richtig" } } ], "bereiche": { "seitenuebergang": [ "vt-shared-element-morph" ], "navigation": [ "mega-menue-morphing-viewport", "gestapelte-drawer-navigation", "sticky-shrink-header" ], "hover": [ "bild-zoom-in-maske", "hover-absicht-timing" ], "mikro": [ "in-den-warenkorb-flug", "toast-stapel", "skeleton-shimmer", "animiertes-select", "checkbox-radio-animiert", "like-herz-burst", "druck-feedback" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild", "masonry-grid-lanes-galerie" ], "footer": [ "footer-newsletter-mit-persoenlichkeit", "mega-footer-sitemap" ], "button": [ "button-gruppe-expressiv", "grain-noise-overlay" ] }, "varianten_demo": { "footer-newsletter-mit-persoenlichkeit": "basis", "bild-zoom-in-maske": "basis", "grain-noise-overlay": "button", "button-gruppe-expressiv": "split", "css-native-karussell": "produktreihe", "galerie-shared-element-vollbild": "produkt" }, "signatur": [ "in-den-warenkorb-flug", "like-herz-burst" ], "button": [ "button-gruppe-expressiv", "grain-noise-overlay" ], "optional": [], "nicht_verwenden": [ { "ids": [ "smooth-scroll-lenis" ], "grund": "verlangsamt Scrollen durch Produktlisten und kostet auf Mobilgeräten Leistung" }, { "ids": [ "horizontal-scroll-section", "pinned-scrub-scrollytelling" ], "grund": "versteckt Produkte hinter Scroll-Inszenierung" }, { "ids": [ "fullpage-snap-slides" ], "grund": "Kunden wollen frei durch Listen scrollen" }, { "ids": [], "grund": "jeder Preloader – jede Sekunde vor dem ersten Produkt kostet Umsatz" }, { "ids": [ "cursor-follower-lerp", "kontextueller-cursor" ], "grund": "Agentur-Geste, im Shop ohne Nutzen" }, { "ids": [ "webgl-bildverzerrung", "interaktives-3d-hero" ], "grund": "schwer, und Produktfotos sollen unverfälscht aussehen (3D nur als echter Produkt-Konfigurator)" } ], "ton": { "anrede": "du", "saetze": "Kurz und freundlich, konkret zu Material, Menge, Preis und Lieferzeit.", "haltung": "Sympathisch und direkt; Vertrauen über Fakten (Versand, Rückgabe, Bewertungen mit Quelle).", "beispiele": [ "Leicht, weich, waschbar. Ab 89 €.", "Bis 14 Uhr bestellt, am selben Tag verschickt." ], "nicht": "„nachhaltig“ ohne Nachweis, „Bestseller“ ohne Grundlage, Fake-Countdown, „Nur noch 2 Stück!“ ohne echte Zahl." }, "bildsprache": { "licht": "Helles, gleichmäßiges Studiolicht auf #ECE9E2; Themenwelten in Tageslicht.", "ausschnitt": "Produkt mittig mit gleichem Rand; das zweite Bild zeigt den Gebrauch.", "personen": "Im zweiten Bild und in Themenwelten; nie im Produktraster.", "formate": [ "1:1", "4:5", "3:2" ], "nicht": "Keine wechselnden Hintergründe im Raster, keine Freisteller mit künstlichem Schlagschatten, keine Stock-Lifestyle-Bilder." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 20, 24, 32, 48, 72, 112 ], "sektion": "clamp(56px, 7vw, 104px)", "dichte": "mittel", "hinweis": "Shop-Rhythmus: Produktkacheln dicht (8 bis 16 px Spalt), Kaufbox mit 16 px zwischen Variante, Preis und Knopf. Inszenierung kommt nach Kategorien und Bestsellern." }, "raster": { "spalten": 12, "rand": "clamp(16px, 3vw, 40px)", "spalt": "clamp(8px, 1.2vw, 16px)", "max_breite": "1440px", "hinweis": "Startseite: Bento oder 2 bis 4 große Kacheln, darunter Bestseller in 4 Spalten (2 mobil). Produktseite 7/5: Galerie links, Kaufbox rechts sticky." }, "form": { "radius_klein": "8px", "radius_gross": "12px", "pille": true, "linie": "1px #212121 mit 10 % Deckkraft", "schatten": "keiner auf Kacheln; der Warenkorb-Drawer dunkelt den Grund ab", "hinweis": "Kacheln 12 px auf #ECE9E2, Knöpfe als Pille, Swatches rund. grain-noise-overlay nur am Button (Variante button)." }, "template": true, "template_variante": false, "starter": false }, { "id": "verein-nonprofit-wirkung", "name": "Verein & Non-Profit: Wirkung zeigen", "branche": "Verein / Non-Profit / Stiftung / Nachhaltigkeitsinitiative", "kurz": "Ein Satz Mission in einer kräftigen, schmalen Display-Schrift, echte Fotos aus den Projekten und große Wirkungszahlen – alle drei Referenzen arbeiten so. Ein tiefer Markenton trägt die Seite, ein Signal (Gelb) gehört nur dem Spenden-Button. Viele Wege zum Mitmachen statt nur 'Spenden'; Transparenz, wohin das Geld geht.", "stimmung": [ "engagiert", "glaubwürdig", "nahbar", "kraftvoll" ], "stimmung_tags": [ "laut", "warm" ], "begriffe": [ "Verein", "Sportverein", "Non-Profit", "NGO", "Stiftung", "Initiative", "Ehrenamt", "Förderverein", "Spenden", "Tierschutz", "Umweltschutz" ], "ziele": [ "mitglied", "info" ], "varianten": [ { "name": "Sportverein (Mitgliedschaft statt Spende)", "hinweis": "Signalfarbe für „Mitglied werden“ statt für Spenden; Schrift, Farbe, Stil und Signatur bleiben." } ], "schrift": { "headline": "big-shoulders", "text": "archivo", "akzent": "", "groessen": "Kräftige, schmale Display-Headline wie Veneer/Gabriel Sans, ruhiger Text. h1 clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders wght 800, Versal, Laufweite +0.005em, Zeilenhöhe 0.95; Wirkungszahlen clamp(3rem, 2rem + 4vw, 5.5rem) wght 800 mit Tabellenziffern; h2 clamp(1.75rem, 1.2rem + 2vw, 3rem) wght 700; Fließtext Archivo 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Buttons Archivo 600, 1rem. Bei Klima-/Umweltvereinen ist climate-crisis als Akzent für genau eine Jahreszahl oder ein Wort möglich.", "techniken": [ "versal-kondensiert-fit-to-width", "tabellenziffern", "lesesatz-text-wrap" ], "alternative": "Headline tanker (ITF, schwere Display-Schrift nah an Veneer), Text satoshi – nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#FFFFFF", "label": "Grund" }, { "token": "flaeche", "hex": "#EDF5FA", "label": "helle Fläche (Viva con Agua)" }, { "token": "marke", "hex": "#002E6D", "label": "Marke, Headlines, dunkle Sektion (Viva con Agua; Ocean Cleanup #003755)" }, { "token": "text", "hex": "#222520", "label": "Fließtext (charity: water)" }, { "token": "flaeche-2", "hex": "#DFDFD7", "label": "warme Grau-Fläche (charity: water)" }, { "token": "text-2", "hex": "#FFCA0A", "label": "Spenden-Button, Text #222520 (charity: water)" } ], "signal": "text-2", "farbprinzip": "Ein tiefer Markenton (Navy/Petrol – Wasser, Natur) für Headlines, Header und dunkle Sektionen, helle Töne derselben Farbe als Flächen, warmes Grau für Ruhe. Ein Signalton ausschließlich für 'Spenden' – mit dunkler Schrift für ausreichenden Kontrast (Weiß auf Gelb wie bei charity: water ist zu schwach).", "stil": "token-kinetisch-inout", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.83, 0, 0.17, 1)", "dauer": { "m": 900, "l": 1200, "xl": 1500 }, "bewegung_regel": "Symmetrische InOut-Kurve des Stils nur für große Zustandswechsel: Kampagnen-Slides, Foto-Übergänge, Wirkungszahlen. Alles Interaktive (Buttons, Menü, Spendenformular) läuft über animationsstil_ui token-toggle-asymmetrisch in 150–200 ms. Überschwinger höchstens beim Dank nach der Spende. Zahlen zählen nur einmal und nur, wenn sie im Bild sind; unter prefers-reduced-motion sofort Endwert.", "hero": [ "typo-maske-medien" ], "hero_variante": [], "hero_varianten": {}, "hero_beschreibung": "Mission in einem Satz (Big Shoulders, Versal) + echtes Projektfoto + Spenden-Button. Typo-Maske nur für ein kurzes, fettes Schlüsselwort (z. B. „WASSER“) über echtem Projektmaterial, einmalig, kein Dauereffekt. Template-Standard ohne Effekt: schlichter Foto-Hero mit Mission.", "hero_aufbau": { "raster": "Foto randlos über die volle Breite, Mission unten links über Spalte 1 bis 8.", "bild": "Echtes Projektfoto, 16:9 Desktop, 4:5 mobil; Typo-Maske (typo-maske-medien) nur für ein kurzes Schlüsselwort, einmalig.", "h1": "clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders 800 Versal, unten links.", "handlung": "„Jetzt spenden“ (#FFCA0A, Text #222520) und „Mitmachen“ (Kontur), nebeneinander unter der Mission.", "zusatz": "Spenden-Knopf zusätzlich im Kopf; Wirkungszahlen mit „Stand: …“ als eigene Leiste direkt darunter." }, "sektionen": [ { "zweck": "Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)", "muster": [ "zahlen-fakten-section", "zahlen-odometer" ], "varianten": { "zahlen-fakten-section": "diagramm" } }, { "zweck": "Aktuelle Projekte / Kampagnen", "muster": [ "css-native-karussell", "editorial-magazin-layout" ], "varianten": { "css-native-karussell": "peek", "editorial-magazin-layout": "zeitung" } }, { "zweck": "Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)", "muster": [ "spendenmodul-wirkung", "formular-fehlerzusammenfassung" ], "varianten": { "spendenmodul-wirkung": "formular", "formular-fehlerzusammenfassung": "liste" } }, { "zweck": "So wirkt deine Spende (Mittelverwendung als Diagramm hinter dem Spendenmodul; ausführlich auf der Unterseite Transparenz bzw. Jahresbericht)", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "diagramm" } }, { "zweck": "Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)", "muster": [ "bento-grid-interaktiv" ], "varianten": {} }, { "zweck": "Geschichten aus den Projekten", "muster": [ "editorial-magazin-layout", "testimonials-neu-gedacht" ], "varianten": { "editorial-magazin-layout": "magazin", "testimonials-neu-gedacht": "wand" } }, { "zweck": "Termine & Aktionen vor Ort", "muster": [ "programm-kalender" ], "varianten": { "programm-kalender": "programm" } }, { "zweck": "Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)", "muster": [ "kontakt-anfrage-formular", "karte-zwei-klick" ], "varianten": { "karte-zwei-klick": "bild" } }, { "zweck": "Partner / Förderer", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "raster" } }, { "zweck": "Jahresbericht / FAQ / Spendenquittung", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } } ], "bereiche": { "navigation": [ "sticky-shrink-header", "native-popover-dropdowns" ], "scroll": [ "medien-expansion-scroll" ], "schrift_animation": [ "zahlen-odometer", "highlight-marker-underline" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "checkbox-radio-animiert", "fortschrittsring", "konfetti-erfolg" ], "galerie": [ "css-native-karussell", "masonry-grid-lanes-galerie" ], "footer": [ "footer-newsletter-mit-persoenlichkeit", "mega-footer-sitemap" ], "button": [ "button-zustaende", "fuellung-vom-eintrittspunkt" ] }, "varianten_demo": { "daten-scrollytelling": "mittel", "fuellung-vom-eintrittspunkt": "basis", "bild-zoom-in-maske": "basis", "css-native-karussell": "peek", "footer-newsletter-mit-persoenlichkeit": "basis" }, "signatur": [ "typo-maske-medien" ], "button": [ "button-zustaende", "fuellung-vom-eintrittspunkt" ], "optional": [ "daten-scrollytelling", "css-diagramm-attr" ], "nicht_verwenden": [ { "ids": [ "mesh-gradient-shader", "holo-irisierende-folie" ], "grund": "Hochglanz-Effekte widersprechen dem sparsamen Umgang mit Spendengeld" }, { "ids": [ "interaktives-3d-hero", "partikel-punktwolke" ], "grund": "teuer, langsam auf älteren Handys, kein Bezug zur Wirkung" }, { "ids": [ "fullpage-snap-slides", "pinned-scrub-scrollytelling" ], "grund": "als Startseite – zwingt Besucher durch eine Inszenierung, bevor sie spenden können" }, { "ids": [], "grund": "jeder Preloader – Spendenwillige brechen ab" }, { "ids": [ "mehrschicht-parallax" ], "grund": "wirkt wie Kampagnen-Microsite, nicht wie seriöse Organisation" }, { "ids": [ "cursor-follower-lerp", "blend-difference-cursor" ], "grund": "Custom-Cursor (cursor-follower-lerp, blend-difference-cursor) – keine Agentur-Gesten" } ], "ton": { "anrede": "du", "saetze": "Kurz und aktiv, Wirkung mit Zahl und Quelle.", "haltung": "Glaubwürdig und nahbar: Wirkung statt Mitleid, viele Wege zum Mitmachen. Stiftungen mit älterer Zielgruppe siezen, dann durchgehend.", "beispiele": [ "30 € = [Wirkung laut Jahresbericht].", "Mach mit: Starte deine eigene Spendenaktion." ], "nicht": "„Gemeinsam können wir die Welt verändern“, Schuldgefühle, Zahlen ohne Quelle, „klimaneutral“ ohne Nachweis." }, "bildsprache": { "licht": "Dokumentarisch, natürliches Licht vor Ort.", "ausschnitt": "Menschen bei der Arbeit im Projekt, Nahaufnahme mit Umgebung; Bildunterschrift mit Ort und Jahr.", "personen": "Ja, mit Einwilligung und in würdiger Lage; Namen in der Bildunterschrift.", "formate": [ "3:2", "4:5", "16:9" ], "nicht": "Keine Mitleidsbilder, keine weinenden Kinder als Spendenhebel, keine Stockfotos, keine Hände um einen Globus." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 144 ], "sektion": "clamp(64px, 9vw, 136px)", "dichte": "mittel", "hinweis": "Kräftig und klar: Wirkungszahlen mit viel Luft (höchstens 3 bis 4 in einer Reihe), Wege zum Mitmachen gleich groß mit 24 px Abstand." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(16px, 2vw, 32px)", "max_breite": "1320px", "hinweis": "Hero mit randlosem Foto, Mission unten links über 8 Spalten. Mitmach-Wege als 4er-Raster, Transparenz 6/6." }, "form": { "radius_klein": "4px", "radius_gross": "4px", "pille": false, "linie": "1px #DFDFD7", "schatten": "keiner", "hinweis": "Leicht gerundet und robust (button-zustaende und typo-maske-medien zeigen 4 px). Gelb #FFCA0A nur als Spenden-Fläche mit dunkler Schrift." }, "template": true, "template_variante": false, "starter": false }, { "id": "friseur-salon-handschrift", "name": "Salon: Handschrift und Termin", "branche": "Friseur / Barbershop / Kosmetikstudio / Nagelstudio", "kurz": "Ein Salon verkauft Termine bei bestimmten Menschen. Deshalb steht die Handschrift der Stylist:innen im Mittelpunkt: ihre Looks zum Durchwischen, ihr Name als Unterschrift, ihre Preisstufe offen in einer echten HTML-Preisliste. Puder statt Weiß, Espresso statt Schwarz, ein Lackrot nur für „Termin buchen“, dazu eine breitenvariable Kontrast-Antiqua mit Haltung. Alle Bewegung läuft auf einer einzigen Hauskurve: zögernder Anlauf, langer weicher Auslauf, wie ein Kammstrich.", "stimmung": [ "stilbewusst", "persönlich", "warm", "selbstbewusst" ], "stimmung_tags": [ "warm", "editorial" ], "begriffe": [ "Friseur", "Friseurin", "Salon", "Barbershop", "Barbier", "Kosmetikstudio", "Nagelstudio", "Wimpern", "Tattoo", "Piercing", "Make-up" ], "ziele": [ "termin" ], "varianten": [ { "name": "Barbershop", "hinweis": "Espresso #1E1412 als Grund, Puder #F4E9E4 als Schrift (15 : 1); Lackrot bleibt Signal, auf Espresso mit 2 px Puder-Rand (Lackrot allein hat dort nur 2,2 : 1)." }, { "name": "Kosmetik- und Nagelstudio", "hinweis": "Behandlungen wie bei Heyday als eigene Leistungsseiten mit Dauer, Ablauf, Inhalt und Preis (leistungsseite-antwort-zuerst); Nageldesigns als Looks im Kartenstapel." }, { "name": "Tattoo- und Piercingstudio", "hinweis": "Schrift, Farbe, Stil und Signatur bleiben: flick-karten-stapel trägt die Portfolios, je Artist ein Stapel; jede Karte nennt Motiv, Stil, Körperstelle und Zahl der Sitzungen als Text, verheilte Arbeiten sind als solche gekennzeichnet." } ], "schrift": { "headline": "kalnia", "text": "familjen-grotesk", "akzent": "mrs-saint-delafield", "groessen": "Salonname und h1 Kalnia clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), wdth 112, wght 500, Laufweite -0.02em, Zeilenhöhe 0.95 (Barbershop: wdth 125, wght 700, Versal, Laufweite +0.01em); h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wdth 100, wght 500. Fließtext Familjen Grotesk 1.0625rem/1.55, wght 400, max. 62ch; Preiszeilen 1rem wght 500, Preise rechtsbündig in Tabellenziffern; Rubriken und Stufen 0.8125rem Versal, +0.06em in Familjen (keine Mono). Mrs Saint Delafield nur für den Namen unter dem Porträt, 2.25–3rem, um -4° gedreht, höchstens einmal pro Ansicht; der Name steht darunter noch einmal in Familjen, damit ihn jeder lesen kann.", "techniken": [ "headline-laufweite-zeilenabstand", "fluide-typo-clamp-cqi", "tabellenziffern", "lesesatz-text-wrap" ], "alternative": "Headline melodrama oder gambarino, Text general-sans (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F4E9E4", "label": "Grund (Puder)" }, { "token": "grund-2", "hex": "#1E1412", "label": "Text, dunkle Sektionen, Barbershop-Grund (15 : 1 auf Puder)" }, { "token": "signal", "hex": "#9B1D2E", "label": "Signal Lackrot: Termin buchen, aktiver Reiter (6,8 : 1 auf Puder; Weiß darauf 8 : 1; auf Espresso nur mit 2 px Puder-Rand)" }, { "token": "flaeche", "hex": "#E9DBD4", "label": "Kartenfläche, Preisliste" }, { "token": "text", "hex": "#6E5A55", "label": "Meta: Dauer, Stufe, Bildunterschrift (5,4 : 1 auf Puder)" }, { "token": "linie", "hex": "#D9C8C0", "label": "Linien" } ], "signal": "signal", "farbprinzip": "Puder statt Reinweiß, Espresso statt Schwarz und ein Lackrot, das nur „Termin buchen“ und aktive Zustände trägt. Große Flächen aus Puder und Espresso (Preisliste, Gutschein, Fußzeile). Die Farbe kommt aus den Fotos der Arbeiten, deshalb bleiben die UI-Flächen neutral warm und färben keine Haarfarbe um. Barbershop: Espresso als Grund, Puder als Schrift.", "stil": "token-studio-signatur", "stil_ui": "", "ease": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer": { "xs": 250, "s": 400, "button": 475, "m": 525, "l": 725 }, "bewegung_regel": "Eine Kurve, eine Skala, wie im Stil gemessen. Zögernder Anlauf, langer weicher Auslauf: Das wirkt wie ein Kammstrich und gibt dem Salon eine eigene Geste, ohne Federn und ohne Überschwingen. Text, Preise und Formulare stehen sofort. Keine Einblendungen beim Scrollen. Beim Ziehen keine Kurve, nur der Finger. Bei prefers-reduced-motion bleiben Farb- und Opazitätswechsel, Wege und Würfe entfallen.", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Foto einer echten Arbeit aus dem Salon (Person mit Einwilligung, Salonlicht) in voller Breite oder als großes Hochformat neben dem Salonnamen in Kalnia. Darunter ein Satz zu Spezialgebiet und Ort, zwei Knöpfe „Termin buchen“ (Lackrot) und „Preise ansehen“, Telefon und WhatsApp als Links. Direkt unter dem Hero das Bewertungsband. Keine Stock-Models, keine KI-Frisuren, kein Video im Hero; eigenes Salonvideo höchstens weiter unten als Klick-Video.", "hero_aufbau": { "raster": "12 Spalten: Salonname über Spalte 1 bis 7, echtes Foto im Hochformat über 8 bis 12; alternativ Foto randlos mit Name darauf.", "bild": "Eine echte Arbeit aus dem Salon, 4:5 oder 3:4, Radius 16 px.", "h1": "clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), Kalnia wdth 112 / 500, links.", "handlung": "„Termin buchen“ (Lackrot #9B1D2E gefüllt) und „Preise ansehen“ (Kontur); Telefon und WhatsApp als Links darunter.", "zusatz": "Satz zu Spezialgebiet und Ort unter der H1; Bewertungsband mit Quelle und Stand direkt unter dem Hero." }, "sektionen": [ { "zweck": "Bewertungsband direkt unter dem Hero (Google-Profil: Schnitt, Anzahl, Stand-Datum, Echtheitshinweis daneben)", "muster": [ "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungsprofil-mit-echtheitshinweis": "band" } }, { "zweck": "Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)", "muster": [ "speisekarte-editorial", "tabs-pfeiltasten-focusgroup", "leistungsseite-antwort-zuerst" ], "varianten": { "tabs-pfeiltasten-focusgroup": "auto", "speisekarte-editorial": "preisliste", "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)", "muster": [ "team-ueber-mich-layout", "termin-buchung-zwei-klick" ], "varianten": { "team-ueber-mich-layout": "statement", "termin-buchung-zwei-klick": "vorauswahl" } }, { "zweck": "Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht Bildern", "muster": [ "flick-karten-stapel", "masonry-grid-lanes-galerie", "galerie-shared-element-vollbild" ], "varianten": { "galerie-shared-element-vollbild": "basis" } }, { "zweck": "Termin buchen (Widget erst nach Klick, daneben Telefon und WhatsApp; Ausfall- und Verspätungsregel des Salons als markierter Platzhalter)", "muster": [ "termin-buchung-zwei-klick" ], "varianten": { "termin-buchung-zwei-klick": "platzhalter" } }, { "zweck": "Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button)", "muster": [ "gutschein-konfigurator", "widerruf-und-kuendigung-schaltflaeche" ], "varianten": { "widerruf-und-kuendigung-schaltflaeche": "richtig" } }, { "zweck": "Produkte im Salon (die Pflege, mit der gearbeitet wird; ohne Shop nur zeigen, mit Shop Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen)", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "produktreihe" } }, { "zweck": "Karriere & Ausbildung (offene Stellen direkt offen, Ausbildung, Initiativbewerbung)", "muster": [ "stellen-karriere" ], "varianten": { "stellen-karriere": "wenige" } }, { "zweck": "Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick", "firmendaten-strukturiert" ], "varianten": { "oeffnungszeiten-status": "kompakt", "firmendaten-strukturiert": "friseur", "karte-zwei-klick": "bild" } }, { "zweck": "Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Salon kein Kleinstunternehmen ist – vom Kunden prüfen lassen)", "muster": [ "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "erklaerung" } } ], "bereiche": { "navigation": [ "mobile-bottom-navigation", "native-popover-dropdowns" ], "hover": [ "clip-path-form-hover" ], "mikro": [ "druck-feedback", "kopieren-feedback", "checkbox-radio-animiert" ], "galerie": [ "flick-karten-stapel", "masonry-grid-lanes-galerie", "galerie-shared-element-vollbild", "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "fuellung-vom-eintrittspunkt", "pfeil-icon-button" ] }, "varianten_demo": { "studio-visitenkarte-footer": "praxis", "fuellung-vom-eintrittspunkt": "basis", "mobile-bottom-navigation": "fab", "galerie-shared-element-vollbild": "basis", "css-native-karussell": "produktreihe", "pfeil-icon-button": "tausch", "clip-path-form-hover": "basis" }, "signatur": [ "flick-karten-stapel" ], "button": [ "fuellung-vom-eintrittspunkt", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "graustufen-zu-farbe" ], "grund": "Haarfarbe ist das Ergebnis, das verkauft wird; Touch-Besucher (die meisten, oft vom Instagram-Link) sähen die Farbe nie" }, { "ids": [ "webgl-bildverzerrung", "svg-filter-verzerrung", "halbton-raster" ], "grund": "verfälschen Farbe und Schnitt auf den Arbeitsproben" }, { "ids": [ "vorher-nachher-vergleichsregler" ], "grund": "Signatur von handwerk; bei Kosmetik mit Behandlungen zudem heilmittelwerberechtlich heikel" }, { "ids": [ "marquee-laufband", "rotating-words" ], "grund": "„Schnitt · Farbe · Pflege“ als Band oder Wortwechsel ist Salon-Template-Klischee und automatische Bewegung" }, { "ids": [ "prozent-zaehler", "einmal-intro-session" ], "grund": "Kundinnen kommen vom Instagram-Link und wollen sofort buchen" }, { "ids": [ "smooth-scroll-lenis", "cursor-follower-lerp", "magnetische-elemente" ], "grund": "Agentur-Gesten, stören beim Wischen durch die Looks" }, { "ids": [ "mesh-gradient-shader", "holo-irisierende-folie" ], "grund": "Effekt statt Handschrift" }, { "ids": [], "grund": "Preisliste als PDF oder Bild – nicht lesbar am Telefon, nicht durchsuchbar, nicht barrierefrei" }, { "ids": [], "grund": "Stockfotos und KI-generierte Frisuren – Arbeitsproben müssen echt sein und aus dem Salon stammen" } ], "ton": { "anrede": "du", "saetze": "Kurz und persönlich, mit Namen. Preiszeile: Leistung, Dauer, Preis; „ab“ nur mit dem Satz, wovon es abhängt.", "haltung": "Stilbewusst und warm. Ein Herrensalon oder klassischer Salon mit älterer Kundschaft siezt, dann durchgehend.", "beispiele": [ "Balayage bei Mira. Ab 145 €, je nach Haarlänge.", "Buch direkt bei deiner Stylistin." ], "nicht": "„Ihr Wohlfühlsalon“, „Haare sind unsere Leidenschaft“, Wortspiele wie „Haarmonie“, Bewertungssterne ohne Quelle." }, "bildsprache": { "licht": "Salon- oder Fensterlicht, Haarfarbe farbecht.", "ausschnitt": "Hinterkopf, Profil, Bewegung im Haar; Porträt der Stylist:in auf Augenhöhe.", "personen": "Ja: Kund:innen nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht; Stylist:innen mit Namen.", "formate": [ "4:5", "3:4", "1:1" ], "nicht": "Keine Stock-Models, keine KI-Frisuren, keine Farbfilter, die Haarfarben verfälschen, kein Video im Hero." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 136 ], "sektion": "clamp(64px, 8vw, 120px)", "dichte": "mittel", "hinweis": "Preisliste dicht und lesbar (Zeilen 12 px, Rubriken 32 px), Team-Karten mit Luft. Bewertungsband direkt unter dem Hero ohne großen Abstand." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(12px, 2vw, 24px)", "max_breite": "1360px", "hinweis": "Hero 7/5 (Name/Foto im Hochformat). Preisliste mit Stufen als Spalten, Team als 3er-Raster mit Kartenstapel je Person." }, "form": { "radius_klein": "8px", "radius_gross": "16px", "pille": true, "linie": "1px #D9C8C0", "schatten": "nur die Look-Karten im Stapel (flick-karten-stapel) heben sich weich in Espresso ab; sonst keiner", "hinweis": "Pillen für Knöpfe (fuellung-vom-eintrittspunkt), 16 px für Look-Karten und Porträts (Demo flick-karten-stapel zeigt 12 bis 16 px)." }, "template": true, "template_variante": false, "starter": true }, { "id": "fitness-studio-rhythmus", "name": "Studio: Rhythmus und Kursplan", "branche": "Fitnessstudio / Yoga- und Pilatesstudio / Kampfsportschule / Tanzschule (auch Sportverein mit Kursbetrieb)", "kurz": "Die Seite ist ein Fahrplan: Was läuft jetzt, wann ist mein Kurs, wie läuft das erste Training, was kostet es wirklich und wie komme ich wieder raus. Kreide als Grund, Hallenschwarz für Text, eine Limette nur für Probetraining und Buchen; eine breitenvariable Grotesk, die im Takt springt, Uhrzeiten in Mono. Bewegung ist Takt statt Kurve: harte Schnitte und Stufen für die Inszenierung, kurze präzise Übergänge für Buchung, Vertrag und Kündigung.", "stimmung": [ "energisch", "direkt", "motivierend", "ehrlich" ], "stimmung_tags": [ "laut" ], "begriffe": [ "Fitnessstudio", "Gym", "Yoga", "Pilates", "Kampfsport", "Boxen", "Tanzschule", "Crossfit", "Personal Training", "Reha-Sport" ], "ziele": [ "mitglied", "termin" ], "varianten": [ { "name": "Verein mit Kursbetrieb (Breitensport, Fitness- und Gesundheitskurse im Verein)", "hinweis": "Schrift, Farbe, Stil und Signatur bleiben; die Limette darf durch die Vereinsfarbe ersetzt werden, wenn sie als Fläche mit dunkler Schrift 4,5 : 1 hält." }, { "name": "Yoga, Pilates, Tanz (ruhige Studios)", "hinweis": "Takt gedämpft: Die Hero-Zeile wechselt die Breite einmal in drei Stufen (3 × 160 ms), keine harten Bildwechsel im Hero." } ], "schrift": { "headline": "anybody", "text": "funnel-sans", "akzent": "azeret-mono", "groessen": "Hero-Zeile Anybody clamp(3rem, 1.5rem + 8vw, 9rem), wdth 50–100 (Takt), wght 800, Versal, Laufweite -0.01em, Zeilenhöhe 0.88; h2 clamp(2rem, 1.3rem + 3vw, 3.5rem), wdth 75, wght 750; Kursnamen im Plan Anybody wdth 75, wght 700, 1.125rem. Fließtext Funnel Sans 1.0625rem/1.55, wght 400, max. 64ch; Knöpfe Funnel Sans 1rem wght 600. Uhrzeiten, Dauer, freie Plätze, Raum und Labels in Azeret Mono 0.8125rem, Labels Versal +0.08em, alle Ziffern tabular-nums.", "techniken": [ "mono-labels-versal", "tabellenziffern", "fluide-typo-clamp-cqi", "headline-laufweite-zeilenabstand" ], "alternative": "Headline tanker oder panchang, Text supreme (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F2F1EC", "label": "Grund (Kreide)" }, { "token": "text", "hex": "#121412", "label": "Text, dunkle Sektionen, Kursplan-Kopf (16 : 1)" }, { "token": "signal", "hex": "#CCFF33", "label": "Signal Limette: Probetraining, Buchen (Text #121412, 15,8 : 1; auf Kreide mit 2 px Rand #121412)" }, { "token": "flaeche", "hex": "#E2E1DA", "label": "Flächen, Kursplan-Raster" }, { "token": "leise", "hex": "#5E615C", "label": "Meta: Trainer:in, Raum, Dauer (5,6 : 1 auf Kreide)" }, { "token": "fehler", "hex": "#B3261E", "label": "Ausfall, Fehler (sparsam, 5,8 : 1)" } ], "signal": "signal", "farbprinzip": "Hallenlicht statt Neon-Nacht: Kreide als Grund, Hallenschwarz für Text und dunkle Bühnen (Kursplan-Kopf, Fußzeile), eine Limette als einziger Signalton für Probetraining, Buchen und Mitglied werden. Limette nie als Textfarbe auf hellem Grund, immer als Fläche mit dunkler Schrift, auf Kreide mit 2 px Rand. Kursarten unterscheiden sich per Text-Label, nicht per Farbe. Rot nur für Ausfall und Fehler.", "stil": "token-brutal-hart", "stil_ui": "token-tech-praezise", "ease": "steps(1, end)", "dauer": { "0": 0, "xs": 20, "s": 80, "m": 160 }, "bewegung_regel": "Was inszeniert, springt in ganzen Stufen auf einem 8-px-Raster; was bedient wird, reagiert kurz und präzise. Nichts federt, nichts gleitet nach. Stufen sind Breiten- und Positionssprünge, keine Blitze: großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Wechseln Hero-Bilder ohne Nutzer länger als 5 s, gehört ein sichtbarer Pause-Knopf dazu (WCAG 2.2.2, bewegung-pausieren-schalter). Der Kursplan selbst bewegt sich nicht, nur der Filter wechselt die Ansicht ohne Übergang. Bei prefers-reduced-motion stehen alle Stufen sofort im Endzustand.", "hero": [ "foto-hero" ], "hero_variante": [ "cinematic-video-hero" ], "hero_varianten": { "foto-hero": "randlos-unten-links" }, "hero_beschreibung": "Foto aus einem echten Kurs oder von der Trainingsfläche (Mitglieder mit Einwilligung) mit einer kurzen Zeile in Anybody, deren Breite beim Laden einmal in sechs Stufen aufspringt (variable-font-axes). Darunter „Probetraining buchen“ (Limette) und „Kursplan“ sowie eine Zeile aus dem Plan: „Jetzt: Yoga Flow bis 19:15 · Als Nächstes: Boxen 19:30“. Video nur als hero_variante mit eigenem Material aus dem Studio, mit Poster und Pause-Knopf; nie Stockvideo.", "hero_aufbau": { "raster": "Foto randlos über die volle Breite, Hero-Zeile unten links über 10 Spalten, Statuszeile als Band an der Unterkante.", "bild": "Echtes Foto aus Kurs oder Fläche, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Material.", "h1": "clamp(3rem, 1.5rem + 8vw, 9rem), Anybody 800 Versal, unten links; springt einmal in sechs Stufen von wdth 50 auf 100 (variable-font-axes).", "handlung": "„Probetraining buchen“ (Limette, versatz-brutal) und „Kursplan“ (Kontur 2px), nebeneinander unter der Zeile.", "zusatz": "Zeile „Jetzt … · Als Nächstes …“ in Azeret Mono 0.8125rem aus dem Plan, wechselt hart." }, "sektionen": [ { "zweck": "Kursplan: diese Woche und was gerade läuft (Filter Kurs, Trainer:in, Niveau, Raum; mobil Tages-Reiter; freie Plätze, Ausfälle und Vertretungen als Text am Termin)", "muster": [ "wochen-kursplan", "tabs-pfeiltasten-focusgroup" ], "varianten": { "tabs-pfeiltasten-focusgroup": "auto", "wochen-kursplan": "studio" } }, { "zweck": "Kurse & Trainingsarten (nach Kategorie wie Kraft, Ausdauer, Kampfsport, Mind & Body; je Kurs Dauer, Niveau und für wen er nicht geeignet ist; Unterseite je Kurs mit Antwort zuerst)", "muster": [ "akkordeon-hoehe-auto", "leistungsseite-antwort-zuerst" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Probetraining & dein erstes Mal (so läuft es ab, was mitbringen, wann da sein, Verletzungen vorher sagen; Buchung nach Klick)", "muster": [ "prozess-timeline-wachsende-linie", "termin-buchung-zwei-klick" ], "varianten": { "termin-buchung-zwei-klick": "platzhalter" } }, { "zweck": "Tarife & Preise (Monatspreis, Mindestlaufzeit, Kündigungsfrist und einmalige Gebühren in einer Tabelle; ab drei Tarifen, bei zwei zwei Karten)", "muster": [ "vergleichstabelle-sticky" ], "varianten": { "vergleichstabelle-sticky": "pakete" } }, { "zweck": "Trainer:innen (Foto, Kurse, Qualifikation, Sprachen; Filter nach Kurs ab etwa sechs Personen)", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "raster" } }, { "zweck": "Studio & Geräte (Flächen, Kursräume, Umkleiden, Barrierefreiheit der Räume)", "muster": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "varianten": { "css-native-karussell": "buehne", "galerie-shared-element-vollbild": "basis" } }, { "zweck": "Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis)", "muster": [ "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungsprofil-mit-echtheitshinweis": "band" } }, { "zweck": "Mitglied werden (Tarif → Daten → Zahlung → Prüfen; Fehlerliste je Schritt; Knopf „zahlungspflichtig abschließen“)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion" ], "varianten": { "mehrschritt-anfrage": "leiste", "formular-fehlerzusammenfassung": "liste" } }, { "zweck": "Gutscheine (Probemonat, Kurskarte, Wertgutschein; bei Online-Kauf Widerruf)", "muster": [ "gutschein-konfigurator" ], "varianten": {} }, { "zweck": "FAQ (Laufzeit, Kündigung, Pause bei Krankheit oder Schwangerschaft, Gebühren, Kinder, Duschen und Schließfächer)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten; Parken und ÖPNV in Gehminuten; Adresse als Text, Karte per 2-Klick; kurzes Formular für Fragen; ab zwei Studios als Liste)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick", "kontakt-anfrage-formular", "standortfinder-liste", "firmendaten-strukturiert" ], "varianten": { "oeffnungszeiten-status": "auslastung", "standortfinder-liste": "kompakt", "karte-zwei-klick": "bild", "firmendaten-strukturiert": "friseur" } }, { "zweck": "Verträge kündigen und widerrufen (eigene Seiten, ohne Login, dauerhaft aus der Fußzeile)", "muster": [ "widerruf-und-kuendigung-schaltflaeche" ], "varianten": { "widerruf-und-kuendigung-schaltflaeche": "richtig" } }, { "zweck": "Barrierefreiheit (eigene Seite; Variante BFSG bei Online-Vertrag oder Online-Buchung – vom Kunden prüfen lassen)", "muster": [ "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg" } } ], "bereiche": { "navigation": [ "mobile-bottom-navigation", "native-popover-dropdowns" ], "schrift_animation": [ "variable-font-axes" ], "mikro": [ "druck-feedback", "checkbox-radio-animiert", "toast-stapel" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "footer": [ "mega-footer-sitemap" ], "button": [ "tiefen-taste-3d", "fuellung-vom-eintrittspunkt" ] }, "varianten_demo": { "galerie-shared-element-vollbild": "basis", "tiefen-taste-3d": "versatz-brutal", "fuellung-vom-eintrittspunkt": "pixel", "mobile-bottom-navigation": "basis", "css-native-karussell": "buehne" }, "signatur": [ "variable-font-axes" ], "button": [ "tiefen-taste-3d", "fuellung-vom-eintrittspunkt" ], "optional": [], "nicht_verwenden": [ { "ids": [ "zahlen-odometer", "prozent-zaehler" ], "grund": "hochgezählte Mitgliederzahlen und Countdown-Rabatte („Nur noch heute“) sind Druck statt Information" }, { "ids": [ "vorher-nachher-vergleichsregler" ], "grund": "Signatur von handwerk; Körper-Vorher-nachher mit Abnehmversprechen ist unseriös und rechtlich heikel" }, { "ids": [ "marquee-laufband" ], "grund": "Motivationssprüche als Band; Kurszeiten nie in bewegten Bändern" }, { "ids": [ "scramble-decode", "typewriter-natural" ], "grund": "Terminal-Aufbau wie in token-brutal-hart: Uhrzeiten, Preise und Kursnamen müssen sofort lesbar sein" }, { "ids": [ "karten-spotlight-glow", "verlaufs-rahmen", "mesh-gradient-shader" ], "grund": "Neon-Glow ist Gym-Template-Klischee, die Limette reicht" }, { "ids": [ "smooth-scroll-lenis", "cursor-follower-lerp", "magnetische-elemente" ], "grund": "stören Kursplan, Filter und Formulare" }, { "ids": [ "konfetti-erfolg" ], "grund": "ein Vertrag ist kein Spiel; nach dem Abschluss eine ruhige Bestätigung mit den Vertragsdaten" }, { "ids": [], "grund": "Halte-, Pause- oder Rabattangebote auf der Kündigungsseite – laut BGH vom 16.07.2026 nicht auf die Bestätigungsseite; eine Pause darf in der FAQ stehen" }, { "ids": [], "grund": "Stockfotos mit Sixpack-Models – echte Mitglieder und Trainer:innen aus dem Studio" } ], "ton": { "anrede": "du", "saetze": "Sehr kurz, Uhrzeit und Zahl vorn, Imperativ erlaubt.", "haltung": "Motivierend ohne Druck, ehrlich zu Vertrag, Kosten und Kündigung.", "beispiele": [ "Heute 18:30: Boxen für Einsteiger. 6 Plätze frei.", "Komm zum Probetraining. Bring Wasser und Hallenschuhe mit." ], "nicht": "„No pain, no gain“, „Beach Body“, Body-Shaming, „Unschlagbar günstig!“, Preise nur im Kleingedruckten." }, "bildsprache": { "licht": "Hallenlicht, eher hart, echte Anstrengung statt Studioglanz.", "ausschnitt": "Bewegung angeschnitten, Gruppe im Kurs, Trainer:in in Aktion.", "personen": "Ja: Mitglieder mit Einwilligung; Kinder- und Jugendkurse ohne erkennbare Gesichter.", "formate": [ "4:5", "16:9", "1:1" ], "nicht": "Keine Stock-Sixpacks, keine Vorher-Nachher-Körper, kein Neon-Glow, kein Stockvideo." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 40, 56, 80, 112 ], "sektion": "clamp(48px, 6vw, 96px)", "dichte": "dicht", "hinweis": "Fahrplan statt Bühne: Kursplan-Zellen 8 bis 12 px Innenabstand, Tarife in einer Tabelle, kurze Sektionsabstände." }, "raster": { "spalten": 12, "rand": "clamp(12px, 3vw, 32px)", "spalt": "clamp(8px, 1.2vw, 16px)", "max_breite": "1440px", "hinweis": "Kursplan am Desktop als Wochenraster mit 7 Spalten, mobil Tages-Reiter. Tarife als Tabelle über volle Breite." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "2px #121412 um Knöpfe und die Limette auf Kreide; Kursplan-Raster 1px #E2E1DA", "schatten": "nur der harte Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal), ohne Weichzeichnung", "hinweis": "Harte Kanten überall. Die Demo-Variante versatz-brutal nennt 6 px Radius; hier auf 0 übersetzt, damit Taste, Plan und Bilder eine Form haben." }, "template": true, "template_variante": false, "starter": false }, { "id": "pflege-dienst-naehe", "name": "Pflegedienst: Nähe und Klartext", "branche": "Ambulanter Pflegedienst / Tagespflege / Alltagshilfe und Betreuung", "kurz": "Zwei Türen auf einer Seite: Angehörige, die schnell wissen müssen, ob der Dienst zu ihnen kommt und was die Kasse zahlt, und Pflegekräfte, die ihre Bewerbung in einer Minute abschicken wollen. Die größte Schrift und die einfachste Sprache aller Rezepte, echte Gesichter mit Namen und Durchwahl, ein warmes Pflaume statt Klinikblau, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Bewegt wird nur, was jemand selbst öffnet.", "stimmung": [ "nah", "verlässlich", "klar", "warm" ], "stimmung_tags": [ "warm", "ruhig" ], "begriffe": [ "Pflegedienst", "Pflege", "Tagespflege", "Alltagshilfe", "Betreuung", "Seniorenbetreuung", "Hausnotruf", "Intensivpflege", "Sozialstation" ], "ziele": [ "anfrage", "bewerbung" ], "varianten": [ { "name": "Tagespflege", "hinweis": "Startseite mit Tagesablauf, Fahrdienst und Probetag." }, { "name": "Alltagshilfe und Betreuung (ohne Pflege)", "hinweis": "Kostenteil auf Entlastungsbetrag und private Zahlung zuschneiden (wie Careship: Stundenpreis offen, Abrechnung mit der Kasse erklärt); was nicht dazugehört (Wundversorgung, Spritzen), ausdrücklich nennen." } ], "schrift": { "headline": "literata", "text": "hanken-grotesk", "akzent": "", "groessen": "h1 Literata clamp(2.5rem, 1.8rem + 3vw, 4rem), wght 600, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem), wght 600; h3 1.5rem. Fließtext Hanken Grotesk mindestens 1.25rem (20 px), wght 400, Zeilenhöhe 1.6, max. 60ch, Absatzabstand 1em; Knöpfe 1.25rem wght 600, mindestens 56 px hoch; Telefonnummer im Kopf 1.5rem wght 700 in Tabellenziffern; kleinste Schrift 1rem, auch in Fußzeile und Formularhinweisen. Fett nur für Telefonnummer und Beträge.", "techniken": [ "lesesatz-text-wrap", "optische-groessen-opsz", "tabellenziffern", "fluide-typo-clamp-cqi" ], "alternative": "Text ranade (ITF, Humanist), Headline sentient (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#FAF7F2", "label": "Grund" }, { "token": "text", "hex": "#1F1B16", "label": "Text (16 : 1)" }, { "token": "text-2", "hex": "#5B2A4A", "label": "Pflaume: Marke, Überschriften, Karriere-Bereich, Fußzeile (Weiß darauf 11 : 1)" }, { "token": "signal", "hex": "#FFC845", "label": "Signal Sonnengelb: Anrufen, Anfragen, Bewerben (Text #1F1B16, 11 : 1; auf hellem Grund mit 2 px Rand #1F1B16)" }, { "token": "flaeche", "hex": "#FFF1CC", "label": "Hinweisfläche: Kosten, Erreichbarkeit" }, { "token": "text-3", "hex": "#4A443D", "label": "Sekundärtext (9 : 1)" }, { "token": "linie", "hex": "#D8D0C4", "label": "Linien" } ], "signal": "signal", "farbprinzip": "Warmes Weiß als Grund, sehr dunkles Warmgrau statt Schwarz, Pflaume als Hausfarbe für Überschriften, dunkle Sektionen, den Karriere-Bereich und die Fußzeile, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Sekundärtext dunkler als üblich (9 : 1), weil viele Leser älter sind. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Textfarbe. Kein Klinikblau, kein Mint, keine Verläufe.", "stil": "token-toggle-asymmetrisch", "stil_ui": "", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "xs": 150, "s": 220, "m": 300, "l": 450 }, "bewegung_regel": "Nichts bewegt sich von selbst: keine Einblendungen beim Scrollen, keine Bild-Reveals, kein Karussell mit Autoplay. Was sich öffnet, öffnet ruhig und schließt schneller. Kein Weg über 8 px, keine Skalierung. Bei prefers-reduced-motion öffnen und schließen alle Teile ohne Übergang.", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Echtes Foto aus dem Team (Pflegekraft im Gespräch, beim Hausbesuch oder am Dienstwagen, mit Einwilligung), daneben ein Satz in einfacher Sprache („Wir pflegen Sie zu Hause – in [Ort], [Ort] und Umgebung.“), die Telefonnummer groß als tel:-Link mit Erreichbarkeit und zwei Wegweiser-Knöpfe „Pflege anfragen“ und „Arbeiten bei uns“. Direkt darunter das Feld „Kommen wir zu Ihnen?“ mit Postleitzahl. Kein Video, keine Stockfotos von Händen.", "hero_aufbau": { "raster": "12 Spalten: Text über Spalte 1 bis 6, Foto über 7 bis 12; mobil Text zuerst, Foto darunter.", "bild": "Echtes Teamfoto, 3:2 oder 4:5.", "h1": "clamp(2.5rem, 1.8rem + 3vw, 4rem), Literata 600, oben links.", "handlung": "Zwei Wegweiser „Pflege anfragen“ (Sonnengelb mit 2px Rand) und „Arbeiten bei uns“ (Pflaume), mindestens 56 px hoch, untereinander auf dem Telefon.", "zusatz": "Telefonnummer 1.5rem 700 als tel:-Link mit Erreichbarkeit; darunter das Feld „Kommen wir zu Ihnen?“ mit Postleitzahl." }, "sektionen": [ { "zweck": "Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion" ], "varianten": { "mehrschritt-anfrage": "plz", "formular-fehlerzusammenfassung": "kompakt" } }, { "zweck": "Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst)", "muster": [ "akkordeon-hoehe-auto", "leistungsseite-antwort-zuerst" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Was kostet das, was zahlt die Kasse? (Leistungen nach Pflegegrad als Tabelle mit Stand-Datum und Quelle, zwei bis drei Rechenbeispiele in Euro, Hilfe beim Antrag)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "So beginnt die Pflege (Anruf oder Rückruf → Besuch zu Hause → Kostenvoranschlag → feste Bezugspersonen)", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Ihre Ansprechpersonen (Pflegedienstleitung und Büro mit Foto, Name, Aufgabe, Durchwahl, Sprachen; bis etwa fünf Personen Variante statement, darüber raster)", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "statement" } }, { "zweck": "Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten)", "muster": [ "css-native-karussell", "oeffnungszeiten-status" ], "varianten": { "css-native-karussell": "buehne", "oeffnungszeiten-status": "termin" } }, { "zweck": "Stimmen und Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis; Stimmen von Angehörigen nur mit Freigabe)", "muster": [ "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungsprofil-mit-echtheitshinweis": "pille" } }, { "zweck": "Arbeiten bei uns – zweite Startseite (Stellen offen mit Stunden, Touren, Gehalt oder Tarif, Dienstwagen; Bewerbung in einer Minute mit fünf Fragen, ohne Anschreiben; Kennenlernen oder Probetag; ab vier Stellen mit Filter)", "muster": [ "stellen-karriere", "mehrschritt-anfrage", "formular-fehlerzusammenfassung" ], "varianten": { "stellen-karriere": "liste", "mehrschritt-anfrage": "ring", "formular-fehlerzusammenfassung": "kompakt" } }, { "zweck": "Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)", "muster": [ "kontakt-anfrage-formular", "oeffnungszeiten-status", "karte-zwei-klick", "standortfinder-liste", "firmendaten-strukturiert" ], "varianten": { "oeffnungszeiten-status": "karte", "standortfinder-liste": "kompakt", "karte-zwei-klick": "bild", "firmendaten-strukturiert": "werkstatt" } }, { "zweck": "Zwei Wegweiser zum Schluss („Pflege anfragen“ / „Arbeiten bei uns“) mit Telefonnummer – dieselben Wegweiser wie im Hero", "muster": [ "corner-shape-eckenformen" ], "varianten": { "corner-shape-eckenformen": "formen" } }, { "zweck": "Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)", "muster": [ "barrierefreiheit-seite", "zoom-und-textabstand-robust", "kontrastmodus-forced-colors" ], "varianten": { "barrierefreiheit-seite": "erklaerung" } } ], "bereiche": { "navigation": [ "mobile-bottom-navigation" ], "mikro": [ "corner-shape-eckenformen", "checkbox-radio-animiert", "einblenden-starting-style", "druck-feedback" ], "galerie": [ "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "button-zustaende", "pfeil-icon-button" ] }, "varianten_demo": { "studio-visitenkarte-footer": "praxis", "mobile-bottom-navigation": "kontakt", "corner-shape-eckenformen": "formen", "css-native-karussell": "buehne", "pfeil-icon-button": "linie" }, "signatur": [ "corner-shape-eckenformen" ], "button": [ "button-zustaende", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "cinematic-video-hero", "interaktives-3d-hero" ], "grund": "lange Ladezeit; die Kernbotschaft ist ein Satz und eine Telefonnummer" }, { "ids": [ "hide-on-scroll-header" ], "grund": "Telefonnummer und „Pflege anfragen“ müssen immer sichtbar bleiben" }, { "ids": [ "marquee-laufband", "rotating-words", "typewriter-natural" ], "grund": "bewegter Text ist für ältere Leser und Screenreader eine Hürde" }, { "ids": [ "zahlen-odometer" ], "grund": "hochgezählte „1.000 zufriedene Kunden“ wirken unseriös; Zahlen stehen still oder gar nicht" }, { "ids": [ "hovercard-interest-invoker" ], "grund": "Signatur von praxis; Fachbegriffe hier immer direkt im Text erklären" }, { "ids": [ "stapelkarten", "bento-grid-interaktiv", "flick-karten-stapel" ], "grund": "verstecken Inhalte oder verlangen Gesten" }, { "ids": [ "frosted-glass-erweitert", "progressive-blur" ], "grund": "senken den Kontrast unter Kopf und Leisten" }, { "ids": [ "smooth-scroll-lenis", "cursor-follower-lerp", "magnetische-elemente" ], "grund": "stören Menschen mit Zittern, Sehschwäche oder Bildschirmlupe" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach der Anfrage eine ruhige Bestätigung mit Namen und Rückrufzeit" }, { "ids": [ "prompt-hero-eingabefeld", "ki-streaming-text-denkindikator" ], "grund": "kein KI-Chat statt Telefon" }, { "ids": [ "kostenrechner-konfigurator" ], "grund": "Kassenleistungen sind gesetzlich und ändern sich, Eigenanteile hängen vom Einzelfall ab (wann_nicht); Tabelle mit Stand-Datum und Rechenbeispiele statt Rechner" }, { "ids": [], "grund": "Stockfotos von alten Händen, Rollatoren und Models in Kitteln – echte Menschen aus dem Dienst, mit Einwilligung" }, { "ids": [], "grund": "„Leichte Sprache“ als Behauptung – nur mit geprüftem Text nach den Regeln der Leichten Sprache; hier gilt einfache Sprache" } ], "ton": { "anrede": "Sie", "saetze": "Höchstens 15 Wörter je Satz, ein Gedanke pro Satz, Alltagswort zuerst und Fachwort in Klammern.", "haltung": "Nah und verlässlich. Angehörige zuerst; Bewerber:innen bekommen eine eigene Tür.", "beispiele": [ "Wir helfen beim Waschen und Anziehen (Grundpflege).", "Rufen Sie uns an. Frau [Name] berät Sie." ], "nicht": "„Pflege mit Herz“, „ganzheitlich“, Abkürzungen wie SGB oder PG ohne Erklärung, hochgezählte Kundenzahlen." }, "bildsprache": { "licht": "Warmes Tageslicht, ruhig.", "ausschnitt": "Pflegekraft im Gespräch, beim Hausbesuch oder am Dienstwagen; Büro und Räume der Tagespflege.", "personen": "Ja: Team mit Namen und Durchwahl; Pflegebedürftige nur mit ausdrücklicher Einwilligung und in würdiger Lage.", "formate": [ "3:2", "4:5" ], "nicht": "Keine Stockfotos von Händen, die Hände halten, keine Rollstuhl-Klischees, kein Klinikblau, kein Video." }, "raum": { "basis_px": 8, "skala_px": [ 8, 12, 16, 24, 32, 40, 56, 72, 96, 128 ], "sektion": "clamp(64px, 8vw, 120px)", "dichte": "luftig", "hinweis": "Großzügig für große Schrift: kein Abstand unter 8 px, Knöpfe mindestens 56 px hoch, Absatzabstand 1em. Hält 200 % Zoom und erhöhte Textabstände." }, "raster": { "spalten": 12, "rand": "clamp(20px, 5vw, 56px)", "spalt": "clamp(20px, 3vw, 40px)", "max_breite": "1200px", "hinweis": "Höchstens zwei Spalten nebeneinander, mobil eine. Text auf 60ch. Navigation mit höchstens fünf Punkten ohne Untermenü." }, "form": { "radius_klein": "8px", "radius_gross": "12px", "pille": false, "linie": "2px #1F1B16 um gelbe Knöpfe auf hellem Grund; sonst 1px #D8D0C4", "schatten": "keiner", "hinweis": "Wegweiser-Knöpfe zeigen mit der Spitze in ihre Richtung (corner-shape-eckenformen, Variante formen), mit clip-path-Rückfall; Fokusring außen auf eigenem Rahmen." }, "template": true, "template_variante": false, "starter": false }, { "id": "musik-kuenstler-buehne", "name": "Musik und Kunst: Ära und Bühne", "branche": "Band / Musiker:in / DJ / Label / Chor und Ensemble / bildende Künstler:in mit Ausstellungen", "kurz": "Jedes Release ist eine Ära mit eigener Farbe: Ein einziges Token aus dem Cover färbt Signal, Effekt und den Namen, der Rest ist Tinte und Papier. Zuerst kommen Hören und Tickets, dann Videos, Bio und ein Pressebereich, aus dem Veranstalter und Presse alles ohne Nachfrage holen. Bewegung ist Takt statt Kurve: Das Cover baut sich in Pixelstufen auf, Seiten schließen als Verschluss, der Hero-Clip läuft als Zeichenraster. Genau ein experimenteller Effekt pro Ansicht, immer mit Pause-Knopf und Standbild. Abgrenzung: kreativstudio-buehne verkauft Leistungen an Auftraggeber (Leistungen, Cases, Anfrage) und bleibt bei einer weichen Expo-Kurve; kultur-programm-haltung ist ein Haus mit vielen Terminen an einem Ort, Spartenfarben und „Besuch planen“. Hier steht eine Künstlerin, eine Band oder ein Label im Mittelpunkt, das an vielen Orten spielt, Releases veröffentlicht und mit jeder Ära anders aussieht.", "stimmung": [ "laut", "experimentell", "eigenständig", "direkt" ], "stimmung_tags": [ "laut", "experimentell" ], "begriffe": [ "Band", "Musiker", "Musikerin", "Sängerin", "Sänger", "Rapper", "Rapperin", "Singer-Songwriter", "DJ", "Producer", "Plattenlabel", "Musiklabel", "Chor", "Ensemble", "Orchester", "Künstler", "Künstlerin", "bildende Kunst", "Kunstmalerin", "Bildhauerin", "Tourdaten", "Konzerte", "Merch", "EPK", "Pressekit" ], "ziele": [ "zeigen", "kauf", "anfrage" ], "varianten": [ { "name": "Chor, Ensemble, Orchester (zeitgenössisches Profil)", "hinweis": "Für Chöre, Vokal- und Instrumentalensembles mit eigenem, zeitgenössischem oder experimentellem Profil (Neue Musik, Projektchöre)." }, { "name": "DJ, Producer, Label", "hinweis": "Label-Seiten nach dem Vorbild Ninja Tune: Events mit Filter nach Künstler:in und Stadt, Release-Seite mit Formaten, Katalognummer, Preis und Trackliste als Text." }, { "name": "Bildende Künstler:in", "hinweis": "Vorbild Alicja Kwade: Navigation Ausstellungen, Werke, Publikationen, Presse, CV, Kontakt; Ausstellungen getrennt nach aktuell bzw." } ], "schrift": { "headline": "science-gothic", "text": "redaction", "akzent": "martian-mono", "groessen": "Name im Hero Science Gothic clamp(3.5rem, 1rem + 11vw, 12rem), wdth 140–200 (je kürzer der Name, desto breiter), wght 800, CTRS 0, Versal, Laufweite -0.02em, Zeilenhöhe 0.86; h2 clamp(2rem, 1.2rem + 3.5vw, 4rem), wdth 120, wght 700, Versal, -0.01em, Zeilenhöhe 0.95. Stadt in der Terminliste Science Gothic 1.25rem, wdth 100, wght 700, Versal. Release- und Werktitel Redaction 400 clamp(1.75rem, 1rem + 2.5vw, 3rem), Werktitel kursiv; im Pixel-Moment einmal Redaction 100 → Redaction 20 → Redaction (3 Stufen à 80 ms). Fließtext (Bio, Presse, Texte) Redaction 1.1875rem/1.6, max. 64ch, nie in den verpixelten Schnitten. Datum, Uhrzeit, Preise und Katalognummern Martian Mono 0.9375rem, wdth 87.5, wght 500, tabular-nums; Status, Format, Credits und Rubriken Martian Mono 0.75rem, Versal, +0.08em; Knöpfe Martian Mono 0.875rem, wght 600, Versal, +0.04em.", "techniken": [ "headline-laufweite-zeilenabstand", "mono-labels-versal", "tabellenziffern", "fluide-typo-clamp-cqi", "lesesatz-text-wrap" ], "alternative": "Headline panchang oder tanker, Text zodiak oder erode (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#111113", "label": "Tinte: Grund für Hero, Termine, Videos, Fußzeile" }, { "token": "grund-2", "hex": "#EEEBE3", "label": "Papier: Text auf Tinte (15,8 : 1), Grund für Bio, Presse, Shop" }, { "token": "grund-3", "hex": "#2D3BFF", "label": "Ära-Farbe, Beispiel Ultramarin: Fläche mit Papier-Schrift 5,5 : 1; auf Tinte nur mit Papier-Kante (allein 2,9 : 1)" }, { "token": "aerafarbe", "hex": "#C2361F", "label": "Ära-Farbe, Beispiel für das nächste Release (Zinnober): Fläche mit Papier-Schrift 4,6 : 1" }, { "token": "leise", "hex": "#9A9893", "label": "Meta auf Tinte (6,5 : 1): Ort, Support, Format" }, { "token": "grund-4", "hex": "#5C5A55", "label": "Meta auf Papier (5,8 : 1)" }, { "token": "fehler", "hex": "#FF6B5E", "label": "Abgesagt und Fehler auf Tinte (6,8 : 1), immer mit Wort" } ], "signal": "grund", "farbprinzip": "Jede Ära hat eine Farbe. Grund ist Tinte, zum Lesen (Bio, Presse, Shop) Papier. Die Ära-Farbe kommt aus dem Cover des aktuellen Releases und ist der einzige Signalton: Haupthandlung, Echo des Namens, Farbe des Dither- bzw. Marmor-Effekts, Verschluss beim Seitenwechsel. Sie liegt als ein Token (--aera) im :root; mit dem nächsten Release wird nur dieses Token getauscht, kein Redesign. Bedingung: als Fläche mit Papier-Schrift mindestens 4,5 : 1. Auf Tinte nie als Textfarbe, nur als Fläche mit 2 px Papier-Kante bzw. Papier-Versatz. Kein Verlauf, kein Pastell-Lila, Pink oder Cyan als Standard (Leitfaden C2, C10). Ticketstatus immer als Wort, nie nur als Farbe.", "stil": "token-brutal-hart", "stil_ui": "token-toggle-asymmetrisch", "ease": "steps(1, end)", "dauer": { "0": 0, "xs": 20, "s": 80, "m": 160 }, "bewegung_regel": "Was inszeniert, springt in ganzen Stufen auf einem 8-px-Raster; was bedient wird, öffnet mit dem UI-Stil und schließt schneller. Nichts federt, nichts gleitet nach. Termine, Preise und Ticketstatus stehen sofort, ohne Einblendung. Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1), harte Schnitte im Clip nicht zwischen Schwarz und Weiß. Alles, was länger als 5 s läuft (Dither-Clip, Marmor), hat einen sichtbaren Pause-Knopf. Bei prefers-reduced-motion: Standbilder statt Clip und Shader, alle Stufen sofort im Endzustand, Seitenwechsel ohne Verschluss.", "hero": [ "ascii-dither-pixel-stil", "echo-stacked-type" ], "hero_variante": [ "fluessig-marmor-hintergrund" ], "hero_varianten": { "ascii-dither-pixel-stil": "video", "fluessig-marmor-hintergrund": "tinte" }, "hero_beschreibung": "Die aktuelle Ära auf einen Blick: der Name des Acts in Science Gothic, breit und versal, mit Echo in Ära-Farbe und Papier (echo-stacked-type, nur dieses eine Wort). Daneben bzw. darunter das aktuelle Cover als echtes Bild (unverzerrt, LCP) mit „Anhören“ als Haupthandlung und darunter die nächsten drei Termine als Zeilen mit Ticketlink. Hintergrund ist ein eigener kurzer Clip (Musikvideo, Visualizer, Live-Mitschnitt), der stumm durch den Zeichen- bzw. Dither-Pass läuft (ascii-dither-pixel-stil, Variante video); unter dem Zeiger erscheint das Original, auf Touch ruhige Kacheln. Pause-Knopf, Standbild bei reduzierter Bewegung, ohne WebGL und auf schwachen Geräten. Name, Cover und Termine stehen auf eigenen Tinte-Flächen, nie direkt auf dem Effekt. hero_variante fluessig-marmor-hintergrund (Variante tinte, Ära-Farbe als Tinte in Wasser) nur, wenn es keinen eigenen Clip gibt. Nie beide Effekte zugleich, nie Stock- oder KI-Material, das echt wirken soll.", "hero_aufbau": { "raster": "Tinte als Grund. Name oben über die volle Breite, darunter 12 Spalten: Cover über Spalte 1 bis 5, Termine über 6 bis 12; Name, Cover und Termine auf eigenen Tinte-Flächen über dem Clip.", "bild": "Cover 1:1 als echtes Bild (LCP); Hintergrund ein eigener Clip im Zeichen- bzw. Dither-Pass (ascii-dither-pixel-stil, Variante video), Standbild bei reduzierter Bewegung.", "h1": "clamp(3.5rem, 1rem + 11vw, 12rem), Science Gothic 800 Versal, wdth 140–200, oben randbündig, mit Echo (echo-stacked-type).", "handlung": "„Anhören“ (versatz-brutal in Ära-Farbe) unter dem Cover, „Tickets“ als laufende Kontur in der Terminliste.", "zusatz": "Die nächsten drei Termine in Martian Mono mit Status als Wort; Pause-Knopf „Bewegung anhalten“." }, "sektionen": [ { "zweck": "Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen)", "muster": [ "tourdaten-liste", "facettenfilter-ergebnisliste" ], "varianten": { "facettenfilter-ergebnisliste": "leiste", "tourdaten-liste": "tour" } }, { "zweck": "Musik: aktuelles Release (Cover unverzerrt, Titel, VÖ-Datum, Formate mit Preis oder Shop-Link, Trackliste als Text, „Anhören“ mit allen Plattformen als normale Links; eingebetteter Player erst nach Klick)", "muster": [ "player-einbettung-zwei-klick" ], "varianten": {} }, { "zweck": "Diskografie (alle Releases, neuestes zuerst; je Karte Cover, Titel, Jahr, Format; führt zur Release-Seite)", "muster": [ "css-native-karussell" ], "varianten": { "css-native-karussell": "produktreihe" } }, { "zweck": "Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache)", "muster": [ "player-einbettung-zwei-klick", "video-vorschau-hover-viewport", "eigener-videoplayer" ], "varianten": { "eigener-videoplayer": "ambilight" } }, { "zweck": "Über: Bio und Besetzung (ein Satz, wer spielt was, kleine Porträts; Live-Besetzung und Gäste; bei Ensembles nach Stimmgruppe oder Instrument)", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "statement" } }, { "zweck": "Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen", "muster": [ "galerie-shared-element-vollbild", "tabs-pfeiltasten-focusgroup", "kopieren-feedback", "testimonials-neu-gedacht" ], "varianten": { "galerie-shared-element-vollbild": "basis", "tabs-pfeiltasten-focusgroup": "auto", "testimonials-neu-gedacht": "liste" } }, { "zweck": "Newsletter (benannter Brief mit konkretem Vorteil: neue Musik und Vorverkauf zuerst; Region für Termin-Hinweise freiwillig; Double-Opt-in)", "muster": [ "footer-newsletter-mit-persoenlichkeit" ], "varianten": { "footer-newsletter-mit-persoenlichkeit": "basis" } }, { "zweck": "Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp)", "muster": [ "produkt-kaufbox-varianten", "warenkorb-drawer" ], "varianten": { "produkt-kaufbox-varianten": "kompakt", "warenkorb-drawer": "drawer" } }, { "zweck": "Kontakt: Booking, Management, Label, Presse (je Rolle Name, Agentur, Gebiet und E-Mail zum Kopieren; Booking-Anfrage mit Datum, Ort, Art der Veranstaltung und Kapazität; Proberaum oder Atelier mit Karte per 2-Klick nur, wenn Besuch vorgesehen ist)", "muster": [ "kontakt-anfrage-formular", "kopieren-feedback" ], "varianten": {} }, { "zweck": "Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "widerruf-und-kuendigung-schaltflaeche": "richtig", "barrierefreiheit-seite": "bfsg" } } ], "bereiche": { "seitenuebergang": [ "spalten-shutter-wipe" ], "navigation": [ "menue-choreografie-wipe-clip", "sound-umschalter" ], "schrift_animation": [ "echo-stacked-type" ], "mikro": [ "checkbox-radio-animiert", "kopieren-feedback" ], "material": [ "fluessig-marmor-hintergrund" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild", "video-vorschau-hover-viewport" ], "footer": [ "footer-newsletter-mit-persoenlichkeit" ], "button": [ "tiefen-taste-3d", "kontur-button-zeichnen" ] }, "varianten_demo": { "ascii-dither-pixel-stil": "video", "fluessig-marmor-hintergrund": "tinte", "tiefen-taste-3d": "versatz-brutal", "kontur-button-zeichnen": "laufend", "karussell-karten-verformen": "welle", "generatives-markenzeichen": "team", "css-native-karussell": "produktreihe", "galerie-shared-element-vollbild": "basis", "footer-newsletter-mit-persoenlichkeit": "basis" }, "signatur": [ "ascii-dither-pixel-stil", "echo-stacked-type" ], "button": [ "tiefen-taste-3d", "kontur-button-zeichnen" ], "optional": [ "karussell-karten-verformen", "generatives-markenzeichen" ], "nicht_verwenden": [ { "ids": [ "cursor-follower-lerp", "blend-difference-cursor" ], "grund": "Award-Geste ohne Nutzen; im Dither-Hero ist der Zeiger schon das Werkzeug, das das Original freilegt" }, { "ids": [ "prozent-zaehler", "kinetische-typo-intro" ], "grund": "Fans wollen Player und Termine, keine Ladeshow; der Name steht ab dem ersten Bild" }, { "ids": [ "mesh-gradient-shader" ], "grund": "Aurora-Klischee (C2); Farbe kommt aus dem Cover der Ära" }, { "ids": [ "atmosphaere-partikel" ], "grund": "Hotel-Stimmung (Staub, Glut); neben Dither-Clip oder Marmor wäre es der zweite bewegte Effekt in einer Ansicht (C4, C10)" }, { "ids": [ "kinetic-3d-shader-type" ], "grund": "zweite Wort-Inszenierung neben dem Echo-Namen und eine weitere WebGL-Szene; der Name bleibt echter Text" }, { "ids": [ "webgl-bildverzerrung", "velocity-skew-verzerrung" ], "grund": "verzerren Cover, Pressefotos und Werke, die unverfälscht bleiben müssen" }, { "ids": [ "glas-button", "verlaufs-rahmen" ], "grund": "Glas und Lichtkante neben Dither oder Marmor sind zwei Material-Effekte; die harte Taste reicht" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "Terminlisten, Player-iframes und Shop vertragen keine Scroll-Übernahme" }, { "ids": [ "marquee-laufband" ], "grund": "„Neues Album“-Bänder sind Template-Deko; Termine und Titel nie in bewegten Bändern" }, { "ids": [ "zahlen-odometer" ], "grund": "hochgezählte Streams, Follower oder Countdowns sind Druck statt Information; echte Zahlen nur mit Quelle und Stand" }, { "ids": [], "grund": "Termin-Widgets von Bandsintown oder Songkick als iframe – laden Dritte vor der Einwilligung und brechen die Gestaltung; Daten importieren und selbst als Liste setzen" }, { "ids": [], "grund": "Spotify-, YouTube-, Bandcamp- oder SoundCloud-Player ohne Klick – übertragen Daten vor der Einwilligung (§ 25 TDDDG)" }, { "ids": [], "grund": "Autoplay mit Ton – nie; Ton startet nur nach Klick (WCAG 1.4.2)" } ], "ton": { "anrede": "du", "saetze": "Knapp, Fakten zuerst: Datum, Stadt, Status als Wort. Bio in drei Längen mit Wortzahl.", "haltung": "Eigenständig und direkt. Ein Chor, ein Ensemble oder eine Künstlerin mit Galerie-Publikum siezt, dann durchgehend.", "beispiele": [ "Neues Album am 14. März. Jetzt anhören.", "[Stadt], [Ort]: ausverkauft. Warteliste beim Veranstalter." ], "nicht": "„Die Band, auf die alle gewartet haben“, Hype-Wörter, „Stay tuned!“, Status nur als Farbe oder durchgestrichen." }, "bildsprache": { "licht": "Wie vom Act geliefert; Live-Fotos mit Bühnenlicht, Pressefotos unverändert.", "ausschnitt": "Cover quadratisch und unverzerrt, Live-Bilder angeschnitten, Pressefotos in voller Auflösung zum Download.", "personen": "Ja: der Act; Publikum nur unscharf oder als Menge.", "formate": [ "1:1", "16:9", "4:5" ], "nicht": "Kein Dither oder Pixel auf Cover, Pressefotos und Werkabbildungen; keine Stock- oder KI-Konzertbilder; keine Pastell-Verläufe." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 80, 128, 192 ], "sektion": "clamp(64px, 10vw, 160px)", "dichte": "mittel", "hinweis": "Laute Sprünge zwischen Kapiteln, Terminliste dicht (Zeilen mindestens 44 px, 8 px Innenabstand). Platz für die volle Spreizung des Echos reservieren." }, "raster": { "spalten": 12, "rand": "clamp(12px, 2.4vw, 32px)", "spalt": "clamp(12px, 1.6vw, 24px)", "max_breite": "none", "hinweis": "Volle Breite. Termine als Zeilen über alle 12 Spalten (Datum, Stadt, Ort, Status, Ticket), Diskografie 4 Spalten, Pressefotos 3." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "2px #EEEBE3 als Papier-Kante um Ära-Flächen auf Tinte", "schatten": "nur der harte Papier-Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal)", "hinweis": "Eckig wie Plattenhülle und Plakat. Nebenaktionen als laufende Kontur (kontur-button-zeichnen, Variante laufend). Farbe nur aus Tinte, Papier und --aera." }, "template": false, "template_variante": true, "starter": false }, { "id": "industrie-b2b-mittelstand", "name": "Industrie-Mittelstand: Datenblatt und Fachperson", "branche": "Maschinen- und Anlagenbau / Zulieferer und Lohnfertiger / Hidden Champions / technische Dienstleister (B2B)", "kurz": "Eine Seite, die sich liest wie ein gutes Datenblatt: Jede Angabe hat Einheit, Stand und Quelle, jede Anwendung hat eine Fachperson mit Namen und Durchwahl. Das sichtbare Konstruktionsraster ist die Signatur, die Beschriftung folgt der Normschrift technischer Zeichnungen statt einer Mono. Breite, ruhige Headlines in Strichpunkt Sans, Archivo mit Breitenachse für Text und Tabellen, kühles Blechgrau und Verkehrsblau nur für die Anfrage. Bewegt wird wie an einer Linearachse: nur waagerecht oder senkrecht, harte Masken, nichts glänzt. Anders als saas: keine Dashboards, kein Dunkelmodus, kein Glow, keine Mono-Labels.", "stimmung": [ "präzise", "sachlich", "belastbar", "international" ], "stimmung_tags": [ "präzise", "ruhig" ], "begriffe": [ "Maschinenbau", "Anlagenbau", "Sondermaschinenbau", "Zulieferer", "Lohnfertigung", "Industrie", "Hidden Champion", "Automatisierung", "Antriebstechnik", "Messtechnik", "Fördertechnik", "Prüflabor", "Instandhaltung", "B2B", "Hersteller" ], "ziele": [ "anfrage", "info" ], "varianten": [ { "name": "Zulieferer und Lohnfertiger (Teile nach Zeichnung)", "hinweis": "Statt Produktfamilien die Fertigungsmöglichkeiten als Tabelle: Verfahren, Werkstoffe, größte Abmessungen, erreichbare Toleranzen, Losgrößen, Maschinenpark mit Baujahr." }, { "name": "Technischer Dienstleister (Prüflabor, Ingenieurbüro, Instandhaltung, Montage)", "hinweis": "Leistungen statt Produkte, je Leistung eine Unterseite mit Antwort zuerst (Umfang, Dauer, Normen, Einsatzgebiet)." }, { "name": "Hersteller mit B2B-Shop oder Ersatzteilportal", "hinweis": "Schnellbestellung über Artikelnummer und Menge, Preise nach Login nur, wenn der Kunde das will; ausdrücklich „nur für Unternehmer“ und Prüfung im Bestellprozess." } ], "schrift": { "headline": "strichpunkt-sans", "text": "archivo", "akzent": "", "groessen": "h1 Strichpunkt Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 600, wdth 116, Laufweite -0.03em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem), wght 600, wdth 110, -0.02em; h3 Archivo 1.25rem wght 600 wdth 100. Fließtext Archivo 1.0625rem (17 px), wght 400, wdth 100, Zeilenhöhe 1.55, max. 68ch. Tabellen (technische Daten, Messen, Downloads) Archivo 0.9375rem, wdth 87, Tabellenziffern, Einheit in eigener Spalte rechtsbündig neben dem Wert. Abschnittscodes und Achsbeschriftung des Rasters („01 · Anwendungen“, „A–D“, „1–12“) Archivo 0.75rem, wdth 75, wght 600, Versal, +0.08em. Artikelnummern Archivo wdth 87, Tabellenziffern, kopierbar. Höchstens zwei Gewichte je Familie (400/600).", "techniken": [ "fluide-typo-clamp-cqi", "headline-laufweite-zeilenabstand", "tabellenziffern", "lesesatz-text-wrap", "eine-familie-wenig-gewichte" ], "alternative": "Text switzer (ITF), Headline general-sans in 600 (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F3F3F0", "label": "Grund (Blechgrau, Datenblattpapier)" }, { "token": "text", "hex": "#111417", "label": "Text Graphit (16,6 : 1)" }, { "token": "text-2", "hex": "#4E555B", "label": "Sekundärtext, Einheiten, Meta (6,8 : 1)" }, { "token": "flaeche", "hex": "#E4E5E1", "label": "Tabellenkopf, Zellfläche bei Hover" }, { "token": "dunkel", "hex": "#16202A", "label": "Stahlblau dunkel: Kopf, Messen-Band, Fußzeile (Weiß darauf 16,5 : 1)" }, { "token": "signal", "hex": "#0E518D", "label": "Signal Verkehrsblau: Projekt anfragen, aktiver Filter, Fokus (Weiß darauf 8,1 : 1; auf Grund 7,3 : 1)" } ], "signal": "signal", "farbprinzip": "Kühles Blechgrau als Grund, Graphit statt Schwarz, Rasterlinien in 13 % Graphit, dunkles Stahlblau für Kopf, Messen und Fußzeile. Genau ein Signal: Verkehrsblau (RAL 5017 als Beispiel; im Projekt die echte Hausfarbe, flach, nie als Verlauf) nur für „Projekt anfragen“, aktive Filter und Fokus. Keine Glanzflächen, kein Dunkelmodus als Gestaltungsidee, Farbe in Fotos kommt aus Maschine, Werkstoff und Halle.", "stil": "token-swiss-knackig", "stil_ui": "", "ease": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer": { "xs": 200, "s": 350, "m": 500, "l": 700 }, "bewegung_regel": "Bewegung wie an einer Linearachse: nur x oder y, keine Rotation, keine Skalierung über 1.0, kein Überschwingen. Tabellen, Datenblätter, Downloads und Formulare stehen sofort; Reveals nur für die H1 und die Fotos der Referenzen. Das Raster zeichnet sich nicht ein, es ist einfach da. Bei prefers-reduced-motion 150 ms Deckkraft, Masken sofort offen.", "hero": [ "blueprint-raster-sichtbar" ], "hero_variante": [ "bildsequenz-video-scrub" ], "hero_varianten": {}, "hero_beschreibung": "Echtes Foto der eigenen Maschine oder Anlage im Einsatz beim Kunden oder in der eigenen Halle (keine Renderings im Hero, außer das Produkt ist noch nicht gebaut), im sichtbaren 12-Spalten-Raster (blueprint-raster-sichtbar: Linien als Zellkanten, Plus-Marker an den Schnittpunkten, Achsbeschriftung 1–12 im Steg). H1 sagt, was das Unternehmen herstellt und für wen („Vakuum-Greifsysteme für Blech, Holz und Glas“), darunter eine belegte Kennzahl mit Stand (seit, Länder, Anlagen im Feld) und zwei Knöpfe: „Projekt anfragen“ (gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern). Sprache und Land oben rechts als Text. hero_variante bildsequenz-video-scrub nur, wenn 60 bis 120 gerenderte Einzelbilder aus dem CAD vorliegen und der Text daneben alles Wichtige auch ohne Bild sagt; mobil statt Scrub ein Standbild. Kein Video-Hero ohne eigenes, gutes Material.", "hero_aufbau": { "raster": "Sichtbares 12-Spalten-Raster mit Achsbeschriftung 1–12 im Steg: Text über Spalte 1 bis 6, Foto über 7 bis 12, beide auf Linien.", "bild": "Echtes Foto der eigenen Maschine im Einsatz, 3:2. bildsequenz-video-scrub nur als hero_variante mit 60 bis 120 CAD-Bildern, mobil Standbild.", "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Strichpunkt Sans 600 wdth 116, links oben auf einer Rasterlinie.", "handlung": "„Projekt anfragen“ (Verkehrsblau gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern), nebeneinander.", "zusatz": "Belegte Kennzahl mit Stand; Sprache und Land oben rechts als Text; Abschnittscode „01 · …“ in Archivo schmal." }, "sektionen": [ { "zweck": "Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)", "muster": [ "team-ueber-mich-layout", "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion" ], "varianten": { "team-ueber-mich-layout": "raster", "mehrschritt-anfrage": "senkrecht", "formular-fehlerzusammenfassung": "liste" } }, { "zweck": "Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person)", "muster": [ "listen-hover-bildvorschau", "leistungsseite-antwort-zuerst" ], "varianten": { "leistungsseite-antwort-zuerst": "handwerk" } }, { "zweck": "Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)", "muster": [ "lokale-produktnavigation", "technische-daten-produktseite", "facettenfilter-ergebnisliste", "bild-hotspots" ], "varianten": { "facettenfilter-ergebnisliste": "seitenleiste", "lokale-produktnavigation": "abschnitte", "bild-hotspots": "bauteil" } }, { "zweck": "Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse)", "muster": [ "download-center-dokumente", "reparatur-richtpreise" ], "varianten": { "reparatur-richtpreise": "hersteller" } }, { "zweck": "Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe)", "muster": [ "case-study-geruest", "css-native-karussell" ], "varianten": { "css-native-karussell": "peek" } }, { "zweck": "So läuft ein Projekt (Anfrage → Machbarkeit und Versuch mit Kundenteilen → Angebot → Konstruktion → Abnahme im Werk → Inbetriebnahme vor Ort → Service; Dauer je Schritt als ehrliche Spanne)", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF)", "muster": [ "zahlen-fakten-section", "logo-wand-social-proof" ], "varianten": { "zahlen-fakten-section": "tabelle", "logo-wand-social-proof": "raster" } }, { "zweck": "Messen und Termine (Tabelle mit Datum, Messe, Stadt und Land, Halle und Stand, Ticket-Code, Termin am Stand vereinbaren, .ics je Messe; Vergangenes fällt heraus; bei zwei oder drei Messen im Jahr eine einfache Liste)", "muster": [ "programm-kalender" ], "varianten": { "programm-kalender": "programm" } }, { "zweck": "Standorte weltweit (Werke, Tochtergesellschaften, Vertretungen als Liste mit Land, Rolle, Sprachen, Ansprechperson, Ortszeit als Text; Entfernung erst nach PLZ oder Standortfreigabe, Karte erst nach zweitem Klick)", "muster": [ "standortfinder-liste" ], "varianten": { "standortfinder-liste": "liste" } }, { "zweck": "Karriere (Einstiege Ausbildung, Studium, Berufserfahrene; Stellen mit Gehaltsspanne oder Tarifgruppe, Ort, Schicht; Kurzbewerbung; ab vier Stellen Filter; bei eigener Karriere-Microsite Rezept arbeitgeber-karriere)", "muster": [ "stellen-karriere" ], "varianten": { "stellen-karriere": "liste" } }, { "zweck": "Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)", "muster": [ "kontakt-anfrage-formular", "oeffnungszeiten-status", "karte-zwei-klick", "firmendaten-strukturiert" ], "varianten": { "oeffnungszeiten-status": "termin", "karte-zwei-klick": "skizze", "firmendaten-strukturiert": "werkstatt" } } ], "bereiche": { "navigation": [ "mega-menue-morphing-viewport", "native-popover-dropdowns" ], "scroll": [ "clip-path-bild-reveal" ], "hover": [ "listen-hover-bildvorschau" ], "mikro": [ "tabs-pfeiltasten-focusgroup", "kopieren-feedback", "einblenden-starting-style" ], "galerie": [ "galerie-shared-element-vollbild" ], "footer": [ "mega-footer-sitemap" ], "button": [ "button-zustaende", "kontur-button-zeichnen" ] }, "varianten_demo": { "kontur-button-zeichnen": "ecken", "galerie-shared-element-vollbild": "basis", "tabs-pfeiltasten-focusgroup": "manuell", "gap-decorations-raster": "kenndaten", "agentenformular-webmcp": "projekt" }, "signatur": [ "blueprint-raster-sichtbar" ], "button": [ "button-zustaende", "kontur-button-zeichnen" ], "optional": [ "gap-decorations-raster", "agentenformular-webmcp" ], "nicht_verwenden": [ { "ids": [ "produkt-ui-hero-perspektiv-tilt", "command-palette-und-ki-suche" ], "grund": "Signaturen von saas; hier stehen Maschinen und Datenblätter im Vordergrund, keine Software-Oberflächen" }, { "ids": [ "karten-spotlight-glow", "verlaufs-rahmen", "mesh-gradient-shader", "liquid-glass-refraktion" ], "grund": "SaaS-Glanz; das Rezept lebt von Linien, Zahlen und echten Fotos" }, { "ids": [ "glas-button", "frosted-glass-erweitert" ], "grund": "Glas über Hallenfotos senkt den Kontrast und wirkt wie Konsumelektronik" }, { "ids": [ "zahlen-odometer" ], "grund": "hochgezählte Kennzahlen wirken verkäuferisch; Zahlen stehen still, mit Stand und Quelle" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "Datenblätter, Tabellen und Downloads werden gelesen und verglichen" }, { "ids": [ "marquee-laufband" ], "grund": "Kundenlogos als Laufband; Referenzen nur mit Freigabe und als ruhiges Raster" }, { "ids": [ "interaktives-3d-hero", "scroll-3d-kamerafahrt" ], "grund": "teuer und langsam; CAD-Modelle als Download oder Viewer erst nach Klick" }, { "ids": [ "scramble-decode", "typewriter-natural" ], "grund": "Hacker- und Chat-Ästhetik statt Messtechnik" }, { "ids": [ "mono-labels-versal" ], "grund": "die Beschriftung folgt der Normschrift in Archivo schmal, eine Mono wäre die dritte Stimme" }, { "ids": [ "prompt-hero-eingabefeld", "ki-streaming-text-denkindikator" ], "grund": "kein KI-Chat statt Fachperson; wenn ein Assistent kommt, nur gekennzeichnet (Art. 50 KI-VO)" }, { "ids": [ "magnetische-elemente", "cursor-follower-lerp", "kontextueller-cursor" ], "grund": "Agentur-Gesten ohne Nutzen für Einkäufer und Ingenieure" }, { "ids": [ "stapelkarten", "bento-grid-interaktiv" ], "grund": "verstecken Daten oder verlangen Füllinhalt" }, { "ids": [ "vorher-nachher-vergleichsregler" ], "grund": "Signatur von handwerk" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach der Anfrage eine sachliche Bestätigung mit Vorgangsnummer und Name der Fachperson" }, { "ids": [], "grund": "Renderings und Stockfotos von Handschlägen, Weltkugeln und Zahnrädern – echte Fotos aus Halle, Prüffeld und Kundenanlage" } ], "ton": { "anrede": "Sie", "saetze": "Wie ein Datenblatt: Wert, Einheit, Bedingung. Verben sachlich, keine Adjektivketten.", "haltung": "Belastbar und präzise; jede Anwendung hat eine Person mit Durchwahl.", "beispiele": [ "Spannsysteme für Fräszentren, gefertigt in [Ort].", "Ihre Ansprechperson für Holz: [Name], Durchwahl [Nummer]." ], "nicht": "„Hidden Champion“ als Selbstlob, „innovativ“, „Lösungen“ ohne Gegenstand, „weltweit führend“ ohne Beleg." }, "bildsprache": { "licht": "Hallenlicht oder Licht beim Kunden, technisch scharf.", "ausschnitt": "Maschine im Einsatz, Mensch als Maßstab, Detail der Funktion.", "personen": "Ja: Fachpersonen mit Namen; Kundenwerke nur mit schriftlicher Freigabe.", "formate": [ "3:2", "16:9", "4:3" ], "nicht": "Keine Renderings im Hero (außer das Produkt ist noch nicht gebaut), keine Stock-Ingenieur:innen mit Tablet, kein Globus, kein Glanz." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sektion": "clamp(64px, 8vw, 128px)", "dichte": "dicht", "hinweis": "Datenblatt-Dichte: Tabellenzeilen 8 bis 12 px, Zellen mit 16 bis 24 px Innenabstand. Jedes Element sitzt auf einer Rasterlinie." }, "raster": { "spalten": 12, "rand": "clamp(16px, 3vw, 40px)", "spalt": "0", "max_breite": "1440px", "hinweis": "12 Spalten ab 821 px, 8 bis 820 px, 4 darunter (Regel). Sichtbares Raster mit Plus-Markern nur an Schnittpunkten und Achsbeschriftung im Steg (blueprint-raster-sichtbar). Spaltenabstand 0, Linien sind die Zellkanten; Innenabstand der Zelle clamp(16px, 2vw, 24px)." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "1px rgba(17, 20, 23, .13) für Raster und Plus-Marker; Tabellenkopf auf #E4E5E1", "schatten": "keiner", "hinweis": "Keine Rundung, kein Glanz. Nebenweg als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Verkehrsblau flach." }, "template": true, "template_variante": false, "starter": false }, { "id": "kfz-werkstatt-autohaus", "name": "Kfz-Werkstatt und Autohaus: Festpreis, Termin, fertig", "branche": "Freie Kfz-Werkstatt / Autohaus mit Werkstatt / Reifenservice / Karosserie- und Lackierbetrieb", "kurz": "Die Seite beantwortet drei Fragen in dieser Reihenfolge: Wann kann ich kommen, was kostet es, wann ist das Auto fertig. Termin in vier Schritten mit Hol- und Bringdienst nach Postleitzahl, Festpreise als echte Tabelle nach Fahrzeugklasse mit Stand-Datum, Fahrzeugbestand mit der Pflichtzeile zu Verbrauch, CO₂ und CO₂-Klasse an jeder Karte. Schmale, kräftige Mona Sans wie auf Werkstatt- und Preisschildern, Asphaltgrau und Verkehrsgelb nur für „Termin buchen“, eine Taste mit echter Tiefe wie ein Werkstatt-Taster. Signatur ist die Reifenflanke: Die Reifengröße steht als Text auf dem Rund und wird daneben erklärt. Anders als handwerk: Preise statt Kostenrechner, Termin statt Anfrage, kein Vorher/Nachher-Regler, andere Bewegung.", "stimmung": [ "bodenständig", "schnell", "klar", "verlässlich" ], "stimmung_tags": [ "präzise", "warm" ], "begriffe": [ "Kfz-Werkstatt", "Autowerkstatt", "Werkstatt", "Autohaus", "Gebrauchtwagen", "Neuwagen", "Reifenservice", "Reifenhandel", "Karosserie", "Lackiererei", "Unfallinstandsetzung", "HU", "TÜV", "Autoservice", "Kfz" ], "ziele": [ "termin", "kauf", "anfrage" ], "varianten": [ { "name": "Autohaus mit Neu- und Gebrauchtwagen", "hinweis": "Fahrzeugbestand rückt direkt unter den Hero, die Werkstatt wird zweite Säule mit eigenem Termin-Knopf." }, { "name": "Reifenservice und Reifenhandel", "hinweis": "Saison-Termine (Oktober bis Dezember, März bis Mai) mit freien Tagen als Text, Einlagerung mit Protokoll (Profiltiefe, DOT, Schäden) und Abholung; Reifenangebote mit EU-Label am Preis." }, { "name": "Karosserie- und Lackierbetrieb / Unfallinstandsetzung", "hinweis": "Erster Weg ist „Unfall gehabt?" } ], "schrift": { "headline": "mona-sans", "text": "google-sans-flex", "akzent": "", "groessen": "h1 Mona Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), wght 800, wdth 80, Laufweite -0.02em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.25rem + 2vw, 2.75rem), wght 750, wdth 85; die drei Preise unter dem Hero Mona Sans 2.5rem wght 800 wdth 75 Tabellenziffern, „€“ und „inkl. MwSt.“ in Google Sans Flex daneben. Preise in der Festpreis-Tabelle Google Sans Flex 1.125rem wght 700 Tabellenziffern, rechtsbündig. Fließtext Google Sans Flex 1.0625rem (17 px), wght 400, ROND 0, opsz automatisch, Zeilenhöhe 1.55, max. 65ch; Labels (Fahrzeugklasse, Stand-Datum) Google Sans Flex 0.8125rem wght 600 Versal +0.06em; Telefonnummer im Kopf 1.25rem wght 700 Tabellenziffern. Pflichtzeile Pkw-EnVKV mindestens so groß und kräftig wie der Angebotstext daneben, nie unter 0.875rem.", "techniken": [ "fluide-typo-clamp-cqi", "tabellenziffern", "lesesatz-text-wrap", "optische-groessen-opsz" ], "alternative": "Headline cabinet-grotesk in 800 (ITF), Text satoshi (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F2F1ED", "label": "Grund (Betongrau hell)" }, { "token": "text", "hex": "#121314", "label": "Text (16,5 : 1)" }, { "token": "text-2", "hex": "#595E63", "label": "Sekundärtext, Stand-Datum, Einheiten (5,8 : 1)" }, { "token": "asphalt", "hex": "#232629", "label": "Asphalt: Kopf, Festpreis-Tafel, Fußzeile (Weiß darauf 15,2 : 1; Sekundärtext darauf #B9BEC4, 8,1 : 1)" }, { "token": "signal", "hex": "#F5B700", "label": "Signal Verkehrsgelb: Termin buchen, aktiver Schritt (Text #121314, 10,3 : 1; auf Grund mit 2 px Rand #232629)" }, { "token": "status", "hex": "#1F7A3E", "label": "Status geöffnet, verfügbar (Weiß darauf 5,4 : 1, nur mit Text)" }, { "token": "fehler", "hex": "#B3261E", "label": "Fehler, Termin belegt (Weiß darauf 6,5 : 1, sparsam)" } ], "signal": "signal", "farbprinzip": "Helles Betongrau als Grund, Asphalt für Kopf, Festpreis-Tafel und Fußzeile, Verkehrsgelb (RAL 1023 als Beispiel) nur für „Termin buchen“ und den aktiven Schritt der Terminstrecke. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Asphalt (Nicht-Text-Kontrast), auf Asphalt ohne Rand. Grün nur für „Jetzt geöffnet“ und „verfügbar“, Rot nur für Fehler; beides immer mit Text, nie als einzige Aussage. Markenfarben von Herstellern nur im Logo des Autohauses, nie als Flächenfarbe der Seite.", "stil": "token-toggle-asymmetrisch", "stil_ui": "", "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer": { "xs": 150, "s": 220, "m": 300, "l": 450 }, "bewegung_regel": "Schnell und sachlich: nichts blendet beim Scrollen ein, kein Karussell mit Autoplay, keine Zähler. Die Tiefen-Taste sinkt beim Druck sichtbar ein (Weg höchstens 4 px), sonst kein Weg über 8 px. Preise, Öffnungsstatus und Fahrzeugdaten stehen sofort. Bei prefers-reduced-motion öffnen und schließen alle Teile ohne Übergang, die Taste wechselt nur die Farbe.", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Echtes Foto aus der eigenen Werkstatt (Annahme, Hebebühne mit Mensch, Hof mit Schild; Kennzeichen von Kundenfahrzeugen unkenntlich), daneben H1 mit Leistung und Ort („Kfz-Meisterwerkstatt in [Ort] – alle Marken“), der Öffnungsstatus aus echten Zeiten („Heute bis 18 Uhr geöffnet“), „Termin buchen“ als gelbe Tiefen-Taste und die Telefonnummer als tel:-Link. Direkt darunter drei Festpreise als Zeile (z. B. HU/AU, Räderwechsel, Inspektion ab) mit Stand-Datum und Link zur ganzen Tabelle. Kein Video, keine Stockfotos von glänzenden Neuwagen, kein Karussell. Beim Autohaus darf das Foto ein echtes Fahrzeug vom Hof zeigen; Motordaten im Hero lösen die Pkw-EnVKV-Zeile aus.", "hero_aufbau": { "raster": "12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; darunter die Festpreis-Zeile über alle 12.", "bild": "Echtes Werkstattfoto, 3:2; beim Autohaus ein echtes Fahrzeug vom Hof (dann Pkw-EnVKV-Zeile).", "h1": "clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), Mona Sans 800 wdth 80, links.", "handlung": "„Termin buchen“ (gelbe Tiefen-Taste) und Telefon als tel:-Link mit sichtbarer Nummer.", "zusatz": "Öffnungsstatus „Heute bis 18 Uhr geöffnet“ aus echten Zeiten; drei Festpreise mit Stand-Datum direkt darunter." }, "sektionen": [ { "zweck": "Termin buchen (Leistung → Fahrzeug: Marke, Modell, Baujahr, Kennzeichen freiwillig → Wunschtag mit Abgabe, Warten oder Hol- und Bringdienst; beim Hol- und Bringdienst zuerst die Postleitzahl: Ja mit Zonenpreis, auf Anfrage oder Nein → Kontakt; fremdes Buchungs-Widget erst nach Klick, Telefon und WhatsApp daneben)", "muster": [ "mehrschritt-anfrage", "termin-buchung-zwei-klick", "formular-fehlerzusammenfassung", "validierung-nach-interaktion", "datei-upload-ablage" ], "varianten": { "mehrschritt-anfrage": "plz", "termin-buchung-zwei-klick": "vorauswahl", "formular-fehlerzusammenfassung": "kompakt", "datei-upload-ablage": "foto" } }, { "zweck": "Festpreise (HU und AU mit oder ohne Prüfgebühr klar gesagt, Räder- und Reifenwechsel, Einlagerung je Saison, Klimaservice, Inspektion ab, Bremsen ab; Spalten nach Fahrzeugklasse Kleinwagen, Mittelklasse, SUV und Transporter; je Zeile was enthalten ist und wovon „ab“ abhängt; Stand-Datum über der Tabelle)", "muster": [ "speisekarte-editorial", "tabs-pfeiltasten-focusgroup" ], "varianten": { "speisekarte-editorial": "preisliste", "tabs-pfeiltasten-focusgroup": "auto" } }, { "zweck": "Leistungen (Inspektion nach Herstellervorgabe, HU/AU, Reifen, Bremsen, Klima, Diagnose, Unfall und Karosserie, Glas, Hybrid und Elektro mit Hochvolt-Qualifikation; je wichtige Leistung eine Unterseite, Antwort zuerst: Preis oder Spanne, Dauer, Ersatzwagen ja/nein)", "muster": [ "akkordeon-hoehe-auto", "leistungsseite-antwort-zuerst" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "leistungsseite-antwort-zuerst": "handwerk" } }, { "zweck": "Reifen: Größe lesen, wechseln, einlagern (Reifenflanke als statische Zeichnung mit der Größe auf dem Rund, daneben dieselbe Angabe als Liste erklärt: Breite, Querschnitt, Bauart, Felgendurchmesser, Tragfähigkeit, Geschwindigkeit, DOT-Alter; Einlagerung mit Profiltiefe-Protokoll; Reifenangebote mit Preis nur mit EU-Reifenlabel daneben)", "muster": [ "text-on-path" ], "varianten": { "text-on-path": "reifen" } }, { "zweck": "Fahrzeugbestand (Autohaus): Teaser aus dem Börsen-Feed mit Foto, Modell, Preis inkl. MwSt., EZ, km, kW (PS) und der Pflichtzeile Verbrauch, CO₂, CO₂-Klasse an jeder Karte; Stand des Feeds; Liste mit Filtern ab etwa zehn Fahrzeugen; Fahrzeugseite mit Steckbrief, Probefahrt anfragen, Inzahlungnahme", "muster": [ "fahrzeugbestand-feed-teaser", "objekt-steckbrief-expose", "facettenfilter-ergebnisliste", "finanzierung-pflichtangaben" ], "varianten": { "objekt-steckbrief-expose": "fahrzeug", "facettenfilter-ergebnisliste": "leiste", "finanzierung-pflichtangaben": "fahrzeugkarte" } }, { "zweck": "So läuft Ihr Werkstattbesuch (Termin → Annahme mit Kostenrahmen → Anruf vor jeder Mehrarbeit → Fertigmeldung per SMS oder Anruf → Abholung mit Erklärung der Rechnung; nur versprechen, was der Betrieb so macht)", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Bewertungen (Google-Profil mit Schnitt, Anzahl, Stand-Datum und Echtheitshinweis direkt daneben; drei Stimmen mit Antwort des Betriebs; Live-Ansicht nur per Klick)", "muster": [ "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungsprofil-mit-echtheitshinweis": "pille" } }, { "zweck": "Team und Meister (Inhaber:in oder Werkstattmeister:in mit Foto, Annahme mit Durchwahl, Qualifikationen wie Meisterbrief und Hochvolt; bis etwa fünf Personen als ein Satz mit kleinen Porträts, darüber Raster)", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "statement" } }, { "zweck": "Partner und Nachweise (Kfz-Innung, Werkstattsystem, Prüforganisation im Haus mit HU-Tagen, Herstellerzulassungen; nur mit Erlaubnis und aktuell)", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "raster" } }, { "zweck": "Karriere und Ausbildung (Kfz-Mechatroniker:in, Servicetechniker:in, Ausbildung; Stellen direkt offen mit Gehalt, Initiativbewerbung; eigene Karriere-Microsite nach arbeitgeber-karriere)", "muster": [ "stellen-karriere" ], "varianten": { "stellen-karriere": "wenige" } }, { "zweck": "Öffnungszeiten, Anfahrt, Kontakt (Werkstatt, Verkauf und Teile getrennt, HU-Tage, Schlüsselbox für Abgabe außerhalb der Zeiten; Adresse als Text, Zufahrt und Parken, Karte per 2-Klick; kurze Frage ohne Termin; ein Datenblock für Seite und JSON-LD AutoRepair bzw. AutoDealer)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick", "kontakt-anfrage-formular", "firmendaten-strukturiert" ], "varianten": { "oeffnungszeiten-status": "karte", "karte-zwei-klick": "bild", "firmendaten-strukturiert": "werkstatt" } }, { "zweck": "Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Betrieb kein Kleinstunternehmen ist – vom Kunden prüfen lassen)", "muster": [ "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "bfsg" } } ], "bereiche": { "navigation": [ "mobile-bottom-navigation", "native-popover-dropdowns" ], "mikro": [ "checkbox-radio-animiert", "einblenden-starting-style", "icon-squash-stretch" ], "galerie": [ "galerie-shared-element-vollbild" ], "footer": [ "studio-visitenkarte-footer", "widerruf-und-kuendigung-schaltflaeche" ], "button": [ "tiefen-taste-3d", "pfeil-icon-button" ] }, "varianten_demo": { "tiefen-taste-3d": "stapel", "mobile-bottom-navigation": "kontakt", "studio-visitenkarte-footer": "praxis", "galerie-shared-element-vollbild": "produkt", "widerruf-und-kuendigung-schaltflaeche": "richtig", "agentenformular-webmcp": "termin", "text-on-path": "reifen", "pfeil-icon-button": "tausch" }, "signatur": [ "text-on-path" ], "button": [ "tiefen-taste-3d", "pfeil-icon-button" ], "optional": [ "agentenformular-webmcp" ], "nicht_verwenden": [ { "ids": [ "vorher-nachher-vergleichsregler" ], "grund": "Signatur von handwerk; Unfallinstandsetzung als zwei feste Fotos nebeneinander mit Datum" }, { "ids": [ "kostenrechner-konfigurator" ], "grund": "Reparaturkosten hängen vom Befund ab (wann_nicht: jeder Auftrag anders); Festpreise als Tabelle und Kostenvoranschlag" }, { "ids": [ "cinematic-video-hero", "interaktives-3d-hero" ], "grund": "lange Ladezeit; der erste Bildschirm ist Termin, Telefon und Preis" }, { "ids": [ "hide-on-scroll-header" ], "grund": "Telefon und „Termin buchen“ müssen immer erreichbar sein" }, { "ids": [ "zahlen-odometer" ], "grund": "hochgezählte „10.000 reparierte Autos“ wirken unseriös" }, { "ids": [ "kreistext-siegel-rotierend" ], "grund": "„Meisterbetrieb“-Stempel ist Template-Klischee; Schrift auf dem Rund gibt es nur an der Reifenflanke, und sie dreht sich nicht" }, { "ids": [ "marquee-laufband" ], "grund": "Markenlogos ziehen vorbei, ohne etwas zu sagen; Partner als ruhiges Raster" }, { "ids": [ "webgl-bildverzerrung", "bild-zoom-in-maske" ], "grund": "auf Fahrzeugfotos – verfälscht Fotos, die verkaufen; Fahrzeugbilder stehen still" }, { "ids": [ "glas-button", "frosted-glass-erweitert" ], "grund": "Glas über Hallenfotos senkt den Kontrast" }, { "ids": [ "smooth-scroll-lenis", "cursor-follower-lerp", "magnetische-elemente" ], "grund": "bremsen, wer schnell einen Preis sucht" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach der Buchung eine Bestätigung mit Datum, Uhrzeit, Leistung und Telefonnummer" }, { "ids": [ "prompt-hero-eingabefeld", "ki-streaming-text-denkindikator" ], "grund": "kein KI-Chat statt Annahme; wenn ein Assistent kommt, beim Start gekennzeichnet (Art. 50 KI-VO)" }, { "ids": [], "grund": "Stockfotos von Mechanikern mit sauberen Händen und Neuwagen im Studio – echte Werkstatt, echte Fahrzeuge vom Hof" } ], "ton": { "anrede": "Sie", "saetze": "Kurz: Leistung, Preis, Zeit. Preise mit Stand-Datum, „ab“ nur mit dem Satz, wovon es abhängt.", "haltung": "Bodenständig und verlässlich; klare Zusagen nur, wenn der Betrieb so arbeitet.", "beispiele": [ "Räderwechsel ab [Preis] €, inklusive Auswuchten.", "Bevor wir mehr machen, rufen wir Sie an." ], "nicht": "„Ihr Auto ist bei uns in besten Händen“, „Rundum-sorglos“, „0 %-Finanzierung“ ohne Pflichtangaben." }, "bildsprache": { "licht": "Echtes Werkstattlicht, Röhrenlicht erlaubt, nichts poliert.", "ausschnitt": "Annahme, Hebebühne mit Mensch, Hof mit Schild; Kennzeichen von Kundenfahrzeugen unkenntlich.", "personen": "Ja: das Team in Arbeitskleidung mit Namen.", "formate": [ "3:2", "4:3", "16:9" ], "nicht": "Keine glänzenden Neuwagen-Stockfotos, keine Schraubenschlüssel-Clipart, keine Herstellerfarben als Fläche, kein Karussell." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 40, 56, 80, 120 ], "sektion": "clamp(56px, 7vw, 104px)", "dichte": "dicht", "hinweis": "Schnell zu scannen: Festpreis-Tabelle mit 12 px Zeilen, Terminstrecke mit 16 px zwischen Feldern, kurze Sektionsabstände." }, "raster": { "spalten": 12, "rand": "clamp(16px, 3vw, 40px)", "spalt": "clamp(12px, 2vw, 24px)", "max_breite": "1280px", "hinweis": "Hero 5/7 (Text/Foto), darunter die Festpreis-Zeile über alle 12 Spalten auf Asphalt. Fahrzeugkarten 3 Spalten mit Pflichtzeile." }, "form": { "radius_klein": "4px", "radius_gross": "8px", "pille": false, "linie": "2px #232629 um gelbe Knöpfe auf hellem Grund; Tabellen 1px #595E63 mit 25 % Deckkraft", "schatten": "nur die Tiefen-Taste (tiefen-taste-3d, Variante stapel) für „Termin buchen“; sonst keiner", "hinweis": "Werkstatt-Taster statt Pille: 4 px an Knöpfen und Feldern, 8 px an Karten und Fotos. Alle anderen Knöpfe flach." }, "template": true, "template_variante": false, "starter": false }, { "id": "arbeitgeber-karriere", "name": "Arbeitgeber: Einblick statt Floskel", "branche": "Karriereseite und Recruiting-Microsite eines KMU (Handwerk, Pflege, Industrie, Gastronomie, Handel)", "kurz": "Eine Seite für Menschen, die gerade einen Job suchen, oft am Handy und in der Pause: oben das echte Angebot mit Gehaltsspanne, darunter die offenen Stellen und eine Kurzbewerbung ohne Anschreiben. Danach erst die Einblicke: eine Collage aus echten Handyfotos des Teams, ein Tag im Betrieb als waagerechte Zeitleiste, Stimmen mit Namen und Benefits als Zahlen statt Icons. Funnel Display und Funnel Sans, Kreide und Tannengrün, Klatschmohn nur für „Bewerben“. Fotos und Zettel landen wie Sticker mit einem kleinen Überschwinger, Menüs und Formulare bleiben ruhig. Anders als pflege (zweite Startseite im Dienstleister-Auftritt) ist das hier ein eigener Auftritt nur fürs Recruiting, für jede Branche.", "stimmung": [ "ehrlich", "nahbar", "konkret", "warm" ], "stimmung_tags": [ "warm", "verspielt" ], "begriffe": [ "Karriereseite", "Karriere", "Recruiting", "Stellenangebote", "Jobs", "Ausbildung", "Azubi", "Personalgewinnung", "Fachkräfte", "Arbeitgebermarke", "Employer Branding", "Bewerbung" ], "ziele": [ "bewerbung" ], "varianten": [ { "name": "Ausbildung und Praktikum (Azubi-Microsite)", "hinweis": "Zielgruppe 15 bis 19 Jahre und ihre Eltern." }, { "name": "Pflege und Gesundheit", "hinweis": "Tarif oder AVR mit Entgeltgruppe und Stufe, Schicht- und Tourenmodell als Tabelle, Dienstwagen, Einspringregel und Frei-Garantie nur, wenn sie gelten; Anerkennung ausländischer Abschlüsse mit Ansprechperson." }, { "name": "Gastronomie und Hotel", "hinweis": "Stundenlohn und Monatsgehalt nebeneinander, Trinkgeld-Regel (wie verteilt wird), Vorlauf des Dienstplans, Personalessen, Unterkunft für Saisonkräfte mit Preis, Minijob und Aushilfe mit Stundenlohn." }, { "name": "Industrie mit Schichtbetrieb", "hinweis": "Schichtmodell als Tabelle mit Zuschlägen in Prozent, Tarif mit Entgeltgruppe (z." } ], "schrift": { "headline": "funnel-display", "text": "funnel-sans", "akzent": "", "groessen": "h1 Funnel Display clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), wght 700, Laufweite -0.03em, Zeilenhöhe 0.96; h2 clamp(1.75rem, 1.3rem + 2vw, 3rem), wght 600, -0.02em; h3 Funnel Sans 1.25rem wght 600. Fließtext Funnel Sans 1.125rem (18 px), wght 400, Zeilenhöhe 1.6, max. 62ch. Gehaltsspanne in Stellenkarten Funnel Sans 1.25rem wght 700 Tabellenziffern („3.100–3.600 € brutto im Monat“); Uhrzeiten in der Tageszeitleiste Funnel Display 2rem wght 600 Tabellenziffern; Bildunterschriften (Name, Aufgabe, Datum) Funnel Sans 0.875rem wght 500; Zettel in der Collage Funnel Sans kursiv 1rem. Höchstens zwei Gewichte je Familie im Text (400/700).", "techniken": [ "fluide-typo-clamp-cqi", "headline-laufweite-zeilenabstand", "tabellenziffern", "lesesatz-text-wrap", "text-box-trim" ], "alternative": "Headline cabinet-grotesk in 700, Text general-sans (beide ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F6F3EC", "label": "Grund Kreide" }, { "token": "text", "hex": "#161616", "label": "Text Tinte (16,3 : 1)" }, { "token": "text-2", "hex": "#5A5650", "label": "Sekundärtext, Bildunterschrift, Stand-Datum (6,6 : 1)" }, { "token": "flaeche", "hex": "#EFE6D2", "label": "Zettel und Hinweisflächen (Tinte darauf 14,6 : 1)" }, { "token": "tannengruen", "hex": "#1D4A3A", "label": "Tannengrün: dunkle Sektionen, Fußzeile (Kreide darauf 9,1 : 1)" }, { "token": "signal", "hex": "#C8382A", "label": "Signal Klatschmohn: Bewerben, aktiver Schritt (Weiß darauf 5,2 : 1; auf Kreide 4,7 : 1; auf Tannengrün nur mit 2 px Kreide-Rand)" } ], "signal": "signal", "farbprinzip": "Kreide als Grund, Tinte statt Schwarz, Tannengrün als Hausfarbe für die dunklen Sektionen (Ein Tag als …, Stimmen, Fußzeile), Klatschmohn nur für „Bewerben“ und den aktiven Schritt der Kurzbewerbung. Auf Tannengrün steht der Bewerben-Knopf mit 2 px Kreide-Rand (Klatschmohn auf Tannengrün hat nur 1,9 : 1). Die echten Fotos bringen die übrige Farbe; im Projekt ersetzt die Hausfarbe des Arbeitgebers das Tannengrün, der Signalton bleibt ein einziger.", "stil": "token-federnd-verspielt", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.34, 1.56, 0.64, 1)", "dauer": { "s": 400, "m": 500, "l": 800 }, "bewegung_regel": "Die Collage kommt einmal an und steht dann still (keine Parallaxe, kein Ziehen). Überschwingen nur auf Transform von Fotos, Zetteln, Haken und Knöpfen, nie auf Deckkraft, nie auf Flächen über die halbe Breite. Stellen, Gehälter und Formular stehen sofort, keine Einblendungen beim Scrollen. Die Tageszeitleiste läuft nur, solange gescrollt wird; auf dem Telefon ist sie eine native Wischleiste ohne Pin. Bei prefers-reduced-motion stehen alle Fotos an ihrem Platz (Rückfall cubic-bezier(0, 0, 0.58, 1), 200 ms), die Zeitleiste ist eine senkrechte Liste.", "hero": [ "collage-scrapbook" ], "hero_variante": [], "hero_varianten": {}, "hero_beschreibung": "Collage aus fünf bis sieben echten Fotos aus dem Betrieb (Handyfotos reichen: Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit, alle mit Einwilligung), leicht gedreht auf einem verdeckten 12er-Raster, dazu ein Zettel mit einem echten Satz aus dem Team. Links davon die H1 mit dem konkreten Angebot („Elektroniker:in in Wunstorf. 19,50 bis 25 € die Stunde, 38 Stunden, Freitag früher Schluss.“), darunter „Offene Stellen“ und „In zwei Minuten bewerben“ sowie die Ansprechperson mit Foto, Telefon und WhatsApp. Mobil drei bis vier Fotos im Hochformat unter der H1. Ohne eigenes Bildmaterial entfällt die Collage (wann_nicht) und der Hero wird ein einzelnes echtes Teamfoto; das Rezept verlangt aber eigenes Material, also vorher einen halben Tag mit dem Handy fotografieren. Kein Imagefilm im Hero, keine Stockfotos.", "hero_aufbau": { "raster": "12 Spalten: H1 über Spalte 1 bis 6, Collage über 6 bis 12 auf verdecktem Raster (collage-scrapbook); mobil drei bis vier Fotos im Hochformat unter der H1.", "bild": "Fünf bis sieben echte Fotos, 3:4 und 4:5, leicht gedreht, dazu ein Zettel mit einem echten Satz aus dem Team.", "h1": "clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), Funnel Display 700, links.", "handlung": "„In zwei Minuten bewerben“ (Klatschmohn gefüllt) und „Offene Stellen“ (Textlink mit Pfeil).", "zusatz": "Ansprechperson mit Foto, Telefon und WhatsApp unter den Knöpfen; mobil untere Leiste Bewerben / Anrufen / WhatsApp." }, "sektionen": [ { "zweck": "Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter)", "muster": [ "stellen-karriere", "stellenseite-mit-jobposting" ], "varianten": { "stellen-karriere": "liste" } }, { "zweck": "Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion", "datei-upload-ablage" ], "varianten": { "mehrschritt-anfrage": "ring", "formular-fehlerzusammenfassung": "kompakt", "datei-upload-ablage": "dokument" } }, { "zweck": "So läuft deine Bewerbung (Eingang sofort bestätigt → Anruf innerhalb von x Werktagen → Kennenlernen vor Ort oder per Video → Probetag, bezahlt oder nicht, klar gesagt → Zusage und erster Tag; Dauer je Schritt nur, wenn sie gehalten wird)", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Ein Tag als … (je Beruf eine Strecke mit vier bis acht Stationen und Uhrzeit, von Schichtbeginn bis Feierabend: echte Fotos, ein Satz je Station, auch was anstrengend ist; auf dem Telefon als Wischleiste)", "muster": [ "horizontal-scroll-section" ], "varianten": {} }, { "zweck": "Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung)", "muster": [ "testimonials-neu-gedacht", "eigener-videoplayer" ], "varianten": { "testimonials-neu-gedacht": "zitat", "eigener-videoplayer": "kapitel" } }, { "zweck": "Was du bekommst, konkret (Gehalt oder Tarif, Zuschläge in Prozent, Urlaubstage, Arbeitszeitmodell, Dienstwagen oder Jobrad mit Betrag, Weiterbildung mit Budget, Altersvorsorge mit Arbeitgeberanteil; und was es nicht gibt: Schicht, Wochenende, Bereitschaft)", "muster": [ "zahlen-fakten-section" ], "varianten": { "zahlen-fakten-section": "tabelle" } }, { "zweck": "Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "leistungen" } }, { "zweck": "Fragen vor der Bewerbung (Quereinstieg, Teilzeit, Führerschein, Deutschkenntnisse, Anerkennung ausländischer Abschlüsse, Barrierefreiheit des Arbeitsplatzes, Kinderbetreuung)", "muster": [ "akkordeon-hoehe-auto" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)", "muster": [ "team-ueber-mich-layout", "oeffnungszeiten-status", "karte-zwei-klick" ], "varianten": { "team-ueber-mich-layout": "statement", "oeffnungszeiten-status": "termin", "karte-zwei-klick": "bild" } }, { "zweck": "Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)", "muster": [ "footer-newsletter-mit-persoenlichkeit", "barrierefreiheit-seite" ], "varianten": { "footer-newsletter-mit-persoenlichkeit": "basis", "barrierefreiheit-seite": "erklaerung" } } ], "bereiche": { "navigation": [ "mobile-bottom-navigation" ], "scroll": [ "horizontal-scroll-section" ], "mikro": [ "checkbox-radio-animiert", "einblenden-starting-style" ], "footer": [ "footer-newsletter-mit-persoenlichkeit", "studio-visitenkarte-footer" ], "button": [ "fuellung-vom-eintrittspunkt", "pfeil-icon-button" ] }, "varianten_demo": { "fuellung-vom-eintrittspunkt": "basis", "pfeil-icon-button": "linie", "mobile-bottom-navigation": "fab", "studio-visitenkarte-footer": "basis", "footer-newsletter-mit-persoenlichkeit": "basis" }, "signatur": [ "collage-scrapbook", "horizontal-scroll-section" ], "button": [ "fuellung-vom-eintrittspunkt", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "cinematic-video-hero" ], "grund": "ein Imagefilm im Hero verdrängt Stellen und Gehalt und lädt lange; Videos gehören zu den Stimmen, mit Untertiteln" }, { "ids": [ "zahlen-odometer" ], "grund": "„98 % zufriedene Mitarbeitende“ hochgezählt ist die Floskel in Zahlen" }, { "ids": [ "rotating-words", "typewriter-natural" ], "grund": "„Wir suchen dich als … Held:in“ versteckt, welche Stelle es wirklich gibt" }, { "ids": [ "bento-grid-interaktiv", "stapelkarten" ], "grund": "Benefits als Icon-Kacheln sind genau die Floskel, die das Rezept vermeiden will; Benefits als Tabelle mit Zahlen" }, { "ids": [ "logo-wand-social-proof" ], "grund": "gekaufte Arbeitgebersiegel und Awards ohne Jahr und Quelle; echte Auszeichnungen als Textzeile mit Jahr" }, { "ids": [ "graustufen-zu-farbe" ], "grund": "die meisten Bewerbenden kommen per Handy und sähen die Farbe nie (wann_nicht)" }, { "ids": [ "flick-karten-stapel" ], "grund": "Signatur von friseur; außerdem Wischgeste statt lesbarer Liste" }, { "ids": [ "corner-shape-eckenformen" ], "grund": "Signatur von pflege" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach der Bewerbung eine ruhige Bestätigung mit Name, Foto und Rückrufzeit der Ansprechperson" }, { "ids": [ "prompt-hero-eingabefeld", "ki-streaming-text-denkindikator" ], "grund": "kein Chatbot statt Ansprechperson; wenn doch, beim Start gekennzeichnet (Art. 50 KI-VO)" }, { "ids": [ "smooth-scroll-lenis", "cursor-follower-lerp", "magnetische-elemente" ], "grund": "bremsen auf dem Handy und gehören zu Agenturseiten" }, { "ids": [ "hide-on-scroll-header" ], "grund": "„Bewerben“ und Telefon müssen immer erreichbar sein" }, { "ids": [], "grund": "Stockfotos von lachenden Teams am Laptop, Daumen hoch und Puzzleteile – nur echte Menschen aus dem Betrieb, mit Einwilligung; KI-Bilder von „Mitarbeitenden“ gar nicht" } ], "ton": { "anrede": "du", "saetze": "Kurz und konkret: Beruf, Ort, Gehalt, Stunden. Benefits mit Zahl und Bedingung.", "haltung": "Ehrlich und nahbar; sagt auch, was es nicht gibt. Bei Stellen für Führungskräfte oder in sehr förmlichen Betrieben Sie, dann durchgehend.", "beispiele": [ "Elektroniker:in gesucht. 38 Stunden, freitags um 13 Uhr Schluss.", "Bewirb dich in zwei Minuten, ohne Anschreiben." ], "nicht": "„junges, dynamisches Team“, „flache Hierarchien“, „familiäres Umfeld“, „Obstkorb“, Merkmale aus § 1 AGG." }, "bildsprache": { "licht": "Echtes Licht im Betrieb, Handyfotos reichen, ungefiltert.", "ausschnitt": "Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit.", "personen": "Ja: nur echte Mitarbeitende mit schriftlicher, widerrufbarer Einwilligung.", "formate": [ "3:4", "4:5", "1:1" ], "nicht": "Keine Stockfotos, keine KI-Bilder von Menschen, kein Imagefilm im Hero, keine Daumen-hoch-Teamfotos." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 88, 128 ], "sektion": "clamp(64px, 8vw, 120px)", "dichte": "mittel", "hinweis": "Mobil zuerst: Stellenkarten mit 16 px Innenabstand und Gehalt oben, Kurzbewerbung mit 20 px zwischen Feldern. Die Collage darf eng überlappen." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 48px)", "spalt": "clamp(12px, 2vw, 24px)", "max_breite": "1360px", "hinweis": "Hero 6/6 (H1 links, Collage rechts auf verdecktem 12er-Raster). Stellen als Liste, Tageszeitleiste waagerecht (horizontal-scroll-section), mobil Wischleiste." }, "form": { "radius_klein": "6px", "radius_gross": "2px", "pille": false, "linie": "1px #5A5650 mit 20 % Deckkraft", "schatten": "nur Fotos und Zettel der Collage liegen mit kurzem, weichem Schatten wie Papier auf dem Tisch", "hinweis": "Fotos fast eckig wie Abzüge, leicht gedreht (Demo collage-scrapbook: 1,5 bis 4°); Knöpfe 6 px. Links zu Stellen als Textlink mit Pfeil (pfeil-icon-button, Variante linie)." }, "template": true, "template_variante": false, "starter": false }, { "id": "bestattung-wuerdig", "name": "Bestattung: würdig und klar", "branche": "Bestattungsinstitut / Bestattungshaus / Trauerbegleitung (auch Trauerrede, Baum- und Waldbestattung)", "kurz": "Zwei Türen für zwei sehr verschiedene Lagen: Wer gerade einen Menschen verloren hat, findet ohne Suchen die Nummer, unter der Tag und Nacht jemand abnimmt, und eine Anleitung nach Sterbeort, Schritt für Schritt. Wer vorsorgt, findet Bestattungsarten, offene Kosten mit getrennten Fremdleistungen und eine Vorsorge, deren Geld bei einer Treuhand liegt. Eine Text-Antiqua mit ruhiger Grotesk, Kalk, Sandstein und Schiefer, Moosgrün nur für Anrufen und Anfragen. Kein Kreuz, keine Taube, keine flackernde Kerze. Bilder der Räume blenden langsam über, sonst bewegt sich nur, was jemand öffnet. Signatur: Riffelglas vor den Abschiedsräumen, das erst klar wird, wenn man hineinsehen möchte. Unterschied zu pflege-dienst-naehe (Literata, Pflaume, Sonnengelb, Wegweiser-Ecken) und praxis-gesundheit-ruhig (Hedvig, Petrol, Hovercards): andere Schriften, erdige statt Marken-Farben, weicher Bildstil statt reinem UI-Stil, Diskretion als Material.", "stimmung": [ "ruhig", "würdig", "klar", "warm" ], "stimmung_tags": [ "ruhig", "warm" ], "begriffe": [ "Bestattung", "Bestatter", "Bestatterin", "Bestattungsinstitut", "Bestattungshaus", "Beerdigungsinstitut", "Trauerfall", "Trauerbegleitung", "Bestattungsvorsorge", "Traueranzeigen", "Gedenkseite", "Trauerredner", "Trauerrednerin", "Trauerrede", "Baumbestattung", "Waldbestattung", "Bestattungswald", "Ruhewald", "Friedhofsgärtnerei" ], "ziele": [ "anfrage", "info" ], "varianten": [ { "name": "Trauerrednerin / Trauerredner (freie Rede, ohne Bestattungshaus)", "hinweis": "Hauptziel ist das Erstgespräch." }, { "name": "Baum- und Waldbestattung (Bestattungswald, Ruhewald)", "hinweis": "Hauptziel ist die Waldführung und die Wahl des Platzes." } ], "schrift": { "headline": "source-serif-4", "text": "commissioner", "akzent": "", "groessen": "h1 Source Serif 4 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), wght 400, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.12; h2 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem), wght 400; h3 1.375rem, wght 600. Namen auf Gedenkseiten in Source Serif 4 Italic. Fließtext Commissioner mindestens 1.1875rem (19 px), wght 400, FLAR 0, VOLM 0, Zeilenhöhe 1.65, höchstens 62ch; Navigation und Labels Commissioner 1rem, wght 500; Rubriken in Versal nur kurz und mit +0.06em; Telefonnummer 1.5rem, wght 600, Tabellenziffern; Preise, Daten und Lebensdaten in Tabellenziffern. Nichts fetter als 600.", "techniken": [ "lesesatz-text-wrap", "optische-groessen-opsz", "tabellenziffern", "fluide-typo-clamp-cqi" ], "alternative": "Headline zodiak (ITF), Text ranade (ITF) – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F4F1EB", "label": "Grund Kalk" }, { "token": "text", "hex": "#24221F", "label": "Text (14 : 1)" }, { "token": "flaeche", "hex": "#E8E1D5", "label": "Fläche Sandstein: Kosten, Vorsorge, Hinweise (Text 12 : 1)" }, { "token": "schiefer", "hex": "#2B2D2C", "label": "Schiefer: Sofortleiste, dunkle Bänder, Footer (Kalk darauf 12 : 1)" }, { "token": "signal", "hex": "#3F5B48", "label": "Signal Moosgrün: Anrufen, Rückruf, Vorsorge anfragen (Weiß darauf 7,5 : 1; als Fläche auf Kalk 6,6 : 1)" }, { "token": "helles", "hex": "#8FB59A", "label": "helles Moos: derselbe Knopf auf Schiefer (Schiefer-Schrift darauf 6,1 : 1)" }, { "token": "text-2", "hex": "#5A554D", "label": "Sekundärtext, Lebensdaten, Meta (6,5 : 1 auf Kalk, 5,7 : 1 auf Sandstein)" }, { "token": "linie", "hex": "#D3CCC0", "label": "Linien" } ], "signal": "signal", "farbprinzip": "Kalkweiß als Grund, Sandstein für Flächen wie Kosten, Vorsorge und Hinweise, Schiefer (warmes Fast-Schwarz) für die Sofortleiste, dunkle Bänder und den Footer. Moosgrün ist der einzige Signalton: Anrufen, Rückruf, Vorsorge anfragen. Es steht für Ruhe, nicht für Alarm. Auf Schiefer wird der Knopf zu hellem Moos mit Schiefer-Schrift. Kein Schwarzrand, kein Lila oder Violett, kein Gold, keine Verläufe, keine Farbe aus Symbolen. Sekundärtext dunkler als üblich (6,5 : 1), weil viele Leser älter sind oder unter Stress lesen.", "stil": "token-luxus-weich", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer": { "s": 500, "m": 1200, "l": 1400, "xl": 2200 }, "bewegung_regel": "Nichts bewegt sich von selbst: keine Einblendungen beim Scrollen, keine Bild-Reveals, keine Diashow mit Autoplay, keine flackernde Kerze. Bilder wechseln nur auf Klick und blenden dann langsam über. Kein Weg über 8 px, keine Skalierung, kein Überschwingen. Bei prefers-reduced-motion öffnen alle Teile ohne Übergang, Raumbilder wechseln mit 500 ms Deckkraft, das Riffelglas wird ohne Übergang klar.", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "split-randabfallend" }, "hero_beschreibung": "Ruhiges, echtes Foto ohne Menschen in Trauer: Abschiedsraum im Tageslicht, Garten, Fenster oder Material (Holz, Leinen, Stein). Daneben ein Satz in einfacher Sprache (Platzhalter: „Wir sind da, wenn ein Mensch stirbt. Und wenn Sie vorsorgen möchten.“), die Nummer groß als tel:-Link mit „Tag und Nacht erreichbar“ und zwei gleich gebaute Türen: „Ein Mensch ist gestorben“ (führt zu Was ist jetzt zu tun?) und „Ich möchte vorsorgen“. Die Sofortleiste steht schon über dem Hero. Kein Video, kein Kreuz, keine Taube, keine Kerze, keine Stockfotos von Händen.", "hero_aufbau": { "raster": "12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; die Sofortleiste steht schon über dem Hero über die volle Breite.", "bild": "Ruhiges, echtes Foto ohne Menschen in Trauer, 4:5 oder 3:2.", "h1": "clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), Source Serif 4 400, links.", "handlung": "Zwei gleich gebaute Türen „Ein Mensch ist gestorben“ und „Ich möchte vorsorgen“; die Nummer groß als tel:-Link (Moosgrün).", "zusatz": "„Tag und Nacht erreichbar“ nur, wenn nachts ein Mensch abnimmt; Sofortleiste auf Schiefer." }, "sektionen": [ { "zweck": "Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)", "muster": [ "trauerfall-sofortleiste", "tabs-pfeiltasten-focusgroup", "akkordeon-hoehe-auto" ], "varianten": { "tabs-pfeiltasten-focusgroup": "auto", "akkordeon-hoehe-auto": "basis", "trauerfall-sofortleiste": "seite" } }, { "zweck": "So begleiten wir Sie (Erstgespräch zu Hause oder bei uns → Abschied nehmen → Trauerfeier → Beisetzung → danach: Formalitäten, Trauergruppe, Grabpflege); die Linie steht fest und füllt sich nicht beim Scrollen", "muster": [ "prozess-timeline-wachsende-linie" ], "varianten": {} }, { "zweck": "Bestattungsarten (Erd-, Feuer-, See-, Baum- und Waldbestattung, Feiern verschiedener Religionen und weltliche Feier; je Art eine Unterseite, Antwort zuerst: was es ist, wo es möglich ist, was es ungefähr kostet)", "muster": [ "akkordeon-hoehe-auto", "leistungsseite-antwort-zuerst" ], "varianten": { "akkordeon-hoehe-auto": "leistungen", "leistungsseite-antwort-zuerst": "praxis" } }, { "zweck": "Was kostet eine Bestattung? (drei echte Tabellen in Tabellenziffern: eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen wie Friedhof, Krematorium, Standesamt und Anzeige als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage je Zone oder Kilometer; zwei Rechenbeispiele und „Angebot anfordern“)", "muster": [ "preis-section-editorial" ], "varianten": {} }, { "zweck": "Vorsorge (was man festlegen kann, wie das Geld sicher liegt: Treuhand oder Sterbegeldversicherung; Fragen zu Pflegeheim und Schonvermögen; Gespräch zu Hause oder bei uns vereinbaren, kurzes Formular ohne Gesundheitsdaten)", "muster": [ "akkordeon-hoehe-auto", "kontakt-anfrage-formular" ], "varianten": { "akkordeon-hoehe-auto": "faq" } }, { "zweck": "Traueranzeigen und Gedenkseiten (Liste mit Name, Lebensdaten und Termin der Trauerfeier, Suche nach Namen; Gedenkseite mit Anzeige, Trauerfeier als .ics, Kondolenzbuch mit Freischaltung, stille Kerze als Zahl, „Spenden statt Blumen“ mit Empfänger; Link zur Seite kopieren; nur mit Zustimmung der Angehörigen)", "muster": [ "gedenkseiten-kondolenz", "kopieren-feedback" ], "varianten": {} }, { "zweck": "Abschied nehmen: unsere Räume (Abschiedsraum, Feierhalle, Garten, Beratungszimmer; ein Raum zur Zeit, Reiter nennen den Raum; vor dem Foto liegt Riffelglas, das erst auf „Raum ansehen“ klar wird; Größe, Plätze und Zugang ohne Stufen als Text)", "muster": [ "geriffeltes-glas", "css-native-karussell" ], "varianten": { "css-native-karussell": "buehne", "geriffeltes-glas": "still" } }, { "zweck": "Wer Sie begleitet (Inhaberin oder Inhaber, Bestatterinnen und Bestatter, Trauerbegleitung mit Foto, Name, Aufgabe und Durchwahl; bis etwa fünf Personen als Satz mit kleinen Porträts, darüber als Raster)", "muster": [ "team-ueber-mich-layout" ], "varianten": { "team-ueber-mich-layout": "statement" } }, { "zweck": "Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)", "muster": [ "oeffnungszeiten-status", "karte-zwei-klick", "standortfinder-liste", "firmendaten-strukturiert" ], "varianten": { "oeffnungszeiten-status": "karte", "karte-zwei-klick": "bild", "standortfinder-liste": "kompakt", "firmendaten-strukturiert": "werkstatt" } }, { "zweck": "Barrierefreiheit (eigene Seite als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände)", "muster": [ "barrierefreiheit-seite", "zoom-und-textabstand-robust" ], "varianten": { "barrierefreiheit-seite": "erklaerung" } } ], "bereiche": { "navigation": [ "native-popover-dropdowns" ], "mikro": [ "einblenden-starting-style", "kopieren-feedback" ], "material": [ "geriffeltes-glas" ], "galerie": [ "css-native-karussell" ], "footer": [ "studio-visitenkarte-footer" ], "button": [ "button-zustaende", "pfeil-icon-button" ] }, "varianten_demo": { "studio-visitenkarte-footer": "praxis", "pfeil-icon-button": "linie", "css-native-karussell": "buehne", "geriffeltes-glas": "still" }, "signatur": [ "geriffeltes-glas" ], "button": [ "button-zustaende", "pfeil-icon-button" ], "optional": [], "nicht_verwenden": [ { "ids": [ "cinematic-video-hero", "interaktives-3d-hero" ], "grund": "lange Ladezeit; wer anruft, braucht die Nummer, kein Bild in Bewegung" }, { "ids": [ "hide-on-scroll-header" ], "grund": "die Sofortleiste mit der Nummer muss immer sichtbar bleiben" }, { "ids": [ "clip-path-bild-reveal", "split-mask-reveal", "blur-reveal", "scroll-word-highlight" ], "grund": "inszenierte Auftritte wirken im Trauerfall wie Effekthascherei; Text und Bilder stehen" }, { "ids": [ "marquee-laufband", "rotating-words", "typewriter-natural" ], "grund": "bewegter Text ist für Menschen unter Stress eine Hürde" }, { "ids": [ "zahlen-odometer", "zahlen-fakten-section" ], "grund": "„2.000 Bestattungen im Jahr“ ist keine Botschaft für Trauernde" }, { "ids": [ "konfetti-erfolg", "like-herz-burst", "druck-feedback" ], "grund": "Feiern und Überschwingen sind pietätlos; nach dem Absenden eine ruhige Bestätigung mit Rückrufzeit" }, { "ids": [ "smooth-scroll-lenis", "cursor-follower-lerp", "magnetische-elemente", "kontextueller-cursor" ], "grund": "Agentur-Gesten, stören Menschen mit Bildschirmlupe oder zitternder Hand" }, { "ids": [ "prompt-hero-eingabefeld", "ki-streaming-text-denkindikator" ], "grund": "kein Chatbot statt eines Menschen am Telefon" }, { "ids": [ "kostenrechner-konfigurator" ], "grund": "im Trauerfall keine Regler; Kosten als Tabelle, Rechenbeispiele und persönliches Angebot" }, { "ids": [ "stapelkarten", "flick-karten-stapel", "bento-grid-interaktiv" ], "grund": "verstecken Inhalte oder verlangen Gesten" }, { "ids": [ "atmosphaere-partikel", "fluessig-marmor-hintergrund" ], "grund": "Glut, Staub und fließende Flächen werden hier sofort zum Kitsch" }, { "ids": [], "grund": "Kreuz, Taube, Engel, betende Hände, Lilien und Kerzen als Deko-Bilder – Klischee; Glaube und Symbole wählt die Familie für ihre eigene Feier" }, { "ids": [], "grund": "Schwarzrand, Lila oder Violett als Trauerfarbe, Goldschrift – Klischee der Trauerdrucksache" }, { "ids": [], "grund": "Flackernde oder animierte Kerzen auf Gedenkseiten – die Kerze ist ein stilles Zeichen mit Zahl" } ], "ton": { "anrede": "Sie", "saetze": "Kurze Sätze, ein Gedanke pro Satz; Fachwort in Klammern hinter dem Alltagswort.", "haltung": "Würdig, warm, klar. Keine Verkaufssprache.", "beispiele": [ "Ein Mensch ist gestorben. Wir sind jetzt für Sie da.", "Was zu tun ist, wenn jemand zu Hause stirbt." ], "nicht": "„unvergesslicher Abschied“, Floskel-Ketten, Verkaufssprache, „2.000 Bestattungen im Jahr“ als Botschaft." }, "bildsprache": { "licht": "Ruhiges Tageslicht, weich, ohne Gegenlicht-Pathos.", "ausschnitt": "Abschiedsraum, Fenster, Garten, Material wie Holz, Leinen, Stein.", "personen": "Nur das Team mit Einwilligung; keine Trauernden, keine Verstorbenen.", "formate": [ "4:5", "3:2" ], "nicht": "Kein Kreuz, keine Taube, keine Kerze, keine Stockfotos von Händen, keine Sonnenuntergänge als Symbol, kein Video." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 72, 104, 152 ], "sektion": "clamp(80px, 10vw, 152px)", "dichte": "luftig", "hinweis": "Viel Ruhe um wenige Elemente: Schritte nach Sterbeort mit 24 px Abstand, Knöpfe mindestens 48 px hoch, nichts gedrängt." }, "raster": { "spalten": 12, "rand": "clamp(20px, 5vw, 64px)", "spalt": "clamp(20px, 3vw, 40px)", "max_breite": "1200px", "hinweis": "Hero 5/7 (Text/Foto), Abschiedsräume 4/8 (Demo geriffeltes-glas). Zwei Türen gleich breit nebeneinander, mobil untereinander. Text auf 62ch." }, "form": { "radius_klein": "2px", "radius_gross": "4px", "pille": false, "linie": "1px #D3CCC0", "schatten": "keiner", "hinweis": "Fast eckig und still. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie) oder Moosgrün gefüllt; keine Pille." }, "template": true, "template_variante": false, "starter": false }, { "id": "eventlocation-hochzeit", "name": "Eventlocation: ein Tag, der in die Nacht geht", "branche": "Eventlocation / Hochzeitslocation / Gutshof / Tagungsort (auch Eventcatering)", "kurz": "Verkauft wird ein Tag, nicht eine Nacht: Wunschdatum, Anlass und Gästezahl stehen direkt unter dem Hero, freie Termine sind ehrlich sichtbar, Räume haben Kapazitäten je Bestuhlung, Pakete einen ab-Preis mit Bezug. Festlich über Licht, Raum und Typografie statt über Herzen und Glitzer: eine schmale Art-déco-Didone für große Wörter und Daten, eine breitenvariable Grotesk für Tabellen und Formulare, Mohnrot als einziger Signalton. Signatur: Die Seite färbt sich im Kapitel „Ein Tag bei uns“ vom Kalklicht des Mittags über das Sandsteinlicht des Abends bis in die Nacht. Abgrenzung zu boutique-hotel-gastgeber: kein Zeitraum-Kalender, keine Zimmer zuerst, keine Bild-Diashow als Signatur; Übernachtung ist Beiwerk zum Fest.", "stimmung": [ "festlich", "emotional", "großzügig", "klar" ], "stimmung_tags": [ "warm", "filmisch", "luxuriös" ], "begriffe": [ "Eventlocation", "Hochzeitslocation", "Location", "Festsaal", "Feierlocation", "Gutshof", "Landgut", "Schloss", "Scheune", "Tagungsort", "Tagungslocation", "Seminarhaus", "Firmenfeier", "Hochzeit feiern", "Eventcatering", "Caterer", "Partyservice" ], "ziele": [ "anfrage", "buchung" ], "varianten": [ { "name": "Eventcatering / Caterer (ohne eigene Location)", "hinweis": "Das Produkt ist das Essen an einem Tag an einem fremden Ort." } ], "schrift": { "headline": "imbue", "text": "archivo", "akzent": "", "groessen": "h1 Imbue clamp(3rem, 1.6rem + 6vw, 7.5rem), wght 300, opsz 100, Laufweite -0.01em, Zeilenhöhe 0.95, gemischt gesetzt; Raumnamen, Kapitel und große Daten („Samstag, 12. Juni“) in Imbue ab 2rem, wght 400, opsz an die Größe gekoppelt; nie unter 2rem. Text Archivo wdth 100, wght 400, 1.0625rem (17 px), Zeilenhöhe 1.6, höchstens 64ch; Tabellen und Kalender Archivo wdth 87, Tabellenziffern; Labels und Rubriken Archivo wdth 112, wght 600, 0.8125rem, Versal, +0.08em; Knöpfe Archivo wdth 100, wght 600, 1rem.", "techniken": [ "optische-groessen-opsz", "headline-laufweite-zeilenabstand", "tabellenziffern", "fluide-typo-clamp-cqi", "lesesatz-text-wrap" ], "alternative": "Text switzer (ITF) wie in der Paarung deco-bar – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F5F0E6", "label": "Grund Kalk (Tag)" }, { "token": "text", "hex": "#1D1A17", "label": "Text auf Kalk (15 : 1) und auf Sandstein (12,8 : 1)" }, { "token": "sandstein", "hex": "#E9DCC8", "label": "Sandstein (Abend-Kapitel, Flächen, Tabellenkopf)" }, { "token": "nachtblau", "hex": "#15171F", "label": "Nachtblau (Nacht-Kapitel, Footer); Text #F2ECE2 (15 : 1)" }, { "token": "signal", "hex": "#C43B2B", "label": "Signal Mohnrot: Anfragen, Datum wählen, frei (Weiß darauf 5,2 : 1; als Fläche auf Kalk 4,6 : 1, auf Sandstein 3,9 : 1, auf Nachtblau 3,4 : 1)" }, { "token": "linie", "hex": "#8C6A3C", "label": "Messing: Doppelkontur und Linien auf Kalk (4,4 : 1); auf Nachtblau #C9A66B (7,8 : 1)" }, { "token": "text-2", "hex": "#5C574E", "label": "Sekundärtext, Bildnachweis (6,3 : 1 auf Kalk)" }, { "token": "linie-2", "hex": "#D8CFC0", "label": "Linien auf Kalk" } ], "signal": "signal", "farbprinzip": "Drei Lichtstimmungen statt einer Markenfläche: Kalk für den Tag (Grund der ganzen Seite), Sandstein für den Abend, Nachtblau für die Nacht. Im Kapitel „Ein Tag bei uns“ färbt sich die Seite an den Kapitelgrenzen um; Räume, Preise, Kalender und Anfrage stehen immer auf Kalk. Mohnrot ist der einzige Signalton (Anfragen, Datum wählen, freie Termine) und funktioniert auf allen drei Gründen. Messing nur als Doppelkontur der Nebenknöpfe und als Linie. Kein Rosé, kein Glitzer-Gold, keine Verläufe, keine Bokeh-Flächen.", "stil": "token-studio-signatur", "stil_ui": "", "ease": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer": { "xs": 250, "s": 400, "button": 475, "m": 525, "l": 725 }, "bewegung_regel": "Bewegt wird, was den Zustand wechselt: Kapitel färbt sich um, Kalender springt einen Monat weiter, Raum wechselt, Menü öffnet. Keine Einblendungen beim Scrollen, kein Autoplay, keine Diashow. Der Farbwechsel kommt an der Kapitelgrenze in 725 ms, der Text schaltet am Kipppunkt statt mitzumischen. Bei prefers-reduced-motion wechseln Farben in 200 ms, alles andere ohne Weg.", "hero": [ "foto-hero-mit-leiste" ], "hero_variante": [ "cinematic-video-hero" ], "hero_varianten": { "foto-hero-mit-leiste": "leiste" }, "hero_beschreibung": "Foto-Hero als Standard: echtes Foto der Location im späten Licht (Hof, Scheune, Garten, Saal), Gäste nur mit Einwilligung und nicht als Gesicht im Mittelpunkt. Ein Satz mit Ort und Anlass in Imbue, darunter die Anfrage-Leiste mit Wunschdatum (oder Monat und „flexibel“), Anlass und Gästezahl und dem Knopf „Termin anfragen“; daneben Telefon und „Besichtigung vereinbaren“ als Nebenweg. Video nur als hero_variante, wenn eigenes, hochwertiges Material da ist (stumm, Poster, Pause-Knopf).", "hero_aufbau": { "raster": "Foto randlos über die volle Breite; Satz unten links über Spalte 1 bis 7; die Anfrage-Leiste über 10 Spalten an der Unterkante.", "bild": "Echtes Foto der Location im späten Licht, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante.", "h1": "clamp(3rem, 1.6rem + 6vw, 7.5rem), Imbue 300, gemischt gesetzt, unten links.", "handlung": "Anfrage-Leiste (Wunschdatum oder Monat mit „flexibel“, Anlass, Gästezahl) mit „Termin anfragen“ (Mohnrot); daneben „Besichtigung vereinbaren“ und Telefon.", "zusatz": "Label in Archivo wdth 112 Versal (Ort, Anlass) über dem Satz." }, "sektionen": [ { "zweck": "Wunschtermin, Anlass, Gästezahl (Leiste direkt unter dem Hero; Datum oder Monat mit „flexibel“, Anlass als Auswahl, Erwachsene und Kinder; übergibt alles an die Anfrage)", "muster": [ "termin-verfuegbarkeit-anfrage", "animiertes-select" ], "varianten": {} }, { "zweck": "Ein Tag bei uns (drei bis vier Kapitel vom Ankommen und der Trauung im Garten über den Empfang im Hof und das Essen in der Scheune bis zur Feier in der Nacht; Bild steht, Text erklärt; die Seite färbt sich an jeder Kapitelgrenze um)", "muster": [ "theme-farbwechsel-scroll", "split-screen-sticky-seiten" ], "varianten": { "split-screen-sticky-seiten": "bild", "theme-farbwechsel-scroll": "tageslauf" } }, { "zweck": "Räume und Kapazitäten (je Raum Foto, Fläche, Plätze je Bestuhlung: Tafel, Rundtische, Reihe, parlamentarisch, Stehempfang; Mindestgäste, Raummiete nach Saison; Plan als SVG mit Text; ein Raum zur Zeit, Reiter nennen den Raum; Filter nach Gästezahl)", "muster": [ "raumkapazitaeten-bestuhlung", "css-native-karussell" ], "varianten": { "css-native-karussell": "buehne" } }, { "zweck": "Anlässe, Pakete und Preise (Reiter Hochzeit, Feier, Tagung; je Reiter höchstens vier Pakete mit ab-Preis pro Person, Stunden, Mindestgästen und Liste, was enthalten ist und was nicht; der Umschalter wechselt Saison oder Wochentag statt Monat und Jahr)", "muster": [ "tabs-pfeiltasten-focusgroup", "vergleichstabelle-sticky" ], "varianten": { "tabs-pfeiltasten-focusgroup": "auto", "vergleichstabelle-sticky": "pakete" } }, { "zweck": "Atmosphäre (Galerie nach Jahreszeit und Tageszeit, ab etwa acht Bildern als Wand, Bildnachweis der Fotografin oder des Fotografen; Vollbild mit Raumname)", "muster": [ "masonry-grid-lanes-galerie", "galerie-shared-element-vollbild" ], "varianten": { "galerie-shared-element-vollbild": "basis" } }, { "zweck": "Freie Termine (Monatsansicht mit frei, angefragt und vergeben, als Text und Zeichen, nicht nur Farbe; Samstage und Feiertage markiert; ein Klick übernimmt das Datum in die Anfrage; nur mit gepflegtem Kalender)", "muster": [ "termin-verfuegbarkeit-anfrage" ], "varianten": {} }, { "zweck": "Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen)", "muster": [ "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion" ], "varianten": { "mehrschritt-anfrage": "leiste", "formular-fehlerzusammenfassung": "kompakt" } }, { "zweck": "Besichtigung und Probeessen vereinbaren (Termin-Tool erst nach Klick, daneben Telefon und E-Mail)", "muster": [ "termin-buchung-zwei-klick" ], "varianten": { "termin-buchung-zwei-klick": "platzhalter" } }, { "zweck": "Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text)", "muster": [ "karte-zwei-klick", "oeffnungszeiten-status", "firmendaten-strukturiert" ], "varianten": { "karte-zwei-klick": "skizze", "oeffnungszeiten-status": "termin", "firmendaten-strukturiert": "friseur" } }, { "zweck": "Dienstleister-Netzwerk (Catering, Floristik, Fotografie, Musik, Trauredner; sichtbar, wer Pflichtpartner ist und ob eine Provision fließt; Logos nur mit Erlaubnis, ab etwa fünf als Raster, sonst Liste)", "muster": [ "logo-wand-social-proof" ], "varianten": { "logo-wand-social-proof": "raster" } }, { "zweck": "Stimmen (Google und Hochzeitsportal je mit eigenem Schnitt, Anzahl, Stand und Echtheitshinweis; Stimmen von Paaren nur mit Freigabe)", "muster": [ "bewertungsprofil-mit-echtheitshinweis" ], "varianten": { "bewertungsprofil-mit-echtheitshinweis": "mehrere" } }, { "zweck": "Barrierefreiheit (eigene Seite für die Website; Barrierefreiheit vor Ort steht zusätzlich bei Anfahrt und Räumen)", "muster": [ "barrierefreiheit-seite" ], "varianten": { "barrierefreiheit-seite": "erklaerung" } } ], "bereiche": { "navigation": [ "sticky-shrink-header", "mobile-bottom-navigation" ], "scroll": [ "theme-farbwechsel-scroll" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "animiertes-select", "checkbox-radio-animiert", "einblenden-starting-style" ], "galerie": [ "masonry-grid-lanes-galerie", "galerie-shared-element-vollbild", "css-native-karussell" ], "footer": [ "mega-footer-sitemap" ], "button": [ "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ] }, "varianten_demo": { "fuellung-vom-eintrittspunkt": "basis", "kontur-button-zeichnen": "doppel", "mobile-bottom-navigation": "fab", "bild-zoom-in-maske": "basis", "agentenformular-webmcp": "projekt", "galerie-shared-element-vollbild": "basis", "css-native-karussell": "buehne", "theme-farbwechsel-scroll": "tageslauf" }, "signatur": [ "theme-farbwechsel-scroll" ], "button": [ "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ], "optional": [ "agentenformular-webmcp" ], "nicht_verwenden": [ { "ids": [ "buchungsleiste-datumsbereich" ], "grund": "Anreise und Abreise passen zu Zimmern, nicht zu einem Festtag; hier Wunschdatum mit Ausweichdatum und Gästezahl" }, { "ids": [ "slideshow-innere-gegenparallaxe", "glas-button" ], "grund": "Signatur und Hauptknopf des Hotel-Rezepts; die Eventlocation erzählt über den Farbwechsel vom Tag zur Nacht" }, { "ids": [ "konfetti-erfolg", "like-herz-burst" ], "grund": "Hochzeitskitsch; nach der Anfrage eine ruhige Bestätigung mit Antwortzeit" }, { "ids": [ "kreistext-siegel-rotierend", "text-on-path" ], "grund": "drehende Siegel und Schriftbögen kippen sofort ins Kitschige" }, { "ids": [ "mesh-gradient-shader", "atmosphaere-partikel", "fluessig-marmor-hintergrund" ], "grund": "Bokeh, Glitzer und Schimmer sind das Klischee; Stimmung kommt aus echten Fotos" }, { "ids": [ "marquee-laufband", "rotating-words" ], "grund": "unruhig neben Kalender und Preisen" }, { "ids": [ "zahlen-odometer" ], "grund": "„über 500 Hochzeiten“ hochgezählt wirkt verkäuferisch; Zahlen stehen still oder gar nicht" }, { "ids": [ "smooth-scroll-lenis", "fullpage-snap-slides" ], "grund": "stören Kalender, Tabellen und schnelles Überfliegen" }, { "ids": [ "prozent-zaehler", "logo-aufbau-intro" ], "grund": "Wartezeit vor dem ersten Bild" }, { "ids": [ "cursor-follower-lerp", "magnetische-elemente" ], "grund": "Agentur-Gesten ohne Nutzen" }, { "ids": [ "prompt-hero-eingabefeld" ], "grund": "Anfrage über klare Felder, nicht über einen Chat" }, { "ids": [], "grund": "Herzen, Ringe, Tauben, Rosenblätter, Schnörkel-Script, Pastell-Rosé und Glitzer-Gold – Kitsch; festlich wird es über Licht, Raum und Typografie" }, { "ids": [], "grund": "Stock-Hochzeitsfotos und Bilder anderer Locations – nur eigene Fotos mit Bildnachweis" } ], "ton": { "anrede": "du", "saetze": "Warm und konkret: Plätze, Preise mit Bezug, freie Termine als Wort.", "haltung": "Festlich, aber klar. Paare im Plural (ihr, euch); auf der Unterseite für Tagungen und Firmenfeiern Sie.", "beispiele": [ "Euer Fest im Gutshof: bis 120 Gäste, Trauung im Garten.", "Freitag, 3. Oktober: angefragt, Option bis [Datum]." ], "nicht": "„Der schönste Tag eures Lebens“, „Traumhochzeit“, „märchenhaft“, „über 500 Hochzeiten“ hochgezählt." }, "bildsprache": { "licht": "Spätes Licht, goldene Stunde; am Abend echtes Kerzen- und Lichterkettenlicht.", "ausschnitt": "Raum leer und gedeckt, Hof in der Totale, Details wie Tafel und Blumen.", "personen": "Gäste und Paare nur mit Einwilligung, nicht als Gesicht im Mittelpunkt; Fotograf:in am Bild genannt.", "formate": [ "3:2", "4:5", "16:9" ], "nicht": "Keine Herzen, kein Glitzer, keine Ringe-Stockfotos, keine Bilder anderer Häuser, kein Video ohne eigenes Material." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 56, 88, 136, 200 ], "sektion": "clamp(88px, 12vw, 192px)", "dichte": "luftig", "hinweis": "Festlich über Raum: große Sprünge zwischen Kapiteln, Raumtabellen und Kalender dagegen kompakt (Zeilen 12 px)." }, "raster": { "spalten": 12, "rand": "clamp(20px, 5vw, 72px)", "spalt": "clamp(16px, 2.4vw, 32px)", "max_breite": "1440px", "hinweis": "Hero randlos, Räume 7/5 (Bild/Tabelle). „Ein Tag bei uns“ in drei bis vier Kapiteln über volle Breite; Räume, Preise, Kalender und Anfrage immer auf Kalk." }, "form": { "radius_klein": "2px", "radius_gross": "0", "pille": false, "linie": "1px #8C6A3C als Messing-Doppelkontur der Nebenwege; Tabellen 1px #D8CFC0", "schatten": "keiner", "hinweis": "Art déco statt weich: eckige Bilder, Nebenwege mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel), Mohnrot mit Füllung vom Eintrittspunkt nur für die Haupthandlung." }, "template": true, "template_variante": false, "starter": false }, { "id": "weingut-hofladen-herkunft", "name": "Weingut und Hofladen: Herkunft zuerst", "branche": "Weingut / Winzerhof / Hofladen / Manufaktur aus der Landwirtschaft / Brennerei (optional mit Ferienzimmern)", "kurz": "Herkunft ist das Produkt: Jeder Wein hängt an einer Lage, einem Boden und einem Jahrgang, und genau so ist die Seite gebaut. Sortiment mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter in einer Mono wie auf dem Etikett, Pflichtangaben direkt am Wein, Zustellung nur mit Altersprüfung. Weinproben und Hoffeste als Termine, der Hofladen mit echtem Öffnungsstatus, Ferienzimmer optional. Eine klassische Garamond für Lagen und Geschichten, DM Mono für alle Zahlen, Kalkstein und Schiefer als Grund, Buntsandstein-Rot nur für Kaufen. Signatur: ein Foto der Lage, über das man die Sonne ziehen kann, um zu sehen, wann der Hang Licht bekommt. Abgrenzung zu d2c-produkt-zuerst (Produkt-Bento, Warenkorb-Flug) und gastro-warm-appetitlich (Karte, Reservieren, Live-Uhr): Hier führen Lage und Jahrgang, nicht das Produktfoto und nicht die Speisekarte.", "stimmung": [ "bodenständig", "klar", "warm", "handwerklich" ], "stimmung_tags": [ "warm", "ruhig" ], "begriffe": [ "Weingut", "Winzer", "Winzerin", "Winzerhof", "Weinbau", "Vinothek", "Weinprobe", "Hoffest", "Sektkellerei", "Hofladen mit Weinbau", "Direktvermarkter", "Bauernhof", "Obsthof", "Brennerei", "Destillerie", "Edelbrand", "Obstbrennerei", "Ferien auf dem Weingut" ], "ziele": [ "kauf", "buchung", "info" ], "varianten": [ { "name": "Brennerei / Edelbrand-Manufaktur", "hinweis": "Spirituosen nicht an unter 18-Jährige: Zustellung mit Ident-Prüfung ab 18, auch bei gemischten Kartons mit Wein." }, { "name": "Hofladen ohne Onlineshop", "hinweis": "Hauptziel ist der Besuch: Öffnungsstatus und „Was es gerade gibt“ stehen ganz oben." } ], "schrift": { "headline": "eb-garamond", "text": "eb-garamond", "akzent": "dm-mono", "groessen": "h1 EB Garamond clamp(2.75rem, 1.6rem + 5vw, 6rem), wght 400, Laufweite -0.015em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.5rem + 2vw, 3.25rem), wght 400; Lagennamen und Jahrgangstitel in EB Garamond Italic. Fließtext EB Garamond 1.25rem (20 px, wegen der kleinen x-Höhe), wght 400, Zeilenhöhe 1.55, höchstens 66ch, Mediävalziffern (onum) nur im Fließtext. DM Mono für alle Zahlen und Etiketten: Preis 1rem wght 500, Grundpreis, Füllmenge, % vol, Jahrgang, Analysewerte 0.875rem wght 400; Labels 0.75rem, Versal, +0.1em; Knöpfe DM Mono 500, 0.875rem, Versal, +0.08em.", "techniken": [ "lesesatz-text-wrap", "headline-laufweite-zeilenabstand", "mono-labels-versal", "tabellenziffern", "fluide-typo-clamp-cqi" ], "alternative": "Headline gambarino (ITF) oder erode (ITF) für Text – nur für Eigenprojekte, nicht für Templates." }, "farben": [ { "token": "grund", "hex": "#F1ECE2", "label": "Grund Kalkstein" }, { "token": "text", "hex": "#22211F", "label": "Text (13,7 : 1)" }, { "token": "flaeche", "hex": "#E6DCCB", "label": "Fläche Löss: Kaufbox, Steckbrief, Hofladen-Zeiten (Text 11,9 : 1)" }, { "token": "schiefer", "hex": "#2F3236", "label": "Schiefer: dunkle Bänder, Lagen-Kapitel, Footer (Kalk darauf 10,9 : 1)" }, { "token": "signal", "hex": "#8A3A2B", "label": "Signal Buntsandstein: In den Warenkorb, Kaufen, Ticket (Weiß darauf 7,7 : 1; als Fläche auf Kalk 6,6 : 1, auf Löss 5,7 : 1); auf Schiefer stattdessen Kalk-Knopf mit Schiefer-Schrift" }, { "token": "grund-2", "hex": "#5A564F", "label": "Sekundärtext, Grundpreis, Analysewerte (6,2 : 1 auf Kalk)" }, { "token": "linie", "hex": "#D8CFC0", "label": "Linien, Etikett-Rahmen" } ], "signal": "signal", "farbprinzip": "Grund und Flächen kommen aus dem Boden der Hauptlage, nicht aus dem Wein. Beispiel hier: Kalkstein hell als Grund, Löss als Fläche für Kaufbox und Steckbrief, Schiefer für dunkle Bänder, das Lagen-Kapitel und den Footer. Signal Buntsandstein-Rot nur für In den Warenkorb, Kaufen und Tickets; auf Schiefer wird der Kauf-Knopf kalkhell mit Schiefer-Schrift. Je nach Lage austauschbar (Schiefer-Blau, Löss-Ocker, Granit-Grau), immer mit 4,5 : 1 geprüft. Weinfarben (Rot, Gold, Rosé) nur aus den Fotos, nie als Fläche. Kein Bordeaux-Verlauf, kein Rebenblatt-Grün als Marke, keine Holzmaserung.", "stil": "token-luxus-weich", "stil_ui": "token-toggle-asymmetrisch", "ease": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer": { "s": 500, "m": 1200, "l": 1400, "xl": 2200 }, "bewegung_regel": "Nur Bilder bewegen sich, und nur einmal: Lagenfotos öffnen sich per Maske, das Hero-Foto skaliert einmal zurück. Text, Preise, Steckbriefe und Formulare stehen sofort. Kein Dauerzoom, keine Diashow mit Autoplay. Das Sonnenlicht der Signatur bewegt sich nur mit dem Zeiger oder einem Regler „Tageszeit“, nie von selbst. Bei prefers-reduced-motion sind Bilder sofort da, das Licht steht fest auf Nachmittag, der Regler bleibt ohne Übergang bedienbar.", "hero": [ "foto-hero" ], "hero_variante": [], "hero_varianten": { "foto-hero": "bildunterschrift" }, "hero_beschreibung": "Foto-Hero: die wichtigste Lage oder der Hof in echtem Licht, mit Ort und Lage als Bildunterschrift in DM Mono. Ein Satz in EB Garamond über Herkunft, keine Werbezeile. Zwei Wege: „Weine entdecken“ (Shop) und „Weinprobe & Hoffest“ (Termine); im Kopf der Hofladen-Status aus echten Zeiten. Kein Video ohne eigenes Material, keine Weinglas- oder Trauben-Stockfotos und kein Altersabfrage-Fenster vor dem ersten Bild.", "hero_aufbau": { "raster": "12 Spalten: Foto der Lage randlos oder über 8 Spalten, Satz zur Herkunft über Spalte 1 bis 6 darunter oder daneben.", "bild": "Echtes Foto der Hauptlage oder des Hofs, 3:2 Desktop, 4:5 mobil; Ort und Lage als Bildunterschrift in DM Mono.", "h1": "clamp(2.75rem, 1.6rem + 5vw, 6rem), EB Garamond 400, links unter dem Bild.", "handlung": "„Weine entdecken“ (Buntsandstein gefüllt) und „Weinprobe & Hoffest“ (Kontur mit Eckklammern).", "zusatz": "Hofladen-Status aus echten Zeiten im Kopf; Bildunterschrift Ort · Lage in DM Mono 0.75rem Versal." }, "sektionen": [ { "zweck": "Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)", "muster": [ "facettenfilter-ergebnisliste", "css-native-karussell", "karussell-steuerung" ], "varianten": { "facettenfilter-ergebnisliste": "leiste", "css-native-karussell": "produktreihe", "karussell-steuerung": "fortschritt" } }, { "zweck": "Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)", "muster": [ "wein-steckbrief-pflichtangaben", "produkt-kaufbox-varianten", "galerie-shared-element-vollbild", "eu-gewaehrleistungshinweis" ], "varianten": { "produkt-kaufbox-varianten": "seite", "galerie-shared-element-vollbild": "produkt", "eu-gewaehrleistungshinweis": "kaufbox" } }, { "zweck": "Warenkorb und Versand (Drawer mit Grundpreis und MwSt.; Versandkosten je Karton, Lieferzeit, Zustellung nur mit Alters- und Identitätsprüfung; Abholung im Hofladen als Versandart)", "muster": [ "warenkorb-drawer" ], "varianten": { "warenkorb-drawer": "drawer" } }, { "zweck": "Herkunft: Lagen und Boden (Lagenfoto, über das man die Sonne zieht; je Lage Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und die Weine daraus; Übersichtskarte als eigene Zeichnung ohne Drittanbieter)", "muster": [ "tiefenkarten-relighting", "lagen-steckbrief-karte", "slideshow-innere-gegenparallaxe" ], "varianten": { "tiefenkarten-relighting": "sonne", "slideshow-innere-gegenparallaxe": "ueberblenden" } }, { "zweck": "Der Jahrgang (Lesebericht des aktuellen Jahrgangs: Wetter, Lese, Stil, Menge; einmal im Jahr als Magazinbeitrag, ältere Jahrgänge als Archiv)", "muster": [ "editorial-magazin-layout" ], "varianten": { "editorial-magazin-layout": "magazin" } }, { "zweck": "Weinproben und Hoffeste (Datum, Uhrzeit, Dauer, Preis pro Person, freie Plätze, Buchung; als Liste nach Monat, erst ab etwa acht Terminen im Monat als Kalender; Tickets über das Ticketsystem erst nach Klick; Gruppen auf Anfrage)", "muster": [ "programm-kalender", "termin-buchung-zwei-klick" ], "varianten": { "programm-kalender": "programm", "termin-buchung-zwei-klick": "linkout" } }, { "zweck": "Hofladen und Vinothek (Öffnungszeiten mit Status, Sonderzeiten zu Lese, Hoffest und Feiertagen; was es gibt, eigene Erzeugnisse getrennt von Zugekauftem; Probierausschank; Abholung von Online-Bestellungen)", "muster": [ "oeffnungszeiten-status" ], "varianten": { "oeffnungszeiten-status": "karte" } }, { "zweck": "Familie und Arbeit im Weinberg (wer hier arbeitet, als Satz mit kleinen Porträts; Arbeit im Jahr; Bio- oder Öko-Angaben nur mit Kontrollstellen-Nummer)", "muster": [ "team-ueber-mich-layout", "logo-wand-social-proof" ], "varianten": { "team-ueber-mich-layout": "statement", "logo-wand-social-proof": "siegel-nachweis" } }, { "zweck": "Ferienzimmer (nur, wenn es sie gibt: Zimmer mit Lagennamen, Preis pro Nacht inkl. MwSt., Anfrage; Online-Buchung nur mit eigener Booking-Engine)", "muster": [ "css-native-karussell", "kontakt-anfrage-formular" ], "varianten": { "css-native-karussell": "peek" } }, { "zweck": "Anfahrt und Kontakt (Adresse als Text, Parken, Bus und Wanderweg durch die Lagen, Karte per 2-Klick)", "muster": [ "karte-zwei-klick", "firmendaten-strukturiert" ], "varianten": { "karte-zwei-klick": "bild", "firmendaten-strukturiert": "friseur" } }, { "zweck": "Weinbrief (wenige Briefe im Jahr, an die Saison gebunden: Jahrgangsvorstellung, Hoffest, Lese; im dunklen Footer neben Öffnungszeiten)", "muster": [ "footer-newsletter-mit-persoenlichkeit" ], "varianten": { "footer-newsletter-mit-persoenlichkeit": "saison" } }, { "zweck": "Vertrag widerrufen, Weinabo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Erklärung nach BFSG, wenn der Shop an Verbraucher verkauft und das Weingut kein Kleinstunternehmen ist)", "muster": [ "widerruf-und-kuendigung-schaltflaeche", "barrierefreiheit-seite" ], "varianten": { "widerruf-und-kuendigung-schaltflaeche": "richtig", "barrierefreiheit-seite": "bfsg" } } ], "bereiche": { "navigation": [ "native-popover-dropdowns", "sticky-shrink-header" ], "hover": [ "bild-zoom-in-maske" ], "mikro": [ "einblenden-starting-style", "animiertes-select", "checkbox-radio-animiert" ], "galerie": [ "css-native-karussell", "galerie-shared-element-vollbild" ], "footer": [ "footer-newsletter-mit-persoenlichkeit" ], "button": [ "button-zustaende", "kontur-button-zeichnen" ] }, "varianten_demo": { "kontur-button-zeichnen": "ecken", "footer-newsletter-mit-persoenlichkeit": "saison", "bild-zoom-in-maske": "basis", "gap-decorations-raster": "kenndaten", "css-native-karussell": "produktreihe", "galerie-shared-element-vollbild": "produkt" }, "signatur": [ "tiefenkarten-relighting" ], "button": [ "button-zustaende", "kontur-button-zeichnen" ], "optional": [ "gap-decorations-raster", "sektionskante-shape" ], "nicht_verwenden": [ { "ids": [ "in-den-warenkorb-flug", "like-herz-burst" ], "grund": "Signatur von d2c-produkt-zuerst; hier bestätigt der Drawer ruhig, was im Korb liegt" }, { "ids": [ "live-uhr-und-standort" ], "grund": "Signatur von gastro-warm-appetitlich; der Hofladen zeigt den Status aus echten Zeiten" }, { "ids": [ "bento-grid-interaktiv" ], "grund": "das Produkt-Bento gehört zu d2c; Weine stehen als Liste nach Lage und Jahrgang" }, { "ids": [ "webgl-bildverzerrung", "svg-filter-verzerrung" ], "grund": "verfälschen Lagen- und Flaschenfotos" }, { "ids": [ "smooth-scroll-lenis" ], "grund": "stört Filter, Drawer und Checkout" }, { "ids": [ "konfetti-erfolg" ], "grund": "nach dem Kauf eine ruhige Bestätigung mit Lieferzeit" }, { "ids": [ "zahlen-odometer" ], "grund": "„seit 1648“ wird nicht hochgezählt" }, { "ids": [ "marquee-laufband" ], "grund": "unruhig neben Preisen und Pflichtangaben" }, { "ids": [], "grund": "Altersabfrage als Sperrbildschirm vor dem ersten Inhalt – vom Jugendschutzgesetz nicht verlangt, schützt nicht wirksam und verzögert den ersten Bildschirm; geprüft wird bei der Übergabe" }, { "ids": [], "grund": "Weinglas-, Korken- und Trauben-Stockfotos, Holzmaserung, Rebenranken als Ornament – Klischee; eigene Fotos von Lage, Keller, Hof und Menschen" }, { "ids": [], "grund": "„bekömmlich“, „gesund“, „wohltuend“ – gesundheitsbezogene Angaben sind bei Getränken über 1,2 % vol unzulässig" }, { "ids": [], "grund": "„nachhaltig“, „naturnah“, „klimaneutral“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)" } ], "ton": { "anrede": "Sie", "saetze": "Klar und erzählend in der Herkunft, nüchtern in den Zahlen (Jahrgang, % vol, Preis je Liter).", "haltung": "Bodenständig und warm. Herkunft führt, nicht Werbung. Ein junges Weingut darf duzen, dann durchgehend.", "beispiele": [ "Riesling von der Lage [Name], Schiefer, Südhang. 2023.", "Hoffest am [Datum]: Weinprobe ab 14 Uhr im Hof." ], "nicht": "„edler Tropfen“, „Genuss pur“, gesundheitsbezogene Angaben, „Bio“ ohne Kontrollstellen-Nummer." }, "bildsprache": { "licht": "Echtes Licht in der Lage, früher Morgen oder Abend; Hof und Keller im Arbeitslicht.", "ausschnitt": "Hang in der Totale, Boden und Rebe im Detail, Flasche als ruhiger Freisteller.", "personen": "Ja: Winzer:in und Team bei der Arbeit; Gäste bei Proben nur mit Einwilligung.", "formate": [ "3:2", "4:5", "1:1" ], "nicht": "Keine Weinglas- oder Trauben-Stockfotos, keine Gesundheitsversprechen, keine Ansprache Jugendlicher, kein Altersabfrage-Fenster vor dem ersten Bild." }, "raum": { "basis_px": 8, "skala_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 144 ], "sektion": "clamp(72px, 9vw, 144px)", "dichte": "mittel", "hinweis": "Wie ein Etikett: Weinzeilen mit Jahrgang, Füllmenge, Preis und Grundpreis eng (4 bis 8 px), Lagen-Kapitel mit viel Luft." }, "raster": { "spalten": 12, "rand": "clamp(16px, 4vw, 56px)", "spalt": "clamp(16px, 2vw, 32px)", "max_breite": "1320px", "hinweis": "Sortiment als Liste oder 3er-Raster, Lage als Filter. Lagen-Kapitel 7/5 (Foto/Steckbrief), Kaufbox auf Löss." }, "form": { "radius_klein": "0", "radius_gross": "0", "pille": false, "linie": "1px #D8CFC0 als Etikett-Rahmen um Kaufbox und Steckbrief", "schatten": "keiner", "hinweis": "Eckig wie ein Etikett. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Buntsandstein gefüllt nur für Kaufen und Tickets." }, "template": true, "template_variante": false, "starter": false } ], "muster": { "agentenformular-webmcp": { "name": "Agentenformular mit WebMCP", "slug": "sektionen", "prio": "F", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "präzise", "experimentell" ], "technik": [ "css", "js" ], "v": { "termin": "Wartungstermin", "projekt": "Projektanfrage" }, "wann_nicht": "Für Zahlungen, Verträge und sensible Daten (Gesundheit, Ausweise) kein automatisches Absenden und keine Werkzeuge ohne Bestätigung." }, "akkordeon-hoehe-auto": { "name": "Akkordeon mit Höhenanimation auf auto", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 20, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": { "basis": "FAQ Fahrschule", "faq": "FAQ", "leistungen": "Leistungsliste" }, "wann_nicht": "Bei sehr langem Inhalt wirkt die Animation zäh: Dauer begrenzen oder ganz weglassen." }, "akkordeon-panels": { "name": "Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie", "slug": "galerien-slider", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "luxuriös" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Bei mehr als etwa 6 bis 8 Einträgen." }, "animiertes-select": { "name": "Animiertes Auswahlmenü (anpassbares select)", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 8, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei sehr langen Listen." }, "ascii-dither-pixel-stil": { "name": "ASCII-, Dither- und Pixel-Stil (Render und Hover)", "slug": "3d-webgl", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "verspielt", "laut", "experimentell" ], "technik": [ "css", "js", "webgl", "canvas" ], "v": { "szene": "3D-Szene", "video": "Video" }, "wann_nicht": "Wenn ein Produkt fotorealistisch gezeigt werden muss." }, "barrierefreiheit-seite": { "name": "Seite „Barrierefreiheit“ als Vorlage", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 19, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": { "erklaerung": "Erklärung", "bfsg": "Informationen nach BFSG" }, "wann_nicht": "Nie mit erfundenem Stand („vollständig barrierefrei“), der nicht geprüft ist." }, "bento-grid-interaktiv": { "name": "Bento-Grid mit lebenden Zellen", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 4, "allgemein": true, "stimmung": [ "ruhig", "präzise", "verspielt" ], "technik": [ "css", "gsap", "canvas" ], "v": {}, "wann_nicht": "Bei Inhalten mit linearer Abfolge oder Tiefe (Prozess, Geschichte)." }, "bewegung-pausieren-schalter": { "name": "Schalter „Bewegung reduzieren“ mit Pause-Knöpfen", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn die Seite gar keine selbst startende Bewegung hat: Dann genügt prefers-reduced-motion, ein Schalter ohne Wirkung verwirrt." }, "bewertungen-verteilung": { "name": "Bewertungen mit Sternverteilung", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "seitlich": "Verteilung seitlich", "band": "Verteilung als Band" }, "wann_nicht": "Bei fünf oder weniger Bewertungen: dann ohne Verteilung, nur die Stimmen zeigen." }, "bewertungsprofil-mit-echtheitshinweis": { "name": "Plattform-Bewertungen mit Echtheitshinweis", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 12, "allgemein": false, "stimmung": [ "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "band": "Band unter dem Hero", "pille": "Kopfzeilen-Pille", "mehrere": "Mehrere Plattformen" }, "wann_nicht": "Wenn der Betrieb eigene Bewertungen sammelt und prüft (nach Aufenthalt, Kauf oder Termin): dann bewertungen-verteilung mit Filter und Verteilung." }, "bild-hotspots": { "name": "Bild mit Markierungspunkten", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "andere" ], "v": { "shop": "Shop the Look", "bauteil": "Bauteile", "zimmer": "Zimmerausstattung" }, "wann_nicht": "Wenn die Information wichtig ist und nur im Punkt stünde." }, "bild-scheiben-tiefe": { "name": "Bild-Scheiben in der Tiefe", "slug": "hero-layouts", "prio": "C", "demo": true, "rezepte": 0, "allgemein": true, "stimmung": [ "ruhig", "präzise", "filmisch" ], "technik": [ "css", "js" ], "v": { "senkrecht": "Senkrecht", "waagerecht": "Waagerecht", "rechtecke": "Rechtecke" }, "wann_nicht": "Werke von Fotograf:innen (verändert die Komposition fremder Bilder)." }, "bild-zoom-in-maske": { "name": "Bild-Zoom in der Maske", "slug": "hover", "prio": "A", "demo": true, "rezepte": 15, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös", "filmisch" ], "technik": [ "css", "gsap" ], "v": { "basis": "Basis", "gegen": "Rahmen schrumpft", "richtung": "Richtungsabhängiger Clip" }, "wann_nicht": "Bei Logos oder Illustrationen, die bis an den Rand gehen: Der Zoom schneidet sie an." }, "bildsequenz-video-scrub": { "name": "Bildsequenz-/Video-Scrub", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "luxuriös", "filmisch" ], "technik": [ "js", "gsap", "canvas" ], "v": {}, "wann_nicht": "Wenn die Zielgruppe oft mobil ohne WLAN unterwegs ist." }, "blueprint-raster-sichtbar": { "name": "Sichtbares Raster (Swiss/Blueprint-Linien)", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 1, "allgemein": true, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "canvas" ], "v": {}, "wann_nicht": "Bei warmen, emotionalen Marken (Kinder, Wellness, Food)." }, "broken-grid-asymmetrisch": { "name": "Gebrochenes / asymmetrisches Raster", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 1, "allgemein": true, "stimmung": [ "editorial", "luxuriös", "filmisch", "laut" ], "technik": [ "css", "gsap", "lenis" ], "v": {}, "wann_nicht": "Komplexe Informationsseiten, Formulare und Shops mit vielen Produkten." }, "buchungsleiste-datumsbereich": { "name": "Buchungsleiste mit Datumsbereich", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik": [ "css", "js" ], "v": { "leiste": "Leiste unter dem Hero", "zimmer": "Buchungskarte auf" }, "wann_nicht": "Wenn die Booking-Engine ohne URL-Parameter arbeitet und alles im eigenen Widget abfragt: dann reicht ein klarer Knopf „Zimmer buchen“." }, "button-gruppe-expressiv": { "name": "Button-Gruppe expressiv (Toggle, Auswahl, Split)", "slug": "buttons", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js", "andere" ], "v": { "toggle": "Toggle-Gruppe", "einzeln": "Einfachauswahl", "split": "Split-Button" }, "wann_nicht": "Mehr als fünf Optionen (dann Auswahlliste oder Filter-Schublade)." }, "button-zustaende": { "name": "Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 9, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js", "canvas", "andere" ], "v": {}, "wann_nicht": "Bei Navigation, dort gibt der Seitenwechsel das Feedback." }, "case-study-geruest": { "name": "Case-Study-Gerüst auf Award-Niveau", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "editorial", "präzise", "filmisch" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Bei kleinen Projekten ohne Geschichte." }, "checkbox-radio-animiert": { "name": "Animierte Checkbox und Radio", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 13, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "canvas" ], "v": {}, "wann_nicht": "Keine großen Effekte wie Konfetti bei Pflicht-Checkboxen (AGB, Datenschutz)." }, "cinematic-video-hero": { "name": "Kinoreifer Vollbild-Video-Hero", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 8, "allgemein": true, "stimmung": [ "luxuriös", "filmisch", "laut" ], "technik": [ "css", "gsap", "canvas" ], "v": {}, "wann_nicht": "Ohne hochwertiges eigenes Footage, denn Stockvideo wirkt sofort beliebig." }, "clip-path-bild-reveal": { "name": "Bild-Reveal per Clip-Path/Maske", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös", "filmisch" ], "technik": [ "css", "gsap", "canvas" ], "v": {}, "wann_nicht": "Bei Logos, kleinen Vorschaubildern und Icons." }, "clip-path-form-hover": { "name": "Form-Morph-Buttons (Clip-Path)", "slug": "hover", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "laut", "warm" ], "technik": [ "css", "canvas" ], "v": { "basis": "Clip-Path", "gooey": "Gooey" }, "wann_nicht": "In seriösen B2B-Kontexten, in Formularen und bei mehreren Buttons nebeneinander, weil das unruhig wird." }, "clip-path-reveal-seite": { "name": "Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)", "slug": "seitenuebergaenge", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "luxuriös" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Wenn die neue Seite nicht oben beginnt." }, "collage-scrapbook": { "name": "Collage-/Scrapbook-Layout", "slug": "hero-layouts", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Seriöse B2B-Kontexte, informationsdichte Seiten und Projekte ohne eigenes Material." }, "command-palette-und-ki-suche": { "name": "Command-Palette (⌘K) und KI-Suche im Header", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "andere" ], "v": {}, "wann_nicht": "Kleine Seiten mit fünf Links." }, "consent-banner-gestaltet": { "name": "Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn keine einwilligungspflichtigen Dienste laufen, etwa bei cookieloser Statistik ohne Einwilligungspflicht (rechtlich prüfen)." }, "corner-shape-eckenformen": { "name": "Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css" ], "v": { "basis": "Eckensprache", "formen": "Freie Formen" }, "wann_nicht": "Wenn die Form inhaltlich wichtig ist: Safari und Firefox zeigen nur die normale Rundung." }, "css-diagramm-attr": { "name": "Balkendiagramm aus Datenattributen", "slug": "sektionen", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css" ], "v": { "balken": "Balken neben der Zahl", "anteil": "Gestapelter Anteil", "ziel": "Fortschritt zum Ziel" }, "wann_nicht": "Nicht für erfundene oder geschönte Zahlen." }, "css-native-karussell": { "name": "Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)", "slug": "galerien-slider", "prio": "A", "demo": true, "rezepte": 23, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": { "produktreihe": "Produktreihe", "buehne": "Vollbild-Bühne", "peek": "Kartenreihe", "variable-breiten": "Variable Breiten", "fenster": "Fenster" }, "wann_nicht": "Wenn ein nahtloser Endlos-Loop, Trägheit mit eigener Physik oder eine 3D-Anordnung gefragt ist." }, "css-view-reveal-nativ": { "name": "Native CSS-Scroll-Reveals mit view()", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Für mehrstufige Sequenzen mit Callbacks, Physik oder Canvas-Steuerung (dafür GSAP)." }, "datei-upload-ablage": { "name": "Datei-Ablage mit Vorschau und Prüfung", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "foto": "Schadensfoto zur Anfrage", "dokument": "Lebenslauf als PDF", "kompakt-mobil": "Ein Knopf und Kacheln" }, "wann_nicht": "Wenn die Datei nicht wirklich gebraucht wird." }, "daten-scrollytelling": { "name": "Daten-Scrollytelling", "slug": "scroll", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "filmisch" ], "technik": [ "css", "js", "canvas" ], "v": { "wirkung": "Wirkung über die Jahre", "mittel": "Mittelverwendung" }, "wann_nicht": "Auf der Startseite vor dem Spenden- oder Kaufknopf (zwingt durch eine Inszenierung)." }, "dialog-modal-nativ": { "name": "Natives Modal mit ", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "bild": "Bildansicht", "bestaetigung": "Bestätigung", "formular": "Formular" }, "wann_nicht": "Für Inhalte, die man neben der Seite lesen will (dann Seitenpanel ohne Modal oder eigene Seite)." }, "download-center-dokumente": { "name": "Download-Center für technische Dokumente", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "liste": "Bibliothek", "produkt": "Produktseite", "typenschild": "Typenschild" }, "wann_nicht": "Bei unter zehn Dokumenten reicht eine Liste auf der Produktseite." }, "drag-slider-traegheit-loop": { "name": "Drag-Slider mit Trägheit und Endlosschleife", "slug": "galerien-slider", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "verspielt" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Bei weniger als vier Elementen." }, "druck-feedback": { "name": "Druck-Feedback (Press/Tap)", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 10, "allgemein": false, "stimmung": [ "verspielt" ], "technik": [ "css", "andere" ], "v": {}, "wann_nicht": "Nicht bei Textlinks im Fließtext." }, "echo-stacked-type": { "name": "Echo-/Stapel-Typografie", "slug": "schrift-animationen", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "laut", "experimentell" ], "technik": [ "css", "gsap" ], "v": { "basis": "Stapel", "ghost-trails": "Ghost Trails beim Scrollen" }, "wann_nicht": "Bei ruhigen, sachlichen Marken und bei kleinen Schriftgraden." }, "editorial-magazin-layout": { "name": "Editorial-/Magazin-Layout", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 12, "allgemein": true, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik": [ "css", "gsap", "lenis" ], "v": { "magazin": "Magazin", "zeitung": "Zeitung", "kunstbuch": "Kunstbuch", "cover": "Magazin-Cover als Hero" }, "wann_nicht": "Bei Conversion-Landingpages mit nur einem CTA." }, "eigener-videoplayer": { "name": "Eigener Videoplayer", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "filmisch" ], "technik": [ "css", "js", "canvas" ], "v": { "showreel": "Showreel", "kapitel": "Kapitel", "ambilight": "Raumlicht" }, "wann_nicht": "Wenn Videos bei YouTube oder Vimeo liegen und deren Player eingebunden wird (dort 2-Klick-Lösung statt eigener Steuerung)." }, "einblenden-starting-style": { "name": "Ein-/Ausblenden mit @starting-style", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 16, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei Elementen, die per JavaScript sofort gemessen werden müssen: Während der Startphase haben sie noch Versatz, Scale oder Clip." }, "eine-familie-wenig-gewichte": { "name": "Eine Familie, wenige Gewichte (Hierarchie über Größe)", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 6, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei dichten Datenansichten oder Formularen mit vielen gleich großen Elementen, wo Gewicht als Unterscheidung gebraucht wird." }, "einmal-intro-session": { "name": "Intro nur beim ersten Besuch (Session-Gedächtnis)", "slug": "preloader-intro", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "luxuriös" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Bei sehr kurzen Intros unter 800 ms, die niemanden aufhalten." }, "elastisches-raster-lag": { "name": "Elastisches Raster (Spalten mit Scroll-Verzögerung)", "slug": "hero-layouts", "prio": "C", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "luxuriös" ], "technik": [ "css", "gsap", "lenis" ], "v": {}, "wann_nicht": "Ohne Smooth-Scroll-Setup, auf Seiten mit viel Text und wenn die Leistung knapp ist." }, "endlos-scroll-galerie": { "name": "Endlose Scroll-Galerie mit Tiefenparallaxe", "slug": "galerien-slider", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "experimentell" ], "technik": [ "css", "js", "gsap", "lenis" ], "v": {}, "wann_nicht": "Auf SEO-relevanten Inhaltsseiten und überall, wo Nutzer etwas gezielt finden müssen." }, "eu-gewaehrleistungshinweis": { "name": "EU-Hinweis zur Gewährleistung und Garantie-Label", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "kaufbox": "Label-Leiste in", "garantie-label": "Garantie-Label am", "footer-seite": "Footer-Link und Seite" }, "wann_nicht": "Nicht bei reinen Dienstleistungen ohne Warenverkauf." }, "facettenfilter-ergebnisliste": { "name": "Facettenfilter mit Ergebnisliste", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 10, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "seitenleiste": "Seitenleiste", "leiste": "Filterleiste", "schublade": "Schublade" }, "wann_nicht": "Bei unter zehn Einträgen reicht eine einfache Liste oder ein Segment-Umschalter." }, "fahrzeugbestand-feed-teaser": { "name": "Fahrzeugbestand aus dem Börsen-Feed", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "teaser": "Teaser", "liste": "Liste", "portal": "Portal" }, "wann_nicht": "Wenn der Bestand von Hand auf der Website gepflegt werden müsste: Preise und Verfügbarkeit veralten, dann lieber die Variante portal." }, "fehlerseite-leerzustand": { "name": "Fehlerseite und Leerzustände", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "präzise", "verspielt", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "404": "Seite nicht gefunden", "keine-treffer": "Suche ohne Treffer", "leer": "Leerer Kundenbereich" }, "wann_nicht": "Witzige Fehlerseiten ohne Ausweg." }, "finanzierung-pflichtangaben": { "name": "Finanzierung mit Pflichtangaben und Warnhinweis", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "fahrzeugkarte": "Fahrzeugkarte", "kaufbox": "Ratenzeile in der Kaufbox", "rechner": "Ratenrechner" }, "wann_nicht": "Nicht, wenn gar nicht mit Finanzierung geworben wird." }, "firmendaten-strukturiert": { "name": "Firmendaten aus einer Quelle", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 8, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "zahnarzt": "Zahnarztpraxis", "friseur": "Friseursalon", "werkstatt": "Kfz-Werkstatt" }, "wann_nicht": "Nicht als Versprechen für Rankings oder KI-Antworten: Markup ist eine Empfehlung von Google, keine Garantie." }, "flick-karten-stapel": { "name": "Karten-Stapel und Fächer zum Wegschnippen", "slug": "galerien-slider", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Wenn viele Elemente verglichen werden müssen." }, "flip-zustandswechsel": { "name": "Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)", "slug": "galerien-slider", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös", "verspielt" ], "technik": [ "css", "js", "gsap" ], "v": { "flip": "GSAP Flip", "nativ": "Nativ" }, "wann_nicht": "Bei Hunderten Elementen gleichzeitig: Das kostet Leistung, bei View Transitions je ein Schnappschuss pro Name." }, "fluessig-marmor-hintergrund": { "name": "Flüssiger Marmor-Hintergrund", "slug": "glas-material", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "laut", "warm", "experimentell" ], "technik": [ "css", "js", "webgl" ], "v": { "marmor": "Marmor", "tinte": "Tinte", "seifenhaut": "Seifenhaut", "lava": "Lava", "bild": "Bild verflüssigt" }, "wann_nicht": "Nicht in Pastell-Lila, Pink und Cyan als Standard: Das ist dasselbe Klischee wie der Aurora-Hintergrund (Leitfaden C2, Anti-Muster)." }, "fluide-typo-clamp-cqi": { "name": "Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten", "slug": "typo-techniken", "prio": "A", "demo": true, "rezepte": 19, "allgemein": false, "stimmung": [ "editorial", "präzise" ], "technik": [ "css" ], "v": { "basis": "Fließende Schrift", "zustaende-progress": "Fließende Zustände" }, "wann_nicht": "Fließtext mit einem Minimum unter etwa 16 px oder zu steiler Steigung (Zoom, WCAG 1.4.4)." }, "fokus-stil-system": { "name": "Fokus-Stil als Gestaltungssystem", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "ring": "Ring in Markenfarbe", "doppel": "Doppelring", "signal": "Signalfläche" }, "wann_nicht": "Nie ganz weglassen." }, "footer-cta-riesen-wortmarke": { "name": "Abschluss-Footer mit großem CTA und Riesen-Wortmarke", "slug": "footer", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "laut", "warm" ], "technik": [ "css", "js", "gsap", "canvas" ], "v": {}, "wann_nicht": "Bei langen Firmennamen ohne Kurzmarke, die Schrift wird sonst winzig oder bricht um." }, "footer-newsletter-mit-persoenlichkeit": { "name": "Newsletter-Modul mit Persönlichkeit", "slug": "footer", "prio": "B", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "js" ], "v": { "basis": "Shop", "kultur": "Wochenzettel", "saison": "Saisonbrief im" }, "wann_nicht": "Wenn gar kein Newsletter verschickt wird." }, "formular-fehlerzusammenfassung": { "name": "Fehlerzusammenfassung im Formular", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": { "liste": "Liste", "kompakt": "Kompakt über dem Knopf" }, "wann_nicht": "Bei ein bis drei Feldern (Newsletter, Suche) reicht die Meldung am Feld plus Fokus auf das erste fehlerhafte Feld." }, "fortschrittsring": { "name": "Fortschrittsring", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei unbestimmter Wartezeit, dafür gibt es Spinner." }, "foto-hero": { "name": "Foto-Hero: echtes Foto, ein Satz, ein Weg", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 11, "allgemein": true, "stimmung": [ "ruhig", "editorial", "warm" ], "technik": [ "css", "js", "andere" ], "v": { "randlos-unten-links": "Vollbild", "split-randabfallend": "Split", "inset-rahmen": "Foto im", "passepartout": "Kleiner Abzug auf Fläche", "bildunterschrift": "Bildunterschrift als" }, "wann_nicht": "Ohne eigenes, brauchbares Foto: dann ein Schrift-Hero (schrift-hero-viewportbreit) oder die Variante passepartout mit dem einen guten Bild." }, "foto-hero-mit-leiste": { "name": "Foto-Hero mit Leiste, Karte oder Weiche", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "leiste": "Buchungsleiste im Bild", "karte": "Karte", "weiche": "Weiche zu den Filialen" }, "wann_nicht": "Leiste nicht für Tische (Datum, Uhrzeit, Personen gehören in termin-buchung-zwei-klick) und nicht ohne Buchungssystem oder gepflegte Belegung." }, "foto-hero-wortmarke": { "name": "Foto-Hero mit Wortmarke", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "editorial", "laut", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "gestapelt": "Wortmarke über dem Foto", "im-bild": "Wortmarke im Bild", "daumenkino": "Daumenkino" }, "wann_nicht": "Bei langen Namen oder Namen aus mehreren Wörtern: auf dem Telefon wird die Wortmarke zu klein." }, "fuellung-vom-eintrittspunkt": { "name": "Füllung vom Eintrittspunkt", "slug": "hover", "prio": "C", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös", "verspielt" ], "technik": [ "css", "js", "gsap" ], "v": { "basis": "Clip-Path", "pixel": "Pixelraster" }, "wann_nicht": "Bei sehr kleinen Buttons, weil die Richtung dort nicht wahrnehmbar ist." }, "galerie-shared-element-vollbild": { "name": "Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)", "slug": "galerien-slider", "prio": "A", "demo": true, "rezepte": 17, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik": [ "css", "js", "gsap" ], "v": { "basis": "Projektraster zu", "produkt": "Produktgalerie", "serie": "Serie als Spalte", "zoom": "Zoom" }, "wann_nicht": "Bei sehr großen Bildmengen mit Endlos-Laden ohne stabile Positionen." }, "gap-decorations-raster": { "name": "Trennlinien im Raster (Gap Decorations)", "slug": "hero-layouts", "prio": "F", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "js" ], "v": { "kenndaten": "Kenndaten-Raster", "werkliste": "Werkliste", "karte": "Visitenkarte im Footer" }, "wann_nicht": "Wenn die Linie zum Inhalt gehört und Bedeutung trägt, die ohne sie verloren geht (dann echte Tabelle mit Rahmen)." }, "gedenkseiten-kondolenz": { "name": "Traueranzeigen und Gedenkseite mit Kondolenzbuch", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "liste": "Liste", "gedenkseite": "Gedenkseite", "still": "Still" }, "wann_nicht": "Wenn niemand die Kondolenzen zeitnah liest: dann die Variante ohne Kondolenzbuch." }, "gemischte-schnitte-zeile": { "name": "Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "luxuriös", "laut" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Mehr als zwei kursive Wörter pro Headline, Fließtext-Betonungen, UI-Beschriftungen, Marken mit nur einer Schrift." }, "generatives-markenzeichen": { "name": "Generatives Markenzeichen", "slug": "animationsstile", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "laut", "experimentell" ], "technik": [ "css", "js", "canvas" ], "v": { "tag": "Tag und Woche", "team": "Team-Karten" }, "wann_nicht": "Bei Marken, die vor allem Verlässlichkeit ausstrahlen müssen (Kanzlei, Praxis, Bank) und wenn es kein Gerüst gibt, das alle Varianten trägt." }, "geriffeltes-glas": { "name": "Geriffeltes Glas (Fluted Glass)", "slug": "glas-material", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös", "warm" ], "technik": [ "webgl", "canvas" ], "v": { "basis": "WebGL", "still": "Still" }, "wann_nicht": "Über Text, Formularen oder Bildinhalten, die man erkennen muss (Produktfotos, Personen, Karten)." }, "gestaffelte-einblendung": { "name": "Gestaffelte Einblendung per sibling-index()", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "laut" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei langen Listen: höchstens 6 bis 8 Elemente staffeln, den Rest gleichzeitig zeigen." }, "gestapelte-drawer-navigation": { "name": "Gestapelte bzw. mehrstufige Drawer-Navigation", "slug": "navigation", "prio": "C", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Bei flachen Navigationen und bei mehr als drei Ebenen." }, "glas-button": { "name": "Glas-Button", "slug": "buttons", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik": [ "css", "js", "canvas" ], "v": { "frost": "Frost", "liquid": "Liquid", "getoent": "Getönt", "glanz": "Glanz" }, "wann_nicht": "Auf einfarbigem hellem Grund, dort ist Glas unsichtbar." }, "gleitender-indikator": { "name": "Gleitender Indikator / Segment-Schalter mit Pille", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": {}, "wann_nicht": "Bei Mehrseiten-Navigation mit vollem Neuladen fehlt die alte Position." }, "grain-noise-overlay": { "name": "Grain-/Noise-Überlagerung", "slug": "glas-material", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "filmisch", "warm" ], "technik": [ "css", "webgl", "canvas" ], "v": { "basis": "Fläche", "button": "Button" }, "wann_nicht": "Wenn kleine, feine Schrift auf hellem Grund steht und das Korn sie sichtbar anraut." }, "gutschein-konfigurator": { "name": "Gutschein-Konfigurator", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "luxuriös", "warm" ], "technik": [ "css", "js", "canvas" ], "v": {}, "wann_nicht": "Wenn der Betrieb keinen Zahlungsdienst und keine Codeverwaltung hat; dann reicht „Gutschein telefonisch bestellen“ mit Bild." }, "headline-laufweite-zeilenabstand": { "name": "Enge Laufweite und Zeilenabstand bei riesigen Headlines", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "editorial", "laut" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Fließtext und kleine Überschriften (dort bleibt die Laufweite nahe 0)." }, "hide-on-scroll-header": { "name": "Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 6, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn der Header Aktionen trägt, die immer sichtbar sein müssen, etwa den Warenkorb im Checkout." }, "highlight-marker-underline": { "name": "Gezeichnete Markierung und Unterstreichung", "slug": "schrift-animationen", "prio": "B", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "editorial", "verspielt", "warm" ], "technik": [ "css", "gsap", "canvas" ], "v": {}, "wann_nicht": "Mehr als eine Markierung pro Abschnitt, dann verliert sie ihre Wirkung." }, "horizontal-scroll-section": { "name": "Gepinnte Horizontal-Scroll-Section", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "filmisch", "verspielt", "laut" ], "technik": [ "css", "gsap", "lenis" ], "v": {}, "wann_nicht": "Bei mehr als etwa 10 Elementen, weil die Strecke zu lang wird." }, "hover-absicht-timing": { "name": "Hover-Absicht und Zeitlogik", "slug": "hover", "prio": "B", "demo": true, "rezepte": 6, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Bei kleinem Feedback wie Farbwechsel, Hintergrundfläche oder Unterstreichung." }, "hovercard-interest-invoker": { "name": "Hovercard / Vorschau per Interest Invoker", "slug": "hover", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Für kurze Tooltips an Symbolen (eigenes Tooltip-Muster)." }, "icon-squash-stretch": { "name": "Icon-Squash-and-Stretch (Pfeil dehnt sich)", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "canvas", "andere" ], "v": {}, "wann_nicht": "Bei Icons ohne klare Bewegungsrichtung." }, "in-den-warenkorb-flug": { "name": "In-den-Warenkorb-Flug", "slug": "mikroanimationen", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt" ], "technik": [ "css", "js", "andere" ], "v": {}, "wann_nicht": "Wenn der Warenkorb nicht sichtbar ist, das wäre ein Flug ins Nichts." }, "initial-letter-initialen": { "name": "Echte Initialen mit initial-letter", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Kurze Teaser, Listen, UI-Texte." }, "intro-ohne-wartezeit": { "name": "Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)", "slug": "preloader-intro", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn vor der ersten Interaktion wirklich schwere Assets nötig sind, etwa eine 3D-Szene oder ein Video." }, "karte-zwei-klick": { "name": "Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 25, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "andere" ], "v": { "bild": "Kartenbild", "skizze": "Lageskizze", "standorte": "Standorte", "social": "Social Feed" }, "wann_nicht": "Bei rein digitalen Angeboten." }, "karten-faecher-container": { "name": "Kartenfächer nach Containerbreite", "slug": "galerien-slider", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "experimentell" ], "technik": [ "css" ], "v": { "bogen": "Bogen", "facher-gerade": "Gerade Reihe", "kreis": "Halbkreis" }, "wann_nicht": "Nicht für Inhalte, die man vergleichen oder lesen muss (Texte auf gedrehten Karten)." }, "karten-spotlight-glow": { "name": "Karten-Spotlight (Glow folgt der Maus)", "slug": "hover", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös", "filmisch" ], "technik": [ "css", "js", "gsap", "webgl" ], "v": {}, "wann_nicht": "Auf hellem Grund mit wenig Kontrast, dort verpufft das Licht." }, "karussell-karten-verformen": { "name": "Karussell mit verformten Karten", "slug": "galerien-slider", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "laut", "experimentell" ], "technik": [ "css", "js", "webgl" ], "v": { "biegen": "Biegen", "welle": "Welle nach Tempo", "rollen": "Rollen" }, "wann_nicht": "Produkte, Zimmer, Immobilien oder Werke, die unverfälscht wirken müssen (die Verformung verzerrt Kanten und Proportionen)." }, "karussell-steuerung": { "name": "Karussell-Steuerung und Anzeige", "slug": "galerien-slider", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "js" ], "v": { "zaehler": "Zähler", "fortschritt": "Fortschrittsleiste", "daumen": "Daumen", "autoplay": "Selbstlauf", "ankerlinks": "Anker-Links" }, "wann_nicht": "Nicht mehrere Anzeigen stapeln (Punkte plus Zähler plus Leiste)." }, "ki-streaming-text-denkindikator": { "name": "KI-Streaming-Text und Denk-Indikator mit Shimmer", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": { "archiv": "Archiv-Assistent", "fragen": "Frag-uns-Feld" }, "wann_nicht": "Bei normalen Ladezuständen ohne KI, dort passen Skeleton oder Spinner." }, "kolophon-footer": { "name": "Kolophon: Schriften, Bildnachweis, Stand, Gewicht", "slug": "footer", "prio": "C", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "andere" ], "v": { "zeile": "Zeile im Footer", "seite": "Kolophon-Seite", "gewicht": "Gemessenes Seitengewicht" }, "wann_nicht": "Pflegedienst, Bestattung, Kfz: Dort genügt eine Zeile Bildnachweis im Impressum." }, "konfetti-erfolg": { "name": "Konfetti / Erfolgs-Feier", "slug": "mikroanimationen", "prio": "C", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "verspielt", "laut" ], "technik": [ "js", "canvas" ], "v": {}, "wann_nicht": "Bei Routineaktionen wie jedem Speichern." }, "kontakt-anfrage-formular": { "name": "Kontakt- und Anfrageformular als eigene Sektion", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 23, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "andere" ], "v": { "basis": "Anfrage-Sektion", "satz": "Satz-Formular" }, "wann_nicht": "Wenn ein Buchungssystem die Anfrage ersetzt (dann termin-buchung-zwei-klick)." }, "kontextueller-cursor": { "name": "Kontextueller Cursor (wächst, dockt an, zeigt Label)", "slug": "cursor", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "luxuriös", "verspielt", "laut" ], "technik": [ "css", "js", "gsap", "andere" ], "v": {}, "wann_nicht": "In Formularen, Shops, Textseiten und dichten Oberflächen mit langen Linklisten." }, "kontrastmodus-forced-colors": { "name": "Kontrastmodus und contrast-color()", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Keine eigene Gestaltung für den Kontrastmodus bauen: nur kleine Korrekturen." }, "kontur-button-zeichnen": { "name": "Kontur-Button, der sich zeichnet", "slug": "buttons", "prio": "B", "demo": true, "rezepte": 9, "allgemein": false, "stimmung": [ "ruhig", "luxuriös" ], "technik": [ "css", "canvas" ], "v": { "zeichnen": "Linie zeichnet sich", "ecken": "Eckklammern schließen sich", "doppel": "Doppelkontur rückt auf", "laufend": "Gestrichelte Kontur läuft" }, "wann_nicht": "Nicht als einziger oder wichtigster Button, wenn die Kontur wenig Kontrast hat: Outline ist sekundär." }, "kopieren-feedback": { "name": "Kopieren-Feedback", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 6, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js", "canvas", "andere" ], "v": {}, "wann_nicht": "Wenn Kopieren nicht die Hauptabsicht ist." }, "kostenrechner-konfigurator": { "name": "Kostenrechner mit Spanne", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "präzise", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "bad": "Badsanierung", "dach": "Dachdämmung" }, "wann_nicht": "Wenn der Betrieb keine belastbaren Erfahrungswerte hat oder jeder Auftrag ganz anders ist." }, "lagen-steckbrief-karte": { "name": "Lagen mit Steckbrief und eigener Karte", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "weinberg": "Weinberg", "obstwiese": "Obstwiese", "hof": "Hof" }, "wann_nicht": "Für den Weg zum Hof oder zur Vinothek ist karte-zwei-klick da (Adresse, Anfahrt, Karte nach Einwilligung)." }, "leistungsseite-antwort-zuerst": { "name": "Leistungsseite: Antwort zuerst", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "handwerk": "Handwerk", "praxis": "Praxis" }, "wann_nicht": "Für Projekte und Referenzen (dafür case-study-geruest)." }, "lesesatz-text-wrap": { "name": "Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty", "slug": "typo-techniken", "prio": "A", "demo": true, "rezepte": 19, "allgemein": false, "stimmung": [ "ruhig", "editorial" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Nicht für Code, Tabellen, Formulare oder Daten, die exakt so umbrechen sollen." }, "like-herz-burst": { "name": "Like/Herz mit Partikel-Burst", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "js", "canvas" ], "v": {}, "wann_nicht": "In sehr nüchternen Kontexten wie Banking und bei Massenaktionen, die man oft hintereinander ausführt." }, "listen-hover-bildvorschau": { "name": "Bildvorschau beim Listen-Hover", "slug": "hover", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik": [ "css", "js", "gsap", "andere" ], "v": {}, "wann_nicht": "Wenn das Bild die wichtigste Information ist, etwa im Shop (dann Raster)." }, "live-uhr-und-standort": { "name": "Live-Uhr und Standort in Navigation oder Footer", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "warm" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn der Standort für Besucher keine Rolle spielt und die Uhr nur Dekoration wäre." }, "logo-wand-social-proof": { "name": "Logo-Wand / Social-Proof-Band", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 10, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "laufband": "Kundenlogos als Laufband", "raster": "Ruhiges Raster", "auszeichnungen": "Auszeichnungen", "siegel-nachweis": "Siegel mit Nachweis" }, "wann_nicht": "Mit weniger als etwa 5 Logos." }, "lokale-produktnavigation": { "name": "Klebende Produkt-Unternavigation mit Handlung", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": { "abschnitte": "Abschnitte", "unterseiten": "Unterseiten", "kompakt-mobil": "Kompakt" }, "wann_nicht": "Bei drei kurzen Abschnitten." }, "magnetische-elemente": { "name": "Magnetische Buttons und Elemente", "slug": "hover", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "luxuriös", "verspielt", "laut" ], "technik": [ "js", "gsap", "andere" ], "v": {}, "wann_nicht": "Dichte Formulare und Formular-Buttons, Navigationen mit vielen eng stehenden Links, Fließtext-Links, alles mit Präzisionsklick." }, "marquee-laufband": { "name": "Marquee-Laufband (optional scroll-gekoppelt)", "slug": "schrift-animationen", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "verspielt", "laut" ], "technik": [ "css", "js", "gsap", "lenis", "canvas" ], "v": {}, "wann_nicht": "Für wichtige Information, denn sie wird nicht vollständig gelesen." }, "masonry-grid-lanes-galerie": { "name": "Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)", "slug": "galerien-slider", "prio": "B", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "ruhig", "editorial", "warm" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn die Reihenfolge streng gelesen werden muss, etwa chronologisch: Masonry gibt die Zeilenlogik auf." }, "medien-expansion-scroll": { "name": "Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "luxuriös", "filmisch" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Wenn das Medium wenig Auflösung hat oder im Vollbild nicht trägt." }, "mega-footer-sitemap": { "name": "Mega-Footer mit Sitemap und Utility-Leiste", "slug": "footer", "prio": "A", "demo": true, "rezepte": 10, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Kleine One-Pager." }, "mega-menue-morphing-viewport": { "name": "Mega-Menü mit morphendem gemeinsamem Viewport", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": {}, "wann_nicht": "Bei wenigen, flachen Links und bei Portfolios." }, "mehrschicht-parallax": { "name": "Subtiler mehrschichtiger Parallax", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik": [ "css", "gsap", "lenis" ], "v": {}, "wann_nicht": "Nicht bei Text in Lesespalten, Formularen und Tabellen." }, "mehrschritt-anfrage": { "name": "Mehrschritt-Anfrage mit Zusammenfassung", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 9, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js" ], "v": { "leiste": "Schrittleiste", "ring": "Ring", "senkrecht": "Senkrecht", "plz": "PLZ zuerst" }, "wann_nicht": "Bei drei oder vier Feldern (Kontakt, Newsletter): ein Schritt reicht." }, "menue-choreografie-wipe-clip": { "name": "Menü-Choreografie: Panel-Wipe bzw. Clip-Reveal mit asymmetrischem Schließen", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "verspielt", "laut" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Wenn das Menü sehr oft geöffnet wird, etwa in Web-Apps oder Dokumentationen." }, "menue-icon-und-label-morph": { "name": "Menü-Button-Morph: Burger zu X und Label-Tausch „Menu/Close“", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "editorial", "präzise", "verspielt" ], "technik": [ "css", "gsap", "canvas" ], "v": {}, "wann_nicht": "Wenn die Navigation dauerhaft sichtbar ist." }, "meta-labels-hud-typografie": { "name": "Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 1, "allgemein": true, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn die Labels nur Deko sind und Inhalte verdrängen." }, "mobile-bottom-navigation": { "name": "Mobile Bottom-Navigation und Bottom-Sheet-Menü", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js", "gsap" ], "v": { "basis": "Menü-Leiste", "fab": "Daumen-Knopf", "kontakt": "Kontaktleiste" }, "wann_nicht": "Wenn die Leiste wichtige Inhalte, Cookie-Banner oder Chat-Widgets unten verdeckt." }, "mono-labels-versal": { "name": "Mono als Label- und Metaschrift (kleine Versalien)", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 8, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Für Fließtext, lange Navigationspunkte oder ganze Sätze." }, "native-popover-dropdowns": { "name": "Native Dropdowns mit Popover-API, Anchor Positioning und Invokern", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 15, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Wenn ältere Browser ohne Fallback bedient werden müssen." }, "objekt-steckbrief-expose": { "name": "Objekt-Steckbrief im Exposé", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik": [ "css", "js", "canvas" ], "v": { "kauf": "Kauf", "miete": "Miete", "anzeige": "Anzeige", "fahrzeug": "Fahrzeug" }, "wann_nicht": "Wenn die Objektdaten aus einem Portal-Feed kommen und das Portal-Widget eingebunden werden muss." }, "oeffnungszeiten-status": { "name": "Öffnungszeiten mit Live-Status", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 20, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "karte": "Karte", "kompakt": "Kopfzeile", "termin": "Termin", "auslastung": "Auslastung", "hinweisleiste": "Hinweisleiste" }, "wann_nicht": "Wenn die Zeiten nicht gepflegt werden: Ein falsches „Jetzt geöffnet“ an einem Feiertag ist schlimmer als gar keine Anzeige." }, "optische-groessen-opsz": { "name": "Optische Größen nutzen (opsz-Achse)", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei Schriften ohne opsz-Achse bringt es nichts." }, "papier-druck-textur": { "name": "Papier- und Drucktextur", "slug": "glas-material", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "webgl", "canvas" ], "v": {}, "wann_nicht": "Bei High-Tech-Produkten mit Präzisionsanspruch." }, "pfeil-icon-button": { "name": "Pfeil-Icon-Button", "slug": "buttons", "prio": "A", "demo": true, "rezepte": 15, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "kreis-expand": "Kreis wird Fläche", "tausch": "Pfeil-Tausch", "linie": "Linie", "seitenwechsel": "Seitenwechsel" }, "wann_nicht": "Nicht bei Handlungen ohne Richtung (Speichern, Kaufen, Absenden: dort Häkchen, Tasche oder button-zustaende)." }, "player-einbettung-zwei-klick": { "name": "Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "laut" ], "technik": [ "css", "js", "andere" ], "v": { "release": "Release", "video": "Musikvideo", "mix": "DJ-Set" }, "wann_nicht": "Selbst gehostete Videos brauchen keine Einwilligung: eigener-videoplayer." }, "preis-section-editorial": { "name": "Preis-Sektion mit Haltung", "slug": "hero-layouts", "prio": "C", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn Preise individuell sind (dann ein Ab-Preis mit CTA) oder bei mehr als vier Paketen." }, "produkt-kaufbox-varianten": { "name": "Kaufbox mit Farb- und Größenwahl", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 6, "allgemein": false, "stimmung": [ "präzise", "luxuriös" ], "technik": [ "css", "js", "canvas" ], "v": { "seite": "Produktseite", "kompakt": "Schnellkauf" }, "wann_nicht": "Für Produkte ohne Varianten reicht ein Preis und ein Knopf." }, "produkt-ui-hero-perspektiv-tilt": { "name": "Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "gsap", "andere" ], "v": {}, "wann_nicht": "Wenn es kein echtes, ansehnliches UI gibt; Mock-Screenshots wirken austauschbar." }, "produktfinder-quiz": { "name": "Produktfinder in wenigen Fragen", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "editorial", "warm" ], "technik": [ "css", "js" ], "v": { "schritte": "Schritt für Schritt", "live": "Alles auf einer Seite" }, "wann_nicht": "Bei weniger als fünf Produkten (dann eine Vergleichstabelle)." }, "programm-kalender": { "name": "Programm-Kalender mit Liste und Monat", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 6, "allgemein": false, "stimmung": [ "präzise", "experimentell" ], "technik": [ "css", "js" ], "v": { "programm": "Liste und Monat", "tage": "Tagesleiste" }, "wann_nicht": "Bei zwei oder drei Terminen im Jahr reicht eine einfache Liste." }, "projektindex-hover-vorschau": { "name": "Projektindex als Liste mit Hover-Bildvorschau", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Wenn Bilder das Hauptargument sind und viele Besucher am Telefon kommen, wo es keinen Hover gibt." }, "prompt-hero-eingabefeld": { "name": "Prompt-Hero mit rotierenden Beispiel-Prompts", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn hinter dem Feld keine echte Funktion steht: Ein Eingabefeld, das nur zur Anmeldung führt, frustriert." }, "prozess-timeline-wachsende-linie": { "name": "Prozess-/Timeline-Sektion mit wachsender Linie", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 10, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "gsap", "andere" ], "v": {}, "wann_nicht": "Bei nur zwei Schritten." }, "raster-zu-wischreihe": { "name": "Raster am Desktop, Wischreihe am Telefon", "slug": "galerien-slider", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "einreihig": "Einreihig", "zweireihig": "Zweireihig" }, "wann_nicht": "Wenn die Karten auf dem Telefon einzeln gelesen werden müssen (Preise, Pflichtangaben, Vergleich), dann lieber gestapelt oder als Akkordeon." }, "raumkapazitaeten-bestuhlung": { "name": "Räume mit Kapazitäten je Bestuhlung", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "tabelle": "Vergleichstabelle", "raum": "Ein Raum", "gelaende": "Gelände als Skizze" }, "wann_nicht": "Bei einem einzigen Raum mit einer Bestuhlung genügt ein Satz mit der Höchstzahl." }, "reading-flow-reihenfolge": { "name": "Lesereihenfolge im Raster", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "laut" ], "technik": [ "css", "js", "canvas" ], "v": { "zeilen": "Broken Grid", "reihenfolge": "Highlight" }, "wann_nicht": "Nicht, um falsch sortiertes HTML zu reparieren: Wenn die Reihenfolge überall gleich sein soll, das HTML umstellen." }, "reparatur-richtpreise": { "name": "Reparatur-Richtpreise und Reparaturweg", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "hersteller": "Hersteller", "betrieb": "Betrieb" }, "wann_nicht": "Nicht für Kfz-Werkstätten (Autos stehen nicht auf der Produktliste) und nicht als Pflicht für normale Händler oder Handwerker." }, "richtungsbewusste-uebergaenge": { "name": "Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)", "slug": "seitenuebergaenge", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Bei Crossfades ohne Richtung nicht nötig." }, "rive-datenbindung": { "name": "Zustandsautomat mit Datenbindung (Rive-Prinzip)", "slug": "mikroanimationen", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "js", "canvas" ], "v": {}, "wann_nicht": "Wenn die Illustration nur Deko ist und kein Wert sie steuert." }, "schrift-hero-viewportbreit": { "name": "Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 2, "allgemein": true, "stimmung": [ "ruhig", "editorial", "laut" ], "technik": [ "css", "gsap" ], "v": { "basis": "Wortmarke", "textfit": "text-fit" }, "wann_nicht": "Bei langen Namen oder Firmennamen aus mehreren Wörtern: Auf dem Telefon wird die Schrift unlesbar klein." }, "scroll-fortschritt": { "name": "Scroll-Fortschrittsbalken und -ring", "slug": "mikroanimationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "canvas" ], "v": {}, "wann_nicht": "Auf kurzen Seiten." }, "scroll-naechstes-projekt": { "name": "Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)", "slug": "seitenuebergaenge", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "filmisch" ], "technik": [ "css", "gsap", "canvas" ], "v": {}, "wann_nicht": "Wenn Nutzer am Seitenende Footer, Kontakt oder rechtliche Links erreichen müssen und diese nicht vor dem Teaser stehen." }, "scroll-word-highlight": { "name": "Wort-für-Wort-Aufhellen beim Scrollen", "slug": "schrift-animationen", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "editorial", "warm" ], "technik": [ "css", "js", "gsap", "andere" ], "v": {}, "wann_nicht": "Bei langen Texten, mehreren Absätzen hintereinander und Rechtstexten." }, "scrollspy-kapitelnavigation": { "name": "Scrollspy-Kapitelnavigation (Sticky-Kapitelindex)", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Kurze Seiten mit zwei oder drei Abschnitten." }, "section-overlap-uebergang": { "name": "Sections, die übereinander gleiten (Vorhang-Übergang)", "slug": "scroll", "prio": "A", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "filmisch" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Wenn am unteren Rand der alten Section noch Inhalt gelesen werden muss." }, "seitenrand-und-ecken-navigation": { "name": "Seitenrand- und Vier-Ecken-Navigation", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Informationsreiche Seiten mit vielen Menüpunkten." }, "sektionskante-shape": { "name": "Responsive Sektionskanten mit shape()", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "verspielt", "warm" ], "technik": [ "css" ], "v": { "bogen": "Bogen", "welle": "Welle", "schraege": "Schräge", "riss": "Riss" }, "wann_nicht": "Nicht als Deko ohne Bezug zur Marke." }, "serif-grotesk-duotone": { "name": "Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "editorial", "laut", "warm" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Wenn die Rollen nicht durchgehalten werden: Eine Serif im Knopf und eine Grotesk im Zitat zerstören das System." }, "skeleton-shimmer": { "name": "Skeleton mit Schimmer", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css" ], "v": { "basis": "Objektliste", "bild-platzhalter": "Bild-Platzhalter aus" }, "wann_nicht": "Bei sehr kurzen Ladezeiten unter etwa 300 ms: dann gar nichts zeigen, sonst flackert es." }, "slideshow-innere-gegenparallaxe": { "name": "Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung", "slug": "galerien-slider", "prio": "C", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "editorial", "luxuriös", "filmisch" ], "technik": [ "css", "js", "gsap" ], "v": { "basis": "Vollbild", "hero": "Foto-Hero", "ueberblenden": "Überblenden", "tageslauf": "Tageslauf" }, "wann_nicht": "Für automatische Werbe-Rotatoren mit Text, der gelesen werden muss." }, "smooth-scroll-lenis": { "name": "Smooth Scroll mit Lenis", "slug": "scroll", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "luxuriös" ], "technik": [ "js", "gsap", "lenis" ], "v": {}, "wann_nicht": "Bei text- oder datenlastigen Seiten, Web-Apps und Shops mit vielen verschachtelten Scroll-Containern oder iframes (über iframes stoppt Lenis)." }, "sofort-navigation-vorladen": { "name": "Sofortige Seitenwechsel durch Vorladen", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "empfehlung": "Empfehlung", "wordpress": "WordPress-Standard" }, "wann_nicht": "Nicht bei Onepagern oder Single-Page-Apps mit eigenem Router." }, "sound-umschalter": { "name": "Sound-Umschalter und Einstiegsgate in der Navigation", "slug": "navigation", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "filmisch", "verspielt" ], "technik": [ "css", "js", "canvas" ], "v": {}, "wann_nicht": "Informationsseiten ohne Audio-Konzept." }, "spalten-shutter-wipe": { "name": "Spalten-, Streifen- und Jalousie-Wipe", "slug": "seitenuebergaenge", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "laut" ], "technik": [ "css", "gsap", "andere" ], "v": {}, "wann_nicht": "Bei sehr ruhigen, minimalen Marken: zu viel Unruhe." }, "speisekarte-editorial": { "name": "Speisekarte als Editorial", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "editorial", "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "bistro": "Bistro-Tafel", "menue": "Fine Dining", "preisliste": "Salon-Preise" }, "wann_nicht": "Bei sehr großen Karten mit Dutzenden Rubriken (dann Sprungliste statt Tabs)." }, "spendenmodul-wirkung": { "name": "Spendenmodul mit Wirkungssatz", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "laut", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "formular": "Einmalig oder monatlich", "kampagne": "Aktion" }, "wann_nicht": "Wenn ein externer Spendendienst das Formular liefert und sich nicht gestalten lässt: dann nur die Betragswahl mit Wirkung bauen und den Betrag an den Dienst übergeben." }, "split-mask-reveal": { "name": "Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)", "slug": "schrift-animationen", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös", "filmisch" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Fließtext über drei, vier Zeilen, Navigation, Formulare und wiederkehrende Labels." }, "split-screen-sticky-seiten": { "name": "Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)", "slug": "hero-layouts", "prio": "A", "demo": true, "rezepte": 9, "allgemein": true, "stimmung": [ "ruhig", "editorial", "präzise", "filmisch" ], "technik": [ "css", "js", "gsap" ], "v": { "bild": "Sticky-Medium", "titel": "Sticky-Titel und Karten", "archiv": "Archiv" }, "wann_nicht": "Wenn die stehende Spalte höher ist als der Viewport." }, "sprunglinks-landmarken": { "name": "Sprunglinks und Landmarken", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": { "menue": "Drei Ziele", "einzeln": "Nur „Zum Inhalt“" }, "wann_nicht": "Nicht mehr als drei Sprungziele, sonst wird die Leiste selbst zum Hindernis; meist reicht „Zum Inhalt“." }, "standortfinder-liste": { "name": "Standortfinder als Liste", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "liste": "Liste", "kompakt": "Nur Liste" }, "wann_nicht": "Bei einem einzigen Standort (dann Anfahrt mit Karte per 2-Klick, siehe karte-zwei-klick)." }, "stapelkarten": { "name": "Stapelkarten beim Scrollen (Stacking Cards)", "slug": "scroll", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "verspielt" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Bei Karten mit viel oder wechselnd langem Text, denn Inhalt wird verdeckt." }, "stellen-karriere": { "name": "Stellenliste mit Kurzbewerbung", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "editorial", "präzise" ], "technik": [ "css", "js" ], "v": { "liste": "Viele Stellen", "wenige": "Wenige Stellen" }, "wann_nicht": "Bei ein oder zwei Stellen: dann ohne Filter, Stellen direkt offen zeigen (Variante „Wenige Stellen“)." }, "stellenseite-mit-jobposting": { "name": "Stellenseite mit Gehalt, Ablauf und JobPosting-Daten", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "handwerk": "Handwerk", "pflege": "Pflege", "ausbildung": "Ausbildung" }, "wann_nicht": "Für die Übersicht mehrerer Stellen: JobPosting gehört laut Google nur auf die Seite einer einzelnen Stelle, die Übersicht ist stellen-karriere." }, "sticky-shrink-header": { "name": "Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt", "slug": "navigation", "prio": "B", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "editorial", "präzise", "laut" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Wenn der Header ohnehin klein ist." }, "studio-visitenkarte-footer": { "name": "Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)", "slug": "footer", "prio": "A", "demo": true, "rezepte": 17, "allgemein": false, "stimmung": [ "editorial", "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "basis": "Stille Visitenkarte", "praxis": "Praxis", "buehne": "Studio-Bühne", "gastgeber": "Gastgeber" }, "wann_nicht": "Rein digitale Produkte ohne Ortsbezug." }, "svg-pfad-zeichnen-scroll": { "name": "SVG-Pfad zeichnet sich beim Scrollen", "slug": "scroll", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "gsap", "canvas" ], "v": { "strasse": "Straße", "anker": "Handlinie, Anker" }, "wann_nicht": "In nüchternen, datenorientierten Layouts und wenn die Linie Inhalte kreuzt." }, "tabellenziffern": { "name": "Tabellenziffern für Preis- und Datenblöcke", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 24, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "In Fließtext und großen Überschriften wirken Tabellenziffern löchrig, weil die schmale 1 viel Luft um sich hat." }, "tabs-pfeiltasten-focusgroup": { "name": "Tabs und Segmente mit Pfeiltasten", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 9, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "andere" ], "v": { "auto": "Automatisch", "manuell": "Manuell", "vertikal": "Senkrecht" }, "wann_nicht": "Nicht für Navigation zwischen Seiten (dann Links in einem nav, keine Tabs)." }, "team-ueber-mich-layout": { "name": "Team-/Über-mich-Layout mit Porträt-Interaktion", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 17, "allgemein": false, "stimmung": [ "editorial", "verspielt", "warm" ], "technik": [ "css", "js", "gsap" ], "v": { "raster": "Raster", "liste": "Namensliste", "statement": "Statement-Satz" }, "wann_nicht": "Ohne einheitliches Fotomaterial, sonst wirkt die Reihe zusammengewürfelt." }, "technische-daten-produktseite": { "name": "Produktseite mit technischen Daten", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js", "canvas" ], "v": { "baureihe": "Baureihe", "einzel": "Einzelartikel", "konfiguriert": "Konfiguriert" }, "wann_nicht": "Nicht für Shops mit Preis und Warenkorb (dafür produkt-kaufbox-varianten)." }, "termin-buchung-zwei-klick": { "name": "Termin-Buchung per 2-Klick-Einbettung", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 9, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "andere" ], "v": { "platzhalter": "Platzhalter", "vorauswahl": "Vorauswahl", "linkout": "Link-out", "hoehe": "Höhe wächst mit" }, "wann_nicht": "Wenn die Buchung selbst gehostet ist und keine Daten an Dritte fließen." }, "termin-verfuegbarkeit-anfrage": { "name": "Wunschtermin mit freien Terminen und Anfrage-Übergabe", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "filmisch" ], "technik": [ "css", "js" ], "v": { "leiste": "Leiste unterm Hero", "kalender": "Monatskalender", "catering": "Catering-Kapazität" }, "wann_nicht": "Wenn niemand den Kalender pflegt: Ein veralteter Kalender ist schlimmer als keiner, dann nur die Leiste mit Ausweichdatum." }, "testimonials-neu-gedacht": { "name": "Testimonials neu gedacht", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 11, "allgemein": false, "stimmung": [ "editorial", "präzise", "warm" ], "technik": [ "css", "gsap" ], "v": { "zitat": "Ein großes Zitat", "liste": "Kundenliste", "wand": "Masonry-Wand", "stimmen-reihe": "Reihe" }, "wann_nicht": "Bei erfundenen oder austauschbaren Zitaten." }, "text-box-trim": { "name": "Optisch exakte Textabstände mit text-box-trim / text-box-edge", "slug": "typo-techniken", "prio": "A", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "editorial", "präzise" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei mehrzeiligem Text mit Hintergrund-Markierung, weil die Markierung beschnitten wird (dort text-box: normal setzen)." }, "text-on-path": { "name": "Text auf Pfad", "slug": "schrift-animationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "js", "gsap", "lenis", "canvas" ], "v": { "basis": "Scroll-Band", "reifen": "Reifen" }, "wann_nicht": "Für wichtige Inhalte: Text auf Kurven liest sich schwer." }, "text-roll-hover": { "name": "Text-Roll beim Hover (doppelte Zeile rollt durch)", "slug": "schrift-animationen", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "verspielt" ], "technik": [ "css", "js", "gsap", "andere" ], "v": {}, "wann_nicht": "Links im Fließtext, weil der Effekt beim Lesen stört." }, "text-um-form": { "name": "Text fließt um eine bewegte Form (Experiment)", "slug": "typo-techniken", "prio": "F", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "experimentell" ], "technik": [ "css", "js", "canvas" ], "v": { "pretext": "Live-Umfluss", "css": "Ruhende Form" }, "wann_nicht": "Nicht auf normalen Kunden-, Firmen- oder Landingpages: dort bringt es laut Fachpresse keinen messbaren Nutzen." }, "theme-farbwechsel-scroll": { "name": "Farb-/Theme-Wechsel beim Scrollen", "slug": "scroll", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "filmisch", "verspielt", "laut", "warm" ], "technik": [ "css", "js", "gsap" ], "v": { "basis": "Foto & Film", "tageslauf": "Tageslauf" }, "wann_nicht": "Bei Inhalten, die schnell gescannt werden." }, "theme-umschalter-view-transition": { "name": "Theme- und Sprachumschalter mit View-Transition-Kreis-Reveal", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js" ], "v": { "tokens": "Zwei Token-Sätze", "light-dark": "light-dark" }, "wann_nicht": "Ohne sauberes Token-System für beide Themes, sonst entstehen Mischzustände." }, "tiefen-taste-3d": { "name": "Tiefen-Taste (3D-Button)", "slug": "buttons", "prio": "B", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "verspielt", "laut" ], "technik": [ "css", "js" ], "v": { "stapel": "Stapel aus Schatten", "versatz-brutal": "Harter Versatz", "keycap": "Keycap", "soft": "Soft-Taste" }, "wann_nicht": "Nicht bei Luxus, Kanzlei, Praxis und Immobilien: Tiefe wirkt dort spielerisch." }, "tiefenkarten-relighting": { "name": "2.5D-Bilder mit Tiefenkarte", "slug": "3d-webgl", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "filmisch" ], "technik": [ "webgl" ], "v": { "sonne": "Abendsonne", "scan": "Morgen-Scan" }, "wann_nicht": "Bei Bildern mit feinen Kanten wie Haaren ohne saubere Tiefenkarte: Es entstehen Artefakte." }, "toast-stapel": { "name": "Toast-Benachrichtigungen im Stapel", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "andere" ], "v": {}, "wann_nicht": "Für kritische Fehler, die eine Entscheidung verlangen (Inline-Hinweis oder Dialog)." }, "toggle-switch": { "name": "Toggle-Schalter", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "andere" ], "v": {}, "wann_nicht": "Für Optionen, die erst mit „Speichern“ wirken: dann eine Checkbox." }, "token-brutal-hart": { "name": "Animationsstil „Brutal hart“", "slug": "animationsstile", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "laut", "experimentell" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Bei konservativen Zielgruppen, bei Marken, die von weicher Premium-Anmutung leben, und bei Inhalten, die Vertrauen aufbauen müssen (Gesundheit, Finanzen, Beratung)." }, "token-editorial-langsam": { "name": "Animationsstil „Editorial langsam“", "slug": "animationsstile", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Für UI-Feedback wie Buttons und Formulare ist es zu langsam." }, "token-federnd-verspielt": { "name": "Animationsstil „Federnd verspielt“", "slug": "animationsstile", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "verspielt", "warm" ], "technik": [ "css", "js", "gsap", "andere" ], "v": {}, "wann_nicht": "Nie auf Opazität, das Überschwingen flackert." }, "token-kinetisch-inout": { "name": "Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)", "slug": "animationsstile", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "luxuriös", "filmisch", "laut" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Nicht für Einblendungen beim Scrollen, dort wirkt der langsame Anlauf träge." }, "token-luxus-weich": { "name": "Animationsstil „Luxus weich“", "slug": "animationsstile", "prio": "B", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "ruhig", "luxuriös" ], "technik": [ "css", "gsap", "lenis" ], "v": {}, "wann_nicht": "Interaktive Werkzeuge, Formulare und Seiten mit hoher Informationsdichte." }, "token-studio-signatur": { "name": "Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)", "slug": "animationsstile", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "luxuriös", "laut" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Nicht für lange Einblendungen beim Scrollen, dort passt expo.out besser." }, "token-swiss-knackig": { "name": "Animationsstil „Swiss knackig“", "slug": "animationsstile", "prio": "B", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "editorial", "präzise" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Bei verspielten, warmen Marken und bei Kinder- oder Lifestyle-Themen." }, "token-tech-praezise": { "name": "Animationsstil „Tech präzise“ (Produkt-UI)", "slug": "animationsstile", "prio": "A", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Emotionale Kampagnen, Mode, Kunst." }, "token-toggle-asymmetrisch": { "name": "Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)", "slug": "animationsstile", "prio": "A", "demo": true, "rezepte": 17, "allgemein": false, "stimmung": [ "präzise", "luxuriös" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Bei Scroll-gescrubbten Animationen, dort muss rückwärts exakt vorwärts spiegeln." }, "tourdaten-liste": { "name": "Tourdaten und Termine mit Ticketstatus", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise", "laut" ], "technik": [ "css", "js" ], "v": { "tour": "Tour eines Acts", "label": "Label", "ausstellungen": "Ausstellungen" }, "wann_nicht": "Ein Haus mit vielen Terminen an einem Ort braucht programm-kalender (Rubriken, Monatsansicht)." }, "trauerfall-sofortleiste": { "name": "Trauerfall-Sofortleiste mit erster Anleitung", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "ruhig", "präzise", "warm" ], "technik": [ "css", "js" ], "v": { "leiste": "Leiste", "seite": "Seite", "wald": "Wald" }, "wann_nicht": "Wenn nachts niemand abnimmt: dann keine „Tag und Nacht“-Zeile, sondern die echten Zeiten der Rufbereitschaft." }, "typo-maske-medien": { "name": "Bild/Video in Schrift (Typo-Maske)", "slug": "schrift-animationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": true, "stimmung": [ "luxuriös", "filmisch", "laut" ], "technik": [ "css", "js", "gsap", "canvas" ], "v": {}, "wann_nicht": "Bei dünnen Schriften, weil zu wenig Fläche fürs Bild bleibt." }, "unterstreichung-varianten": { "name": "Unterstreichungs-Varianten", "slug": "hover", "prio": "A", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise" ], "technik": [ "css" ], "v": { "durchlauf": "Durchlauf", "mitte": "Mitte", "wiederkehr": "Wiederkehr", "inset": "Nativ inset" }, "wann_nicht": "Pseudo-Elemente nicht für Links, die umbrechen können: Die Linie sitzt dann falsch." }, "validierung-nach-interaktion": { "name": "Validierung erst nach Interaktion", "slug": "mikroanimationen", "prio": "A", "demo": true, "rezepte": 9, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Nicht als einzige Prüfung, wenn der Server entscheidet (dann zusätzlich JS und Serverantwort)." }, "variable-font-axes": { "name": "Animierte Variable-Font-Achsen", "slug": "schrift-animationen", "prio": "B", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "verspielt", "experimentell" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Wenn keine variable Schrift mit ausreichender Achsenspanne verfügbar ist." }, "vergleichstabelle-sticky": { "name": "Vergleichstabelle mit fester Kopfzeile", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 7, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js" ], "v": { "pakete": "Paketvergleich", "alternativen": "Vergleich" }, "wann_nicht": "Bei zwei Paketen mit wenigen Unterschieden: dann zwei Karten." }, "verlaufs-rahmen": { "name": "Animierter Verlaufsrahmen", "slug": "glas-material", "prio": "B", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "laut" ], "technik": [ "css" ], "v": { "basis": "Padding-Box", "saas": "border-area", "button": "Button" }, "wann_nicht": "Nicht auf allen Karten gleichzeitig, das wirkt wie ein Rummelplatz." }, "versal-kondensiert-fit-to-width": { "name": "Kondensierte Versal-Headlines auf volle Breite (fit-to-width)", "slug": "typo-techniken", "prio": "C", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "laut" ], "technik": [ "css" ], "v": {}, "wann_nicht": "Bei langen oder oft wechselnden Texten, bei ruhigen, leisen Marken und bei mehrsprachigen Seiten, wenn die Zeilen in jeder Sprache neu gemessen werden müssten." }, "video-vorschau-hover-viewport": { "name": "Video-Vorschau bei Hover / im Viewport", "slug": "galerien-slider", "prio": "A", "demo": true, "rezepte": 3, "allgemein": false, "stimmung": [ "luxuriös", "filmisch", "verspielt" ], "technik": [ "css", "js" ], "v": { "basis": "Raster", "karussell-folie": "Karussell" }, "wann_nicht": "Wenn Datensparsamkeit zählt und viele große Videos nötig wären." }, "vollbild-overlay-menue-bildvorschau": { "name": "Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau", "slug": "navigation", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "editorial", "luxuriös", "filmisch", "laut" ], "technik": [ "css", "js", "gsap" ], "v": {}, "wann_nicht": "Shops und Produktseiten mit tiefer Informationsarchitektur." }, "vorher-nachher-vergleichsregler": { "name": "Vorher-Nachher-Vergleichsregler", "slug": "galerien-slider", "prio": "C", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": {}, "wann_nicht": "Wenn die Bilder nicht exakt deckungsgleich sind, denn Versatz zerstört den Effekt." }, "vt-cross-document-mpa": { "name": "Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)", "slug": "seitenuebergaenge", "prio": "A", "demo": true, "rezepte": 0, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik": [ "css", "js" ], "v": { "benannt": "Benannt", "typen": "Typen", "crossfade": "Crossfade", "quelle": "Quelle" }, "wann_nicht": "Wenn die Animation unterwegs reagieren soll, etwa gestaffelt per Split-Text oder physikbasiert: Schnappschüsse lassen sich nach dem Start nicht mehr umchoreografieren." }, "vt-shared-element-morph": { "name": "Vorschaubild wird zur Hero (Shared-Element-Morph)", "slug": "seitenuebergaenge", "prio": "A", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik": [ "css", "gsap" ], "v": {}, "wann_nicht": "Wenn Vorschau und Hero unterschiedliche Motive zeigen." }, "warenkorb-drawer": { "name": "Warenkorb als Seitenpanel", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 5, "allgemein": false, "stimmung": [ "präzise", "warm" ], "technik": [ "css", "js", "canvas" ], "v": { "drawer": "Seitenpanel", "hinweis": "Hinweis am Symbol" }, "wann_nicht": "Bei Einzelkäufen mit Konfiguration (Möbel nach Maß, Reisen), auf die direkt der Checkout folgt." }, "wein-steckbrief-pflichtangaben": { "name": "Wein-Steckbrief mit Pflichtangaben", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 1, "allgemein": false, "stimmung": [ "editorial", "präzise", "warm" ], "technik": [ "css", "js", "andere" ], "v": { "wein": "Wein", "sekt": "Sekt", "brand": "Brand", "liste": "Liste" }, "wann_nicht": "Für Non-Food im Shop (Gläser, Geschenkkisten) gelten andere Pflichten: dort produkt-kaufbox-varianten mit Hersteller- und Sicherheitsangaben nach GPSR." }, "widerruf-und-kuendigung-schaltflaeche": { "name": "Widerrufs- und Kündigungs-Button", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 13, "allgemein": false, "stimmung": [ "präzise" ], "technik": [ "css", "js" ], "v": { "richtig": "Richtig", "halteangebot": "Falsch", "versteckt": "Falsch" }, "wann_nicht": "Nicht bei reinen B2B-Verträgen und nicht bei Verträgen, die nur per Telefon, Brief oder vor Ort geschlossen werden." }, "wochen-kursplan": { "name": "Wochen-Kursplan mit Live-Status", "slug": "sektionen", "prio": "D", "demo": true, "rezepte": 4, "allgemein": false, "stimmung": [ "präzise", "laut" ], "technik": [ "css", "js" ], "v": { "verein": "Sportverein", "studio": "Yoga- und Fitnessstudio" }, "wann_nicht": "Für Einzeltermine wie Konzerte, Workshops oder Tage der offenen Tür ist programm-kalender da (Liste und Monat)." }, "zahlen-fakten-section": { "name": "Zahlen-/Fakten-Sektion als Typo-Ereignis", "slug": "hero-layouts", "prio": "B", "demo": true, "rezepte": 8, "allgemein": false, "stimmung": [ "präzise", "laut" ], "technik": [ "css", "js", "gsap" ], "v": { "typo": "Typo-Ereignis", "tabelle": "Ruhige Tabelle", "diagramm": "Mit Mini-Diagramm" }, "wann_nicht": "Bei Eitelkeitszahlen ohne Aussage („1000 Tassen Kaffee“) und bei nur einer Zahl." }, "zahlen-odometer": { "name": "Rollende Ziffern (Zahlen-Ticker / Odometer)", "slug": "schrift-animationen", "prio": "A", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "präzise", "verspielt" ], "technik": [ "css", "js", "gsap", "andere" ], "v": {}, "wann_nicht": "Wenn die Zahl sofort exakt gelesen werden muss (Formulare, Tabellen, Finanzhandel)." }, "zoom-und-textabstand-robust": { "name": "Zoom- und textabstandfestes Layout", "slug": "zugang", "prio": "E", "demo": true, "rezepte": 2, "allgemein": false, "stimmung": [ "ruhig", "präzise" ], "technik": [ "css", "js", "canvas" ], "v": {}, "wann_nicht": "Nicht als Ausrede für kleine, vorsichtige Typografie: die Wirkung bleibt, nur die Technik ändert sich." } }, "schriften": { "hanken-grotesk": { "name": "Hanken Grotesk", "klassifikation": "Neo-Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/hanken-grotesk-latin-wght-normal.woff2", "variabel": true, "charakter": "Saubere, gut ausgebaute Grotesk mit leicht offenen Formen; seriöser Inter-Ersatz mit etwas mehr Wärme." }, "special-gothic": { "name": "Special Gothic", "klassifikation": "Grotesk (Gothic)", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/special-gothic-latin-standard-normal.woff2", "variabel": true, "charakter": "Amerikanische Gothic (2025) mit wdth-Achse; dazu Expanded One und Condensed One als Display-Schnitte." }, "atkinson-hyperlegible-next": { "name": "Atkinson Hyperlegible Next", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2", "variabel": true, "charakter": "Barrierearme Text-Grotesk des Braille Institute (Neuauflage 2025, 7 Gewichte + Kursive); maximale Unterscheidbarkeit von I/l/1." }, "bricolage-grotesque": { "name": "Bricolage Grotesque", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2", "variabel": true, "charakter": "Eigenwillige Grotesk mit Ink-Traps und optischer Größe: in Headline-Größe verspielt-französisch, im Text ruhig." }, "libre-caslon-display": { "name": "Libre Caslon Display", "klassifikation": "Serif (Display)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/libre-caslon-display-latin-400-normal.woff2", "variabel": false, "charakter": "Feine Caslon-Display für große Grade; ruhig-elegant." }, "fraunces": { "name": "Fraunces", "klassifikation": "Serif (Old Style, Soft)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/fraunces-latin-full-normal.woff2", "variabel": true, "charakter": "‚Wonky‘ Old-Style-Antiqua mit SOFT- und WONK-Achse und opsz bis 144; weich, warm, retro-70er – Serif-Revival-Ikone." }, "commissioner": { "name": "Commissioner", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/commissioner-latin-full-normal.woff2", "variabel": true, "charakter": "Grotesk mit FLAR- (Flare-Serifen) und VOLM-Achse: stufenlos von Grotesk zu ausgestellter Antiqua." }, "newsreader": { "name": "Newsreader", "klassifikation": "Serif (Transitional)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/newsreader-latin-opsz-normal.woff2", "variabel": true, "charakter": "Von Production Type für Bildschirm-Lektüre; opsz 6–72 sorgt für feine Headline-Schnitte und robuste Textgrade." }, "mona-sans": { "name": "Mona Sans", "klassifikation": "Neo-Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/mona-sans-latin-wdth-normal.woff2", "variabel": true, "charakter": "GitHubs variable Grotesk mit Breitenachse (wdth 75–125): von kondensiert bis expanded aus einer Datei – perfekt für Breiten-Animationen." }, "tiktok-sans": { "name": "TikTok Sans", "klassifikation": "Neo-Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/tiktok-sans-latin-wdth-normal.woff2", "variabel": true, "charakter": "Von Grilli Type (mit Contrast Foundry) entwickelt; Achsen opsz, wdth 75–150, slnt – Grilli-Qualität unter OFL." }, "dm-mono": { "name": "DM Mono", "klassifikation": "Mono", "fallback": "ui-monospace, monospace", "template_ok": true, "datei": "assets/fonts/dm-mono-latin-500-normal.woff2", "variabel": false, "charakter": "Weiche, freundliche Mono von Colophon (3 Gewichte + Kursiven); der Klassiker für Labels und Metadaten." }, "host-grotesk": { "name": "Host Grotesk", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/host-grotesk-latin-wght-normal.woff2", "variabel": true, "charakter": "Junge Grotesk (2024) mit leicht eckigen Kurven; frisch, aber neutral genug für Interfaces." }, "instrument-serif": { "name": "Instrument Serif", "klassifikation": "Serif (kondensiert)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/instrument-serif-latin-400.woff2", "variabel": false, "charakter": "Schmale, kontrastreiche Display-Antiqua (nur Regular + Italic); die Kursive ist DER Akzent 2025." }, "instrument-sans": { "name": "Instrument Sans", "klassifikation": "Neo-Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/instrument-sans-latin-wght-normal.woff2", "variabel": true, "charakter": "Präzise, leicht kondensierbare Grotesk (wdth-Achse) der Agentur Instrument; nüchtern-elegant." }, "fragment-mono": { "name": "Fragment Mono", "klassifikation": "Mono", "fallback": "ui-monospace, monospace", "template_ok": true, "datei": "assets/fonts/fragment-mono-latin-400-normal.woff2", "variabel": false, "charakter": "Helvetica-artige Mono (Wei Huang/URW): wirkt wie eine Grotesk in Monospace – sehr elegant für Labels." }, "zalando-sans": { "name": "Zalando Sans", "klassifikation": "Neo-Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/zalando-sans-latin-wdth-normal.woff2", "variabel": true, "charakter": "Modehaus-Grotesk (2025) mit wdth 75–125, dazu separate Expanded/SemiExpanded-Familien; elegant-sachlich." }, "schibsted-grotesk": { "name": "Schibsted Grotesk", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/schibsted-grotesk-latin-wght-normal.woff2", "variabel": true, "charakter": "Editorial-Grotesk von Bakken & Bæck für das Medienhaus Schibsted; kräftige Schnitte, journalistischer Ton." }, "ibm-plex-mono": { "name": "IBM Plex Mono", "klassifikation": "Mono", "fallback": "ui-monospace, monospace", "template_ok": true, "datei": "assets/fonts/ibm-plex-mono-latin-500-normal.woff2", "variabel": false, "charakter": "Technisch-präzise Mono mit Kursiven; auf Award-Seiten der häufigste freie Mono-Begleiter." }, "bodoni-moda": { "name": "Bodoni Moda", "klassifikation": "Didone", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/bodoni-moda-latin-opsz-normal.woff2", "variabel": true, "charakter": "Didone mit opsz 6–96: Haarstriche bleiben in jeder Größe stimmig." }, "geist": { "name": "Geist", "klassifikation": "Neo-Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/geist-latin-wght-normal.woff2", "variabel": true, "charakter": "Nüchtern-technische Grotesk von Vercel mit Schweizer DNA; klar, leicht schmal, sehr gute UI-Lesbarkeit." }, "geist-mono": { "name": "Geist Mono", "klassifikation": "Mono", "fallback": "ui-monospace, monospace", "template_ok": true, "datei": "assets/fonts/geist-mono-latin-wght-normal.woff2", "variabel": true, "charakter": "Mono-Partner von Geist; schlank, sehr ruhig – auf Award-Seiten 2025 häufig als Label-Schrift." }, "hedvig-letters-serif": { "name": "Hedvig Letters Serif", "klassifikation": "Serif", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/hedvig-letters-serif-latin-opsz-normal.woff2", "variabel": true, "charakter": "Moderne Antiqua mit kurzer opsz-Achse (Kanon Foundry, 2023); klar, leicht skandinavisch." }, "google-sans-flex": { "name": "Google Sans Flex", "klassifikation": "Geometrisch", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/google-sans-flex-latin-wght-normal.woff2", "variabel": true, "charakter": "Seit Nov." }, "onest": { "name": "Onest", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/onest-latin-wght-normal.woff2", "variabel": true, "charakter": "Russisch-kyrillische Grotesk (2023) mit sanften Formen; solide Alternative für mehrsprachige Seiten." }, "shantell-sans": { "name": "Shantell Sans", "klassifikation": "Handschrift (Marker, informell)", "fallback": "cursive", "template_ok": true, "datei": "assets/fonts/shantell-sans-latin-full-normal.woff2", "variabel": true, "charakter": "Marker-Handschrift der Künstlerin Shantell Martin mit Konzept-Achsen: INFM macht sie lockerer, BNCE lässt Buchstaben tanzen – animierbar für lebendige Notizen …" }, "young-serif": { "name": "Young Serif", "klassifikation": "Serif (Display)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/young-serif-latin-400-normal.woff2", "variabel": false, "charakter": "Kräftige, weiche Display-Antiqua (ein Schnitt); 70er-Wärme für große Headlines." }, "big-shoulders": { "name": "Big Shoulders", "klassifikation": "Grotesk (kondensiert)", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/big-shoulders-latin-wght-normal.woff2", "variabel": true, "charakter": "Kondensierte Chicago-Grotesk mit opsz-Achse (10–72); stark für hohe, enge Headline-Stapel." }, "archivo": { "name": "Archivo", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/archivo-latin-wdth-wght.woff2", "variabel": true, "charakter": "Grotesk mit enormer Breitenachse (wdth 62–125) und 9 Gewichten; von Condensed-Headline bis Expanded-Label." }, "kalnia": { "name": "Kalnia", "klassifikation": "Serif (Display, Didone-artig)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/kalnia-latin-full-normal.woff2", "variabel": true, "charakter": "Display-Antiqua mit wdth- und wght-Achse und flüssigen Formen; dazu Kalnia Glaze als Farbvariante." }, "familjen-grotesk": { "name": "Familjen Grotesk", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/familjen-grotesk-latin-wght-normal.woff2", "variabel": true, "charakter": "Kompakte Grotesk mit Kursive und markanten Details aus Stockholm; agenturtypisch, ideal für Headlines in Medium." }, "mrs-saint-delafield": { "name": "Mrs Saint Delafield", "klassifikation": "Script (Handschrift, Unterschrift)", "fallback": "cursive", "template_ok": true, "datei": "assets/fonts/mrs-saint-delafield-latin-400-normal.woff", "variabel": false, "charakter": "Schnelle, persönliche Füller-Handschrift von Alejandro Paul (Sudtipos) – wirkt wie eine echte Unterschrift, nicht wie ein Font." }, "anybody": { "name": "Anybody", "klassifikation": "Display", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/anybody-latin-wdth-normal.woff", "variabel": true, "charakter": "Variable Grotesk mit extremer Breitenachse (wdth 50–150) – für Kinetik und Breiten-Morphing." }, "funnel-sans": { "name": "Funnel Sans", "klassifikation": "Grotesk", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/funnel-sans-latin-wght-normal.woff", "variabel": true, "charakter": "Text-Partner von Funnel Display; ruhiger, mit Kursive." }, "azeret-mono": { "name": "Azeret Mono", "klassifikation": "Mono", "fallback": "ui-monospace, monospace", "template_ok": true, "datei": "assets/fonts/azeret-mono-latin-wght-normal.woff", "variabel": true, "charakter": "Mono der tschechischen Foundry Displaay, 9 Gewichte + Kursiven; grotesk-artig und schlank." }, "literata": { "name": "Literata", "klassifikation": "Serif", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/literata-latin-full-normal.woff2", "variabel": true, "charakter": "Lese-Antiqua (TypeTogether, Google Play Books) mit opsz 7–72; stark für lange Texte." }, "science-gothic": { "name": "Science Gothic", "klassifikation": "Grotesk (Gothic)", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/science-gothic-latin-wght-normal.woff", "variabel": true, "charakter": "Variable Revival der Bank-Gothic-Linie (Nov." }, "redaction": { "name": "Redaction", "klassifikation": "Serif", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/redaction-20-latin-400-normal.woff", "variabel": false, "charakter": "Neu auf Google Fonts (28.10.2026, MCKL): Antiqua-Familie, deren Varianten (Redaction 10–100) zunehmend ‚verpixelt/degradiert‘ sind – für Glitch- und …" }, "martian-mono": { "name": "Martian Mono", "klassifikation": "Mono", "fallback": "ui-monospace, monospace", "template_ok": true, "datei": "assets/fonts/martian-mono-latin-wght-normal.woff", "variabel": true, "charakter": "Breite Mono von Evil Martians mit wdth 75–112.5; markant für Zahlen, Labels und Hero-Daten." }, "strichpunkt-sans": { "name": "Strichpunkt Sans", "klassifikation": "Grotesk (breit)", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/strichpunkt-sans-latin-wght-normal.woff", "variabel": true, "charakter": "Neu auf Google Fonts (Mai 2026), von René Bieder; wdth 100–200 – nur nach außen breiter, sehr markant für Hero-Zeilen." }, "funnel-display": { "name": "Funnel Display", "klassifikation": "Display", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/funnel-display-latin-wght-normal.woff", "variabel": true, "charakter": "Display-Grotesk von NORD ID mit trichterförmig geschnittenen Strichenden; markant in großen Graden." }, "source-serif-4": { "name": "Source Serif 4", "klassifikation": "Serif (Transitional)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/source-serif-4-latin-opsz-normal.woff", "variabel": true, "charakter": "Adobes Text-Antiqua mit opsz 8–60; neutral, robust, ideal mit Grotesk-Headlines." }, "imbue": { "name": "Imbue", "klassifikation": "Didone (kondensiert)", "fallback": "system-ui, sans-serif", "template_ok": true, "datei": "assets/fonts/imbue-latin-opsz-normal.woff", "variabel": true, "charakter": "Schmale Didone mit opsz-Achse; Art-déco-Eleganz für hohe Headlines." }, "eb-garamond": { "name": "EB Garamond", "klassifikation": "Serif (Garalde)", "fallback": "Georgia, serif", "template_ok": true, "datei": "assets/fonts/eb-garamond-latin-wght-normal.woff", "variabel": true, "charakter": "Klassische Garamond-Interpretation; 2025/26 von Tech-Marken als ‚literarischer‘ Kontrapunkt zu Mono eingesetzt." } } }