{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "ansprechperson-band",
 "name": "Ansprechperson-Band",
 "name_en": "Named contact person band with direct line and response time",
 "kurz": "Band am Ende einer Leistungsseite: Tischlermeisterin aus Uelzen mit Bild, Durchwahl, Antwortzeit und Live-Status aus den Telefonzeiten, im Urlaub mit Vertretung; als Kanzlei- und Praxisvariante.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "persönlich",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "intl",
  "container-queries",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Statt „Jetzt Kontakt aufnehmen“ steht am Ende einer Leistungsseite eine echte Person: Foto oder Platzhalter, Name, Rolle, Zuständigkeit, Direktdurchwahl, E-Mail und eine ehrliche Antwortzeit („Rückruf heute bis 16 Uhr“). Ein Status rechnet aus den Sprechzeiten, ob die Person gerade erreichbar ist, und nennt sonst den nächsten Zeitpunkt oder die Vertretung. Das Band ist für Unterseiten von Handwerk, Kanzlei und Praxis gedacht: je Leistung die passende Person.",
  "warum_es_wirkt": "Ein Name mit Durchwahl senkt die Hürde zum Anruf stärker als jedes Formular. Man weiß, wer abnimmt und wann man mit einer Antwort rechnen kann. Ein Foto oder ein sauberer Platzhalter macht aus dem Betrieb Menschen. Die ehrliche Antwortzeit erspart Nachfragen und zeigt, dass der Betrieb seine Zusage kennt.",
  "wann_einsetzen": "Am Ende jeder Leistungs-, Produkt- oder Rechtsgebietsseite, wenn es eine zuständige Person gibt. Handwerk (Meisterin für Bäder), Kanzlei (Fachanwalt für Arbeitsrecht mit Sekretariat), Praxis (Rezeption mit Telefonzeiten), Industrie (Anwendungstechnik), Pflege (Pflegedienstleitung).",
  "wann_nicht": "Nicht, wenn die Person nicht zustimmt (Foto und Name nur mit Einwilligung, vom Kunden prüfen lassen). Nicht mit einer Antwortzeit, die der Betrieb nicht hält. Nicht als Ersatz für Notdienst- oder Notfallhinweise: In der Praxis steht bei Notfällen 112 und der ärztliche Bereitschaftsdienst 116 117 vor der Person. Nicht bei großen Teams, in denen niemand fest zuständig ist; dann zentrale Nummer.",
  "varianten": [
   "Handwerk: Meisterin mit Foto, Durchwahl, Rückrufzeit und Vertretung im Urlaub",
   "Kanzlei: Fachanwalt mit Sekretariat, Rückruf-Zeitfenster und Hinweis zur Erstberatung",
   "Praxis: Rezeption mit Telefonzeiten, Online-Termin als Nebenweg und Notfallhinweis zuerst"
  ],
  "umsetzung": "1. Ein <aside aria-labelledby> am Ende der Leistungsseite, nicht im Footer. 2. Foto als <img> mit Alternativtext „Porträt von …“, Seitenverhältnis 4 : 5, fest per aspect-ratio; ohne Foto ein Platzhalter mit Initialen in der Markenfarbe (kein Silhouetten-Icon). 3. Name als Überschrift, darunter Rolle und Zuständigkeit in einem Satz. 4. Durchwahl als tel:-Link mit E.164 im href und DIN-5008-Schreibweise im Text, E-Mail als mailto:-Link mit Betreff zur Leistung. 5. Sprechzeiten als Daten (Wochentag, von, bis); ein kleines Skript rechnet in Europe/Berlin, ob jetzt erreichbar, und schreibt Status und nächsten Zeitpunkt in eine Zeile mit role=\"status\". Ohne JS stehen die Sprechzeiten als Text. 6. Antwortzeit als Satz, den der Betrieb hält („Rückruf am selben Werktag bei Anruf vor 14 Uhr“). 7. Abwesenheit: Datum bis und Vertretung mit eigener Durchwahl. 8. Layout per Container Query: breit als Band mit Foto links, schmal als Karte. 9. Einwilligung für Foto und Namen vom Kunden prüfen lassen.",
  "mobil": "Als Karte: Foto oben im Format 4 : 5 bis höchstens 40 % der Bildschirmhöhe, darunter Name, Status und zwei große Knöpfe „Anrufen“ und „E-Mail“ über die volle Breite. Die Nummer bleibt als Text sichtbar.",
  "reduzierte_bewegung": "Status und Foto erscheinen ohne Übergang.",
  "barrierefreiheit": "Eigene Landmarke (aside) mit Namen. Statuszeile als Text, nicht nur als Farbpunkt; Wechsel per role=\"status\". Links mit sichtbarer Nummer, kein „Hier klicken“. Platzhalter-Initialen sind aria-hidden, der Name steht als Text daneben. Kontrast 4,5 : 1 auch im Status."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.2, 0, 0.38, 0.9); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9)",
  "dauer_ms": "150 Hover und Farbe, 240 Statuswechsel, 400 Bild-Einblendung",
  "stagger_ms": "",
  "distanz": "höchstens 8 px",
  "sonstiges": "token-tech-praezise aus dem Rezept handwerk-werkstatt-klartext",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept handwerk-werkstatt-klartext"
 },
 "kurve": {
  "bezier": [
   0.2,
   0.0,
   0.38,
   0.9
  ],
  "css": "cubic-bezier(0.2, 0, 0.38, 0.9)",
  "name": "eigene Kurve",
  "dauer_ms": 240
 },
 "gesehen_bei": [
  {
   "seite": "Siloanlagen Achberg: Ausbildungsstelle Mechatroniker",
   "url": "https://www.achberg.com/karriere/ausbildung/ausbildung-zum-mechatroniker-m-w-d/",
   "auszeichnung": "",
   "beobachtung": "Aus der Rezept-Recherche vom 02.11.2026 (WebFetch als Text, am 04.11. nicht erneut abrufbar): Ansprechperson Personal mit Durchwahl, Start ohne Unterlagen mit Telefonat oder Rückruf-Formular.",
   "art": "website"
  },
  {
   "seite": "BESSER UMSORGT: Grundpflege",
   "url": "https://besser-umsorgt.de/grundpflege.html",
   "auszeichnung": "",
   "beobachtung": "Aus der Rezept-Recherche vom 02.11.2026 (WebFetch als Text, am 04.11. nicht erneut abrufbar): Leistungsseite mit Ablauf in vier Schritten, Start mit festen Ansprechpartnern, Pflegedienstleitung mit Name und Rolle; Karriereseite mit drei Ansprechpersonen.",
   "art": "website"
  },
  {
   "seite": "Schloss Hohenkammer: Heiraten",
   "url": "https://www.schlosshohenkammer.de/Heiraten",
   "auszeichnung": "",
   "beobachtung": "Aus der Rezept-Recherche vom 02.11.2026 (WebFetch als Text): feste Ansprechperson mit Namen für die Hochzeit.",
   "art": "website"
  },
  {
   "seite": "Fundus-Rezept industrie-b2b-mittelstand",
   "url": "https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/",
   "auszeichnung": "",
   "beobachtung": "Intern: Das Rezept verlangt je Branche oder Region eine Person mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail und Sprachen; die Anfrage nennt, wann geantwortet wird. Pflege verlangt eine Ansprechperson mit Foto. Ein Muster dafür fehlte.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Intl.DateTimeFormat (timeZone)",
   "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"
  },
  {
   "titel": "MDN: Container-Queries",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries"
  }
 ],
 "kombinierbar_mit": [
  "leistungsseite-antwort-zuerst",
  "oeffnungszeiten-status",
  "kontakt-anfrage-formular",
  "team-ueber-mich-layout",
  "mobile-bottom-navigation",
  "firmendaten-strukturiert"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: Rezepte industrie und pflege verlangen die Person, ein eigenes Muster fehlte. Award-Beleg nicht gefunden.",
   "Die drei Website-Belege stammen aus der Rezept-Recherche vom 02.11.2026. Am 04.11. ließen sich die Seiten aus dieser Sitzung nicht erneut abrufen.",
   "Keine Seite mit allen Teilen (Foto, Durchwahl, Antwortzeit, Live-Status) gefunden. Live-Status und Vertretung sind eigene Festlegung.",
   "Foto, Name und Durchwahl einer Person sind personenbezogene Daten: Einwilligung vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Band am Ende einer Leistungsseite: Tischlermeisterin aus Uelzen mit Bild, Durchwahl, Antwortzeit und Live-Status aus den Telefonzeiten, im Urlaub mit Vertretung; als Kanzlei- und Praxisvariante.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "markup": "<aside aria-labelledby> mit h2 Name, Status als <p role=\"status\">",
   "bild": "4 : 5, mobil höchstens 40svh; ohne Foto Initialen auf Markenfläche mit „Foto folgt“",
   "status": "Intl.DateTimeFormat timeZone Europe/Berlin, Sprechzeiten als Daten [Wochentag, von, bis], neu jede Minute",
   "zustaende": "offen (grün) · warten/Pause (braun) · zu (grau) · Urlaub mit Vertretung",
   "telefon": "DIN 5008 im Text, E.164 im href",
   "mail": "mailto mit Betreff der Leistung",
   "layout": "@container band (min-width: 46rem): Grundvariante 3fr/5fr/4fr, Kanzlei 2fr/6fr/4fr, Praxis 7fr/5fr",
   "easing": "cubic-bezier(0.2, 0, 0.38, 0.9)",
   "easing_ein": "cubic-bezier(0, 0, 0.38, 0.9)",
   "dauer_ms": 240,
   "hover_ms": 150,
   "bild_ms": 400,
   "distanz": "Status 4 px nach oben"
  },
  "ausloeser": "klick",
  "touch": "Unter 46rem Containerbreite Karte: Bild oben, darunter Name, Status, zwei Knöpfe über die volle Breite (17 px Innenabstand ohne Hover). Nummer bleibt als Text sichtbar.",
  "reduziert": "Status, Vertretung und Bild erscheinen ohne Überblendung und ohne Versatz.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Rezept handwerk-werkstatt-klartext (Grundvariante), dazu kanzlei-beratung-souveraen und praxis-gesundheit-ruhig. Marken Tischlerei Brandtner, Weidmann Ohlrogge Rechtsanwälte, Hausarztpraxis an der Ilmenau; Stadt Uelzen. Neu am 04.11.2026 (Runde 4). Abgrenzung: team-ueber-mich-layout ist die Teamübersicht, hier eine zuständige Person je Leistungsseite. Porträts sind gezeichnete SVG-Platzhalter, im Projekt echtes Foto mit Einwilligung (vom Kunden prüfen lassen). Selbsturteil 4.",
  "varianten": [
   {
    "id": "handwerk",
    "name": "Handwerk",
    "wann": "Leistungsseiten von Tischlerei, SHK, Elektro und Bau: Meisterin oder Meister mit Rückrufzeit und Vertretung.",
    "werte": {
     "rezept": "handwerk-werkstatt-klartext",
     "schrift": "Special Gothic 700 wdth 85 / Atkinson Hyperlegible Next",
     "signal": "#FB6100 nur für Anrufen, Text #1A1A1A",
     "radius": "8px Band, 4px Knöpfe"
    }
   },
   {
    "id": "kanzlei",
    "name": "Kanzlei",
    "wann": "Rechtsgebietsseiten von Kanzlei und Steuerberatung: Fachanwältin mit Sekretariat und Rückruf innerhalb eines Werktags.",
    "werte": {
     "rezept": "kanzlei-beratung-souveraen",
     "schrift": "Newsreader 400 / Schibsted Grotesk",
     "signal": "#1E1E50 Fläche, Fokus #0084A1",
     "radius": "0",
     "easing": "cubic-bezier(0.25, 1, 0.5, 1)",
     "dauer_ms": 250,
     "hover_ms": 125,
     "layout": "Linie oben statt Fläche, 2fr/6fr/4fr"
    }
   },
   {
    "id": "praxis",
    "name": "Praxis",
    "wann": "Leistungsseiten von Arzt-, Therapie- und Pflegepraxen: Empfang mit Telefonzeiten, Notfallhinweis zuerst, Online-Termin als Nebenweg.",
    "werte": {
     "rezept": "praxis-gesundheit-ruhig",
     "schrift": "Hedvig Letters Serif / Google Sans Flex",
     "signal": "#005450",
     "notfall": "112 und 116 117 vor der Person auf #FFC776",
     "radius": "16px Karte, Pille für Knöpfe",
     "layout": "7fr/5fr, Bild rechts"
    }
   }
  ]
 }
}
