Kurzbriefing für Entwickler: 9:16 HTML-Display (CABINET Bielefeld) – Produktloop

Ziel
Auf dem vorhandenen 9:16-Display (HTML/Webseite) sollen zusätzlich zu CABINET-Werbevideos produktbezogene Angebots-Slides laufen. Fokus: Abverkauf von 2 Produkten (GOYA + TANDO) in einem hochwertigen, ruhigen CABINET-Look (clean, viel Weißraum, klare Typo).

⸻

1) Format & technische Vorgaben
	•	Format: 9:16 Hochkant, 1080×1920 px (responsive skalierbar).
	•	Safe-Area: 64 px Rand innen (keine wichtigen Inhalte außerhalb).
	•	Loop: 4 Slides (Slide 0–3) als Rotation.
	•	Timing:
	•	Slide 0 (Intro): 8s
	•	Slide 1 (GOYA Preis/Hero): 10s
	•	Slide 2 (GOYA Details/Konditionen): 12s
	•	Slide 3 (TANDO Preis/Hero): 10s
	•	anschließend wieder Slide 0
	•	Transition: weiche Fades (0,5–0,7s), keine harten Effekte.
	•	Assets: pro Slide 1 Hintergrundbild (Hero) + optional QR als PNG/SVG.

⸻

2) Layout-Konzept (einheitlich für alle Slides)

Seitenaufbau (von oben nach unten):
	1.	Header: Marke + kurze Kontextzeile (z. B. „Ausstellungsware / Einzelstück“)
	2.	Hero: großes Bild (clean, hochwertig)
	3.	Bottom Area:
	•	links: Text-/Preisblock (Produktname, Subline, Preis, ggf. UVP/Bullets)
	•	rechts: QR-Box (CTA + QR + Kontaktzeile)

Wiederkehrende Elemente
	•	QR-Box immer rechts unten gleich platziert.
	•	CTA-Texte kurz und klar (z. B. „Infos & Reservierung: QR“).
	•	Disclaimer klein: „Zwischenverkauf vorbehalten.“

⸻

3) Inhalte pro Slide (finale Texte)

Slide 0 – Intro

Header links: CABINET Bielefeld
Header rechts: Planung • Beratung (Zeilenumbruch möglich) + Lieferung/Montage
Hero Badge/Teaser: Einzelstücke & Ausstellungsdeals – nur solange verfügbar
Textblock (links unten):
	•	Eyebrow: Heute im Fokus
	•	Headline: Kuratiert. Hochwertig. Sofort.
	•	Subline: Scannen Sie den QR-Code für Kontakt & Store-Infos.
	•	Footer klein: CABINET Bielefeld – im Store ansprechen oder direkt reservieren
	•	Disclaimer klein: Zwischenverkauf vorbehalten

QR-Box (rechts):
	•	Titel: Kontakt & Store-Infos
	•	Sub: QR scannen
	•	Kontaktzeile: WhatsApp: …  ·  Tel.: …
	•	QR führt auf: Kontakt-/Store-Seite (URL wird geliefert)

⸻

Slide 1 – GOYA (Variante B: Preis/Hero)

Header links: CABINET
Header rechts: Ausstellungsware + Einzelstück
Hero Hinweis: Bild GOYA (Hero-Foto)

Textblock:
	•	Eyebrow: Ausstellungsware
	•	Titel: GOYA Sideboard
	•	Subline: Marke: Sudbrock
	•	Preis groß: 489 €
	•	Preiszusatz: brutto
	•	UVP-Zeile: UVP neu: 4.744 €*
	•	Disclaimer klein: *UVP nur, sofern belegbar. Zwischenverkauf vorbehalten.

QR-Box:
	•	Titel: Infos & Reservierung
	•	Sub: QR scannen
	•	Kontaktzeile: WhatsApp: …  ·  Tel.: …
	•	QR führt auf: GOYA-Detail/Reservierung (URL wird geliefert)

⸻

Slide 2 – GOYA (Variante B: Konditionen)

Header links: CABINET
Header rechts: GOYA + Konditionen
Hero Hinweis: GOYA Detail/2. Ansicht

Textblock:
	•	Eyebrow: GOYA | Konditionen
	•	Headline: Details auf einen Blick
	•	Bullets:
	1.	Eingelagertes Einzelstück
	2.	Abholung: Lager Rheda-Wiedenbrück
	3.	Lieferung/Montage optional
	4.	Preis gilt ohne Lieferung/Montage
	5.	Deckel: Weiß matt (erneuert)
	•	Footer: Details & Reservierung + QR scannen

QR-Box:
	•	Titel: Details: QR scannen
	•	Sub: Reservierung & Kontakt
	•	Disclaimer: Zwischenverkauf vorbehalten
	•	QR führt auf: GOYA-Detail/Reservierung (gleiche URL wie Slide 1)

⸻

Slide 3 – TANDO (Variante C: Impulskauf)

Header links: CABINET
Header rechts: Nur 1× im Store + Sofort
Hero Hinweis: Foto des Spiegels im Laden (TANDO)

Textblock:
	•	Eyebrow: Nur 1× im Store
	•	Titel: TANDO Spiegel
	•	Subline: Ansehen & mitnehmen – heute
	•	Preis groß: 199 €
	•	Preiszusatz: brutto
	•	kleine Zusatzzeile: Jetzt sichern

QR-Box:
	•	Titel: Jetzt sichern
	•	Sub: QR scannen oder Team ansprechen
	•	Kontaktzeile: WhatsApp: …  ·  Tel.: …
	•	QR führt auf: TANDO-Detail/Info (URL wird geliefert)

⸻

4) Inhalte/Logik als Konfiguration (Wunsch)

Bitte so bauen, dass Texte/QR-Links/Zeiten leicht austauschbar sind:
	•	slides[] (JSON) mit Feldern: duration, headerLeft, headerRightLines[], heroImage, eyebrow, title, subline, price, priceNote, uvp, bullets[], qrTitle, qrSub, qrLink, contactLine, disclaimer.

⸻

5) Offene Inputs vom Auftraggeber (Platzhalter)
	•	WhatsApp Nummer / Tel.
	•	QR-Ziel-URLs:
	•	Kontakt/Store
	•	GOYA Detail/Reservierung
	•	TANDO Detail/Info
	•	Bildassets (1080×mind. 1400 empfohlen):
	•	GOYA Hero
	•	GOYA Detail
	•	TANDO im Store

Das Briefing ist so geschrieben, dass der Entwickler es direkt als HTML/CSS/JS-Slider umsetzen kann (oder in eure bestehende HTML-Playlist integrieren).