/* ========================================================================== KELLERMANN IMMOBILIEN — Maklerbuero mit Objektliste 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 "Kellermann Immobilien.dc.html" nach `docs/regeln/vorlagen.md`. Der Entwurf laedt Montserrat und Lato von `fonts.googleapis.com` und sieben Fotos von `images.unsplash.com`; dazu `{{ }}` in ueber dreissig Feldern, ein `` um die Objektliste, drei `` (Kopfleiste, Energieangaben, Cookie-Hinweis), `style-hover` an ueber vierzig Knoten und eine `DCLogic`-Klasse mit dem gesamten Objektbestand als Javascript-Feld — nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung. Der Sichtungsbericht fuehrt diesen Entwurf als PREMIUM-Kandidaten. Gebaut wird nach Benedikts Entscheidung nur die Starter-Fassung: kein `js/scroll.js`, keine Parallaxe, keine scroll-gebundenen Zaehler (V7). Abweichungen vom Entwurf, jede mit Grund ---------------------------------------- 1. Montserrat und Lato bleiben — beide liegen selbst gehostet im Bestand (`_shared/immobilien/fonts/`), eine Ersetzung war nicht noetig. Die Dateien werden KOPIERT, nicht verlinkt (V2). 2. Die Montserrat-Datei steht standardmaessig auf Gewicht 100 (Thin): `OS/2 usWeightClass` ist 100, der `wght`-Standardwert der `fvar` ebenfalls, und die Datei nennt sich intern "Montserrat Thin". Wer sie einbindet, ohne Gewichte ausdruecklich zu setzen, bekommt eine Seite in Haarstrich. Deklariert ist deshalb der Bereich 400–700, und JEDE Regel, die Montserrat benutzt, nennt ihr `font-weight` — auch `strong`, `th` und die Knopfbeschriftungen, die es sonst vom Browser bekaemen. 3. Der Entwurf verlangt Lato in 300, 400 und 700. Vorhanden sind genau zwei Dateien: 400 und 700. Die 300 wird NICHT deklariert. Wo der Entwurf 300 wollte (Hero-Vorspann), laeuft die Schrift in 400 und ist dafuer in einer helleren Abstufung und mit groesserer Zeilenhoehe gesetzt, nicht duenner — genau dort kippt eine echte 300 sonst unter 4,5:1. 4. Kursiv ist gestrichen. Zu keiner der beiden Familien liegt ein kursiver Schnitt vor; `font-style: italic` erzeugt darauf eine schraeg gescherte Faelschung. Der Entwurf setzte die drei Kundenstimmen kursiv — sie tragen jetzt die typografischen Anfuehrungszeichen im Text. 5. Der Entwurf bringt ueberhaupt keine Symbole mit (der Sichtungsbericht sagt "Symbole: keine") und behilft sich mit Buchstaben: "T" vor der Rufnummer, "E" vor der E-Mail, "f" und "in" als Sozialnetz-Kacheln, "✓" vor den Merkmalen, "★★★★★" ueber den Kundenstimmen. Alle sind ersetzt durch gezeichnete Strichsymbole aus `_shared/immobilien/icons.svg.html` (V3, V6) — inline, kein Abruf, keine Symbolschrift. 6. DAS ZEICHEN "→" IST NIRGENDS GETIPPT. Der Entwurf setzt es viermal ("Bewertung anfordern →", "Suchprofil starten →", "Ansprechpartner →"). U+2192 ist gegen die `cmap` jeder der vier Branchenschriften geprueft und in KEINER enthalten; es kaeme aus einer Ersatzschrift des Systems oder als Kaestchen. An seiner Stelle steht `arrow-right` (Nr. 24 im Symbolsatz) als gezeichnetes Zeichen. 7. Das Zahlenband stand auf `background-attachment: fixed` — Parallaxe, die der Basis-Stufe nicht zusteht (V7). Es ist ein Standbild geworden. 8. Die `kmFadeUp`-Keyframe am Hero-Textblock ist weg: das LCP-Element wird nicht animiert (Qualitaetsuntergrenze in `docs/VORLAGEN-STUFEN.md`). 9. `style-hover` an ueber vierzig Knoten ist echtes `:hover` und `:focus-visible` in dieser Datei (V6). Inline-`style` an jedem einzelnen Knoten sind Klassen und Tokens in `:root`. 10. Der Cookie-Hinweis ist ersatzlos weg (V12). Seine beiden Knoepfe riefen dieselbe Funktion auf und schlossen nur das Fenster; die Seite laedt ohnehin nichts von Dritten. Der echte kommt aus dem Zusatz `cookie-pro`. 11. "Mitglied im IVD Immobilienverband West" (dreimal: Merkmalsliste, Rolle unter Sabine Kellermann, Fusszeile) ist weg. Den Verband gibt es wirklich, die Mitgliedschaft nicht (V11). 12. "Zertifiziert nach § 34c GewO" ist weg — und zwar nicht nur, weil niemand diese Firma geprueft hat, sondern weil der Satz sachlich falsch ist: § 34c ist eine ERLAUBNIS, keine Zertifizierung. Dass ein Maklerbetrieb diese Erlaubnis braucht und wer sie erteilt hat, gehoert ins Impressum; darauf verweist der Abschnitt `#rechtliches`. 13. "Vermoegensschaden-Haftpflicht bis 2 Mio. €" nennt keinen Betrag mehr. Ein Betrag in einer Vorlage ist beim naechsten Vertrag falsch, und niemand liest eine Demo-Seite nach. 14. "4,9 von 5 Sternen (218 Bew.)" im Zahlenband und die drei mal fuenf Sterne ueber den Kundenstimmen sind weg (V11). Eine Zahl, die niemand vergeben hat, steht auf keiner unserer Seiten. An der Stelle im Zahlenband steht jetzt eine schlichte Tatsache aus dem Betrieb. 15. DIE DREI KUNDENSTIMMEN BLEIBEN — mit Namen, Benedikts ausdrueckliche Entscheidung. Das Portrait dazu wird erzeugt, nie das Foto eines echten Menschen unter falschem Namen. Im Markup steht dahinter ``. 16. DIE PROVISION NENNT KEINE ZAHL MEHR. Der Entwurf setzt an zwei Objekten "3,57 % inkl. MwSt." und an einem "Provisionsfrei fuer Kaeufer". Der Satz 3,57 % rechnet die gerade geltende Umsatzsteuer ein und ist beim naechsten Gesetz falsch; wer sie traegt, richtet sich ausserdem nach Objektart und Vereinbarung. Auf der Objektkarte steht deshalb "Provision laut Expose", darunter eine Zeile, die den Mechanismus erklaert, und in der Frageliste die ausfuehrliche Fassung. 17. DIE ENERGIEANGABE STEHT ALS TEXT DA UND OHNE KLASSENBUCHSTABEN. Der Entwurf trug "Bedarf, 118 kWh/(m²·a), Gas, Klasse D". Die Klassenleiter A+ bis H ist zweierlei zugleich — ein Pruefzeichen (V11) und eine Angabe, die veraltet, sobald sich die Verordnung aendert. Wert und Energietraeger bleiben, der Buchstabe faellt weg, und dahinter steht das Wort "Beispielangabe". 18. JEDE OBJEKTANGABE IST ALS BEISPIEL GEKENNZEICHNET. Anschrift, Preis und Energiewert sind erfunden; ohne Kennzeichnung liest eine echt aussehende Objektkarte sich wie ein echtes Angebot. Jede Karte traegt den Aufkleber "Beispielobjekt", der Preis das Wort "Beispielwert", und ueber der Liste steht ein Satz dazu. 19. "Alle 24 Objekte anzeigen" fuehrte im Entwurf auf `#kontakt` — ein Knopf, der eine Liste verspricht und ein Formular oeffnet (V17). Er ist weg; an seiner Stelle steht der Satz, dass die Beispielseite drei Objekte zeigt. 20. Die gestreifte Flaeche "Karte laedt erst nach Cookie-Zustimmung" ist eine gezeichnete Umgebungskarte geworden (V12, Muster: `lindenhof`). Kein Kartendienst, keine Kacheln, kein Dritter, der die Adresse des Besuchers sieht, bevor jemand zugestimmt hat. 21. Das Formular hat kein `action` und einen `type="button"`, im Markup steht der Grund (V12). Im Entwurf hing am Knopf ein `onClick="{{ absenden }}"`, das nur einen Dankestext in den Zustand schrieb. 22. Das Newsletter-Feld im Fuss ist weg. Es war ein Eingabefeld mit einem Knopf ohne jede Wirkung (V12). An seiner Stelle steht ein echter `mailto:`-Verweis — er tut, was er verspricht. 23. Die zwei Sozialnetz-Kacheln in der Kopfleiste ("f", "in") sind weg. Sie waren `` ohne Ziel und haetten kein Profil geoeffnet (V17). 24. Anschrift, Telefon und E-Mail sind erkennbar erfunden (V10, Benedikts Vorgabe): Musterstrasse 12, 12345 Musterstadt, 0123 456789, `…@kellermann-immobilien.example`. Der Entwurf nannte eine echte Strasse in Muenster, zwei erreichbare Rufnummern, eine Faxnummer und eine erreichbare Domain. Die Faxnummer ist gestrichen — sie haette eine zweite erfundene Nummer gebraucht und ein Symbol, das der Satz nicht hat. Muenster, Telgte, Everswinkel, Gievenbeck, Roxel und das Kreuzviertel sind zu Musterstadt und seinen Vierteln geworden. Die erfundene Umsatzsteuer-ID im Fuss ist weg. 25. Die drei Durchwahlen im Team ("0251 / 44 07 12 – 11", "– 14", "– 18") sind weg: drei erfundene Nummern statt einer. Die Karten tragen die E-Mail-Adresse, die eine Rufnummer steht ueber dem Raster. Der Satz "jede Nummer ist ein Durchwahlanschluss" ist damit auch weg — er stimmte dann nicht mehr. 26. "1987" bleibt, "35 Jahre vor Ort" wird zu "seit 1987". Eine Jahreszahl bleibt richtig, eine Differenz nicht: der Entwurf stammt aus 2022, wo 35 stimmte. Aus demselben Grund heisst der Neubau nicht mehr "KfW 55" — ein Foerderstandard mit Nummer veraltet — sondern nennt, was verbaut ist. 27. Die Jahreszahl im Fuss war 2022 und ist 2026. 28. NEU hinzugefuegt: ein Filter ueber der Objektliste (Alle, Haus, Wohnung, Neubau). Der Entwurf zeigte drei Karten ohne jede Ordnung nebeneinander. Der Filter laeuft ueber vier `` plus `:checked` (V8) — bedienbar mit der Tastatur, funktioniert mit abgeschaltetem Skript, und mit abgeschaltetem CSS stehen alle drei Karten untereinander da. 29. NEU hinzugefuegt: eine Frageliste als `
`-Aufklapper. Sie traegt die Aussagen, die der Entwurf als blosse Behauptungen setzte (Provision, Kosten der Bewertung, Unterlagen, Dauer, Arbeitsgebiet) — auffindbar ueber die Suche im Browser, bedienbar mit der Tastatur, ohne eine Zeile Javascript. 30. NEU hinzugefuegt: eine Leiste am unteren Bildrand (Anruf, Anfrage) fuer Handybreiten und ein Sprunglink zum Inhalt. Der Entwurf ist auf feste Breite gezeichnet — `grid-template-columns: repeat(3, 1fr)` und `repeat(4, 1fr)` ohne jede Bedingung — und laesst Handybesucher ohne Menue und ohne Anrufknopf stehen (V5). Farblogik --------- Der Entwurf hat ein sehr dunkles Petrolblau, ein Messinggold und einen warmen hellen Grund. #14212e traegt die Ueberschriften auf hellem Grund, die Kopfleiste, das Zahlenband und den Fuss. Gold #b3924f ist der Akzent. Der Grund ist Weiss, ruhige Abschnitte liegen auf #f6f4f0. Das Gold des Entwurfs traegt in dieser Datei KEINEN weissen Text mehr. Weiss auf #b3924f sind 2,94:1 — der Knopf im Kopf, die Marke, der Statusaufkleber auf jeder Objektkarte, der Kasten "35 Jahre" und der Knopf "Anfrage absenden" fielen im Entwurf allesamt durch. Statt das Gold zu verlieren, ist der Text darauf umgedreht: Auf goldener Flaeche steht das dunkle Petrol #14212e (5,55:1). Das ist die einzige sichtbare Abweichung von der Anmutung des Entwurfs, und sie erhaelt sein Kennzeichen — das warme Messing —, statt es abzudunkeln. Was jede Farbe darf: --gold #b3924f nur FLAECHE und Strich: Knopf, Balken unter jeder Kleinzeile, Kante ueber den Kontaktkarten, Statusaufkleber, Zitatkante. Als Flaeche traegt sie ausschliesslich --navy. NIE weisser Text darauf. --gold-dk #7e6024 TEXT auf hellem Grund: Verweise, Kleinzeilen, Symbole in den Karten. --gold-dk2 #6b5119 Hover dazu. --gold-lt #e0c384 Kleinzeilen, Zahlen und Symbole auf DUNKLEM Grund. --navy #14212e Ueberschriften auf hell; Flaeche fuer Kopfleiste, Zahlenband, Fuss, dunkle Kontaktkarte; der einzige Text, der auf --gold stehen darf. --navy-2 #1b2b3a nur Flaeche: Hover im Fuss und in der Handy-Leiste. Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #4a5560 auf --paper #ffffff 7,61:1 --ink #4a5560 auf --wash #f6f4f0 6,93:1 --ink #4a5560 auf --field #fbfaf8 7,30:1 (Formularfeld) --ink #4a5560 auf --tint #f0ece4 6,46:1 (Kennzahlenleiste) --ink #4a5560 auf --line #e8e3da 5,95:1 (--line traegt heute nur Kanten, nie Text; die fuenf --line-Zeilen stehen hier fuer den Fall, dass jemand sie zur Flaeche macht. Der Statusaufkleber sitzt auf --gold.) --muted #5b6672 auf --paper 5,85:1 --muted #5b6672 auf --wash 5,33:1 --muted #5b6672 auf --field 5,61:1 --muted #5b6672 auf --tint 4,97:1 --muted #5b6672 auf --line 4,58:1 --navy #14212e auf --paper 16,32:1 --navy #14212e auf --wash 14,86:1 --navy #14212e auf --tint 13,85:1 --navy #14212e auf --line 12,77:1 --gold-dk #7e6024 auf --paper 5,86:1 --gold-dk #7e6024 auf --wash 5,33:1 --gold-dk #7e6024 auf --field 5,61:1 --gold-dk #7e6024 auf --tint 4,97:1 --gold-dk #7e6024 auf --line 4,58:1 --gold-dk2 #6b5119 auf --paper 7,46:1 --gold-dk2 #6b5119 auf --wash 6,79:1 #ffffff auf --navy #14212e 16,32:1 #ffffff auf --navy-2 #1b2b3a 14,45:1 --navy #14212e auf --gold #b3924f 5,55:1 (Knopf, Marke, Statusaufkleber, Kasten "seit 1987") --on-dark #dde3e9 auf --navy 12,62:1 --gold-lt #e0c384 auf --navy 9,57:1 --gold-lt #e0c384 auf --navy-2 8,47:1 --on-dark-soft #9aa7b4 auf --navy 6,65:1 --on-dark-soft #9aa7b4 auf --navy-2 5,89:1 --gold #b3924f auf --navy 5,55:1 (nur Strich und Flaeche, kein Text) Die zwei Fotobaender — AM FERTIGEN BILD NACHGEMESSEN ---------------------------------------------------- Die Fotos sind da und nachgemessen, nach dem Verfahren aus `kanzlei-bergmann`: gesucht wird die HELLSTE 48-px-Kachel des fertigen Fotos, darauf wird der Schleier gerechnet, und gegen diesen Ton wird jede Textfarbe geprueft. Gerechnet ist jeweils das GANZE Bild und nicht nur der Ausschnitt unter dem Textblock — auf schmalen Fenstern schneidet `background-size: cover` anders an, und dann steht die Ueberschrift ueber einer anderen Stelle. HERO (`img/hero.jpg`, Schleier 86 % --navy, gleichmaessig) Hellste Kachel #e6eef7 (der bewoelkte Himmel ueber der Strasse), mit Schleier #313e4a: Weiss (h1, Knopfbeschriftung auf Geisterknopf) 10,95:1 --on-dark (Vorspann) 8,46:1 --gold-lt (Kleinzeile ueber der Ueberschrift) 6,42:1 Unter dem Textblock selbst ist es besser — das linke Bilddrittel ist als dunkle, detailarme Hecke bestellt: hellste Kachel dort #8a7e73 (ein heller Zweig unten links), mit Schleier #252e38, Weiss 13,76:1, --on-dark 10,64:1, --gold-lt 8,06:1. Der Entwurf legte hier einen SENKRECHTEN Verlauf von 62 % auf 72 % Deckung — oben am hellsten, und oben steht die Kleinzeile. Bei 62 % ueber dem hellen Himmel (Schleierton #646f7a) kaeme --gold-lt auf 3,00:1; die Kleinzeile faellt dort also durch, waehrend Weiss mit 5,13:1 noch durchkaeme. Deshalb deckt der Schleier hier ueberall gleich und mit 86 %. ZAHLENBAND (`img/zahlen.jpg`, Schleier 90 % --navy) Hellste Kachel #efeae6 (der bewoelkte Himmel am oberen Bildrand), mit Schleier #2a3540: --gold-lt (die vier Zahlen, 44 px) 7,32:1 --on-dark-soft (Beschriftung darunter) 5,09:1 Der Entwurf setzte hier 90 % Deckung und dazu `background-attachment: fixed`. Die Deckung bleibt, die Parallaxe faellt weg (V7). GEZEICHNETE KARTE (`.map`, eigene --map-*-Toene) Die Beschriftungen stehen auf vier Gruenden, nicht nur auf --map-bg: --map-ink #4f5560 auf --map-bg #f1eee8 6,48:1 --map-ink #4f5560 auf --map-block #e2ddd3 5,54:1 --map-ink #4f5560 auf --map-road #ffffff 7,50:1 --map-ink #4f5560 auf den zwei Schildchen (90 % --map-bg ueber --map-block, #f0ece6) 6,37:1 --map-accent-ink #14212e auf der Buero-Flaeche (12 % --navy ueber --map-bg, #d6d5d2) 11,12:1 Die Nadel ist --map-pin #b3924f und traegt keinen Text. Was ABSICHTLICH unter 4,5:1 liegt und deshalb NIE Text traegt: --gold #b3924f als Flaeche unter WEISSEM Text (2,94:1). Genau deshalb steht auf jeder goldenen Flaeche --navy und nicht Weiss. Aus dem Entwurf ersetzt, weil sie Text trugen und durchfielen: #ffffff auf #b3924f 2,94:1 (Knopf "Wert ermitteln", Knopf "Kostenlose Wertermittlung", Statusaufkleber auf jeder Objektkarte, Kasten "35 Jahre vor Ort", Knopf "Anfrage absenden", Knopf "OK" im Newsletter-Feld) -> Text auf Gold ist --navy, 5,55:1 #a4823c auf #ffffff 3,60:1 (jede Kleinzeile ueber jeder Ueberschrift, jeder Verweis im Fliesstext, die Rollen im Team) -> --gold-dk #7e6024, 5,86:1 #a4823c auf #f6f4f0 3,28:1 (dieselben Kleinzeilen auf dem hellen Grund) -> --gold-dk, 5,33:1 #8b95a0 auf #ffffff 3,04:1 (Ortsangabe und Kennzahlen-Beschriftung auf jeder Objektkarte, "Stand: 14. Maerz 2022", die drei Kleinzeilen unter den Leistungen, Rolle unter jedem Namen einer Kundenstimme, Fussnote "* Pflichtfelder") -> --muted #5b6672, 5,85:1 #8b95a0 auf #f6f4f0 2,77:1 (Provisionszeile im Objektfuss) -> --muted, 5,33:1 #6d7c8b auf #14212e 3,81:1 (Bueroezeiten in der Kopfleiste, Erlaubnis- zeile und Copyright im Fuss) -> --on-dark-soft #9aa7b4, 6,65:1 #8695a4 auf #14212e 5,32:1 (Anschrift im Fuss) -> bestanden, wird trotzdem --on-dark-soft, damit der Fuss zwei Stufen hat und nicht drei #9aa7b4 auf #14212e 6,65:1 (Kopfleiste) -> bestanden, bleibt #8b95a0 auf #f6f4f0 2,77:1 (Aufschrift der Karten-Attrappe "Karte laedt erst nach Cookie-Zustimmung") -> Karte ist ersetzt (V12) #b3924f auf #ffffff 2,94:1 (die drei Sterne-Reihen ueber den Kundenstimmen) -> Sterne sind ersetzt (V11) 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 FOTOS. Zwoelf Stueck, erzeugt und eingebaut; die Beschreibungen dazu stehen in `docs/vorlagen/bild-prompts-kellermann-immobilien.md`. Hero und Zahlenband sind CSS-Hintergruende (`img/hero.jpg`, `img/zahlen.jpg`); deshalb wird das Hero-Bild im Kopf der Seite vorgeladen (V18) — es steht ueber der Falz, und genau EINES darf vorgeladen werden. Solange es laedt, traegt die `background-color` die Flaeche, und beide Abschnitte sehen ruhig aus statt kaputt. Die uebrigen zehn 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 (gestreifte Flaeche mit Aufschrift, V13) sind damit ersatzlos entfallen. ========================================================================== */ /* ── Schriften (selbst gehostet, latin-Teilmenge, 84 576 B = 82,6 KB) ───── Montserrat ist variabel (Achse wght 100–900). Deklariert wird NUR der Bereich, der auch benutzt wird: 400 bis 700. Wer `font-weight: 100 900` schreibt, laedt sich stillschweigend die Erlaubnis ein, irgendwo ein Haarstrich-100 zu setzen — und bei DIESER Datei ist 100 auch noch der Standardwert. Lato liegt als zwei statische Dateien vor und traegt je genau einen Schnitt: 400 und 700. Kursive gibt es zu keiner der beiden. Budget der Basis-Stufe: 120 KB. Wird es eng, faellt Lato 700 weg, nicht 400 — Montserrat traegt hier alle Ueberschriften (siehe README der Branche). */ @font-face { font-family: "Montserrat"; src: url("../vendor/fonts/montserrat-var.woff2") format("woff2"); font-weight: 400 700; /* Datei traegt wght 100-900, Standard 100 (!) */ font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("../vendor/fonts/lato-400.woff2") format("woff2"); font-weight: 400; /* Datei traegt genau diesen einen Schnitt */ font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("../vendor/fonts/lato-700.woff2") format("woff2"); font-weight: 700; /* zweite Datei, gleiche Familie */ font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Montserrat laeuft rund 20 % BREITER als Lato ("n" 668 gegen 556 auf 1000 em). Faellt sie aus, wird die Ueberschrift schmaler und springt, sobald die Schrift da ist. 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: "Lato", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --navy: #14212e; /* Ueberschriften, dunkle Flaechen, Text auf --gold */ --navy-2: #1b2b3a; /* nur Flaeche: Hover im Fuss und in der Leiste */ --gold: #b3924f; /* nur Flaeche und Strich, NIE weisser Text darauf */ --gold-dk: #7e6024; /* Text auf hellem Grund */ --gold-dk2: #6b5119; /* Hover dazu */ --gold-lt: #e0c384; /* Kleinzeilen, Zahlen und Symbole auf dunkel */ --ink: #4a5560; --muted: #5b6672; --paper: #ffffff; --wash: #f6f4f0; --field: #fbfaf8; /* Formularfeld */ --tint: #f0ece4; /* Kennzahlenleiste und Objektfuss */ --line: #e8e3da; --line-2: #d9d3c8; --on-dark: #dde3e9; --on-dark-soft: #9aa7b4; --focus: #14212e; --focus-halo: #ffffff; --radius: 2px; /* der Entwurf rundet nichts */ --wrap: 1200px; --pad: clamp(1rem, 4vw, 1.5rem); --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: #14212e; } /* ── 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-body); font-weight: 400; font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } /* Montserrat steht in der Datei auf 100. `font-weight` wird deshalb hier und in JEDER weiteren Montserrat-Regel ausdruecklich genannt — auch dort, wo der Browser es sonst von allein setzt. */ h1, h2, h3 { font-family: var(--font-title); font-weight: 600; color: var(--navy); line-height: 1.22; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2rem, 7.2vw, 3.4rem); line-height: 1.18; } h2 { font-size: clamp(1.6rem, 5vw, 2.35rem); line-height: 1.28; } h3 { font-size: 1.2rem; } h4 { font-family: var(--font-title); font-weight: 600; font-size: .95rem; color: var(--navy); margin: 0 0 .6rem; } /* NICHT weglassen — ohne diese Zeile bekommt jedes in einer Montserrat-Umgebung das Dateistandardgewicht 100. */ strong, b, th { font-weight: 700; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--gold-dk); text-decoration: none; } a:hover { color: var(--gold-dk2); text-decoration: underline; } /* ── Bausteine ──────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } /* Die Kleinzeile ueber jeder Ueberschrift. Der Entwurf setzt sie in Versalien mit sehr weiter Sperrung — das bleibt, nur die Farbe wechselt (siehe Kopf). */ .eyebrow { display: inline-flex; align-items: center; font-family: var(--font-title); font-weight: 600; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dk); margin: 0 0 1rem; } .eyebrow--bar::before { content: ""; width: 3px; height: 1.15em; margin-right: .8rem; background: var(--gold); flex: none; } .is-dark .eyebrow { color: var(--gold-lt); } .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: 600; 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); } /* Der Hinweis, dass eine Angabe erfunden ist. Er steht dort, wo eine Zahl sonst wie ein echtes Angebot aussaehe. */ .hint { font-size: .82rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.6rem; } .hint--after { margin: 1.6rem 0 0; max-width: 74ch; } /* ── 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; } /* ── Fotos in den Kacheln ─────────────────────────────────────────────────── */ /* Die drei Bilder fuellen ihre Spalte. Ohne `width: 100%` blieben sie bei ihrer eigenen Pixelbreite stehen, sobald die Spalte breiter wird — die Regel oben gibt ihnen nur eine Obergrenze, keine Breite. Die Hoehe bleibt `auto`: `width` und `height` im Markup bringen das Seitenverhaeltnis mit, der Platz steht also schon, bevor das Bild da ist. */ .about__media > img, .obj__media > img, .person > img { width: 100%; } /* ── Knoepfe ────────────────────────────────────────────────────────────── */ /* Der Entwurf setzt weissen Text auf #b3924f — 2,94:1. Statt das Gold abzudunkeln und damit sein Kennzeichen zu verlieren, steht darauf jetzt das dunkle Petrol: 5,55:1, und der Knopf behaelt seinen Messington. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-title); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: 1.05rem 2rem; border: 1px 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; } .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy); } .btn--gold:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; } .btn--navy:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } /* 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(--navy); } .btn--block { width: 100%; } /* ── Kopfleiste ─────────────────────────────────────────────────────────── */ .topbar { background: var(--navy); color: var(--on-dark-soft); font-size: .8rem; line-height: 1.5; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.6rem; padding-block: .6rem; } .topbar__item { display: inline-flex; align-items: center; gap: .5rem; } .topbar .icon { color: var(--gold-lt); 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); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; } .brand { display: flex; align-items: center; gap: .85rem; color: inherit; } .brand:hover { text-decoration: none; } .brand__mark { display: grid; place-items: center; width: 42px; height: 42px; flex: none; background: var(--navy); color: var(--gold-lt); } .brand__mark svg { width: 24px; height: 24px; } .brand__name { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); line-height: 1.2; } .brand__sub { display: block; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dk); margin-top: .2rem; } .nav { display: none; } .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Der Schleier deckt ueberall gleich (86 %). Der Entwurf verlief von 62 % auf 72 % — bei 62 % steht die goldene Kleinzeile ueber dem hellen Himmel und kaeme dort auf 3,00:1 (Weiss auf 5,13:1). Solange das Foto fehlt oder laedt, traegt --navy die Flaeche. */ .hero { position: relative; display: flex; align-items: center; min-height: 30rem; background-color: var(--navy); background-image: linear-gradient(rgb(20 33 46 / .86), rgb(20 33 46 / .86)), var(--ew-kopfbild, url("../img/hero.jpg")); background-size: cover; background-position: center 55%; color: #fff; } .hero__inner { padding-block: clamp(3.5rem, 11vw, 7.5rem); } /* Kein zu enger Deckel: Bei 18ch bricht "Immobilien verkaufen –" auf Rechnerbreite so um, dass der Gedankenstrich allein in einer Zeile steht. Montserrat laeuft rund 20 % breiter als die Ersatzschriften — deshalb wird der Deckel hier grosszuegig gesetzt und der Umbruch vom
gemacht. */ .hero h1 { color: #fff; max-width: 26ch; } .hero__sub { color: var(--on-dark); font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.85; max-width: 56ch; margin: 0 0 2.2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Drei Kontaktkarten ─────────────────────────────────────────────────── */ .leadband { background: var(--wash); } .leadband__inner { padding-block: clamp(2.5rem, 7vw, 4rem); } .leadgrid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .leadcard { background: var(--paper); border-top: 3px solid var(--gold); padding: 2.2rem 1.9rem; box-shadow: 0 6px 30px rgb(20 33 46 / .09); } .leadcard h3 { margin-bottom: .7rem; font-size: 1.3rem; } .leadcard p { font-size: .95rem; margin-bottom: 1.2rem; } /* Die dritte Karte traegt die Rufnummer als Ueberschrift. Der Verweis darin erbt die Ueberschriftfarbe, sonst steht mitten im Kopf eine goldene Zeile, die aussieht wie ein zweiter Knopf. */ .leadcard h3 a { color: inherit; } .leadcard h3 a:hover { color: var(--gold-dk); } /* Die mittlere Karte ist im Entwurf dunkel. Sie bekommt .is-dark, damit der Fokusring dort die umgekehrte Aufteilung benutzt. */ .leadcard--dark { background: var(--navy); box-shadow: 0 6px 30px rgb(20 33 46 / .16); } .leadcard--dark h3 { color: #fff; } .leadcard--dark p { color: var(--on-dark); } .more { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-title); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; } .more .icon { width: 1rem; height: 1rem; } .leadcard--dark .more { color: var(--gold-lt); } .leadcard--dark .more:hover { color: #fff; } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section { padding-block: clamp(3rem, 9vw, 5.5rem); } .section--wash { background: var(--wash); } .section--line { border-top: 1px solid var(--line); } .section__head { margin-bottom: 2.6rem; } .section__head h2 { margin-bottom: 0; } .section__head p { font-size: 1.02rem; margin: 1.1rem 0 0; } .section__head--center { text-align: center; max-width: 44rem; margin-inline: auto; } .section__head--center .eyebrow { justify-content: center; } .section__head--split { display: grid; gap: 1.2rem; } /* ── Ueber uns ──────────────────────────────────────────────────────────── */ .about { display: grid; gap: 2.4rem; } .about__media { position: relative; } /* Im Entwurf steht "35". Eine Differenz veraltet, eine Jahreszahl nicht. */ .about__badge { margin: 0; background: var(--gold); color: var(--navy); padding: 1.3rem 1.6rem; text-align: center; font-family: var(--font-title); font-weight: 600; /* Montserrat-Regel nennt ihr Gewicht, ausnahmslos */ } .about__badgenum { display: block; font-weight: 700; font-size: 1.6rem; line-height: 1; } .about__badgesub { display: block; font-weight: 600; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; margin-top: .45rem; } .checks { display: grid; grid-template-columns: 1fr; gap: .85rem; margin: 1.8rem 0 2.2rem; } .checks p { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-size: .95rem; } .checks .icon { color: var(--gold-dk); margin-top: .22rem; } /* ── Leistungen ─────────────────────────────────────────────────────────── */ .svcgrid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; } .svccard { background: var(--paper); border-bottom: 3px solid var(--line); padding: 2.4rem 2rem; transition: border-color 170ms ease; } .svccard:hover { border-bottom-color: var(--gold); } .svccard__num { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--gold); color: var(--gold-dk); font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; margin-bottom: 1.4rem; } .svccard h3 { margin-bottom: .8rem; font-size: 1.25rem; } .svccard p { font-size: .95rem; margin-bottom: 1rem; } .svccard__note { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-title); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .svccard__note .icon { width: 1rem; height: 1rem; color: var(--gold-dk); } /* ── Objektliste mit Filter: Radios plus :checked, kein Javascript ───────── */ .objs { position: relative; } /* Die Radios bleiben bedienbar und mit der Tastatur erreichbar; sie sind nur optisch entfernt. Sichtbar ist das