Zum Inhalt
← Rezepte
Alle Rezepte

Region und Ausflugsziel: Weg, Wetter, Anreise

Tourismusregion / Ferienregion / Gemeinde mit Gästeinformation / Naturpark / Ausflugsziel (Bergbahn, Burg, Höhle, Freizeitpark)

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).

Bauplan tokens.css Alle Techniken

Schrift

Weg, Wetter, Anreise

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.

Tourismusregion

Headline
Big Shoulders
Text
Host Grotesk
Akzent
IBM Plex Mono

Farbe

  • #EEF0EC
  • #1B2226
  • #DAD6CA
  • #1F2E2B
  • #B1321C
  • #565E60
  • #C9CCC4

Bewegung

cubic-bezier(0.37, 0, 0.63, 1)
Dauer
150 (Hover, Farbe), 300 (Filter, Leiste, Dialog öffnen), 200 (schließen), 1400 (Masken-Reveal eines Landschaftsfotos, einmal); Panorama scrollgekoppelt über etwa 300vh

Aufbau der Seite

SignaturMedien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)

HeroFoto-Hero mit Leiste, Karte oder Weiche · Karte

  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 · Hinweisleiste
  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)
  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 · FilterleisteNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · KartenreiheKarussell-Steuerung und Anzeige · 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 · KompaktKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · 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 · ZweireihigBild-Zoom in der Maske · Richtungsabhängiger Clip
  6. Was ist los (Veranstaltungen nach Datum, Feste, Märkte, Führungen; Liste nach Monat, Tickets beim Anbieter)Programm-Kalender mit Liste und Monat · Liste und MonatGanze Karte klickbar · Liste
  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 · Ticket
  8. Übernachten (Datum und Personen an die Buchungsplattform übergeben, oder Gastgeberverzeichnis; Gästebeitrag bzw. Kurtaxe nennen)Buchungsleiste mit Datumsbereich · 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 · FAQKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Standorte
  10. Gästekarte und Tickets (was enthalten ist, für wen, Preis; Tageskarte, Familienkarte, Saisonkarte nebeneinander)Vergleichstabelle mit fester Kopfzeile · Paketvergleich
  11. Reisemagazin (Geschichten aus der Region: Menschen, Handwerk, Küche, Jahreszeiten; Long-Reads mit Datum)Editorial-/Magazin-Layout · MagazinNews-Übersicht mit Kategorien und Jahr-Archiv · 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 · 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 · FAQ Fahrschule
  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) · GastgeberKI-Streaming-Text und Denk-Indikator mit Shimmer · Frag-uns-FeldNewsletter-Modul mit Persönlichkeit · Saisonbrief im
  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 · ErklärungSeite in Einfacher und Leichter Sprache · Öffentliche Stelle

OptionalBalkendiagramm aus Datenattributen

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „atemberaubend“, „unvergesslich“, „Paradies“, „Geheimtipp“ für bekannte Ziele.
Hero, Raum und Form
  • Hero-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.
  • Hero-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.
  • Sektionsabstand: clamp(72px, 10vw, 160px)
  • Dichte: luftig
  • Raum: Weit wie die Landschaft: große Bilder mit viel Raum, Tourdaten dagegen dicht in einer Zeile (8 px).
  • Spalten: 12
  • 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
  • Schatten: keiner
  • Form: Ruhige Kästen; das Panorama startet mit 16 px Radius und endet randlos.
Vorbilder