/* ============================================================================ CLARA WESTPHAL IMMOBILIEN — Ihre Maklerin in Timmendorfer Strand Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu Hover und Fokus. Kein Parallax, kein Scrub, kein Zaehler, kein Bildwechsel, kein `background-attachment: fixed`. HERKUNFT -------- 1:1 uebertragen aus dem Claude-Design-Entwurf "Makler Clara Westphal Timmendorfer Strand.dc.html" (Projekt 9e200815-1fb2-4f84-b0ef-82a1c23232f8), 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 und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Der Entwurf laedt Marcellus, Plus Jakarta Sans, Cormorant Garamond, Jost und DM Serif Display von Google Fonts und die Laufzeit `support.js`. Er traegt 13 Hover-Angaben der Claude-Design-Umgebung (vier Menuepunkte, Kontakt-Knopf, Hero-Knopf, dreimal "Besichtigung anfragen", "Gespraech vereinbaren", "Immobilie bewerten lassen" im Ablauf, zwei Formular-Knoepfe), eine Fokus-Angabe am Sprungverweis, 22 Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, zwei Hero-Fassungen, drei Formularschritte, Zurueck-Knopf, neun Fehlermeldungen, zwei Statusmeldungen, zwei mailto-Knoepfe), vier Schleifen sc-for (Raum-Reiter, Immobilienart, Ablauf, Tageszeit) und eine `DCLogic`-Klasse mit Breiten- und Scroll-Zustand, Raumwahl, Schrittfolge, Formularpruefung und dem Aufbau einer Mail. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt ein globales `box-sizing: border-box`, hier ebenso. Kopf, Hero und Leistungsleiste tragen ihren Innenabstand INNERHALB der 1400 px (Inhalt hoechstens 1288 px), die Abschnitte darunter und der Fuss ausserhalb (Inhalt hoechstens 1400 px). Ab rund 1512 px stehen die oberen drei deshalb 56 px weiter innen. So ist der Entwurf; das ist nicht "gerade gezogen". Was der Entwurf je nach Fenster per Skript umschaltet, steht hier in Media Queries an denselben Grenzen, nur min-width (V5): (min-width: 900px) and (min-aspect-ratio: 1/1) Hero breit: Foto mit Schleier, Text links (heroWide) 1080 px Menuezeile statt Menue-Knopf, Logo 40 statt 30 px hoch, linke Spalte im Verkaufsablauf klebt (wide, logoH, stickyPos) Hochkant-Fenster ab 1080 px zeigen deshalb Menuezeile und schmalen Hero zugleich, Querformat von 900 bis 1079 px breiten Hero und Menue-Knopf — wie im Entwurf. Alle Raster laufen wie dort ohne Media Query ueber `repeat(auto-fit, minmax(min(100%, X), 1fr))`. ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND ---------------------------------------- 1. LAUFZEIT ENTFERNT (V1, V6). Huelle und Kopfblock der Claude-Design-Umgebung, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover- und die Fokus-Angabe, `onClick`/`onChange`/`onInput`/`onSubmit`, `DCLogic`, `support.js`, das Werkzeug-Skript von Claude Design und die Kennungen `data-screen-label` sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`, Hover ist `:hover`, die Fokus-Angabe `:focus`, die Schleifen sind ausgeschrieben. Die Editor-Eigenschaft `headingFont` ist fest auf ihre Vorgabe gesetzt: Marcellus 400. Falle `a:hover`: Die globale Regel `a:hover { color: #1D2428 }` des Entwurfs erreichte dort nur Verweise ohne eigene Farbe (Einwilligung, Telefon und Mail im Kontakt, "Anrufen" im Handy-Menue). Mit Klassen wuerde sie auch die weissen Knoepfe treffen; jeder Verweis, der im Entwurf eine eigene Farbe traegt, behaelt sie hier deshalb beim Darueberfahren ausdruecklich. 2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die Familien und Schnitte, die der Entwurf zeigt: Marcellus 400 (einziger Schnitt, 14 552 B) und Plus Jakarta Sans (variable Datei, Achse 200-800, freigegeben 400-700 wie im Entwurf bestellt, 27 348 B), latin-Teilmenge mit demselben `unicode-range` wie bei Google. Zusammen 41 900 B, Budget 120 KB. Cormorant Garamond, Jost und DM Serif Display stehen im Entwurf nur zur Auswahl im Editor und werden nie gezeigt; sie sind nicht geladen. Kein preconnect, kein Stylesheet von Google. Keine Kursive, kein fetter Marcellus. 3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist 26 px hoch (--notice). Deshalb beginnen Seitengrund und Kopfleiste 26 px tiefer, die Sprungziele halten 110 statt 84 px Abstand, #top und #inhalt halten 26 px (der Logo-Verweis und "Zum Inhalt springen" landen wie im Entwurf ganz oben; ohne die 26 px an #inhalt stand die Seite nach dem Sprung bei 26 statt 0, und der Hero rutschte 26 px unter die Kopfleiste), die klebende Spalte im Ablauf haelt 158 statt 132 px, der Sprungverweis erscheint bei 34 statt 8 px. 4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und og:description enden auf "Fiktives Beispielprojekt." 5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt makler/img/. Das Titelbild ist von 4096 x 2294 auf 1920 x 1075 px verkleinert, der Name hero-4k bleibt wie im Entwurf. Es wiegt 317 878 B — mehr als die 250 KB, die die Basis-Stufe dem Hero-Bild laesst. Staerker verdichten laesst Entscheidung 6 nicht zu; das ist offen und Benedikts Entscheidung. Im Projekt liegt zusaetzlich makler/img/hero.webp, dasselbe Motiv in 1344 x 752 px (198 740 B); der Entwurf verwendet sie nicht. `width`/`height` im Markup nennen die echten Masse. Genau ein Bild vorgeladen, das Titelbild (V18); og:image zeigt auf img/hero-4k.webp. 6. HERO AUS EINEM STUECK. Der Entwurf legt ihn zweimal an (zweimal

) und zeigt per Skript eine Fassung. Hier steht er einmal, und CSS schaltet an derselben Grenze um. Die Vorzeile hat je Fassung einen anderen Text; beide stehen in derselben Zeile, je Ansicht ist einer sichtbar. Der Knopf hat wie im Entwurf nur breit einen Hover-Zustand. Im Markup steht der Text vor dem Foto (die Reihenfolge der schmalen Fassung); breit liegt der Text ueber Foto und Schleier (z-index 1). 7. SCHLEIER IM HERO (V9). Der Verlauf des Entwurfs (Deckung .9 bei 0 %, .72 bei 30 %, 0 bei 56 %) faellt durch: Die Zeilenenden liegen auf den Kiefern in der Bildmitte, dort bleiben Vorzeile, Ueberschrift und Vorspann bei 1,42 bis 2,30 : 1 (Tabelle unter KONTRASTE). Er laeuft jetzt mit .9 bei 0 %, .8 bei 52 % und 0 bei 72 % aus. Der Text endet nie weiter rechts als bei 52 % der Buehne, auf deren Breite sich der Verlauf bezieht (Rand 4vw + Spalte 48vw). Ein Rollbalken von 15 bis 17 px macht die Buehne schmaler, die vw-Masse aber nicht; dann sind es hoechstens 53 %. Bis dorthin deckt der Schleier mindestens .8 bzw. .76; das hielte die Vorzeile selbst ueber reinem Schwarz bei 5,23 bzw. 4,71 : 1. An diesem Foto gemessen bleiben es mindestens 5,44 bzw. 5,10 : 1. Ein Verlauf, der schon bei 48 % auf .8 faellt und bei 68 % endet, reicht nicht: Ab 933 px passt die Vorzeile in eine Zeile, "STRAND" endet dann bei 52 % auf der dunklen Kiefer, wo er nur noch .64 deckt (bei 935 x 700 blieben 3,93 : 1). Sichtbar: Die Kiefer in der Mitte wird blasser, die Villa rechts bleibt bis auf ihren linken Rand frei. 8. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf plus Zustand ein
/; "aufgeklappt" meldet der Browser selbst, "Menue"/"Schliessen" schaltet [open]. Die Liste liegt absolut unter der Leiste, an derselben Stelle wie im Entwurf (dort im Fluss der Kopfleiste), unten mit der Linie, die die gescrollte Kopfleiste zieht. Ihr Grund ist deckend #F8F6F1 statt rgba(248,246,241,.97) mit Unschaerfe: Die Unschaerfe der Kopfleiste (backdrop-filter) reicht nicht unter die herausragende Liste, und eine eigene saehe dort den Seiteninhalt nicht. Ohne sie schienen die 3 % als scharfe Schrift durch; mit ihr sind sie unsichtbar, deckend sieht es also gleich aus. Nach einem Sprung klappt js/seite.js das Menue zu (closeMenu; wie im Entwurf nicht bei "Anrufen"), ebenso beim Wechsel ueber 1080 px oder die Hero-Grenze (onMq). Ohne Skript bleibt es offen, bis man den Knopf noch einmal drueckt. 9. LINIE UNTER DER KOPFLEISTE (V7, V8). Der Entwurf liest dafuer bei jedem Scrollen scrollY (> 20 px). Hier meldet ein IntersectionObserver nur, ob eine 1-px-Marke, die bei 20 px endet, aus dem Bild ist, und js/seite.js setzt eine Klasse; kein Stilwert wird aus der Scroll-Position gerechnet. Ohne Skript bleibt die Linie durchsichtig wie am Seitenanfang des Entwurfs. 10. RAUM-REITER OHNE SKRIPT (V8). Statt tablist/tab/tabpanel mit Zustand drei Radios mit :checked; ihre Beschriftungen sind die Reiter. Bild, Ueberschrift und Text aller drei Raeume stehen im Markup, zwei sind ausgeblendet (die versteckten Bilder laedt der Browser erst, wenn sie gezeigt werden). Der Name der Reiterliste "Raeume der Wohnung" haengt als Beschreibung an jedem Radio. Der Fokusring der Reiter liegt innen (outline-offset -2px) statt 3 px aussen: Die Reiter liegen Kante an Kante unter dem Foto, aussen laege der Ring auf dem Foto und auf den Nachbarn. 11. WAHLKNOEPFE ALS RADIOS (V8). Immobilienart (vier Kacheln) und Tageszeit (drei Felder, Vorgabe "Flexibel") waren aria-pressed-Knoepfe mit Zustand im Skript; hier Radios in