/* ============================================================================ HAUSARZTPRAXIS AM JUNGFERNSTIEG — Dr. Marina Becker, Hamburg 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 "Hausarztpraxis Jungfernstieg.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, Rundungen und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Bewegung ruhig. Das Logo ist im Entwurf Text (der Name, darunter "Dr. Marina Becker"); eine Logo-Datei gibt es fuer diese Praxis nicht. Es steht deshalb hier wie dort als Text. Der Entwurf laedt Cormorant Garamond (500 und 600, aufrecht und kursiv) und Plus Jakarta Sans (400 bis 700) von Google Fonts und die Laufzeitdatei von Claude Design. Er traegt Hover-Angaben der Claude-Design-Umgebung an zehn Knoten (zwei Verweise der Oberleiste, vier Menuepunkte, "Termin vereinbaren" in Kopf und Hero, "Jetzt anrufen", Formular-Knopf), eine Fokus-Angabe (Sprungverweis), neun Bedingungsbloecke sc-if (Oberleiste, Menuezeile, Menue-Knopf, Handy-Menue, vier Fehlermeldungen, Statusmeldung), drei Schleifen sc-for (Sprechzeiten, Leistungen, Fragen) und eine `DCLogic`-Klasse mit Breiten-, Scroll- und Menue-Zustand, der Sprechzeit von heute und einer Formularpruefung. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt `box-sizing: border-box` global, hier ebenso. Was der Entwurf per Skript nach der Fensterbreite umschaltet (matchMedia mit min-width 1060 px), steht hier als Media Query an derselben Grenze, nur min-width (V5): unter 1060 px Kopfzeile 76 px, Menue-Knopf, aufklappbares Handy-Menue ab 1060 px Oberleiste 38 px dazu, Menuezeile statt Menue-Knopf, Kopf 114 px (Hero oben und Sprungziele rechnen damit) Die Raster laufen wie im Entwurf ohne Media Query ueber `repeat(auto-fit, minmax(min(100%, X), 1fr))`, die zwei Fakten im Hero ueber `minmax(150px, 1fr)` ohne min(), auch das wie im Entwurf. ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND ---------------------------------------- 1. LAUFZEIT ENTFERNT (V1, V6). Die Laufzeit-Elemente des Entwurfs, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick`, `onInput`, `onChange`, `onSubmit`, `DCLogic`, die Etiketten der Abschnitte fuer den Editor, die Laufzeitdatei und das Werkzeug-Skript von Claude Design sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`, die Hover-Angaben sind `:hover`, Sprechzeiten, Leistungen und Fragen stehen ausgeschrieben. Hover gibt es genau dort, wo der Entwurf eine Hover-Angabe traegt. Wo der Entwurf einem Verweis die Farbe inline gibt, schlaegt sie seine globale Regel `a:hover { color: #1E2B2C }`; diese Verweise behalten deshalb auch hier beim Darueberfahren ihre Farbe. Die globale Regel wirkt wie im Entwurf nur am Verweis "Datenschutzerklaerung" im Formular. 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 aufrecht (37 640 B) und kursiv (39 260 B), je eine variable Datei mit Achse 300-700, freigegeben 500-600 wie im Entwurf bestellt; Plus Jakarta Sans (27 348 B), variable Datei mit Achse 200-800, freigegeben 400-700. Zusammen 104 248 B = 101,8 KB, Budget 120 KB. Cormorant 500 nutzt der Entwurf nirgends; der Schnitt steckt ohne Mehrkosten in derselben Datei. Kein preconnect, kein Stylesheet von Google. Vorgeladen werden die aufrechte Cormorant und Plus Jakarta Sans (Logo, Ueberschrift, Vorspann, Knoepfe ueber der Falz). 3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist 26 px hoch (--notice). Deshalb beginnen Seitengrund und Kopfleiste 26 px tiefer, der Sprungverweis "Zum Inhalt springen" steht bei 34 statt 8 px, die Sprungziele halten 102 statt 76 px Abstand (ab 1060 px 140 statt 114 px), und #top haelt 26 px, damit der Logo-Verweis wie im Entwurf ganz oben landet. 4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und og:description enden auf "Fiktives Beispielprojekt." 5. BILDER LOKAL (V3, Entscheidung 6). Dieselben sechs Dateien unter img/ statt praxis/img/, unveraendert (alle schmaler als 1920 px). Das Titelbild hat 68 960 B, Budget 250 KB. Genau ein Bild vorgeladen, das Titelbild, wie im Entwurf (V18); og:image zeigt auf img/hero.webp. 6. "HEUTE" IM HERO PER KLEINEM SKRIPT (V8, Entscheidung 5). js/seite.js rechnet wie der Entwurf aus dem Wochentag (Ortszeit, einmal beim Laden) und uebernimmt die Zeit aus der Zeile desselben Tages in den Sprechzeiten; Samstag und Sonntag "Geschlossen". So steht jede Uhrzeit nur einmal im Markup. Ohne Skript steht dort "Termine nach Vereinbarung", woertlich aus dem Sprechzeiten-Absatz des Entwurfs; der Satz stimmt an jedem Tag. 7. LINIE UNTER DER KOPFLEISTE OHNE scrollY (V7, V8). Der Entwurf zeigt sie nach mehr als 20 px Scrollen, ermittelt ueber einen Scroll-Listener. js/seite.js beobachtet stattdessen mit IntersectionObserver einen 20 px hohen Streifen am Seitenanfang und setzt `.is-gescrollt`; die Linie erscheint ohne Uebergang, wie im Entwurf. Ohne Skript bleibt sie unsichtbar, also so wie im Entwurf am Seitenanfang. 8. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf plus Zustand ein
/; "Menue" und "Schliessen" wechseln ueber [open], den aufgeklappten Zustand meldet der Browser selbst. Die Liste liegt absolut unter der Kopfzeile (Bezugsrahmen ist die feste Kopfleiste), ueber die volle Breite wie im Entwurf; ihre obere Linie deckt die Linie der Kopfleiste, ihre untere erscheint wie die der Kopfleiste erst nach dem Scrollen. Im Entwurf gehoert die Liste zur Kopfleiste und liegt damit unter deren Weichzeichnung (backdrop-filter, 10 px) zu 97 % deckend; die Seite darunter ist dort nicht zu sehen. Hier erreicht die Weichzeichnung die Liste nicht, weil die Kopfleiste selbst schon eine traegt; zu 97 % deckend schiene die Ueberschrift des Hero scharf als Schatten durch (in Chrome gesehen). Die Liste ist deshalb deckend in --grund #FAF8F4, wie die Kopfleiste am Seitenanfang aussieht. Nach einem Klick auf einen Sprungverweis und beim Wechsel ueber 1060 px klappt js/seite.js das Menue zu (closeMenu und onMq im Entwurf); "Anrufen" schliesst es wie im Entwurf nicht. Ohne Skript bleibt es offen, bis man den Knopf noch einmal drueckt. 9. FORMULAR SENDET NICHTS (V12). Pruefung, die vier Fehlermeldungen (#A1301F) samt roten Rahmen und die Statusmeldung sind weg, ebenso `aria-invalid` und `aria-describedby`, die auf diese Meldungen zeigten. Der Knopf ist type="button", das Formular hat kein action. Zwischen Knopf und "* Pflichtfeld" stand im Entwurf die leere Statuszeile, also zweimal der Abstand von 20 px; den zweiten haelt jetzt ein Rand unter dem Knopf, damit der Kasten gleich hoch bleibt. 10. SCHLUSSLINIE DER SPRECHZEITEN. Der Entwurf zieht sie mit einem leeren
in der
; das ist dort ungueltig. Dieselbe Linie zieht jetzt die letzte Zeile als border-bottom (gleiches Bild). Die Schlusslinie der Fragen steht in einem
und bleibt, wie sie ist. 11. FOKUSRING AUF GRUEN UND DUNKEL (V9, Nicht-Text). Der Ring des Entwurfs (#2F5D57) ist im Sprechzeiten-Band und in der Oberleiste unsichtbar (1,00 : 1) und im Fuss zu schwach (1,97 : 1). Dort ist er hell: #F4F1EA im Band und in der Oberleiste (6,59 : 1), #FAF8F4 im Fuss (13,78 : 1). 12. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts ein. Die sieben Abschnitte unter dem Hero tragen je ein [data-reveal] und erscheinen einmal (400 ms, 12 px). Der Hero nicht: das LCP-Element steht im ersten Frame. Ohne Skript und bei "Bewegung reduzieren" ist alles sofort da. 13. 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. 14. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von V10): Jungfernstieg 112, 20354 Hamburg, 040 123456789, privatpraxis@eineuroweb.de, die Sprechzeiten und "U/S Jungfernstieg". Benedikt hat sie geprueft. 15. ZUSAETZLICH AUS DEN MUSTERN (salon-kammrath, kiosk-wolff): und ein Symbol im Reiter als data:-Adresse (V3), eine Flaeche in --gruen ohne Buchstaben. Ohne fragt der Browser /favicon.ico an der Wurzel ab, und dort liegt nichts; ein Buchstabe gehoerte umgebrandet. 16. SPRECHZEITEN AUF DEM HANDY (V5). Der Entwurf laesst die Spalte mit dem Wochentag auf 0 schrumpfen (`minmax(0, 1fr)`). Ist die Zeile zu schmal, laeuft der Tag deshalb in die Uhrzeit: "Donnerstag" unter 365 px Fensterbreite (bei 360 px 4 px Ueberlappung), "Dienstag" unter 341, "Montag" unter 330 px; zwischen 365 und 380 px bleiben vom Abstand des Entwurfs (16 px) nur 1 bis 15 px. Hier ist die Spalte nie schmaler als ihr Wort (`minmax(min-content, 1fr)`), der Abstand von 16 px bleibt also immer; passt die Zeile nicht, bricht die Uhrzeit um, rechtsbuendig und ausgewogen am Punkt ("8:00-12:00 ·" ueber "15:00-19:00"). Das betrifft nur Fenster unter 381 px; ab 381 px ist jede Zeile einzeilig und wie im Entwurf, nachgemessen von 300 bis 1920 px. KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9) -------------------------------------------- WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im sRGB-Raum verrechnet, so wie der Browser es tut. Keine Textfarbe des Entwurfs musste geaendert werden. --tinte #1E2B2C auf --grund #FAF8F4 ......... 13,78 : 1 OK --tinte auf --sand #F1EDE6 .......... 12,52 : 1 OK --tinte auf --weiss #FFFFFF ......... 14,61 : 1 OK --tinte auf --hell #F4F1EA (Knopf) .. 12,95 : 1 OK --text #3E4B4B auf --grund ................. 8,56 : 1 OK --text auf --sand .................. 7,78 : 1 OK --leise #4E5B5A auf --grund ................. 6,67 : 1 OK --leise auf --sand .................. 6,06 : 1 OK --gruen #2F5D57 auf --grund ................. 7,01 : 1 OK --gruen auf --sand .................. 6,37 : 1 OK --weiss auf --gruen (Knoepfe) ....... 7,44 : 1 OK --weiss auf --tinte (Hover) ......... 14,61 : 1 OK SPRECHZEITEN-BAND und OBERLEISTE, Grund --gruen #2F5D57: --hell #F4F1EA .................................... 6,59 : 1 OK --z-vorzeile #CFE0DA .............................. 5,43 : 1 OK --z-text #E4EDE9 .................................. 6,23 : 1 OK --weiss (116 117, 112) ............................ 7,44 : 1 OK FUSS, Grund --tinte #1E2B2C: --fuss-text #D5DCD9 ............................... 10,49 : 1 OK --grund #FAF8F4 (Name, Impressum, Datenschutz) .... 13,78 : 1 OK SPRUNGVERWEIS: --grund auf --tinte ................. 13,78 : 1 OK KOPFLEISTE. rgba(250,248,244,.97) laesst 3 % durch, und beim Scrollen laeuft alles darunter durch, auch die Fotos. Gerechnet gegen den unguenstigsten denkbaren Bildpunkt, Schwarz; dann wird der Grund #F2F1ED, und das gilt unabhaengig davon, welches Bild oder Band gerade darunter steht: --tinte (Name, Menuepunkte, Knopf-Rand) ........... 12,93 : 1 OK --leise (Zeile unter dem Namen) ................... 6,26 : 1 OK --gruen (Hover der Menuepunkte) ................... 6,58 : 1 OK Ueber dem Band (#2F5D57) wird der Grund #F4F3EF (--tinte 13,16), ueber dem Fuss #F3F2EE — beides heller als der Fall oben. Das Handy-Menue ist deckend --grund (Abweichung 8): --tinte 13,78, --gruen ("Anrufen") 7,01, --weiss auf --gruen ("Termin") 7,44. Auf einem Foto liegt sonst keine Schrift: Der Hero ist geteilt, Text und Bild stehen nebeneinander bzw. untereinander. NICHT-TEXT (3 : 1 nach WCAG 1.4.11). Fokusring #2F5D57 auf --grund 7,01, auf --sand 6,37, auf der Kopfleiste 6,58; im Band und in der Oberleiste #F4F1EA 6,59, im Fuss #FAF8F4 13,78 (Abweichung 11). Rand des Menue-Knopfs --tinte auf der Kopfleiste 12,93. Rahmen der Eingabefelder #CFC7BA auf #FFFFFF 1,68 : 1 — Entwurf so gelassen: das weisse Feld hebt sich zusaetzlich vom Sand ab, und ueber jedem Feld steht die Beschriftung. Die Linien #DDD6CB (1,36), #CFC7BA und #4F7A73 (1,55) sind Zierlinien, keine Bedienelemente. ========================================================================= */ /* ── Schriften · selbst ausgeliefert, kein Abruf zu einem fremden Server ── */ @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; /* Datei traegt wght 300-700, freigegeben 500-600 */ font-display: swap; src: url("../vendor/fonts/cormorant-garamond-500-600-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: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; /* Datei traegt wght 200-800, freigegeben 400-700 */ font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-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: #FAF8F4; /* Seitengrund, Hero, Handy-Menue, Name und Verweise im Fuss, Sprungverweis */ --kopf-grund: rgba(250, 248, 244, 0.97); /* Kopfleiste */ --tinte: #1E2B2C; /* Text, Ueberschriften, Linien ueber Leistungen und Team, Fuss */ --gruen: #2F5D57; /* Akzent, Verweise, Knoepfe, Oberleiste, Sprechzeiten, Fokusring */ --text: #3E4B4B; /* Fliesstext */ --leise: #4E5B5A; /* Etiketten, Bildunterschrift, Rollen, Hinweise */ --sand: #F1EDE6; /* Ueberblick, Fragen, Formular, Grund unter Fotos */ --sand-tief: #E4DED3; /* Grund unter den drei Fotos im Ueberblick */ --linie: #DDD6CB; /* Linien auf hellem Grund */ --linie-sand: #CFC7BA; /* Linien auf Sand, Rahmen der Felder */ --hell: #F4F1EA; /* Schrift in Oberleiste und Band, Knopf "Jetzt anrufen" */ --z-vorzeile: #CFE0DA; /* Vorzeile im Sprechzeiten-Band */ --z-text: #E4EDE9; /* Absaetze im Sprechzeiten-Band */ --z-linie: #4F7A73; /* Zeilenlinien im Sprechzeiten-Band */ --weiss: #FFFFFF; /* Knopftext, Felder, Hervorhebung im Band */ --fuss-text: #D5DCD9; /* Text im Fuss */ --schrift: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --titelschrift: "Cormorant Garamond", Georgia, serif; --rand: clamp(20px, 4vw, 48px); --notice: 26px; /* feste Hinweisleiste aus A17 */ --kopf: 76px; /* headerH des Entwurfs; ab 1060 px 114 px */ } /* ── 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(--gruen); text-underline-offset: 3px; } a:hover { color: var(--tinte); } /* Steht vor allen Klassen: Wo der Entwurf einem Element eine eigene Rundung gibt (Knoepfe, Felder), behaelt es sie auch mit Fokus, wie dort. */ :focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 2px; } summary::-webkit-details-marker { display: none; } .skip { position: absolute; left: -9999px; top: calc(var(--notice) + 8px); z-index: 100; padding: 10px 16px; background: var(--tinte); color: var(--grund); } .skip:hover { color: var(--grund); } .skip:focus { left: 8px; } /* ── Wiederkehrende Bausteine ────────────────────────────────────────────── */ .vorzeile { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gruen); } .vorzeile--hell { color: var(--z-vorzeile); } .titel { margin: 0; font-family: var(--titelschrift); font-weight: 600; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.04; } .titel--balance { text-wrap: balance; } .titel--gross { font-size: clamp(44px, 5vw, 74px); line-height: 1.02; text-wrap: balance; } .stapel { display: flex; flex-direction: column; gap: 22px; } .einleitung { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.7; color: var(--text); } .einleitung--schmal { max-width: 460px; } .etikett { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); } .foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--sand); } .foto--tief { background: var(--sand-tief); } /* Knoepfe: gross im Hero, im Band und (als