# Bauplan: Reisebüro: Fernweh mit Beratung

Rezept `reisebuero-reiseveranstalter` · Reisebüro (inhabergeführt oder mit Kooperation) / Reisevermittler / kleiner Reiseveranstalter für Gruppen-, Studien- und Busreisen · Stimmung: fernweh, persönlich, kundig, warm · Stand 02.11.2026

Wer heute ins Reisebüro geht, will nicht buchen, was er auch online findet, sondern einen Menschen, der sich auskennt: Wer berät mich zu Kreuzfahrt, Fernreise oder Familienurlaub, wann habt ihr Zeit, was kostet es wirklich, und wer haftet, wenn etwas schiefgeht? Deshalb führen Reisethemen als Postkarten zu den Spezialist:innen, Beratung vor Ort, per Telefon oder Video ist der Haupt-Weg, ausgewählte Reisen stehen mit Zeitraum, Endpreis p. P. und Veranstalter, eigene Gruppenreisen mit Terminen und Plätzen, dazu Gut zu wissen (Einreise, Versicherung, Sicherungsschein) und eine Reiseanfrage in vier Schritten. Instrument Serif schmal für Überschriften, Source Serif 4 als Lesestimme. Postkarte, Meer hell und Tinte, Briefmarkenrot nur für „Beratung buchen“. Signatur: die Postkarten. Die Reisethemen liegen als Kartenstapel und fächern sich wie in der Hand auf (karten-faecher-container, bogen); die gewählte Karte wird beim Seitenwechsel zum Kopfbild.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `reisebuero-reiseveranstalter`) und https://cecodesign.de/lab/fundus/rezepte/reisebuero-reiseveranstalter/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `instrument-serif` · Text: `source-serif-4`
- Größen: h1 Instrument Serif clamp(2.75rem, 1.4rem + 5.6vw, 6rem), Laufweite -0.02em, Zeilenhöhe 0.95, Kursive für ein Wort erlaubt; Kapitel-H2 clamp(2rem, 1.3rem + 2.6vw, 3.25rem) in Instrument Serif. H3, Reisetitel und Gebrauchsüberschriften Source Serif 4 600, opsz 20, 1.25rem. Fließtext Source Serif 4 1.0625rem (17 px), opsz 17, wght 400, Zeilenhöhe 1.6, höchstens 64ch. Preise, Daten und Reisezeiträume Source Serif 4 600 mit Tabellenziffern. Knöpfe Source Serif 4 600, 1rem.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)](https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/demo) `gemischte-schnitte-zeile`, [Deutscher Satz für Zahlen, Datum, Telefon und Preise](https://cecodesign.de/lab/fundus/typo-techniken/zahlen-datum-telefon-satz/demo) `zahlen-datum-telefon-satz`

## Farbe

Wie eine Postkarte im Briefkasten: Postkarten-Weiß als Grund, Meer hell als Fläche für Reisen und Beratung, Tinte für Kapitel und Fuß. Briefmarkenrot nur für „Beratung buchen“ und „Reise anfragen“, Sand nur als Briefmarke und Stempelfläche. Farbe kommt aus den Fotos, nicht aus Verläufen; kein Sonnenuntergangs-Orange, kein Türkis-Klischee.

- `--farbe-grund` #F6F0E4 (Grund Postkarte)
- `--farbe-text` #1E1B18 (Text (15,1 : 1 auf Grund))
- `--farbe-flaeche` #D6E5E4 (Fläche Meer hell: Reisen, Beratung, Gut zu wissen (Text 13,2 : 1))
- `--farbe-dunkel` #1B2B3A (Dunkel Tinte: Kapitel, Footer (Weiß darauf 14,5 : 1))
- `--farbe-signal` #B3261E (Signal Briefmarkenrot: Beratung buchen, Reise anfragen (Weiß darauf 6,5 : 1; als Schrift auf Grund 5,8 : 1))
- `--farbe-akzent` #E7D2A6 (Akzent Sand (nur Briefmarke und Stempelfläche; Text darauf 11,6 : 1))
- `--farbe-leise` #5E5850 (Leise: Veranstalter, Stand-Daten (6,2 : 1 auf Grund, 5,4 : 1 auf Meer))

## Bewegung

- Animationsstil: [Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)](https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/demo) `token-kinetisch-inout`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.83, 0, 0.17, 1) (token-kinetisch-inout); ein cubic-bezier(0.16, 1, 0.3, 1), aus cubic-bezier(0.76, 0, 0.24, 1); UI über animationsstil_ui
- Dauer: 200 (Hover, Farbe), 300 (Reiter, Filter, Dialog öffnen), 200 (schließen), 900 (H1-Zeilen und Postkarten fächern einmal auf), 1100 (Seitenwechsel, Postkarte wird Kopfbild)
- Regel: Preise, Reisezeiträume, Veranstalter und Pflichthinweise stehen sofort. Beim ersten Aufruf steigen die H1-Zeilen aus der Maske und die Postkarten fächern sich aus dem Stapel auf (höchstens sieben, 50 ms Versatz). Danach bewegen sich die Karten nur unter dem Zeiger: die gezeigte richtet sich gerade und hebt sich. Beim Seitenwechsel wird die gewählte Postkarte zum Kopfbild der Reiseseite. Bei prefers-reduced-motion liegen die Karten als lesbare Reihe ohne Winkel, Seitenwechsel als Überblendung.
- Hinweis: Kinetisch nur für den Auftritt: H1-Zeilen, das Auffächern der Postkarten beim ersten Aufruf und den Seitenwechsel, in dem die Postkarte zum Kopfbild wird. Filter, Reiter, Reiseanfrage und Termin über das UI-Paar (300 ms auf, 200 ms zu).

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.83, 0, 0.17, 1)` (--ease) für Postkarten-Fächer, Seitenwechsel (Karte → Kopfbild); H1-Zeilen mit --ease-ein; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`
- Dauern: klein 200 ms, mittel 300 ms, gross 900 ms, seitenwechsel 1100 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit „Beratung buchen“ und Telefon: ab 0 ms, steht
2. H1 (zwei Zeilen): ab 0/60 ms, 900 ms, Zeilenmaske translateY 101 % → 0, --ease-ein
3. Postkarten (karten-faecher-container, bogen): ab 120/170/220/270/320/370/420 ms, 900 ms, aus dem Stapel in den Bogen (Winkel und Versatz), --ease; Bilder schon gemalt, nie über Deckkraft
4. Beratung vor Ort, Telefon, Video: ab 0 ms, steht
- Ende nach 1320 ms. Wiederholt: Postkarten liegen gefächert, nur die H1 mit halbem Versatz (sessionStorage).

