/* ========================================================================== HARTMANN UMZUEGE — Moebelspedition, Privat- und Firmenumzuege Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt, Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler. Herkunft -------- Uebersetzt aus dem Claude-Design-Entwurf "Hartmann Umzuege.dc.html" (Projekt ff81f262-3b2e-41f3-8427-752db748b718) nach `docs/regeln/vorlagen.md`. Der Entwurf laedt Montserrat und Open Sans von Google und drei Fotos von images.unsplash.com; dazu sc-for, sc-if, {{ }} und style-hover an ueber vierzig Knoten und eine `class Component extends DCLogic` fuer Cookie-Banner und Formular-Bestaetigung — nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung (V1). Der Entwurf ist im Sichtungsbericht als Basis gefuehrt: er hat keine scroll-gebundene Bewegung, kein `background-attachment: fixed`, keine hochlaufenden Zahlen. Gebaut wird nach Benedikts Entscheidung vom 20.08.2026 die Starter-Fassung — kein js/scroll.js, keine Parallaxe (V7). Symbole kommen aus `_shared/transport/icons.svg.html` (26 Zeichen), inline gesetzt, kein Sprite, kein Abruf. Der Entwurf hatte GAR KEINE Symbole: die Haken waren das Schriftzeichen "✓", das Lkw-Logo bestand aus zwei verschachtelten `
` mit Rahmen. Beides ist ersetzt (siehe Punkt 6 und 7 unten). Schriften: Montserrat (variabel) und Open Sans (variabel), beide selbst gehostet und aus `_shared/transport/fonts/` KOPIERT, nicht verlinkt (V2). Zusammen 86 276 B = 84,3 KB, Budget der Basis-Stufe 120 KB. Abweichungen vom Entwurf, jede mit Grund ---------------------------------------- 1. WEISS AUF ORANGE IST GESTRICHEN. Der Entwurf setzt weissen Text auf #f28c00 an sieben Stellen: Hauptknopf im Kopf, Hauptknopf im Hero, Hero-Kennzeichnung "SEIT 1987 …", der Kasten "48 Stunden", das Telefonband und beide Knoepfe des Cookie-Banners. Weiss auf #f28c00 sind 2,46:1 — das faellt nicht knapp durch, das ist die Haelfte des Geforderten. Auf allen orangen Flaechen steht der Text jetzt in --on-orange #0f2f52 (5,51:1). Das Orange selbst bleibt unveraendert; es ist die Farbe der Marke, und dunkler waere es keine mehr. 2. ORANGE ALS TEXT AUF HELL IST GESTRICHEN. Der Entwurf faerbt jede Kleinzeile ueber den Ueberschriften, jeden Verweis im Fliesstext und jeden Haken in #f28c00. Auf Weiss sind das ebenfalls 2,46:1. Dafuer gibt es --orange-ink #a35a00 (5,22:1 auf Weiss, 4,87:1 auf --wash). Das ist derselbe Farbton, nur so weit abgedunkelt, wie die Rechnung verlangt — nicht weiter. 3. ORANGE STEHT NIE AUF --blue #1b4f8a: dort sind es 3,37:1. Betroffen waere das Zahlenband gewesen, wenn die Kleinzeilen dort orange geworden waeren; sie laufen in --on-blue #b9cbe0 (5,01:1). 4. Kursiv ist gestrichen. Keine der beiden Schriftdateien traegt einen kursiven Schnitt; `font-style: italic` erzeugt darauf eine schraeg gescherte Faelschung. Der Entwurf setzte eine Stelle kursiv: die Unterschrift "M. Hartmann". Sie laeuft jetzt in Montserrat 700, gesperrt statt geschraegt. 5. MONTSERRAT WIRD NIRGENDS OHNE `font-weight` BENUTZT. Die Datei steht standardmaessig auf 100 (Thin) — `usWeightClass` 100, `fvar`-Standard 100, interner Name "Montserrat Thin". Wer sie ohne ausdrueckliches Gewicht einbindet, bekommt eine Seite in Haarstrich. Deklariert ist der Bereich 400–800, und jede Regel, die --font-title setzt, setzt in derselben Regel auch `font-weight`. Auch `strong` und `b` bekommen es ausdruecklich (Begruendung: `_shared/transport/README.md`). 6. Das Lkw-Zeichen im Kopf und im Fuss bestand aus zwei verschachtelten `
` mit `border`, `position:absolute` und einem orangen Kaestchen als Fahrerhaus. Es ist der gezeichnete `truck` (Nr. 1) geworden — dasselbe Bild, aber ein Zeichen statt einer Kastenkonstruktion, die bei jeder Schriftgroessenaenderung verrutscht. 7. Die Haken "✓" waren Schriftzeichen in Orange. Sie sind `check-circle` (Nr. 20) geworden, in --orange-ink auf hellem und in --orange auf dunklem Grund. Der Symbolsatz ist genau dafuer gezeichnet worden. 8. Der Pfeil "›" hinter "MEHR ERFAHREN" ist mitsamt dem Verweis weg. Der Verweis zeigte auf `#kontakt` — eine Zeile "Mehr erfahren", die das Formular oeffnet, verspricht mehr Text und liefert ein Formular (V17). Der Kartentext ist dafuer vollstaendig. 9. ``, `{{ services }}`, `{{ steps }}`, `{{ usps }}` und `{{ reviews }}` sind ausgeschrieben: vier Zahlen, sechs Karten, vier Schritte, sechs Haken, drei Stimmen (V6). `style-hover` an ueber vierzig Knoten ist echtes `:hover` in dieser Datei; die Inline-`style` an jedem Knoten sind Klassen und Tokens. 10. Der Cookie-Banner ist ersatzlos weg (V12). Seine beiden Knoepfe taten beide dasselbe — das Fenster schliessen. Die Demo laedt nichts von Dritten, also braucht sie keinen Hinweis. Der echte kommt aus dem Zusatz `cookie-pro`. 11. Der Kartenbereich mit dem Knopf "Karte laden" ist eine gezeichnete Umgebungskarte geworden (V12, Muster: `lindenhof`). Der Entwurf malte ein Kachelmuster, nannte "Google Maps" beim Namen und bot einen Knopf an, der nichts laedt. Eine eingebettete Karte kommt auch nicht in Frage: sie gibt die Adresse des Besuchers an einen Dritten weiter, bevor irgendjemand zugestimmt hat (V3). 12. Das Formular hat kein `action` und einen `type="button"`; im Markup steht der Grund (V12). Der Entwurf meldete "Vielen Dank! Ihre Anfrage ist eingegangen", ohne etwas zu senden. 13. STERNE UND BEWERTUNGSZAHL SIND WEG (V11). Der Entwurf zeigte fuenf "★★★★★" ueber jedem Zitat, die Kachel "4,8 — Sterne Bewertung" im Zahlenband und darunter "Bewertungen von Google & ProvenExpert · Durchschnitt 4,8 von 5 aus 213 Bewertungen" — zwei fremde Marken und eine Zahl, die niemand vergeben hat. Die vierte Kachel im Zahlenband traegt jetzt die Zahl der eigenen Fahrzeuge, die im Text ohnehin steht. 14. DIE DREI KUNDENSTIMMEN BLEIBEN mit Namen stehen — ausdrueckliche Entscheidung von Benedikt vom 20.08.2026. Im Markup steht dahinter ``. Die Firmennamen darin sind allgemein beschrieben: aus "Steuerkanzlei, Koeln-Ehrenfeld" wird "Bueroleiterin einer Steuerkanzlei", aus "Umzug Koeln-Suelz → Bonn" wird "Privatumzug innerhalb von Musterstadt". Die drei Portraits werden erzeugt, nie das Foto eines echten Menschen unter falschem Namen. NEU gegenueber dem Entwurf: er hatte gar keine Portraits. 15. Die Verbandsmitgliedschaft ist an drei Stellen gestrichen (V11): "AMOE-Mitgliedsbetrieb" im Hero, "Mitglied im Bundesverband Moebelspedition und Logistik (AMOE)" im Ueber-uns-Text und in der Fusszeile. Den Verband gibt es wirklich, die Mitgliedschaft nicht. An der Hero-Stelle steht jetzt "Eigenes Personal, keine Subunternehmer" — eine Tatsache aus dem Betrieb, die der Entwurf weiter unten selbst nennt. 16. "Mercedes 508" ist "ein gebrauchter Moebelwagen" geworden (V11). 17. GELDBETRAEGE UND GESETZLICHE GRENZEN STEHEN NICHT AUF DIESER SEITE. Der Entwurf nannte zwei: "Jeder Umzug ist ueber 620 € pro Kubikmeter Laderaum versichert" — das ist der gesetzliche Haftungshoechstbetrag beim Umzugsvertrag, er kann sich aendern — und "Einlagerung ab 39 € pro Monat". Genannt ist jetzt jeweils der Mechanismus: die Haftung "bemisst sich nach dem Laderaum und steht im Angebot", die Einlagerung wird "monatlich abgerechnet". Grund: Eine Vorlage wird einmal gebaut und jahrelang ausgeliefert; eine Zahl darin ist beim naechsten Gesetz oder beim naechsten Preisblatt falsch. Aus demselben Grund ist "Allgemeine Befoerderungsbedingungen fuer Umzugsgut" — ein fremdes Regelwerk beim Namen — zu "den ueblichen Befoerderungsbedingungen fuer Umzugsgut" geworden. 18. Anschrift, Telefon und E-Mail sind erkennbar erfunden (V10, Benedikts Vorgabe vom 20.08.2026): Musterstrasse 214, 12345 Musterstadt, 0123 456789, info@hartmann-umzuege.example. Der Entwurf nannte eine real existierende Koelner Strasse mit passender Postleitzahl, die echte Koelner Vorwahl in einem `tel:`-Link und eine frei registrierbare Domain. Der `tel:`-Link des Entwurfs enthielt ausserdem ein Leerzeichen ("tel:022158904 12") und haette so gar nicht gewaehlt. 19. Das Einsatzgebiet nannte fuenf echte Staedte und Kreise. Es heisst jetzt Musterstadt, Musterhausen, Musterberg, Musterbach und der Landkreis Musterland — dieselben Namen, die die uebrigen Vorlagen dieses Katalogs benutzen. 20. Zeitangaben sind nachgezogen (V10): "© 2022" ist 2026, "35 Jahre Erfahrung" sind 39 (seit 1987), aus "9.400+ Umzuegen" werden im selben Verhaeltnis "10.000+". In der ersten Kundenstimme stand "Maerz 2022"; das ist "im Fruehjahr" geworden, damit es nicht jaehrlich altert. 21. NEU hinzugefuegt: ein Filter ueber den sechs Leistungen (Alle, Umzuege, Rund um den Umzug). Der Entwurf zeigte alle sechs auf einmal, ohne Ordnung. Der Filter laeuft ueber drei `` plus `:checked` (V8) — bedienbar mit der Tastatur, funktioniert mit abgeschaltetem Skript, und mit abgeschaltetem CSS stehen alle sechs Karten untereinander da. 22. NEU hinzugefuegt: fuenf `
`-Aufklapper "Gut zu wissen" neben dem Formular. Festpreis, Halteverbotszone, Haftung, Kartons und Terminverschiebung beantwortete der Entwurf nirgends, obwohl er alle fuenf Themen anspricht. Als Aufklapper kosten die Antworten keine einzige Zeile Javascript. Sie stehen in derselben Spalte wie die Anschrift, nicht unter dem Formular: sonst ist die rechte Spalte ab 1000 px nach den Oeffnungszeiten zu Ende, waehrend links noch das ganze Formular steht. 23. NEU hinzugefuegt: eine Leiste am unteren Bildrand (Anrufen, Anfrage) fuer Handybreiten, ein Sprunglink zum Inhalt und ein Knopf zurueck nach oben ab Rechnerbreite. Der Entwurf ist ein Desktop-Layout mit `grid-template-columns:repeat(4,1fr)` und `repeat(3,1fr)` ohne jede Bedingung — auf dem Handy staenden dort vier Zahlen und drei Karten nebeneinander (V5). 24. Das Zahlenband schiebt sich im Entwurf mit `margin-top:-52px` in den Hero. Das bleibt, aber erst ab 1000 px: auf dem Handy ist der Hero unten randlos und die Ueberlappung wuerde nur Text verdecken. 25. Der Kasten "48 Stunden" haengt im Entwurf mit `bottom:-28px; left:-28px` aus dem Bild heraus. Auf dem Handy laeuft er damit aus dem Fenster; er steht dort unter dem Bild und haengt erst ab 1000 px. 26. Die sechs Fotos sind erzeugt und eingebaut (nano_banana_pro, 2K, danach auf Zielgroesse verkleinert — das schaerft zusaetzlich). Die Beschreibungen dazu stehen in `docs/vorlagen/bild-prompts-hartmann-umzuege.md`. Der Entwurf hatte drei; die drei Portraits der Kundenstimmen kommen dazu (Punkt 14). Das Hero-Bild ist ein CSS-Hintergrund (`img/hero.jpg`) und bleibt einer; deshalb wird es im Seitenkopf vorgeladen, und zwar als EINZIGES Bild der Seite (V18). `background-color` traegt die Flaeche, solange das Foto laedt. Die uebrigen fuenf sind `` mit `alt`, `width`, `height` und `loading="lazy"`; die Masse reservieren den Platz, bevor das Bild da ist, und die Seite springt beim Laden nicht. Die `.ph`-Platzhalter aus der Uebernahme sind damit ersatzlos entfallen, der `.ph`-Baustein in dieser Datei ebenso. 27. AM AKKUSCHRAUBER IN `img/ueber-uns.jpg` SIND ZWEI SCHRIFTPLAKETTEN UNKENNTLICH GEMACHT (V11). Das Bildmodell hat trotz ausdruecklichem Verbot ein Herstellerschild auf das Gehaeuse und einen Aufdruck auf den Akku gesetzt. Beide liegen jetzt unter einem weich auslaufenden Weichzeichner: die Form der Plakette steht noch da, die Schrift darauf nicht mehr. Das ist der vorgesehene Weg — ein Werkzeug ganz ohne Plakette sieht unecht aus. Farblogik --------- Der Entwurf hat drei Blautoene und ein Orange. Alle vier werden gebraucht: Marineblau #0f2f52 traegt die Infoleiste, den Fuss und den Schleier ueber dem Hero; #123354 das Kundenstimmen-Band; Mittelblau #1b4f8a das Zahlenband, die vier Schrittkreise und das Logofeld; Dunkelblau #133a63 jede Ueberschrift auf hellem Grund. Orange #f28c00 ist der Akzent — und zwar AUSSCHLIESSLICH ALS FLAECHE. Was jede Farbe darf: --orange #f28c00 NUR Flaeche. Traegt nur --on-orange #0f2f52. Als Text auf Weiss 2,46:1 — verboten. Als Text auf --blue 3,37:1 — verboten. Als Text auf DUNKEL (--navy, --navy-2) erlaubt: 5,51:1 bzw. 5,24:1. --orange-2 #c97400 nur Flaeche: der 4-px-Sockel unter jedem Knopf. --orange-3 #ff9c14 nur Flaeche: Hover. Traegt --on-orange (6,47:1). --orange-ink #a35a00 Orange als TEXT auf hell. Kleinzeilen, Verweise, Haken, Nummern der Leistungskarten. --navy #0f2f52 Flaeche (Infoleiste, Fuss, Hero-Schleier) und Text auf Orange. --navy-2 #123354 nur Flaeche: das Kundenstimmen-Band. --blue #1b4f8a Flaeche (Zahlenband, Schrittkreise, Logofeld) und Text auf hell (8,29:1). --blue-ink #133a63 Ueberschriften auf hell; Text auf Weiss im Orange-Band. --on-dark #dbe4ee Text auf --navy, --navy-2, --blue. --on-dark-soft #a9bdd2 Kleintext NUR auf --navy und --navy-2. --on-blue #b9cbe0 Kleintext NUR auf --blue. Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #3d4852 auf --paper #ffffff 9,34:1 --ink #3d4852 auf --wash #f5f7fa 8,71:1 --ink #3d4852 auf --field #fbfcfd 9,10:1 --ink #3d4852 auf --tint #eaf1f8 8,20:1 --muted #5c6a78 auf --paper 5,54:1 --muted #5c6a78 auf --wash 5,17:1 --muted #5c6a78 auf --field 5,40:1 --muted #5c6a78 auf --tint 4,87:1 --blue-ink #133a63 auf --paper 11,58:1 --blue-ink #133a63 auf --wash 10,79:1 --blue #1b4f8a auf --paper 8,29:1 --blue #1b4f8a auf --wash 7,73:1 --blue #1b4f8a auf --tint 7,28:1 --orange-ink #a35a00 auf --paper 5,22:1 --orange-ink #a35a00 auf --wash 4,87:1 --orange-ink #a35a00 auf --field 5,09:1 --orange-ink #a35a00 auf --tint 4,59:1 #ffffff auf --blue #1b4f8a 8,29:1 #ffffff auf --navy #0f2f52 13,56:1 #ffffff auf --navy-2 #123354 12,91:1 --on-dark #dbe4ee auf --navy 10,55:1 --on-dark #dbe4ee auf --navy-2 10,04:1 --on-dark #dbe4ee auf --blue 6,45:1 --on-dark-soft #a9bdd2 auf --navy 7,04:1 --on-dark-soft #a9bdd2 auf --navy-2 6,70:1 --on-blue #b9cbe0 auf --blue 5,01:1 --on-orange #0f2f52 auf --orange #f28c00 5,51:1 --on-orange #0f2f52 auf --orange-3 #ff9c14 6,47:1 --blue-ink #133a63 auf #ffffff (Knopf im Orange-Band) 11,58:1 --orange #f28c00 auf --navy 5,51:1 --orange #f28c00 auf --navy-2 5,24:1 HERO (`img/hero.jpg`, Schleier aus --navy) Ueber dem FERTIGEN Foto nachgemessen, nicht geschaetzt: Ein Skript legt den Schleier rechnerisch ueber das Bild, sucht die hellste Kachel (48 px) in der Flaeche, auf der Text steht, und rechnet von dort. Das ist der schlechteste Fall — an jeder anderen Stelle liegen die Werte hoeher. schmal, Schleier 88 % gleichmaessig. Der Text deckt die ganze Flaeche, deshalb ist die hellste Kachel des ganzen Bildes massgeblich: #eaeef5 (die Fensterlaibung rechts) -> mit Schleier #294666 Weiss (h1, Knopftext des Ghost-Knopfes) 9,72:1 --on-dark (Vorspann, Haken) 7,56:1 ab 1000 px, Verlauf 94 % / 86 % / 55 % waagerecht. Der Textblock endet bei 640 von 1130 px Inhaltsbreite, also bei 57 % — der schlechteste Wert unter Text ist die 86-%-Marke bei 62 %. Hellste Kachel in der linken Bildhaelfte: #cbc6c7 (die helle Wand hinter dem Sofa) -> mit Schleier #294462 Weiss 9,99:1 --on-dark 7,77:1 Beide Werte liegen ueber der Rechnung gegen Reinweiss, mit der der Schleier ausgelegt wurde (9,42:1 und 8,85:1) — das Foto ist dunkler als Weiss. Der Schleier bleibt trotzdem, wie er ist: die linke Bildhaelfte ist absichtlich detailarm bestellt, aber ein ausgetauschtes Kundenfoto ist es nicht. Orange steht im Hero NUR als Flaeche (die Kennzeichnung "SEIT 1987") und traegt dort --on-orange. Als Text kaeme es auf dem 88-%-Schleier ueber diesem Foto nur auf 3,95:1 und faellt damit aus — die drei Haken laufen deshalb in --on-dark, nicht in Orange wie im Entwurf. GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene) --map-ink #4a4f54 auf --map-bg #eef1f4 7,30:1 --map-ink #4a4f54 auf --map-block #dfe5ea 6,52:1 --map-ink #4a4f54 auf --map-road #ffffff 8,28:1 --map-ink #4a4f54 auf den Schildchen (90 % --map-bg ueber --map-block, #edf0f3) 7,23:1 --map-bg #eef1f4 auf --map-ink (Kaestchen "B" an der Auffahrt zur Bundesstrasse) 7,30:1 --map-accent-ink #0f2f52 auf der Akzentflaeche (16 % --orange ueber --map-bg, #efe1cd) 10,54:1 Was ABSICHTLICH unter 4,5:1 liegt und deshalb NIE Text traegt ------------------------------------------------------------- --orange #f28c00 als Flaeche auf Weiss (2,46:1): der 64x3-px-Balken unter jeder Ueberschrift, der 3-px-Rand der Zitatkarten und der Sockel unter den Knoepfen. Alle drei sind reine Zierflaechen ohne Text und ohne Bedienfunktion; der Knopf selbst hat seinen eigenen, gerechneten Kontrast. Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen ------------------------------------------------------------- #ffffff auf #f28c00 2,46:1 (sieben Stellen, siehe Punkt 1) -> --on-orange #fff5e6 auf #f28c00 2,28:1 (Unterzeile im Telefonband) -> --on-orange #f28c00 auf #ffffff 2,46:1 (jede Kleinzeile ueber den Ueberschriften, jeder Verweis, jeder Haken) -> --orange-ink #98a4b0 auf #ffffff 2,54:1 (Hinweis unter dem Absendeknopf) -> --muted #8a97a3 auf #ffffff 2,98:1 (Untertitel der Marke, Zusatz unter der Unterschrift, Ort unter jedem Zitat) -> --muted #7a8794 auf #ffffff 3,67:1 (Datenschutz-Ankreuzfeld) -> --muted #7f95ac auf #0f2f52 4,39:1 (Zeile mit Copyright und Impressum im Fuss) -> --on-dark-soft #b9cbe0 auf #1b4f8a 5,01:1 (die vier Beschriftungen im Zahlenband) -> bestanden, bleibt #a9bdd2 auf #0f2f52 7,04:1 (Fliesstext im Fuss) -> bestanden, bleibt #c9d6e4 auf #0f2f52 9,18:1 (Infoleiste) -> bestanden, laeuft trotzdem in --on-dark, damit die Leiste nicht zwei Grautoene hat 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. ========================================================================== */ /* ── Schriften (selbst gehostet, latin-Teilmenge, 86 276 B = 84,3 KB) ───── Beide Dateien sind variabel. Deklariert wird jeweils NUR der Bereich, der auch benutzt wird — nicht der volle Achsenbereich. Montserrat kann 100–900; wer 100 zulaesst, laedt sich die Erlaubnis ein, irgendwo ein Haarstrich-100 zu setzen, und bei DIESER Datei ist 100 auch noch der Standardwert. Open Sans kann 300–800, gebraucht werden 400 bis 700. Kursive gibt es zu keiner der beiden. */ @font-face { font-family: "Montserrat"; src: url("../vendor/fonts/montserrat-var.woff2") format("woff2"); font-weight: 400 800; 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; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --font-title: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-text: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --navy: #0f2f52; --navy-2: #123354; /* nur Flaeche: Kundenstimmen-Band */ --blue: #1b4f8a; --blue-ink: #133a63; --orange: #f28c00; /* NUR Flaeche */ --orange-2: #c97400; /* nur Flaeche: Sockel unter den Knoepfen */ --orange-3: #ff9c14; /* nur Flaeche: Hover */ --orange-ink: #a35a00; /* Orange als TEXT auf hell */ --ink: #3d4852; --muted: #5c6a78; --paper: #ffffff; --wash: #f5f7fa; --field: #fbfcfd; /* Formularfeld */ --tint: #eaf1f8; /* Symbolfeld auf den Leistungskarten */ --line: #e6eaee; --line-2: #d5dde5; --on-dark: #dbe4ee; --on-dark-soft: #a9bdd2; /* nur auf --navy und --navy-2 */ --on-blue: #b9cbe0; /* nur auf --blue */ --on-orange: #0f2f52; /* auf --orange und --orange-3 */ /* Der Ton unter einem Foto, das noch nicht geladen ist. */ --ph-bg: #e6ebf0; --focus: #1b4f8a; --focus-halo: #ffffff; --radius: 3px; /* der Entwurf rundet ueberall genau so weit */ --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 */ } /* Auf dunklem Grund braucht der Fokusring die umgekehrte Aufteilung, sonst verschwindet der weisse Hof im Weiss des Rings. */ .is-dark { --focus: #ffffff; --focus-halo: #0f2f52; } /* Auf der orangen Flaeche ist Weiss als Ring zu schwach (2,46:1 gegen die Flaeche); dort ringt Marineblau mit weissem Hof. */ .is-orange { --focus: #0f2f52; --focus-halo: #ffffff; } /* ── Grundlagen ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--notice) + 1rem); } body { margin: 0; padding-top: var(--notice); padding-bottom: var(--quickbar); font-family: var(--font-text); font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } /* Montserrat laeuft breiter als die meisten Systemschriften. Faellt sie aus, springt der Titel auf die Systemgrotesk und bricht eine Zeile frueher oder spaeter um — deshalb nirgends feste Hoehen fuer Titelzeilen und kein Layout, das auf genau zwei Zeilen gebaut ist. */ h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 800; color: var(--blue-ink); line-height: 1.25; margin: 0 0 .5em; text-wrap: pretty; } h1 { font-size: clamp(1.85rem, 6.4vw, 3.25rem); line-height: 1.14; } h2 { font-size: clamp(1.5rem, 4.6vw, 2.25rem); } h3 { font-size: 1.15rem; font-weight: 700; } h4 { font-size: .95rem; font-weight: 700; } /* Ohne diese Zeile holt sich `strong` sein Gewicht vom Browser — bei einer variablen Datei mit Standardwert 100 ist das ein Glueckspiel. */ strong, b { font-weight: 700; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--orange-ink); text-decoration: none; } a:hover { color: var(--navy); text-decoration: underline; } ::selection { background: var(--blue); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } /* Die gesperrte Kleinzeile ueber jeder Ueberschrift — das durchgaengige Zeichen des Entwurfs. Dort in #f28c00 auf Weiss (2,46:1). */ .eyebrow { display: block; font-family: var(--font-title); font-weight: 700; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-ink); margin: 0 0 .8rem; } .is-dark .eyebrow { color: var(--orange); } /* Der kurze Balken unter jeder Ueberschrift (64 x 3 px). Reine Zierflaeche, nie Text darauf — deshalb ist der Kontrast gegen Weiss hier ohne Belang. */ .rule { width: 64px; height: 3px; background: var(--orange); border: 0; margin: 1rem 0 1.4rem; } .rule--center { margin-inline: auto; } .icon { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: -.18em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 50%; top: calc(var(--notice) + .5rem); transform: translate(-50%, -250%); z-index: 200; background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius); font-family: var(--font-title); font-weight: 700; font-size: .9rem; letter-spacing: .06em; } .skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); } /* ── Einblenden: genau ein Effekt pro Abschnitt ──────────────────────────── */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); } .has-reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; } /* ── Knoepfe ────────────────────────────────────────────────────────────── */ /* Der Sockel `0 4px 0` unter jedem Knopf ist die Handschrift des Entwurfs und bleibt. Er ist reine Flaeche und traegt keinen Text. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-title); font-weight: 700; font-size: .92rem; letter-spacing: .02em; padding: 1rem 1.9rem; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease; } .btn:hover { text-decoration: none; } /* Im Entwurf weisser Text (2,46:1). Jetzt Marineblau (5,51:1). */ .btn--orange { background: var(--orange); border-color: var(--orange); color: var(--on-orange); box-shadow: 0 4px 0 var(--orange-2); } .btn--orange:hover { background: var(--orange-3); border-color: var(--orange-3); color: var(--on-orange); } /* Nur auf dunklem Grund, deshalb weisse Kante. */ .btn--ghost { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; } .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--blue-ink); } /* Nur auf --orange. */ .btn--onorange { background: #fff; border-color: #fff; color: var(--blue-ink); font-weight: 800; box-shadow: 0 4px 0 rgb(15 47 82 / .2); } .btn--onorange:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .btn--block { width: 100%; } /* ── Infoleiste ─────────────────────────────────────────────────────────── */ .topbar { background: var(--navy); color: var(--on-dark); font-size: .82rem; line-height: 1.5; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; padding-block: .6rem; } .topbar__item { display: inline-flex; align-items: center; gap: .5rem; } .topbar .icon { color: var(--orange); width: 1rem; height: 1rem; } .topbar a { color: var(--on-dark); } .topbar a:hover { color: #fff; } /* E-Mail und Bueroezeiten stehen auf dem Handy weiter unten auf der Seite; hier oben kosten sie eine ganze Zeile ueber der Falz. */ .topbar__hide { display: none; } /* ── Kopf ───────────────────────────────────────────────────────────────── */ .header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgb(15 47 82 / .07); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; padding-block: .7rem; } .brand { display: flex; align-items: center; gap: .75rem; } .brand:hover { text-decoration: none; } /* Im Entwurf zwei verschachtelte
mit Rahmen; jetzt das gezeichnete Zeichen `truck` (Nr. 1). */ .brand__mark { width: 46px; height: 46px; flex: none; background: var(--blue); color: #fff; border-radius: var(--radius); display: grid; place-items: center; } .brand__mark .icon { width: 1.6rem; height: 1.6rem; } .brand__name { display: block; font-family: var(--font-title); font-weight: 800; font-size: 1.25rem; line-height: 1.1; letter-spacing: -.01em; color: var(--blue-ink); } /* Im Entwurf #8a97a3 auf Weiss — 2,98:1. */ .brand__sub { display: block; font-family: var(--font-title); font-weight: 600; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; } .nav { display: none; } .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Standbild, kein Video, keine Bildfolge, keine Parallaxe (V7). Der Text steht links; auf dem Handy deckt der Schleier deshalb gleichmaessig, ab 1000 px laeuft er waagerecht aus. `background-color` traegt die Flaeche, solange das Bild laedt — deshalb sieht der Kopf ruhig aus und nicht kaputt. Weil das Bild erst mit dieser Datei entdeckt wuerde, laedt der Seitenkopf es vor (V18). */ .hero { position: relative; background-color: var(--navy-2); background-image: linear-gradient(rgb(15 47 82 / .88), rgb(15 47 82 / .88)), var(--ew-kopfbild, url("../img/hero.jpg")); background-size: cover; background-position: center; color: #fff; } .hero__inner { padding-block: clamp(3.2rem, 11vw, 6.9rem); } .hero__text { max-width: 640px; } /* Im Entwurf weisser Text auf Orange (2,46:1). */ .hero__badge { display: inline-block; background: var(--orange); color: var(--on-orange); font-family: var(--font-title); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem .9rem; border-radius: 2px; margin-bottom: 1.4rem; } .hero h1 { color: #fff; margin: 0 0 1.1rem; } .hero__sub { font-size: clamp(1rem, 2.4vw, 1.13rem); line-height: 1.65; color: var(--on-dark); max-width: 34em; margin: 0 0 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* Im Entwurf orange Haken (auf dem Schleier 3,82:1) plus orange Schrift. */ .hero__checks { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin: 2.4rem 0 0; font-size: .9rem; color: var(--on-dark); } .hero__checks span { display: inline-flex; align-items: flex-start; gap: .55rem; } .hero__checks .icon { color: var(--on-dark); margin-top: .22rem; } /* ── Zahlenband ─────────────────────────────────────────────────────────── */ /* Feste Zahlen im Markup. Der Entwurf hatte hier keine Zaehler, und es kommen auch keine dazu (V7). Die vierte Kachel hiess "4,8 — Sterne Bewertung"; eine Zahl, die niemand vergeben hat, steht auf keiner unserer Seiten (V11). An ihrer Stelle steht der eigene Fuhrpark. */ .facts { background: var(--paper); border-bottom: 1px solid var(--line); } .facts__grid { display: grid; grid-template-columns: 1fr 1fr; background: var(--blue); border-radius: var(--radius); box-shadow: 0 12px 30px rgb(15 47 82 / .22); overflow: hidden; position: relative; z-index: 2; } .facts__grid > p { margin: 0; padding: 1.5rem 1rem; text-align: center; border-right: 1px solid rgb(255 255 255 / .13); border-bottom: 1px solid rgb(255 255 255 / .13); } .facts__grid > p:nth-child(2n) { border-right: 0; } .facts__grid > p:nth-last-child(-n + 2) { border-bottom: 0; } .fact__num { display: block; font-family: var(--font-title); font-weight: 800; font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1; color: #fff; } .fact__lbl { display: block; font-family: var(--font-title); font-weight: 600; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; line-height: 1.5; color: var(--on-blue); margin-top: .5rem; } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section { padding-block: clamp(3rem, 9vw, 5.4rem); } .section--wash { background: var(--wash); border-block: 1px solid var(--line); } .section__head { max-width: 700px; margin: 0 auto 2.6rem; text-align: center; } .section__head h2 { margin: 0; } .section__head p { margin: 0; color: var(--muted); } /* ── Leistungen mit Filter: Radios plus :checked, kein Javascript ───────── */ .svc { position: relative; } /* Die Radios bleiben bedienbar und mit der Tastatur erreichbar; sie sind nur optisch entfernt. Sichtbar ist das