/* ============================================================================ ELEKTRO MUELLER — Elektroinstallation in Frankfurt am Main 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 "Elektro Mueller Frankfurt.dc.html" (Projekt 9e200815-1fb2-4f84-b0ef-82a1c23232f8, in der Sicherung Base64-verpackt), 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 und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Der Entwurf laedt Barlow und Barlow Condensed von Google Fonts und die Laufzeitdatei der Claude-Design-Umgebung. Er traegt Hover-Angaben an zehn Knoten (zwei Verweise der Infoleiste, vier Menuepunkte, Knopf im Kopf, Knopf im breiten Hero, Ablauf-Knopf, Formular-Knopf), eine Fokus-Angabe (Sprungverweis), elf Bedingungsbloecke sc-if (Infoleiste, Menuezeile, Menue-Knopf, Handy-Menue, breiter und schmaler Hero, vier Fehlermeldungen, Statusmeldung), drei Schleifen sc-for (Leistungen, Fragen, Themen) und eine `DCLogic`-Klasse mit Breiten-, Scroll- und Menuezustand, Themenwahl und Formularpruefung. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Alle Masse sind die des Entwurfs, auch sein Kastenmodell (globales `box-sizing: border-box`, wie im Entwurf). Was er je nach Fenster per Skript umschaltet, steht hier in Media Queries an denselben Grenzen, nur min-width (V5): 1080 px Infoleiste und Menuezeile statt Menue-Knopf; Kopfleiste 114 statt 76 px, Hero oben 150 statt 112 px 1100 px und Seitenverhaeltnis ab 5:4 breite Hero-Fassung (Bild ganzflaechig, Schleier, Text links) — genau die Bedingung aus dem Skript des Entwurfs, `(min-width: 1100px) and (min-aspect-ratio: 5/4)` 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). Huell- und Kopf-Element der Claude-Design-Umgebung, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick`/`onInput`/`onChange`/`onSubmit`, `DCLogic`, `data-screen-label`, die Laufzeitdatei und das Werkzeug-Skript von Claude Design sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`, Leistungen, Fragen und Themen sind ausgeschrieben. Hover gibt es genau dort, wo der Entwurf eine Hover-Angabe traegt oder wo seine globale Regel `a:hover { color: #5A4300 }` greift (Verweise ohne eigene Farbe). Verweise mit eigener Farbe (Knoepfe, Fuss, Sprungverweis) behalten sie beim Darueberfahren: Im Entwurf schlug ihre Inline-Farbe die globale Regel. Der Knopf im schmalen Hero hat deshalb wie dort kein Hover. 2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die Familien des Entwurfs, statische Schnitte, latin-Teilmenge mit demselben `unicode-range` wie bei Google: Barlow 400, 500, 600 und Barlow Condensed 600, 700, zusammen 111 728 B (Budget 120 KB). Der Entwurf bestellt bei Google zusaetzlich Barlow 700 und Barlow Condensed 500, setzt sie aber nirgends ein (kein Stil, kein , kein ). Diese beiden liegen nicht bei; alle sieben waeren 155 940 B und ueber dem Budget. Sichtbar aendert das nichts. Kein preconnect, kein Stylesheet von Google. Keine Kursive im Entwurf. 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 (ab 1080 px 140 statt 114 px), der Sprungverweis steht bei 34 statt 8 px, und #top sowie
halten 26 px, damit Logo und Sprungverweis wie im Entwurf ganz oben landen. 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, unveraendert (keines breiter als 1920 px; Titelbild 46 730 B, Budget 250 KB). Genau ein Bild vorgeladen, das Titelbild (V18), wie im Entwurf, hier zusaetzlich mit fetchpriority="high". og:image zeigt auf img/hero.webp. Beide Logos tragen zusaetzlich `decoding="async"` wie in kiosk-wolff. 6. EIN HERO STATT ZWEI (Entscheidung 1, V20). Der Entwurf zeichnet per Skript zwei Fassungen, jede mit eigener

, eigenem Bild und eigener Vorzeile ("Elektrotechnik in Frankfurt am Main" breit, "Elektrotechnik · Frankfurt" schmal). Doppelt staenden h1, id, Kopfbild und Kopf-Markierungen auf der Seite. Hier steht eine Fassung, umgeschaltet per Media Query mit derselben Bedingung wie im Skript. Reihenfolge Text vor Bild wie in der schmalen Fassung; in der breiten liegen Bild und Schleier absolut darunter und der Text mit z-index 1 darueber. Beide Vorzeilen-Texte stehen in der markierten Zeile, sichtbar ist je Fassung einer; setzt die persoenliche Vorschau ihren Text, gilt er bei jeder Breite. Der gelbe Strich steht ausserhalb und bleibt. 7. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf mit Zustand ein
/ an der Stelle des Knopfs in der Zeile; "aufgeklappt" meldet der Browser selbst, der Text wechselt per CSS von "Menue" auf "Schliessen" wie `menuLabel`. Im Entwurf waechst die Kopfleiste um die Liste. Hier liegt die Liste absolut direkt unter der Zeile und traegt selbst Grund, Unschaerfe und Unterkante der Leiste (die Unterkante folgt `.is-gescrollt`): dasselbe Bild, dieselben Masse. Damit die Unschaerfe unter der Liste wirkt, liegen Grund, Unschaerfe und Unterkante der Leiste selbst auf `.kopf::before` statt auf
. Der Knopf steht in derselben Flex-Zeile wie im Entwurf; bei 360 px laeuft "Schliessen" deshalb wie dort bis 6 px ueber den rechten Rand (der Text bleibt ganz sichtbar, die Seite laeuft nicht ueber). Nach einem Sprung und beim Wechsel auf 1080 px und breiter klappt js/seite.js das Menue zu (`closeMenu`, `onMq`); der Anruf-Verweis klappt wie im Entwurf nicht zu. Ohne Skript bleibt das Menue offen, bis man "Schliessen" drueckt. 8. LINIE UNTER DER KOPFLEISTE PER WAECHTER (V7). Der Entwurf liest `window.scrollY > 20`. js/seite.js beobachtet stattdessen einen leeren, 20 px hohen Waechter am Seitenanfang (IntersectionObserver) und setzt `.is-gescrollt`; nichts liest die Scroll-Position. Ohne Skript bleibt die Unterkante durchsichtig, wie im Entwurf am Seitenanfang. 9. THEMENWAHL ALS RADIOS (V8). Statt Knoepfen mit `aria-pressed`, die das Skript an- und abwaehlt, sechs Radios mit `:checked`, ohne Skript. Genau eins waehlbar wie im Entwurf, anfangs keins; Abwaehlen per zweitem Klick entfaellt. Das Feld ist unsichtbar, aber fokussierbar; den Fokusring des Entwurfs (mit seiner 2-px-Rundung) traegt die Beschriftung. 10. FORMULAR SENDET NICHTS (V12). Pruefung, vier Fehlermeldungen, Statuszeile, `aria-invalid` und `aria-describedby` (zeigten auf diese Meldungen) sind weg; der Knopf ist type="button", das Formular hat kein action, nichts faengt ein Absenden ab. `novalidate` und `required` bleiben. Die leere Statuszeile hielt im Entwurf zwischen Knopf und "* Pflichtfeld" einen zweiten Abstand von 20 px; den haelt jetzt ein Rand unter dem Knopf, damit der Kasten gleich hoch bleibt. Mit der Logik faellt auch der ehrliche Satz weg, den der Entwurf nach dem Absenden zeigte (Versand noch nicht eingerichtet). 11. FOKUSRING AUF DUNKLEM GRUND (V9, Nicht-Text). Der Ring des Entwurfs (#15181B) ist in der Infoleiste, am Ablauf-Knopf und im Fuss unsichtbar (1,00 : 1). Dort ist er --grund #F5F4F0 (16,19 : 1). 12. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; die Browser zeigen ihn hellgrau, je nach Browser bis hinunter auf etwa 2,4 : 1. Hier --leise #4B5055, deckend, die Farbe der kleinen Bezeichnungen des Entwurfs: 8,15 : 1 auf #FFFFFF. 13. WEICHE TRENNSTELLEN IN DER ARBEITSWEISE-LISTE (V5). Bei 360 px ist die Textspalte (minmax(0,1fr) neben 180 px) nur 124 px breit, und fuenf Woerter sind laenger (132-149 px): Die ganze Seite lief dort 5 px waagerecht ueber, bei 375 px ragte der Text noch 10 px in den Rand. In genau diesen fuenf Woertern steht deshalb `­`. Die Trennstellen wirken nur unter 390 px; ab 390 px passt jedes Wort, `hyphens: none` schaltet sie ab, und der Text bricht genau wie im Entwurf (nachgemessen: dieselben Zeilen wie ohne Trennstellen bei 390, 414, 600, 768, 932, 1080, 1280, 1440 und 1920 px). 14. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts ein. Die sechs Bereiche unter dem Hero tragen [data-reveal] und erscheinen einmal (400 ms, 12 px). Hero, Vertrauensleiste und Fuss nicht: das LCP-Element steht im ersten Frame. Ohne Skript und bei "Bewegung reduzieren" ist alles sofort da. 15. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Impressum und Datenschutzerklaerung im Fuss und in der Einwilligung 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): Hanauer Landstrasse 210, 60314 Frankfurt am Main, 069 12345 67890, elektriker@eineuroweb.de, Mo-Fr 7:00-16:30 Uhr. Benedikt hat sie geprueft. 17. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: und ein 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 --gelb ohne Buchstaben, damit die Umbrandung nichts Fremdes stehen laesst. 18. LOGO IM FUSS UNVERZERRT (Entscheidung 4). Im Entwurf steht das Logo (height 56 px, width auto) in einer Flex-Spalte ohne align-items. Die Spalte dehnt es deshalb auf die Breite der Adresszeile: gemessen 324 statt 240,8 px (bei 360 px 320 px), das Bild erscheint um gut ein Drittel in die Breite gezogen. `align-self: flex-start` haelt das Seitenverhaeltnis der Datei; Hoehe, Lage und Abstaende bleiben. 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 #15181B auf --grund #F5F4F0 ......... 16,19 : 1 OK --tinte auf --hero #EEEDE9 .......... 15,21 : 1 OK --tinte auf --sand #EBE9E3 .......... 14,68 : 1 OK --tinte auf --weiss #FFFFFF ......... 17,82 : 1 OK --tinte auf --gelb #F2B705 .......... 9,80 : 1 OK --vorspann #2A2F33 auf --hero ................. 11,54 : 1 OK --text #3B4045 auf --grund ................. 9,52 : 1 OK --text auf --sand .................. 8,63 : 1 OK --nummer #6B5200 auf --grund ................. 6,74 : 1 OK --leise #4B5055 auf --sand .................. 6,71 : 1 OK --leise auf --grund ................. 7,40 : 1 OK --leise auf --weiss (Platzhalter) ... 8,15 : 1 OK --link-hover #5A4300 auf --grund ................. 8,53 : 1 OK --link-hover auf --sand .................. 7,73 : 1 OK --link-hover auf --hero .................. 8,01 : 1 OK DUNKLE FLAECHEN, Grund --tinte #15181B (Infoleiste, Vertrauensleiste, Gewerbe-Karte, Ablauf, Fuss, Knoepfe, Sprungverweis): --hell #E9E7E1 ................................... 14,41 : 1 OK --gelb #F2B705 ................................... 9,80 : 1 OK --grund #F5F4F0 .................................. 16,19 : 1 OK --leise-dunkel #B9B6AE ........................... 8,80 : 1 OK --weiss #FFFFFF .................................. 17,82 : 1 OK --text-dunkel #D3D1CB ............................ 11,67 : 1 OK --text-dunkel-2 #C9C6BF .......................... 10,45 : 1 OK KOPFLEISTE UND AUFGEKLAPPTES MENUE. rgba(245,244,240,.97) laesst 3 % durch. Ueber dem hellsten Grund (#FFFFFF) wird es #F5F4F0, ueber dem dunkelsten (#15181B) #EEEDEA: --tinte dort 15,22, --link-hover 8,02 : 1 — OK, egal was darunter laeuft. TITELBILD, schmale Fassung: Der Text steht auf festem --hero ueber dem Bild, nicht darauf (15,21 und 11,54 : 1, siehe oben). TITELBILD, breite Fassung: dunkle Schrift auf dem Foto unter einem Schleier, der von 0,92 (links) ueber 0,70 (30 %) auf 0 (50 %) auslaeuft. Die h1 reicht bei grossen Fenstern bis ueber 45 % der Breite, also dahin, wo der Schleier kaum noch traegt. Deshalb gilt nur der Messwert am echten Foto: im Browser gerendert, die Schrift durchsichtig geschaltet, dann jeder Bildpunkt unter jeder Textzeile gegen die Schriftfarbe gerechnet; je Fenster der dunkelste Punkt: Fenster h1 --tinte Vorspann --vorspann Vorzeile Telefon 1100 x 700 10,35 7,52 11,91 11,32 1100 x 880 10,35 7,52 11,91 11,32 1280 x 800 11,42 8,74 12,61 12,86 1280 x 1024 11,42 8,74 12,61 12,86 1366 x 768 11,34 8,97 13,09 13,38 1440 x 900 11,03 8,59 12,88 13,14 1536 x 864 5,34 9,01 12,73 12,89 1680 x 1050 5,07 8,79 12,48 12,64 1920 x 1080 5,07 8,58 12,12 12,25 1920 x 1200 5,07 8,57 12,12 12,25 2560 x 1440 5,07 8,10 11,23 11,41 alles OK Bis 1440 px endet jede Zeile der h1 vor 43 % der Breite. Ab 1536 px reicht die Zeile "SICHER FLIESST." bis 45-50 % an den dunklen Tuerrahmen im Foto; dort liegt der dunkelste Punkt, 5,07 : 1 (bei 1680 px liegt nur 1 % der Punkte dieser Zeile unter 6,69 : 1). Das bleibt ueber 4,5, also kein Eingriff. Gemessen an dieser Seite; eine Nachstellung des Entwurfs mit denselben Schriften ergab dieselben Tiefstwerte. Der Knopf liegt auf eigenem Grund (--grund auf --tinte 16,19 : 1), nicht auf dem Foto. NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Rahmen der Eingabefelder #BEB9AE auf #FFFFFF 1,96, auf --grund 1,78 : 1 — unter den 3 : 1 fuer Bedienelemente; Entwurf so gelassen, die Beschriftung steht ueber jedem Feld. Zierlinien #D9D6CE (1,32), #C9C5BB (1,57) und Gelb auf Hell (1,65) tragen keine Information. ========================================================================= */ /* ── Schriften · selbst ausgeliefert, kein Abruf zu einem fremden Server ── */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/barlow-400-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: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/barlow-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; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-condensed-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/barlow-condensed-700-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: #F5F4F0; /* Seitengrund, Formular, Knopftext auf Dunkel */ --kopf-grund: rgba(245, 244, 240, 0.97); --tinte: #15181B; /* Text, Titel, Verweise, dunkle Flaechen, Knoepfe */ --hell: #E9E7E1; /* Text auf Dunkel: Infoleiste, Vertrauensleiste, Ablauf */ --gelb: #F2B705; /* Striche, Quadrate, Ablauf-Zahlen, Knopf beim Darueberfahren */ --link-hover: #5A4300; /* Verweise ohne eigene Farbe beim Darueberfahren */ --linie-kopf: #D9D6CE; /* Unterkante der Kopfleiste, Linien im Handy-Menue */ --hero: #EEEDE9; /* Grund und Schleierfarbe im Hero */ --vorspann: #2A2F33; /* Vorspann im Hero, Bildgrund der Gewerbe-Karte */ --text: #3B4045; /* Fliesstext */ --nummer: #6B5200; /* Leistungsnummern 01-06 */ --sand: #EBE9E3; /* Privat-Karte, Arbeitsweise, Kontakt */ --bildgrund: #DEDBD3; /* Grund unter den Bildern */ --leise: #4B5055; /* kleine Bezeichnungen, Platzhalter (Abweichung 12) */ --leise-dunkel: #B9B6AE; /* Vorzeile der Gewerbe-Karte */ --weiss: #FFFFFF; /* Titel auf Dunkel, Fuss-Verweise, Feldgrund */ --text-dunkel: #D3D1CB; /* Text der Gewerbe-Karte */ --text-dunkel-2: #C9C6BF;/* Ablauf-Text, Fuss */ --linie: #C9C5BB; /* Linien der Listen und Fragen */ --feld: #BEB9AE; /* Rahmen der Eingabefelder */ --schrift: Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif; --schrift-kurz: Barlow, sans-serif; --titelschrift: "Barlow Condensed", sans-serif; --breite: 1360px; --rand: clamp(20px, 4vw, 48px); --notice: 26px; /* feste Hinweisleiste aus A17 */ --kopfhoehe: 76px; /* Kopfleiste unter 1080 px, darueber 114 px */ } /* ── 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(--tinte); text-underline-offset: 3px; } a:hover { color: var(--link-hover); } :focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 2px; } summary::-webkit-details-marker { display: none; } details[open] .faq-plus { transform: rotate(45deg); } /* Sprungziele: Abstand fuer Vermerk-Leiste und Kopfleiste (Abweichung 3). */ #top, #inhalt { scroll-margin-top: var(--notice); } .skip { position: absolute; left: -9999px; top: calc(var(--notice) + 8px); z-index: 100; padding: 10px 16px; background: var(--tinte); color: var(--grund); } .skip:hover { color: var(--grund); } .skip:focus { left: 8px; } /* Abweichung 8: leerer Waechter, an dem js/seite.js das Scrollen erkennt. */ .kopf-waechter { position: absolute; top: 0; left: 0; width: 1px; height: 20px; pointer-events: none; } .rahmen { max-width: var(--breite); margin: 0 auto; } .vorzeile { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .vorzeile__strich { display: block; width: 28px; height: 4px; background: var(--gelb); } .titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: clamp(44px, 5vw, 84px); line-height: 0.94; text-transform: uppercase; } .titel--balance { text-wrap: balance; } .kopfblock { display: flex; flex-direction: column; gap: 22px; } /* Knoepfe. Ihre Farbe stand im Entwurf inline und schlug `a:hover`; deshalb bleibt sie beim Darueberfahren, wo der Entwurf nichts anderes sagt (Abweichung 1). */ .knopf { display: inline-flex; align-items: center; height: 60px; padding: 0 30px; background: var(--tinte); color: var(--grund); text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .knopf:hover { color: var(--grund); } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ .kopf { position: fixed; top: var(--notice); left: 0; right: 0; z-index: 50; } /* Grund, Unschaerfe und Unterkante der Kopfleiste, mit den Werten des Entwurfs, auf einer eigenen Flaeche statt an der Leiste selbst: Traegt ein Element `backdrop-filter`, wirkt die Unschaerfe seiner Kinder nicht mehr, und hinter der aufgeklappten Liste (Abweichung 7) schiene die Seite scharf durch. 1 px nach unten fuer die Unterkante, wie dort. */ .kopf::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: var(--kopf-grund); border-bottom: 1px solid transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Abweichung 8: setzt js/seite.js nach mehr als 20 px Scrollen. */ .kopf.is-gescrollt::before { border-bottom-color: var(--linie-kopf); } .infoleiste { display: none; background: var(--tinte); color: var(--hell); } .infoleiste__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 14px; } .infoleiste__kontakt { display: flex; gap: 28px; } .infoleiste__link { color: var(--hell); text-decoration: none; } .infoleiste__link:hover { color: var(--gelb); } .kopf__zeile { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .kopf__marke { display: flex; align-items: center; } .kopf__logo { display: block; height: 44px; width: auto; } .kopf__nav { display: none; align-items: center; gap: 32px; } /* Farbe beim Darueberfahren kommt aus `a:hover`, wie im Entwurf. */ .kopf__link { text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .kopf__link:hover { text-decoration: underline; } .kopf__knopf { height: 48px; padding: 0 24px; font-size: 15px; } .kopf__knopf:hover { background: var(--gelb); color: var(--tinte); } /* Handy-Menue:
statt Knopf mit Zustand (Abweichung 7). Der Knopf steht wie im Entwurf in der Zeile; die Liste liegt direkt darunter. */ .menue__knopf { display: flex; align-items: center; height: 46px; padding: 0 18px; border: 1px solid var(--tinte); background: transparent; color: var(--tinte); font: 600 15px var(--schrift-kurz); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; list-style: none; } .menue[open] .menue__zu, .menue:not([open]) .menue__auf { display: none; } /* Bezug ist die feste Kopfleiste: `top: 100%` legt die Liste genau auf ihre Unterkante, also direkt unter die 76-px-Zeile, ueber die volle Breite. Im Entwurf waechst die Kopfleiste um die Liste; hier traegt die Liste deshalb selbst Grund, Unschaerfe und die Unterkante der Leiste. */ .menue__liste { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 8px var(--rand) 24px; border-top: 1px solid var(--linie-kopf); border-bottom: 1px solid transparent; background: var(--kopf-grund); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .kopf.is-gescrollt .menue__liste { border-bottom-color: var(--linie-kopf); } .menue__link { padding: 14px 0; border-bottom: 1px solid var(--linie-kopf); text-decoration: none; font-family: var(--titelschrift); font-size: 24px; font-weight: 600; text-transform: uppercase; } .menue__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .menue__anrufen, .menue__anfragen { display: flex; align-items: center; justify-content: center; height: 54px; text-decoration: none; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .menue__anrufen { border: 1px solid var(--tinte); } .menue__anfragen, .menue__anfragen:hover { background: var(--tinte); color: var(--grund); } /* ── Hero · Ausgang ist die schmale Fassung ──────────────────────────────── */ .hero { position: relative; background: var(--hero); overflow: hidden; } .hero__inhalt { padding: 112px clamp(20px, 6vw, 56px) 36px; } .hero__block { display: flex; flex-direction: column; gap: 22px; } .hero__zeile { font-size: 13px; } .hero__breit { display: none; } .hero__titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: clamp(46px, 12vw, 88px); line-height: 0.94; text-transform: uppercase; text-wrap: balance; } .hero__vorspann { margin: 0; font-size: 17px; line-height: 1.6; color: var(--vorspann); text-wrap: pretty; } .hero__knoepfe { display: flex; flex-direction: column; gap: 14px; } .hero__knopf { display: flex; justify-content: center; height: 58px; padding: 0; } .hero__tel { align-self: center; font-size: 18px; font-weight: 600; } .hero__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 80% 30%; } .hero__schleier { display: none; } .vertrauen { position: relative; background: var(--tinte); color: var(--hell); } .vertrauen__liste { list-style: none; margin: 0 auto; max-width: var(--breite); padding: 0 var(--rand); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .vertrauen__punkt { display: flex; align-items: center; gap: 14px; padding: 22px 0; font-size: 16px; font-weight: 500; } .vertrauen__quadrat { flex: none; width: 10px; height: 10px; background: var(--gelb); } /* ── Abschnitte ──────────────────────────────────────────────────────────── */ .abschnitt { padding: clamp(80px, 10vw, 152px) var(--rand); scroll-margin-top: calc(var(--notice) + var(--kopfhoehe)); } /* ── Leistungen ──────────────────────────────────────────────────────────── */ .leistungen__rahmen { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px); } .leistungen__kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px 72px; align-items: end; } .leistungen__intro { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text); max-width: 540px; text-wrap: pretty; } .leistungen__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 56px; } .leistung { border-top: 2px solid var(--tinte); padding: 28px 0 40px; display: flex; flex-direction: column; gap: 12px; } .leistung__nr { font-family: var(--titelschrift); font-size: 18px; font-weight: 600; color: var(--nummer); } .leistung__titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: 32px; line-height: 1; text-transform: uppercase; } .leistung__text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text); text-wrap: pretty; } /* ── Privat & Gewerbe ────────────────────────────────────────────────────── */ .zielgruppen { padding: 0 var(--rand) clamp(80px, 10vw, 152px); } /* Die Zwischenueberschrift ist wie im Entwurf nur fuer Vorleseprogramme. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .zielgruppen__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(16px, 2vw, 28px); } .karte { display: flex; flex-direction: column; background: var(--sand); } .karte--dunkel { background: var(--tinte); color: var(--hell); } .karte__bild { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bildgrund); } .karte--dunkel .karte__bild { background: var(--vorspann); } .karte__text { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 16px; } .karte__vorzeile { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--leise); } .karte--dunkel .karte__vorzeile { color: var(--leise-dunkel); } .karte__titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1; text-transform: uppercase; } .karte--dunkel .karte__titel { color: var(--weiss); } .karte__absatz { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text); } .karte--dunkel .karte__absatz { color: var(--text-dunkel); } /* ── Arbeitsweise ────────────────────────────────────────────────────────── */ .qualitaet { background: var(--sand); } .qualitaet__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; } .qualitaet__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); } .qualitaet__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bildgrund); } .qualitaet__bild--versetzt { margin-top: clamp(32px, 5vw, 72px); } .qualitaet__text { display: flex; flex-direction: column; gap: 28px; } .qualitaet__intro { margin: 0; font-size: 18px; line-height: 1.7; color: var(--text); max-width: 540px; text-wrap: pretty; } .liste { margin: 0; display: flex; flex-direction: column; } .liste__zeile { border-top: 1px solid var(--linie); padding: 18px 0; display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 16px; } .liste__zeile:last-child { border-bottom: 1px solid var(--linie); } .liste__begriff { font-family: var(--titelschrift); font-size: 22px; font-weight: 700; text-transform: uppercase; } .liste__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); } /* ── Ablauf ──────────────────────────────────────────────────────────────── */ .ablauf { background: var(--tinte); color: var(--hell); } .ablauf__rahmen { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px); } .ablauf__titel { color: var(--weiss); } .schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 48px; } .schritt { border-top: 2px solid var(--gelb); padding-top: 28px; display: flex; flex-direction: column; gap: 14px; } .schritt__nr { font-family: var(--titelschrift); font-weight: 700; font-size: 72px; line-height: 0.8; color: var(--gelb); } .schritt__titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: 30px; text-transform: uppercase; color: var(--weiss); } .schritt__text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-dunkel-2); } .ablauf__knopf { align-self: flex-start; background: var(--gelb); color: var(--tinte); } .ablauf__knopf:hover { background: var(--weiss); color: var(--tinte); } /* ── Fragen ──────────────────────────────────────────────────────────────── */ .faq { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); } .faq__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px clamp(48px, 7vw, 120px); align-items: start; } .faq__intro { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text); max-width: 420px; } .fragen { display: flex; flex-direction: column; min-width: 0; } .frage { border-top: 1px solid var(--linie); } .frage__kopf { 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: 30px; font-weight: 400; line-height: 1; transition: transform .2s ease; } .frage__antwort { margin: 0; padding: 0 48px 24px 0; font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; } .fragen__ende { border-top: 1px solid var(--linie); } /* ── Kontakt ─────────────────────────────────────────────────────────────── */ .kontakt { background: var(--sand); } .kontakt__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px clamp(48px, 7vw, 120px); align-items: start; } .kontakt__links { display: flex; flex-direction: column; gap: 32px; } .kontakt__titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: clamp(48px, 5.6vw, 96px); line-height: 0.92; text-transform: uppercase; text-wrap: balance; } .kontakt__intro { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text); max-width: 480px; } .daten { margin: 0; display: flex; flex-direction: column; } .daten__zeile { border-top: 1px solid var(--linie); padding: 18px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; } .daten__zeile:last-child { border-bottom: 1px solid var(--linie); } .daten__begriff { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--leise); padding-top: 4px; } .daten__wert { margin: 0; font-size: 18px; } .daten__wert--adresse { line-height: 1.5; } .daten__wert--fett { font-weight: 600; } .daten__wert--mail { overflow-wrap: anywhere; } .adresse { font-style: normal; } .formular { background: var(--grund); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; border-top: 4px solid var(--gelb); } .formular__titel { margin: 0; font-family: var(--titelschrift); font-weight: 700; font-size: 34px; text-transform: uppercase; } .themen { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; } .themen__frage { font-size: 15px; font-weight: 600; margin-bottom: 10px; } .themen__wahl { display: flex; flex-wrap: wrap; gap: 10px; } /* Abweichung 9: das Radio ist unsichtbar, aber fokussierbar. */ .thema__eingabe { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .thema { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid var(--tinte); background: transparent; color: var(--tinte); font: 500 15px var(--schrift-kurz); cursor: pointer; } .thema__eingabe:checked + .thema { background: var(--tinte); color: var(--grund); } .thema__eingabe:focus-visible + .thema { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 2px; } .felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; } .feld { display: flex; flex-direction: column; gap: 8px; } .feld__name { font-size: 15px; font-weight: 600; } .feld__eingabe { height: 52px; padding: 0 14px; border: 1px solid var(--feld); border-radius: 0; background: var(--weiss); color: var(--tinte); font: 400 16px var(--schrift-kurz); } .feld__text { padding: 12px 14px; border: 1px solid var(--feld); border-radius: 0; background: var(--weiss); color: var(--tinte); font: 400 16px/1.6 var(--schrift-kurz); resize: vertical; } /* Die Rundung 0 stand im Entwurf inline und schlug die 2 px des Fokusrings. */ .feld__eingabe:focus-visible, .feld__text:focus-visible { border-radius: 0; } /* Abweichung 12 */ .feld__text::placeholder { color: var(--leise); opacity: 1; } .einwilligung { display: flex; flex-direction: column; gap: 8px; } .einwilligung__zeile { display: flex; gap: 12px; align-items: flex-start; } .einwilligung__kasten { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--tinte); } .einwilligung__text { font-size: 15px; line-height: 1.55; color: var(--text); } /* Abweichung 10: der Rand unten haelt den Abstand der leeren Statuszeile. */ .formular__knopf { height: 60px; margin-bottom: 20px; border: 0; background: var(--tinte); color: var(--grund); font: 600 16px var(--schrift-kurz); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .formular__knopf:hover { background: var(--gelb); color: var(--tinte); } .formular__hinweis { margin: 0; font-size: 13px; color: var(--leise); } /* ── Fuss ────────────────────────────────────────────────────────────────── */ .fuss { background: var(--tinte); color: var(--text-dunkel-2); padding: 56px var(--rand) 40px; } .fuss__rahmen { max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; } .fuss__marke { display: flex; flex-direction: column; gap: 14px; } /* Abweichung 18: ohne align-self zoege die Spalte das Logo auf die Breite der Adresszeile und verzerrte es. */ .fuss__logo { display: block; align-self: flex-start; height: 56px; width: auto; max-width: 100%; } .fuss__adresse { font-size: 15px; } .fuss__nav { display: flex; flex-wrap: wrap; gap: 12px 32px; } .fuss__link, .fuss__link:hover { color: var(--weiss); } .fuss__link { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* Abweichung 11: auf --tinte waere der Ring des Entwurfs unsichtbar. */ .infoleiste :focus-visible, .ablauf :focus-visible, .fuss :focus-visible { outline-color: var(--grund); } /* ── Rechtlicher Hinweis am Seitenende (V17) ─────────────────────────────── */ .rechtliches { max-width: var(--breite); margin: 0 auto; padding: 28px var(--rand) 40px; font-size: 14px; line-height: 1.7; color: var(--text); background: var(--grund); scroll-margin-top: calc(var(--notice) + var(--kopfhoehe)); } .rechtliches h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--tinte); } .rechtliches p { margin: 0; max-width: 64ch; } /* ── Breiten · dieselben Grenzen wie im Skript des Entwurfs ──────────────── */ /* Abweichung 13: Ab 390 px passt jedes Wort der Arbeitsweise-Liste in seine Spalte. Dort gelten die weichen Trennstellen nicht, und der Text bricht genau wie im Entwurf. */ @media (min-width: 390px) { .liste__text { -webkit-hyphens: none; hyphens: none; } } /* `wide` im Entwurf: matchMedia('(min-width: 1080px)') */ @media (min-width: 1080px) { :root { --kopfhoehe: 114px; } .infoleiste { display: block; } .kopf__nav { display: flex; } .menue { display: none; } .hero__inhalt { padding-top: 150px; } } /* `heroWide` im Entwurf: matchMedia('(min-width: 1100px) and (min-aspect-ratio: 5/4)') — breite Hero-Fassung (Abweichung 6). */ @media (min-width: 1100px) and (min-aspect-ratio: 5/4) { .hero__buehne { position: relative; min-height: clamp(640px, 52vw, 92svh); display: flex; align-items: center; } .hero__inhalt { position: relative; z-index: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 170px var(--rand) 64px; } .hero__block { max-width: min(640px, 46vw); gap: 28px; } .hero__zeile { font-size: 14px; } .hero__breit { display: inline; } .hero__schmal { display: none; } .hero__titel { font-size: clamp(60px, 6.4vw, 112px); line-height: 0.92; letter-spacing: -0.005em; } .hero__vorspann { max-width: 500px; font-size: clamp(18px, 1.35vw, 20px); } .hero__knoepfe { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; } .hero__knopf { display: inline-flex; justify-content: normal; height: 60px; padding: 0 30px; } .hero__knopf:hover { background: var(--gelb); color: var(--tinte); } .hero__tel { align-self: auto; } .hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 70% 35%; } .hero__schleier { display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238, 237, 233, 0.92) 0%, rgba(238, 237, 233, 0.7) 30%, rgba(238, 237, 233, 0) 50%); } } /* ── Einblenden: genau ein Effekt je Abschnitt (Abweichung 14) ───────────── */ /* 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; } }