**Scrollen** (höchstens drei Reveal-Arten):

- Reisebild (`css-view-reveal-nativ`): Ausgewählte Reisen und Reiseseiten (je Kapitel ein großes Bild); scrollgekoppelt, Versatz 0 ms, Rahmen clip-path inset(100% 0 0 0) → inset(0), inneres Bild gegenläufig translateY 12 % → 0; animation-timeline: view(), entry 0 % bis 50 %, linear; ohne Unterstützung Endzustand
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Preise und Reisezeiträume, Veranstalter und Sicherungsschein, Einreise- und Versicherungshinweise

**Hover** (300 ms ein, 200 ms aus, --ui-ease-ein / --ui-ease-aus; nur mit Zeiger):

- Link: Unterstreichung wächst aus der Mitte (unterstreichung-varianten mitte)
- Knopf: pfeil-icon-button tausch: Pfeil wechselt im Kreis; kontur-button-zeichnen doppel: Stempel-Kontur rückt auf die erste
- Karte: Postkarte richtet sich gerade (Winkel → 0) und hebt sich 8 px; Nachbarn bleiben
- Bild: kein Zoom

**Signatur** `karten-faecher-container` (Variante bogen): Die Postkarten: fünf bis sieben Reisethemen (Kreuzfahrt, Fernreise, Familie, Wandern, Städte, Gruppenreisen) als Postkarten mit Zackenrand, Foto vorn und Briefmarke in Sand. Im schmalen Container liegen sie als Stapel, ab etwa 960 px fächern sie sich ohne Breakpoint zum Bogen (±12°). Beim ersten Aufruf fächern sie einmal auf; die gezeigte Karte richtet sich gerade. Der Titel steht auch als Liste unter dem Fächer. Auslöser: Laden, danach Zeiger; Wiederholung: einmal je Tab.

**Seitenwechsel** `vt-shared-element-morph`; dazu `vt-cross-document-mpa` (typen). Richtung: vorwaerts: die gewählte Postkarte richtet sich gerade und wächst zum Kopfbild der Themen- bzw. Reiseseite, der Rest weicht 18 px; zurueck: das Kopfbild wird wieder Karte im Fächer; gleiche Ebene (Filter) ohne Übergang. Geteilt: kopf, postkarte (Karte im Fächer oder Reisekarte → Kopfbild). Dauer 1100 ms.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Höchstens sieben Postkarten, keine Texte zum Lesen auf gedrehten Karten (wann_nicht von karten-faecher-container). Der Fächer ist der eine verspielte Effekt: kein zweiter in derselben Ansicht.

