/* ========================================================================== 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) PREMIUM-ZUSATZ (Aufgabe 13b): Die folgenden Absaetze zu `img/hero.jpg` beschreiben die STARTER-Fassung, aus der diese Datei hervorgegangen ist. In der Premium-Fassung ist der Hero mit dem Film zu einem Abschnitt verschmolzen (siehe ".hero--film" weiter unten); `img/hero.jpg` wird hier nicht mehr geladen, das Standbild des Films traegt denselben Platz. Die Rechnung fuer den neuen Kopf steht im Abschnitt FILM. 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`, war in der STARTER-Fassung die Ausnahme: es steckte als CSS-Hintergrund in der Gestaltung. PREMIUM-ZUSATZ (Aufgabe 13b): In dieser Fassung entfaellt `img/hero.jpg` vollstaendig — der Kopf ist mit dem Film verschmolzen und zeigt dessen Standbild (`img/film-ende.jpg`, echtes ``, siehe Abschnitt FILM). Kein Vorladen mehr fuer ein CSS-Hintergrundbild noetig. ========================================================================== */ /* ── 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); } /* Nur dort, wo js/gleiten.js Lenis anschaltet (Bedingung 1 dort: identisches pointer: fine), schaltet dieser Block den nativen Smooth-Scroll wieder ab. Warum: Laedt die Seite direkt mit einem #anker in der Adresse (genau der Fall beim Stufen-Schalter, der auf die Zieladresse eine Sprungmarke haengt), startet der Browser wegen scroll-behavior: smooth eine eigene, zeitgestreckte Sprung-Animation. Lenis (autoRaf: true) liest beim Start die aktuelle Scroll-Position einmalig aus und haelt sie danach jeden Frame fest -- greift das genau in diesem Moment mitten in der noch laufenden nativen Animation ab, friert die Seite dort ein, meist nahe 0. Wortgleich aus dem Muster Alte Linde uebernommen (dort am laufenden Server nachgemessen, Aufgabe 11b). Ausserhalb von pointer: fine laeuft kein Lenis, dort bleibt smooth. */ @media (pointer: fine) { html { scroll-behavior: auto; } } 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 ───────────────────────────────────────────────────────────────── */ /* Aufgabe 13b (uebernommen vom Muster Alte Linde, Aufgabe 12b): Kopf und Film sind jetzt EIN Abschnitt. Vorher stand hier ein eigenes Hintergrundfoto (`img/hero.jpg`, per CSS-Hintergrund samt eigenem Verlauf); jetzt traegt das Standbild des Films (`.film__standbild`, dieselbe Aufnahme wie das Filmende) denselben Platz — ein echtes statt eines CSS-Hintergrunds, siehe Kommentar an ".hero--film" weiter unten und im Markup. `img/hero.jpg` wird dadurch nicht mehr geladen; der Preload dafuer im ist entfernt (A5). Keine Einblendung am LCP-Element (V7 und Qualitaetsuntergrenze): Der Entwurf blendete den Textblock mit einer `fadeUp`-Keyframe ein. */ .hero { position: relative; color: #fff; } /* position: relative + z-index: 1 (wortgleich aus dem Muster Alte Linde uebernommen): ohne eigenen Stapel-Level wuerde .hero__inner als nicht positioniertes Element IMMER unter .film__bild/.film__canvas (position: absolute, z-index: auto) gemalt -- unabhaengig von der Dokumentreihenfolge, das ist die CSS-Stapelregel fuer positionierte gegen unpositionierte Geschwister. Die Ueberschrift bliebe dann hinter dem scrubbenden Filmbild verschwunden. z-index: 1 liegt unter dem Lader (z-index: 5, siehe LADER weiter unten), damit der Ladeschleier die Ueberschrift waehrend des Ladens weiterhin bedeckt. */ .hero__inner { position: relative; z-index: 1; 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