# Bauplan: Region und Ausflugsziel: Weg, Wetter, Anreise

Rezept `region-tourismus-ausflugsziel` · Tourismusregion / Ferienregion / Gemeinde mit Gästeinformation / Naturpark / Ausflugsziel (Bergbahn, Burg, Höhle, Freizeitpark) · Stimmung: weit, ruhig, einladend, verlässlich · Stand 02.11.2026

Eine Region verkauft Landschaft und verlässliche Planung: Was ist heute offen, welche Tour passt zu mir, wie komme ich ohne Auto hin, wo schlafe ich, was ist los. Die Seite beginnt mit einem Foto und einer Karte mit echtem Status, dann öffnet sich einmal ein Panorama beim Scrollen bis zum Vollbild. Touren stehen mit Länge, Höhenmetern, Dauer und Schwierigkeit in Mono wie auf einem Wegweiser, Anreise mit Bus und Bahn zuerst. Big Shoulders für Überschriften wie auf alten Reiseplakaten, Host Grotesk für Text, IBM Plex Mono für Tourdaten. Nebel, Fels, Waldnacht und ein Wegzeichen-Rot. Abgrenzung zu boutique-hotel-gastgeber (ein Haus mit Buchung) und kultur-programm-haltung (Programmhaus).

## 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 `region-tourismus-ausflugsziel`) und https://cecodesign.de/lab/fundus/rezepte/region-tourismus-ausflugsziel/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `big-shoulders` · Text: `host-grotesk` · Akzent: `ibm-plex-mono`
- Größen: h1 Big Shoulders clamp(3rem, 1.6rem + 6vw, 7.5rem), opsz 72, wght 800, Laufweite -0.01em, Zeilenhöhe 0.88; h2 clamp(2rem, 1.4rem + 2.4vw, 3.75rem), wght 700. Fließtext Host Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Tourdaten (km, Höhenmeter auf und ab, Dauer, Schwierigkeit, Haltestelle) in IBM Plex Mono 0.875rem; Labels 0.75rem Versal +0.08em. Knöpfe Host Grotesk 600, 1rem.
- Techniken: [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`

## Farbe

Farben aus der Landschaft der Region, hier Mittelgebirge: Nebel als Grund, Fels als Fläche für Tourdaten und Anreise, Waldnacht für Panorama-Band und Footer. Ein Rot wie das Wegzeichen am Baum nur für Planen und Buchen. Je Region austauschbar (Seeblau, Heide, Weinlaub), immer mit 4,5 : 1 geprüft. Keine Postkarten-Sättigung, kein Himmelblau-Verlauf.

- `--farbe-grund` #EEF0EC (Grund Nebel)
- `--farbe-text` #1B2226 (Text (14,0 : 1 auf Grund))
- `--farbe-flaeche` #DAD6CA (Fläche Fels: Tourdaten, Anreise, Gästekarte (Text 11,1 : 1))
- `--farbe-dunkel` #1F2E2B (Dunkel Waldnacht: Panorama-Band, Footer (Weiß darauf 14,2 : 1))
- `--farbe-signal` #B1321C (Signal Wegzeichen-Rot: Unterkunft suchen, Tickets, Tour starten (Weiß darauf 6,3 : 1; als Fläche auf Grund 5,5 : 1, auf Fels 4,3 : 1); auf Waldnacht stattdessen Nebel-Knopf mit dunkler Schrift)
- `--farbe-leise` #565E60 (Leise: Meta-Angaben, Stand-Daten, Wetterquelle (5,8 : 1 auf Grund, 4,6 : 1 auf Fels))
- `--farbe-linie` #C9CCC4 (Linie: Haarlinien in Tourdaten (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Luxus weich“](https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo) `token-luxus-weich`
- 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.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder); UI über animationsstil_ui; Signatur scrollgekoppelt
- Dauer: 150 (Hover, Farbe), 300 (Filter, Leiste, Dialog öffnen), 200 (schließen), 1400 (Masken-Reveal eines Landschaftsfotos, einmal); Panorama scrollgekoppelt über etwa 300vh
- Regel: Ein großer Moment pro Seite: das Panorama öffnet sich beim Scrollen bis zum Vollbild und steht dann. Sonst bewegen sich nur Bilder, und nur einmal. Tourdaten, Zeiten und Preise stehen sofort. Kein Autoplay-Video, keine Drohnen-Schleife ohne Pause. Bei prefers-reduced-motion steht das Panorama in Endgröße ohne Pinning.
- Hinweis: Weich nur für Landschaftsbilder: Fotos öffnen sich einmal per Maske (1400 ms), Bildwechsel im Magazin blenden über. Die Signatur ist scrollgekoppelt (linear, der Scroll ist die Zeit) und braucht keine eigene Kurve. Touren-Filter, Buchungsleiste, Karten-Dialog und Akkordeon laufen über token-toggle-asymmetrisch (300 ms auf, 200 ms zu), weil token-luxus-weich Formulare ausschließt.

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

- Hauptkurve: `cubic-bezier(0.37, 0, 0.63, 1)` (--ease) für nur Landschaftsbilder (Masken, Überblenden); Touren-Filter, Buchungsleiste, Dialoge über das UI-Paar; die Signatur ist scrollgekoppelt (linear); UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`
- Dauern: klein 150 ms, mittel 300 ms, gross 1400 ms, seitenwechsel 1000 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 und Leiste (Touren, Anreise): ab 0 ms, stehen
2. Landschaftsfoto: ab 0 ms, 1400 ms, Maske öffnet sich einmal (clip-path von unten), --ease
3. H1: ab 300/420/540 ms, 1200 ms, Zeilen steigen aus Masken, --ease-ein
4. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 1740 ms. Wiederholt: H1-Zeilen ab 120/240/360, Foto steht.

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

- Bild-Maske (`clip-path-bild-reveal`): Landschaftsfotos in Touren und Magazin; 1400ms, Versatz 120 ms, Maske öffnet sich einmal; einmal, wenn 33 % sichtbar (IntersectionObserver)
- Hinweis: Die Kopfmarke schrumpft scrollgekoppelt (wortmarke-wird-kopfmarke beides); sie zählt nicht als Reveal und nicht als großer Moment, der bleibt das Panorama.
- 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, Tourdaten, Zeiten, Preise (Rezept), Anreise und Barrierefreiheit der Orte

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

- Link: Unterstreichung wächst von links
- Knopf: button-zustaende; glas-button frost nur über ruhigem Bild
- Karte: Tour: Bild öffnet sich von der Kante (bild-zoom-in-maske richtung), --ease
- Bild: wie Karte

**Signatur** `medien-expansion-scroll`: Ein großer Moment pro Seite: das Panorama zwischen zwei Wörtern wächst beim Scrollen zum randlosen Vollbild (300vh Spur, linear) und steht dann (Rezept). Auslöser: Scroll; Wiederholung: nur mit dem Scroll.

**Seitenwechsel** `vt-cross-document-mpa` (Variante benannt); dazu `vt-shared-element-morph`, `wortmarke-wird-kopfmarke` (beides). Richtung: keine Typen; von der Startseite fliegt der Name aus jedem Zwischenstand in den Kopf; Tour → Tourseite morpht das Bild nur von den Übersichtsseiten (Touren, Was ist los), nie im selben Wechsel wie die Marke; sonst Überblendung. Geteilt: kopf, held (Tourbild), marke (Name der Region → Kopfmarke, aus jedem Scrollstand). Dauer 1000 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). Kein Autoplay-Video, keine Drohnen-Schleife ohne Pause (Rezept). Ein großer Moment pro Seite (Rezept).