**Reduzierte Bewegung:** Postkarten als gerade Reihe ohne Winkel; H1 steht; Filter ohne Weg; Seitenwechsel als Überblendung 150 ms ohne Morph. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Flugzeug, das über die Seite fliegt, gestrichelte Flugrouten; Globus-Animation, Sonnenuntergangs-Verläufe; Countdown für Frühbucher.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Fächer nach karten-faecher-container (bogen), Seitenwechsel nach vt-shared-element-morph (auf 1100 ms gekürzt). Begrenzungen eigene Festlegung.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 36, 52, 72, 104, 144
- Sektionsabstand: clamp(72px, 9vw, 144px)
- Dichte: luftig
- Hinweis: Luftig wie ein Reisemagazin: große Bilder, viel Rand, Preise und Pflichtangaben dicht unter den Karten.
- Spalten: 12
- Seitenrand: clamp(18px, 5vw, 80px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1360px
- Raster: Hero 5/7 mit dem Fächer rechts; Reiseseiten im Magazin-Raster (Bild randlos, Text 7 Spalten, Fakten 4 Spalten rechts); Reisekarten als Reihe mit angeschnittener nächster Karte.
- Radius klein: 2px
- Radius groß: 6px
- Pillenform für Buttons: True
- Linie: 1px #1E1B1824 in Tabellen; Felder 1px in Leise (3:1)
- Schatten: nur an Postkarten: 0 2px 4px und 0 16px 28px in Tinte mit 10 bis 14 % Deckkraft
- Form: Postkarten fast eckig (2 px) mit Zackenrand per clip-path, Karten und Felder 6 px, Knöpfe als Pille, große Bilder ohne Radius.

## Bildsprache

- Licht: Natürliches Licht vor Ort, gern früh oder spät; keine überdrehten HDR-Farben.
- Ausschnitt: Orte mit Menschen von hinten, Details (Teller, Weg, Tür), Team im Büro und auf eigenen Reisen.
- Personen: Team und Mitreisende nur mit Einwilligung; Einheimische nicht als Kulisse.
- Formate: 4:5, 3:2, 16:9
- Nicht: Keine Stock-Strände mit Liegestuhl, keine ungekennzeichneten KI-Traumorte, keine Veranstalter-Bilder ohne Recht.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Anschaulich und genau: wohin, wann, für wen, was es kostet, wer veranstaltet.
- Haltung: Wie eine Beraterin, die selbst dort war: begeistert, aber ehrlich über Wetter, Wege und Preise.
- Tonproben: Für Japan im April braucht es Vorlauf: Wir planen sechs Monate vorher., Diese Reise veranstaltet [Veranstalter]. Wir vermitteln und bleiben Ihre Ansprechpartnerin.
- Nicht: „Traumurlaub zum Schnäppchenpreis“, „unvergessliche Momente“, Superlative ohne Grund.

## Hero

Postkarten-Hero (karten-faecher-container, Variante bogen): links H1 in Instrument Serif groß, ein Satz zu Büro und Ort, „Beratung buchen“ und Telefon; rechts der Fächer aus fünf bis sieben Reisethemen als Postkarten mit eigenen bzw. lizenzierten Fotos. Mit nur einem starken Bild (eigenes Foto aus dem Büro oder von einer eigenen Reise) foto-hero, Variante inset-rahmen. Kein Stock-Strand mit Liegestuhl.

- Raster: H1, Satz und Handlung über Spalte 1 bis 5; Postkarten-Fächer über Spalte 6 bis 12; mobil H1, Stapel (leicht versetzt), Handlung.
- Bild: Fünf bis sieben eigene oder lizenzierte Fotos als Postkarten 4:5.
- Überschrift: clamp(2.75rem, 1.4rem + 5.6vw, 6rem), Instrument Serif; ein Satz zu Büro und Ort oder der Name, ein Wort kursiv erlaubt, kein Label darüber.
- Handlung: „Beratung buchen“ (Briefmarkenrot, Pfeil-Pille) und Telefon als tel:-Link.
- Zusatz: Direkt unter dem Hero Beratung vor Ort, Telefon und Video mit Status; mobil Knopf Anrufen / Beratung.

- Hero: [Kartenfächer nach Containerbreite](https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=postkarte) `karten-faecher-container` · Variante „Postkarten (Fotos, Briefmarke, Auffächern beim Laden)“
- Nur unter der Bedingung oben: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=inset-rahmen) `foto-hero` · Variante „Foto im Rahmen auf der Markenfarbe“

