/* ============================================================================ LORENZEN VERSICHERUNGSMAKLER — unabhaengige Beratung in der HafenCity Hamburg Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu Hover, Fokus und die zwei Bedienungs-Rueckmeldungen des Entwurfs (die drei Bilder im Abschnitt Leistungen blenden ueber, das Plus in den Fragen dreht sich). Kein Parallax, kein Pinning, kein Scrub, kein Zaehler, kein Bildwechsel, kein `background-attachment: fixed`. HERKUNFT -------- 1:1 uebertragen aus dem Claude-Design-Entwurf "Versicherungsmakler Lorenzen Hamburg.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, Schatten und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Der Entwurf lag Base64-verpackt vor. Er laedt Source Serif 4 (optische Groesse 8-60, Schnitte 500 und 600) und IBM Plex Sans (400, 500, 600) von Google Fonts und die Laufzeit `support.js`. Er traegt Hover-Angaben der Claude-Design-Umgebung an neun Knoten (vier Menuepunkte, Knopf in der Kopfleiste, Hero-Knopf breit, Knopf im Leistungsfeld, Knopf "Ueber mich", Formular-Knopf), eine Fokus-Angabe (Sprungverweis), zehn Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, Hero breit, Hero schmal, drei Fehlermeldungen, Statusmeldung, E-Mail-Knopf), sechs Schleifen sc-for (Bereiche, Merkpunkte, Schritte, Fragen, Themen, Gespraechsart) und eine `DCLogic`-Klasse mit Breiten- und Scroll-Zustand, Bereichswahl, Formularpruefung und einer fertigen Mail fuers Mailprogramm. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt selbst `*, *::before, *::after { box-sizing: border-box }`, und so steht es hier. Was der Entwurf je nach Fenster per Skript umschaltet (matchMedia), steht hier in Media Queries an denselben Grenzen, nur min-width (V5): ab 1080 px Menuezeile mit Knopf statt Menue-Knopf, Logo 40 statt 32 px hoch ab 900 px und Fenster ab 6:5 Hero breit: Foto als Buehne, Schleier, Text darauf (Entwurf ab 1:1, siehe Abweichung 7); sonst Text oben, Foto 4:3 darunter Die Raster laufen wie im Entwurf ohne Media Query ueber `repeat(auto-fit, minmax(min(100%, X), 1fr))`. ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND ---------------------------------------- 1. LAUFZEIT ENTFERNT (V1, V6). x-dc, helmet, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick`/`onInput`/`onChange`/`onSubmit`, `DCLogic`, `support.js`, das Werkzeug-Skript von Claude Design und die Bildschirm-Etiketten sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`, die Hover-Angaben `:hover`, alle Listen ausgeschrieben. Hover gibt es genau dort, wo der Entwurf eine Hover-Angabe traegt: Der Hero-Knopf dunkelt deshalb nur in der breiten Fassung, "Termin" im Handy-Menue gar nicht. Wo der Entwurf einem Verweis eine Farbe inline gibt, gewinnt sie dort gegen `a:hover`; hier halten das eigene `:hover`-Regeln fest, sonst wuerde weisse Schrift auf Blau beim Darueberfahren zu #14212B. 2. EIN HERO STATT ZWEIER FASSUNGEN. Der Entwurf legt den Hero zweimal an (breit und schmal, beide mit id="hero-h1") und blendet per Skript eine davon aus. Hier steht er einmal, und CSS schaltet an derselben Grenze um. Grund: Die Kopf-Markierungen der persoenlichen Vorschau muessen je genau einmal vorkommen (V20), und eine id darf es nur einmal geben. Das Wort "Unabhaengiger" der Vorzeile stand nur in der breiten Fassung; es steht in `.nur-breit` und erscheint auch nur dort. Im Quelltext steht der Text vor dem Foto, wie in der schmalen Fassung; in der breiten liegt er per `z-index` darueber. 3. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Dieselben Familien und Schnitte, die die Seite zeigt: Source Serif 4, Schnitt 500, mit der Achse fuer die optische Groesse (opsz 8-60, der Browser waehlt sie wie bei Google nach der Schriftgroesse), 52 344 B; IBM Plex Sans als variable Datei, freigegeben 400-600, 45 712 B. latin-Teilmenge mit demselben `unicode-range` wie bei Google. Zusammen 98 056 B = 95,8 KB, Budget 120 KB. Kein preconnect, kein Stylesheet von Google. Der Entwurf bestellt Source Serif zusaetzlich in 600, setzt ihn aber an keiner Stelle ein (alle Serifen-Stellen tragen 500). Fuer "opsz + 500 + 600" liefert Google die ganze variable Datei mit wght 200-900 aus (122 360 B); zusammen waeren das 168 072 B, ueber dem Budget der Basis- und sogar der Premium-Stufe. Die kleinere Datei ist Googles eigene Fassung "opsz, nur 500": uebereinandergelegt bei 20 bis 82 px kein sichtbarer Unterschied, Zeilenbreite hoechstens 0,12 % anders. Wer die bitgleiche Datei will: `source-serif-4-500-600-latin.woff2` (liegt im Arbeitsordner der Uebernahme) und `font-weight: 500 600`. 4. 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 110 statt 84 px Abstand, #top und #inhalt halten 26 px (sonst rutschte beim Klick aufs Logo und nach "Zum Inhalt springen" der Hero 26 px unter die Kopfleiste; so landen beide wie im Entwurf bei 0), und der Sprungverweis "Zum Inhalt springen" erscheint unter der Leiste statt dahinter. Die Hoehe der Hero-Buehne bleibt die Formel des Entwurfs (92svh - 84 px). 5. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und og:description enden auf "Fiktives Beispielprojekt." 6. BILDER LOKAL (V3, V18, Entscheidung 6). Dieselben Dateien unter img/ statt versicherung/img/. Das Titelbild ist von 4096 x 2294 auf 1920 x 1075 px verkleinert (73 474 B, Budget 250 KB), der Dateiname des Entwurfs bleibt; `width`/`height` im Markup nennen die echten Masse. Genau ein Bild vorgeladen, das Titelbild, wie im Entwurf; og:image zeigt auf img/hero-4k.webp. 7. HERO BREIT: SCHLEIER UND UMSCHALTPUNKT (V9). Der Entwurf legt den Schleier rgba(246,247,247, .78 bei 0 % / .5 bei 30 % / 0 bei 48 %) an und schaltet ab 900 px bei Seitenverhaeltnis ab 1:1 auf breit. Am echten Foto faellt das durch (siehe KONTRASTE): Ein dunkler Fensterpfosten laeuft durch Vorzeile, Ueberschrift, Vorspann und "Leistungen ansehen", und in fast quadratischen Fenstern liegt Vorspann-Text auf dem Sakko. Hier: .78 bei 0 % / .7 bei 38 % / 0 bei 50 % (Anfang gleich, der Mann ab etwa der Bildmitte bleibt unberuehrt) und breit erst ab Seitenverhaeltnis 6:5; fast quadratische Fenster bekommen die schmale Fassung, wie im Entwurf sonst nur Hochformat. 8. NUMMER DER NICHT GEWAEHLTEN BEREICHE #677178 STATT #7A868E (V9). 3,48 : 1 auf #F6F7F7 bei 20 px Schnitt 500 (kein "grosser Text"); #677178 ist dieselbe Farbe, gerade so weit abgedunkelt, dass sie mit Reserve traegt: 4,65 : 1. 9. PLATZHALTER IM TEXTFELD #45525B (V9). Der Entwurf setzt keine Farbe; die Browser zeigen ihn hellgrau, bis hinunter auf etwa 2,35 : 1. Hier die Zweittext-Farbe des Entwurfs, deckend: 8,04 : 1 auf #FFFFFF. 10. FOKUSRING IM FUSS WEISS (V9, Nicht-Text). Der Ring des Entwurfs (#1B3A57) liegt dort auf #14212B bei 1,40 : 1 und ist unsichtbar; im Fuss ist er #FFFFFF (16,38 : 1). Im dunklen Makler-Band gibt es nichts, das den Fokus bekommt. 11. LINIE UNTER DER KOPFLEISTE OHNE SCROLL-LISTENER (V7, Entscheidung 5). Der Entwurf liest `scrollY > 20` bei jedem Scroll-Ereignis. Hier setzt js/seite.js `is-gescrollt`, sobald ein 20 px hoher Waechter am Seitenanfang das Bild verlaesst (IntersectionObserver). Ohne Skript bleibt die Linie durchsichtig, wie am Seitenanfang des Entwurfs. 12. HANDY-MENUE OHNE ZUSTAND IM SKRIPT (V8). Statt Knopf plus Zustand ein
/, gestaltet wie der Knopf des Entwurfs; "Menue" und "Schliessen" wechselt CSS, "aufgeklappt" meldet der Browser selbst. Die Liste liegt absolut unter der Leiste, an derselben Stelle wie im Entwurf, und traegt deshalb Grund und Weichzeichner der Leiste selbst und, wenn die Seite gescrollt ist, unten deren Linie. Damit ihr Weichzeichner wirkt, liegen Grund und Weichzeichner der Leiste auf ::before statt am
, die Linie auf ::after; die Leiste sieht dadurch nicht anders aus. Nach einem Sprung und beim Wechsel auf die breite Ansicht klappt js/seite.js das Menue zu (closeMenu, onMq im Entwurf); ohne Skript bleibt es offen, bis man "Schliessen" drueckt. 13. BEREICHSWAHL, THEMA UND GESPRAECHSART UEBER RADIOS (V8). Kein Skript, Muster wie `autohaus`: Die Radios der Bereichswahl stehen versteckt vor den beiden Spalten, ihre Beschriftungen sind die Reiter des Entwurfs, `:checked` schaltet Markierung, Bild und Text. Die Rollen tablist/tab/tabpanel und `aria-selected` entfallen, ein Radio meldet "ausgewaehlt" selbst; der Name der Reiterliste ("Versicherungsbereiche") haengt als Beschreibung an jedem Radio. Fokusring an der Beschriftung, mit den Werten des Entwurfs. Kleine Abweichung: Ein gewaehltes Thema laesst sich nicht wieder abwaehlen (im Entwurf hob ein zweiter Klick es auf); "Sonstiges" bleibt waehlbar. Der Knopf "Beratung zur ..." waehlt das Thema wie im Entwurf vor (pickTopic, js/seite.js); ohne Skript springt er nur zum Formular. 14. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen (#A3352A), Statusmeldung und der Aufbau der Mail sind weg, ebenso `aria-invalid` und `aria-describedby`, die auf diese Meldungen zeigten. Der Knopf ist type="button", das Formular hat kein Ziel, nichts faengt ein Absenden ab. Hinter dem Knopf stand im Entwurf die leere Statuszeile; den Abstand, den sie hielt (20 px), haelt jetzt ein Rand unter dem Knopf, damit der weisse Kasten gleich hoch bleibt. 15. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts ein. Die sechs Abschnitte unter dem Hero tragen [data-reveal] und erscheinen einmal (400 ms, 12 px). Der Hero nicht: das LCP-Element steht im ersten Frame. Der Fuss auch nicht. Ohne Skript und bei "Bewegung reduzieren" ist alles sofort da. 16. MAKLER-BAND AUF DEM HANDY (V5). Jede der drei Zeilen ist im Entwurf ohne Bedingung zweispaltig, `minmax(0, 200px) minmax(0, 1fr)`. Bei 360 px bleiben dem Text 96 px, ein bis zwei Woerter je Zeile. Unter 560 px steht der Begriff deshalb ueber dem Text, mit dem Zeilenabstand des Entwurfs (`gap: 8px 24px`; seine 8 px wirken nur so); ab 560 px genau wie im Entwurf. 17. "Berufsunfaehigkeitsversicherung" MIT WEICHEM TRENNSTRICH (V5). In 28 px ist das eine Wort etwa 400 px breit und ragte unter etwa 440 px Fensterbreite rechts aus der Seite (waagerechtes Scrollen). Ein ­ nach "Berufsunfaehigkeits" bricht es nur dort, wo es nicht in die Zeile passt; ueberall sonst steht es wie im Entwurf. 18. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von V10): Hafenstrasse 114, 20457 Hamburg, 01230 123456789, ostseemakler@eineuroweb.de, "Mo-Fr nach Vereinbarung". Benedikt hat sie geprueft. Ebenso die Platzhalter [REGISTERNUMMER] und [DOKUMENT FOLGT] in der Pflichtzeile im Fuss; im Markup steht "Vom Kunden zu ersetzen". 19. IMPRESSUM UND DATENSCHUTZERKLAERUNG zeigen wie im Entwurf auf eineuroweb.de (Entscheidung 7) und fuehren damit nicht ins Leere (V17); am Seitenende steht trotzdem der Abschnitt #rechtliches wie in jeder Vorlage. 20. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: , `decoding="async"` an beiden Logos, das Symbol im Reiter als data:- Adresse (eine blaue Flaeche ohne Buchstaben; ohne fragt der Browser /favicon.ico ab, und dort liefert die App nichts) und der Block fuer reduzierte Bewegung um die Einblend-Regeln erweitert. KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9) -------------------------------------------- WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im sRGB-Raum verrechnet, so wie der Browser es tut. --tinte #14212B auf --grund #F6F7F7 ......... 15,26 : 1 OK --tinte auf --weiss #FFFFFF ......... 16,38 : 1 OK --tinte auf --band #EAEDEE .......... 13,92 : 1 OK --blau #1B3A57 auf --grund (Vorzeilen, Verweise) 10,93 : 1 OK --blau auf --weiss (Verweis im Formular) 11,74 : 1 OK --blau auf --band ................. 9,97 : 1 OK --text #2C3943 auf --grund ................. 11,03 : 1 OK --text auf --weiss ................. 11,84 : 1 OK --text auf --band .................. 10,06 : 1 OK --grau #45525B auf --grund ................. 7,49 : 1 OK --grau auf --weiss (Pflichtfeld, Platzhalter) 8,04 : 1 OK --grau auf --band .................. 6,84 : 1 OK --rost #A4482E auf --grund ("Fuer ...", Nummern) 5,52 : 1 OK --nummer #677178 auf --grund ................. 4,65 : 1 OK (Entwurf #7A868E: 3,48 : 1 — FAELLT DURCH, Abweichung 8) --weiss auf --blau (Knoepfe, gewaehlte Felder) 11,74 : 1 OK --weiss auf --tinte (Hover, Band, Fuss) 16,38 : 1 OK --hell #C9D1D6 auf --tinte (Band, Fuss) .... 10,59 : 1 OK KOPFLEISTE UND HANDY-MENUE. rgba(246,247,247,.97) laesst 3 % durch. Gerechnet gegen das Dunkelste, was darunter durchlaeuft: ueber Schwarz wird sie #EFF0F0 (--tinte 14,34, --blau 10,28), ueber --tinte #EFF1F1 (14,45 / 10,35) — OK. Der Weichzeichner aendert daran nichts. HERO SCHMAL. Text auf --grund, das Foto ohne Text darunter: Werte oben. HERO BREIT. Dunkle Schrift auf hellem Schleier ueber dem Foto. Der unguenstigste denkbare Fall ist ein schwarzer Bildpunkt unter dem Schleier: Deckung 0,78 -> #C0C1C1: --tinte 9,08, --text 6,56, --blau 6,50 Deckung 0,70 -> #ACADAD: --tinte 7,28, --text 5,26, --blau 5,22 Deckung 0,50 -> #7B7C7C: --tinte 3,91, --text 2,83, --blau 2,80 Wo der Schleier unter 0,70 faellt, gilt deshalb nur der Messwert am echten Foto. Gemessen im Browser an dieser Seite: Schrift unsichtbar geschaltet, dann jeder Bildpunkt unter jeder Textzeile gegen ihre Schriftfarbe gerechnet; je Fenster der DUNKELSTE Punkt unter der jeweiligen Zeile: Fenster Vorzeile h1 Vorspann "Leistungen ansehen" 900 x 750 6,30 8,36 6,45 10,82 1024 x 600 6,45 8,38 6,26 10,44 1024 x 768 6,25 8,28 6,33 10,52 1080 x 900 6,38 8,28 6,45 10,70 1180 x 820 5,98 8,19 6,31 7,98 1200 x 1000 5,77 8,47 6,53 13,25 1280 x 720 6,18 8,28 6,38 8,71 1280 x 800 6,25 8,28 6,31 9,01 1280 x 1024 6,20 8,38 6,58 9,91 1366 x 768 5,92 8,26 6,31 8,79 1440 x 900 6,11 8,19 6,38 8,63 1600 x 1200 6,05 8,18 6,25 8,81 1680 x 1050 5,98 8,09 6,25 8,64 1920 x 1080 5,92 8,00 6,24 8,73 2560 x 1440 5,98 7,92 6,23 14,02 3440 x 1440 5,92 6,57 5,62 11,74 alles OK 900 x 760, 900 x 900 und alle Fenster unter 6:5 zeigen die schmale Fassung. Gegenprobe, dieselbe Messung mit dem Schleier des Entwurfs: 1280 x 800 Vorzeile 2,83, h1 3,43, Vorspann 2,86, "Leistungen ansehen" 4,27; 1920 x 1080 Vorzeile 2,42, h1 3,05, Vorspann 2,74 — FAELLT DURCH (der dunkle Fensterpfosten). Mit dem neuen Schleier, aber breit schon ab 1:1 wie im Entwurf: 900 x 900 Vorspann 1,01, 1100 x 1100 Vorspann 1,00, 1050 x 900 "Leistungen ansehen" 1,47 — die Zeilen enden auf dem Sakko. > Folge: Abweichung 7 (Schleier und 6:5). NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Fokusring --blau auf --grund 10,93, auf --weiss 11,74, auf --band 9,97, im Fuss --weiss auf --tinte 16,38. Rahmen der Eingabefelder und Themen #BFC8CD auf #FFFFFF 1,70, Linien #D3D9DC auf --grund 1,33 und #34444F auf --tinte 1,63 — unter den 3 : 1 fuer Bedienelemente; Entwurf so gelassen, jedes Feld traegt seine Beschriftung, gewaehlte Themen und Gespraechsarten sind blau gefuellt (11,74 : 1 gegen ihre Schrift). ========================================================================= */ /* ── Schriften · selbst ausgeliefert, kein Abruf zu einem fremden Server ── */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; /* Datei traegt wght 100-700, freigegeben 400-600 wie im Entwurf bestellt */ font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-400-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; /* Schnitt 500 mit Achse opsz 8-60 (Abweichung 3) */ font-display: swap; src: url("../vendor/fonts/source-serif-4-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Tokens · jeder Wert aus dem Entwurf ─────────────────────────────────── */ :root { --grund: #F6F7F7; /* Seitengrund, Kopfleiste, Schleier */ --weiss: #FFFFFF; /* Schrift auf Blau und Dunkel, Formular, Felder */ --tinte: #14212B; /* Text, Ueberschriften, Makler-Band, Fuss, Hover der Knoepfe */ --blau: #1B3A57; /* Verweise, Knoepfe, Vorzeilen, Fokusring, Gewaehltes */ --rost: #A4482E; /* Strich der Vorzeilen, "Fuer ...", Nummern, Markierung */ --text: #2C3943; /* Fliesstext */ --grau: #45525B; /* Zweittext, Bezeichnungen, Platzhalter */ --nummer: #677178; /* Nummer der nicht gewaehlten Bereiche (Entwurf #7A868E, Abweichung 8) */ --hell: #C9D1D6; /* Text auf Dunkel, Linien der Fragen */ --linie-dunkel: #34444F; /* Linien im Makler-Band und im Fuss */ --linie: #D3D9DC; /* helle Linien und Rahmen */ --feld: #BFC8CD; /* Rahmen der Eingabefelder, Themen und Gespraechsart */ --band: #EAEDEE; /* Grund "Ueber mich" und Fragen */ --hero-grund: #EEF0F0; /* Grund hinter dem Titelbild */ --bild-grund: #E3E7E9; /* Grund hinter den uebrigen Bildern */ --kopf-grund: rgba(246, 247, 247, 0.97); --schrift: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --titelschrift: "Source Serif 4", Georgia, serif; --breite: 1400px; --rand: clamp(20px, 4vw, 56px); --kopf: 84px; /* Kopfleiste */ --notice: 26px; /* feste Hinweisleiste aus A17 */ } /* ── Grundlage · die globalen Regeln des Entwurfs ────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding-top: var(--notice); background: var(--grund); color: var(--tinte); font-family: var(--schrift); -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--blau); text-underline-offset: 3px; } a:hover { color: var(--tinte); } :focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 2px; } summary::-webkit-details-marker { display: none; } .rahmen { max-width: var(--breite); margin: 0 auto; } /* Sprungverweis. Unter die Vermerk-Leiste gesetzt (Abweichung 4). */ .skip { position: absolute; left: -9999px; top: calc(var(--notice) + 8px); z-index: 100; padding: 10px 16px; background: var(--blau); color: var(--weiss); } .skip:hover { color: var(--weiss); } .skip:focus { left: 8px; } /* Vorzeile mit Strich davor. Der Strich ist im Entwurf ein leeres im selben Flex-Behaelter; als ::before verhaelt er sich genauso, auch darin, dass er schmaler wird, wenn die Zeile umbricht. */ .vorzeile { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blau); } .vorzeile::before { content: ""; display: block; width: 24px; height: 2px; background: var(--rost); } .kopfgruppe { display: flex; flex-direction: column; gap: 20px; } .titel { margin: 0; font-family: var(--titelschrift); font-weight: 500; font-size: clamp(38px, 4.2vw, 66px); line-height: 1.06; letter-spacing: -0.01em; } /* `text-wrap: balance` setzt der Entwurf nur bei Leistungen und "Ueber mich". */ .titel--balance { text-wrap: balance; } .abschnitt { padding: clamp(80px, 10vw, 152px) var(--rand); scroll-margin-top: calc(var(--notice) + var(--kopf)); } .abschnitt--band { background: var(--band); } /* Hauptknopf. Hoehe, Innenabstand und Groesse je Stelle wie im Entwurf. */ .knopf { display: inline-flex; align-items: center; background: var(--blau); color: var(--weiss); text-decoration: none; font-weight: 600; } .knopf:hover { background: var(--tinte); color: var(--weiss); } .knopf--kopf { height: 50px; padding: 0 24px; font-size: 15px; } .knopf--feld { align-self: flex-start; height: 54px; padding: 0 24px; font-size: 15px; margin-top: 6px; } .knopf--ueber { align-self: flex-start; height: 56px; padding: 0 28px; font-size: 16px; margin-top: 4px; } /* Versteckte Radios fuer Bereichswahl, Thema und Gespraechsart (Abweichung 13). `position: absolute` haelt sie aus Raster und Flex-Zeile heraus; ohne top/left bleiben sie an Ort und Stelle, damit der Tastaturfokus dort landet, wo ihre Beschriftung steht. */ .wahl-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ /* Grund und Weichzeichner der Leiste liegen auf ::before, die Linie auf ::after, nicht an
selbst: Ein Element mit `backdrop-filter` laesst darunter liegende Elemente nur noch sich selbst weichzeichnen. So bekommt das Handy-Menue unter der Leiste denselben Weichzeichner wie im Entwurf, wo es in der Leiste steht. Das Bild ist dasselbe: 84 px Leiste, 1 px Linie darunter, beides rgba(246,247,247,.97) mit blur(10px). */ .kopf { position: fixed; top: var(--notice); left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; } .kopf::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: var(--kopf-grund); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; } /* Gesetzt von js/seite.js, sobald die Seite mehr als 20 px gescrollt ist (Abweichung 11). */ .kopf.is-gescrollt::after { background: var(--linie); } .kopf__innen { 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__marke { display: flex; align-items: center; } .kopf__logo { display: block; height: 32px; width: auto; } .kopf__nav { display: none; align-items: center; gap: 32px; } .kopf__link { color: var(--tinte); text-decoration: none; font-size: 15px; font-weight: 500; } .kopf__link:hover { text-decoration: underline; } /* Handy-Menue:
statt Knopf mit Zustand (Abweichung 12). Der Knopf traegt die Werte des