**Reduzierte Bewegung:** Panorama in Endgröße ohne Pinning (Rezept); Fotos stehen; Seitenwechsel als Überblendung. Marke steht klein im Kopf, kein Schrumpfen und kein Flug. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Regen-, Schnee- oder Wolken-Partikel; Drohnen-Schleife ohne Pause (Rezept); Karten-Fahrten, die von selbst laufen.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis; Signatur nach medien-expansion-scroll (300vh, linear). Rest eigene Festlegung. Kopfmarke 05.11.2026 aus wortmarke-wird-kopfmarke (beides, Region).

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

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 72, 104, 160
- Sektionsabstand: clamp(72px, 10vw, 160px)
- Dichte: luftig
- Hinweis: Weit wie die Landschaft: große Bilder mit viel Raum, Tourdaten dagegen dicht in einer Zeile (8 px).
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 64px)
- Spaltenabstand: clamp(12px, 2vw, 32px)
- Maximale Breite: 1440px
- Raster: Hero randlos mit Karte unten links über 5 Spalten. Touren als Reihe mit Peek, Tourseite 8/4 (Weg links, Kenndaten und Anreise rechts sticky).
- Radius klein: 4px
- Radius groß: 16px
- Pillenform für Buttons: False
- Linie: 1px #C9CCC4 in Tourdaten; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Ruhige Kästen; das Panorama startet mit 16 px Radius und endet randlos.

