{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "footer-newsletter-mit-persoenlichkeit",
 "name": "Newsletter-Modul mit Persönlichkeit",
 "name_en": "Characterful newsletter signup in footer",
 "kurz": "Die „Maschenpost“ einer Flensburger Strickmarke: benannter Newsletter mit konkretem Vorteil, Knopf „Anschlagen“, Status-Roll und einer Maschenreihe als Bestätigung.",
 "kategorie": "Footer",
 "kategorie_slug": "footer",
 "kategorie_nr": 13,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "humorvoll",
  "persönlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "form"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Newsletter-Feld im Footer oder direkt darüber, mit eigenem Namen und eigenem Ton. Ein einzelnes E-Mail-Feld mit Knopf in derselben Zeile, der Einwilligungshinweis passt in eine Zeile. Erfolg und Fehler erscheinen als animierter Textwechsel im Knopf oder als kleine Meldung. Manche Seiten öffnen das Modul als Overlay aus einem Link im Footer.",
  "warum_es_wirkt": "Ein benannter Newsletter wirkt wie ein Produkt und nicht wie eine Pflicht. Die Mikrotexte tragen die Markenstimme bis in Knopf und Fehlermeldung.",
  "wann_einsetzen": "Für Marken mit regelmäßigen Inhalten: Shops mit neuen Kollektionen, Studios mit Journal, Manufakturen.",
  "wann_nicht": "Wenn gar kein Newsletter verschickt wird. Wenn der Vorteil nicht konkret benannt werden kann.",
  "varianten": [
   "Benannter Newsletter mit eigenem Titel und konkretem Vorteil",
   "Verspielter Knopftext, der den Status per Roll wechselt",
   "Overlay, das aus einem Link im Footer aufgeht",
   "Newsletter im Menü-Overlay",
   "Programmauswahl (Kultur): Sparten und Takt wählen, eine Vorschau des nächsten Briefs filtert live mit",
   "Saisonbrief (Gastro, Hotel): vier Briefe im Jahr als Kacheln, der nächste ist markiert, im dunklen Footer neben Öffnungszeiten"
  ],
  "umsetzung": "Ein <form> mit <label> (darf visuell versteckt sein), type=email, autocomplete=email und required. Inline-Validierung erst nach Blur, danach bei jeder Eingabe. Der Status wechselt im Knopf per Text-Roll, das Ergebnis steht zusätzlich in einem Bereich mit aria-live=polite. Double-Opt-In serverseitig (DSGVO). Die Knopfbreite auf den längsten Statustext festlegen. Fallstrick: Ein Placeholder ersetzt kein Label.",
  "mobil": "Feld und Knopf untereinander, oder der Knopf als Icon im Feld. inputmode=email.",
  "reduzierte_bewegung": "Status ohne Roll wechseln. Erfolgsanimationen in der Endlage zeigen.",
  "barrierefreiheit": "Echtes Label. Fehlermeldung über aria-describedby am Feld, aria-invalid setzen. Erfolgsmeldung per aria-live. Overlay als <dialog> mit showModal, Esc und Schließen-Knopf."
 },
 "messwerte": {
  "easing": "ease-out",
  "dauer_ms": "Status-Roll 300",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0, 0, 0.58, 1)",
  "name": "ease-out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "basement.studio",
   "url": "https://basement.studio",
   "auszeichnung": "",
   "beobachtung": "Newsletter-Button „Roll Me In“ im Footer.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Ask Phill",
   "url": "https://askphill.com/",
   "auszeichnung": "",
   "beobachtung": "„Stay ahead“-Sektion mit Newsletter „Receipts“.",
   "art": "website"
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "Awwwards SOTM 03/2023",
   "beobachtung": "Newsletter-Overlay mit Subscribe und Close.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Your Majesty",
   "url": "https://yourmajesty.co/",
   "auszeichnung": "",
   "beobachtung": "Newsletter-Link auf /10things im Menü.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "mega-footer-sitemap",
  "studio-visitenkarte-footer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/",
  "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json"
  ],
  "pruefnotizen": [
   "02.11.2026: Priorität C → B (Lückenrecherche K2), weil steht in 8 Rezepten, Priorität C widersprach der tatsächlichen Nutzung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die „Maschenpost“ einer Flensburger Strickmarke: benannter Newsletter mit konkretem Vorteil, Knopf „Anschlagen“, Status-Roll und einer Maschenreihe als Bestätigung.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "status_roll": "neuer Text von unten 300 ms cubic-bezier(0, 0, 0.2, 1), alter Text nach oben 200 ms cubic-bezier(0.4, 0, 1, 1), gleichzeitig",
   "kurven": "Öffnen/Einblenden cubic-bezier(0, 0, 0.2, 1), Schließen/Ausblenden cubic-bezier(0.4, 0, 1, 1)",
   "overlay": "Dialog von unten translateY(105 %) → 0 in 300 ms, Schließen 200 ms; Backdrop rgba(33, 33, 33, 0.42)",
   "hover": "150 ms; Knopf beim Drücken scale(0.97)",
   "validierung": "erst nach Blur, danach bei jeder Eingabe; Muster ^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$",
   "serverantwort": "gedacht 900 ms (Zustand „Wird gestrickt …“)",
   "maschenreihe": "je Masche 300 ms, 24 ms versetzt, translateY(6 px) → 0 und opacity 0 → 1",
   "umschlag": "Socke sinkt 400 ms, hintere Klappe 150 ms, vordere Klappe 300 ms nach 450 ms, Poststempel 300 ms nach 750 ms (scale 1.4 → 1)",
   "knopfbreite": "fest auf den längsten Statustext, damit nichts springt",
   "vorfuehrung": "Tippen 55 ms je Zeichen, Fehler nach Blur, Korrektur, Absenden, Runde etwa 10 s"
  },
  "ausloeser": "klick",
  "touch": "Feld und Knopf stehen untereinander, Knopf in voller Breite. inputmode=email, autocomplete=email. Kein Hover an der Socke. Die Steuerung ist als Knopf eingeklappt. Kultur: Sparten und Takt mindestens 44 px hoch. Gastro: Kacheln zweispaltig.",
  "reduziert": "Status wechselt ohne Roll, Maschenreihe, Umschlag und Stempel stehen sofort in der Endlage, Overlay ohne Schieben. Texte und Zustände bleiben gleich. Kultur: Liste filtert ohne Gleiten. Gastro: Haken stehen sofort.",
  "korrekturen": {
   "beschreibung": "Ein Newsletter-Feld im Footer oder direkt darüber, mit eigenem Namen und eigenem Ton. Ein einzelnes E-Mail-Feld mit Knopf in derselben Zeile, der Einwilligungshinweis passt in eine Zeile. Erfolg und Fehler erscheinen als animierter Textwechsel im Knopf oder als kleine Meldung. Manche Seiten öffnen das Modul als Overlay aus einem Link im Footer.",
   "warum_es_wirkt": "Ein benannter Newsletter wirkt wie ein Produkt und nicht wie eine Pflicht. Die Mikrotexte tragen die Markenstimme bis in Knopf und Fehlermeldung.",
   "wann_einsetzen": "Für Marken mit regelmäßigen Inhalten: Shops mit neuen Kollektionen, Studios mit Journal, Manufakturen.",
   "wann_nicht": "Wenn gar kein Newsletter verschickt wird. Wenn der Vorteil nicht konkret benannt werden kann.",
   "varianten": [
    "Benannter Newsletter mit eigenem Titel und konkretem Vorteil",
    "Verspielter Knopftext, der den Status per Roll wechselt",
    "Overlay, das aus einem Link im Footer aufgeht",
    "Newsletter im Menü-Overlay",
    "Programmauswahl (Kultur): Sparten und Takt wählen, eine Vorschau des nächsten Briefs filtert live mit",
    "Saisonbrief (Gastro, Hotel): vier Briefe im Jahr als Kacheln, der nächste ist markiert, im dunklen Footer neben Öffnungszeiten"
   ],
   "umsetzung": "Ein <form> mit <label> (darf visuell versteckt sein), type=email, autocomplete=email und required. Inline-Validierung erst nach Blur, danach bei jeder Eingabe. Der Status wechselt im Knopf per Text-Roll, das Ergebnis steht zusätzlich in einem Bereich mit aria-live=polite. Double-Opt-In serverseitig (DSGVO). Die Knopfbreite auf den längsten Statustext festlegen. Fallstrick: Ein Placeholder ersetzt kein Label.",
   "mobil": "Feld und Knopf untereinander, oder der Knopf als Icon im Feld. inputmode=email.",
   "reduzierte_bewegung": "Status ohne Roll wechseln. Erfolgsanimationen in der Endlage zeigen.",
   "barrierefreiheit": "Echtes Label. Fehlermeldung über aria-describedby am Feld, aria-invalid setzen. Erfolgsmeldung per aria-live. Overlay als <dialog> mit showModal, Esc und Schließen-Knopf."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept d2c-produkt-zuerst: erfundene Strickmarke Fördewolle aus Flensburg (Socken aus Wolle aus Angeln). Young Serif nur für Claims, Instrument Sans für UI, warme Neutraltöne, Grün für Erfolg, Akzent #eb5c9d. Newsletter „Maschenpost“ mit Ausgabe-Nummer, drei konkreten Vorteilen und Knopf „Anschlagen“ → „Wird gestrickt …“ → „Angeschlagen ✓“. Bestätigung als Maschenreihe aus SVG-Vs; die Socke rutscht in den Umschlag, Poststempel „Flensburg“. Umschalter Im Footer / Overlay (<dialog>) und Markenstimme / Neutral (zeigt den Unterschied der Mikrotexte). Footer mit Vertrauensleiste, Zahlarten, Impressum, Widerruf, AGB. Referenzen nur als Prinzip: ncase.me, manufactum.de, bluebottlecoffee.com, omnipollo.com. AD-Review 01.11.2026: Note 4 (Telefon: E-Mail-Feld war auf 30 px zusammengefallen, jetzt 50 px). Varianten 01.11.2026: Umschalter „Variante“ im Pult (?v=basis|kultur|saison); Ort- und Ton-Umschalter nur in der Grundvariante. Kultur (Rezept kultur-programm-haltung): erfundenes Zollhaus, Leipzig-Plagwitz, „Wochenzettel“ mit fünf Sparten, Takt und Live-Vorschau von acht Terminen. Gastro (Rezept gastro-warm-appetitlich): erfundenes Gasthaus Lindenwirt, Kirchzarten, „Saisonbrief“ mit vier Kacheln im dunklen Footer. Beide teilen ein schlankes Modul (Validierung nach Blur, Status-Roll, feste Knopfbreite). Vorführung zeigt die gewählte Variante. Zugang 02.11.2026: --leise #6B6B6B auf #666666 (4,7:1 auf Kachel), Akzent-Pink #EB5C9D auf #D4528D für Claim und Text (3,2:1 bei 60 px; Illustration unverändert), Knopfrahmen im Kontrastmodus.",
  "varianten": [
   {
    "id": "basis",
    "name": "Shop mit Markenstimme",
    "wann": "D2C, Mode, Manufaktur: ein benannter Newsletter mit drei konkreten Vorteilen, eigener Knopftext mit Status-Roll und eine kleine Erfolgsszene; im Footer oder als Overlay.",
    "werte": {
     "rezept": "d2c-produkt-zuerst",
     "kurven": "auf cubic-bezier(0, 0, 0.2, 1), zu cubic-bezier(0.4, 0, 1, 1)",
     "status_roll": "300 / 200 ms",
     "schrift": "Young Serif für Claims, Instrument Sans für UI",
     "unterumschalter": "Im Footer / Overlay, Markenstimme / Neutral"
    }
   },
   {
    "id": "kultur",
    "name": "Wochenzettel mit Programmauswahl",
    "wann": "Theater, Museen, Kulturzentren, Kursanbieter: Leserinnen wählen Sparten und Takt, eine Vorschau zeigt die Termine des nächsten Briefs. Haltung statt Werbesprache.",
    "werte": {
     "rezept": "kultur-programm-haltung",
     "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)",
     "status_roll": "neuer Text 250 ms von unten, alter 200 ms nach oben",
     "sparten": "Umschaltknöpfe (aria-pressed) mit Farbquadrat und Terminzahl; aktiv: Fläche in Spartenfarbe, weiße Schrift; Farbe 200 ms",
     "vorschau": "Liste filtert live; bleibende Zeilen gleiten per FLIP nur auf y in 300 ms, neue: opacity 0 → 1 und y 8 px → 0 in 300 ms",
     "takt": "„Jeden Donnerstag“ / „Einmal im Monat“ ändert Titel der Vorschau",
     "pruefung": "E-Mail nach Blur; zusätzlich mindestens eine Sparte",
     "erfolg": "Knopf grün #2f7d4a, Stempel „Abonniert“ in der Vorschau opacity und y 6 px in 300 ms, Statussatz nennt Datum und Sparten",
     "schrift": "Schibsted Grotesk 800 clamp(2.5rem, 1.2rem + 4.2vw, 5rem), Atkinson Hyperlegible Next, IBM Plex Mono 500 für Daten",
     "farben": "#efede9 / #0b0b0b; Musik #c4421a, Theater & Tanz #3d5f9a, Kunst #2f7d4a, Film #b0186b, Kinder #8a5a00; Rahmen 2 px"
    }
   },
   {
    "id": "saison",
    "name": "Saisonbrief im Gastro-Footer",
    "wann": "Restaurants, Hotels, Hofläden, Winzer: wenige Briefe im Jahr, an die Saison gebunden; der nächste Brief ist sichtbar, das Modul sitzt im dunklen Footer neben Öffnungszeiten und Anfahrt.",
    "werte": {
     "rezept": "gastro-warm-appetitlich",
     "kurve": "cubic-bezier(0.16, 1, 0.3, 1)",
     "status_roll": "neuer Text 400 ms von unten, alter 200 ms nach oben",
     "jahr": "vier Kacheln (März, Juni, September, Dezember) mit Strich-Icons, die nächste in Senf #eac16e mit Marke „Nächster Brief“",
     "erfolg": "Haken auf allen vier Kacheln: opacity 0 → 1 und scale 0,6 → 1, 700 ms, 120 ms Versatz",
     "feld": "Pille, Rand rgba(240, 236, 224, .5), Knopf Senf",
     "schrift": "Fraunces 450 SOFT 100 clamp(2.25rem, 1.4rem + 3vw, 3.75rem) mit kursiver Zeile in #e1a894, Commissioner FLAR 0 Text, Rubriken FLAR 80 versal .15em",
     "farben": "Grund #f0ece0, Footer #293e3a mit Radius 28 px oben, Text #f0ece0",
     "aufbau": "1.5fr / 0.8fr / 0.8fr: Brief, Öffnungszeiten, Adresse"
    }
   }
  ]
 }
}