## Sektionen in dieser Reihenfolge

1. **Termin für die Beratung (vor Ort, Telefon oder Video; Thema vorauswählen; Buchungs-Widget erst nach Klick, Telefon daneben; heute geöffnet als Status)**: [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“
2. **Reisethemen (je Thema eine Seite: wer berät, was wir empfehlen, Reisezeiten, Beispiele mit Preis ab; Postkarte wird Kopfbild)**: [Kartenfächer nach Containerbreite](https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=postkarte) `karten-faecher-container` · Variante „Postkarten (Fotos, Briefmarke, Auffächern beim Laden)“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
3. **Ausgewählte Reisen (Karten mit Ort, Zeitraum, Endpreis p. P. ab, Veranstalter und Stand; höchstens fünf in einer Reihe)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler) `karussell-steuerung` · Variante „Zähler“
4. **Eigene Gruppen- und Studienreisen (nur als Veranstalter: Termine, Reiseleitung, Plätze nur aus echter Quelle; ab etwa acht Terminen als Kalender)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“
5. **Reise-Detailseite (je Reise eine Seite: Verlauf, Leistungen, Termine, Endpreis, Veranstalter, Formblatt vor der Buchung, Anfrage oder Buchung; Vergangenes mit Hinweis statt Fehlerseite)**: [Veranstaltung: Detailseite mit Zuständen](https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/demo?v=ticket) `veranstaltung-detailseite` · Variante „Ticket“
6. **Team und Spezialgebiete (Berater:innen mit Ländern und Themen, eigene Reisen nur mit eigenen Fotos)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
7. **Person-Detailseite (je Berater:in eine Seite: Spezialgebiete, bereiste Länder, Sprachen, Durchwahl und Termin)**: [Personen-Detailseite](https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=aerztin) `person-detailseite` · Variante „Ärztin“
8. **Reiseberichte (Tipps aus eigenen Reisen mit Datum und Stand; Einreise nur mit Verweis auf das Auswärtige Amt)**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“, [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=ratgeber) `artikel-seite` · Variante „Ratgeber“
9. **Stimmen (eigene Stimmen mit Reise und Monat; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat) `testimonials-neu-gedacht` · Variante „Ein großes Zitat“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band) `bewertungsprofil-mit-echtheitshinweis` · Variante „Band unter dem Hero“
10. **Gut zu wissen (Vermittler oder Veranstalter, Sicherungsschein, Reiseversicherung, Einreise und Visa, Storno; Antworten als Text)**: [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=kurz) `faq-seite-suche` · Variante „Kurz“, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“
11. **Anfrage: Reisewunsch (Wohin oder welches Thema → Wann und wer reist → Budget und Wünsche → Kontakt; Fehlerliste; Bestätigung mit Rückmeldezeit)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste) `mehrschritt-anfrage` · Variante „Schrittleiste“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=anfrage) `danke-seite-naechste-schritte` · Variante „Offene Anfrage“
12. **Büro und Anfahrt (Öffnungszeiten mit Status, Adresse als Text, Haltestelle und Parken, Karte per 2-Klick)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“
13. **Rechtliches und Barrierefreiheit (Formblatt-Hinweis, Reisebedingungen des Veranstalters, Sicherungsschein, Erklärung zur Barrierefreiheit bei Online-Buchung nach BFSG)**: [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo?v=datenschutz) `rechtstext-layout` · Variante „Datenschutzerklärung“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Kartenfächer nach Containerbreite](https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=postkarte) `karten-faecher-container` · Variante „Postkarten (Fotos, Briefmarke, Auffächern beim Laden)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Die Postkarten: fünf bis sieben Reisethemen als Postkarten mit Zackenrand, im Fächer neben der H1; beim Zeigen hebt sich eine Karte, ein Klick führt zum Thema.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Fächer über 6 Spalten, Karten mindestens 220 px breit
- Muster: [Kartenfächer nach Containerbreite](https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=postkarte) `karten-faecher-container` · Variante „Postkarten (Fotos, Briefmarke, Auffächern beim Laden)“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

- Haupthandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch) `pfeil-icon-button` · Variante „Pfeil-Tausch“
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel) `kontur-button-zeichnen` · Variante „Doppelkontur rückt auf“

## Weitere Bausteine

