/* ============================================================================ LEON VALENTIN PERSONAL TRAINING — Personal Training in Berlin Mitte 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 "Personal Training Berlin Mitte.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 (Schatten hat er keine); Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Der Entwurf laedt Archivo von Google Fonts (mit zwei preconnect) und die Laufzeitdatei der Claude-Design-Umgebung. Er traegt Hover-Angaben dieser Umgebung an acht Knoten (vier Menuepunkte und der Knopf in der Kopfleiste, der Knopf im breiten Hero, der Knopf unter den Preisen, der Formular-Knopf), eine Fokus-Angabe am Sprungverweis, zehn Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, zwei Hero-Fassungen, vier Fehlermeldungen, Statusmeldung), drei Schleifen sc-for (Leistungen, Fragengruppen, Fragen) und eine Logik-Klasse mit Breiten- und Scrollzustand, Menue und Formularpruefung. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Das Kastenmodell ist das des Entwurfs: Er setzt `box-sizing: border-box` global, hier ebenso. Das Farbschema ist ebenfalls das des Entwurfs, obwohl es in seinem CSS nicht steht: Im Kopf der Entwurfsdatei liegt ein Skript, das Claude Design beim Speichern mitschreibt. Nach dem Laden setzt es `color-scheme: dark` auf das html-Element, wenn der Seitengrund dunkel ist (#121211 ist es). Der Browser zeichnet seine eingebauten Bedienteile dann dunkel; zu sehen ist das am Kaestchen der Einwilligung im Formular, im Entwurf dunkelgrau, ohne die Angabe leuchtend weiss. Hier steht sie als eine Zeile in der Regel `html`, ohne Skript (Abweichung 1). Farben des Kaestchens unter NICHT-TEXT. Was der Entwurf je nach Fenster per Skript umschaltet, steht hier in Media Queries an denselben Grenzen, nur min-width (V5): 980 px Menuezeile statt Menue-Knopf 1100 px UND Seitenverhaelt- breite Hero-Fassung (Bild rechts mit nis mindestens 5/4 weicher Kante, Text unten links) Beide Bedingungen gelten zusammen, wie im Entwurf: 1100 x 900 bleibt schmal, 1100 x 880 wird breit. Die Raster laufen wie dort ohne Media Query ueber `repeat(auto-fit, minmax(min(100%, X), 1fr))`. Nachgemessen: Ganzseitiger Pixelvergleich mit dem aufgeloesten Entwurf, der dabei den Kopf-Block seiner Datei behaelt (sein Skript setzt `color-scheme: dark`, siehe oben), bei 360, 768, 1280 und 1440 px: 0 abweichende Pixel, wenn im Testbrowser die Abweichungen 7, 13, 15 und 19 zurueckgenommen werden und die Vermerk-Leiste ausgeblendet ist. Steht die Leiste, liegt die Seite 26 px tiefer; dann weicht kein Bildpunkt um mehr als eine Farbstufe ab (Rasterung beim Zeichnen), Lage und Groesse gleich. Das Formular wie geladen, mit per Tastatur angekreuztem Kaestchen und mit Text in den Feldern: ebenfalls 0 Pixel (360, 768, 1280 px). ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND ---------------------------------------- 1. LAUFZEIT ENTFERNT (V1, V6). Das Laufzeit-Element und sein Kopf-Block, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick` (6), `onInput` (4), `onChange`, `onSubmit`, die Logik-Klasse, die Laufzeitdatei und das Werkzeug-Skript von Claude Design sind weg; von diesem bleibt seine sichtbare Wirkung, `color-scheme: dark`, als Zeile in der Regel `html` (HERKUNFT). Inline-Stile sind Klassen mit den Werten aus `:root`, Leistungen und Fragen sind ausgeschrieben. Die globalen Regeln des Entwurfs stehen unten unveraendert, auch `a:hover { color: #D98A63 }`. Sie wirkte dort nur auf Verweise ohne eigene Inline-Farbe (Telefon, Mail, Datenschutzerklaerung im Formular, beide Fussverweise); jeder andere Verweis bekommt deshalb hier seine Farbe beim Darueberfahren ausdruecklich zurueck. Hover gibt es genau dort, wo der Entwurf ihn hat. 2. SCHRIFT SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die Familie und die Achsen des Entwurfs: Archivo, variable Datei mit Breite 62-125 % und Gewicht 100-900, freigegeben 300-800 wie im Entwurf bestellt, latin-Teilmenge mit demselben `unicode-range` wie bei Google, 90 104 B (Budget 120 KB). `font-stretch: 62% 125%` ist von Hand ergaenzt, das Werkzeug schriften.py druckt die Zeile nicht: Ohne sie gilt die Datei als nur 100 % breit, und jedes `font-stretch: 70% / 72% / 80%` liefe breit statt schmal. Kein preconnect, kein Stylesheet von Google. Der Entwurf nutzt keine Kursive. 3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist 26 px hoch (--notice). Deshalb beginnen Seitengrund und Kopfleiste 26 px tiefer, die Sprungziele halten 102 statt 76 px Abstand, #top und #inhalt halten 26 px, damit Logo-Verweis und Sprungverweis wie im Entwurf ganz oben landen, und der Sprungverweis steht 34 statt 8 px unter der Oberkante (sonst laege er unter der Leiste). 4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und og:description enden auf "Fiktives Beispielprojekt." 5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt im Projektordner fitness, alle hoechstens 1920 px breit und deshalb unveraendert (byte-gleich). Das Titelbild hat 43 584 B (Budget 250 KB). Genau ein Bild vorgeladen, das Titelbild, wie im Entwurf (V18); og:image zeigt auf img/hero.webp. Alle Bilder tragen `decoding="async"`, alle ausser Titelbild und Kopf-Logo (beide ueber der Falz, im Entwurf ebenfalls ohne) `loading="lazy"`. 6. EIN HERO-MARKUP STATT ZWEI. Der Entwurf zeichnet den Hero zweimal (breit und schmal, je ein Bedingungsblock) und vergibt dabei id="hero-h1" doppelt. Hier steht er einmal; die zwei Gestaltungen schaltet dieselbe Bedingung als Media Query um. `.hero__buehne` und `.hero__vorspann-rahmen` tragen die Kaesten der breiten Fassung und sind in der schmalen wirkungslos (Block bzw. `display: contents`). Pixelvergleich mit beiden Fassungen des Entwurfs bei 11 Fenstergroessen von 360 x 780 bis 2560 x 1440: 0 Pixel Unterschied (vor Abweichung 7). 7. HERO-SCHLEIER DER BREITEN FASSUNG VERSTAERKT (V9). Mit dem waagerechten Verlauf des Entwurfs (0,75 bei 0 %, 0,35 bei 40 %, 0 bei 60 %) faellt die Ueberschrift an ihren hellsten Stellen durch, bis hinunter auf 2,28 : 1 bei 1920 px (Lichtleiste an der Decke, Turnringe, Eichenboden; Werte unter KONTRASTE). Hier 0,75 bei 0 %, 0,65 bei 45 %, 0 bei 66 %. Der senkrechte Verlauf und der Schleier der schmalen Fassung sind unveraendert. Schwaechere Stufen reichen nicht: 0,5 bei 40 % / 0 bei 64 % ergibt bei 1920 px 3,17, 0,6 bei 40 % / 0 bei 66 % 4,00 : 1. 8. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf mit Zustand ein
/ in der Leiste, an derselben Stelle wie der Knopf des Entwurfs; die Beschriftung "Menue"/"Schliessen" wechselt per CSS, "aufgeklappt" meldet der Browser selbst. Die Liste liegt absolut unter der Leiste ueber die volle Fensterbreite, wo der Entwurf sie in den wachsenden Kopf setzt, und zieht unten die Linie, die dort der Kopf unter dem Menue zieht. Gegen den Kopf des Entwurfs gemessen (zu und offen, 320 bis 979 px): gleiche Lage aller Knoepfe und Verweise. Nach einem Sprung und an der 980-px-Grenze klappt js/seite.js das Menue zu wie der Entwurf; ohne Skript bleibt es offen, bis man den Knopf noch einmal drueckt. 9. LINIE UNTER DER KOPFLEISTE PER MARKE (V7, V8). Der Entwurf zieht sie, sobald die Seite mehr als 40 px gescrollt ist. Hier schaltet js/seite.js eine Klasse, wenn eine 1 px hohe Marke 39-40 px unter dem Seitenanfang aus dem Bild geht (IntersectionObserver) — kein Scroll-Ereignis, keine gelesene Scroll-Position, den Uebergang macht das CSS. Ohne Skript bleibt die Linie weg (der Zustand am Seitenanfang); der Kontrast haengt nicht daran, der Kopf ist immer zu 90 % deckend. 10. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen, Statusmeldung und ihre Verweise (`aria-invalid`, `aria-describedby`) sind weg. Der Knopf ist type="button", das Formular hat kein action; `required` und `novalidate` bleiben wie im Entwurf. Hinter dem Knopf stand im Entwurf die leere Statuszeile, und zwischen Knopf und "* Pflichtfeld" lagen deshalb zwei Abstaende (2 x 22 px). Den zweiten haelt jetzt ein Rand unter dem Knopf. 11. `hyphens: auto` AN DER SCHMALEN H1 WEGGELASSEN. Der Entwurf hat kein `lang` am , ohne Sprache trennt kein Browser: Die Zeile wirkte dort nie. Mit `lang="de"` (Abweichung 17) fingen Safari und Firefox an, zu trennen ("TRAI-NING"); Chrome unter Windows trennt nicht (gemessen). Ohne die Zeile bricht die Ueberschrift in jedem Browser wie im Entwurf. 12. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts ein. Die sechs Abschnitte unter dem Hero tragen [data-reveal] an ihrem Rahmen 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. FIRMENNAME IM KONTAKTBLOCK (V19, Entscheidung 8). Der Entwurf schreibt "Leon Valentin Personal Training" nirgends als Text aus, nur im Logo-Bild, im Alt-Text und im aria-label; "Leon Valentin" allein ist die Person und bleibt unberuehrt. Damit ein Kunde nach dem Umbranden seinen Namen irgendwo sieht, beginnt die Anschrift unter "Studio" mit dem Firmennamen. Eine Zeile mehr, wie in jeder Anschrift; sonst steht jeder Text wortgleich wie im Entwurf. 14. FOKUSRING AUF HELLEM GRUND (Nicht-Text). #D98A63 auf #EEEBE5 hat nur 2,27 : 1, unter den 3 : 1 fuer Bedienzustaende. In "Leistungen & Preise" und "FAQ" ist der Ring deshalb #8A3F1E (6,28 : 1), das dunkle Kupfer des Entwurfs. Auf dunklem Grund bleibt #D98A63 (6,93 / 6,86 / 6,43). 15. 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. 16. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von V10): Linienstrasse 120, 10115 Berlin-Mitte, 030 12345 67890, fitnesscoach@eineuroweb.de, "Mo-Sa nach Vereinbarung". Benedikt hat sie geprueft. 17. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: und der Abschnitt #rechtliches. Der Sprungverweis ist der des Entwurfs. 18. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser /favicon.ico an der Wurzel ab, und die App liefert dort nichts. Es steht als data:-Adresse im Kopf (V3): eine Flaeche in #121211 mit einem Rahmen in #D98A63, ohne Buchstaben, damit die Umbrandung nichts Fremdes stehen laesst. 19. FUSS-LOGO OHNE VERZERRUNG (Entscheidung 4: das Logo bleibt die Datei, wie sie ist). Der Entwurf setzt es auf 56 px Hoehe und `width: auto`, also im Seitenverhaeltnis der Datei (689 x 157, 245,7 px breit). Es steht aber in einer senkrechten Flex-Spalte, und die zieht es auf die Breite der Adresszeile darunter: Im Entwurf ist das Logo ab 768 px 350 px breit (42 % zu breit), bei 360 px 320 px (30 %), die Buchstaben sind sichtbar in die Breite gezogen. `align-self: flex-start` laesst es bei 245,7 x 56 px. Lage, Hoehe und alles daneben bleiben gleich; die Seite misst Pixel fuer Pixel wie der Entwurf, nur das Logo ist nicht mehr gestreckt. 20. UEBERSCHRIFT IN BROWSERN OHNE `text-wrap: balance` (V9). Ab 1600 px stoesst die h1 an ihre Hoechstbreite von 760 px. Mit balance (aus dem Entwurf) bricht sie dann in fuenf Zeilen um ("Personal / Training, / das sich / Ihrem Leben / anpasst."), jede endet vor 53 % der Fensterbreite. Ein Browser ohne balance bricht gierig um: "Training, das" laeuft bis 56 % in den auslaufenden Schleier, und die h1 faellt auf 3,62 : 1 (Werte unter KONTRASTE). Nur in solchen Browsern begrenzt ein @supports-Block die h1 ab 1600 px auf 5,45em; dann bricht sie genau wie mit balance. Wo balance laeuft, gilt allein der Wert des Entwurfs. BEWUSST WIE IM ENTWURF BELASSEN (zur Entscheidung offen) -------------------------------------------------------- - Studio-Raster ab 1396 px: vier Spuren; das breite Bild spannt ueber alle, auto-fit klappt deshalb keine ein, und in der zweiten Reihe bleibt rechts eine Spalte leer (bei 1440 px 4 x 311 px). - Unter 359 px Fensterbreite ragt "AUFMERKSAMKEIT." (Ueberschrift der Preise, 44 px) bis zu 38 px ueber den Rand. Die Pruefbreiten 360, 768 und 1280 px sind sauber. - Rahmen der Eingabefelder #3A3733 auf #1B1A18: 1,47 : 1 (Nicht-Text, unter 3 : 1). Die Beschriftung steht ueber jedem Feld. KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9) -------------------------------------------- WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im sRGB-Raum verrechnet, so wie der Browser es tut. --hell #EEEBE5 auf --dunkel #121211 ........ 15,75 : 1 OK --text #D6D2CA auf --dunkel ................ 12,43 : 1 OK --zweit #A9A49B auf --dunkel ................ 7,56 : 1 OK --akzent #D98A63 auf --dunkel ................ 6,93 : 1 OK --hell / --text / --akzent auf --hero-grund #141312 15,60 / 12,31 / 6,86 --dunkel auf --hell (helle Abschnitte, helle Knoepfe, Sprungverweis) 15,75 : 1 OK --text-hell #4A4741 auf --hell .................. 7,78 : 1 OK --akzent-dunkel #8A3F1E auf --hell ............... 6,28 : 1 OK --dunkel auf --akzent (Hover heller Knoepfe) ..................... 6,93 : 1 OK --weiss #FFFFFF auf --akzent-dunkel (Hover Preise-Knopf) ................ 7,47 : 1 OK --hell auf --kasten #1B1A18 (Formular) 14,62 : 1 OK --text auf --kasten (Einwilligung) .. 11,54 : 1 OK --zweit auf --kasten ("* Pflichtfeld") 7,01 : 1 OK --akzent auf --kasten (Hover Verweis) .. 6,43 : 1 OK --hell auf --dunkel (Eingabefelder) . 15,75 : 1 OK KOPFLEISTE. rgba(18,18,17,.9) laesst 10 % durch. Unguenstigster Fall ist ein weisser Bildpunkt darunter: der Grund wird #2A2A29. --hell (Menuepunkte, Menue-Knopf) ................ 12,08 : 1 OK --akzent (Menuepunkt beim Darueberfahren) ........ 5,31 : 1 OK Der Knopf "Erstgespraech" ist deckend: --dunkel auf --hell 15,75 : 1. TITELBILD. Gemessen im Browser an dieser Seite und am echten Bild: Schrift unsichtbar geschaltet, dann jeder Bildpunkt unter jeder Textzeile gegen die Schriftfarbe gerechnet; je Fenster der HELLSTE Punkt (der schlechteste Wert), in Klammern der Wert, den 99 % der Punkte uebertreffen. Schmale Fassung (unter 1100 px oder Seitenverhaeltnis unter 5/4), Schleier des Entwurfs: Fenster Vorzeile --akzent h1 --hell Vorspann --text Verweis --hell 360 x 780 5,09 14,23 12,31 15,60 390 x 844 5,14 14,09 12,31 15,60 768 x 1024 6,23 14,37 12,31 15,60 1024 x 768 6,83 13,69 12,31 15,60 1099 x 900 6,86 13,78 12,31 15,60 OK Breite Fassung, h1 (--hell), Schleier des Entwurfs -> Schleier hier: 1100 x 880 4,06 (9,74) -> 6,81 (12,74) 1150 x 900 4,65 (9,67) -> 8,24 (12,75) 1200 x 900 4,10 (9,51) -> 7,39 (12,71) 1280 x 800 3,97 (9,35) -> 6,78 (12,62) 1366 x 768 3,86 (10,02) -> 6,65 (13,00) 1440 x 900 3,79 (8,72) -> 6,35 (12,18) 1536 x 864 3,68 (7,54) -> 6,13 (10,91) 1600 x 900 3,68 (7,04) -> 5,98 (10,31) 1680 x 1050 3,06 (12,69) -> 5,95 (14,15) 1760 x 990 2,51 (11,97) -> 5,71 (13,79) 1800 x 1012 2,42 (11,77) -> 5,64 (13,67) 1920 x 1080 2,28 (12,40) -> 5,10 (14,02) 2048 x 1152 8,47 (12,90) -> 12,13 (14,22) 2560 x 1440 7,48 (11,41) -> 10,48 (13,48) 3000 x 1688 6,23 (8,50) -> 9,24 (11,37) alles OK > Folge: Abweichung 7. Vorzeile, Vorspann und Verweis der breiten Fassung bestehen mit beiden Schleiern; mit dem Schleier hier mindestens 6,86 / 9,69 / 10,94 : 1. Gierig umgebrochen (Browser ohne `text-wrap: balance`) faellt die h1 mit dem Schleier hier ab 1680 px auf 4,34 / 3,67 / 3,62 / 3,77 : 1 (1680 / 1760 / 1800 / 1920 px). > Folge: Abweichung 20. Mit ihr bricht die h1 dort wie mit balance und > haelt dieselben Werte; bei 1600 px 12,29 : 1. NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Fokusring --akzent auf --dunkel 6,93, auf --hero-grund 6,86, auf --kasten 6,43; auf --hell nur 2,27 : 1, dort deshalb --akzent-dunkel 6,28 : 1 (Abweichung 14). Kaestchen der Einwilligung: Seine Farben waehlt der Browser nach `color-scheme: dark` (HERKUNFT), abgelesen in Chrome, gleich wie im Entwurf. Rand #858585 auf --kasten 4,71 : 1, Flaeche #3B3B3B 1,55 : 1; angekreuzt Flaeche --akzent 6,43 : 1, Haken #3B3B3B darauf 4,14 : 1 (ohne die Angabe weiss mit Rand #767676, 3,83 : 1). ========================================================================= */ /* ── Schrift · selbst ausgeliefert, kein Abruf zu einem fremden Server ───── */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 800; /* Datei traegt wght 100-900, freigegeben 300-800 */ font-stretch: 62% 125%; /* von Hand ergaenzt, siehe Abweichung 2 */ font-display: swap; src: url("../vendor/fonts/archivo-300-800-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 { --dunkel: #121211; /* Seitengrund; Text, Linien und Knopf auf Hell; Felder; Handy-Menue */ --hero-grund: #141312; /* Grund des Hero, Endfarbe des schmalen Schleiers */ --hell: #EEEBE5; /* Grundtext, Ueberschriften; Grund von Preise und FAQ; helle Knoepfe */ --text: #D6D2CA; /* Fliesstext auf Dunkel */ --zweit: #A9A49B; /* Zweittext auf Dunkel */ --text-hell: #4A4741; /* Fliesstext auf Hell */ --akzent: #D98A63; /* Kupfer: Vorzeilen auf Dunkel, Ziffern, Hover, Fokusring */ --akzent-dunkel: #8A3F1E;/* dunkles Kupfer: Vorzeilen und Nummern auf Hell, Hover Preise-Knopf */ --weiss: #FFFFFF; /* Schrift des Preise-Knopfs beim Darueberfahren */ --linie: #3A3733; /* Haarlinien auf Dunkel, Rahmen der Eingabefelder */ --linie-kopf: #2E2C29; /* Kopflinie, Linien im Handy-Menue, Linie ueber dem Fuss */ --linie-hell: #B7B1A7; /* Haarlinien der FAQ */ --kasten: #1B1A18; /* Formularkasten, Flaeche unter den Bildern */ --kopf-grund: rgba(18, 18, 17, 0.9); --schrift: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; --breite: 1400px; --rand: clamp(20px, 4vw, 56px); --notice: 26px; /* feste Hinweisleiste aus A17 */ --kopf: 76px; /* Kopfleiste ohne ihre 1-px-Linie */ } /* ── Grundlage · die globalen Regeln des Entwurfs ────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; /* setzt im Entwurf das Kopf-Skript der Datei, siehe HERKUNFT */ } body { margin: 0; padding-top: var(--notice); background: var(--dunkel); color: var(--hell); font-family: var(--schrift); -webkit-font-smoothing: antialiased; } a { color: var(--hell); text-underline-offset: 4px; } a:hover { color: var(--akzent); } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; } summary::-webkit-details-marker { display: none; } details[open] .faq-plus { transform: rotate(45deg); } main { scroll-margin-top: var(--notice); } .rahmen { max-width: var(--breite); margin: 0 auto; } /* ── Sprungverweis ───────────────────────────────────────────────────────── */ .skip { position: absolute; left: -9999px; top: calc(var(--notice) + 8px); z-index: 100; padding: 10px 16px; background: var(--hell); color: var(--dunkel); } .skip:hover { color: var(--dunkel); } .skip:focus { left: 8px; } /* Marke fuer die Kopflinie (Abweichung 9): 39-40 px unter dem Seitenanfang, bezogen auf das Dokument, nicht auf ein positioniertes Element. */ .kopf-marke { position: absolute; top: 39px; left: 0; width: 1px; height: 1px; pointer-events: none; } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ .kopf { position: fixed; top: var(--notice); left: 0; right: 0; z-index: 50; background: var(--kopf-grund); border-bottom: 1px solid transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .25s ease; } .kopf.is-gescrollt { border-bottom-color: var(--linie-kopf); } .kopf__leiste { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .kopf__logo { display: flex; align-items: center; } .kopf__logo img { display: block; height: 40px; width: auto; } .kopf__nav { display: none; align-items: center; gap: 36px; } .kopf__link { color: var(--hell); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .kopf__link:hover { color: var(--akzent); } .kopf__cta { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; background: var(--hell); color: var(--dunkel); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .kopf__cta:hover { background: var(--akzent); color: var(--dunkel); } /* Handy-Menue (Abweichung 8). Leiste und
bleiben unpositioniert: Bezugsrahmen der Liste ist die feste Kopfleiste. `top: 100%` ist damit die Unterkante der 76-px-Leiste, und die Liste laeuft ueber die volle Breite. */ .menue__knopf { display: flex; align-items: center; height: 46px; padding: 0 18px; border: 1px solid var(--hell); background: transparent; color: var(--hell); font: 700 13px Archivo, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; list-style: none; } .menue:not([open]) .menue__auf, .menue[open] .menue__zu { display: none; } .menue__liste { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 8px var(--rand) 28px; background: var(--dunkel); border-top: 1px solid var(--linie-kopf); border-bottom: 1px solid transparent; transition: border-color .25s ease; } .kopf.is-gescrollt .menue__liste { border-bottom-color: var(--linie-kopf); } .menue__link { padding: 16px 0; border-bottom: 1px solid var(--linie-kopf); color: var(--hell); text-decoration: none; font-size: 22px; font-weight: 700; font-stretch: 80%; text-transform: uppercase; } .menue__link:hover { color: var(--hell); } .menue__cta { margin-top: 24px; display: flex; align-items: center; justify-content: center; height: 56px; background: var(--hell); color: var(--dunkel); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .menue__cta:hover { color: var(--dunkel); } /* ── Hero · schmale Fassung als Ausgang, breite unten (Abweichung 6) ──────── */ .hero { position: relative; background: var(--hero-grund); overflow: hidden; scroll-margin-top: var(--notice); } .hero__bild { position: relative; padding-top: var(--kopf); } .hero__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 80svh; object-fit: cover; object-position: 76% 0%; } .hero__schleier { position: absolute; inset: 0; background: linear-gradient(0deg, var(--hero-grund) 0%, rgba(20, 19, 18, 0) 45%); } .hero__inhalt { position: relative; margin-top: -72px; padding: 0 clamp(20px, 6vw, 56px) 56px; display: flex; flex-direction: column; gap: 24px; } .hero__zeile { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent); } .hero__strich { display: none; } /* Ohne `hyphens: auto` (Abweichung 11). */ .hero__titel { margin: 0; font-weight: 800; font-stretch: 70%; font-size: clamp(48px, 13vw, 96px); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; } .hero__vorspann-rahmen { display: contents; } .hero__vorspann { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; } .hero__knoepfe { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; } /* In der schmalen Fassung ohne Hover, wie im Entwurf. */ .hero__knopf { display: flex; align-items: center; justify-content: center; height: 58px; background: var(--hell); color: var(--dunkel); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .hero__knopf:hover { color: var(--dunkel); } .hero__link { align-self: center; color: var(--hell); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-underline-offset: 6px; } .hero__link:hover { color: var(--hell); } /* ── Abschnitte ──────────────────────────────────────────────────────────── */ .abschnitt { padding: clamp(88px, 10vw, 152px) var(--rand); scroll-margin-top: calc(var(--notice) + var(--kopf)); } .abschnitt--weit { padding-top: clamp(88px, 11vw, 168px); padding-bottom: clamp(88px, 11vw, 168px); } .abschnitt--hell { background: var(--hell); color: var(--dunkel); } /* Abweichung 14: Fokusring auf hellem Grund. */ .abschnitt--hell :focus-visible { outline-color: var(--akzent-dunkel); } .vorzeile { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent); } .abschnitt--hell .vorzeile { color: var(--akzent-dunkel); } .titel { margin: 0; font-weight: 800; font-stretch: 70%; font-size: clamp(44px, 5.6vw, 92px); line-height: 0.92; text-transform: uppercase; text-wrap: balance; } /* Titel und Vorzeile untereinander (Preise, Ablauf, FAQ, Kontakt). */ .stapel { display: flex; flex-direction: column; gap: 24px; } .foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--kasten); } .foto--breit { aspect-ratio: 21 / 9; object-position: 50% 35%; } /* ── Ueber mich ──────────────────────────────────────────────────────────── */ .ueber__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(48px, 7vw, 120px); align-items: center; } .ueber__text { display: flex; flex-direction: column; gap: 32px; } .ueber__absaetze { display: flex; flex-direction: column; gap: 20px; font-size: 18px; line-height: 1.7; color: var(--text); max-width: 560px; } .ueber__absaetze p { margin: 0; text-wrap: pretty; } .ueber__liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0 32px; } .ueber__liste li { border-top: 1px solid var(--linie); padding: 18px 0; display: flex; flex-direction: column; gap: 6px; } .ueber__stichwort { font-weight: 800; font-stretch: 72%; font-size: 22px; text-transform: uppercase; } .ueber__erklaerung { font-size: 15px; line-height: 1.5; color: var(--zweit); } /* ── Leistungen & Preise ─────────────────────────────────────────────────── */ .preise__rahmen { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px); } .preise__kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 64px; align-items: end; } .preise__vorspann { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text-hell); max-width: 520px; text-wrap: pretty; } .preise__liste { display: flex; flex-direction: column; } .leistung { border-top: 1px solid var(--dunkel); padding: 32px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 48px; align-items: baseline; } .leistung__kopf { display: flex; align-items: baseline; gap: 20px; } .leistung__nr { font-size: 14px; font-weight: 600; color: var(--akzent-dunkel); min-width: 28px; } .leistung__titel { margin: 0; font-weight: 800; font-stretch: 72%; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; text-transform: uppercase; } .leistung__text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-hell); text-wrap: pretty; } .leistung__preis { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .leistung__betrag { font-weight: 800; font-stretch: 72%; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; } .leistung__einheit { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-hell); } .preise__schluss { border-top: 1px solid var(--dunkel); } .preise__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .preise__knopf { display: inline-flex; align-items: center; height: 60px; padding: 0 32px; background: var(--dunkel); color: var(--hell); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .preise__knopf:hover { background: var(--akzent-dunkel); color: var(--weiss); } .preise__hinweis { margin: 0; font-size: 15px; color: var(--text-hell); } /* ── Studio ──────────────────────────────────────────────────────────────── */ .studio { padding-bottom: 0; } .studio__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); } .studio__figur { margin: 0; } .studio__figur--breit { grid-column: 1 / -1; } .studio__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: clamp(8px, 2vw, 32px) 0; } .studio__titel { font-size: clamp(40px, 4.4vw, 72px); } .studio__absatz { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; } /* ── Ablauf ──────────────────────────────────────────────────────────────── */ .ablauf__rahmen { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px); } /* Im Entwurf als einzige grosse Ueberschrift ohne `text-wrap: balance`. */ .ablauf__titel { text-wrap: wrap; } .ablauf__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px 32px; } .ablauf__schritt { border-top: 1px solid var(--hell); padding-top: 28px; display: flex; flex-direction: column; gap: 14px; } .ablauf__nr { font-weight: 800; font-stretch: 70%; font-size: 64px; line-height: 0.8; color: var(--akzent); } .ablauf__name { margin: 0; font-weight: 800; font-stretch: 72%; font-size: 26px; text-transform: uppercase; } .ablauf__text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--zweit); } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px clamp(40px, 6vw, 120px); align-items: start; } .faq__gruppen { display: flex; flex-direction: column; gap: 48px; min-width: 0; } .faq__gruppe { display: flex; flex-direction: column; } .faq__gruppentitel { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-hell); } .faq__frage { border-top: 1px solid var(--linie-hell); } .faq__frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 19px; font-weight: 600; line-height: 1.4; } .faq-plus { flex: none; font-size: 28px; font-weight: 300; line-height: 1; transition: transform .2s ease; } .faq__antwort { margin: 0; padding: 0 48px 26px 0; font-size: 16px; line-height: 1.7; color: var(--text-hell); text-wrap: pretty; } .faq__schluss { border-top: 1px solid var(--linie-hell); } /* ── Kontakt ─────────────────────────────────────────────────────────────── */ .kontakt__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px clamp(40px, 6vw, 120px); align-items: start; } .kontakt__links { display: flex; flex-direction: column; gap: 36px; } .kontakt__titel { font-size: clamp(48px, 6vw, 104px); line-height: 0.9; } .kontakt__vorspann { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text); max-width: 480px; } .kontakt__daten { margin: 0; display: flex; flex-direction: column; } .kontakt__zeile { border-top: 1px solid var(--linie); padding: 18px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; } .kontakt__zeile:last-child { border-bottom: 1px solid var(--linie); } .kontakt__zeile dt { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zweit); padding-top: 4px; } .kontakt__zeile dd { margin: 0; font-size: 18px; } .kontakt__anschrift { line-height: 1.5; } .kontakt__anschrift address { font-style: normal; } .kontakt__mail { overflow-wrap: anywhere; } /* ── Formular (sendet nichts, Abweichung 10) ─────────────────────────────── */ .formular { background: var(--kasten); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 22px; } .formular__titel { margin: 0; font-weight: 800; font-stretch: 72%; font-size: 28px; text-transform: uppercase; } .feld { display: flex; flex-direction: column; gap: 8px; } .feld__name { font-size: 14px; font-weight: 600; } /* `border-radius: 0` stand im Entwurf inline und schlug damit auch den Radius der globalen Fokus-Regel; deshalb steht diese Regel nach ihr. */ .feld__eingabe { height: 54px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 0; background: var(--dunkel); color: var(--hell); font: 400 16px Archivo, sans-serif; } .feld__text { padding: 14px 16px; border: 1px solid var(--linie); border-radius: 0; background: var(--dunkel); color: var(--hell); font: 400 16px/1.6 Archivo, sans-serif; resize: vertical; } .einwilligung { display: flex; gap: 12px; align-items: flex-start; } .einwilligung input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--akzent); } .einwilligung label { font-size: 15px; line-height: 1.55; color: var(--text); } .formular__knopf { height: 60px; margin-bottom: 22px; /* Abweichung 10: der Abstand der leeren Statuszeile */ border: 0; background: var(--hell); color: var(--dunkel); font: 700 14px Archivo, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .formular__knopf:hover { background: var(--akzent); } .formular__pflicht { margin: 0; font-size: 13px; color: var(--zweit); } /* ── Fuss ────────────────────────────────────────────────────────────────── */ .fuss { border-top: 1px solid var(--linie-kopf); padding: 56px var(--rand) 40px; } .fuss__rahmen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; } .fuss__marke { display: flex; flex-direction: column; gap: 8px; } /* Abweichung 19: `align-self: flex-start` haelt das Seitenverhaeltnis. */ .fuss__logo { display: block; align-self: flex-start; height: 56px; width: auto; max-width: 100%; } .fuss__adresse { margin-top: 12px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zweit); } .fuss__recht { display: flex; flex-wrap: wrap; gap: 12px 32px; } .fuss__recht a { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* ── Rechtlicher Hinweis am Seitenende (V17, Abweichung 15) ──────────────── */ .rechtliches { padding: 28px var(--rand) 40px; font-size: 14px; line-height: 1.7; color: var(--zweit); scroll-margin-top: calc(var(--notice) + var(--kopf) + 1rem); } .rechtliches h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--hell); } .rechtliches p { margin: 0; max-width: 64ch; } /* ── Breiten · dieselben Grenzen wie im Skript des Entwurfs ──────────────── */ @media (min-width: 980px) { .kopf__nav { display: flex; } .menue { display: none; } } @media (min-width: 1100px) and (min-aspect-ratio: 5/4) { .hero__buehne { position: relative; min-height: clamp(620px, 48vw, 90svh); display: flex; align-items: flex-end; } .hero__bild { position: absolute; inset: 0; padding-top: 0; } .hero__foto { position: absolute; top: 0; bottom: 0; right: 0; left: 12%; width: 88%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; object-position: 70% 25%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); } /* Abweichung 7: waagerecht 0,65 bei 45 % und 0 bei 66 % statt 0,35 bei 40 % und 0 bei 60 %; senkrecht wie im Entwurf. */ .hero__schleier { background: linear-gradient(90deg, rgba(18, 18, 17, 0.75) 0%, rgba(18, 18, 17, 0.65) 45%, rgba(18, 18, 17, 0) 66%), linear-gradient(0deg, rgba(18, 18, 17, 0.8) 0%, rgba(18, 18, 17, 0) 35%); } .hero__inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 140px var(--rand) clamp(56px, 6vw, 96px); gap: 32px; } .hero__zeile { display: flex; align-items: center; gap: 14px; font-size: 13px; } .hero__strich { display: block; width: 40px; height: 1px; background: var(--akzent); } .hero__titel { max-width: min(760px, 52vw); font-size: clamp(64px, 7.4vw, 132px); line-height: 0.9; } .hero__vorspann-rahmen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: min(760px, 52vw); } .hero__vorspann { max-width: 440px; font-size: 18px; } .hero__knoepfe { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 0; } .hero__knopf { display: inline-flex; justify-content: normal; height: 60px; padding: 0 32px; } .hero__knopf:hover { background: var(--akzent); color: var(--dunkel); } .hero__link { align-self: auto; text-decoration: underline; text-decoration-thickness: 1px; } } /* Abweichung 20: greift nur in Browsern ohne `text-wrap: balance`. Ab 1600 px steht die h1 an ihrer Hoechstbreite von 760 px; 5,45em laesst "Ihrem Leben" (5,20em) auf eine Zeile, "Training, das" (5,70em) nicht. So bricht sie wie balance in fuenf Zeilen um. Wo balance laeuft, gilt allein der Wert des Entwurfs. */ @supports not (text-wrap: balance) { @media (min-width: 1600px) and (min-aspect-ratio: 5/4) { .hero__titel { max-width: 5.45em; } } } /* ── Einblenden: genau ein Effekt je Abschnitt (Abweichung 12) ───────────── */ /* Der Ausgangszustand haengt an `.has-reveal`, und die Klasse setzt allein `js/reveal.js`. Ohne Javascript ist deshalb nichts versteckt. */ .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; } /* ── Weniger Bewegung: abschalten, nicht verkuerzen ─────────────────────── */ /* Die ersten beiden Regeln stehen so im Entwurf. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } .has-reveal [data-reveal], .has-reveal [data-reveal].is-in { opacity: 1; transform: none; } }