## Bildsprache

- Licht: Früher Morgen, Nebel, Abendlicht; auch Regen und Winter, wenn es die Region zeigt.
- Ausschnitt: Landschaft in der Totale, Wege und Wegzeichen im Detail, Menschen klein in der Landschaft.
- Personen: Ja, mit Einwilligung, eher klein und von hinten; keine erkennbaren Personen auf Webcams.
- Formate: 16:9, 21:9, 4:5
- Nicht: Keine Stockfotos anderer Regionen, keine übersättigten Postkarten, keine Drohnenbilder ohne Genehmigung.
- 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: du oder Sie je nach Region, dann durchgehend
- Sätze: Konkret: Weg, Dauer, Haltestelle, Einkehr.
- Haltung: Einladend und verlässlich, ohne Superlative.
- Tonproben: 11,6 km, 3:30 h, mittel. Start an der Haltestelle [Name]., Mit der Gästekarte fährst du Bus und Bahn kostenlos.
- Nicht: „atemberaubend“, „unvergesslich“, „Paradies“, „Geheimtipp“ für bekannte Ziele.

## Hero

Foto-Hero mit Karte (foto-hero-mit-leiste, Variante karte): ein echtes Landschaftsfoto der Region in ruhigem Licht, unten links eine deckende Karte mit echtem Status (Bergbahn oder Gästeinfo heute geöffnet, letzte Fahrt, Wetter am Gipfel mit Quelle und Uhrzeit, Sperrungen). Daneben ein Satz zur Region und zwei Wege: „Touren finden“ und „Unterkunft suchen“. Video nur mit eigenem Material und Pause-Knopf. Der Name der Region oder des Ziels steht groß über dem Landschaftsfoto, schrumpft beim Scrollen zur Kopfmarke und fliegt beim Seitenwechsel in den Kopf (wortmarke-wird-kopfmarke, Variante beides).

- Raster: Foto randlos über 12 Spalten; H1 und Satz oben links über Spalte 1 bis 6; Statuskarte unten links über 1 bis 5; mobil Foto oben, Karte darunter.
- Bild: Echtes Landschaftsfoto der Region, 16:9 Desktop, 4:5 mobil, Ort als Bildunterschrift.
- Überschrift: clamp(3rem, 1.6rem + 6vw, 7.5rem), Big Shoulders 800; Name der Region oder ein Satz, kein Label darüber.
- Handlung: „Touren finden“ (Wegzeichen-Rot gefüllt) und „Unterkunft suchen“ (Frost-Glas über dem Foto).
- Zusatz: Statuskarte mit Quelle und Uhrzeit in IBM Plex Mono.

- Hero: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=karte) `foto-hero-mit-leiste` · Variante „Karte mit Öffnungsstatus“