- Seitenwechsel: [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler) `karussell-steuerung` · Variante „Zähler“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis) `studio-visitenkarte-footer` · Variante „Stille Visitenkarte“, [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison) `footer-newsletter-mit-persoenlichkeit` · Variante „Saisonbrief im Gastro-Footer“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=anfrage) `danke-seite-naechste-schritte` · Variante „Offene Anfrage“
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo?v=datenschutz) `rechtstext-layout` · Variante „Datenschutzerklärung“
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- flick-karten-stapel – Signatur von friseur-salon-handschrift; die Postkarten fächern, sie werden nicht geschnippt
- slideshow-innere-gegenparallaxe – Signatur von boutique-hotel-gastgeber
- medien-expansion-scroll – Signatur von region-tourismus-ausflugsziel
- prozent-zaehler / zahlen-odometer – keine Ladezähler, keine hochgezählten Reisenden
- marquee-laufband – keine durchlaufenden Last-Minute-Angebote
- smooth-scroll-lenis – Preise und Pflichthinweise müssen ruhig lesbar sein
- Stock-Strände mit Liegestuhl, KI-Traumstrände ohne Kennzeichnung, Flugzeug-Icons – Klischee statt Beratung
- Lockpreise ohne Zeitraum, Steuern und Gebühren, „klimaneutral reisen“ ohne Nachweis – irreführend

## Regeln

- Erster Bildschirm: H1, Satz zum Büro, „Beratung buchen“ und Telefon links, Postkarten-Fächer rechts; direkt darunter Beratung vor Ort, Telefon und Video mit Status. Mobil Knopf Anrufen / Beratung.
- Signatur (karten-faecher-container, Variante bogen): fünf bis sieben Reisethemen, Fotos nur eigen oder lizenziert, Titel zusätzlich als Liste. Keine Texte zum Lesen auf gedrehten Karten. Bei reduzierter Bewegung gerade Reihe.
- Rolle klar: Reisevermittler nennen bei jeder Reise den Veranstalter und weisen darauf hin, dass sie vermitteln; eigene Reisen als Veranstalter mit Sicherungsschein (Absicherung über den Reisesicherungsfonds bzw. Versicherer). Vor der Buchung einer Pauschalreise das gesetzliche Formblatt. Vom Kunden prüfen lassen.
- Preise als Endpreis p. P. inkl. Steuern und Gebühren mit Reisezeitraum und Stand; „ab“ nur mit dem Termin, für den der Preis gilt. Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage. Vom Kunden prüfen lassen.
- Einreise, Visa und Gesundheit nur als Hinweis mit Link zum Auswärtigen Amt und Stand, nie als verbindliche Auskunft. Reiseversicherungen nur mit Status nach § 34d GewO bzw. als Tippgeber, vom Kunden prüfen lassen.
- Fotos eigener Reisen und des Teams mit Einwilligung; Veranstalter-Bilder nur mit Nutzungsrecht; fotorealistische KI-Bilder gekennzeichnet (Art. 50 KI-VO).
- Bewertungen von Google oder Reiseportalen nur mit Echtheitshinweis direkt dabei (bewertungsprofil-mit-echtheitshinweis). Online-Buchung: Erklärung zur Barrierefreiheit nach BFSG prüfen lassen.
- Knöpfe: dunkle Pfeil-Pille in Briefmarkenrot (pfeil-icon-button, Variante tausch) für Beratung und Anfrage; Nebenwege als Stempel-Kontur (kontur-button-zeichnen, Variante doppel). Alle Zustände nach button-zustaende.

## Rezept-Varianten

- **Kleiner Reiseveranstalter für Gruppen- und Studienreisen (eigene Reisen)**: Schrift, Farbe, Stil und Signatur bleiben; die Postkarten zeigen eigene Reisen statt Themen. Reisekalender als programm-kalender (Variante programm) mit Plätzen nur aus echter Quelle; je Reise eine Seite mit Tagesverlauf, Reiseleitung, Leistungen, Mindestteilnehmerzahl und Absagefrist, Endpreis, Formblatt und Sicherungsschein vor der Buchung. Online-Buchung mit Anzahlung über einen Zahlungsdienst; Reisebedingungen eigen und vom Anwalt. Vom Kunden prüfen lassen.
- **Busreisen und Tagesfahrten**: Schrift, Farbe, Stil und Signatur bleiben; die Postkarten zeigen Ziele der Saison. Fahrten mit Zustiegsorten und Uhrzeiten als Tabelle, Plätze nur aus echter Quelle, Reisebus mit Ausstattung und Barrierefreiheit ehrlich. Mehrtägige Fahrten sind meist Pauschalreisen (Formblatt, Sicherungsschein); Tagesfahrten ohne Übernachtung oft nicht, das klärt der Betrieb. Vom Kunden prüfen lassen.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.