{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "team-ueber-mich-layout",
 "name": "Team-/Über-mich-Layout mit Porträt-Interaktion",
 "name_en": "Team / about layout with portrait interactions",
 "kurz": "Köpfe einer Salzburger Kanzlei als einheitliche Rasterporträts mit Filter nach Rechtsgebiet: Beim Hover deckt ein clip-path von unten das private Bild samt Satz auf, dazu Namensliste und Statement mit Inline-Porträts.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "editorial",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "persönlich",
  "warm",
  "verspielt",
  "editorial"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "gsap",
  "clip-path"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Personen erscheinen als einheitlich bearbeitete Porträtreihe (gleicher Ausschnitt, gleiches Licht, Schwarzweiß oder Duoton) oder als große typografische Namensliste. Hover oder Fokus auf ein Porträt tauscht das ernste Bild gegen eine lockere Variante. In der Namensliste zeigt der Hover auf einen Namen das passende Porträt in einer festen Spalte. Über-uns-Seiten kombinieren ein großes Statement in Satzform mit kleinen Porträts zwischen den Wörtern und Fakten wie Ort, Gründung, Erfahrung oder Sprachen. Zu jeder Person gehören Funktion, Fachgebiet und direkter Kontakt als Text.",
  "warum_es_wirkt": "Menschen machen ein Unternehmen greifbar. Das ernste Bild steht für Kompetenz, das lockere zeigt Persönlichkeit. Weil der Wechsel erst auf Interesse hin passiert, bleibt die Seite seriös und wirkt trotzdem nahbar.",
  "wann_einsetzen": "Studios, Agenturen, Kanzleien, Beratungen, Praxen und Freelancer-Über-mich-Seiten. Teams bis etwa 20 Personen.",
  "wann_nicht": "Ohne einheitliches Fotomaterial, sonst wirkt die Reihe zusammengewürfelt. Bei sehr großen Teams (dann Filter und Liste). Wenn nicht alle Personen einem lockeren Bild zustimmen.",
  "varianten": [
   "Raster mit Filter nach Fachgebiet, Porträt-Tausch ernst/locker",
   "Namensliste mit Porträtspalte oder Hover-Porträt",
   "Statement-Satz mit Inline-Porträts",
   "Sticky-Team-Sektion",
   "Geschichtete Porträts, Video- oder WebGL-Porträts"
  ],
  "umsetzung": "Porträt-Tausch: zwei gestapelte Bilder, das lockere oben mit clip-path: inset(100% 0 0 0). Auf :hover und :focus-visible auf inset(0) animieren (power3.out, 300 bis 500 ms). Der Auslöser ist ein button mit aria-pressed, damit Tastatur und Touch denselben Zustand nutzen. Namensliste wie projektindex-hover-vorschau: eine Porträtspalte, das neue Bild deckt das alte per clip-path zu. Inline-Porträts: <span class=\"pille\"> mit height 1em, border-radius 0.5em und width 0, beim Einblenden auf etwa 1.5em aufklappen (gestaffelt). Alle Fotos vorab gleich bearbeiten: Ausschnitt, Licht, Farbe.",
  "mobil": "Porträts direkt sichtbar, kein Hover. Tausch per Tippen oder automatisch beim Durchscrollen. Namenslisten zeigen ein Daumenporträt in jeder Zeile.",
  "reduzierte_bewegung": "Kein Bildtausch, nur das Standardporträt. Zusatztexte dürfen ohne Bewegung erscheinen.",
  "barrierefreiheit": "Das ernste Porträt hat alt mit dem Namen, das lockere ist dekorativ (alt leer, aria-hidden). Namen, Funktion und Kontakt stehen als Text, nie im Bild. Der Tausch-Knopf ist per Tastatur erreichbar und meldet seinen Zustand mit aria-pressed. Telefon und E-Mail als echte Links."
 },
 "messwerte": {
  "easing": "power3.out",
  "dauer_ms": "300–500 Bildtausch",
  "stagger_ms": "",
  "distanz": "Inline-Bilder ca. 1–1.2em Höhe",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): data-module-team-canvas mit data-team-canvas-models – Team als WebGL-Porträts.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "TRIONN",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Team-Karten (.team-card) mit Video-Porträts (.team-video).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "projektindex-hover-vorschau",
  "split-screen-sticky-seiten",
  "bento-grid-interaktiv"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Strukturbelege aus dem HTML; Interaktion nicht im Detail vermessen. Awwwards-Inspirationen entfernt."
  ],
  "kategorie_alt": "Über mich & Team"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Köpfe einer Salzburger Kanzlei als einheitliche Rasterporträts mit Filter nach Rechtsgebiet: Beim Hover deckt ein clip-path von unten das private Bild samt Satz auf, dazu Namensliste und Statement mit Inline-Porträts.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) (power3.out) für alle Bewegungen",
   "tausch": "lockeres Bild liegt oben, clip-path inset(100% 0 0 0) → inset(0 0 0 0), 400 ms",
   "ernstes_bild": "scale 1 → 1.04, 400 ms (gleichzeitig mit dem Tausch)",
   "privat_zeile": "clip-path wie das Bild, 400 ms, 80 ms verzögert; Newsreader Italic 15 px",
   "liste_portraet": "neues Porträt per clip-path inset(100% 0 0 0) → inset(0), 400 ms, altes bleibt darunter stehen",
   "liste_nachbarn": "Deckkraft 0.32 in 125 ms, aktive Zeile rückt 0.18em ein (400 ms)",
   "liste_kartentext": "Ausblenden 125 ms, Text tauschen, Einblenden 125 ms",
   "inline_portraet": "Höhe 1em, border-radius 0.5em, width 0 → 1.5em in 500 ms, stagger 120 ms, Start nach 250 ms",
   "ui_ms": 125,
   "raster": "Porträts als Punktraster in #1e1e50 auf #efebeb, 45°, Rasterweite clamp(1.8, Breite/95, 3.4) CSS-px, in Anzeigegröße × Pixeldichte gerendert (kein Moiré)",
   "format": "Porträt 4:5, gleicher Ausschnitt und gleiches Licht für alle",
   "farben": "Grund #f9f8f8 · Fläche #efebeb · Linie #d2cdc7 · Marke #1e1e50 · Text #212529 · Meta #6e5f52 · Fokus #00bee6",
   "schriften": "Newsreader 400 (Überschriften, Namen, Zitate) · Schibsted Grotesk 400/500 (Text, Funktion, Kontakt)",
   "filter": "Chips nach Rechtsgebiet (Alle, Unternehmen, Arbeit, Immobilien & Bau, Privat & Nachfolge) mit Anzahl, aria-pressed; Trefferzahl als aria-live",
   "filter_umsortieren": "document.startViewTransition, je Person view-transition-name; Gruppe 500 ms, alt/neu 250 ms, neu 150 ms verzögert, power3.out; root ohne Animation. Ohne API oder bei reduzierter Bewegung sofort",
   "raster_spalten": "4 Spalten (unter 900 px: 2), 8 Personen"
  },
  "ausloeser": "hover",
  "touch": "Porträts direkt sichtbar. Ein Tipp auf ein Porträt schaltet zwischen ernst und privat um (aria-pressed). In der Namensliste entfällt die Porträtspalte; jede Zeile zeigt ein Daumenporträt, das per Tipp ebenfalls tauscht. Hinweistext lautet „Tippen“ statt „Fahren“.",
  "reduziert": "Kein Bildtausch: nur das ernste Standardporträt, kein Zoom. Die Privat-Zeile erscheint ohne Bewegung. Inline-Porträts stehen sofort offen, Listenporträts wechseln ohne Animation.",
  "korrekturen": {
   "beschreibung": "Personen erscheinen als einheitlich bearbeitete Porträtreihe (gleicher Ausschnitt, gleiches Licht, Schwarzweiß oder Duoton) oder als große typografische Namensliste. Hover oder Fokus auf ein Porträt tauscht das ernste Bild gegen eine lockere Variante. In der Namensliste zeigt der Hover auf einen Namen das passende Porträt in einer festen Spalte. Über-uns-Seiten kombinieren ein großes Statement in Satzform mit kleinen Porträts zwischen den Wörtern und Fakten wie Ort, Gründung, Erfahrung oder Sprachen. Zu jeder Person gehören Funktion, Fachgebiet und direkter Kontakt als Text.",
   "warum_es_wirkt": "Menschen machen ein Unternehmen greifbar. Das ernste Bild steht für Kompetenz, das lockere zeigt Persönlichkeit. Weil der Wechsel erst auf Interesse hin passiert, bleibt die Seite seriös und wirkt trotzdem nahbar.",
   "wann_einsetzen": "Studios, Agenturen, Kanzleien, Beratungen, Praxen und Freelancer-Über-mich-Seiten. Teams bis etwa 20 Personen.",
   "wann_nicht": "Ohne einheitliches Fotomaterial, sonst wirkt die Reihe zusammengewürfelt. Bei sehr großen Teams (dann Filter und Liste). Wenn nicht alle Personen einem lockeren Bild zustimmen.",
   "varianten": [
    "Raster mit Filter nach Fachgebiet, Porträt-Tausch ernst/locker",
    "Namensliste mit Porträtspalte oder Hover-Porträt",
    "Statement-Satz mit Inline-Porträts",
    "Sticky-Team-Sektion",
    "Geschichtete Porträts, Video- oder WebGL-Porträts"
   ],
   "umsetzung": "Porträt-Tausch: zwei gestapelte Bilder, das lockere oben mit clip-path: inset(100% 0 0 0). Auf :hover und :focus-visible auf inset(0) animieren (power3.out, 300 bis 500 ms). Der Auslöser ist ein button mit aria-pressed, damit Tastatur und Touch denselben Zustand nutzen. Namensliste wie projektindex-hover-vorschau: eine Porträtspalte, das neue Bild deckt das alte per clip-path zu. Inline-Porträts: <span class=\"pille\"> mit height 1em, border-radius 0.5em und width 0, beim Einblenden auf etwa 1.5em aufklappen (gestaffelt). Alle Fotos vorab gleich bearbeiten: Ausschnitt, Licht, Farbe.",
   "mobil": "Porträts direkt sichtbar, kein Hover. Tausch per Tippen oder automatisch beim Durchscrollen. Namenslisten zeigen ein Daumenporträt in jeder Zeile.",
   "reduzierte_bewegung": "Kein Bildtausch, nur das Standardporträt. Zusatztexte dürfen ohne Bewegung erscheinen.",
   "barrierefreiheit": "Das ernste Porträt hat alt mit dem Namen, das lockere ist dekorativ (alt leer, aria-hidden). Namen, Funktion und Kontakt stehen als Text, nie im Bild. Der Tausch-Knopf ist per Tastatur erreichbar und meldet seinen Zustand mit aria-pressed. Telefon und E-Mail als echte Links."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kanzlei-beratung-souveraen mit der erfundenen Kanzlei „Rainberg Rechtsanwälte“ aus Salzburg (Newsreader + Schibsted Grotesk, Nachtblau auf warmen Graus). Das Rezept nennt team-ueber-mich-layout selbst für die Sektion „Köpfe“. Drei Varianten per Umschalter: Porträtreihe (Tausch ernst/privat mit Privat-Satz), Namensliste mit Porträtspalte, Statement mit Inline-Porträts und Fakten. Die Porträts sind eigene Illustrationen: per Canvas in Graustufen gezeichnet und als Punktraster in Nachtblau gedruckt (Prinzip Zeitungs-Rasterporträt), damit alle wie aus einem Shooting wirken. Ohne Bibliothek. vorfuehren() spielt die gewählte Variante mit gezeichnetem Zeiger. AD-Review 01.11.2026: Note 4. Steckbrief-Beschreibung ohne Aufzählungsziffern. Varianten 01.11.2026: Varianten nach Regel 13 (?v=raster|liste|statement, Umschalter im Fuß schreibt die URL). Die Grundvariante ist jetzt ein Raster mit Filter nach Rechtsgebiet (Rezept kanzlei-beratung-souveraen: Köpfe filterbar nach Fachgebiet): acht Personen, darunter zwei Rechtsanwaltsanwärter, Umsortieren per View Transition. Liste und Statement zeigen weiter die sechs Anwälte. vorfuehren() spielt nur die gewählte Variante. Zugang 02.11.2026: --meta #8e7c6d → #6e5f52 (5,8:1, gleicher Braunton), Zähler in den Filterknöpfen opacity .62 → .72; bei ≤ 360 px Namen/Funktionen mit hyphens/overflow-wrap (kein Querscrollen); Knopf-Rahmen im Kontrastmodus.",
  "varianten": [
   {
    "id": "raster",
    "name": "Raster mit Filter",
    "wann": "Teams ab etwa sechs Personen, bei denen Besucher die passende Ansprechperson suchen: Kanzlei, Praxis, Architekturbüro, Handwerksbetrieb. Filter nach Fachgebiet oder Standort, Porträt-Tausch zeigt die Person hinter der Funktion.",
    "werte": {
     "aufbau": "Filterchips über einem 4-Spalten-Raster (Porträt 4:5), Name, Funktion, Sprachen, Telefon und E-Mail als Text",
     "tausch": "clip-path inset(100% 0 0 0) → inset(0), 400 ms, ernstes Bild scale 1 → 1.04",
     "filter": "View Transition 500 ms, power3.out, Trefferzahl aria-live",
     "vorfuehrung": "zwei Porträts tauschen, Filter „Arbeit“, ein Tausch, zurück auf „Alle“ (8,6 s)"
    }
   },
   {
    "id": "liste",
    "name": "Namensliste mit Hover-Porträt",
    "wann": "Ruhige, textbetonte Seiten mit vielen Namen: Beratung, Kanzlei, Agentur, Hochschule. Die Namen tragen die Seite, das Porträt erscheint erst auf Interesse in einer festen Spalte.",
    "werte": {
     "aufbau": "Liste minmax(0, 1fr), Porträtspalte minmax(220px, 27%) sticky top 24px",
     "namen": "Newsreader clamp(26px, 2.9vw, 42px), Nachbarn auf 0.32 in 125 ms, aktive Zeile rückt 0.18em ein (400 ms)",
     "portraet": "neues Bild clip-path inset(100% 0 0 0) → inset(0), 400 ms, altes bleibt darunter",
     "touch": "Daumenporträt 56 px in jeder Zeile, Tippen tauscht",
     "vorfuehrung": "Zeiger fährt sechs Namen ab, je 0,9 s"
    }
   },
   {
    "id": "statement",
    "name": "Statement-Satz mit Inline-Bildern",
    "wann": "Über-uns oder Über-mich in einem Satz: Freelancer, Coach, kleines Studio, Praxis. Der Satz erzählt, die kleinen Porträts zeigen, wer gemeint ist; darunter Fakten wie Gründung, Größe, Sprachen.",
    "werte": {
     "aufbau": "Satz in Newsreader clamp(1.9rem, 0.9rem + 3.5vw, 4.25rem), max. 29ch, darunter vier Fakten",
     "pille": "height 1em, border-radius 0.5em, width 0 → 1.5em in 500 ms, Versatz 120 ms, Start nach 250 ms",
     "hover": "lockeres Porträt per clip-path, 400 ms",
     "vorfuehrung": "Pillen klappen auf, zwei Porträts tauschen (5,8 s)"
    }
   }
  ]
 }
}