# B2in Schaufenster-Display – Entwicklungskonzept

**Status:** Entwicklungsvorlage | Februar 2026

---

## 1. Projektübersicht

### 1.1 Zweck

Ein großformatiges Display im Schaufenster des CABINET Stores in Bielefeld zeigt B2in-Content im Hochformat (9:16). Ziel: Laufkundschaft in 3–5 Sekunden eine klare Botschaft vermitteln – B2in als Marke für internationale Immobilien und exklusive Einrichtungskonzepte. Das Display läuft parallel zum CABINET-Schaufenster und ist eigenständig gebrandet.

### 1.2 Technischer Ansatz

Die Anzeige wird als Webapp unter einer Subdomain ( Subdomain (`cabinet.b2in.eu/info <- live / [`https://b2in.test/_cabinet](https://b2in.test/_cabinet)/info ← testserver)  bereitgestellt. Ein Smart TV mit android greift im Vollbildmodus über den Browser darauf zu. Inhalte (Videos, Bilder, Texte) werden über das B2in-Backend (CMS) gepflegt und rotieren automatisch.

### 1.3 Branding

Ausschließlich B2in-Branding. Kein CABINET-Logo, kein Azizi, keine Partnerlogos. Der Frame zeigt: B2in-Logo, Claim "Connecting Design & Property", Marcel Scheibe als Person, b2in.de und QR-Code.

---

## 2. Display-Architektur

### 2.1 Formatierung

Das Display steht im **9:16 Hochformat (Portrait)**. Das Videomaterial liegt im **16:9 Querformat** vor. Daraus ergibt sich ein natürlicher Split:

`┌─────────────────────────┐
│  HEADER                 │  ← Fester Bereich: Logo + Claim
│  B2in · Claim           │
├─────────────────────────┤
│                         │
│                         │  ← Oberer Leerraum (Gradient zum Video)
│  ┌───────────────────┐  │
│  │                   │  │
│  │   VIDEO / BILD    │  │  ← 16:9 Content-Bereich (rotierend)
│  │   (16:9)          │  │
│  │                   │  │
│  └───────────────────┘  │
│                         │  ← Unterer Leerraum (Gradient zum Text)
│                         │
├─────────────────────────┤
│  TEXTFELD               │  ← Rotierender Text (Headline + Subline)
│  Headline + Subline     │
├─────────────────────────┤
│  FOOTER                 │  ← Fester Bereich: Name + URL + QR
│  Marcel Scheibe · QR    │
└─────────────────────────┘`

### 2.2 Bereiche im Detail

| # | Bereich | Inhalt | Verhalten |
| --- | --- | --- | --- |
| 1 | **Header** | B2in-Logo (links) + Claim "Connecting Design & Property" (rechts). | Fest. Steht permanent, unabhängig vom Content. |
| 2 | **Content-Bereich** | 16:9 Video (MP4) oder Einzelbild (JPG/PNG). Nimmt ca. 50–60% der Screenhöhe ein. Oben und unten Gradient-Übergang zum dunklen Hintergrund. | Rotiert automatisch. Reihenfolge und Dauer per CMS steuerbar. |
| 3 | **Textfeld** | Headline (max. 40 Zeichen) + Subline (max. 80 Zeichen). Passt sich dem aktuellen Content an. | Wechselt synchron mit dem Video/Bild. Sanfte Fade-Transition. |
| 4 | **Footer** | "Marcel Scheibe" (Name) + "b2in.de" (URL) + QR-Code (rechts). | Fest. Steht permanent. |

---

## 3. Content-Rotation (Playlist-System)

### 3.1 Konzept

Das Display zeigt eine Playlist von Content-Items, die automatisch durchrotieren. Jedes Item besteht aus einem Medienelement (Video oder Bild) plus passendem Text.

### 3.2 Gewichtung

Die Rotation folgt einer definierten Gewichtung:

| Kategorie | Anteil | Beispiel-Content |
| --- | --- | --- |
| **Immobilien** | ~70% | Dubai-Projekte, internationale Lifestyle-Aufnahmen, Architektur |
| **Möbel / Einrichtung** | ~30% | Lokale Händler-Highlights, Einrichtungskonzepte, Interior-Design |

Die Gewichtung wird über ein `category`-Feld pro Item gesteuert. Das Frontend berechnet die Rotation so, dass die Verteilung über einen Durchlauf eingehalten wird (z. B. bei 10 Items: 7× Immobilien, 3× Möbel).

### 3.3 Content-Item Struktur

Jedes Playlist-Item hat folgende Eigenschaften:

| Feld | Typ | Beschreibung |
| --- | --- | --- |
| `id` | Auto | Eindeutige ID |
| `title` | Text (intern) | Interner Name zur Identifikation im CMS (wird nicht angezeigt) |
| `category` | Dropdown | `immobilien` | `moebel` – bestimmt die Gewichtung in der Rotation |
| `media_type` | Dropdown | `video` | `image` |
| `media_file` | Upload (MP4/JPG/PNG) | Mediendatei. Videos: MP4, H.264, max. 1080p. Bilder: JPG/PNG, min. 1920x1080. |
| `media_url` | URL (optional) | Alternative zu Upload: Externe Video-/Bild-URL. Wird bevorzugt wenn vorhanden. |
| `headline` | Text | Max. 40 Zeichen. Wird im Textfeld angezeigt. |
| `subline` | Text | Max. 80 Zeichen. Erklärender Text unter der Headline. |
| `duration_seconds` | Zahl | Anzeigedauer in Sekunden. Für Bilder: empfohlen 8–12 Sek. Für Videos: wird ignoriert, Dauer ergibt sich aus Videolänge. |
| `sort_order` | Zahl | Reihenfolge in der Playlist. Niedrigste Zahl zuerst. |
| `is_active` | Toggle | Aktiv/Inaktiv. Inaktive Items werden übersprungen. |

### 3.4 Beispiel-Playlist

| # | Titel (intern) | Kategorie | Typ | Headline | Subline | Dauer |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Dubai Skyline Video | immobilien | video | Internationale Immobilien — Ihr Einstieg. | Beratung, Begleitung und Vermittlung. Persönlich. Transparent. | (Video) |
| 2 | Dubai Villa Rendering | immobilien | image | Ihr Zuhause. Weltweit. | Von Dubai bis Europa – wir finden Ihre Immobilie. | 10s |
| 3 | Möbel Showroom | moebel | image | Exklusive Einrichtung — Lokal. Für Sie. | Kuratierte Möbelkonzepte von lokalen Fachhändlern. | 10s |
| 4 | Dubai Pool Lifestyle | immobilien | video | Dubai. Lissabon. Und morgen? | Internationale Immobilien als Kapitalanlage. | (Video) |
| 5 | Dubai Apartment Tour | immobilien | video | Neubau ab 3.000 €/m² | Wertsteigerung. Steuervorteile. Persönliche Begleitung. | (Video) |
| 6 | Interior Design Mood | moebel | image | Lokale Händler. Echte Stücke. | Ausstellungsstücke und Designmöbel aus Ihrer Region. | 10s |
| 7 | Dubai Cityscape Drone | immobilien | video | Ihr Immobilien-Dolmetscher. | Marcel Scheibe begleitet Sie durch den gesamten Kaufprozess. | (Video) |

---

## 4. CMS-Felder (B2in-Backend)

Im B2in-Backend wird ein eigener Bereich „B2in Display" angelegt mit zwei Ebenen: globale Einstellungen und die Playlist-Items.

### 4.1 Globale Einstellungen

| Feldname | Typ | Beschreibung |
| --- | --- | --- |
| `display_active` | Toggle | Master-Schalter. Wenn deaktiviert, zeigt das Display einen Standby-Screen (nur Logo). |
| `footer_name` | Text | Name im Footer. Standard: "Marcel Scheibe" |
| `footer_url` | Text | URL im Footer. Standard: "b2in.de" |
| `qr_code_image` | Upload (PNG/SVG) | QR-Code Asset für den Footer. |
| `rotation_weight_immobilien` | Zahl (%) | Soll-Anteil Immobilien-Content. Standard: 70. |
| `rotation_weight_moebel` | Zahl (%) | Soll-Anteil Möbel-Content. Standard: 30. |
| `default_image_duration` | Zahl (Sek.) | Standard-Anzeigedauer für Bilder, wenn beim Item nichts eingetragen. Standard: 10. |
| `transition_type` | Dropdown | `fade` | `slide` | `crossfade` – Übergangseffekt zwischen Items. Standard: crossfade. |
| `transition_duration_ms` | Zahl | Dauer der Transition in Millisekunden. Standard: 800. |

### 4.2 Playlist-Items

Wiederholbare Einträge (Repeater-Feld oder eigene Collection), Felder wie in Abschnitt 3.3 definiert.

### 4.3 Zeichenlimit-Hinweise für Marcel

Im CMS sollten bei den Textfeldern visuelle Hinweise erscheinen:

- **Headline:** Zähler „12/40 Zeichen" – wird rot ab 35
- **Subline:** Zähler „45/80 Zeichen" – wird rot ab 70
- **Begründung:** Auf dem Display müssen die Texte in 3 Sekunden lesbar sein. Längere Texte werden nicht gelesen.

---

## 5. API-Endpoint

### 5.1 Endpoint-Struktur

`GET /api/b2in-display/playlist`

**Response (JSON):**

json

`{
  "settings": {
    "display_active": true,
    "footer_name": "Marcel Scheibe",
    "footer_url": "b2in.de",
    "qr_code_url": "/assets/qr-b2in.svg",
    "rotation_weights": {
      "immobilien": 70,
      "moebel": 30
    },
    "default_image_duration": 10,
    "transition": {
      "type": "crossfade",
      "duration_ms": 800
    }
  },
  "items": [
    {
      "id": 1,
      "category": "immobilien",
      "media_type": "video",
      "media_url": "/media/display/dubai-skyline.mp4",
      "headline": "Internationale Immobilien — Ihr Einstieg.",
      "subline": "Beratung, Begleitung und Vermittlung. Persönlich. Transparent.",
      "duration_seconds": null,
      "sort_order": 1,
      "is_active": true
    },
    {
      "id": 2,
      "category": "moebel",
      "media_type": "image",
      "media_url": "/media/display/showroom-lokal.jpg",
      "headline": "Exklusive Einrichtung — Lokal. Für Sie.",
      "subline": "Kuratierte Möbelkonzepte von lokalen Fachhändlern.",
      "duration_seconds": 10,
      "sort_order": 3,
      "is_active": true
    }
  ],
  "updated_at": "2026-02-26T14:30:00Z"
}`

### 5.2 Update-Mechanismus (Polling)

Gleicher Ansatz wie beim CABINET Info-Tablet:

**1. Lightweight Check (alle 60 Sekunden):**

`GET /api/b2in-display/check`

json

`{ "updated_at": "2026-02-26T14:30:00Z" }`

**2. Full Fetch (nur bei Änderung):**
Wenn Timestamp abweicht → komplette Playlist neu laden. Laufendes Video wird zu Ende gespielt, dann greift die neue Playlist.

**Warum 60 statt 30 Sekunden?** Das Display zeigt eine Playlist, keine Echtzeit-Infos. Wenn Marcel ein neues Video hochlädt, ist eine Verzögerung von maximal 60 Sekunden völlig akzeptabel.

---

## 6. Frontend-Logik

### 6.1 Playlist-Engine

Das Frontend implementiert eine einfache Playlist-Engine:

`Ablauf:
1. Playlist laden (API-Call)
2. Nur aktive Items filtern (is_active === true)
3. Items nach sort_order sortieren
4. Gewichtung anwenden:
   - Items nach Kategorie gruppieren
   - Rotation so mischen, dass die %-Verteilung eingehalten wird
   - Beispiel bei 70/30: I, I, M, I, I, I, M, I, I, M (bei 10 Items)
5. Erstes Item anzeigen
6. Bei Video: Warten bis Video endet → nächstes Item
7. Bei Bild: duration_seconds abwarten → nächstes Item
8. Am Ende der Playlist: Von vorne beginnen
9. Zwischen Items: Transition (crossfade/fade/slide)`

### 6.2 Video-Handling

| Aspekt | Spezifikation |
| --- | --- |
| **Format** | MP4, H.264 Codec, max. 1080p (1920x1080) |
| **Autoplay** | Videos starten automatisch, gemutet (Browser-Policy). Ton ist nicht relevant für Schaufenster-Display. |
| **Ladezeit** | Videos werden im Hintergrund vorgeladen (nächstes Item in der Playlist wird gepreloaded während das aktuelle läuft). |
| **Fehlerfälle** | Wenn ein Video nicht lädt (404, Netzwerkfehler): Item überspringen, nächstes anzeigen. Fehler loggen. |
| **Loop** | Kein Loop pro Video. Jedes Video spielt einmal, dann kommt das nächste Playlist-Item. |

### 6.3 Bild-Handling

| Aspekt | Spezifikation |
| --- | --- |
| **Format** | JPG oder PNG, min. 1920x1080 Pixel |
| **Skalierung** | `object-fit: cover` – Bild füllt den 16:9-Bereich, wird bei Bedarf beschnitten. |
| **Dauer** | Aus `duration_seconds` des Items oder `default_image_duration` aus den globalen Settings. |
| **Ken-Burns-Effekt (optional)** | Langsamer Zoom-In während der Anzeigedauer. Macht statische Bilder lebendiger. Per CSS-Animation, kein JavaScript nötig. |

### 6.4 Text-Synchronisation

Headline und Subline wechseln synchron mit dem Media-Content:

1. Aktuelles Textfeld ausblenden (fade-out, 400ms)
2. Neuen Text setzen
3. Neues Textfeld einblenden (fade-in, 400ms)
4. Timing: Text-Transition startet 200ms vor dem Media-Wechsel, damit beides gleichzeitig erscheint.

---

## 7. Technische Stabilität & Kiosk-Betrieb

### 7.1 Hardware-Setup

| Komponente | Empfehlung |
| --- | --- |
| **Display** | TV/Monitor im Hochformat (9:16), 43–55 Zoll. Full HD ausreichend (1080x1920 in Portrait). LED/LCD mit hoher Helligkeit (min. 350 nits, ideal 500+ nits für Schaufenster mit Sonneneinstrahlung). |
| **Media Player** | Dedizierter Android-Stick oder -Box (z. B. Amazon Fire TV Stick 4K, Xiaomi Mi Box, oder professionell: BrightSign). Alternativ: Smart TV mit Browser. |
| **Kiosk-Software** | Fully Kiosk Browser (wenn Android). Bei BrightSign: eigene Kiosk-Funktionalität. |
| **Halterung** | VESA-Wandhalterung, Portrait-Montage. Ggf. mit Blickwinkelschutz-Folie wenn das Display zu nah an der Scheibe steht. |
| **Stromversorgung** | Dauerstrom. Optional: Zeitschaltuhr oder Smart Plug für automatisches Ein/Aus (z. B. 07:00–22:00). |
| **WLAN** | Stabiles Store-WLAN. Bei Verbindungsproblemen: LAN-Adapter als Fallback. |

### 7.2 Webapp-seitige Stabilität

| Maßnahme | Beschreibung |
| --- | --- |
| **Auto-Reload** | Kompletter Page-Reload alle 6 Stunden. Räumt Speicher auf – besonders wichtig bei Video-Wiedergabe, die Memory Leaks verursachen kann. |
| **Video-Memory-Management** | Nach jedem Video: `src` des Video-Elements leeren und neu setzen, damit der Browser den Speicher freigibt. Kein Stapeln von Video-Elementen. |
| **Offline-Fallback** | Wenn API nicht erreichbar: Letzte Playlist aus localStorage abspielen. Kein schwarzer Bildschirm. |
| **Connection-Recovery** | Polling-Fehler 3x hintereinander → 5 Min. Pause → erneut versuchen. Nach 30 Min. ohne Verbindung → Page-Reload. |
| **Lokaler Cache** | Playlist-JSON wird in localStorage gespeichert. Mediendateien werden im Browser-Cache gehalten (Cache-Control Headers serverseitig setzen, z. B. `max-age=86400`). |
| **Standby-Modus** | Optionaler CMS-Toggle: Wenn `display_active = false`, zeigt die Webapp nur das B2in-Logo auf dunklem Hintergrund. Kein Content, kein Textfeld. |
| **Error-Overlay** | Bei kritischen Fehlern (keine Playlist, kein Media): Dezentes B2in-Logo auf dunklem Hintergrund. Niemals ein Browser-Fehlerbild oder weißer Screen. |
| **Automatischer Playlist-Neustart** | Wenn die Playlist durchgelaufen ist und das nächste Polling eine Änderung zeigt: Neue Playlist nahtlos übernehmen. |

### 7.3 Performance-Hinweise

- Videos sollten für Web optimiert sein: MP4, H.264, AAC Audio (auch wenn gemutet), `moov atom` am Anfang der Datei (für schnellen Start)
- Empfohlene Bitrate: 5–8 Mbit/s für 1080p
- Bilder sollten als WebP oder komprimiertes JPG vorliegen (max. 500 KB pro Bild)
- Preloading: Immer das nächste Item vorladen, während das aktuelle abgespielt wird

---

## 8. Frontend-Spezifikation

### 8.1 Technologie

- HTML/CSS/JS (Vanilla). Kein Framework nötig.
- Responsive für gängige Display-Auflösungen im 9:16 Portrait (1080x1920, 720x1280)

### 8.3 Transitions zwischen Items

| Transition-Typ | Beschreibung |
| --- | --- |
| `fade` | Aktuelles Item blendet aus (opacity 1→0), neues blendet ein (opacity 0→1). |
| `crossfade` | Neues Item blendet über dem aktuellen ein. Sanfter, da kein schwarzer Zwischenzustand. **Empfohlen.** |
| `slide` | Aktuelles Item gleitet nach links raus, neues kommt von rechts rein. |

Standard: **crossfade** mit 800ms. Per CMS änderbar.

---

## 9. Leitplanken für Content-Pflege

**Diese Regeln sollten im CMS als Hinweistext sichtbar sein:**

### ✓ Ja, so machen wir es:

- **Ein Item, eine Botschaft.** Jedes Playlist-Item hat eine klare Aussage: Immobilien ODER Möbel.
- **Texte kurz halten.** Headline max. 40 Zeichen, Subline max. 80 Zeichen. Was in 3 Sekunden nicht gelesen werden kann, wird nicht gelesen.
- **Nur B2in-Content.** Keine Partnerlogos im Video/Bild. Kein Azizi-Branding. Kein CABINET.
- **Hochwertige Medien.** Nur professionelles Video-/Bildmaterial. Keine Handy-Fotos, keine Screenshots.
- **Regelmäßig aktualisieren.** Playlist mindestens quartalsweise prüfen. Abgelaufene Projekte rausnehmen.

### ✗ Das vermeiden wir:

- **Zu viele Items.** Max. 8–10 Items in der Playlist. Mehr führt zu langer Rotation, Wiederholung wird selten.
- **Text im Video.** Wenn das Video bereits Text enthält, Headline und Subline reduzieren oder leer lassen – sonst doppelt sich die Information.
- **Preislisten oder Grundrisse.** Das Display weckt Neugier, es informiert nicht. Details gehören auf die Website.
- **Verschiedene Botschaften mischen.** Kein Item, das gleichzeitig Dubai, Möbel und CABINET bewirbt.

---

## 10. Umsetzungs-Checkliste

| # | Aufgabe | Verantwortlich | Status |
| --- | --- | --- | --- |
| 1 | CMS-Bereich "B2in Display" anlegen: Globale Settings + Playlist-Repeater (Abschnitt 4) | Backend-Entwicklung | Offen |
| 2 | API-Endpoint `/api/b2in-display/playlist` + `/check` implementieren (Abschnitt 5) | Backend-Entwicklung | Offen |
| 3 | Media-Upload-Funktion im CMS (MP4 + JPG/PNG) mit Größen-Validierung | Backend-Entwicklung | Offen |
| 4 | Frontend-Webapp mit Playlist-Engine bauen (Abschnitt 6) | Frontend-Entwicklung | Offen |
| 5 | Video-Preloading + Memory-Management implementieren (Abschnitt 6.2 + 7.2) | Frontend-Entwicklung | Offen |
| 6 | Polling-Mechanismus + Offline-Fallback + Auto-Reload (Abschnitt 5.2 + 7.2) | Frontend-Entwicklung | Offen |
| 7 | Subdomain einrichten + SSL + Deployment | DevOps | Offen |
| 8 | Display-Hardware beschaffen + montieren (Abschnitt 7.1) | Marcel / Hardware | Offen |
| 9 | Kiosk-Software einrichten (Fully Kiosk oder BrightSign) | Technik | Offen |
| 10 | QR-Code generieren (Ziel: b2in.de) + als Asset hinterlegen | Design | Offen |
| 11 | Initiales Video-/Bildmaterial aufbereiten (Format, Komprimierung, Qualität) | Content / Design | Offen |
| 12 | Beispiel-Playlist im CMS anlegen + End-to-End-Test | QA | Offen |
| 13 | Installation im Store: Position, Helligkeit, Blickwinkel, WLAN-Stabilität | Marcel + Technik | Offen |

---

## Anhang A: Zusammenfassung der Auto-Logiken

Folgende Dinge passieren automatisch, ohne dass Marcel etwas pflegen muss:

- Playlist rotiert endlos durch alle aktiven Items
- Gewichtung (70/30) wird automatisch aus den Kategorien berechnet
- Videos starten automatisch (gemutet) und gehen nach Ende zum nächsten Item
- Bilder werden nach definierter Dauer gewechselt
- Polling prüft alle 60 Sekunden auf CMS-Änderungen
- Bei Playlist-Änderung: Laufendes Item wird zu Ende gespielt, dann greift neue Playlist
- Auto-Reload alle 6 Stunden für Speicher-Hygiene
- Offline: Letzte Playlist läuft weiter aus dem Cache
- Bei Video-Fehler: Item wird übersprungen, kein schwarzer Screen
- Standby-Modus bei `display_active = false`: Nur Logo auf dunklem Hintergrund

## Anhang B: Unterschiede zum CABINET Info-Tablet

| Aspekt | CABINET Info-Tablet | B2in Display |
| --- | --- | --- |
| **Zweck** | Store-Information | Marken-/Content-Anzeige |
| **Branding** | CABINET | B2in |
| **Content-Typ** | Text/Daten (statisch) | Video/Bild (Playlist) |
| **Interaktion** | Keine | Keine |
| **Update-Frequenz** | Bei Bedarf (1–2x/Tag) | Playlist rotiert dauerhaft |
| **Polling-Intervall** | 30 Sekunden | 60 Sekunden |
| **Hardware** | Android-Tablet 8–10" | TV/Monitor 43–55" + Media Player |
| **CMS-Komplexität** | 12 einfache Felder | Globale Settings + Playlist-Repeater |