/* ========================================================================== ZAHNARZTPRAXIS DR. VOGL-REIMERS — Privatpraxis fuer Zahnheilkunde Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt, Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler, kein `background-attachment: fixed`. Herkunft -------- Uebersetzt aus dem Claude-Design-Entwurf "Zahnarztpraxis Vogl-Reimers.dc.html" nach `docs/regeln/vorlagen.md`. Der Entwurf laedt Montserrat und Open Sans von `fonts.googleapis.com` und acht Fotos von `images.unsplash.com`; dazu `style-hover` an ueber dreissig Knoten, ein `` um den Cookie-Hinweis, `{{ formNote }}`, `onClick="{{ submit }}"` und eine `DCLogic`-Klasse mit eigenem Zustand — nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung (V1). Gebaut wird nach Benedikts Entscheidung vom 20.08.2026 nur die Starter-Fassung. Der Entwurf sah scroll-gebundene Bewegung vor — sein Zitatband traegt `background-attachment: fixed`. Das faellt fuer die Basis-Stufe ERSATZLOS weg und wird nicht abgeschwaecht (V7): das Band ist hier ein Standbild. Der heikle Teil dieser Branche ------------------------------ Eine Zahnarztpraxis darf nach dem Heilmittelwerbegesetz nicht alles bewerben, was ein Restaurant darf. Deshalb ist in dieser Uebernahme jede Zusage in eine Beschreibung verwandelt worden — nicht "schmerzfrei", sondern "wir nehmen uns Zeit fuer die Betaeubung"; nicht "Erfolg", sondern "was wir tun". Was aus dem Entwurf verschwunden ist und warum, steht Punkt fuer Punkt unten. Drei Dinge kommen in dieser Vorlage nirgends vor: ein Heilversprechen, ein Vorher-Nachher-Bild und eine behauptete Spezialisierung. Abweichungen vom Entwurf, jede mit Grund ---------------------------------------- 1. Die Schriften sind dieselben wie im Entwurf (Montserrat, Open Sans), aber selbst gehostet aus `_shared/gesundheit/fonts/` (V3, V4). Keine Ersetzung noetig. 2. Der Entwurf setzt seinen ganzen Fliesstext auf `font-weight: 300`. Hier laeuft er auf 400. Grund: die Montserrat-Datei steht standardmaessig auf 100 (siehe Schriftblock unten), die Seite ist hell und luftig, und ein zu duenner Schnitt faellt genau dort zuerst auf. Wo der Entwurf "leichter" meinte, ist der Text KLEINER und gesperrt gesetzt, nicht duenner. 3. Kursiv ist gestrichen. Zu Open Sans liegt kein kursiver Schnitt vor; `font-style: italic` erzeugt darauf eine schraeg gescherte Faelschung. Der Entwurf setzte das Patientenzitat kursiv — es traegt jetzt die typografischen Anfuehrungszeichen im Text. 4. Der Entwurf bringt UEBERHAUPT KEINE Symbole mit; seine Leistungskarten tragen nur Ziffern in einem Kreis. Die Ziffernkreise bleiben, und in ihnen steht jetzt je ein gezeichnetes Strichsymbol aus `_shared/gesundheit/icons.svg.html` (V3, inline, kein Abruf). Dazu zwei geholte Zeichen: `calculator` aus `_shared/pflege` (Nr. 16) fuer den Heil- und Kostenplan und die gezeichnete Umgebungskarte aus `_shared/arztpraxis` (Nr. 11). ABSICHTLICH NICHT benutzt: `syringe` aus `_shared/arztpraxis` (Nr. 2). Eine Spritze neben dem Absatz, der Menschen mit Angst vor der Behandlung ansprechen soll, ist aus demselben Grund das falsche Bild wie ein Bohrer — der Symbolsatz der Branche zeichnet aus genau diesem Grund keinen Bohrer. 5. Der Cookie-Hinweis ist ersatzlos weg (V12). Seine beiden Knoepfe riefen dieselbe Funktion auf und schlossen nur das Fenster; die Seite laedt ohnehin nichts von Dritten. Der echte kommt aus dem Zusatz `cookie-pro`. 6. Der `fadeUp`-Keyframe am Hero-Textblock ist weg: das LCP-Element wird nicht animiert (Qualitaetsuntergrenze in `docs/VORLAGEN-STUFEN.md`). 7. `background-attachment: fixed` am Zitatband ist ein Standbild geworden (V7). Siehe oben. 8. `style-hover` an ueber dreissig Knoten ist echtes `:hover` und `:focus-visible` in dieser Datei; die Inline-`style` an jedem einzelnen Knoten sind Klassen und Tokens in `:root` (V6). 9. WEG, weil Qualifikationsbehauptung (V11): "Taetigkeitsschwerpunkt Endodontie (DGET)", "Master of Science Implantologie", "Versorgung im Meisterlabor vor Ort", "mit eigener Anaesthesistin", "Dentalhygienikerin" als Rollenzeile. An ihrer Stelle steht, was im Betrieb tatsaechlich passiert. Ein Abschluss, den niemand erworben hat, steht auf keiner unserer Seiten — auch nicht als Beispiel. 10. WEG, weil es wie eine Zusage klingt: "schmerzarme Behandlung", "minimalinvasive Methoden", "ohne Wartezimmerstress und ohne Fliessband", "Schwerpunkte sind ...". Daraus sind Beschreibungen geworden: wie lange ein Termin dauert, dass die Betaeubung Zeit bekommt, dass jeder Schritt vorher erklaert wird. "Schwerpunkt" ist ausserdem ein Wort mit fester Bedeutung im Berufsrecht und faellt damit unter denselben Punkt wie 9. 11. WEG, weil Geraetename oder Fachkuerzel ohne Nutzen fuer den Leser: "DVT", "Intraoralscanner", "Airflow", "Lupenbrille ab 4,5-facher Vergroesserung", "digitales Smile Design", "HKP", "PZR", "PA-Therapie". Gemeint ist jeweils dasselbe, nur verstaendlich: dreidimensionale Roentgenaufnahme, Abdruck mit der Kamera statt mit der Masse, Zahnreinigung, Heil- und Kostenplan. 12. Die Abrechnung bleibt genannt, weil sie fuer den Leser den Unterschied ausmacht: reine Privatpraxis, Abrechnung nach der Gebuehrenordnung fuer Zahnaerzte, keine Abrechnung ueber die gesetzliche Krankenversicherung. Genannt ist der Mechanismus, kein Betrag und kein Steigerungssatz — eine Zahl in einer Vorlage ist bei der naechsten Aenderung der Gebuehrenordnung falsch. 13. Die Patientenstimme BLEIBT — ausdrueckliche Entscheidung von Benedikt vom 20.08.2026. Aus den Initialen "Patientin M. K., Regensburg · seit 2016" ist ein ganzer Name geworden; das Portrait wird erzeugt, nie das Foto eines echten Menschen unter falschem Namen. Im Markup steht dahinter ``. "seit 2016" ist "seit einigen Jahren" geworden: eine Jahreszahl im Zitat altert. 14. Anschrift, Telefon und E-Mail sind erkennbar erfunden (V10, Benedikts Vorgabe vom 20.08.2026): Musterstrasse 12, 12345 Musterstadt, 0123 456789, `…@vogl-reimers.example`. Der Entwurf nannte eine echte Anschrift in Regensburg, eine erreichbare Rufnummer und eine erreichbare Domain. Regensburg ist durchgaengig Musterstadt. 15. Die Jahreszahl im Fuss war 2022 und ist 2026. "seit 2009" bleibt stehen: ein Gruendungsjahr altert nicht, eine Jahres-Differenz schon. 16. Die gestreifte Flaeche "Kartenausschnitt · Am Oelberg 7" ist die gezeichnete Umgebungskarte aus `_shared/arztpraxis` geworden (V12). Kein Kartendienst, keine Kacheln, kein Dritter, der die Adresse des Besuchers sieht. Anfahrt, Parken und stufenloser Zugang stehen zusaetzlich als Text daneben — die Zeichnung ist keine Informationsquelle. 17. Das Formular hat kein `action` und einen `type="button"`, im Markup steht der Grund (V12). Der Entwurf haengte am Knopf ein `onClick="{{ submit }}"`, das nur einen Dankestext in den Zustand schrieb. Neu ist der Hinweis, keine Befunde und keine Angaben zur Gesundheit ueber das Formular zu schicken — der stand im Entwurf nur in `{{ formNote }}` und war damit von der Bedienung abhaengig. 18. Impressum und Datenschutz zeigten im Entwurf auf `#footer`, "Notdienst" ebenfalls. Impressum und Datenschutz zeigen jetzt auf den Abschnitt `#rechtliches` am Seitenende (V17); der Verweis "Notdienst" ist weg und durch einen echten Satz im Kontaktteil ersetzt — er versprach eine Seite, die es nicht gibt. 19. Der Knopf "zurueck nach oben" trug im Entwurf das Schriftzeichen "↑", der Hauptknopf im Hero einen Rechtspfeil. Gegen die cmap-Tabelle beider Dateien geprueft, nicht angenommen: U+2192 fuehrt KEINE der beiden Schriften, U+2191 fuehrt Open Sans nicht — und Open Sans ist die Fliesstextschrift und damit die des Knopfes. Der Browser holt das Zeichen dann aus einer Ersatzschrift oder zeigt ein Kaestchen. (Montserrat fuehrt U+2191; auf die Titelschrift ist bei diesem Knopf aber kein Verlass, weil er sie nicht benutzt.) Beide Pfeile sind deshalb gezeichnete Symbole (`arrow-up` Nr. 27, `arrow-right` Nr. 28). 20. NEU hinzugefuegt: ein Filter ueber den sechs Leistungen (Alle, Vorsorge, Zahnerhalt, Zahnersatz) ueber vier `` plus `:checked` (V8) — bedienbar mit der Tastatur, funktioniert mit abgeschaltetem Skript, und mit abgeschaltetem CSS stehen alle sechs Karten untereinander da. 21. NEU hinzugefuegt: eine Frageliste als `
`-Aufklapper. Sie beantwortet, was eine Privatpraxis sonst im Wartezimmer erklaeren muss (Kosten, Beihilfe, gesetzlich Versicherte, Termin bei Schmerzen). Der Entwurf hatte dazu nichts; die Fragen kamen dort als Behauptungen im Fliesstext vor. 22. NEU hinzugefuegt: eine Leiste am unteren Bildrand (Anrufen, Termin) fuer Handybreiten und ein Sprunglink zum Inhalt. Der Entwurf ist auf feste Breite gezeichnet — `repeat(3, 1fr)` und `1fr 1fr` ohne jede Bedingung — und laesst Handybesucher ohne Menue und ohne Anrufknopf stehen (V5). Farblogik --------- Der Entwurf hat ein helles Petrol (#1b8a8f), ein dunkles Petrol (#14666a), ein fast schwarzes Blaugruen fuer Ueberschriften (#24333a) und einen noch dunkleren Ton fuer den Fuss (#1d2a30). Der Grund ist Weiss, ruhige Abschnitte liegen auf #f5f8f8. Das helle Petrol des Entwurfs traegt in dieser Datei KEINEN Text mehr und liegt unter keinem. Weiss auf #1b8a8f sind 4,13:1 und #1b8a8f auf Weiss ebenfalls 4,13:1 — beides faellt durch, und der Entwurf benutzt genau diese zwei Kombinationen fuer den Hauptknopf, den Kopf-CTA, jeden Verweis, die Kennzahlen im Praxisteil und die Ziffern 01 bis 06. Statt das Petrol zu verlieren, ist es auf Flaeche und Strich beschraenkt: Balken vor den Kleinzeilen, Oberkante der drei Kacheln, Rahmen der Ziffernkreise, Kartennadel. Text steht auf und in --teal-dk (6,69:1). Das ist die einzige sichtbare Abweichung von der Anmutung des Entwurfs; sie erhaelt sein Kennzeichen, statt es abzudunkeln. Was jede Farbe darf: --teal #1b8a8f nur FLAECHE und STRICH. Nie Text darauf, nie Text darin. Balken, Oberkante, Kreisrahmen, Kartennadel. --teal-dk #14666a TEXT auf hellem Grund (Verweise, Kennzahlen, Kleinzeilen) UND Flaeche mit weissem Text (Knopf, Kopfleiste, Kasten "seit 2009"). --teal-dk2 #0f5053 Hover zu beidem. --teal-lt #7ac6c9 Kleinzeilen und Symbole auf DUNKLEM Grund. Nur auf --dark und auf den zwei Fotobaendern, NIE auf --teal-dk (3,42:1). --ink-900 #24333a Ueberschriften auf hell. --ink #4a5257 Fliesstext. --muted #5f6b71 Kleintext. Nicht auf --ph-bg (4,40:1), dort --ink. --dark #1d2a30 Flaeche fuer den Fuss. --on-dark #d5e5e6 Lesetext auf allen dunklen Flaechen. --on-dark-soft #a9c8ca nur auf --dark (8,28:1), NIE auf --teal-dk (3,76:1). Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #4a5257 auf --paper #ffffff 7,97:1 --ink #4a5257 auf --wash #f5f8f8 7,46:1 --ink #4a5257 auf --field #fbfcfc 7,75:1 (Formularfeld) --ink #4a5257 auf --tint #e6f0f0 6,86:1 (Ziffernkreis) --ink #4a5257 auf --ph-bg #dfe8e9 6,40:1 (Platzhalter) --muted #5f6b71 auf --paper 5,49:1 --muted #5f6b71 auf --wash 5,14:1 --muted #5f6b71 auf --field 5,34:1 --muted #5f6b71 auf --tint 4,72:1 --ink-900 #24333a auf --paper 13,05:1 --ink-900 #24333a auf --wash 12,22:1 --ink-900 #24333a auf --tint 11,24:1 --teal-dk #14666a auf --paper 6,69:1 --teal-dk #14666a auf --wash 6,27:1 --teal-dk #14666a auf --field 6,51:1 --teal-dk #14666a auf --tint 5,76:1 --teal-dk2 #0f5053 auf --paper 9,16:1 #ffffff auf --teal-dk #14666a 6,69:1 #ffffff auf --teal-dk2 #0f5053 9,16:1 #ffffff auf --dark #1d2a30 14,73:1 #ffffff auf --ink-900 #24333a 13,05:1 --on-dark #d5e5e6 auf --teal-dk 5,16:1 --on-dark #d5e5e6 auf --dark 11,35:1 --on-dark-soft #a9c8ca auf --dark 8,28:1 --teal-lt #7ac6c9 auf --dark 7,54:1 Die zwei Fotobaender (Hero, Zitat) — GARANTIE STATT SCHAETZUNG ------------------------------------------------------------- Die Fotos sind noch nicht erzeugt; es gibt also kein fertiges Bild, an dem sich nachmessen liesse. Statt zu schaetzen ist hier der SCHLECHTESTE FALL gerechnet: Ein Schleier mit Deckung a ueber einem beliebigen Bild kann hoechstens so hell werden wie derselbe Schleier ueber REINWEISS. Was gegen diesen Wert besteht, besteht ueber jedem denkbaren Foto — auch ueber einem ueberstrahlten Fenster. Schleierfarbe ist --veil #143237 (die Farbe des Entwurfs, rgba(20,50,55,x)). HERO (`img/hero.jpg`, Schleier 88 %, gleichmaessig) hellstmoeglicher Grund #304b4f: Weiss (h1, Knopfbeschriftung) 9,35:1 --on-dark (Vorspann) 7,21:1 --on-dark-soft 5,26:1 --teal-lt (Kleinzeile ueber der Ueberschrift) 4,79:1 Der Entwurf legte hier einen WAAGERECHTEN Verlauf von 86 % auf 35 % Deckung. Am hellen Ende ergibt das ueber Reinweiss #adb7b9: Weiss kaeme dort auf 2,05:1, die Kleinzeile #a9dcde auf 1,36:1. Auf dem Handy laeuft der Textblock ueber die ganze Breite und damit auch ueber dieses Ende. Deshalb deckt der Schleier hier ueberall gleich. Am fertigen Foto nachgemessen: die hellste 48-px-Kachel der linken Bildhaelfte ist #d7c3aa (Licht auf der Holzzarge), mit Schleier #2b4345. Weiss darauf 10,54:1, --on-dark 8,12:1, --teal-lt 5,40:1. ZITATBAND (`img/zitat.jpg`, Schleier 90 %, gleichmaessig, Standbild) hellstmoeglicher Grund #2b474b: Weiss (das Zitat, 20 bis 24 px) 9,97:1 --on-dark (Zeile unter dem Zitat) 7,68:1 --teal-lt (Anfuehrungszeichen, dekorativ) 5,10:1 Der Entwurf deckte hier mit 88 % und setzte die Zeile unter dem Zitat auf #a9dcde: 6,23:1, also bestanden. Die Deckung steht trotzdem auf 90 %, weil dieses Band die groesste zusammenhaengende Textflaeche auf einem Foto traegt. Am fertigen Foto nachgemessen: hellste 48-px-Kachel #fdf4d9 (der Schirm der Stehlampe), mit Schleier #2b4547. Weiss darauf 10,27:1, --on-dark 7,91:1, --teal-lt 5,26:1. GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene) Die Beschriftungen stehen auf vier Gruenden, nicht nur auf --map-bg: --map-ink #525d63 auf --map-bg #eef2f3 6,00:1 --map-ink #525d63 auf --map-block #dfe6e7 5,35:1 --map-ink #525d63 auf --map-road #ffffff 6,76:1 --map-ink #525d63 auf den drei Schildchen (90 % --map-bg ueber --map-block, #edf1f2) 5,95:1 --map-bg #eef2f3 auf der U-Bahn-Kachel (Flaeche --map-ink) 6,00:1 --teal-dk #14666a auf der Praxisflaeche (--map-area #d4e1e3, fest hinterlegt) 5,00:1 Die Nadel ist --teal #1b8a8f und traegt keinen Text. --map-area ist der Ton, den 12 % --teal-dk ueber --map-bg ergeben, aber als fester Wert gesetzt. Als Schleier haette die Flaeche zwei Werte, weil sie auf einem --map-block liegt: ueber --map-bg 5,00:1, ueber --map-block nur 4,51:1. Nachgerechnet, nicht geschaetzt. Was ABSICHTLICH unter 4,5:1 liegt und deshalb NIE Text traegt und NIE Text ist: --teal #1b8a8f auf Weiss und Weiss auf --teal, beide 4,13:1. Genau deshalb ist das helle Petrol hier auf Flaeche und Strich beschraenkt. Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen: #ffffff auf #1b8a8f 4,13:1 (Hauptknopf im Hero, Kopf-CTA, Absendeknopf) -> Flaeche --teal-dk, weisser Text, 6,69:1 #1b8a8f auf #ffffff 4,13:1 (jeder Verweis, die drei Kennzahlen im Praxisteil, die Ziffern 01 bis 06, jede Kleinzeile auf hell) -> --teal-dk, 6,69:1 #8b979d auf #ffffff 3,00:1 (Untertitel der Marke, Beschriftung der Kennzahlen, die dritte Tabellenzeile) -> --muted, 5,49:1 #b6c1c5 auf #ffffff 1,84:1 (die Ziffern 01/02/03 in den drei Kacheln unter dem Hero) -> --muted, 5,49:1 #7f8a8f auf #ffffff 3,54:1 (Text am Ankreuzfeld) -> --muted #9aa4a8 auf #ffffff 2,55:1 (Fussnote unter dem Formular) -> --muted #6d797d auf #e7eeee 3,82:1 (Aufschrift der Karten-Attrappe) -> Karte ist ersetzt (V12) #a9dcde auf dem hellen Ende des Hero-Verlaufs 1,36:1 -> Schleier deckt ueberall gleich, Kleinzeile --teal-lt, 4,79:1 #9fadb2 auf #1d2a30 6,38:1 (Fusstext) -> bestanden, bleibt trotzdem als --on-dark-soft #a9c8ca, 8,28:1, damit die Kleinschrift im Fuss Luft hat #cfe6e7 auf #14666a 5,14:1 (Kopfleiste) -> bestanden, laeuft als --on-dark #d5e5e6, 5,16:1 #b9dcde auf #14666a 4,57:1 (Unterzeile im Kasten "seit 2009") -> knapp bestanden, laeuft als --on-dark, 5,16:1 Aufbau der Datei ---------------- Mobil zuerst. Alle Media Queries sind min-width; die schmale Ansicht ist der Ausgangszustand, breitere Fenster bekommen Spalten dazu. Geprueft bei 360, 768 und 1280 Pixeln. DIE FOTOS SIND DA (zwoelf Stueck: zehn `` im Markup plus die zwei CSS-Hintergruende). Erzeugt sind elf davon; `img/einblick-empfang.jpg` kommt aus `_shared/arztpraxis/` und wurde nur auf 4:3 beschnitten. Welches Bild aus welcher Beschreibung stammt, steht in `docs/vorlagen/bild-prompts-zahnarzt-vogl.md`. Die Klasse `.ph` (gestreifte Flaeche, Symbol, Beschriftung — V13) bleibt in dieser Datei stehen, obwohl sie im Markup nicht mehr vorkommt: eine spaetere Vorlage derselben Branche startet damit wieder mit sichtbaren Platzhaltern. Hero und Zitatband sind CSS-Hintergruende (`img/hero.jpg`, `img/zitat.jpg`) und bekommen deshalb keinen `.ph`-Block, sondern eine `background-color` in der Schleierfarbe: solange das Foto fehlt oder laedt, sieht das Band ruhig aus und nicht kaputt. Weil das Hero-Bild sonst erst mit dieser Datei entdeckt wuerde, laedt der Seitenkopf es vor — und genau EINES darf vorgeladen werden (V18); das Zitatband steht unter der Falz. ========================================================================== */ /* ── Schriften (selbst gehostet, latin-Teilmenge, 86 276 B = 84,3 KB) ───── BEIDE Dateien sind variabel und liegen byteidentisch auch in `_shared/gesundheit/fonts/`; kopiert, nicht verlinkt (V2). ACHTUNG, DIE FALLE DIESER BRANCHE: Die Montserrat-Datei heisst intern "Montserrat Thin". Ihre `fvar`-Achse laeuft 100–900, der Standardwert ist 100, und `OS/2 usWeightClass` steht ebenfalls auf 100. Wer sie einbindet, ohne die Gewichte ausdruecklich zu setzen, bekommt eine Seite in Haarstrich. Deshalb steht unten in JEDER Regel, die Montserrat benutzt, ein ausdrueckliches `font-weight` — auch an `strong`, `th`, `summary` und Knopfbeschriftungen, die ihr Gewicht sonst vom Browser bekommen. Deklariert wird jeweils nur der Bereich, der auch benutzt wird, nicht der volle Achsenbereich: Wer `font-weight: 100 900` schreibt, laedt sich die Erlaubnis ein, irgendwo ein Haarstrich-100 zu setzen. Open Sans traegt die Achse 300–800 und fuehrt KEIN 500 als benannte Instanz; 500 kommt hier nirgends vor. Kursive gibt es zu keiner der beiden Dateien. Budget der Basis-Stufe: 120 KB. */ @font-face { font-family: "Montserrat"; src: url("../vendor/fonts/montserrat-var.woff2") format("woff2"); font-weight: 400 700; /* Datei traegt wght 100-900, Standard 100 (!) */ font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-var.woff2") format("woff2"); font-weight: 400 700; /* Datei traegt wght 300-800 */ font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Montserrat laeuft BREITER als die meisten Systemschriften. Faellt sie aus, wird eine Ueberschrift, die vorher in eine Zeile passte, nicht kuerzer, sondern kann umbrechen. Deshalb nirgends feste Hoehen fuer Titelzeilen und kein Layout, das auf genau zwei Zeilen gebaut ist. */ --font-title: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --teal: #1b8a8f; /* nur Flaeche und Strich, NIE Text darauf oder darin */ --teal-dk: #14666a; /* Text auf hell; Flaeche mit weissem Text */ --teal-dk2: #0f5053; /* Hover zu beidem */ --teal-lt: #7ac6c9; /* Kleinzeilen auf --dark und auf den Fotobaendern */ --ink-900: #24333a; --ink: #4a5257; --muted: #5f6b71; --paper: #ffffff; --wash: #f5f8f8; --field: #fbfcfc; /* Formularfeld */ --tint: #e6f0f0; /* Ziffernkreis in den Leistungskarten */ --ph-bg: #dfe8e9; /* Platzhalter fuer ein Foto, das noch fehlt */ --line: #e6ecec; --line-2: #d5dedf; --dark: #1d2a30; /* Fuss */ --veil: 20 50 55; /* #143237 als Kanaele (Leerzeichen, damit rgb(var(--veil) / .88) gueltig bleibt) */ --on-dark: #d5e5e6; --on-dark-soft: #a9c8ca; --focus: #14666a; --focus-halo: #ffffff; --radius: 3px; /* der Entwurf rundet fast nichts */ --wrap: 1140px; --pad: clamp(1rem, 4vw, 1.5rem); --notice: 26px; /* Hoehe der Demo-Hinweisleiste, fix im Markup */ --quickbar: 58px; /* Hoehe der Handy-Leiste am unteren Bildrand */ } /* Auf dunklem Grund braucht der Fokusring die umgekehrte Aufteilung, sonst verschwindet der weisse Hof im Weiss des Rings. */ .is-dark { --focus: #ffffff; --focus-halo: #1d2a30; } /* ── Grundlagen ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--notice) + 1rem); } body { margin: 0; padding-top: var(--notice); padding-bottom: var(--quickbar); font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.75; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } /* Der Entwurf setzt alle Ueberschriften in Montserrat 600 und NICHT in Versalien — eine Praxis, die sich als ruhig beschreibt, schreit nicht. Das bleibt so; Versalien traegt hier nur die Kleinzeile. */ h1, h2, h3 { font-family: var(--font-title); font-weight: 600; /* NICHT weglassen - sonst greift 100 */ color: var(--ink-900); line-height: 1.25; letter-spacing: 0; margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: clamp(1.95rem, 6.4vw, 3rem); line-height: 1.2; } h2 { font-size: clamp(1.5rem, 4.2vw, 2.15rem); } h3 { font-size: 1.2rem; } h4 { font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-900); margin: 0 0 .8rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--teal-dk); text-decoration: none; } a:hover { color: var(--teal-dk2); text-decoration: underline; } strong, b { font-weight: 700; } /* NICHT weglassen - sonst greift 100 */ ::selection { background: var(--teal-dk); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } /* Die gesperrte Kleinzeile mit dem Petrolbalken davor — das durchgaengige Zeichen des Entwurfs. Der Balken ist reine Flaeche und traegt nie Text. */ .eyebrow { display: block; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal-dk); margin: 0 0 1rem; } .eyebrow--bar { display: flex; align-items: center; gap: .85rem; } .eyebrow--bar::before { content: ""; flex: none; width: 38px; height: 2px; background: var(--teal); } .eyebrow--center { justify-content: center; } .is-dark .eyebrow { color: var(--teal-lt); } .rule { width: 54px; height: 2px; background: var(--teal); border: 0; margin: 1.2rem 0; } .rule--center { margin-inline: auto; } .icon { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: -.18em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 50%; top: calc(var(--notice) + .5rem); transform: translate(-50%, -250%); z-index: 200; background: var(--teal-dk); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius); font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .9rem; letter-spacing: .06em; } .skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); } /* ── Einblenden: genau ein Effekt pro Abschnitt ──────────────────────────── */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); } .has-reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; } /* ── Knoepfe ────────────────────────────────────────────────────────────── */ /* Der Entwurf setzt weissen Text auf #1b8a8f — 4,13:1. Statt das Petrol abzudunkeln und damit sein Kennzeichen zu verlieren, liegt der Knopf jetzt auf dem dunkleren Petrol: 6,69:1, und das helle bleibt als Balken sichtbar. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; padding: 1.05rem 2rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; line-height: 1.3; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease; } .btn:hover { text-decoration: none; } .btn--teal { background: var(--teal-dk); border-color: var(--teal-dk); color: #fff; } .btn--teal:hover { background: var(--teal-dk2); border-color: var(--teal-dk2); color: #fff; } /* Nur auf dunklem Grund, deshalb weisse Kante. */ .btn--ghost { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; } .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--teal-dk); } .btn--block { width: 100%; } /* ── Kopfleiste ─────────────────────────────────────────────────────────── */ .topbar { background: var(--teal-dk); color: var(--on-dark); font-size: .8rem; line-height: 1.6; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.5rem; padding-block: .55rem; } .topbar__item { display: inline-flex; align-items: center; gap: .5rem; } /* --teal-lt kaeme hier auf 3,42:1. Die Symbole der Kopfleiste laufen deshalb in --on-dark, nicht im hellen Petrol. */ .topbar .icon { color: var(--on-dark); width: 1rem; height: 1rem; } .topbar a { color: #fff; } .topbar a:hover { color: #fff; } .topbar__tag { font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; } /* Sprechzeiten und Zusatzzeile stehen auf dem Handy weiter unten auf der Seite; hier oben kosten sie eine ganze Zeile ueber der Falz. */ .topbar__hide { display: none; } /* ── Kopf ───────────────────────────────────────────────────────────────── */ .header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 1px 12px rgb(29 42 48 / .06); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; padding-block: .7rem; } .brand { display: flex; align-items: center; gap: .8rem; color: inherit; } .brand:hover { text-decoration: none; } /* Der Kreis traegt im Entwurf die Buchstaben VR in Petrol auf Weiss — 4,13:1. Der Rahmen bleibt im hellen Petrol (Strich, kein Text), die Buchstaben stehen in --teal-dk. */ .brand__mark { width: 44px; height: 44px; flex: none; border: 2px solid var(--teal); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .9rem; letter-spacing: .04em; color: var(--teal-dk); } .brand__name { display: block; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: 1.1rem; line-height: 1.15; color: var(--ink-900); } /* Im Entwurf #8b979d auf Weiss — 3,00:1. */ .brand__sub { display: block; font-size: .6rem; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; } .nav { display: none; } .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Standbild, kein Video, keine Bildfolge, keine Parallaxe, keine Skalierung (V7 und Qualitaetsuntergrenze). Kein [data-reveal] im Hero: die Ueberschrift ist das LCP-Element und steht im ersten Bild. `background-color` traegt die Flaeche, solange das Foto fehlt oder laedt. Der Schleier deckt ueberall gleich — der Entwurf verlief waagerecht von 86 % auf 35 %, und auf dem Handy laeuft der Textblock ueber die ganze Breite und damit auch ueber das helle Ende. */ .hero { position: relative; background-color: rgb(var(--veil)); background-image: linear-gradient(rgb(var(--veil) / .88), rgb(var(--veil) / .88)), var(--ew-kopfbild, url("../img/hero.jpg")); background-size: cover; background-position: center 40%; color: #fff; } .hero__inner { padding-block: clamp(3.5rem, 13vw, 7.5rem); } .hero h1 { color: #fff; margin: 0 0 1.2rem; max-width: 18ch; } .hero__sub { font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.8; color: var(--on-dark); max-width: 54ch; margin: 0 0 2.2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; } /* ── Drei Merkmale unter dem Hero ───────────────────────────────────────── */ /* Der Entwurf schiebt diesen Block mit `margin-top: -74px` in den Hero hinein. Auf schmalen Fenstern stapeln sich die drei Kacheln und der Versatz risse ein Loch unter den Block; deshalb erst ab 1000 px. */ .trio-band { background: var(--wash); border-bottom: 1px solid var(--line); padding-block: clamp(2.2rem, 7vw, 3rem); } .trio { display: grid; grid-template-columns: 1fr; gap: 1.2rem; } .trio__item { background: var(--paper); border-top: 3px solid var(--teal); box-shadow: 0 6px 26px rgb(29 42 48 / .09); padding: 1.8rem 1.5rem 1.6rem; } /* Im Entwurf #b6c1c5 auf Weiss — 1,84:1, die schwaechste Farbe der ganzen Vorlage. */ .trio__num { font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .78rem; letter-spacing: .16em; color: var(--muted); margin: 0 0 .7rem; } .trio h3 { margin: 0 0 .5rem; font-size: 1.1rem; } .trio p { margin: 0; font-size: .92rem; line-height: 1.75; } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section { padding-block: clamp(3rem, 9vw, 6rem); } .section--wash { background: var(--wash); } .section--line { border-top: 1px solid var(--line); } .section__head { margin-bottom: 2.6rem; } .section__head p { font-size: 1rem; margin: 0; } .section__head--center { text-align: center; max-width: 42rem; margin-inline: auto; } .section__head--center h2 { margin-bottom: 0; } .section__head--center p { margin-top: 1.2rem; } /* ── Die Praxis ─────────────────────────────────────────────────────────── */ .about { display: grid; gap: 2.6rem; } .about__media { position: relative; } /* Platzhalter und spaeteres Foto sitzen im selben Rahmen: gleiche Hoehe, damit die Seite beim Einbau nicht springt. */ .about__media .ph { min-height: 320px; } .about__media img { width: 100%; height: 320px; object-fit: cover; } .about__badge { margin: 0; background: var(--teal-dk); color: #fff; padding: 1.4rem 1.6rem; } .about__badgenum { display: block; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: 1.9rem; line-height: 1; } /* Im Entwurf #b9dcde auf #14666a — 4,57:1, knapp bestanden. */ .about__badgesub { display: block; font-size: .85rem; line-height: 1.6; color: var(--on-dark); margin-top: .5rem; } .about__stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } /* Im Entwurf #1b8a8f auf Weiss — 4,13:1. */ .stat__num { font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: 1.65rem; line-height: 1; color: var(--teal-dk); margin: 0; } /* Im Entwurf #8b979d auf Weiss — 3,00:1. */ .stat__lbl { font-size: .82rem; color: var(--muted); margin: .35rem 0 0; } /* ── Leistungen mit Filter: Radios plus :checked, kein Javascript ───────── */ .svc { position: relative; } /* Die Radios bleiben bedienbar und mit der Tastatur erreichbar; sie sind nur optisch entfernt. Sichtbar ist das