{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kontakt-anfrage-formular",
 "name": "Kontakt- und Anfrageformular als eigene Sektion",
 "name_en": "Contact / inquiry form section",
 "kurz": "Die Anfrage bekommt eine eigene Sektion: direkte Wege links, ein kurzes Formular rechts, Fehler erst nach dem Verlassen eines Feldes und eine Bestätigung mit nächsten Schritten.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "unbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "sachlich",
  "vertrauenswürdig"
 ],
 "technik": [
  "html",
  "css",
  "js"
 ],
 "technik_gruppen": [
  "css",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine eigene Sektion vor dem Footer, auch als Seite /kontakt. Links stehen ein Einleitungssatz und die direkten Wege: Telefon als tel:-Link, E-Mail mit Kopier-Feedback, Adresse. Rechts steht ein kurzes Formular mit Feldern passend zur Branche, etwa Anliegen als Auswahl, PLZ, Wunschzeitraum, Nachricht, optional Foto-Upload und Rückruf-Wunsch. Pflichtfelder sind minimal. Fehler erscheinen erst nach dem Verlassen eines Feldes, direkt am Feld. Nach dem Senden ersetzt eine Bestätigung das Formular, mit Antwortzeit und nächsten Schritten.",
  "warum_es_wirkt": "Für Handwerk, Kanzlei, Architektur, Fotografie, Makler oder Freelancer ist die Anfrage das eigentliche Ziel der Website. Als eigene Sektion mit klarer Erwartung (Antwortzeit, Ansprechperson, Rückruf) senkt sie die Hürde. Im Footer geht sie unter.",
  "wann_einsetzen": "Dienstleister, die Anfragen statt Bestellungen wollen: Handwerk, Kanzlei und Steuerberatung, Architektur, Immobilien, Fotografie, Freelancer, Agenturen.",
  "wann_nicht": "Wenn ein Buchungssystem die Anfrage ersetzt (dann termin-buchung-zwei-klick). Nicht als langes Formular mit mehr als 6 bis 7 Feldern auf der Startseite.",
  "varianten": [
   "Kurzformular: Name, E-Mail, Nachricht",
   "Anfrage mit Leistungsauswahl, PLZ, Zeitraum und Foto-Upload (Handwerk, Bewertung im Immobilienbereich)",
   "Erstgespräch oder Rückruf mit Wunschtag und Zeitfenster (Kanzlei, Steuerberatung, Makler)",
   "Projektanfrage mit Budget-Spanne und Termin (Agentur, Freelancer, Fotografie)",
   "Satz-Formular (Lückentext): die Anfrage als ein Satz mit höchstens 5 Lücken, Felder wachsen mit field-sizing: content (Kreativstudio, Freelancer, Eventlocation)"
  ],
  "umsetzung": "Natives <form novalidate> mit sichtbaren <label>, autocomplete (name, email, tel, postal-code) und inputmode. Auswahl als Radio-Gruppe in einem <fieldset> mit <legend>. Fehler per CSS :user-invalid oder, wie in der Demo, per JS: beim focusout prüfen (leer verlassene Felder noch nicht), danach bei jeder Eingabe neu prüfen, beim Absenden alles prüfen und das erste Fehlerfeld fokussieren. Meldungstexte je validity-Fall (valueMissing, typeMismatch, patternMismatch, tooShort). Upload per <input type=\"file\" accept=\"image/*\" multiple> mit Grössenhinweis. Versand serverseitig, kein mailto:. Spam-Schutz per Honeypot-Feld und Zeitstempel statt Captcha. Bestätigung in einem Bereich mit role=\"status\". Hinweis zum Datenschutz unter dem Button, keine vorab angehakte Einwilligung.",
  "mobil": "Einspaltig, Felder mindestens 48 px hoch, 16 px Schrift oder mehr gegen Zoom unter iOS. Passende Tastatur über type und inputmode (tel, email, numeric für die PLZ). Das Formular steht direkt unter der Einleitung, die direkten Wege darunter.",
  "reduzierte_bewegung": "Keine Bewegung nötig. Zustandswechsel (Fehler, Bestätigung) erscheinen ohne Animation.",
  "barrierefreiheit": "Sichtbare Labels, Platzhalter ersetzen kein Label. Optionale Felder als „(optional)“ markieren statt Pflichtfelder mit Sternchen. Fehler per aria-invalid und aria-describedby am Feld, nicht nur über Farbe (Symbol plus Text). Nach dem Senden Fokus auf die Überschrift der Bestätigung. Kontrast mindestens 4,5 : 1 für Text, 3 : 1 für Feldrahmen. Kopier-Feedback zusätzlich über eine role=\"status\"-Meldung."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "5–7 Felder; Touch-Ziele mind. 44 px; Fehlermeldung erst nach blur",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.165,
   0.84,
   0.44,
   1.0
  ],
  "css": "cubic-bezier(0.165, 0.84, 0.44, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 400
 },
 "gesehen_bei": [],
 "tutorials": [],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "button-zustaende",
  "checkbox-radio-animiert",
  "animiertes-select",
  "kopieren-feedback",
  "termin-buchung-zwei-klick"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo"
 },
 "herkunft": {
  "quelldateien": [
   "r3-ad-korrekturen"
  ],
  "pruefnotizen": [
   "Runde 3 (31.10.2026): neu angelegt nach der Art-Director-Prüfung der 18 Rezepte – in 7 Rezepten fehlte eine Kontakt- bzw. Anfrage-Sektion, Kontakt stand nur im Footer. Noch ohne Website-Beleg; Messwerte typisch."
  ],
  "prioritaet_hinweis": "Grundbaustein für KMU-Templates (Lücke aus der Art-Director-Prüfung der Rezepte, Runde 3), kein Trendmuster; Website-Belege fehlen noch."
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Anfrage bekommt eine eigene Sektion: direkte Wege links, ein kurzes Formular rechts, Fehler erst nach dem Verlassen eines Feldes und eine Bestätigung mit nächsten Schritten.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.165, 0.84, 0.44, 1) (easeOutQuart, Rezept Immobilien); Ausblenden cubic-bezier(0.4, 0, 1, 1)",
   "dauer_ms": "400 (Fehlermeldung aufklappen, Variantenwechsel ein, Bestätigung ein), 200 (Farbe, Rahmen, Häkchen, Ausblenden), 900 (simulierter Versand)",
   "stagger_ms": "80 (Schritte der Bestätigung)",
   "distanz": "8 px Versatz beim Einblenden",
   "felder": "Bewertung 7 (4 Pflicht), Rückruf 5 (3 Pflicht), Kurz 3 (3 Pflicht)",
   "touch_ziel_px": "48 Desktop, 52 Touch; Absenden 52 hoch",
   "validierung": "Fehler erst nach blur (leer verlassene Felder bleiben ruhig), danach live bei jeder Eingabe; Absenden prüft alles und setzt den Fokus auf das erste fehlerhafte Feld",
   "fehlermeldung": "grid-template-rows 0fr → 1fr, Text #b3261e, Rahmen 1 px + inset 1 px",
   "farben": "#fcfaf5 Grund, #efe8df Sand, #02385c Marke, #313131 Text, #8d8780 Feldrahmen, #ed7f1a nur Absenden (Text #10263a)",
   "schriften": "Libre Caslon Display 400 (Headlines ab 2.25rem), Hanken Grotesk (Text, Labels versal 0.75rem / 0.09em)",
   "kopieren_feedback_ms": 1600
  },
  "ausloeser": "klick",
  "touch": "Einspaltig unter 560 px, Felder 52 px hoch, 17 px Schrift gegen Zoom, passende Tastaturen über inputmode (numeric für PLZ, tel, email); keine Hover-Effekte. Auf dem Telefon steht das Formular direkt unter der Einleitung, Telefon, E-Mail und Adresse folgen darunter.",
  "reduziert": "Alle Übergänge auf 0,01 ms: Fehlermeldung, Variantenwechsel und Bestätigung erscheinen sofort, ohne Versatz; der Lade-Kreisel dreht sich nicht. Die Vorführung springt mit dem Zeiger statt zu gleiten.",
  "korrekturen": {
   "beschreibung": "Eine eigene Sektion vor dem Footer, auch als Seite /kontakt. Links stehen ein Einleitungssatz und die direkten Wege: Telefon als tel:-Link, E-Mail mit Kopier-Feedback, Adresse. Rechts steht ein kurzes Formular mit Feldern passend zur Branche, etwa Anliegen als Auswahl, PLZ, Wunschzeitraum, Nachricht, optional Foto-Upload und Rückruf-Wunsch. Pflichtfelder sind minimal. Fehler erscheinen erst nach dem Verlassen eines Feldes, direkt am Feld. Nach dem Senden ersetzt eine Bestätigung das Formular, mit Antwortzeit und nächsten Schritten.",
   "warum_es_wirkt": "Für Handwerk, Kanzlei, Architektur, Fotografie, Makler oder Freelancer ist die Anfrage das eigentliche Ziel der Website. Als eigene Sektion mit klarer Erwartung (Antwortzeit, Ansprechperson, Rückruf) senkt sie die Hürde. Im Footer geht sie unter.",
   "wann_einsetzen": "Dienstleister, die Anfragen statt Bestellungen wollen: Handwerk, Kanzlei und Steuerberatung, Architektur, Immobilien, Fotografie, Freelancer, Agenturen.",
   "wann_nicht": "Wenn ein Buchungssystem die Anfrage ersetzt (dann termin-buchung-zwei-klick). Nicht als langes Formular mit mehr als 6 bis 7 Feldern auf der Startseite.",
   "varianten": [
    "Kurzformular: Name, E-Mail, Nachricht",
    "Anfrage mit Leistungsauswahl, PLZ, Zeitraum und Foto-Upload (Handwerk, Bewertung im Immobilienbereich)",
    "Erstgespräch oder Rückruf mit Wunschtag und Zeitfenster (Kanzlei, Steuerberatung, Makler)",
    "Projektanfrage mit Budget-Spanne und Termin (Agentur, Freelancer, Fotografie)",
    "Satz-Formular (Lückentext): die Anfrage als ein Satz mit höchstens 5 Lücken, Felder wachsen mit field-sizing: content (Kreativstudio, Freelancer, Eventlocation)"
   ],
   "umsetzung": "Natives <form novalidate> mit sichtbaren <label>, autocomplete (name, email, tel, postal-code) und inputmode. Auswahl als Radio-Gruppe in einem <fieldset> mit <legend>. Fehler per CSS :user-invalid oder, wie in der Demo, per JS: beim focusout prüfen (leer verlassene Felder noch nicht), danach bei jeder Eingabe neu prüfen, beim Absenden alles prüfen und das erste Fehlerfeld fokussieren. Meldungstexte je validity-Fall (valueMissing, typeMismatch, patternMismatch, tooShort). Upload per <input type=\"file\" accept=\"image/*\" multiple> mit Grössenhinweis. Versand serverseitig, kein mailto:. Spam-Schutz per Honeypot-Feld und Zeitstempel statt Captcha. Bestätigung in einem Bereich mit role=\"status\". Hinweis zum Datenschutz unter dem Button, keine vorab angehakte Einwilligung.",
   "mobil": "Einspaltig, Felder mindestens 48 px hoch, 16 px Schrift oder mehr gegen Zoom unter iOS. Passende Tastatur über type und inputmode (tel, email, numeric für die PLZ). Das Formular steht direkt unter der Einleitung, die direkten Wege darunter.",
   "reduzierte_bewegung": "Keine Bewegung nötig. Zustandswechsel (Fehler, Bestätigung) erscheinen ohne Animation.",
   "barrierefreiheit": "Sichtbare Labels, Platzhalter ersetzen kein Label. Optionale Felder als „(optional)“ markieren statt Pflichtfelder mit Sternchen. Fehler per aria-invalid und aria-describedby am Feld, nicht nur über Farbe (Symbol plus Text). Nach dem Senden Fokus auf die Überschrift der Bestätigung. Kontrast mindestens 4,5 : 1 für Text, 3 : 1 für Feldrahmen. Kopier-Feedback zusätzlich über eine role=\"status\"-Meldung."
  },
  "geprueft": "03.11.2026",
  "notiz": "Welt: Rezept immobilien-diskret-hochwertig mit der erfundenen Basler Maklerfirma Rhyhalde Immobilien AG (Schweizer Schreibweise ohne ß, PLZ vierstellig, 061-Nummern). Links Sandfläche mit Caslon-Headline, direkten Wegen und einem eigenen SVG-Aufriss des Grossbasler Rheinufers; rechts das Formular in Hanken Grotesk, Orange nur auf dem Absende-Knopf. Drei Varianten per Umschalter (Bewertung mit Objektart, PLZ, Zeitraum, Foto-Upload; Rückruf mit Wunschtag und Zeitfenster; Kurz mit drei Feldern), Headline und Einleitung wechseln mit. Die Vorführung füllt jede Variante mit einem gedachten Zeiger aus: falsche PLZ wird nach dem Verlassen markiert und beim Korrigieren sofort grün, beim Rückruf fehlt die Nummer beim Absenden, bei Kurz ist die E-Mail unvollständig; danach Bestätigung mit nächsten Schritten. Versand ist simuliert (900 ms), Fotos in der Vorführung per DataTransfer. AD-Review 01.11.2026: Note 5. Zwischen 821 und 1100 px überschrieb .intro p die Versal-Augenbraue auf 16 px; jetzt .intro p:not(.versal). Varianten 03.11.2026: Umschalter um „Satz“ ergänzt (?v=basis|satz). Die bisherigen drei Formulare bleiben die Grundvariante basis mit eigener Vorführung. „Satz“ spielt in eigener Welt (Rezept freelancer-stille-visitenkarte, Thea Liebetrau, Interface-Gestaltung, Erfurt): fieldset mit legend, fünf Lücken mit field-sizing: content (Baseline seit 16.06.2026, Firefox 152), min-width 3ch, max-width 100 %, versteckte Labels, Rückfall feste ch-Breiten. Vorführung: Name und Firma tippen (Lücken wachsen), Auswahl wechseln (select schrumpft), E-Mail unvollständig, Meldung, Korrektur, Bestätigung. Selbsturteil 4.",
  "varianten": [
   {
    "id": "basis",
    "name": "Anfrage-Sektion mit drei Formularen",
    "wann": "Makler, Handwerk, Kanzlei, Fotografie: eigene Kontakt-Sektion mit direkten Wegen links und Formular rechts, umschaltbar zwischen Bewertung (mit Foto-Upload), Rückruf und Kurzformular.",
    "werte": {
     "aufbau": "Grid 5fr/7fr, Sandfläche mit direkten Wegen, Formular mit sichtbaren Labels",
     "formulare": "Bewertung 7 Felder, Rückruf 5, Kurz 3",
     "rezept": "immobilien-diskret-hochwertig (Rhyhalde Immobilien, Basel)",
     "details": "siehe bau.werte"
    }
   },
   {
    "id": "satz",
    "name": "Satz-Formular (Lückentext)",
    "wann": "Kreativstudio, Freelancer, Eventlocation oder Hotel-Anfrage mit höchstens 5 Angaben: die Anfrage steht als ein Satz mit Lücken. Nicht bei mehr als 5 Feldern und nicht für Angaben mit festem Format wie IBAN.",
    "werte": {
     "aufbau": "form > fieldset.satz mit legend „Projektanfrage in einem Satz“, darin ein p mit 5 Feldern: Name (Pflicht), Firma (optional), Projektart (select), Start (select), E-Mail (Pflicht); jedes Feld mit eigenem label.unsichtbar (clip-path inset(50%))",
     "satz": "„Hallo Thea, ich bin [Name] von [Firma]. Wir brauchen [eine neue Website] und möchten [im Januar] starten. Am besten erreichen Sie mich unter [E-Mail].“",
     "feld": "field-sizing: content; min-width: 3ch; max-width: 100%; font: inherit; Unterstrich 1px #8a8a8a (3,4 : 1); select schrumpft auf die Auswahl, Pfeil als Hintergrund-SVG, padding-right .72em",
     "rueckfall": "@supports not (field-sizing: content): Name 9ch, Firma 11ch, E-Mail 13ch; select in natürlicher Breite der längsten Option",
     "platzhalter": "Newsreader Italic #646464 (5,9 : 1), ersetzt kein Label",
     "schrift": "Satz Host Grotesk 400 clamp(1.5rem, 1.05rem + 1.7vw, 2.25rem)/1.62, Laufweite −0.012em; „Hallo Thea,“ in Newsreader Italic 1.05em; Metazeile Geist Mono 11px versal .14em",
     "fokus": "outline 2px #2f5bea, Abstand 4px, Fläche #f0f0f0, Unterstrich blau",
     "fehler": "erst nach dem Verlassen (leer verlassene Felder bleiben ruhig), dann live; Meldungen als Liste unter dem Satz, je Feld per aria-describedby, aria-invalid, Unterstrich #b3261e",
     "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise), UI 150 ms, Einblenden 320 ms, Versatz 30 ms; Versand simuliert 700 ms",
     "knopf": "Konturpille 44px, Radius 999px, Rand 1px #0b0b09, Hover #f0f0f0",
     "bestaetigung": "role=status ersetzt den Satz: „Danke, Jana. Ihre Anfrage zu einem Redesign ist angekommen …“ plus drei Schritte mit Termin (nächster Werktag berechnet), Fokus auf die Überschrift",
     "farben": "#fcfcfc Grund, #0b0b09 Text, #646464 Sekundär, #e8e8e8 Linien, #2f5bea nur Fokus und Link-Hover",
     "rezept": "freelancer-stille-visitenkarte (Thea Liebetrau, Interface-Gestaltung, Erfurt)"
    }
   }
  ]
 }
}