## Sektionen in dieser Reihenfolge

1. **Heute hier (Sperrungen, Lawinen- oder Waldbrandhinweise, Baustellen und Ausfälle als seitenweite Leiste aus einer Quelle mit Stand; ohne Datenquelle keine Live-Anzeige)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste) `oeffnungszeiten-status` · Variante „Hinweisleiste über dem Kopf“
2. **Die Landschaft (ein Panorama, das sich beim Scrollen einmal bis zum Vollbild öffnet; darüber und darunter wenige Wörter, was man hier tut)**: [Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)](https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo) `medien-expansion-scroll`
3. **Touren und Wege (Wandern, Rad, Winter; je Tour Länge in km, Höhenmeter auf und ab, Dauer, Schwierigkeit als Wort, Start und Ziel mit Haltestelle, Einkehr; Filter nach Art, Dauer, Schwierigkeit und Anreise ohne Auto erst ab etwa 15 Touren; auf der Startseite eine Reihe)**: [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“, [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. **Tourseite (lokale Leiste Überblick, Weg, Anreise, Einkehr, Karte; Kenndaten in Mono, Höhenprofil als SVG mit Text, Wegbeschreibung in Schritten, Anreise mit Bus und Bahn zuerst, Karte und Tourenportal erst nach Klick, GPX zum Herunterladen)**: [Klebende Produkt-Unternavigation mit Handlung](https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=kompakt-mobil) `lokale-produktnavigation` · Variante „Kompakt mit Abschnitte-Popover“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“
5. **Ausflugsziele nach Anlass (mit Kindern, bei Regen, barrierearm, mit Gästekarte frei; je Ziel Öffnungszeiten, Preis, Anreise; Kacheln mit Anlassfarbe)**: [Raster am Desktop, Wischreihe am Telefon](https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=zweireihig) `raster-zu-wischreihe` · Variante „Zweireihig“, [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung) `bild-zoom-in-maske` · Variante „Richtungsabhängiger Clip mit farbiger Decke“
6. **Was ist los (Veranstaltungen nach Datum, Feste, Märkte, Führungen; Liste nach Monat, Tickets beim Anbieter)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=liste) `karte-ganzflaechig-klickbar` · Variante „Liste: Klick-Weiterleitung“
7. **Veranstaltung-Detailseite (je Termin eine Seite, aufgerufen aus der Liste: eigene Führung, Fest oder Markt mit Datum, Treffpunkt, Anreise mit Bus und Bahn, Preis und Anmeldung; bei fremdem Ticketverkauf reicht die Zeile in der Liste mit Link; freie Plätze nur aus echter Quelle, 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“
8. **Übernachten (Datum und Personen an die Buchungsplattform übergeben, oder Gastgeberverzeichnis; Gästebeitrag bzw. Kurtaxe nennen)**: [Buchungsleiste mit Datumsbereich](https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo?v=leiste) `buchungsleiste-datumsbereich` · Variante „Leiste unter dem Hero“
9. **Anreise und mobil vor Ort (Bahn und Bus zuerst, Gästekarte mit freier Fahrt, Parken mit Preisen, Ladepunkte, Rad- und E-Bike-Verleih; Text zuerst, Karte nach Klick)**: [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“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=standorte) `karte-zwei-klick` · Variante „Mehrere Standorte“
10. **Gästekarte und Tickets (was enthalten ist, für wen, Preis; Tageskarte, Familienkarte, Saisonkarte nebeneinander)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“
11. **Reisemagazin (Geschichten aus der Region: Menschen, Handwerk, Küche, Jahreszeiten; Long-Reads mit Datum)**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“, [News-Übersicht mit Kategorien und Jahr-Archiv](https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/demo?v=mehr) `news-uebersicht-archiv` · Variante „Weitere laden“
12. **Artikel-Detailseite (je Beitrag eine Seite: Geschichte aus der Region als Long-Read mit Inhaltsverzeichnis, Ort und passender Tour; mit Datum, Autorin oder Autor und Stand)**: [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=ratgeber) `artikel-seite` · Variante „Ratgeber“
13. **Barrierefrei unterwegs (geprüfte Angaben je Ziel: Stufen, Steigung, Wege, WC, Leihrollstühle; Zertifizierung nur mit Nachweis; nie pauschal „barrierefrei“)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“
14. **Gästeinformation und Kontakt (Tourist-Info mit Zeiten und Telefon; Frag-uns-Feld nur mit echter Funktion und Kennzeichnung als KI beim Start; Saisonbrief)**: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber) `studio-visitenkarte-footer` · Variante „Gastgeber (Hotel am See)“, [KI-Streaming-Text und Denk-Indikator mit Shimmer](https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo?v=fragen) `ki-streaming-text-denkindikator` · Variante „Frag-uns-Feld einer Praxis“, [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“
15. **Erklärung zur Barrierefreiheit (öffentliche Stellen nach Landesrecht und BITV mit Feedback-Weg; Ticketshop nach BFSG prüfen lassen; bei öffentlicher Trägerschaft die Pflicht-Inhalte in Leichter Sprache und Gebärdensprache)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“, [Seite in Einfacher und Leichter Sprache](https://cecodesign.de/lab/fundus/zugang/einfache-sprache-seite/demo?v=amt) `einfache-sprache-seite` · Variante „Öffentliche Stelle nach § 4 BITV 2.0“

## Signatur (Pflicht)

- [Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)](https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo) `medien-expansion-scroll`

## Moment (Pflicht: woran man sich erinnert)

- Was: Ein großer Moment pro Seite: das Panorama zwischen zwei Wörtern wächst beim Scrollen zum randlosen Vollbild und steht dann.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß und scrollgekoppelt: bis Vollbild, 300vh Spur
- Muster: [Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)](https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo) `medien-expansion-scroll`
- 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: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Glas-Button](https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=frost) `glas-button` · Variante „Frost“

