/* ========================================================================== GLANZWERK GEBAEUDEREINIGUNG — Unterhaltsreinigung, Glas und Fassade Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt, Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler, kein `background-attachment: fixed`. Herkunft -------- Uebersetzt aus dem Claude-Design-Entwurf "Glanzwerk Gebaeudereinigung.dc.html" nach `docs/regeln/vorlagen.md`. Der Entwurf laedt Montserrat und Open Sans von `fonts.googleapis.com` und acht Fotos von `images.unsplash.com`; dazu `style-hover` an ueber vierzig Knoten, `style-focus` an sechs Formularfeldern, ein `` um den Cookie-Hinweis, vier `{{ stat* }}`-Platzhalter, `onClick="{{ submit }}"` und eine `DCLogic`-Klasse mit eigenem Zustand — nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung (V1). Gebaut wird nach Benedikts Entscheidung vom 20.08.2026 nur die Starter-Fassung. Der Entwurf sah an genau einer Stelle scroll-gebundene Bewegung vor: sein Kennzahlenband trug `background: ... center / cover fixed no-repeat`. Das faellt fuer die Basis-Stufe ERSATZLOS weg und wird nicht abgeschwaecht (V7): das Band ist hier ein Standbild. Abweichungen vom Entwurf, jede mit Grund ---------------------------------------- 1. Die Schriften sind dieselben wie im Entwurf (Montserrat, Open Sans), aber selbst gehostet aus `_shared/reinigung/fonts/` (V3, V4). Keine Ersetzung noetig — beide liegen seit `autohaus` im Bestand. Die Dateien sind byteidentisch (md5 `311d352d…` und `dcf31ebe…`) und wurden KOPIERT, nicht verlinkt (V2). 2. Das helle Gruen des Entwurfs (#7ab929) traegt in dieser Datei KEINEN Text auf hellem Grund mehr und liegt unter keinem. Weiss auf #7ab929 sind 2,39:1 und #7ab929 auf Weiss ebenfalls 2,39:1 — beides faellt deutlich durch, und der Entwurf benutzt genau diese zwei Kombinationen fuer jeden Knopf, jede Kleinzeile ueber einer Ueberschrift, jedes "Mehr erfahren" und das ganze gruene Aktionsband. Statt das Gruen zu verlieren, ist es auf FLAECHE und STRICH beschraenkt: Rauten, Balken, Unterkanten, Randstreifen. Text steht auf und in --green-dk (5,53:1). Das ist die groesste sichtbare Abweichung von der Anmutung des Entwurfs; sie erhaelt sein Kennzeichen, statt es abzudunkeln. 3. Der Hero-Schleier des Entwurfs ist ein WAAGERECHTER Verlauf von 92 % auf 35 % Deckung. Auf Handybreite laeuft der Textblock ueber die ganze Breite und damit auch ueber das helle Ende. Hier deckt der Schleier ueberall gleich (90 %). Nachgerechnet unten. 4. Der `gw-fade`-Keyframe am Hero-Textblock ist weg: das LCP-Element wird nicht animiert (Qualitaetsuntergrenze in `docs/VORLAGEN-STUFEN.md`). 5. Das Kennzahlenband ist ein Standbild geworden (V7, siehe oben). Seine VIER ERFUNDENEN KENNZAHLEN sind weg (V11): "35 Jahre Erfahrung", "1.400 Betreute Objekte", "180 Mitarbeiter" und "9,4 Kundenbindung Ø Jahre" — die letzte sogar mit Nachkommastelle. Eine Zahl, die niemand gezaehlt hat, steht auf keiner unserer Seiten, auch nicht als Beispiel. An ihre Stelle sind vier Tatsachen aus dem Betrieb getreten, in derselben Anzahl und an derselben Stelle. Aus demselben Grund heisst die Hero-Ueberschrift nicht mehr "auf die sich 1.400 Objekte taeglich verlassen". 6. Der Cookie-Hinweis ist ersatzlos weg (V12). Seine beiden Knoepfe ("Nur notwendige", "Alle akzeptieren") riefen dieselbe Funktion auf und schlossen nur das Fenster; die Seite laedt ohnehin nichts von Dritten. Der echte kommt aus dem Zusatz `cookie-pro`. 7. Die Karten-Attrappe ist weg (V12). Der Entwurf stellte einen grauen Kasten mit der Aufschrift "[ KARTE ] Google-Maps-Einbindung laedt erst nach Cookie-Zustimmung" hin: ein Markenname in einer Attrappe, die nie etwas nachgeladen haette. Eine echte Einbindung kommt ebenfalls nicht in Frage — sie gibt die Adresse des Besuchers an einen Dritten weiter, bevor irgendjemand zugestimmt hat (V3). An der Stelle steht die gezeichnete Umgebungskarte aus `_shared/arztpraxis`, umbeschriftet. 8. `style-hover` an ueber vierzig Knoten und `style-focus` an sechs Formularfeldern sind echtes `:hover` und `:focus-visible` in dieser Datei; die Inline-`style` an jedem einzelnen Knoten sind Klassen und Tokens in `:root` (V6). 9. ALLGEMEIN BESCHRIEBEN statt beim Namen genannt (V11, Satz 2: "Wo der Entwurf eine Organisation beim Namen nennt, wird sie allgemein beschrieben"). Der Hinweis auf Eintragung und Mitgliedschaft BLEIBT stehen — er gehoert in dieser Branche zur Sache und ist die Stelle, an der der Kunde spaeter seine eigene eintraegt: "Mitglied der Gebaeudereiniger-Innung Koeln" -> "Mitglied in der Innung des Gebaeudereiniger-Handwerks" "Qualitaetskontrollen nach DIN 13549" -> "Qualitaetskontrollen nach dem in der Branche ueblichen Bewertungsverfahren fuer Reinigungsqualitaet" "Meisterbetrieb" als Ueberschrift -> "Handwerksrolle und Innung"; die Meisterin steht als Person im Abschnitt "Ueber uns". Kein Zeichen, kein Siegel, kein Logo dazu — beschrieben, nicht bebildert. Jede dieser Stellen traegt im Markup ``. ABWEICHUNG VON `_shared/reinigung/README.md`: dort steht, diese drei Angaben wuerden "gestrichen". Gestrichen ist hier nur der Ortsbezug und die Normnummer, nicht die Aussage. Grund: V11 verlangt "allgemein beschreiben", nicht "loeschen", und eine ausgelieferte Kundenseite braucht diese Stelle — sonst fehlt dem Kunden das Feld, in das seine echte Mitgliedschaft gehoert. 10. WEG, weil Geldbetrag: "Betriebshaftpflicht ueber 5 Mio. €". Genannt ist der Mechanismus, nicht die Zahl — eine Deckungssumme in einer Vorlage ist bei der naechsten Vertragsaenderung falsch. 11. WEG, weil Verweis ins Leere (V17): "Impressum", "Datenschutz" und "AGB" zeigten auf `#impressum`, `#datenschutz` und `#agb` — drei Sprungziele, die es auf der Seite nicht gab. Sie zeigen jetzt auf den Abschnitt `#rechtliches` am Seitenende. "Stellenangebote" im Fuss zeigte auf `#kontakt` und versprach damit eine Seite, die es nicht gibt; der Punkt ist ersatzlos weg. 12. Anschrift, Telefon und E-Mail sind erkennbar erfunden (V10, Benedikts Vorgabe vom 20.08.2026): Musterstrasse 214, 12345 Musterstadt, 0123 456789, `info@glanzwerk.example`. Der Entwurf nannte eine echte Anschrift in Koeln-Ehrenfeld, eine erreichbare Rufnummer mit Durchwahl, eine Faxnummer und eine erreichbare Domain. Koeln, Bonn, Leverkusen und "Rheinland" sind durchgaengig Musterstadt und Umgebung; die Faxnummer faellt ersatzlos weg. Der Firmenname "Glanzwerk Rheinland Gebaeudereinigung GmbH" ist "Glanzwerk Gebaeudereinigung" geworden — eine Rechtsform in einer Vorlage behauptet einen Handelsregistereintrag. 13. Die Jahreszahl im Fuss war 2022 und ist 2026. "seit 1987" bleibt stehen: ein Gruendungsjahr altert nicht, eine Jahres-Differenz schon. Aus "3. Generation" ist "zweite Generation" geworden — 1987 bis heute traegt keine dritte. 14. Die drei Kundenstimmen BLEIBEN — ausdrueckliche Entscheidung von Benedikt vom 20.08.2026. Die Namen bleiben, der Arbeitgeber im Zitat ist allgemein beschrieben ("Ingenieurbuero" statt "Ingenieurbuero Koeln", "Gemeinschaftspraxis in Musterstadt" statt "Bonn-Beuel", "Hausverwaltung" statt "Kollmann & Partner"). "Wir verwalten 40 Objekte im Rheinland" ist "Wohnanlagen in der ganzen Umgebung" geworden: eine gezaehlte Zahl in einem erfundenen Zitat ist dieselbe Behauptung wie eine Kennzahl. KEIN Portraitfoto — der Entwurf setzte hier Namenskuerzel in einem Kreis, und dabei bleibt es. Jede Stimme traegt im Markup ``. 15. Das Formular hat kein `action` und einen `type="button"`, im Markup steht der Grund (V12). Der Entwurf haengte am Knopf ein `onClick="{{ submit }}"`, das nur einen Dankestext in den Zustand schrieb, und darunter ein `{{ sent }}` — eine Rueckmeldung ohne Empfaenger. 16. Der Entwurf bringt UEBERHAUPT KEINE Symbole mit: seine Kopfleiste setzt die Woerter "TEL" und "MAIL" in Gruen, sein Vorteilsband und sein Ueber-uns-Teil setzen gruene Rauten und ein Schriftzeichen "✓", seine Leistungskarten setzen "Mehr erfahren →". WEDER "✓" (U+2713) NOCH "→" (U+2192) NOCH "↑" (U+2191, Knopf nach oben) sind in beiden Schriftdateien vorhanden — gegen die cmap-Tabellen geprueft, nicht angenommen: U+2192 und U+2713 fuehrt keine der beiden, U+2191 fuehrt nur Montserrat. Der Browser holt sie dann aus einer Ersatzschrift oder zeigt ein Kaestchen. Alle drei sind gezeichnete Strichsymbole (V3, inline, kein Abruf, kein ``, kein Sprite): `check-circle`, `arrow-right` und `arrow-up` aus `_shared/reinigung`. Dazu `mop`, `window` und `bucket` (dort neu gezeichnet) auf den ersten drei Leistungskarten, `sofa` aus `_shared/ferien` (Nr. 4) und `toolbox` aus `_shared/handwerk` (Nr. 12) auf den beiden uebrigen, `building` (`_shared/handwerk` Nr. 47), `stethoscope` (`_shared/arztpraxis` Nr. 1), `warehouse` (`_shared/transport` Nr. 7) und `apartment-building` (`_shared/immobilien` Nr. 2) auf den vier Branchenkarten. Alles kopiert, nicht verlinkt (V2). 17. NEU hinzugefuegt: eine Leiste am unteren Bildrand (Anrufen, Angebot) fuer Handybreiten und ein Sprunglink zum Inhalt. Der Entwurf ist auf feste Breite gezeichnet und laesst Handybesucher ohne Menue und ohne Anrufknopf stehen (V5). Farblogik --------- Der Entwurf hat ein dunkles Blau (#0b3c66) fuer Kopf, Fuss und jede Ueberschrift, ein helles Gruen (#7ab929) als Kennfarbe, Weiss als Grund und #f5f7f9 fuer ruhige Abschnitte. Was jede Farbe darf: --green #7ab929 nur FLAECHE und STRICH auf HELLEM Grund. Nie Text darauf, nie Text darin. Rauten, Balken, Unterkanten, Randstreifen. Als TEXT nur auf --navy erlaubt (4,75:1) — dort steht aber --green-lt. --green-dk #4a7411 TEXT auf hellem Grund (Kleinzeilen, "Dazu anfragen") UND Flaeche mit weissem Text (Knopf, Aktionsband). --green-dk2 #3c5f0e Hover zu beidem. --green-lt #9fd44f Kleinzeilen und Zahlen auf DUNKLEM Grund. Nur auf --navy und auf den zwei Fotobaendern, NIE auf hell. --navy #0b3c66 Ueberschriften auf hell UND Flaeche mit weissem Text (Kopfleiste, dunkle Karte, Fuss, Namenskuerzel). --navy-dk #082e4f Hover zu beidem. --ink #3f4a55 Fliesstext. --muted #5a6672 Kleintext auf hellem Grund. Auf --ph-bg waeren es 4,60:1 (bestanden) — dort steht seit dem Einbau der Fotos ohnehin kein Text mehr. --on-dark #cfe0ee Lesetext auf allen dunklen Flaechen. --on-dark-soft #b9d4e8 Kleinschrift im Fuss. --on-green #e4f2cf Unterzeile im Aktionsband, nur auf --green-dk. Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #3f4a55 auf --paper #ffffff 9,04:1 --ink #3f4a55 auf --wash #f5f7f9 8,42:1 --ink #3f4a55 auf --tint #eef2f5 8,03:1 --ink #3f4a55 auf --field #fbfcfd 8,80:1 (Formularfeld) --ink #3f4a55 auf --ph-bg #dde5ea 7,09:1 (Grund unter einem ladenden Foto) --muted #5a6672 auf --paper 5,87:1 --muted #5a6672 auf --wash 5,46:1 --muted #5a6672 auf --tint 5,21:1 --muted #5a6672 auf --field 5,71:1 --navy #0b3c66 auf --paper 11,34:1 --navy #0b3c66 auf --wash 10,56:1 --navy #0b3c66 auf --tint 10,07:1 --navy #0b3c66 auf --field 11,04:1 --green-dk #4a7411 auf --paper 5,53:1 --green-dk #4a7411 auf --wash 5,15:1 --green-dk #4a7411 auf --tint 4,91:1 --green-dk #4a7411 auf --field 5,38:1 --green-dk2 #3c5f0e auf --paper 7,41:1 #ffffff auf --navy #0b3c66 11,34:1 #ffffff auf --navy-dk #082e4f 13,87:1 #ffffff auf --green-dk #4a7411 5,53:1 #ffffff auf --green-dk2 #3c5f0e 7,41:1 --on-dark #cfe0ee auf --navy 8,39:1 --on-dark-soft #b9d4e8 auf --navy 7,37:1 --on-green #e4f2cf auf --green-dk 4,71:1 --green-lt #9fd44f auf --navy 6,48:1 Die zwei Fotobaender (Hero, Objektband) — GARANTIE STATT SCHAETZUNG ------------------------------------------------------------------- An den beiden erzeugten Fotos nachzumessen genuegt nicht: Der Kunde tauscht sie auf seiner Seite gegen eigene aus, und der Text darueber bleibt stehen. Statt an einem einzelnen Bild zu messen, ist hier der SCHLECHTESTE FALL gerechnet: Ein Schleier mit Deckung a ueber einem beliebigen Bild kann hoechstens so hell werden wie derselbe Schleier ueber REINWEISS. Was gegen diesen Wert besteht, besteht ueber jedem denkbaren Foto — auch ueber einer ueberstrahlten Fensterfront, und genau die ist in dieser Branche das wahrscheinlichste Motiv. Schleierfarbe ist --navy #0b3c66. HERO (`img/hero.jpg`, Schleier 90 %, gleichmaessig) hellstmoeglicher Grund #235075: Weiss (h1, Knopfbeschriftung) 8,48:1 --on-dark (Vorspann) 6,28:1 --green-lt (das hervorgehobene Stueck der H1) 4,85:1 Der Entwurf legte hier einen WAAGERECHTEN Verlauf von 92 % auf 35 % Deckung. Am hellen Ende ergibt das ueber Reinweiss #a5b6c4: Weiss kaeme dort auf 2,20:1. Auf dem Handy laeuft der Textblock ueber die ganze Breite und damit auch ueber dieses Ende. Deshalb deckt der Schleier hier ueberall gleich. Die Auszeichnung im Hero-Titel ist --green-lt und NICHT --green (#7ab929): das haette auf demselben Grund nur 3,55:1. OBJEKTBAND (`img/objekt.jpg`, Schleier 92 %, gleichmaessig, STANDBILD) hellstmoeglicher Grund #1f4c72: Weiss (Ueberschrift, die vier Zeilen) 8,99:1 --on-dark (Erlaeuterung unter jeder Zeile) 6,66:1 --green-lt (Kleinzeile ueber der Ueberschrift) 5,14:1 Die Deckung steht hier auf 92 % statt 90 %, weil dieses Band die groesste zusammenhaengende Textflaeche auf einem Foto traegt: eine Ueberschrift und vier Bloecke aus je zwei Zeilen. DIES IST DIE STELLE MIT `background-attachment: fixed` IM ENTWURF. Hier steht `background-attachment: scroll` — das ist kein Vergessen, sondern V7. GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene) Die Beschriftungen stehen auf vier Gruenden, nicht nur auf --map-bg: --map-ink #525d63 auf --map-bg #eef2f3 6,00:1 --map-ink #525d63 auf --map-block #dfe6e7 5,35:1 --map-ink #525d63 auf --map-road #ffffff 6,76:1 --map-ink #525d63 auf den drei Schildchen (Nordpfeil, Massstab, Haltestelle; FEST --map-bg) 6,00:1 --map-bg #eef2f3 auf der Stadtbahn-Kachel (Flaeche --map-ink) 6,00:1 --navy #0b3c66 auf der Betriebsflaeche (--map-area #d3dfe6, fest hinterlegt) 8,35:1 Die Nadel ist --green #7ab929 und traegt keinen Text. --map-area ist FEST gesetzt und kein Schleier: die Flaeche liegt auf einem der grauen Bloecke, und ein durchscheinender Ton haette dort einen anderen Wert als ueber dem Kartengrund. Aus demselben Grund tragen Nordpfeil und Massstab hier KEIN `opacity` mehr. Der Baustein `_shared/arztpraxis/icons.svg.html` setzt an beiden Schildchen .9; sie liegen aber auf einem Hausblock, und damit haengt der Wert ihrer Beschriftung davon ab, welcher Block zufaellig darunter liegt (5,95:1 statt 6,00:1). Fest hinterlegt haengt er von nichts ab. Was ABSICHTLICH unter 4,5:1 liegt und deshalb NIE Text traegt und NIE Text ist: --green #7ab929 auf Weiss und Weiss auf --green, beide 2,39:1. Genau deshalb ist das helle Gruen hier auf Flaeche und Strich beschraenkt. Auf --navy sind es 4,75:1 — dort waere es zulaessig, steht aber trotzdem nicht, weil die Zeilen dort klein und gesperrt gesetzt sind; --green-lt traegt sie mit 6,48:1. Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen: #ffffff auf #7ab929 2,39:1 — Hero-Hauptknopf, Kopf-CTA, Knopf in der dunklen Karte, Absendeknopf, das Abzeichen "Seit 1987 im Rheinland", der Kasten "3. Generation", das gesamte gruene Aktionsband und die vier Haken-Kreise im Ueber-uns-Teil -> Flaeche --green-dk, weisser Text, 5,53:1 #7ab929 auf #ffffff 2,39:1 — jede Kleinzeile ueber einer Ueberschrift ("Unser Leistungsspektrum", "Branchen", "Referenzen", "Kontakt"), jedes "Mehr erfahren", jede der vier Kennzahlen -> --green-dk, 5,53:1 #eaf6d8 auf #7ab929 2,12:1 — Unterzeile im Aktionsband -> --on-green #e4f2cf auf --green-dk, 4,71:1 #6b7883 auf #dfe6ec ~3,3:1 — Aufschrift der Karten-Attrappe -> Karte ist ersetzt (V12) #4a5560 auf #ffffff 7,61:1 — Fliesstext, bestanden; laeuft trotzdem als --ink #3f4a55 (9,04:1), damit der 15-px-Text in den Karten Luft hat #a9c4d8 auf #0b3c66 6,25:1 — Fusstext, bestanden; laeuft als --on-dark-soft #b9d4e8, 7,37:1 #b9d4e8 auf #0b3c66 7,37:1 — Kopfleiste, bestanden, bleibt #c3d6e6 auf #0b3c66 7,60:1 — Text in der dunklen Karte, bestanden; laeuft als --on-dark #cfe0ee, 8,39:1 #46525e auf #ffffff 7,99:1 — die drei Zitate, bestanden; laeuft als --ink, 9,04:1 Aufbau der Datei ---------------- Mobil zuerst. Alle Media Queries sind min-width; die schmale Ansicht ist der Ausgangszustand, breitere Fenster bekommen Spalten dazu. Geprueft bei 360, 768 und 1280 Pixeln. DIE ACHT FOTOS SIND DA (`img/`, erzeugt nach `docs/vorlagen/bild-prompts-glanzwerk.md`). Sechs liegen als `` im Markup (`.card__ph`, `.about__ph`) und laden erst beim Heranscrollen. Hero und Objektband sind CSS-Hintergruende (`img/hero.jpg`, `img/objekt.jpg`), weil dort Text darueberliegt; ihre `background-color` in der Schleierfarbe bleibt stehen und traegt die Flaeche, solange das Foto laedt. Weil das Hero-Bild sonst erst mit dieser Datei entdeckt wuerde, laedt der Seitenkopf es vor — und genau EINES darf vorgeladen werden (V18); das Objektband steht weit unter der Falz. ========================================================================== */ /* ── Schriften (selbst gehostet, latin-Teilmenge, 86 276 B = 84,3 KB) ───── BEIDE Dateien sind variabel und liegen byteidentisch in `_shared/reinigung/fonts/`; kopiert, nicht verlinkt (V2). ACHTUNG, DIE FALLE DIESER DATEI: Die Montserrat-Datei heisst intern "Montserrat Thin". Ihre `fvar`-Achse laeuft 100–900, der Standardwert ist 100, und `OS/2 usWeightClass` steht ebenfalls auf 100. Wer sie einbindet, ohne die Gewichte ausdruecklich zu setzen, bekommt eine Seite in Haarstrich. Deshalb steht unten in JEDER Regel, die Montserrat benutzt, ein ausdrueckliches `font-weight` — auch an `strong`, `summary`, `label` und Knopfbeschriftungen, die ihr Gewicht sonst vom Browser bekommen. Deklariert wird jeweils nur der Bereich, der auch benutzt wird, nicht der volle Achsenbereich. Der Entwurf benutzt Montserrat in 600, 700 und 800 und Open Sans in 400, 600 und 700. Kursive gibt es zu keiner der beiden Dateien (`fsSelection` sagt in beiden "nicht kursiv", `fvar` fuehrt nur die Achse `wght`). `font-style: italic` erzeugt darauf eine schraeg gescherte Faelschung und kommt hier nirgends vor; die drei Kundenstimmen tragen die typografischen Anfuehrungszeichen im Text. Budget der Basis-Stufe: 120 KB. */ @font-face { font-family: "Montserrat"; src: url("../vendor/fonts/montserrat-var.woff2") format("woff2"); font-weight: 600 800; /* Datei traegt wght 100-900, Standard 100 (!) */ font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-var.woff2") format("woff2"); font-weight: 400 700; /* Datei traegt wght 300-800 */ font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Montserrat laeuft BREITER als die meisten Systemschriften. Faellt sie aus, wird eine Ueberschrift, die vorher in eine Zeile passte, nicht kuerzer, sondern kann umbrechen. Deshalb nirgends feste Hoehen fuer Titelzeilen und kein Layout, das auf genau zwei Zeilen gebaut ist. */ --font-title: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --green: #7ab929; /* nur Flaeche und Strich auf hell, NIE Text */ --green-dk: #4a7411; /* Text auf hell; Flaeche mit weissem Text */ --green-dk2: #3c5f0e; /* Hover zu beidem */ --green-lt: #9fd44f; /* Kleinzeilen auf dunklem Grund */ --navy: #0b3c66; --navy-dk: #082e4f; --ink: #3f4a55; --muted: #5a6672; --paper: #ffffff; --wash: #f5f7f9; --tint: #eef2f5; --field: #fbfcfd; --ph-bg: #dde5ea; /* Flaeche unter einem Foto, solange es laedt */ --line: #e6ebef; --line-2: #d5dde3; --veil: 11 60 102; /* --navy als Kanaele (Leerzeichen, damit rgb(var(--veil) / .9) gueltig bleibt) */ --on-dark: #cfe0ee; --on-dark-soft: #b9d4e8; --on-green: #e4f2cf; --map-bg: #eef2f3; --map-block: #dfe6e7; --map-road: #ffffff; --map-ink: #525d63; --map-frame: #cfd8d9; --map-area: #d3dfe6; --map-accent: var(--navy); --map-pin: var(--green); --focus: #0b3c66; --focus-halo: #ffffff; --radius: 3px; /* der Entwurf rundet fast nichts */ --wrap: 1170px; --pad: clamp(1rem, 4vw, 1.25rem); --notice: 26px; /* Hoehe der Demo-Hinweisleiste, fix im Markup */ --quickbar: 58px; /* Hoehe der Handy-Leiste am unteren Bildrand */ } /* ── Grundlagen ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Der Sticky-Header darf beim Springen nicht ueber der Ueberschrift stehen. Auf dem Handy ist er zweizeilig (Marke und Knopf oben, Menue darunter) und damit hoeher; ab 900 px steht alles in einer Zeile. */ scroll-padding-top: calc(var(--notice) + 9.5rem); } body { margin: 0; padding-top: var(--notice); padding-bottom: var(--quickbar); background: var(--paper); color: var(--ink); font: 400 1rem/1.7 var(--font-body); -webkit-text-size-adjust: 100%; overflow-x: hidden; } img, svg { max-width: 100%; } h1, h2, h3 { font-family: var(--font-title); color: var(--navy); line-height: 1.2; text-wrap: balance; margin: 0; } h1 { font-weight: 800; font-size: clamp(1.8rem, 5.4vw, 3.25rem); line-height: 1.12; } h2 { font-weight: 800; font-size: clamp(1.45rem, 3.4vw, 2.25rem); } h3 { font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.25rem); } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } strong { font-weight: 700; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--green-dk); text-decoration: underline; text-underline-offset: 2px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } .icon { width: 1.25rem; height: 1.25rem; flex: none; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Sprunglink und Fokus ───────────────────────────────────────────────── */ .skip { position: fixed; top: calc(var(--notice) + .5rem); left: 50%; z-index: 2147482000; transform: translate(-50%, -300%); background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius); font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .9rem; letter-spacing: .05em; } .skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); } /* ── Einblenden: genau ein Effekt pro Abschnitt ──────────────────────────── */ /* Der versteckte Ausgangszustand haengt an `.has-reveal` auf , und `js/reveal.js` ist es, das die Klasse setzt. Ohne Javascript wird also nie etwas versteckt (Qualitaetsuntergrenze, Punkt 3). */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); } .has-reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; } /* ── Knoepfe ────────────────────────────────────────────────────────────── */ /* Der Entwurf setzt weissen Text auf #7ab929 — 2,39:1. Statt das Gruen abzudunkeln und damit sein Kennzeichen zu verlieren, liegt der Knopf auf dem dunkleren Gruen (5,53:1); das helle bleibt als Fussleiste sichtbar. Diese Fussleiste ist der `box-shadow: 0 3px 0` des Entwurfs, nur in der hellen Farbe statt in einer noch dunkleren. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: 1.05rem 1.9rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; line-height: 1.3; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease, box-shadow 170ms ease; } .btn:hover { text-decoration: none; } .btn--green { background: var(--green-dk); border-color: var(--green-dk); color: #fff; box-shadow: inset 0 -3px 0 var(--green); } .btn--green:hover { background: var(--green-dk2); border-color: var(--green-dk2); color: #fff; } .btn--ghost { background: transparent; border-color: rgb(255 255 255 / .65); color: #fff; } .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); } .btn--white { background: #fff; border-color: #fff; color: var(--navy); font-size: 1rem; letter-spacing: .02em; text-transform: none; white-space: nowrap; } .btn--white:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .btn--block { width: 100%; } /* ── Kopfleiste ─────────────────────────────────────────────────────────── */ .topbar { background: var(--navy); color: var(--on-dark-soft); font-size: .82rem; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; padding-block: .55rem; } .topbar__item { display: inline-flex; align-items: center; gap: .45rem; } .topbar__item .icon { width: 1rem; height: 1rem; color: var(--green-lt); } .topbar a { color: var(--on-dark-soft); } .topbar a:hover { color: #fff; } .topbar__cta { margin-left: auto; color: #fff; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--green); padding-bottom: 1px; } .topbar__cta:hover { color: #fff; border-bottom-color: #fff; text-decoration: none; } /* Auf 360 px passen Telefon, E-Mail und Zeiten nicht nebeneinander. Der Entwurf laesst sie dort umbrechen und macht die Leiste vierzeilig hoch; hier bleiben Telefon und der Rueckruf-Verweis stehen, der Rest kommt ab 640 px dazu. Die E-Mail-Adresse steht ausserdem im Kontaktteil und im Fuss. */ .topbar__hide { display: none; } /* ── Seitenkopf ─────────────────────────────────────────────────────────── */ .header { position: sticky; top: var(--notice); z-index: 40; background: var(--paper); box-shadow: 0 2px 10px rgb(0 0 0 / .09); border-bottom: 3px solid var(--green); } .header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding-block: .75rem; } .brand { display: inline-flex; align-items: center; gap: .75rem; } .brand:hover { text-decoration: none; } /* Die gedrehte Raute des Entwurfs: ein Quadrat mit 45 Grad und dickem Rand. Rein dekorativ, traegt keinen Text — genau deshalb darf sie --green sein. */ .brand__mark { width: 38px; height: 38px; flex: none; background: var(--green); border: 5px solid var(--navy); transform: rotate(45deg); } .brand__mark--sm { width: 26px; height: 26px; border-width: 4px; border-color: #fff; } .brand__text { display: block; line-height: 1.1; } .brand__name { display: block; font-family: var(--font-title); font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--navy); } .brand__sub { display: block; margin-top: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--green-dk); } .nav { display: flex; flex-wrap: wrap; gap: .2rem 1.25rem; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; order: 3; width: 100%; border-top: 1px solid var(--line); padding-top: .6rem; } .nav a { color: var(--navy); padding: .35rem 0; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--green-dk); border-bottom-color: var(--green); text-decoration: none; } .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Standbild. Kein `fixed`, kein Parallax, kein [data-reveal] (V7 und Qualitaetsuntergrenze). Die `background-color` ist die Schleierfarbe: solange das Foto fehlt oder laedt, sieht der Kopf ruhig aus und nicht kaputt. */ .hero { position: relative; display: flex; align-items: center; min-height: 30rem; background-color: #235075; background-image: linear-gradient(rgb(var(--veil) / .9), rgb(var(--veil) / .9)), var(--ew-kopfbild, url("../img/hero.jpg")); background-position: center 40%; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; /* AUSDRUECKLICH: der Entwurf hat hier kein `fixed`, das Objektband schon (V7). */ color: #fff; } .hero__inner { padding-block: 3.5rem 4rem; } .hero__badge { display: inline-block; margin: 0 0 1.2rem; background: var(--green-dk); color: #fff; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding: .55rem 1rem; border-radius: 2px; } .hero h1 { color: #fff; max-width: 40ch; } .hero h1 span { color: var(--green-lt); } .hero__sub { margin: 1.25rem 0 0; max-width: 60ch; font-size: 1.05rem; line-height: 1.75; color: var(--on-dark); } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 0; } /* ── Vorteilsband ───────────────────────────────────────────────────────── */ .usp { display: grid; gap: 0; background: var(--paper); box-shadow: 0 8px 26px rgb(11 60 102 / .1); position: relative; z-index: 5; } .usp li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.6rem 1.4rem; border-bottom: 1px solid var(--line); } .usp li:last-child { border-bottom: 0; } .usp .icon { width: 1.6rem; height: 1.6rem; color: var(--green-dk); margin-top: .15rem; } .usp strong { display: block; margin-bottom: .3rem; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.02rem; color: var(--navy); } .usp li > span { font-size: .95rem; line-height: 1.6; } /* ── Abschnitte und Abschnittskoepfe ────────────────────────────────────── */ .sec { padding-block: clamp(3rem, 8vw, 5.5rem); } .sec--wash { background: var(--wash); } .sechead { margin-bottom: 2.5rem; } .sechead--center { text-align: center; max-width: 46rem; margin-inline: auto; } .eyebrow { margin: 0 0 .7rem; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-dk); } /* Der Balken unter der Ueberschrift ist der `70 × 3 px`-Strich des Entwurfs. Reine Flaeche, traegt keinen Text — deshalb darf er --green sein. */ .sechead h2::after, .split__text h2::after { content: ""; display: block; width: 70px; height: 3px; background: var(--green); margin-top: 1.2rem; } .sechead--center h2::after { margin-inline: auto; } .sechead__lead { margin: 1.3rem 0 0; font-size: 1rem; line-height: 1.75; } .sechead__aside { margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.75; max-width: 30rem; } .sechead--on-dark h2 { color: #fff; } .sechead--on-dark .eyebrow { color: var(--green-lt); } /* ── Leistungskarten ────────────────────────────────────────────────────── */ .cards { display: grid; gap: 1.5rem; } .card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); transition: box-shadow 200ms ease, transform 200ms ease; } .card:hover { box-shadow: 0 14px 34px rgb(11 60 102 / .14); transform: translateY(-4px); } /* Das Kartenfoto liegt als `` im Markup, nicht als Hintergrund: es hat einen alt-Text und laedt erst beim Heranscrollen (`loading="lazy"`). `aspect-ratio` haelt die Karte schon vor dem Laden auf ihrer Hoehe, die Fuellfarbe traegt die Flaeche solange. */ .card__ph { display: block; width: 100%; height: auto; min-height: 11rem; aspect-ratio: 4 / 3; object-fit: cover; background-color: var(--ph-bg); } .card__body { padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; } /* Das Symbol sitzt ueber der Ueberschrift, in einem Quadrat mit gruener Unterkante — dieselbe Formsprache wie die Branchenkarten des Entwurfs. */ .card__mark { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin: 0 0 .9rem; background: var(--tint); border-bottom: 3px solid var(--green); color: var(--navy); } .card__mark .icon { width: 1.35rem; height: 1.35rem; } .card h3 { margin-bottom: .6rem; } .card p { font-size: .95rem; line-height: 1.7; } .more { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dk); } .more:hover { color: var(--navy); } .more .icon { width: 1.05rem; height: 1.05rem; } .card--dark { background: var(--navy); border-color: var(--navy); justify-content: center; } .card--dark:hover { box-shadow: 0 14px 34px rgb(11 60 102 / .22); } .card--dark .card__body { padding: 2.2rem 1.6rem; justify-content: center; } .card--dark h3 { color: #fff; } .card--dark p { color: var(--on-dark); margin-bottom: 1.4rem; } /* ── Objektband (Standbild) ─────────────────────────────────────────────── */ /* HIER STAND `background-attachment: fixed` IM ENTWURF. `scroll` ist kein Vergessen, sondern V7 — die scroll-gebundene Bewegung faellt in der Basis-Stufe ersatzlos weg. */ .band { padding-block: clamp(3rem, 8vw, 4.75rem); background-color: #1f4c72; background-image: linear-gradient(rgb(var(--veil) / .92), rgb(var(--veil) / .92)), url("../img/objekt.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; color: #fff; } .band .sechead { margin-bottom: 2.25rem; } .band__grid { display: grid; gap: 1.75rem; } .band__grid li { display: grid; justify-items: start; gap: .4rem; } .band__grid .icon { width: 1.9rem; height: 1.9rem; color: var(--green-lt); } .band__grid strong { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.05rem; color: #fff; } .band__grid span { font-size: .95rem; line-height: 1.65; color: var(--on-dark); } /* ── Zweispalter: Ueber uns, Kontakt ────────────────────────────────────── */ .split { display: grid; gap: 2.5rem; } .split__media { position: relative; padding-bottom: 2.5rem; } .about__ph { display: block; width: 100%; height: auto; min-height: 16rem; aspect-ratio: 4 / 5; object-fit: cover; background-color: var(--ph-bg); box-shadow: 0 18px 40px rgb(11 60 102 / .18); } /* Der Entwurf setzt diesen Kasten auf das helle Gruen und schreibt Weiss hinein (2,39:1). Hier liegt er auf --green-dk (5,53:1). */ .about__badge { position: absolute; right: 0; bottom: 0; max-width: 20rem; margin: 0; background: var(--green-dk); color: #fff; padding: 1.2rem 1.3rem; box-shadow: 0 10px 26px rgb(0 0 0 / .2); font-size: .88rem; line-height: 1.55; } .about__badge strong { display: block; margin-bottom: .35rem; font-family: var(--font-title); font-weight: 800; /* NICHT weglassen */ font-size: 1.5rem; line-height: 1; } .split__text > p { margin-top: 1.4rem; font-size: 1rem; line-height: 1.8; } .ticks { display: grid; gap: .9rem; margin-top: 1.8rem; } .ticks li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; line-height: 1.6; } /* Der Entwurf setzt hier einen gefuellten gruenen Kreis mit einem weissen Schriftzeichen "✓" darin — 2,39:1, und das Zeichen fuehrt ausserdem keine der beiden Schriften. Hier steht das gezeichnete `check-circle` in --green-dk auf hellem Grund. */ .ticks .icon { width: 1.4rem; height: 1.4rem; color: var(--green-dk); margin-top: .15rem; } /* ── Branchen ───────────────────────────────────────────────────────────── */ .sechead--split { display: grid; gap: 1.25rem; } .branches { display: grid; gap: 1.25rem; } .branches li { background: var(--wash); border-bottom: 3px solid var(--green); padding: 1.6rem 1.4rem; display: grid; justify-items: start; gap: .5rem; } .sec--wash .branches li { background: var(--paper); } .branches .icon { width: 1.7rem; height: 1.7rem; color: var(--navy); } .branches strong { font-family: var(--font-title); font-weight: 800; /* NICHT weglassen */ font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); } .branches span { font-size: .95rem; line-height: 1.7; } /* ── Kundenstimmen ──────────────────────────────────────────────────────── */ .quotes { display: grid; gap: 1.5rem; } .quote { margin: 0; background: var(--paper); padding: 1.75rem 1.5rem; box-shadow: 0 4px 18px rgb(11 60 102 / .08); } /* Das Anfuehrungszeichen ist Schmuck und aus dem Vorlesefluss genommen (`aria-hidden` im Markup). Es ist --green auf Weiss — 2,39:1 — und darf das, weil es KEINE Information traegt: der Zitatcharakter steht im `
` und in den typografischen Anfuehrungszeichen des Textes. */ .quote__mark { font-family: var(--font-title); font-weight: 800; /* NICHT weglassen */ font-size: 3.5rem; line-height: .6; color: var(--green); margin: 0 0 .9rem; } .quote blockquote { margin: 0; } .quote blockquote p { font-size: 1rem; line-height: 1.8; margin: 0 0 1.4rem; } .quote figcaption { display: flex; align-items: center; gap: .9rem; border-top: 1px solid var(--line); padding-top: 1.1rem; font-size: .88rem; } /* Namenskuerzel statt Portraitfoto — so hatte es der Entwurf, und dabei bleibt es: ein erzeugtes Gesicht unter einem erfundenen Namen waere eine Behauptung mehr, als die Seite braucht. */ .quote__mono { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-content: center; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .9rem; letter-spacing: .04em; } .quote figcaption strong { display: block; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .95rem; color: var(--navy); } /* ── Aktionsband ────────────────────────────────────────────────────────── */ .cta { background: var(--green-dk); border-block: 5px solid var(--green); padding-block: 2.25rem; color: #fff; } .cta__inner { display: grid; gap: 1.25rem; } .cta__h { margin: 0; font-family: var(--font-title); font-weight: 800; /* NICHT weglassen */ font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.3; color: #fff; } .cta__sub { margin: .5rem 0 0; color: var(--on-green); font-size: .98rem; } .cta .btn--white { justify-self: start; } /* ── Kontaktangaben ─────────────────────────────────────────────────────── */ .facts { display: grid; gap: 1.25rem; margin-top: 1.8rem; } .facts li { display: flex; gap: .9rem; align-items: flex-start; font-size: .98rem; line-height: 1.7; } .facts .icon { width: 1.4rem; height: 1.4rem; color: var(--green-dk); margin-top: .2rem; } .facts strong { display: block; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ color: var(--navy); margin-bottom: .15rem; } /* ── Gezeichnete Karte ──────────────────────────────────────────────────── */ .mapwrap { margin-top: 2rem; } .map { display: block; width: 100%; height: auto; border-radius: var(--radius); } .map__note { margin: .9rem 0 0; font-size: .82rem; line-height: 1.65; color: var(--muted); } /* ── Formular ───────────────────────────────────────────────────────────── */ .formbox { background: var(--wash); border-top: 4px solid var(--green); padding: 1.75rem 1.4rem 2rem; } .sec--wash .formbox { background: var(--paper); } .formbox h3 { margin-bottom: 1.4rem; } .form__pair { display: grid; gap: 0; } .field { margin: 0 0 1rem; } .field label, .consent label { font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .82rem; color: var(--navy); } .field label { display: block; margin-bottom: .4rem; } .field input, .field select, .field textarea { display: block; width: 100%; padding: .8rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--field); color: var(--ink); font: 400 .95rem/1.5 var(--font-body); } .field textarea { resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--green-dk); } .consent { display: flex; gap: .65rem; align-items: flex-start; margin: 1.2rem 0; } .consent input { margin-top: .3rem; flex: none; } .consent label { font-family: var(--font-body); font-weight: 400; font-size: .85rem; line-height: 1.6; color: var(--muted); } .consent label a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } .form__note { margin: 1rem 0 0; font-size: .82rem; line-height: 1.65; color: var(--muted); } /* ── Fotos ─────────────────────────────────────────────────────────────── */ /* Die acht Fotos sind eingebaut; die Regeln fuer die gestreiften Platzhalter (V13) sind damit entfallen. Die Bildregeln stehen bei `.card__ph` und `.about__ph`, die beiden Hintergrundbilder bei `.hero` und `.band`. --ph-bg traegt jetzt nur noch die Flaeche unter einem Bild, das laedt. */ /* ── Fuss ───────────────────────────────────────────────────────────────── */ .footer { background: var(--navy); color: var(--on-dark-soft); font-size: .95rem; line-height: 1.8; padding-top: clamp(2.5rem, 6vw, 4rem); } .footer__grid { display: grid; gap: 2rem; } .footer h2 { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1rem; color: #fff; margin-bottom: .8rem; } .footer__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } .footer__name { font-family: var(--font-title); font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; text-transform: uppercase; color: #fff; } .footer__list { display: grid; gap: .4rem; } .footer a { color: var(--on-dark-soft); } .footer a:hover { color: #fff; } .footer__legal { border-top: 1px solid rgb(255 255 255 / .14); margin-top: 2.5rem; } .footer__legalinner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding-block: 1.1rem; font-size: .82rem; } .footer__legalinner p { margin: 0; } .footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; } /* ── Handy-Leiste und Knopf nach oben ───────────────────────────────────── */ .quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: var(--quickbar); display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); border-top: 3px solid var(--green); box-shadow: 0 -4px 16px rgb(0 0 0 / .18); } .quickbar a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; font-family: var(--font-title); font-weight: 600; /* NICHT weglassen */ font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; } .quickbar a + a { border-left: 1px solid rgb(255 255 255 / .16); } .quickbar a:hover { color: #fff; text-decoration: none; background: var(--navy-dk); } .totop { position: fixed; right: 1rem; bottom: calc(var(--quickbar) + 1rem); z-index: 44; width: 2.75rem; height: 2.75rem; display: grid; place-content: center; background: var(--navy); color: #fff; border-radius: var(--radius); box-shadow: 0 4px 14px rgb(0 0 0 / .2); transition: background-color 170ms ease; } .totop:hover { background: var(--green-dk); color: #fff; text-decoration: none; } /* ── Rechtliches ────────────────────────────────────────────────────────── */ /* Sprungziel fuer Impressum, Datenschutz und AGB im Fuss und fuer das Ankreuzfeld im Formular. Ohne dieses Ziel waeren das vier Verweise ins Leere (V17). */ .legalnote { max-width: var(--wrap); margin-inline: auto; padding: 1.75rem var(--pad) 2.5rem; font-size: .85rem; line-height: 1.75; color: var(--muted); } .legalnote h2 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; } /* ========================================================================== Ab 640 px ========================================================================== */ @media (min-width: 40em) { .topbar__hide { display: inline-flex; } .form__pair { grid-template-columns: 1fr 1fr; gap: 0 1rem; } .cta__inner { grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; } .cards { grid-template-columns: repeat(2, 1fr); } .branches { grid-template-columns: repeat(2, 1fr); } .quotes { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } .quote:last-child { grid-column: span 2; } .band__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .usp { grid-template-columns: repeat(3, 1fr); } .usp li { border-bottom: 0; border-right: 1px solid var(--line); } .usp li:last-child { border-right: 0; } .formbox { padding: 2.25rem 2rem 2.5rem; } } /* ========================================================================== Ab 900 px — hier bekommt der Seitenkopf seine waagerechte Form zurueck ========================================================================== */ @media (min-width: 56.25em) { html { scroll-padding-top: calc(var(--notice) + 6rem); } body { padding-bottom: 0; } .quickbar { display: none; } .totop { bottom: 1.5rem; } .header__inner { flex-wrap: nowrap; gap: 1.5rem; min-height: 5.25rem; } .nav { order: 0; width: auto; border-top: 0; padding-top: 0; margin-left: auto; } .header__cta { display: inline-flex; padding: .95rem 1.4rem; font-size: .74rem; } .brand__mark { width: 44px; height: 44px; border-width: 6px; } .brand__name { font-size: 1.55rem; } .hero { min-height: 38rem; } .hero__inner { padding-block: 5rem 7.5rem; } /* Der Versatz des Entwurfs (`margin-top: -60px`) gilt erst hier. Auf dem Handy stuende das Band sonst in der Hero-Schrift (V5). */ .usp { margin-top: -3.75rem; } .cards { grid-template-columns: repeat(3, 1fr); } .branches { grid-template-columns: repeat(4, 1fr); } .quotes { grid-template-columns: repeat(3, 1fr); } .quote:last-child { grid-column: auto; } .band__grid { grid-template-columns: repeat(4, 1fr); } .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.75rem; } .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .split--form { align-items: start; } .split__media { padding-bottom: 0; } .about__ph { aspect-ratio: 4 / 5; min-height: 24rem; } .about__badge { right: -1.1rem; bottom: -1.6rem; } .sechead--split { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 1.5rem 2.5rem; } .sechead--split .sechead__aside { margin-top: 0; } } /* ========================================================================== Ab 1280 px ========================================================================== */ @media (min-width: 80em) { .usp li { padding: 2.1rem 1.9rem; } .card__body { padding: 1.75rem 1.6rem 1.9rem; } .branches li { padding: 2rem 1.6rem; } .quote { padding: 2.1rem 1.9rem; } } /* ── Bewegung aus ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .has-reveal [data-reveal], .has-reveal [data-reveal].is-in { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Druck ──────────────────────────────────────────────────────────────── */ @media print { #ew-demo-notice, .quickbar, .totop, .header, .topbar, .hero__actions { display: none; } body { padding: 0; color: #000; background: #fff; } .hero, .band, .cta, .footer, .card--dark { background: none; color: #000; } .hero h1, .hero h1 span, .hero__sub, .band__grid strong, .band__grid span, .cta__h, .cta__sub, .footer h2, .footer__name, .footer a, .card--dark h3, .card--dark p { color: #000; } .card, .quote, .branches li, .formbox { border: 1px solid #999; box-shadow: none; } .usp { box-shadow: none; margin-top: 0; } }