Redaktionskonzept

Diese Seite zeigt alle Box-Stile, die auf burghof-greiner.de pflegbar sind. Pro Box-Typ ist hier eine kurze Erklärung und direkt darunter ein gerendertes Beispiel.

Pflege: Wenn ein Box-Stil hinzukommt oder sich ändert, wird diese Seite im selben Commit mitgepflegt (Konvention aus docs/redaktionskonzept.md).

Verbindliche Design-/Pflege-Entscheidungen liegen im TIMM4-Live-Ticket #24605, Section „Grafische Klärungspunkte".

Hero — fullsize vs. normal

Es gibt zwei Hero-Box-Stile. Pro Seite wird genau einer davon verwendet, ganz oben direkt unter der Brandbar.

  • hero-fullsize (ca. 90 vh) — fuer die Startseite, Hotel-Burghof und Restaurant-Greiner (Ticket #60341). Felder: headline, text (Subline), img (Hintergrundbild), link_text (Tag-Sticker, optional).
  • hero-normal (ca. 50 vh) — fuer Unterseiten (Speisekarte, Kontakt, Impressum etc.). Selbe Felder, kleinere Hoehe.

Diese Doku-Seite verwendet selbst hero-normal (oben sichtbar). Kein zweiter Hero-Block wird hier eingebunden, damit die Seitenstruktur konsistent bleibt und nur eine h1 entsteht.

Standard-Text

Wann: Lauftext-Section mit Headline + Body. Default-Stil ohne explizite Auswahl.
Felder: headline, text. Optional: link, link_text.

„Anschließen" (joining): Eine Folge-Textbox kann an die vorherige angeschlossen werden. Sie rendert dann ohne den großen Section-Abstand als enge Fortsetzung — typischerweise ein zweiter Absatz-Block ohne eigene Headline. Das Beispiel direkt darunter zeigt genau das.

Beispiel: Standard-Text

Mitten im Naturpark Altmühltal liegt unser Haus. Wir freuen uns auf Ihren Besuch.

Diese Box ist angeschlossen (joining): keine eigene Headline, enger Abstand zur vorigen — als gehörte sie zum selben Textblock. (joining ist nur ein Abstands-/Fluss-Flag; es ändert NICHT den Hintergrund oder die Gruppierung.)

Text-Formatierung (WYSIWYG)

Wann: Inline-Formatierung in allen Text-Feldern (Standard-Text, FAQ-Antworten, Highlight-Subline …). Der Editor bietet bewusst eine reduzierte, saubere Auswahl.

Verfügbar: Fett, Kursiv, Unterstrichen, Durchgestrichen, Tiefgestellt, Hochgestellt, Link, ungeordnete & geordnete Liste sowie Abkürzung (mit Tooltip).

Bewusst deaktiviert: Text-Ausrichtung und Tabellen — die Ausrichtung gibt das Layout vor (Fließtext immer linksbündig in der Lesespalte), Tabellen sind auf dem Smartphone problematisch.

Beispiel: Text-Formatierung

Im Fließtext stehen fett, kursiv, unterstrichen und durchgestrichen zur Verfügung — dazu Tiefgestelltes (H2O) und Hochgestelltes (m2), Verweise als Link sowie z. B. als Abkürzung (Tooltip beim Überfahren).

Ungeordnete Liste:

  • Frühstück mit Produkten aus der Nachbarschaft
  • Ruhige Zimmer mit Blick ins Altmühltal
  • Direkt am Altmühl-Panoramaweg

Geordnete Liste:

  1. Anreise & Check-in
  2. Zimmer beziehen, durchatmen
  3. Abendessen im Restaurant Greiner

Teaser-Karte

Wann: 2-Spalten-Grid auf Übersichts­seiten. Mehrere Teaser hintereinander werden automatisch in das Grid gewrapped.
Felder: headline (Titel), img (4:3), link (Ziel-URL). Klick öffnet den Link über die ganze Karte.

Highlight-Card („Feines von hier")

Wann: Stimmungsvoller Section-Abschluss mit Bild und klickbarem CTA. Ganze Karte ist Link (Ticket #60345).
Felder: headline, text (Subline, HTML), img (16:9), link (Ziel-URL), link_text (CTA-Label).

FAQ-Akkordeon

Wann: Häufige Fragen. Mehrere FAQ-Items hintereinander werden automatisch zum Akkordeon — nur eines ist gleichzeitig offen (Ticket #60317).
Felder: headline (Frage), text (Antwort, HTML).

Weißes Band + Kicker: Ein FAQ-Block sitzt automatisch auf einem weißen Band mit dem Kicker „Fragen und Antworten". Das macht der Stil faq selbst — kein manuelles „Anschließen" nötig.

Überschrift: Eine FAQ-Box ohne Antwort (Antwort-Feld leer lassen) wird als Überschrift des FAQ-Blocks gerendert — sitzt also mit auf dem weißen Band. FAQ-Boxen mit Antwort sind die aufklappbaren Fragen. Das Beispiel unten beginnt mit so einer Überschrift-Box.

Fragen und Antworten

Häufige Fragen

Beispiel-Antwort 1.

Beispiel-Antwort 2 mit etwas mehr Text, damit man das Aufklapp-Verhalten sieht.

Bildergalerie

Wann: Bilder-Übersicht mit Lightbox. Mosaik-Layout: 3 Reihen aus je einem quadratischen und einem breiten Bild (Seite alterniert), 6 Bilder sichtbar; das letzte trägt bei mehr Bildern ein „+N"-Overlay zum Öffnen der ganzen Galerie. Auf dem Smartphone gestapelt.
Felder: headline (optional), text (Bild-URLs, eine pro Zeile). Hinweis: pragmatische v1-Lösung; ein eigenes Gallery-Modell folgt später.

Beispiel: Galerie

Speisekarte (v1)

Wann: Speisekarte bis ein dedizierter Box-Stil mit Pflege-UI da ist (Tickets #60337/#60343 zurückgestellt).
Felder: headline, text (HTML mit h3-Gerichten, p-Beschreibungen, p-Preisen). Wird zweispaltig dargestellt.

Beispiel: Speisekarte

Beispiel-Gericht

Hier steht die Beschreibung des Gerichts.

€ 23,50

Noch ein Gericht

Mit einer etwas längeren Beschreibung, damit man die zweispaltige Verteilung sieht.

€ 18,00

Drittes Gericht

Beschreibung.

€ 12,50

Viertes Gericht

Beschreibung.

€ 16,00

Code-Box

Wann: Embed externer Inhalte (iframes, Widget-Skripte, Karten).
Felder: headline (optional), text (rohes HTML, wird unescaped gerendert).

Beispiel: Code-Embed

Hier steht beispielhaft das Embed-Markup eines externen Anbieters.

IBE-Placeholder

Wann: Reservierungs-/Buchungs-Slot bis Anbieter feststeht (Ticket #60347). Beim Live-Gang gegen Embed tauschen.
Felder: headline (Bereich), text (Beschreibung).

Tisch reservieren

Hier folgt die Restaurant-Reservierungs-IBE.

Kontaktformular

Wann: Klassische Anfragen. Reservierung/Buchung laufen separat über IBE (Ticket #60313).
Felder: via CMS pflegbar (Pflicht/Optional/Versteckt je Feld). Zusätzliche dynamische Felder über boxes_contact_form_fields (text, textarea, select, checkbox, radio, date, period, headline).

Beispiel: Kontaktformular

Impressum- & Datenschutz-Box (vordefiniert)

Wann: Ausschließlich auf /impressum/ und /datenschutz/. Es ist der Box-Typ „Vordefinierte Box" (im CMS auswählbar als „Impressum" bzw. „Datenschutzerklärung"). Sie rendert die zentral gepflegten Rechtstexte über den TIMM4-ImprintService — keine eigenen Felder, kein Copy-Paste pro Seite.

Pflege: zentral (über group_id + Imprint-Templates). Solange nicht konfiguriert, zeigt die Box den Platzhalter unten; danach erscheinen die echten Inhalte automatisch — ohne Änderung an der Seite.

Vordefinierte Impressum-Box

Die Inhalte werden zentral über den TIMM4-ImprintService gepflegt. Sobald group_id und die Templates hinterlegt sind, erscheinen sie hier automatisch — ohne Code-Änderung.