## 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`, [Wortmarke wird Kopfmarke](https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/demo?v=beides) `wortmarke-wird-kopfmarke` · Variante „Beides (Region)“
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)](https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo) `medien-expansion-scroll`, [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung) `bild-zoom-in-maske` · Variante „Richtungsabhängiger Clip mit farbiger Decke“
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`
- 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“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber) `studio-visitenkarte-footer` · Variante „Gastgeber (Hotel am See)“, [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) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [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“

## Optional (nur als Zusatz)

- [Balkendiagramm aus Datenattributen](https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=balken) `css-diagramm-attr` · Variante „Balken neben der Zahl“

## Nicht verwenden

- slideshow-innere-gegenparallaxe – Signatur von boutique-hotel-gastgeber
- live-uhr-und-standort – Signatur von gastro-warm-appetitlich; der Status kommt aus echten Daten
- scroll-3d-kamerafahrt / interaktives-3d-hero – 3D-Flüge über die Region sind teuer und ersetzen keine Tourdaten
- webgl-bildverzerrung – verfälscht Landschaftsfotos
- mesh-gradient-shader – Himmel-Verläufe sind Deko
- zahlen-odometer – „1.200 km Wanderwege“ wird nicht hochgezählt
- marquee-laufband – unruhig und nicht ganz lesbar
- smooth-scroll-lenis – stört Filter, Karte und Buchung
- prozent-zaehler – keine Ladeanimation vor dem Panorama
- Drohnen-Video-Hero ohne eigenes Material, Stockfotos von Wanderern mit Stöcken auf Gipfeln anderer Regionen – nur Bilder aus der Region mit Ort

## Regeln

- Erster Bildschirm: Landschaftsfoto der Region mit Karte (echter Status, Wetter mit Quelle und Uhrzeit), ein Satz, zwei Wege „Touren finden“ und „Unterkunft suchen“.
- Signatur (medien-expansion-scroll): genau ein Panorama pro Seite öffnet sich scrollgekoppelt von einer Kachel bis zum Vollbild (Radius 16 px → 0) und steht dann; nur mit hochaufgelöstem, eigenem Bild. Auf dem Telefon breiter starten und kürzere Spur; bei reduzierter Bewegung Endgröße ohne Pinning.
- Tourdaten vollständig und gleich aufgebaut: Länge, Höhenmeter auf und ab (beschriftet), Dauer, Schwierigkeit als Wort, Start und Ziel mit Haltestelle, beste Jahreszeit, Einkehr, GPX. Auf der Tourseite lokale-produktnavigation (Variante kompakt-mobil) mit höchstens fünf Abschnitten.
- Anreise ohne Auto zuerst: Bahn, Bus, Gästekarte; Parken mit Preisen danach. Karten, Tourenportale und Webcams erst nach Klick (karte-zwei-klick); Webcams ohne erkennbare Personen.
- Wetter, Status und Sperrungen nur aus einer echten Quelle mit Zeitstempel; ohne Quelle keine Live-Anzeige.
- Barrierefreiheit der Ziele nur mit geprüften Angaben; die Erklärung zur Barrierefreiheit der Website ist bei öffentlichen Stellen Pflicht (BITV bzw. Landesrecht, mit Feedback-Weg). Vom Kunden prüfen lassen.
- Verträge und Preise: Kurtaxe oder Gästebeitrag bei Übernachtungspreisen nennen; Tickets mit festem Termin ohne Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB); wer Pauschalen aus Unterkunft und weiteren Leistungen selbst verkauft, ist Reiseveranstalter (Formblatt, Insolvenzsicherung) – vom Kunden prüfen lassen.
- KI: Ein Frag-uns-Feld (ki-streaming-text-denkindikator, Variante fragen) nur mit echter Funktion, beim Start als KI gekennzeichnet (Art. 50 KI-VO), mit Quellen aus den eigenen Seiten.
- Bilder: nur aus der Region mit Ort in der Bildunterschrift, Bildrechte je Foto im Projekt; fotorealistische KI-Bilder kennzeichnen.
- Knöpfe: Wegzeichen-Rot gefüllt mit allen Zuständen (button-zustaende) für Buchen und Tickets; über ruhigen Landschaftsfotos darf der Nebenweg ein Frost-Glasknopf sein (glas-button, Variante frost), auf hellen Flächen gilt die Kontur der Hauptgestalt.
- css-diagramm-attr nur als Zusatz (Priorität F) für das Höhenprofil; ohne Unterstützung steht ein SVG mit Text.
- Der Name ist das gemeinsame Element (wortmarke-wird-kopfmarke, Variante beides): groß über dem Hero-Foto, beim Scrollen schrumpft er in den Kopf, beim Seitenwechsel fliegt er aus jedem Zwischenstand dorthin. Das Panorama bleibt der eine große Moment je Seite; das Tourbild morpht nur von Übersichtsseiten.

## Rezept-Varianten

- **Einzelnes Ausflugsziel (Bergbahn, Burg, Höhle, Freizeitpark)**: Schrift, Farbe, Stil und Signatur bleiben; das Panorama zeigt den Blick vom Ziel. Status in der Hero-Karte: heute geöffnet, letzte Fahrt oder letzter Einlass, Wetter am Gipfel. Tickets und Preise als Tabelle, Gruppen und Schulklassen mit Anfrage, Anfahrt mit Bus und Bahn zuerst. Barrierefreiheit je Bereich ehrlich.
- **Gemeinde mit Gästeinformation**: Kleine Gemeinde, die Bürger:innen und Gäste anspricht: Gästeinfo als eigener Bereich mit denselben Bausteinen; Rathaus-Themen (Termine, Formulare, Bekanntmachungen) getrennt und schlicht. Als öffentliche Stelle gilt die Erklärung zur Barrierefreiheit nach Landesrecht; Impressum mit Vertretung der Gemeinde. 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“.