/* ===================================================================== Immobilienmomente an die CI der Website angleichen. 24.10.2026. André: „fehlerhafte Positionierungen, CI nicht eingehalten gem. Haupt-Website etc bei /immobilienservice/ und den weiteren die dazukamen, bitte umfangreich prüfen und korrigieren“. Ricks Paket V7 bringt ein eigenes Stylesheet mit. Dieses hier wird von build/immobilienservice-v7.py hinter dessen Stylesheet gesetzt; die Farbwerte des Pakets setzt dasselbe Skript vorher auf die Hauswerte (Mischungen aus Navy, Gold, #f0f0f0). Hier steht, was sich nicht über eine Farbe lösen lässt. Werte jeweils von der Website gemessen. ===================================================================== */ /* ---- 1. Die Hausschriften laden ------------------------------------ Das Paket nennt Inter und Source Serif 4, lädt sie aber nicht - der Browser setzte Ersatzschriften. Dieselben Dateien wie die Website. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- 2. Hauswerte --------------------------------------------------- */ :root { --navy: #081f38; --ink: #081f38; --muted: color-mix(in srgb, #081f38 70%, #f0f0f0); --paper: #f0f0f0; --cream: color-mix(in srgb, #081f38 6%, #f0f0f0); --line: color-mix(in srgb, #081f38 16%, #f0f0f0); --goldlight: color-mix(in srgb, #081f38 6%, #f0f0f0); --gold: linear-gradient(to top, #d4952a 0%, #ebb641 100%); --radius: 14px; --body: Inter, system-ui, sans-serif; --display: "Source Serif 4", Georgia, serif; --schatten-knopf: 0 1px 2px rgb(8 31 56 / 0.10), 0 10px 30px -2px rgb(8 31 56 / 0.18); --schatten-knopf-hover: 0 2px 4px rgb(8 31 56 / 0.14), 0 16px 40px -4px rgb(8 31 56 / 0.26); } /* Grundfarbe bleibt Navy (--ink): Das Paket dämpft Absätze selbst, fett gesetzte Zeilen und Namen erben die Grundfarbe - gedämpft wären sie zu leise. */ body { background: #f0f0f0; } /* ---- 3. Überschriften wie auf der Website: Source Serif 4, Gewicht 400 */ h1, h2 { font-weight: 400; letter-spacing: -0.026em; } main h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; } /* Formular- und Kontaktköpfe bleiben Inter: Dort sind es Bedienzeilen, keine Abschnittstitel. */ .contact-form h3, .whatsapp-panel h3, .contact-save-panel h3 { font-family: var(--body); font-weight: 600; } /* ---- 4. Knöpfe wie .btn--navi der Kopfzeile (Regel 29) -------------- */ .btn { border-radius: 14px; font-weight: 600; font-size: 15px; min-height: 54px; gap: 14px; transition: background-color 0.32s ease, color 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease; } .btn:hover { transform: none; } .btn-primary { background: var(--gold); color: var(--navy); box-shadow: var(--schatten-knopf); } .btn-primary:hover { box-shadow: var(--schatten-knopf-hover); } /* Outlined: 1 px Navy, beim Überfahren füllt er sich (Regel 39). */ .btn-outline { border: 1px solid var(--navy); color: var(--navy); background: transparent; } .btn-outline:hover { background: var(--navy); color: #f0f0f0; } .btn-outline:hover img.icon { filter: brightness(0) invert(0.94); } /* Der Pfeil klebte im ImmobilienCheck-Kasten am Wort: Der Text darf schrumpfen und umbrechen, der Pfeil nicht. */ .btn > span:first-child { min-width: 0; } .btn > .arrow { flex: none; } /* Auf dem Telefon setzt das Paket diesen Knopf auf `display: block` (`.hero-optional a`); dann wirkt kein Abstand. */ .hero-optional.ic-hero-choice .ic-secondary-button { display: inline-flex; align-items: center; justify-content: center; } /* WhatsApp ist auf der Website der goldene Knopf (wa__knopf = btn--navi), nicht ein grüner. */ .btn-whatsapp { background: var(--gold); color: var(--navy); border: 1px solid transparent; border-radius: 14px; box-shadow: var(--schatten-knopf); } .btn-whatsapp:hover { background: var(--gold); color: var(--navy); border-color: transparent; box-shadow: var(--schatten-knopf-hover); } /* Die Wahl des Kontaktwegs: ausgewählt ist navy, nicht grün. */ .contact-v6 .method-options label:has(input:checked) { border-color: var(--navy); background: color-mix(in srgb, #081f38 6%, #f0f0f0); box-shadow: inset 0 0 0 1px var(--navy); } .whatsapp-panel { border-color: var(--line); background: #f0f0f0; } /* ---- 5. Kopfzeile --------------------------------------------------- Das Logobild hat weißen Grund, kein Alpha. Auf der hellgrauen Leiste stünde es als Kasten; `multiply` nimmt das Weiß heraus, die Farben bleiben, wie sie sind. */ .masthead { background: rgb(240 240 240 / 0.97); } .brand img { mix-blend-mode: multiply; } /* Logo größer (26.10.2026). Rick, mit Handyfoto der Startseite: „Ihre Immobilie verkaufen …“ ist richtig fett und groß. Verhältnismäßig gesehen zu dem Text ist das Logo oben mini klein. […] Ich tendiere eher dazu, das Logo ein bisschen größer zu machen.“ Gemessen bei 390 px: 138 px sichtbare Breite neben einer Überschrift in 42 px - Verkaufsreife und Verkaufsakte stehen mit rund 200 px daneben. Das Haus steht über dem Schriftzug, deshalb begrenzte die feste Höhe (68 px) die Breite. Jetzt bestimmt die Breite, die Höhe folgt dem Bild. */ /* Noch einen Klecks größer (03.11.2026), Rick: „das Immobilienmomente-Logo einen Klecks größer machen. Das hatten wir schon und dann wurde es ausgetauscht“. Rund 15 Prozent je Stufe; dazu oben Luft, damit das Dach nicht an der Kopfkante steht. */ .brand { flex-basis: 260px; } .brand img { width: 260px; height: auto; } .masthead .wrap { padding-block: 8px; } @media (max-width: 1120px) { .brand { flex-basis: 240px; } .brand img { width: 240px; } } @media (max-width: 860px) { .brand, .brand img { width: 224px; flex-basis: 224px; height: auto; } } @media (max-width: 620px) { .brand, .brand img { width: 210px; flex-basis: 210px; height: auto; } } @media (max-width: 400px) { .brand, .brand img { width: min(210px, calc(100vw - 150px)); flex-basis: auto; } } /* Das Paket begrenzt das Logo hier auf 180 px, damit die Navigation passt. */ @media (min-width: 861px) and (max-width: 1180px) { .brand { max-width: 207px; } } /* Zwischen 861 und 960 px ragte die Navigation schon mit 180 px um 16 px über den Rand (gemessen 03.11.2026). Hier bleibt das Logo kleiner, die Abstände enger. */ @media (min-width: 861px) and (max-width: 960px) { .brand { max-width: 172px; } .mainnav { gap: 10px; } } .topbar { background: #f0f0f0; } /* ---- 6. Fußzeile hell, wie auf der Website ---------------------------- */ .footer { background: #f0f0f0; color: var(--muted); border-top: 1px solid var(--line); } .footer h3 { color: var(--navy); } .footer a { color: var(--navy); } .footer-note { color: var(--muted) !important; } /* ---- 7. Der Rückweg zur Website (24.10.2026) --------------------------- Nur `nav.`: In der Kopfleiste von Immobilienmomente trägt ein dieselbe Klasse (rueckweg.in_paketleiste) - dort bleibt die Leiste, wie sie ist. Dieselbe Absenderleiste wie auf den Themenseiten (build/markenvorschauen-form.py): Navyband, helle Schrift, rechts „Zur Website →“. Hier nur für /kontakt-speichern/, das keine eigene Kopfleiste hat; Immobilienmomente trägt den Weg in seiner Kopfleiste. */ nav.vierpunktnull-absender { background: #081f38; color: #f0f0f0; font: 400 0.875rem/1.35 Inter, system-ui, sans-serif; } nav .vierpunktnull-absender__innen { max-width: 1344px; margin: 0 auto; padding: 0.25rem clamp(16px, 4vw, 48px); min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } nav.vierpunktnull-absender strong { font-weight: 600; } nav .vierpunktnull-absender__weg { color: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size 0.32s ease; } nav .vierpunktnull-absender__weg:hover, nav .vierpunktnull-absender__weg:focus-visible { background-size: 100% 2px; } nav .vierpunktnull-absender__weg:focus-visible { outline: 2px solid #ebb641; outline-offset: 3px; border-radius: 4px; } @media (max-width: 420px) { nav .vierpunktnull-absender__vorsatz { display: none; } } /* ---- 8. Kein seitliches Wischen auf schmalen Telefonen (25.10.2026) ---- Rick: „Dieses Sliden mobil darf NICHT sein!“ Gemessen in WebKit bei 320 px: sieben Seiten breiter als der Bildschirm - Spalten wurden nicht schmaler als ihr breitester Inhalt, die Arbeitsblatt-Tabellen hatten feste Mindestbreiten. `:where()` hat kein Gewicht, bewusst gesetzte Mindestbreiten gewinnen weiter. Tabellen scrollen in sich. */ @media (max-width: 480px) { main :where(*) { min-width: 0; } main :where(h1, h2, h3, h4, p, li, a, span, td, th, dd, dt, address) { overflow-wrap: break-word; } main table { display: block; max-width: 100%; overflow-x: auto; } } /* ---- 8b. Die Leiste oben auf dem Handy in EINER Zeile (26.10.2026) ---- Rick zu Verkaufsakte, gilt hier genauso: „diese Zeile da oben mit der Telefonnummer und der Webseite, quasi ein Link weg, bevor man überhaupt gestartet ist. […] Mir wirkt es irgendwie deplatziert.“ Gemessen: Die Leiste brach bei 390 px in zwei Reihen um. Wie auf den Themenseiten fällt die Nummer auf dem Handy heraus (sie steht in der Aktionsleiste unten und auf der Kontaktseite); „Zur Website“ bleibt als Rückweg. */ @media (max-width: 620px) { .topbar a[href^="tel:"] { display: none; } .topbar > .wrap { flex-wrap: nowrap !important; justify-content: space-between; } .topbar > .wrap > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } } /* ---- 9. Überschrift auf dem Handy (26.10.2026). Rick: „Da ist ‚Ihre Immobilie verkaufen. Wir kümmern uns um die Arbeit' richtig fett und groß. […] Wenn man bedenkt, dass man das am Handy sieht, ist der Text wow.“ Gemessen auf allen Unterseiten bei 390 px: 35 bis 48 px, je nach Seite. Seither ein Maß für die ganze Familie: 38 px ab 390 px Breite, darunter gleitend bis 32 px bei 320 px. `!important`, weil die Pakete ihre Größe an sechs verschiedenen Selektoren festmachen (.hero h1, .hero-copy h1, .container h1 …) - eine Regel, die eine davon übersieht, liefe dort ins Leere. */ @media (max-width: 620px) { h1 { font-size: clamp(2rem, 9.75vw, 2.375rem) !important; } } @media (prefers-reduced-motion: reduce) { .btn, .btn-whatsapp { transition: none; } } /* ═══ SPRUNGZIELE ═══ 28.10.2026, Rick: „wenn ich ganz am Anfang auf Kontakte auswählen drücke, lande ich da, also zu tief. Wenn du das ein bisschen nach oben rutschen könntest.“ Gemessen bei 390 px: Kopfzeile endet bei 87 px, der Abschnitt #kontakt begann bei 200 px, seine Überschrift bei 275 px. Das Paket setzt den Abstand doppelt - `scroll-padding-top` am html UND `scroll-margin-top` an jedem Abschnitt -, und darunter steht noch das Abschnittspolster. Jetzt wie auf der Website (Regel „Sprungziel doppelt“): Die Kopfhöhe steht allein in `scroll-padding-top`, die Abschnitte nehmen ihr Polster bis auf 20 px per negativem `scroll-margin-top` zurück. Die Polster stammen aus dem Paket: 76 px, ab 860 px Breite abwärts 55, ab 620 px 46. */ html { scroll-padding-top: 108px; } :where(section[id], div[id], h2[id], h3[id]) { scroll-margin-top: 0; } section.section[id] { scroll-margin-top: -56px; } @media (max-width: 860px) { section.section[id] { scroll-margin-top: -35px; } } @media (max-width: 620px) { html { scroll-padding-top: 88px; } section.section[id] { scroll-margin-top: -26px; } } /* ═══ DER GLANZ AUS DEM LOGO ═══ 30.10.2026 Dieselbe Ebene wie auf der Website (styles/4punkt0.css, „DER GLANZ AUS DEM LOGO"): ruhende Lichtstreifen, Wölbung, Goldrand, dazu das wandernde Licht beim Überfahren. Die Knopfarten hier sind im Browser gemessen (alle Seiten von Immobilienmomente, 390 und 1440 px). Werte der Palette: Gold #d4952a, Navy 8 31 56, Weiß 240 240 240. */ .btn-primary, .btn-whatsapp, .button-primary, .download, .wa-launch, .btn-outline, .nav-contact, .chat, .menubtn, .topic-filters button, [data-clear-search] { position: relative; overflow: hidden; isolation: isolate; --glanz-a: .55; --glanz-b: .28; --glanz-oben: .38; --glanz-unten: .10; --glanz-kante: .55; --glanz-rand: color-mix(in srgb, #d4952a 75%, rgb(0 0 0)); } .topic-filters button[aria-pressed="true"], .chat:hover, .chat:focus-visible, .btn-outline:hover, .btn-outline:focus-visible { --glanz-a: .16; --glanz-b: .08; --glanz-oben: .12; --glanz-unten: 0; --glanz-kante: .18; --glanz-rand: #d4952a; } .btn-primary::before, .btn-whatsapp::before, .button-primary::before, .download::before, .wa-launch::before, .btn-outline::before, .nav-contact::before, .chat::before, .menubtn::before, .topic-filters button::before, [data-clear-search]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background-image: linear-gradient(105deg, transparent 40%, rgb(240 240 240 / .10) 45%, rgb(240 240 240 / .42) 50%, rgb(240 240 240 / .10) 55%, transparent 60%), linear-gradient(to bottom, rgb(240 240 240 / var(--glanz-oben)), transparent 45%, rgb(0 0 0 / var(--glanz-unten))); background-size: 250% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; box-shadow: inset 0 0 0 1.5px var(--glanz-rand), inset 0 2px 0 rgb(240 240 240 / var(--glanz-kante)); transition: background-position .75s ease; } .btn-primary:hover::before, .btn-whatsapp:hover::before, .button-primary:hover::before, .download:hover::before, .wa-launch:hover::before, .btn-outline:hover::before, .nav-contact:hover::before, .chat:hover::before, .menubtn:hover::before, .topic-filters button:hover::before, [data-clear-search]:hover::before { background-position: 0 0, 0 0; } @media (prefers-reduced-motion: reduce) { .btn-primary::before, .btn-whatsapp::before, .button-primary::before, .download::before, .wa-launch::before, .btn-outline::before, .nav-contact::before, .chat::before, .menubtn::before, .topic-filters button::before, [data-clear-search]::before { transition: none; background-position: 100% 0, 0 0; } } @media print { .btn-primary::before, .btn-whatsapp::before, .button-primary::before, .download::before, .btn-outline::before { display: none; } } /* Goldrand nur an gefüllten Knöpfen (30.10.2026, „ungefüllte Buttons tragen diesen komischen Rahmen, BITTE NICHT") - umrandete und helle behalten allein ihre eigene Kontur. */ .btn-outline, .nav-contact, .chat, .menubtn, .topic-filters button, [data-clear-search], .btn-outline:hover, .btn-outline:focus-visible, .chat:hover, .chat:focus-visible { --glanz-rand: transparent; --glanz-kante: 0; } .topic-filters button[aria-pressed="true"] { --glanz-kante: .18; } /* Kein Goldrand mehr, auch nicht an gefüllten Knöpfen (30.10.2026, „der button oben rechts hat auch einen gar nicht passenden Rahmen, wo noch? entferne"). */ .btn-primary::before, .btn-whatsapp::before, .button-primary::before, .download::before, .wa-launch::before, .btn-outline::before, .nav-contact::before, .chat::before, .menubtn::before, .topic-filters button::before, [data-clear-search]::before { --glanz-rand: transparent; } /* ═══ GOLD IN DEN TÖNEN DES LOGOS ═══ 30.10.2026 „andere Goldelemente fernab von fertigen Bildern müssen auch die Töne des logos haben samt alles Effekten". Dieselben Werte wie auf der Website (`--verlauf-marke`, `--linie-gold-waagerecht`): Tiefe #c28020, Mitte #d4952a, Hell #ebb641, Glanzlicht #fde47f. Ohne Lichtstreifen seit 02.11.2026. */ .hero-stamp { background: linear-gradient(to top, #c28020 0%, #d4952a 8%, #d4952a 30%, #ebb641 72%, #fde47f 100%); } .ic-entry-brand::before { background: linear-gradient(90deg, #fde47f 0%, #ebb641 30%, #d4952a 70%, #c28020 100%); } /* Domain-1-Paket KN-C03: kompakter persönlicher Abschluss. */ .kontakt-kompakt .wrap{max-width:760px} .kontakt-kompakt h2{margin:0 0 .6rem} .kontakt-wege{display:flex;gap:.5rem;margin-top:1.25rem} .kontakt-wege .btn{flex:1 1 0;min-width:0;justify-content:center;min-height:54px;padding-inline:.5rem;font-size:.875rem;line-height:1.25;white-space:normal;text-align:center;text-wrap:balance} .kontakt-kompakt .small{margin:.75rem 0 0;font-weight:600} .kontakt-kompakt .hours{margin:.5rem 0 0} .kontakt-kompakt .person-line{margin-top:1.25rem} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem} .hero-actions .btn{margin:0} .hero-actions .small{flex:0 0 100%;margin:0} @media(max-width:640px){.hero-actions{flex-wrap:wrap}.hero-actions .btn{flex:1 1 0;min-width:0;padding-inline:.625rem;font-size:.9375rem;line-height:1.25;white-space:normal;text-align:center;text-wrap:balance}.hero-actions .btn .arrow{display:none}} .solution-scope p{margin:0} /* Bedienschrift nie unter 14 px (31.10.2026). Die Grundschrift der Seite ist auf dem Telefon verkleinert, jede rem-Angabe schrumpft mit: Knöpfe standen bei 12,5 px, Textverweise bei 12,8 px. Die Untergrenze steht deshalb in px. */ html body .btn,html body .d9-knoepfe .btn,html body .kontakt-wege .btn,html body .mobile-contact .btn{font-size:max(14px,.875rem)} html body .hero-actions .btn{font-size:max(14px,.9375rem)} html body .text-link,html body .card-copy .text-link,html body .secondary-card .text-link,html body .check-alternative .text-link,html body .knowledge-card .text-link,html body .evidence-actions>.text-link{font-size:max(14px,.875rem)} /* Die mobile Kontaktleiste setzt ihre Schrift im Paket mit !important auf .78 bis .85rem. */ html body .mobile-contact-v6 .btn{font-size:max(14px,.875rem)!important}