/* ========================================================================== PHYSIOTHERAPIE AM AASEE — Krankengymnastik, Manuelle Therapie, Lymphdrainage Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt, Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler. Herkunft -------- Uebersetzt aus dem Claude-Design-Entwurf "Physiotherapie am Aasee.dc.html" nach `docs/regeln/vorlagen.md`. Der Entwurf laedt Poppins und Open Sans (samt kursivem Schnitt) von `fonts.googleapis.com`, dazu Font Awesome 6.5.2 von `cdnjs.cloudflare.com` fuer rund vierzehn Symbole und vier Fotos von `images.unsplash.com`; dazu `{{ }}`, vier ``-Bloecke, `style-hover` und `style-focus` an ueber vierzig Knoten und eine `DCLogic`-Klasse mit Scroll-Listener — 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: kein `js/scroll.js`, keine Parallaxe, keine scroll-gebundenen Zaehler (V7). Abweichungen vom Entwurf, jede mit Grund ---------------------------------------- 1. Poppins ist ersetzt durch Jost (Ersetzungstabelle, `docs/vorlagen/uebernahme-anleitung.md`, Schritt 4: "Poppins verraet den generierten Entwurf"). Vorhanden, selbst gehostet, gleiche geometrische Grotesk. Jost steht AUSSCHLIESSLICH in Ueberschriften, Kleinzeilen und Zahlen: die Schrift hat eine sehr kleine x-Hoehe und wirkt in Fliesstextgroesse zu klein (README der Branche). 2. Der Entwurf verlangt Poppins 500 und Open Sans 500. Die Open-Sans-Datei fuehrt 300, 400, 600, 700 und 800 als benannte Instanzen, aber KEIN 500. Wo der Entwurf 500 wollte (Kleintext in der Kopfleiste, Zwischenzeilen in den Leistungskarten), laeuft die Schrift in 600 und ist dafuer kleiner und gesperrt gesetzt, nicht duenner. 3. In JEDER Regel steht das `font-weight` ausdruecklich da — auch bei `strong`, `summary`, `th` und Knopfbeschriftungen, die es sonst vom Browser bekaemen. Grund steht in der README der Branche: bei den variablen Dateien dieser Sammlung ist der Standardwert nicht verlaesslich 400 (Montserrat steht dort auf 100). Wer sich angewoehnt, Gewichte zu benennen, tappt bei der naechsten Datei nicht hinein. 4. Kursiv ist gestrichen. Zu keiner der beiden Familien liegt ein kursiver Schnitt vor (`italicAngle` ist 0, das Italic-Bit ist nicht gesetzt); `font-style: italic` erzeugt darauf eine schraeg gescherte Faelschung. Der Entwurf laedt Open Sans ausdruecklich mit `ital,wght@1,400`. 5. Font Awesome ist vollstaendig ersetzt durch gezeichnete Strichsymbole aus `_shared/gesundheit/icons.svg.html` (V3, V6). Inline, kein Abruf, keine Symbolschrift. Zwei Zeichen kommen aus den Nachbarordnern, wie es die README dieser Branche vorsieht: `leaf` aus `_shared/pflege` (Nr. 13) fuer die Massage ohne Verordnung und `house` aus `_shared/handwerk` (Nr. 11) fuer die Hausbesuche. Ohne Gegenstueck geblieben sind `fa-map-location-dot` und `fa-chevron-up` in ihrer Entwurfsrolle: das eine stand in der Karten-Attrappe, das andere an einem Knopf, den ein Scroll-Listener ein- und ausblendete. 6. Das Zeichen "→" kommt nirgends als Schriftzeichen vor. Keine der beiden Schriften fuehrt U+2192 (gegen die `cmap` geprueft, nicht angenommen); ein gesetzter Pfeil kaeme aus einer Ersatzschrift des Systems und saehe auf jedem Geraet anders aus. Ueberall steht das gezeichnete `arrow-right` (Nr. 28). Dasselbe gilt fuer den Haken: `check-circle` (Nr. 17) statt "✓". 7. Der Cookie-Hinweis ist ersatzlos weg (V12). Seine beiden Knoepfe setzten dieselbe Zustandsvariable und schlossen nur das Fenster; die Seite laedt ohnehin nichts von Dritten. Der echte kommt aus dem Zusatz `cookie-pro`. Damit faellt auch der Verweis "Cookie-Einstellungen" im Fuss weg — er zeigte auf `#kontakt`. 8. Die Karten-Attrappe ist eine gezeichnete Umgebungskarte geworden (V12, Muster: `_shared/arztpraxis`, Nr. 11). Der Entwurf zeigte einen Knopf "Karte laden", nannte Google Maps beim Namen und blendete danach ein Streifenmuster mit der Aufschrift "KARTENAUSSCHNITT" ein — eine Attrappe, die nie eine Karte geladen haette. Eine eingebettete Karte kommt auch nicht in Frage: sie gibt die Adresse des Besuchers an einen Dritten weiter, bevor irgendjemand zugestimmt hat (V3). Anschrift und Anfahrt stehen als Text daneben — die Zeichnung ist keine Informationsquelle. 9. Der Knopf "nach oben" haengt im Entwurf an einem Scroll-Listener (`window.scrollY > 700`). Das ist Bewegung beziehungsweise ein Stilwert aus der Scroll-Position und gehoert der Premium-Stufe (V7). Hier ist es ein gewoehnlicher Verweis auf `#main`, ab Rechnerbreite dauerhaft sichtbar. 10. `style-hover` und `style-focus` an ueber vierzig Knoten sind echtes `:hover` und `:focus-visible` in dieser Datei (V6). Inline-`style` an jedem einzelnen Knoten sind Klassen und Tokens in `:root`. 11. Jede Zulassungs- und Fortbildungsbehauptung ist gestrichen (V11): "Zulassung nach § 124 SGB V" in der Leistungskarte, "Zugelassen fuer alle gesetzlichen Krankenkassen sowie Privatpatienten und Beihilfe" als eigene Fussspalte, "Alle Kassen & Privat" im Merkmalsband, "Alle Kassen und Privatpatienten" im Hero-Vorspann, "Zertifizierte Therapeut:innen" unter der Manuellen Therapie, "Fortbildungen in Manueller Therapie und Kiefergelenkbehandlung (CMD)" und "Bobath-Konzept fuer Erwachsene" im Team-Teil. An ihrer Stelle steht jeweils, was die Praxis tatsaechlich TUT: auf Verordnung oder als Selbstzahler behandeln, in geschlossenen Einzelraeumen arbeiten, Schwerpunkte benennen ohne Abschluesse zu behaupten. Ein Siegel oder Abzeichen wuerde die Qualifikation auch dann noch behaupten, wenn der Text laengst weg ist — deshalb ist auch nichts bebildert. Bei der Pruefung kam eine weitere dazu: "Ebenerdige, barrierefreie Praxisraeume" im Merkmalsband. "Barrierefrei" ist ein festgelegter Begriff (§ 4 BGG, DIN 18040) und verlangt mehr als einen Zugang ohne Stufe — Tuerbreiten, Bewegungsflaechen, ein entsprechendes WC. Die Seite sagt an drei anderen Stellen ohnehin genauer "ebenerdig, ohne Stufe"; jetzt sagt sie es auch dort. Das Rollstuhl-Zeichen bleibt stehen: es zeigt den stufenlosen Zugang, ohne Barrierefreiheit zu behaupten. 12. "ab 39 € / 30 Min." unter der Massage ist weg. Ein fester Betrag mitten in einer Leistungskarte ist beim naechsten Preisaushang falsch, und niemand liest eine Demo-Seite nach. Genannt ist stattdessen, dass die Leistung ohne Rezept buchbar ist. 13. Die Zuzahlung in der Frageliste nennt den MECHANISMUS, nicht die Zahl: gesetzlich festgelegter Anteil, Hoehe haengt vom Wert der Verordnung ab, Befreiung per Nachweis. Ein Eurobetrag aus einem Gesetz veraltet mit der naechsten Aenderung (Uebernahme-Anleitung, Schritt 5). Dasselbe gilt fuer das Ausfallhonorar: genannt ist die Frist, nicht der Betrag. 14. "27 Jahre in Muenster" ist weg. Der Entwurf nennt an einer Stelle die Gruendung 1998, an anderer 27 Jahre und im Fuss "© 2022" — drei Angaben, die sich schon im Entwurf widersprechen. Die Jahreszahl 1998 bleibt (sie bleibt richtig), die Differenz nicht. An ihre Stelle tritt die Zahl der Behandlungsraeume. 15. Anschrift, Telefon und E-Mail sind erkennbar erfunden (V10, Benedikts Vorgabe vom 20.08.2026): Musterstrasse 27, 12345 Musterstadt, 0123 456789 (Verweisziel `tel:+49123456789`), `praxis@physio-am-aasee.example`. Der Entwurf nannte eine echte Strasse in Muenster, eine erreichbare Rufnummer und eine erreichbare Domain. Der Ortsbezug ist mitgezogen: "mitten am Aasee" ist "direkt am Seeufer", die Haltestelle "Aasee" ist "Haltestelle am Seeufer". Der Name der Praxis bleibt — er ist der Titel dieser Vorlage. 16. "Umsetzung: Weber & Kollegen Medienbuero, Muenster" im Fuss ist weg: eine erfundene Agentur, die echt aussieht (V11). Wer die Seite gemacht hat, sagt die Hinweisleiste aus A17. 17. Die Jahreszahl im Fuss war 2022 und ist 2026. 18. Impressum, Datenschutz und AGB bleiben verlinkt und zeigen auf den Abschnitt `#rechtliches` am Seitenende (V17). Sozialnetz-Zeichen hat der Entwurf keine — die Servicezeile mit "f" und "in" aus der Sichtung steht in dieser Fassung des Entwurfs nicht mehr drin; waere sie da, kaeme sie ohne Profil dahinter weg. 19. NEU hinzugefuegt: ein Filter ueber den Leistungen (Alle, Therapie, Anwendung, Training). Der Entwurf zeigte sechs Karten ohne jede Ordnung nebeneinander. Der Filter laeuft ueber vier `` plus `:checked` (V8) — bedienbar mit der Tastatur, funktioniert mit abgeschaltetem Skript, und mit abgeschaltetem CSS stehen alle sechs Karten untereinander da. 20. NEU hinzugefuegt: die Frageliste als `
`-Aufklapper. Sie faengt auf, was der Entwurf an drei Stellen nur behauptete (Kassen, Zuzahlung, Wartezeit) und beantwortet es, statt es zuzusagen — bedienbar mit der Tastatur, auffindbar ueber die Suche im Browser, ohne eine Zeile Javascript. 21. NEU hinzugefuegt: eine Leiste am unteren Bildrand (Anrufen, Termin) fuer Handybreiten und ein Sprunglink zum Inhalt. Der Entwurf setzt seine Navigation in ein `display:flex` ohne jede Bedingung und laesst Handybesucher mit vier ueberlaufenden Menuepunkten stehen (V5). 22. Das Formular hat kein `action` und einen `type="button"`, im Markup steht der Grund (V12). Im Entwurf hing am Knopf ein `onClick="{{ onSubmit }}"`, das nur einen Dankestext in den Zustand schrieb. 23. Die Namen im Team-Teil BLEIBEN stehen — ausdrueckliche Entscheidung von Benedikt am 20.08.2026, dieselbe Regel wie fuer Kundenstimmen. Die Portraits werden erzeugt, nie das Foto eines echten Menschen unter falschem Namen. Im Markup steht dahinter ``. Eine Kundenstimme hat dieser Entwurf nicht; erfunden wird hier keine (V11). Farblogik --------- Der Entwurf hat ein Petrol, ein dunkles Petrolgrau und ein Gold. Petrol #14746c traegt Verweise, Kleinzeilen und die Flaechen der Handlungsbaender; #1f2d2c die Ueberschriften, den Fuss und den Text auf goldener Flaeche. Gold #e2a33c ist der Akzent. Der Grund ist Weiss, ruhige Abschnitte liegen auf #f4f7f7. Das Gold des Entwurfs traegt in dieser Datei KEINEN weissen Text und steht nirgends als Text auf hellem Grund. Weiss auf #e2a33c sind 2,20:1, Gold auf Weiss ebenso — der Hero-Knopf des Entwurfs fiel damit durch. Statt das Gold abzudunkeln und sein Kennzeichen zu verlieren, ist der Text darauf umgedreht: auf goldener Flaeche steht #1f2d2c (6,49:1). Auf DUNKLEM Grund traegt eine aufgehellte Fassung #edb861 die Kleinzeilen. Was jede Farbe darf: --teal #14746c Text auf hellem Grund (Verweise, Kleinzeilen, Symbole) UND Flaeche unter weissem Text. --teal-dk #0f5b55 Hover dazu, auf hell wie auf Flaeche. --teal-2 #12564f nur in der gezeichneten Karte, auf der hellen Praxisflaeche. --dark #1f2d2c Ueberschriften auf hell; Flaeche fuer den Fuss; der einzige Text, der auf --gold stehen darf. --gold #e2a33c nur FLAECHE und Strich: Knopf, Balken unter jeder Ueberschrift, Kartennadel. Als Flaeche traegt sie ausschliesslich --dark. NIE weisser Text darauf, nie als Text auf hellem Grund. --gold-lt #edb861 Kleinzeilen und Hover auf DUNKLEM Grund. --on-teal #dcefed Text auf --teal (Kopfleiste, Handlungsband). --on-dark #dbe7e5 Text auf dem Hero-Schleier und auf --dark. --on-dark-soft #9fb0ae Kleinschrift im Fuss. Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #3d4a4a auf --paper #ffffff 9,22:1 --ink #3d4a4a auf --wash #f4f7f7 8,56:1 --ink #3d4a4a auf --field #fbfcfc 8,97:1 --ink #3d4a4a auf --tint #e7f0ef 7,95:1 (Symbolflaeche) --muted #5d6b6a auf --paper 5,56:1 --muted #5d6b6a auf --wash 5,16:1 --muted #5d6b6a auf --field 5,41:1 --muted #5d6b6a auf --tint 4,79:1 --teal #14746c auf --paper 5,61:1 --teal #14746c auf --wash 5,21:1 --teal #14746c auf --field 5,46:1 --teal #14746c auf --tint 4,84:1 --teal-dk #0f5b55 auf --paper 7,93:1 --teal-dk #0f5b55 auf --wash 7,36:1 --teal-dk #0f5b55 auf --tint 6,84:1 --dark #1f2d2c auf --paper 14,29:1 --dark #1f2d2c auf --wash 13,26:1 --dark #1f2d2c auf --tint 12,32:1 #ffffff auf --teal #14746c 5,61:1 #ffffff auf --teal-dk #0f5b55 7,93:1 #ffffff auf --dark #1f2d2c 14,29:1 --dark #1f2d2c auf --gold #e2a33c 6,49:1 (Knopf, Hover im Handlungsband) --on-teal #dcefed auf --teal 4,70:1 --on-dark #dbe7e5 auf --dark 11,27:1 --on-dark-soft #9fb0ae auf --dark 6,32:1 --gold-lt #edb861 auf --dark 7,91:1 --teal #14746c auf --gold 2,55:1 (siehe unten: traegt nie Text) Der Hero ist ein Fotoband und deshalb am Schleier gerechnet, nicht gegen Reinweiss. Der Schleier deckt mit 88 % #143432 gleichmaessig. NACHGEMESSEN am fertigen `img/hero.jpg` (1600 × 900), nicht mehr geschaetzt. Gemessen wird ueber das GANZE Foto und nicht nur unter dem Textblock: `background-position: center 35 %` zeigt auf Rechnerbreite die volle Bildbreite, und auf Handybreite laeuft der Textblock ueber die ganze Spalte. Hellste 48-px-Kachel im ganzen Bild: #f3f3f4, das gegen das Tageslicht ausgebrannte Fenster oben rechts (bei x 1424, y 208); mit Schleier #2f4b49: #ffffff (h1, Knopfbeschriftung auf dem Geisterknopf) 9,44:1 --on-dark (Vorspann) 7,45:1 --gold-lt (Kleinzeile ueber der Ueberschrift) 5,23:1 Unter dem Textblock links allein ist die hellste Kachel das beleuchtete Handtuch (#fddeb8, mit Schleier #304842): 9,85:1 / 7,78:1 / 5,46:1. Angesetzt war vor der Erzeugung #d9dad4; das Foto faellt nicht heller aus als angesetzt, der Schleier bleibt deshalb bei 88 % und muss nicht auf 90 % steigen. Mit dem Gold des Entwurfs (#e2a33c) laege die Kleinzeile auf dem gemessenen Grund bei 4,29:1 — unter der Grenze. Deshalb traegt sie auf dunklem Grund die aufgehellte Fassung --gold-lt. (Die drei Zahlen standen vor der Pruefung eine Hundertstelstufe hoeher: notiert war #f0f0f2 statt der wirklich hellsten Kachel #f3f3f4. Nachgezaehlt ueber alle 48-px-Kacheln des Bildes im 8-px-Raster; alle Werte bleiben klar ueber 4,5:1, der Schleier bleibt bei 88 %.) Der Entwurf legte hier einen WAAGERECHTEN Verlauf von 86 % auf 35 % Deckung. Auf dem Handy laeuft der Textblock ueber die ganze Breite, also auch ueber das Drittel mit 35 % — Weiss kaeme dort ueber einem hellen Foto auf rund 1,6:1. Deshalb deckt der Schleier hier ueberall gleich. GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene) Die Beschriftungen stehen auf fuenf Gruenden, nicht nur auf --map-bg: --map-ink #4d5a59 auf --map-bg #eef2f2 6,37:1 --map-ink #4d5a59 auf --map-block #e0e7e6 5,73:1 --map-ink #4d5a59 auf --map-road #ffffff 7,19:1 --map-ink #4d5a59 auf --map-water #c8e0e5 5,22:1 --map-ink #4d5a59 auf den zwei Schildchen (90 % --map-bg ueber --map-block, #edf1f1) 6,31:1 --map-accent-ink #12564f auf der Praxisflaeche (12 % --map-accent ueber --map-bg, #d4e3e2) 6,43:1 Die Nadel ist --map-pin #e2a33c und traegt keinen Text. Auf der Praxisflaeche steht ABSICHTLICH nicht --teal (4,24:1), sondern das dunklere --teal-2. Was ABSICHTLICH unter 4,5:1 liegt und deshalb NIE Text traegt: --gold #e2a33c als Flaeche unter WEISSEM Text (2,20:1) und als Text auf hellem Grund (2,20:1). Genau deshalb steht auf jeder goldenen Flaeche --dark, und auf hellem Grund steht nirgends Gold als Text — die goldenen Balken unter den Ueberschriften sind reine Flaeche. --gold auf --teal (2,55:1): das Gold kommt im Handlungsband nur als Hover-FLAECHE vor, nie als Schrift auf Petrol. Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen: #ffffff auf #e2a33c 2,20:1 (Hero-Knopf "Termin anfragen") -> Text auf Gold ist --dark, 6,49:1 #8ba09e auf #ffffff 2,76:1 (Zwischenzeilen unter jeder Leistungskarte, "nach Vereinbarung" und "geschlossen" in den Oeffnungszeiten, die Fussnote zur telefonischen Erreichbarkeit, der Untertitel der Marke) -> --muted #5d6b6a, 5,56:1 #cfe6e3 auf #14746c 4,29:1 (Kopfleiste und Vorspann im Handlungsband) -> --on-teal #dcefed, 4,70:1 #7d908e auf #dfe7e4 2,50:1 (Aufschrift der Karten-Attrappe) -> Karte ist ersetzt (V12) #5d6b6a auf #ffffff 5,56:1 (Fliesstext) -> bestanden, bleibt #9fb0ae auf #1f2d2c 6,32:1 (Fuss) -> bestanden, bleibt #dbe7e5 auf dem Hero-Schleier -> bestanden, bleibt 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 — sieben Stueck, alle erzeugt, keines von einer Fremdseite geholt (V3, V13). Die Beschreibungen, mit denen sie entstanden sind, stehen in `docs/vorlagen/bild-prompts-physio-aasee.md`; wer eines ersetzen will, findet dort den Wortlaut. Sechs davon sind `` im Markup, mit `alt`, `width`, `height` und `loading="lazy"` — die Groessenangaben halten den Platz frei, damit beim Nachladen nichts rutscht. Das siebte, `img/hero.jpg`, ist die Ausnahme: es steckt als CSS-Hintergrund in der Gestaltung und laesst sich nicht als Kachel auszeichnen. Dort traegt `background-color` die Flaeche, solange das Bild laedt — der Kopf sieht dann ruhig aus und nicht kaputt. Weil es so erst mit dieser Datei entdeckt wuerde, laedt der Seitenkopf es vor (V18): es steht ueber der Falz, und genau EINES darf vorgeladen werden. ========================================================================== */ /* ── Schriften (selbst gehostet, latin-Teilmenge, 74 896 B = 73,1 KB) ───── Beide Dateien sind variabel. Deklariert wird nur der Bereich, der auch benutzt wird, nicht der volle Achsenbereich: Jost kann 100–900, aber ein Haarstrich-100 verschwindet auf schlechten Bildschirmen. Open Sans laeuft auf der Achse 300–800 und fuehrt kein 500 als benannte Instanz. Kursive gibt es zu keiner der beiden. Budget der Basis-Stufe: 120 KB. */ @font-face { font-family: "Jost"; src: url("../vendor/fonts/jost-var.woff2") format("woff2"); font-weight: 400 700; /* Datei traegt wght 100-900, Standard 400 */ 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, kein benanntes 500 */ font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Jost laeuft breiter als die meisten Systemschriften und hat eine sehr kleine x-Hoehe. Faellt sie aus, springt der Titel auf die Systemschrift — die laeuft schmaler und mit groesserer x-Hoehe, und eine Ueberschrift, die vorher in zwei Zeilen passte, sieht danach anders aus. Deshalb nirgends feste Hoehen fuer Titelzeilen und kein Layout, das auf genau zwei Zeilen gebaut ist. */ --font-title: "Jost", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --teal: #14746c; /* Text auf hell UND Flaeche unter weissem Text */ --teal-dk: #0f5b55; /* Hover dazu */ --teal-2: #12564f; /* nur in der gezeichneten Karte */ --dark: #1f2d2c; /* Ueberschriften, Fuss; Text auf --gold */ --gold: #e2a33c; /* nur Flaeche und Strich, NIE Text darauf ausser --dark */ --gold-lt: #edb861; /* Kleinzeilen und Hover auf dunklem Grund */ --ink: #3d4a4a; --muted: #5d6b6a; --paper: #ffffff; --wash: #f4f7f7; --field: #fbfcfc; /* Formularfeld */ --tint: #e7f0ef; /* Symbolflaeche */ --line: #e6ecec; --line-2: #d5dfde; --on-teal: #dcefed; --on-dark: #dbe7e5; --on-dark-soft: #9fb0ae; --focus: #14746c; --focus-halo: #ffffff; --radius: 3px; /* der Entwurf rundet auf 2 bis 3 Pixel */ --wrap: 1180px; --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: #1f2d2c; } /* ── 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-size: 1rem; font-weight: 400; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-title); font-weight: 600; color: var(--dark); line-height: 1.2; letter-spacing: 0; margin: 0 0 .5em; text-wrap: balance; } h1 { font-weight: 700; font-size: clamp(2rem, 7.6vw, 3.35rem); line-height: 1.14; } h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.25; } h3 { font-size: 1.3rem; } h4 { font-family: var(--font-title); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--teal); text-decoration: none; font-weight: inherit; } a:hover { color: var(--teal-dk); text-decoration: underline; } /* NICHT weglassen: sonst holt sich der Browser sein eigenes Fettgewicht aus einer variablen Datei, und das ist bei dieser Sammlung nicht verlaesslich. */ strong, b { font-weight: 700; } ::selection { background: var(--teal); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } /* Die gesperrte Kleinzeile ueber jeder Ueberschrift — das durchgaengige Zeichen des Entwurfs. Auf hellem Grund petrol, auf dunklem gold. */ .eyebrow { display: block; font-family: var(--font-title); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin: 0 0 .9rem; } .eyebrow--bar { display: flex; align-items: center; gap: .75rem; } .eyebrow--bar::before { content: ""; flex: none; width: 30px; height: 3px; background: var(--gold); } .eyebrow--center { justify-content: center; } .is-dark .eyebrow { color: var(--gold-lt); } /* Der goldene Balken unter der Ueberschrift, im Entwurf 60 x 3 Pixel. Reine Flaeche, traegt nie Text. */ .rule { width: 60px; height: 3px; background: var(--gold); border: 0; margin: 1.1rem 0 1.3rem; } .rule--center { margin-inline: auto; } /* Steht der Balken direkt unter einer Ueberschrift, faellt deren Grundabstand weg — sonst stehen 0,5em plus 1,1rem uebereinander und der Balken haengt in der Luft. Die zentrierte Fassung in `.section__head--center` bringt ihren eigenen Abstand mit und ist spezifischer; sie bleibt unberuehrt. */ h2 + .rule { margin-top: 0; } .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(--dark); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius); font-weight: 700; font-size: .9rem; letter-spacing: .04em; } .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 #e2a33c — 2,20:1. Statt das Gold abzudunkeln und damit sein Kennzeichen zu verlieren, steht darauf jetzt das dunkle Petrolgrau: 6,49:1, und der Knopf leuchtet weiter. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-body); font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .95rem 1.8rem; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease; } .btn:hover { text-decoration: none; } .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--dark); } .btn--gold:hover { background: var(--dark); border-color: var(--dark); color: #fff; } .btn--teal { background: var(--teal); border-color: var(--teal); color: #fff; } .btn--teal:hover { background: var(--teal-dk); border-color: var(--teal-dk); color: #fff; } /* Nur auf dunklem Grund, deshalb weisse Kante. */ .btn--ghost { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; } .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--teal); } /* Weisse Flaeche auf Petrol, mit Petrol beschriftet: 5,61:1. Beim Hover dreht die Flaeche auf Gold, der Text auf --dark: 6,49:1. */ .btn--paper { background: #fff; border-color: #fff; color: var(--teal); font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; text-transform: none; white-space: nowrap; } .btn--paper:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); } .btn--block { width: 100%; } /* ── Kopfleiste ─────────────────────────────────────────────────────────── */ .topbar { background: var(--teal); color: var(--on-teal); font-size: .8rem; line-height: 1.5; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; padding-block: .55rem; } .topbar__item { display: inline-flex; align-items: center; gap: .5rem; } .topbar .icon { width: 1rem; height: 1rem; color: var(--on-teal); } .topbar a { color: #fff; font-weight: 600; } .topbar a:hover { color: #fff; } /* Anschrift und Sprechzeiten stehen auf dem Handy weiter unten auf der Seite; hier oben kosten sie zwei ganze Zeilen ueber der Falz. */ .topbar__hide { display: none; } /* ── Kopf ───────────────────────────────────────────────────────────────── */ .header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgb(31 45 44 / .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: .75rem; color: inherit; } .brand:hover { text-decoration: none; } .brand__mark { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; line-height: 1; } .brand__name { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; line-height: 1.15; color: var(--dark); } /* Im Entwurf #8ba09e auf Weiss — 2,76:1. */ .brand__sub { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; } .nav { display: none; } .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Standbild, kein Video, keine Bildfolge, keine Parallaxe, keine Einblendung (V7 und Qualitaetsuntergrenze). Der Entwurf blendete den Textblock mit einer `fadeUp`-Keyframe ein — das ist Bewegung am LCP-Element. `background-color` traegt die Flaeche, solange das Bild fehlt oder laedt. Weil das Bild erst mit dieser Datei entdeckt wuerde, laedt der Seitenkopf es vor (V18). Der Schleier deckt ueberall gleich. Der Entwurf verlief waagerecht von 86 % auf 35 % — auf dem Handy laeuft der Textblock ueber die ganze Breite und damit auch ueber das Drittel mit 35 %. */ .hero { position: relative; background-color: #143432; background-image: linear-gradient(rgb(20 52 50 / .88), rgb(20 52 50 / .88)), var(--ew-kopfbild, url("../img/hero.jpg")); background-size: cover; background-position: center 35%; color: #fff; } .hero__inner { padding-block: clamp(3.5rem, 13vw, 7rem); } .hero h1 { color: #fff; margin: 0 0 1.1rem; max-width: 20ch; } .hero__sub { font-size: clamp(1rem, 2.4vw, 1.18rem); line-height: 1.65; color: var(--on-dark); max-width: 54ch; margin: 0 0 2.1rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Merkmalsband unter dem Hero ────────────────────────────────────────── */ .facts { background: var(--wash); border-bottom: 1px solid var(--line); padding-block: clamp(1.4rem, 5vw, 1.8rem); } .facts__grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.6rem; } .facts__grid p { display: flex; align-items: center; gap: .85rem; margin: 0; font-size: .95rem; } .facts .icon { width: 1.55rem; height: 1.55rem; color: var(--teal); } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section { padding-block: clamp(3rem, 9vw, 5.5rem); } .section--wash { background: var(--wash); } .section--line { border-top: 1px solid var(--line); } .section--line-b { border-bottom: 1px solid var(--line); } .section__head { margin-bottom: 2.4rem; } .section__head h2 { margin-bottom: 0; } .section__head p { font-size: 1.02rem; margin: 0; } .section__head--center { text-align: center; max-width: 42rem; margin-inline: auto; } .section__head--center .rule { margin-block: 1.1rem 1.3rem; } /* ── 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