{
 "schema": "fundus-rezept/1",
 "stand": "02.11.2026",
 "basis": {
  "stand": "02.11.2026 (Runde 5: Redaktion nach KI-Audit und Lückenrecherche)",
  "muster": [
   "vt-cross-document-mpa",
   "css-view-reveal-nativ",
   "unterstreichung-varianten",
   "button-zustaende",
   "validierung-nach-interaktion",
   "consent-banner-gestaltet",
   "fokus-stil-system",
   "sprunglinks-landmarken",
   "bewegung-pausieren-schalter",
   "fehlerseite-leerzustand",
   "dialog-modal-nativ",
   "zoom-und-textabstand-robust",
   "kontrastmodus-forced-colors",
   "firmendaten-strukturiert",
   "sofort-navigation-vorladen"
  ],
  "beschreibung": "Grundausstattung, die jedes Rezept ohne Nennung bekommt: native Seitenübergänge zwischen echten Seiten (vt-cross-document-mpa) und Vorladen der Hauptwege (sofort-navigation-vorladen), beides nicht bei Onepagern; native Scroll-Reveals nur wo sinnvoll, Link-Unterstreichung, vollständige Button-Zustände, Validierung erst nach Interaktion, ein gestaltetes Consent-Banner, Fehlerseite und Leerzustand, natives Dialog-Modal und eine einzige Datenquelle für Firmendaten, aus der Kontaktblock, Öffnungszeiten und JSON-LD entstehen (firmendaten-strukturiert). Dazu die Barrierefreiheit der Kategorie zugang: sichtbarer Fokus, Sprunglinks und Landmarken, Pause für Bewegung, 200 % Zoom und Textabstände ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus (kontrastmodus-forced-colors). In Sektionen dürfen Basis-Muster genannt werden, wenn sie dort besonders wichtig sind (z. B. Formular-Validierung); in den Kategorie-Listen der Rezepte stehen sie nicht.",
  "regeln": [
   "Keine Schrift kommt in mehr als 3 Rezepten vor (headline, text und akzent zusammen gezählt, alternative_eigenprojekt ausgenommen).",
   "Ein Rezept darf Headline- und Textschrift nicht 1:1 mit einem anderen Rezept teilen.",
   "Pflichtfeld signatur: 1–2 Muster, die kein anderes Rezept nutzt (Basis ausgenommen); jedes Signatur-Muster steht auch in den Muster-Listen des Rezepts.",
   "cinematic-video-hero nur mit eigenem, hochwertigem Footage. Für typische KMU-Kunden (Gastro, Mode/Concept Store) ist ein Foto-Hero Standard, Video steht unter hero_variante.",
   "Kontakt/Anfrage, Online-Termin und Anfahrt sind eigene Sektionen (kontakt-anfrage-formular bzw. mehrschritt-anfrage, termin-buchung-zwei-klick, karte-zwei-klick, oeffnungszeiten-status), auch wenn ein Rezept sie nicht nennt; die Adresse steht immer auch als Text da; studio-visitenkarte-footer steht nur im Footer.",
   "Drittanbieter-Inhalte (Video, Karte, Buchung, Social Feeds) erst nach Einwilligung bzw. Klick laden.",
   "Höchstens ein Material-Effekt (Glow, Verlaufsrahmen, Raster, Textur) pro Ansicht.",
   "Automatisch bewegte Inhalte (Laufband, Wortwechsel, Autoplay) nie für wichtige Information; immer pausierbar und unter prefers-reduced-motion statisch.",
   "Barrierefreiheit gehört zur Grundausstattung (BFSG seit 28.06.2025): sichtbarer Fokus (fokus-stil-system), Sprunglinks und Landmarken, Pause für alles, was sich länger als 5 s bewegt (bewegung-pausieren-schalter), native Dialoge, 200 % Zoom und 320 px Breite ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus prüfen (kontrastmodus-forced-colors). Rechtliches (Erklärung zur Barrierefreiheit) vom Kunden prüfen lassen.",
   "Firmendaten (Name, Adresse, Telefon, Zeiten samt Sonderzeiten, Leistungen, Profil-Links) aus einer Quelle; JSON-LD nur für sichtbare Inhalte, keine eigenen Bewertungssterne im Markup (firmendaten-strukturiert).",
   "Wer online Verträge mit Verbrauchern schließt (Shop, Kurs, Abo, Mitgliedschaft, Online-Anmeldung), braucht im Footer ohne Login „Vertrag widerrufen“ und bei Dauerverträgen „Verträge hier kündigen“ (widerruf-und-kuendigung-schaltflaeche, seit 19.06.2026) – vom Kunden prüfen lassen.",
   "Bewertungen von Google oder anderen Plattformen nur mit Echtheitshinweis direkt an den gezeigten Bewertungen (bewertungsprofil-mit-echtheitshinweis); bewertungen-verteilung nur für eigene, geprüfte Bewertungen.",
   "Pflichtangaben (Impressum, Datenschutzerklärung, Branchenpflichten aus Leitfaden 8a und den Rezept-regeln) als Seiten, Links oder markierte Platzhalter; keine Rechtstexte erfinden, alles vom Kunden prüfen lassen. Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO), keine pauschalen Umweltaussagen ohne Nachweis.",
   "consent-banner-gestaltet nur, wenn beim Laden einwilligungspflichtige Dienste laufen. Laden alle Dritten erst per 2-Klick, genügt ein Einstellungs-Dialog im Footer („Datenschutz-Einstellungen“) zum Widerrufen.",
   "Starter- und Beispielseiten ohne echte Daten: Bewertungen, Preise, Allergene und Kennzahlen als markierte Platzhalter, nie erfundene Kundenstimmen als echt.",
   "Werbung mit Rate, Zins, „0 %“, Ratenzahlung, Leasing oder „später bezahlen“ braucht ab 20.11.2026 finanzierung-pflichtangaben: effektiver Jahreszins mindestens so groß wie die Rate, Warnhinweis „Achtung! Kreditaufnahme kostet Geld.“ direkt dabei (vom Kunden prüfen lassen).",
   "Verkauf von Waren an Verbraucher braucht seit 27.09.2026 den EU-Hinweis zur gesetzlichen Gewährleistung (eu-gewaehrleistungshinweis), mindestens als Footer-Link, sicherer an Produktseite und Checkout; nur die amtliche Vorlage der EU-Kommission."
  ],
  "herkunft": "Art-Director-Prüfung der 18 Rezepte, Runde 3 (Basis-Block, Signatur-Pflichtfeld, Schriftverteilung, 2-Klick-Muster). Runde 5 (02.11.2026): zugang-Muster, Firmendaten und Vorladen in die Grundausstattung, Regeln zu Kontakt, Verträgen, Bewertungen und Pflichtangaben (KI-Audit Befund 3, Lückenrecherche N1–N3, N6, K5)."
 },
 "id": "boutique-hotel-gastgeber",
 "name": "Boutique-Hotel: Gastgeber mit Haltung",
 "branche": "Hotel / Boutique-Unterkunft / Pension / Ferienapartments",
 "stimmung": [
  "gastfreundlich",
  "entspannt",
  "hochwertig",
  "ortsverbunden"
 ],
 "kurz": "Die Website ist das Foyer: großes Bild oder kurzer Film vom Haus, direkt darunter die Buchungsleiste mit Datum und Gästen. Eine leichte Serif für Stimmung, eine breite Grotesk für Labels, sandige Töne. Weiche, langsame Bildwechsel (clip-path-Reveal, Slideshow mit innerer Gegenbewegung), aber eine schnelle Buchungsstrecke mit eigenem, asymmetrischem UI-Tempo.",
 "referenzen": [
  {
   "seite": "The Hoxton (Boutique-Hotels)",
   "url": "https://thehoxton.com/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): WordPress. Vorgeladene Schriften GT America (Thin, Light, Regular, Medium, Extended Regular, Extended Bold) und Tiempos Fine (Light, Light Italic, Italic, Bold). Section 'irnmn-booking-system' als Buchungsleiste direkt nach dem Hero (zusätzlich Variante '--bar-wra…'), danach cb-global-hero, cb-promo, 'Trending destinations'. Farben #3e3a37 (warmes Dunkel), #fef2e3 (Creme). Übergänge all .5s, opacity .2s, background/color .6s linear. Navigation Why Book With Us? / Global Offers / Join Dis-loyalty / Meetings & Events / What's On / My Booking, 6 Sprachen.",
   "herkunft": "beobachtet",
   "quelle": "https://thehoxton.com/ (HTML-Preloads + _static-CSS)"
  },
  {
   "seite": "Aman",
   "url": "https://www.aman.com/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Drupal + jQuery. Erste Section 'aman-booking-bar-section', dann Video-Absatz, Slider-Karten, 'Seasonal Experiences', hervorgehobene Sektion auf bg-sand-grey. @font-face u. a. 'Lyon Display Web' 300, 'Lyon Text Web' 400, 'WhitneyBook' 200–400, 'SuisseBP', 'Calligraph810'. Farben #f3eee7 (Sand, 50×), #e6e2db, #d5d1c8, Text #313131, Grau-Grün #82847f. Laufweite .05rem (23×) für Labels. Übergänge border-color/color .4s; cubic-bezier(0.19,1,0.22,1) (Expo-Out).",
   "herkunft": "beobachtet",
   "quelle": "https://www.aman.com/ (aggregiertes Drupal-CSS)"
  },
  {
   "seite": "Michelberger Hotel (Berlin)",
   "url": "https://www.michelbergerhotel.com/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS/JS per curl abgerufen): Gatsby 3.13.1. Nur 'Untitled Sans' Regular und Italic per @font-face (eine Schrift, ein Gewicht). Übergänge opacity 300ms linear und 600ms linear. Eigene Datumsauswahl auf der Seite (Klassen CalendarDay__default, CalendarDay__blocked_minimum_nights, __blocked_out_of_range → Mindestaufenthalt wird im Kalender gezeigt). Sprachen Deutsch/Englisch.",
   "herkunft": "beobachtet",
   "quelle": "https://www.michelbergerhotel.com/ (HTML + Gatsby-Bundles)"
  }
 ],
 "schrift": {
  "paarung_basis": "",
  "abweichung": "",
  "headline": "newsreader",
  "text": "mona-sans",
  "akzent": "",
  "groessen": "h1 clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader opsz 72, wght 300–400, Laufweite -0.015em, Zeilenhöhe 1.05; Kursiv für Ortsnamen/Akzente (wie Tiempos Fine Italic bei Hoxton). Labels und Buttons Mona Sans wdth 112–125 (breit wie GT America Extended), 0.75rem Versal, Laufweite 0.06em; Fließtext Mona Sans wdth 100, 1.0625rem, Zeilenhöhe 1.6.",
  "techniken": [
   "serif-grotesk-duotone",
   "optische-groessen-opsz",
   "fluide-typo-clamp-cqi"
  ],
  "alternative_eigenprojekt": "Eigenprojekt: Paarung hairline-hero (zodiak + instrument-sans) oder sentient als Headline (ITF). Michelberger-Variante (eine Grotesk, ein Gewicht) template-tauglich mit hanken-grotesk."
 },
 "farbe": {
  "prinzip": "Sand und Creme als Grund, warmes Dunkelbraun-Grau statt Schwarz, ein gedämpfter Naturton aus dem Haus (Holz, Stein, Pflanzen). Kein Gold, keine Verläufe – die Fotos tragen die Stimmung.",
  "beispiel": [
   "#F3EEE7 Grund (Aman Sand)",
   "#FEF2E3 Creme für Buchungsleiste/Karten (Hoxton)",
   "#3E3A37 Text/Footer (Hoxton)",
   "#D5D1C8 Linien, Rahmen",
   "#82847F Sekundärtext, Meta (Aman)",
   "#6E5A47 Hauston für Buttons (frei gewählt aus dem Interieur, hier Beispiel Holz)",
   "#6A6C67 Meta-Text barrierefrei (4.6 : 1 auf #F3EEE7; #82847F nur für Linien oder Schrift ab 24 px)"
  ]
 },
 "animationsstil": "token-luxus-weich",
 "animationsstil_ui": "token-toggle-asymmetrisch",
 "bewegung": {
  "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder und Hero-Wechsel); UI über animationsstil_ui",
  "beobachtet": "Deckkraft 300/600 ms linear (Michelberger), .4s (Aman), .5–.6s (Hoxton); UI cubic-bezier(0.4, 0, 0.2, 1) 150–250 ms",
  "dauer_ms": "300–600 (Deckkraft, linear oder sine, wie Michelberger), 400 (UI-Farben, Rahmen wie Aman), 900–1200 (Bild-Crossfades/Hero-Wechsel)",
  "regel": "Lange, sanfte Kurven nur für Bilder und Hero-Wechsel; Buchungsleiste, Datumsauswahl und Formulare reagieren in 150–250 ms über animationsstil_ui token-toggle-asymmetrisch. Keine Federn, kein Überschwingen, kein Dauer-Ken-Burns – höchstens einmaliges Zurückskalieren 1.06 → 1.",
  "herkunft": "beobachtet (Michelberger opacity 300/600 ms linear; Aman .4s; Hoxton .5–.6s); Sinus-Kurve aus token-luxus-weich"
 },
 "hero_beschreibung": "Foto-Hero als Standard: ein starkes, echtes Foto von Haus, Zimmer oder Lage, Name und ein Satz zur Lage; die Buchungsleiste liegt halb darüber. cinematic-video-hero nur als Variante mit eigenem, hochwertigem Footage (stumm, Poster, Pause-Knopf, mobil Standbild); Pensionen und Ferienwohnungen bleiben beim Foto.",
 "muster": {
  "seitenuebergang": [],
  "preloader": [],
  "navigation": [
   "vollbild-overlay-menue-bildvorschau",
   "native-popover-dropdowns",
   "mobile-bottom-navigation"
  ],
  "hero": [
   "foto-hero-mit-leiste"
  ],
  "hero_variante": [
   "cinematic-video-hero"
  ],
  "sektionen": [
   {
    "zweck": "Buchungsleiste (Datum, Gäste) direkt unter dem Hero",
    "muster": [
     "buchungsleiste-datumsbereich"
    ],
    "varianten": {
     "buchungsleiste-datumsbereich": "leiste"
    }
   },
   {
    "zweck": "Zimmer & Suiten",
    "muster": [
     "akkordeon-panels",
     "galerie-shared-element-vollbild",
     "karussell-steuerung"
    ],
    "varianten": {
     "galerie-shared-element-vollbild": "produkt",
     "karussell-steuerung": "zaehler"
    }
   },
   {
    "zweck": "Restaurant / Bar / Spa",
    "muster": [
     "split-screen-sticky-seiten",
     "speisekarte-editorial"
    ],
    "varianten": {
     "split-screen-sticky-seiten": "bild",
     "speisekarte-editorial": "menue"
    }
   },
   {
    "zweck": "Erlebnisse & Umgebung / Was ist los",
    "muster": [
     "editorial-magazin-layout",
     "programm-kalender"
    ],
    "varianten": {
     "editorial-magazin-layout": "zeitung",
     "programm-kalender": "programm"
    }
   },
   {
    "zweck": "Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
    "muster": [
     "css-native-karussell",
     "gutschein-konfigurator"
    ],
    "varianten": {
     "css-native-karussell": "peek"
    }
   },
   {
    "zweck": "Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
    "muster": [
     "bewertungsprofil-mit-echtheitshinweis",
     "bewertungen-verteilung",
     "testimonials-neu-gedacht"
    ],
    "varianten": {
     "bewertungen-verteilung": "seitlich",
     "testimonials-neu-gedacht": "zitat",
     "bewertungsprofil-mit-echtheitshinweis": "mehrere"
    }
   },
   {
    "zweck": "Tagungen & Feiern",
    "muster": [
     "split-screen-sticky-seiten"
    ],
    "varianten": {
     "split-screen-sticky-seiten": "bild"
    }
   },
   {
    "zweck": "Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)",
    "muster": [
     "karte-zwei-klick",
     "kontakt-anfrage-formular"
    ],
    "varianten": {
     "karte-zwei-klick": "bild"
    }
   },
   {
    "zweck": "Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)",
    "muster": [
     "barrierefreiheit-seite"
    ],
    "varianten": {
     "barrierefreiheit-seite": "bfsg"
    }
   }
  ],
  "scroll": [
   "clip-path-bild-reveal"
  ],
  "schrift_animation": [],
  "hover": [
   "bild-zoom-in-maske"
  ],
  "cursor": [],
  "mikro": [
   "animiertes-select",
   "einblenden-starting-style"
  ],
  "material": [],
  "galerie": [
   "galerie-shared-element-vollbild",
   "slideshow-innere-gegenparallaxe",
   "css-native-karussell"
  ],
  "footer": [
   "studio-visitenkarte-footer",
   "footer-newsletter-mit-persoenlichkeit"
  ],
  "button": [
   "pfeil-icon-button",
   "glas-button"
  ],
  "recht": [
   "widerruf-und-kuendigung-schaltflaeche"
  ],
  "hero_varianten": {
   "foto-hero-mit-leiste": "leiste"
  }
 },
 "signatur": [
  "slideshow-innere-gegenparallaxe"
 ],
 "varianten_demo": {
  "footer-newsletter-mit-persoenlichkeit": "saison",
  "bild-zoom-in-maske": "gegen",
  "glas-button": "frost",
  "pfeil-icon-button": "tausch",
  "mobile-bottom-navigation": "basis",
  "galerie-shared-element-vollbild": "produkt",
  "css-native-karussell": "peek",
  "studio-visitenkarte-footer": "gastgeber",
  "slideshow-innere-gegenparallaxe": "hero"
 },
 "nicht_verwenden": [
  "gaussian-splats – Dateigrößen sprengen die mobile Ladezeit, Zimmerfotos verkaufen besser",
  "3d-karussell-zylinder – Zimmerfotos seitlich verzerrt",
  "smooth-scroll-lenis – verträgt sich schlecht mit Datums-Popovern und Buchungs-iFrames",
  "logo-aufbau-intro / prozent-zaehler – Gäste wollen sofort Verfügbarkeit sehen",
  "magnetische-elemente – Agentur-Geste, passt nicht zum Gastgeber-Ton",
  "konfetti-erfolg nach der Buchung – eine ruhige Bestätigung mit Anreise-Infos ist hochwertiger"
 ],
 "regeln": [
  "Buchungsleiste (Anreise, Abreise, Gäste, Button) direkt unter dem Hero und mobil als feste untere Leiste – wie Hoxton und Aman.",
  "Mindestaufenthalt und belegte Tage schon im Kalender zeigen (Michelberger), nicht erst im Buchungsschritt.",
  "Hero-Film nur mit eigenem Material, stumm, mit Poster und Pause; sonst ein starkes Foto.",
  "Direktbuchungs-Vorteile klar benennen (Hoxton 'Why Book With Us?'), Preise mit 'ab' und Zeitraum.",
  "Serif nur für Headlines und kurze Zitate; Labels breit und versal, Fließtext neutral.",
  "Zimmerkategorien mit Größe, Bettenart, Ausblick und 3–6 Fotos; Detailbilder im Vollbild per Shared-Element-Übergang.",
  "Mehrsprachig (mindestens DE/EN) mit Sprachwahl im Header.",
  "Lage und Anreise als eigene Sektion und zusätzlich im Footer als Visitenkarte; Karte erst nach Klick laden.",
  "Buchungsleiste, Datumsauswahl, Menüs und Drawer nutzen token-toggle-asymmetrisch (öffnen ca. 300 ms mit Ausklang-Kurve, schließen ca. 200 ms); token-luxus-weich gilt nur für Bilder und Hero-Wechsel.",
  "Pflichtangaben und Recht (Leitfaden 8a): Preise inkl. MwSt. als Gesamtpreis mit allen unvermeidbaren Kosten, Kurtaxe bzw. Übernachtungssteuer erkennbar; Storno- und Zahlungsbedingungen vor der Buchung; für Beherbergung gilt meist kein Widerrufsrecht, das klar sagen statt einen Widerrufs-Button vorzutäuschen; Erklärung zur Barrierefreiheit (bfsg) bei Online-Buchung; Plattform-Bewertungen nur mit Echtheitshinweis (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; Gästefotos nur mit Einwilligung – vom Kunden prüfen lassen.",
  "Auf dem Telefon nur eine untere Leiste: Buchen gehört in mobile-bottom-navigation, keine zweite feste Buchungsleiste darüber.",
  "Gutscheine online verkaufen heißt Verbrauchervertrag: dann gehört widerruf-und-kuendigung-schaltflaeche dazu (Abschnitt 8a, vom Kunden prüfen lassen).",
  "glas-button nur über Fotos (Hero, Slideshow). Auf Creme und in Formularen gilt pfeil-icon-button in der Hausfarbe."
 ],
 "template_tauglich": true,
 "aufwand": "mittel",
 "leistung": "Booking-Engine-Widget (iFrame oder Script) erst bei Interaktion laden, Leiste vorher selbst gerendert und Parameter per URL übergeben. Video-Hero unter 4 MB, mobil Poster. Kein Parallax; die innere Gegenbewegung der Slideshow entfällt bei reduced motion.",
 "offen": [
  "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
 ],
 "varianten": [
  {
   "name": "Ferienwohnung / Pension (wenige Einheiten)",
   "hinweis": "Für Ferienwohnungen, Ferienhäuser und kleine Pensionen mit etwa einer bis acht Einheiten. Schrift, Farbe, Stil und Signatur bleiben; slideshow-innere-gegenparallaxe nur für die Bilder der Einheiten, nie im Kalender. buchungsleiste-datumsbereich auf der Startseite in der Variante leiste, auf jeder Wohnungsseite in der Variante zimmer (Buchungskarte rechts, Gesamtpreis unter dem Formular); belegte Tage, Mindestaufenthalt und An- bzw. Abreisetage stehen schon im Kalender. Bei nur einer Wohnung mit wenigen Anfragen statt Online-Buchung den Belegungskalender als Ansicht und darunter kontakt-anfrage-formular (wann_nicht von buchungsleiste-datumsbereich). Widgets von Channel-Manager oder Buchungsportal über termin-buchung-zwei-klick (Variante platzhalter, mobil linkout), Telefon und E-Mail daneben. Saisonpreise ab drei Einheiten als vergleichstabelle-sticky, sonst als einfache Tabelle. Gastgeber:innen mit team-ueber-mich-layout, Variante statement. Recht: Endpreis inkl. Endreinigung, Bettwäsche und Nebenkosten, wenn sie in jedem Fall anfallen (PAngV; OLG Schleswig 22.03.2013, 6 U 27/12); Kurtaxe bzw. Gästebeitrag als kommunale Abgabe getrennt und gut sichtbar nennen (Empfehlung des DTV); Anzahlung, Storno und Zahlungsarten vor der Buchung; für Beherbergung zu festen Terminen meist kein Widerrufsrecht, das klar sagen statt einen Widerrufs-Button vorzutäuschen; eine Registriernummer anzeigen, wo die Gemeinde eine Registrierung verlangt (Zweckentfremdungssatzung; die EU-Verordnung 2024/1028 zur Kurzzeitvermietung gilt seit Mai 2026, ein bundesweites Register gibt es nicht); BFSG bei Online-Buchung prüfen (Kleinstunternehmen ausgenommen) – vom Kunden prüfen lassen.",
   "sektionen": [
    "Belegung und Preis direkt unter dem Hero (Kalender mit belegten Tagen und Mindestaufenthalt; Gesamtpreis für den Zeitraum inkl. Endreinigung, Kurtaxe getrennt daneben)",
    "Die Wohnungen bzw. Zimmer (je Einheit Größe, Betten, Ausstattung, 3–6 Fotos, Buchungskarte)",
    "Direkt buchen oder anfragen (eigene Buchung, Widget per 2-Klick oder Anfrage; Vorteile der Direktbuchung als Text)",
    "Preise und Bedingungen (Saisonpreise, Endreinigung, Bettwäsche, Haustiere, Anzahlung, Storno)",
    "Ihre Gastgeber:innen (wer da ist, Schlüsselübergabe, Erreichbarkeit)",
    "Umgebung und Anreise (Adresse als Text, Karte per 2-Klick, Parken, ÖPNV)",
    "Gästestimmen (Plattform-Bewertungen mit Echtheitshinweis)",
    "Erklärung zur Barrierefreiheit (bei Online-Buchung Variante BFSG prüfen)"
   ],
   "weglassen": [
    "Restaurant / Bar / Spa",
    "Tagungen & Feiern",
    "Angebote & Pakete (höchstens eine Zeile, wenn es echte Pakete gibt)",
    "Gutscheine (nur mit Zahlungsdienst und Codeverwaltung)"
   ],
   "muster_zusatz": [
    "termin-buchung-zwei-klick",
    "vergleichstabelle-sticky",
    "team-ueber-mich-layout"
   ]
  }
 ],
 "stimmung_tags": [
  "warm",
  "luxuriös",
  "ruhig"
 ],
 "raum": {
  "basis_px": 8,
  "skala_px": [
   4,
   8,
   12,
   16,
   24,
   32,
   48,
   64,
   96,
   168
  ],
  "sektion": "clamp(88px, 11vw, 168px)",
  "dichte": "luftig",
  "hinweis": "Werte wie im Starter (starter/boutique-hotel-gastgeber/tokens.css: --s-1 bis --s-8, --sektion). Bilder und Kapitel mit viel Luft, die Buchungsleiste dagegen kompakt mit 56 px Höhe."
 },
 "raster": {
  "spalten": 12,
  "rand": "clamp(18px, 3.6vw, 56px)",
  "spalt": "clamp(16px, 2.4vw, 32px)",
  "max_breite": "1320px",
  "hinweis": "Hero und Zimmerbilder randlos, Text auf 62ch. Zimmer als 2er-Raster mit 3:2-Bildern, Lage und Anreise 6/6."
 },
 "form": {
  "radius_klein": "6px",
  "radius_gross": "6px",
  "pille": true,
  "linie": "1px #D5D1C8 für Linien und Rahmen (nur Deko); Feldrahmen #8f877c",
  "schatten": "keiner; der einzige Material-Effekt ist der Glas-Knopf über dem Hero-Foto (glas-button, Variante frost)",
  "hinweis": "Knöpfe als Pille (Starter --knopf-radius 999px), Karten und Popover 6 px (Starter --radius)."
 },
 "bildsprache": {
  "licht": "Weiches Tageslicht am Morgen oder Abend, warme Töne, Schatten erlaubt; nichts aufgehellt.",
  "ausschnitt": "Haus in der Landschaft, Zimmer mit Blick aus dem Fenster, Details wie Bettwäsche, Frühstück, Material.",
  "personen": "Selten: Gäste von hinten oder klein im Bild, Gastgeber:innen mit Namen; Gästefotos nur mit Einwilligung.",
  "formate": [
   "3:2",
   "4:5",
   "16:9"
  ],
  "nicht": "Keine Weitwinkel-Zimmer, keine Pool- und Spa-Stockfotos, kein Gold, keine Verläufe, keine 3D-Rundgänge im Hero."
 },
 "ton": {
  "anrede": "Sie",
  "saetze": "Ruhig und gastlich, kurze Sätze mit Ort und Zahl. Preise immer mit „ab“ und Zeitraum.",
  "haltung": "Gastgeber:in, nicht Buchungsportal. Direktbuchungs-Vorteile klar und ohne Druck.",
  "beispiele": [
   "Zwölf Zimmer am See, zehn Minuten zu Fuß zum Wasser.",
   "Direkt bei uns gebucht: Frühstück und späte Abreise inklusive."
  ],
  "nicht": "„Ihre Auszeit vom Alltag“, „Wohlfühloase“, „einzigartiges Erlebnis“, Countdown oder „Nur noch 1 Zimmer“ ohne echte Zahl."
 },
 "hero_aufbau": {
  "raster": "Foto randlos über die volle Breite bis knapp über die Bildschirmunterkante; Text unten links über Spalte 1 bis 6.",
  "bild": "Ein starkes, echtes Foto, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Footage, mobil Standbild.",
  "h1": "clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader 300–400, unten links, Ortsname kursiv.",
  "handlung": "Buchungsleiste (Anreise, Abreise, Gäste, „Verfügbarkeit prüfen“) liegt halb über der Bildunterkante, über 10 Spalten; mobil als feste untere Leiste.",
  "zusatz": "Kein Versal-Label über der H1 (C13), der Ort steht kursiv in der H1. Sprachwahl DE/EN im Kopf. Umsetzung: foto-hero-mit-leiste/leiste."
 },
 "url": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "gaussian-splats"
   ],
   "grund": "Dateigrößen sprengen die mobile Ladezeit, Zimmerfotos verkaufen besser"
  },
  {
   "ids": [
    "3d-karussell-zylinder"
   ],
   "grund": "Zimmerfotos seitlich verzerrt"
  },
  {
   "ids": [
    "smooth-scroll-lenis"
   ],
   "grund": "verträgt sich schlecht mit Datums-Popovern und Buchungs-iFrames"
  },
  {
   "ids": [
    "logo-aufbau-intro",
    "prozent-zaehler"
   ],
   "grund": "Gäste wollen sofort Verfügbarkeit sehen"
  },
  {
   "ids": [
    "magnetische-elemente"
   ],
   "grund": "Agentur-Geste, passt nicht zum Gastgeber-Ton"
  },
  {
   "ids": [
    "konfetti-erfolg"
   ],
   "grund": "nach der Buchung – eine ruhige Bestätigung mit Anreise-Infos ist hochwertiger"
  }
 ],
 "starter": "https://cecodesign.de/lab/fundus/starter/boutique-hotel-gastgeber/index.html",
 "alle_muster": [
  {
   "id": "slideshow-innere-gegenparallaxe",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/meta.json",
   "variante": "hero",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=hero"
  },
  {
   "id": "foto-hero-mit-leiste",
   "rolle": "Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/meta.json",
   "variante": "leiste",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste"
  },
  {
   "id": "cinematic-video-hero",
   "rolle": "Hero-Variante",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
  },
  {
   "id": "buchungsleiste-datumsbereich",
   "rolle": "Sektion: Buchungsleiste (Datum, Gäste) direkt unter dem Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/meta.json",
   "variante": "leiste",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo?v=leiste"
  },
  {
   "id": "akkordeon-panels",
   "rolle": "Sektion: Zimmer & Suiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/meta.json"
  },
  {
   "id": "galerie-shared-element-vollbild",
   "rolle": "Sektion: Zimmer & Suiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
   "variante": "produkt",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt"
  },
  {
   "id": "karussell-steuerung",
   "rolle": "Sektion: Zimmer & Suiten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/meta.json",
   "variante": "zaehler",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler"
  },
  {
   "id": "split-screen-sticky-seiten",
   "rolle": "Sektion: Restaurant / Bar / Spa",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
  },
  {
   "id": "speisekarte-editorial",
   "rolle": "Sektion: Restaurant / Bar / Spa",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/meta.json",
   "variante": "menue",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=menue"
  },
  {
   "id": "editorial-magazin-layout",
   "rolle": "Sektion: Erlebnisse & Umgebung / Was ist los",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
   "variante": "zeitung",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
  },
  {
   "id": "programm-kalender",
   "rolle": "Sektion: Erlebnisse & Umgebung / Was ist los",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
   "variante": "programm",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
  },
  {
   "id": "css-native-karussell",
   "rolle": "Sektion: Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
   "variante": "peek",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
  },
  {
   "id": "gutschein-konfigurator",
   "rolle": "Sektion: Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json"
  },
  {
   "id": "bewertungsprofil-mit-echtheitshinweis",
   "rolle": "Sektion: Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json",
   "variante": "mehrere",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere"
  },
  {
   "id": "bewertungen-verteilung",
   "rolle": "Sektion: Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json",
   "variante": "seitlich",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=seitlich"
  },
  {
   "id": "testimonials-neu-gedacht",
   "rolle": "Sektion: Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
   "variante": "zitat",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat"
  },
  {
   "id": "karte-zwei-klick",
   "rolle": "Sektion: Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild"
  },
  {
   "id": "kontakt-anfrage-formular",
   "rolle": "Sektion: Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
  },
  {
   "id": "barrierefreiheit-seite",
   "rolle": "Sektion: Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json",
   "variante": "bfsg",
   "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg"
  },
  {
   "id": "vollbild-overlay-menue-bildvorschau",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/meta.json"
  },
  {
   "id": "native-popover-dropdowns",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
  },
  {
   "id": "mobile-bottom-navigation",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis"
  },
  {
   "id": "clip-path-bild-reveal",
   "rolle": "Scroll",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/meta.json"
  },
  {
   "id": "bild-zoom-in-maske",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
   "variante": "gegen",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen"
  },
  {
   "id": "animiertes-select",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json"
  },
  {
   "id": "einblenden-starting-style",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
  },
  {
   "id": "studio-visitenkarte-footer",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
   "variante": "gastgeber",
   "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber"
  },
  {
   "id": "footer-newsletter-mit-persoenlichkeit",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
   "variante": "saison",
   "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison"
  },
  {
   "id": "pfeil-icon-button",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
   "variante": "tausch",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch"
  },
  {
   "id": "glas-button",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/glas-button/meta.json",
   "variante": "frost",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=frost"
  },
  {
   "id": "widerruf-und-kuendigung-schaltflaeche",
   "rolle": "Recht (nur wenn die Bedingung zutrifft)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json"
  },
  {
   "id": "token-luxus-weich",
   "rolle": "Animationsstil",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/meta.json"
  },
  {
   "id": "token-toggle-asymmetrisch",
   "rolle": "Animationsstil für UI",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
  },
  {
   "id": "serif-grotesk-duotone",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json"
  },
  {
   "id": "optische-groessen-opsz",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json"
  },
  {
   "id": "fluide-typo-clamp-cqi",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/meta.json"
  }
 ]
}
