/* ============================================================================ FERIENWOHNUNG DUENENLICHT — Ferienwohnung mit Meerblick, Timmendorfer Strand Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler, kein Bildwechsel, kein `background-attachment: fixed`. HERKUNFT -------- 1:1 uebertragen aus dem Claude-Design-Entwurf "Ferienwohnung Duenenlicht Timmendorfer Strand.dc.html" (Projekt 9e200815-1fb2-4f84-b0ef-82a1c23232f8, Base64-verpackt gesichert), Uebernahme am 30.10.2026 nach `docs/regeln/vorlagen.md` und den Entscheidungen von Benedikt vom 30.10.2026: Aufbau, Reihenfolge, Texte, Farben, Schriften, Groessen, Abstaende, Rundungen und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Der Entwurf laedt Cormorant Garamond und Manrope von Google Fonts und die Laufzeitdatei der Claude-Design-Umgebung. Er traegt Hover-Angaben der Umgebung an neun Knoten (vier Menuepunkte, Kopf-Knopf, Hero-Knopf, "Raeume ansehen", Preis-Knopf, Formular-Knopf), eine Fokus-Angabe am Sprungverweis, dreizehn Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, sechs Fehlermeldungen, Schaetzkasten und seine Zusatzzeile, Statusmeldung und E-Mail-Knopf), zwei Schleifen sc-for (Saisons, Fragen) und eine `DCLogic`-Klasse mit Breiten-, Scroll- und Menuezustand, Datumsgrenzen, Preis-Schaetzung, Formularpruefung und einem Mail-Entwurf beim Absenden. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Die Fotos sind die des Projekts: mit Higgsfield erzeugte Illustrationen. Die Bildliste des Projekts sagt dazu, dass sie vor dem Livegang durch echte Fotos der Wohnung ersetzt werden muessen, denn Gaeste buchen nach Bildern. Alle Masse sind die des Entwurfs, auch sein Kastenmodell (globales `box-sizing: border-box`) und seine zwei Rahmenbreiten: Kopfzeile, Hero-Inhalt, Fakten-Band und Lage tragen den Innenabstand an der 1400er-Box selbst (Inhalt hoechstens 1288 px breit), die uebrigen Abschnitte tragen ihn aussen (Inhalt hoechstens 1400 px breit). Wie im Entwurf setzt `body` weder Schriftgroesse noch Zeilenhoehe (16 px, `normal`), und jeder Absatz und jede Ueberschrift steht auf `margin: 0`. Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in Media Queries an denselben Grenzen, nur min-width (V5): 860 px Bildausschnitt im Hero (72% 40% -> 60% 30%); im Schlafzimmer steht der Text vor dem Bild statt dahinter 1080 px Menuezeile statt Menue-Knopf, Logo 40 statt 34 px hoch Dazu kommt eine eigene Grenze bei 404 px, nur fuer den offenen Menue-Knopf (Abweichung 19). Die Raster laufen wie im Entwurf ohne Media Query ueber `repeat(auto-fit, minmax(min(100%, X), 1fr))`. Zwischen 860 und 965 px steht deshalb, wie im Entwurf, der Text des Schlafzimmers ueber seinem Bild, waehrend Wohnraum und Bad mit dem Bild beginnen. ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND ---------------------------------------- 1. LAUFZEIT ENTFERNT (V1, V6). Wurzel- und Kopf-Element der Umgebung, ihr Werkzeug-Stil und -Skript, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick`/`onInput`/`onChange`/`onSubmit`, die Bildschirm-Namen (`data-screen-label`), die Hinweise fuer den Editor und `DCLogic` sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`, die Hover-Angaben sind `:hover`, die Fokus-Angabe des Sprungverweises ist `:focus`. Saisons und Fragen sind ausgeschrieben. Die globale Regel `a:hover { color: #3D6A86 }` des Entwurfs gilt weiter (Ausnahme: Abweichung 20); wo der Entwurf einem Verweis die Farbe inline setzt (Knoepfe, "Raeume ansehen", Kontaktverweise, Sprungverweis), schlug sie dort nicht durch, und hier haelt eine eigene `:hover`-Regel die Farbe. 2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die Familien und Schnitte des Entwurfs, latin-Teilmenge mit demselben `unicode-range` wie bei Google: Cormorant Garamond normal (variable Datei, Achse 300-700, freigegeben 500-600 wie bestellt, 37 640 B), Cormorant Garamond 500 kursiv (statisch, 23 924 B), Manrope (variable Datei, Achse 200-800, freigegeben 400-700, 24 532 B). Zusammen 86 096 B, Budget 120 KB. Kein preconnect, kein Stylesheet von Google. Cormorant-Text ohne eigenes Gewicht (Fakten-Zahlen, Preise, kursive Raumzeilen) laeuft wie im Entwurf als 500: Mehr hatte auch der Entwurf nicht bestellt. 3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist 26 px hoch (--notice). Seitengrund und Kopfleiste beginnen deshalb 26 px tiefer, die Sprungziele halten 110 statt 84 px Abstand, und #top und #inhalt halten 26 px, damit Logo-Verweis und Sprungverweis wie im Entwurf ganz oben landen. Der Sprungverweis steht 34 statt 8 px unter dem Fensterrand, sonst laege er unter der Leiste. 4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und og:description enden auf "Fiktives Beispielprojekt." 5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt im Bildordner des Projekts. Das Titelbild ist von 4096 x 2294 auf 1920 x 1075 px verkleinert (WebP bleibt WebP, 306 978 B, und liegt damit ueber dem Hero-Budget der Basis-Stufe von 250 KB in docs/VORLAGEN-STUFEN.md; neu verdichtet ist es nicht); `width` und `height` im Markup nennen diese Masse statt 4096 x 2294, das Seitenverhaeltnis ist dasselbe. Genau ein Bild vorgeladen, das Titelbild, wie im Entwurf (V18); og:image zeigt auf img/hero-4k.webp. Beide Logos tragen zusaetzlich `decoding="async"`; das Kopf-Logo bleibt ohne `loading="lazy"`, es steht im ersten Bild. 6. ZUSATZSCHLEIER IM HERO (V9). Mit den beiden Schleiern des Entwurfs liegt die weisse Schrift auf der weissen Villa, dem Sand und dem Gelaender (Werte unter KONTRASTE). Ein dritter Schleier liegt als `::before` hinter dem Textblock (.hero__inhalt): Marine #0E2434 mit 0,62 Deckung, von 40 px unter der Oberkante des Textblocks in 90 px einlaufend, also voll ab 10 px ueber der Vorzeile. Er haengt am Textblock und nicht an festen Prozentwerten, weil die persoenliche Vorschau dort eigene Texte jeder Laenge und ein anderes Kopfbild einsetzt; 0,62 haelt auch ueber einem reinweissen Bildpunkt. Ab 1080 px laeuft er rechts neben der groessten Ueberschriftenbreite (880 px plus 20 px Luft) per Maske aus, damit Villa, Meer und Seebruecke dort hell bleiben wie im Entwurf. Unter der Kopfleiste liegt er nur, wo der Textblock den ganzen Hero fuellt (schmal und niedrig, etwa 360 x 640): Dann beginnt er 40 px unter der Hero-Oberkante, hinter Logo und Menue-Knopf; der Knopf hat dort seinen eigenen hellen Grund (gemessen 10,18 : 1), das Logo ist ein Bild. Beide Schleier des Entwurfs sind unveraendert. 7. KOPFLEISTE OHNE SKRIPT HINTERLEGT (V8, V9). Ihr Grundzustand ist der, den der Entwurf nach 40 px Scrollen zeigt (rgba(247,244,238,.97) und Linie #DDD5C6): So bleibt sie ohne Skript ueber jedem Abschnitt lesbar, auch ueber den Marine-Flaechen. Mit Skript steht sie wie im Entwurf am Seitenanfang durchsichtig (.is-oben) und wechselt nach 40 px mit Uebergang .25 s. Den Wechsel meldet js/seite.js ueber einen IntersectionObserver an einem 41 px hohen Waechter am Seitenanfang; eine Scroll-Position liest kein Skript (V7). Den Uebergang schaltet erst die erste Meldung frei (.is-bereit), damit beim Laden nichts ueberblendet. 8. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf mit Zustand ein
/; "aufgeklappt" meldet der Browser selbst, die Beschriftung "Menue"/"Schliessen" wechselt per CSS am [open]. Bei offenem Menue ist die Leiste hinterlegt wie im Entwurf (`:has()`). Die Liste liegt absolut unter der Leiste ueber die volle Breite, an derselben Stelle wie im Entwurf, und traegt unten die Linie, die dort die Kopfleiste selbst zieht (nur gescrollt sichtbar). Nach einem Sprung und bei jedem Wechsel ueber 860 oder 1080 px klappt js/seite.js das Menue zu (closeMenu und onMq im Entwurf); ohne Skript bleibt es offen, bis man den Knopf noch einmal drueckt. Neu ist nur eine Hoehengrenze mit eigenem Rollbalken: Sie greift erst, wenn die Liste nicht ins Fenster passt (Handy quer), sonst laege der letzte Knopf wie im Entwurf ausser Reichweite. 9. DATUMSGRENZEN IN ORTSZEIT. `min` von Anreise und Abreise setzt js/seite.js (today, minDepart). Der Entwurf rechnete mit UTC und lag damit zwischen Mitternacht und 1 bzw. 2 Uhr einen Tag zurueck. Ohne Skript nehmen die Felder jedes Datum. 10. PREIS-SCHAETZUNG PER SKRIPT (V8). js/seite.js rechnet wie der Entwurf: jede Nacht zum Preis ihrer Saison, ab der dritten Person 25 EUR je Person und Nacht, einmal 89 EUR Endreinigung, Betraege im deutschen Format. Die Betraege liest es aus dem Markup (Preistabelle `data-monate`/`data-preis`, Kasten `data-person`/`data-reinigung`). Ohne Skript und ohne gueltigen Zeitraum steht der Kasten auf `hidden`; `[hidden]` ist auf `display: none !important` gesetzt, weil Kasten und Zusatzzeile `display: flex` tragen und das `hidden` des Browsers sonst verlieren. 11. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen, rote Rahmen, `aria-invalid`, die `aria-describedby` auf diese Meldungen, die Statusmeldung und "Anfrage als E-Mail oeffnen" samt Mail-Entwurf sind weg, mit ihnen die Huelle, die das Ankreuzfeld mit seiner Meldung zusammenhielt (ohne Meldung gleiches Bild). Der Knopf ist type="button", das Formular hat kein action. Hinter dem Knopf stand im Entwurf die leere Statuszeile; den zweiten Abstand von 20 px, den sie im Raster hielt, haelt jetzt ein Rand unter dem Knopf, damit "* Pflichtfeld" an derselben Stelle steht. 12. FOKUSRING AUF MARINE (V9, Nicht-Text). Der Ring des Entwurfs (#1F3A4D) ist auf Marine unsichtbar (1,00 : 1). An den Kontakt- verweisen der Buchungsanfrage und im Hero ist er weiss. 13. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; Chrome zeigt ihn darkgray (2,35 : 1). Hier #4A5C68 deckend, die Farbe des Entwurfs fuer Kleintext: 6,95 : 1 auf #FFFFFF. 14. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts ein. Je Abschnitt traegt ein Rahmen [data-reveal] (Die Wohnung, Raeume, Lage-Karte, Preise, Buchungsanfrage, Fragen) und erscheint einmal (400 ms, 12 px). Hero und Fakten-Band nicht: das LCP-Element steht im ersten Frame, und das Band steht beim Laden teils schon im Bild. Ohne Skript und bei "Bewegung reduzieren" ist alles sofort da. 15. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Impressum und Datenschutzerklaerung im Fuss und im Formular zeigen wie im Entwurf auf eineuroweb.de (Entscheidung 7) und fuehren damit nicht ins Leere. 16. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von V10): Strandweg 112, 23669 Timmendorfer Strand, 030 123456789, fewoost@eineuroweb.de. Benedikt hat sie geprueft. 17. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: (der Entwurf hat kein lang) und der Abschnitt #rechtliches. 18. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser /favicon.ico an der Wurzel ab. Es steht als data:-Adresse im Kopf (V3): eine Flaeche in --tinte, ohne Buchstaben, damit die Umbrandung nichts Fremdes stehen laesst. 19. OFFENER MENUE-KNOPF AUF DEM HANDY (V5). Im Entwurf passt die Kopfzeile unter 404 px nicht: Logo 226 px + Abstand 24 px + Knopf. Geschlossen ("Menue", 81,9 px) ragt der Knopf bei 360 px 12 px in den rechten Innenabstand und bleibt sichtbar; das ist Entwurf und so gelassen. Offen ("Schliessen", 113,6 px) ragte er ueber den Fensterrand: bei 360 px endete er bei 383,6 px, bei 375 px ebenso, das "n" und der rechte Rand waren abgeschnitten. Unter 404 px rueckt der offene Knopf deshalb 16 px naeher ans Logo und haelt 12 statt 20 px Innenabstand (97,6 px breit); er endet dann, wo der geschlossene endet (bei 360 px auf 351,6 px). Ab 404 px gelten die Werte des Entwurfs. Der geschlossene Knopf ist bei jeder Breite unveraendert. 20. MENUEPUNKTE UEBER DEM TITELBILD (V9, Entscheidung 7). Im Entwurf faerbt die globale Regel `a:hover` die vier Menuepunkte ab 1080 px auch dann #3D6A86, wenn die Kopfleiste am Seitenanfang durchsichtig ueber dem hellen Himmel steht. Gemessen an dieser Seite gegen den dunkelsten Bildpunkt hinter der Schrift, 13 Fenster von 1080 x 620 bis 2560 x 1440: 3,00 : 1 bei 1080 x 800 ("Die Wohnung"), 3,39 bei 1280 x 800, 3,58 bei 1920 x 1080, hoechstens 4,08 bei 2560 x 1440 — ueberall unter 4,5. Solange die Leiste durchsichtig steht (.is-oben), behalten die Menuepunkte beim Darueberfahren deshalb ihre Farbe --tinte, mindestens 6,10 : 1 wie in Ruhe; die Unterstreichung des Entwurfs bleibt als Rueckmeldung. Hinterlegt (gescrollt oder ohne Skript) gilt #3D6A86 wie im Entwurf, gemessen mindestens 4,94 : 1 (Werte unter KONTRASTE, KOPFLEISTE). KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9) -------------------------------------------- WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im sRGB-Raum verrechnet, so wie der Browser es tut. --tinte #1F3A4D auf --grund #F7F4EE ......... 10,80 : 1 OK --tinte auf --grund-2 #EFEAE0 ....... 9,89 : 1 OK --tinte auf --weiss #FFFFFF ......... 11,86 : 1 OK --tinte auf --weiss-hover #EFE8DA ... 9,73 : 1 OK --akzent #3D6A86 auf --grund ................. 5,31 : 1 OK --akzent auf --grund-2 ............... 4,86 : 1 OK --akzent auf --weiss ................. 5,83 : 1 OK --text #3A4D5A auf --grund ................. 8,01 : 1 OK --text auf --grund-2 ............... 7,33 : 1 OK --text auf --weiss ................. 8,79 : 1 OK --leise #4A5C68 auf --grund ................. 6,33 : 1 OK --leise auf --grund-2 ............... 5,80 : 1 OK --leise auf --weiss ................. 6,95 : 1 OK Knappster Wert der Seite, Darueberfahren eingerechnet: --akzent auf --grund-2 (Vorzeile und kursive Raumzeilen in "Raeume", Verweise im Fuss beim Darueberfahren), 4,86 : 1. Ohne Abweichung 20 laegen die Menuepunkte ueber dem Titelbild beim Darueberfahren bei 3,00. AUF MARINE, Grund --tinte #1F3A4D (Fakten-Band, Buchungsanfrage, Knoepfe): --weiss #FFFFFF ................................... 11,86 : 1 OK --weiss auf --tinte-hover #2D5269 ................. 8,33 : 1 OK --hell #C9D6DF (Unterzeilen, Vorzeile, dt) ........ 8,00 : 1 OK --hell-2 #DCE5EB (Absatz Buchungsanfrage) ......... 9,29 : 1 OK KOPFLEISTE. Hinterlegt laesst rgba(247,244,238,.97) 3 % durch: ueber --tinte wird sie #F1EEE9 (--tinte 10,27), ueber Schwarz #F0EDE7 (10,12) — OK; die Menuepunkte beim Darueberfahren (--akzent) stehen darauf mit 5,03 bzw. 4,99. Gemessen an dieser Seite, alle Scroll-Stellungen bei 1080 x 800 und 1920 x 1080: Ueber dem dunkelsten Bildpunkt hinter der Leiste mischt der Browser #EFECE7, --tinte 10,07, --akzent 4,94 — OK. Der Menue-Knopf rgba(247,244,238,.85) wird ueber Schwarz #D2CFCA (--tinte 7,66) — OK. Durchsichtig am Seitenanfang wie im Entwurf, gemessen an dieser Seite am echten Titelbild unter dem hellen Schleier, jede Glyphe, 29 Fenster von 360 x 640 bis 2560 x 1440: Menuepunkte mindestens 6,10 : 1 (1080 x 800), Menue-Knopf mindestens 10,18 : 1 (360 x 640); ueber einem reinweissen Foto 8,78 bzw. 10,79 — OK. Deshalb steht sie mit Skript wie im Entwurf (Abweichung 7); nur beim Darueberfahren behalten die Menuepunkte dort ihr --tinte, das #3D6A86 des Entwurfs laege bei 3,00 (Abweichung 20). Gilt fuer das Titelbild der Vorlage: Ein dunkles Kopfbild, wie es die persoenliche Vorschau einsetzen kann, ist darin nicht gerechnet. TITELBILD. Weisse Schrift auf dem Foto. Mit den beiden Schleiern des Entwurfs FAELLT JEDE ZEILE DURCH, gemessen glyphengenau am echten Foto in 29 Fenstern, ohne Schatten (WCAG rechnet keinen): Vorzeile mindestens 1,40 : 1, h1 1,33, Vorspann 1,59; "Raeume ansehen" 4,58. Rechnerisch: Ein weisser Bildpunkt unter 0,45 Marine (linker Schleier) ergibt fuer Weiss 2,78 : 1, die Mitte des Bildes (beide Schleier bei 0) 1,00 : 1. > Folge: Abweichung 6. Marine #0E2434 mit 0,62 Deckung macht aus einem > reinweissen Bildpunkt #6A7781; Weiss darauf 4,59 : 1 — der > unguenstigste Fall, unabhaengig vom Foto. Gemessen an dieser Seite, > jede Glyphe, 29 Fenster, ohne Schatten, je Fall der schlechteste Wert: Fall Vorzeile h1 Vorspann Raeume ansehen echtes Foto 5,60 5,37 6,02 10,10 reinweisses Foto 4,54 4,54 5,77 9,64 lange Texte der Vorschau 5,22 4,82 6,30 9,94 lange Texte, reinweisses Foto 4,54 4,54 6,12 9,47 > "Lange Texte" sind 39, 71, 162 und 28 Zeichen in Vorzeile, h1, Vorspann > und Knopf, wie sie die persoenliche Vorschau einsetzen kann. Werte > unter 4,59 stammen von der Kantenglaettung der Glyphen, nicht vom > Grund. Der Kopf bleibt dabei unberuehrt (Menuepunkte 6,10, Menue-Knopf > 10,18). FOKUSRING. #1F3A4D auf Marine 1,00 : 1 (Abweichung 12). Weiss steht in der Buchungsanfrage auf --tinte (11,86) und im Hero auf dem Schleier (ueber einem weissen Bildpunkt 4,59, ueber einem schwarzen 18,27). Im Formular (#F7F4EE) und ueberall sonst bleibt er #1F3A4D (10,80 bzw. 9,89). NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Feldrahmen #C7BEAD auf #FFFFFF 1,84, auf #F7F4EE 1,68; Linien #D6CDBB 1,32-1,44, #DDD5C6 1,33; #47637A auf Marine 1,88 — unter den 3 : 1 fuer Bedienelemente (WCAG 1.4.11). Entwurf so gelassen: Jedes Feld traegt seine Beschriftung ueber sich, die Linien trennen nur. ========================================================================= */ /* ── Schriften · selbst ausgeliefert, kein Abruf zu einem fremden Server ── */ @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; /* statische Datei, nur dieser Schnitt */ font-display: swap; src: url("../vendor/fonts/cormorant-garamond-500-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; /* Datei traegt wght 300-700, freigegeben 500-600 */ font-display: swap; src: url("../vendor/fonts/cormorant-garamond-500-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; /* Datei traegt wght 200-800, freigegeben 400-700 */ font-display: swap; src: url("../vendor/fonts/manrope-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Tokens · jeder Wert aus dem Entwurf ─────────────────────────────────── */ :root { --grund: #F7F4EE; /* Seitengrund, Lage-Karte, Formular, Handy-Menue */ --grund-2: #EFEAE0; /* Raeume, Fuss, Schaetzkasten */ --tinte: #1F3A4D; /* Text, Verweise, Knoepfe, Marine-Flaechen, Fokusring */ --tinte-hover: #2D5269; /* dunkle Knoepfe beim Darueberfahren */ --akzent: #3D6A86; /* Vorzeilen, kursive Raumzeilen, Verweise beim Darueberfahren */ --text: #3A4D5A; /* Fliesstext */ --leise: #4A5C68; /* Kleintext, Platzhalter */ --weiss: #FFFFFF; /* Schrift auf Marine und im Hero, Felder, Hero-Knopf */ --weiss-hover: #EFE8DA; /* Hero-Knopf beim Darueberfahren */ --hell: #C9D6DF; /* Unterzeilen, Vorzeile und dt auf Marine */ --hell-2: #DCE5EB; /* Absatz der Buchungsanfrage */ --linie-dunkel: #47637A; /* Linien der Kontaktliste auf Marine */ --linie: #D6CDBB; /* Linien: Merkmale, Entfernungen, Fragen, Fuss, Summe */ --linie-kopf: #DDD5C6; /* Kopflinie, Linien im Handy-Menue */ --feld-rand: #C7BEAD; /* Rahmen der Eingabefelder */ --bildgrund: #E6DFD2; /* Grund unter den Raum- und Balkonbildern */ --himmel: #C8DCE8; /* Grund unter Titelbild und Strandbild */ --kopf-grund: rgba(247, 244, 238, 0.97); --knopf-grund: rgba(247, 244, 238, 0.85); --schrift: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif; --titel: "Cormorant Garamond", Georgia, serif; /* h1, h2, h3 der Raeume */ --serif: "Cormorant Garamond", serif; /* uebrige Cormorant-Stellen */ --breite: 1400px; --rand: clamp(20px, 4vw, 56px); --notice: 26px; /* feste Hinweisleiste aus A17 */ --kopf: 84px; /* Hoehe der Kopfzeile */ } /* ── Grundlage · die globalen Regeln des Entwurfs ────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding-top: var(--notice); background: var(--grund); color: var(--tinte); font-family: var(--schrift); -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--tinte); text-underline-offset: 3px; } a:hover { color: var(--akzent); } :focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 2px; } summary::-webkit-details-marker { display: none; } details[open] .faq-plus { transform: rotate(45deg); } /* Abweichung 10: Schaetzkasten und Zusatzzeile tragen display: flex. */ [hidden] { display: none !important; } /* Abweichung 3: Logo-Verweis und Sprungverweis landen ganz oben. */ #top, #inhalt { scroll-margin-top: var(--notice); } .skip { position: absolute; left: -9999px; top: calc(var(--notice) + 8px); z-index: 100; padding: 10px 16px; background: var(--tinte); color: var(--weiss); } .skip:focus { left: 8px; } .skip:hover { color: var(--weiss); } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ /* Grundzustand ohne Skript: hinterlegt mit Linie (Abweichung 7). */ .kopf { position: fixed; top: var(--notice); left: 0; right: 0; z-index: 50; background: var(--kopf-grund); border-bottom: 1px solid var(--linie-kopf); } .kopf.is-bereit { transition: background 0.25s ease, border-color 0.25s ease; } .kopf.is-oben { background: transparent; border-bottom-color: transparent; } /* Offenes Menue am Seitenanfang: hinterlegt, Linie bleibt aus (Entwurf). */ .kopf.is-oben:has(.menue[open]) { background: var(--kopf-grund); } .kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .kopf__marke { display: flex; align-items: center; } .kopf__logo { display: block; height: 34px; width: auto; } .kopf__nav { display: none; align-items: center; gap: 34px; } .kopf__link { text-decoration: none; font-size: 15px; font-weight: 600; } .kopf__link:hover { text-decoration: underline; } /* Abweichung 20: Ueber dem Titelbild behalten die Menuepunkte beim Darueberfahren ihre Farbe, die Unterstreichung meldet den Zeiger. Hinterlegt gilt a:hover des Entwurfs. */ .kopf.is-oben .kopf__link:hover { color: var(--tinte); } .kopf__knopf { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 999px; background: var(--tinte); color: var(--weiss); text-decoration: none; font-size: 15px; font-weight: 600; } .kopf__knopf:hover { background: var(--tinte-hover); color: var(--weiss); } /* Handy-Menue:
statt Knopf mit Zustand (Abweichung 8). Der Knopf traegt die Masse des